source: pro-violet-viettel/docs/template/assets/js/uncompressed/fuelux/fuelux.wizard.js @ 400

Last change on this file since 400 was 400, checked in by dungnv, 11 years ago
  • Property svn:mime-type set to text/plain
File size: 4.5 KB
Line 
1/*
2 * Fuel UX Wizard
3 * https://github.com/ExactTarget/fuelux
4 *
5 * Copyright (c) 2012 ExactTarget
6 * Licensed under the MIT license.
7 */
8
9(function($ , undefined) {
10
11        //var $ = require('jquery');
12
13
14        // WIZARD CONSTRUCTOR AND PROTOTYPE
15
16        var Wizard = function (element, options) {
17                var kids;
18
19                this.$element = $(element);
20                this.options = $.extend({}, $.fn.wizard.defaults, options);
21                this.currentStep = 1;
22                this.numSteps = this.$element.find('li').length;
23                this.$prevBtn = this.$element.find('button.btn-prev');
24                this.$nextBtn = this.$element.find('button.btn-next');
25
26                kids = this.$nextBtn.children().detach();
27                this.nextText = $.trim(this.$nextBtn.text());
28                this.$nextBtn.append(kids);
29
30                // handle events
31                this.$prevBtn.on('click', $.proxy(this.previous, this));
32                this.$nextBtn.on('click', $.proxy(this.next, this));
33                this.$element.on('click', 'li.complete', $.proxy(this.stepclicked, this));
34               
35                this.$stepContainer = this.$element.data('target') || 'body';
36                this.$stepContainer = $(this.$stepContainer);
37        };
38
39        Wizard.prototype = {
40
41                constructor: Wizard,
42
43                setState: function () {
44                        var canMovePrev = (this.currentStep > 1);
45                        var firstStep = (this.currentStep === 1);
46                        var lastStep = (this.currentStep === this.numSteps);
47
48                        // disable buttons based on current step
49                        this.$prevBtn.attr('disabled', (firstStep === true || canMovePrev === false));
50
51                        // change button text of last step, if specified
52                        var data = this.$nextBtn.data();
53                        if (data && data.last) {
54                                this.lastText = data.last;
55                                if (typeof this.lastText !== 'undefined') {
56                                        // replace text
57                                        var text = (lastStep !== true) ? this.nextText : this.lastText;
58                                        var kids = this.$nextBtn.children().detach();
59                                        this.$nextBtn.text(text).append(kids);
60                                }
61                        }
62
63                        // reset classes for all steps
64                        var $steps = this.$element.find('li');
65                        $steps.removeClass('active').removeClass('complete');
66                        $steps.find('span.badge').removeClass('badge-info').removeClass('badge-success');
67
68                        // set class for all previous steps
69                        var prevSelector = 'li:lt(' + (this.currentStep - 1) + ')';
70                        var $prevSteps = this.$element.find(prevSelector);
71                        $prevSteps.addClass('complete');
72                        $prevSteps.find('span.badge').addClass('badge-success');
73
74                        // set class for current step
75                        var currentSelector = 'li:eq(' + (this.currentStep - 1) + ')';
76                        var $currentStep = this.$element.find(currentSelector);
77                        $currentStep.addClass('active');
78                        $currentStep.find('span.badge').addClass('badge-info');
79
80                        // set display of target element
81                        var target = $currentStep.data().target;
82                        //$('.step-pane').removeClass('active');
83                        this.$stepContainer.find('.step-pane').removeClass('active');
84                        $(target).addClass('active');
85
86                        this.$element.trigger('changed');
87                },
88
89                stepclicked: function (e) {
90                        var li = $(e.currentTarget);
91
92                        var index = this.$element.find('li').index(li);
93
94                        var evt = $.Event('stepclick');
95                        this.$element.trigger(evt, {step: index + 1});
96                        if (evt.isDefaultPrevented()) return;
97
98                        this.currentStep = (index + 1);
99                        this.setState();
100                },
101
102                previous: function () {
103                        var canMovePrev = (this.currentStep > 1);
104                        if (canMovePrev) {
105                                var e = $.Event('change');
106                                this.$element.trigger(e, {step: this.currentStep, direction: 'previous'});
107                                if (e.isDefaultPrevented()) return;
108
109                                this.currentStep -= 1;
110                                this.setState();
111                        }
112                },
113
114                next: function () {
115                        var canMoveNext = (this.currentStep + 1 <= this.numSteps);
116                        var lastStep = (this.currentStep === this.numSteps);
117
118                        if (canMoveNext) {
119                                var e = $.Event('change');
120                                this.$element.trigger(e, {step: this.currentStep, direction: 'next'});
121
122                                if (e.isDefaultPrevented()) return;
123
124                                this.currentStep += 1;
125                                this.setState();
126                        }
127                        else if (lastStep) {
128                                this.$element.trigger('finished');
129                        }
130                },
131
132                selectedItem: function (val) {
133                        return {
134                                step: this.currentStep
135                        };
136                }
137        };
138
139
140        // WIZARD PLUGIN DEFINITION
141
142        $.fn.wizard = function (option, value) {
143                var methodReturn;
144
145                var $set = this.each(function () {
146                        var $this = $(this);
147                        var data = $this.data('wizard');
148                        var options = typeof option === 'object' && option;
149
150                        if (!data) $this.data('wizard', (data = new Wizard(this, options)));
151                        if (typeof option === 'string') methodReturn = data[option](value);
152                });
153
154                return (methodReturn === undefined) ? $set : methodReturn;
155        };
156
157        $.fn.wizard.defaults = {};
158
159        $.fn.wizard.Constructor = Wizard;
160
161
162        // WIZARD DATA-API
163
164        $(function () {
165                $('body').on('mousedown.wizard.data-api', '.wizard', function () {
166                        var $this = $(this);
167                        if ($this.data('wizard')) return;
168                        $this.wizard($this.data());
169                });
170        });
171
172})(window.jQuery);
Note: See TracBrowser for help on using the repository browser.