| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332 |
- // Step
- function Step() {
- return this.initialize.apply(this, Array.prototype.slice.call(arguments));
- }
- $.extend(Step.prototype, {
- TRANSITION_DURATION: 200,
- initialize: function(element, wizard, index) {
- this.$element = $(element);
- this.wizard = wizard;
- this.events = {};
- this.loader = null;
- this.loaded = false;
- this.validator = this.wizard.options.validator;
- this.states = {
- done: false,
- error: false,
- active: false,
- disabled: false,
- activing: false
- };
- this.index = index;
- this.$element.data('wizard-index', index);
- this.$pane = this.getPaneFromTarget();
- if(!this.$pane){
- this.$pane = this.wizard.options.getPane.call(this.wizard, index, element);
- }
- this.setValidatorFromData();
- this.setLoaderFromData();
- },
- getPaneFromTarget: function(){
- var selector = this.$element.data('target');
- if (!selector) {
- selector = this.$element.attr('href');
- selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '');
- }
- if(selector) {
- return $(selector);
- } else {
- return null;
- }
- },
- setup: function() {
- var current = this.wizard.currentIndex();
- if(this.index === current){
- this.enter('active');
- if(this.loader){
- this.load();
- }
- } else if (this.index > current){
- this.enter('disabled');
- }
- this.$element.attr('aria-expanded', this.is('active'));
- this.$pane.attr('aria-expanded', this.is('active'));
- var classes = this.wizard.options.classes;
- if(this.is('active')){
- this.$pane.addClass(classes.pane.active);
- } else {
- this.$pane.removeClass(classes.pane.active);
- }
- },
- show: function(callback) {
- if(this.is('activing') || this.is('active')) {
- return;
- }
- this.trigger('beforeShow');
- this.enter('activing');
- var classes = this.wizard.options.classes;
- this.$element
- .attr('aria-expanded', true);
- this.$pane
- .addClass(classes.pane.activing)
- .addClass(classes.pane.active)
- .attr('aria-expanded', true);
- var complete = function () {
- this.$pane
- .removeClass(classes.pane.activing)
- this.leave('activing');
- this.enter('active');
- this.trigger('afterShow');
- if($.isFunction(callback)){
- callback.call(this);
- }
- }
- if (!Support.transition) {
- return complete.call(this);
- }
- this.$pane.one(Support.transition.end, $.proxy(complete, this));
- emulateTransitionEnd(this.$pane, this.TRANSITION_DURATION);
- },
- hide: function(callback) {
- if(this.is('activing') || !this.is('active')) {
- return;
- }
- this.trigger('beforeHide');
- this.enter('activing');
- var classes = this.wizard.options.classes;
- this.$element
- .attr('aria-expanded', false);
- this.$pane
- .addClass(classes.pane.activing)
- .removeClass(classes.pane.active)
- .attr('aria-expanded', false);
- var complete = function () {
- this.$pane
- .removeClass(classes.pane.activing);
- this.leave('activing');
- this.leave('active');
- this.trigger('afterHide');
- if($.isFunction(callback)){
- callback.call(this);
- }
- }
- if (!Support.transition) {
- return complete.call(this);
- }
- this.$pane.one(Support.transition.end, $.proxy(complete, this));
- emulateTransitionEnd(this.$pane, this.TRANSITION_DURATION);
- },
- empty: function() {
- this.$pane.empty();
- },
- load: function(callback) {
- var self = this;
- var loader = this.loader;
- if($.isFunction(loader)){
- loader = loader.call(this.wizard, this);
- }
- if(this.wizard.options.cacheContent && this.loaded){
- if($.isFunction(callback)){
- callback.call(this);
- }
- return true;
- }
- this.trigger('beforeLoad');
- this.enter('loading');
- function setContent(content) {
- self.$pane.html(content);
- self.leave('loading');
- self.loaded = true;
- self.trigger('afterLoad');
- if($.isFunction(callback)){
- callback.call(self);
- }
- }
- if (typeof loader === 'string') {
- setContent(loader);
- } else if (typeof loader === 'object' && loader.hasOwnProperty('url')) {
- self.wizard.options.loading.show.call(self.wizard, self);
- $.ajax(loader.url, loader.settings || {}).done(function(data) {
- setContent(data);
- self.wizard.options.loading.hide.call(self.wizard, self);
- }).fail(function(){
- self.wizard.options.loading.fail.call(self.wizard, self);
- });
- } else {
- setContent('');
- }
- },
- trigger: function(event) {
- var method_arguments = Array.prototype.slice.call(arguments, 1);
- if($.isArray(this.events[event])){
- for(var i in this.events[event]){
- this.events[event][i].apply(this, method_arguments);
- }
- }
- this.wizard.trigger.apply(this.wizard, [event, this].concat(method_arguments));
- },
- enter: function(state) {
- this.states[state] = true;
- var classes = this.wizard.options.classes;
- this.$element.addClass(classes.step[state]);
- this.trigger('stateChange', true, state);
- },
- leave: function(state) {
- if(this.states[state]){
- this.states[state] = false;
- var classes = this.wizard.options.classes;
- this.$element.removeClass(classes.step[state]);
- this.trigger('stateChange', false, state);
- }
- },
- setValidatorFromData: function(){
- var validator = this.$pane.data('validator');
- if(validator && $.isFunction(window[validator])){
- this.validator = window[validator];
- }
- },
- setLoaderFromData: function(){
- var loader = this.$pane.data('loader');
- if(loader){
- if($.isFunction(window[loader])){
- this.loader = window[loader];
- }
- } else {
- var url = this.$pane.data('loader-url');
- if(url){
- this.loader = {
- url: url,
- settings: this.$pane.data('settings') || {}
- }
- }
- }
- },
- /*
- * Public methods below
- */
- active: function(){
- return this.wizard.goTo(this.index);
- },
- on: function(event, handler){
- if($.isFunction(handler)){
- if($.isArray(this.events[event])){
- this.events[event].push(handler);
- } else {
- this.events[event] = [handler];
- }
- }
- return this;
- },
- off: function(event, handler){
- if($.isFunction(handler) && $.isArray(this.events[event])){
- $.each(this.events[event], function(i, f){
- if(f === handler) {
- delete this.events[event][i];
- return false;
- }
- });
- }
- return this;
- },
- is: function(state) {
- return this.states[state] && this.states[state] === true;
- },
- reset: function(){
- for(var state in this.states){
- this.leave(state);
- }
- this.setup();
- return this;
- },
- setLoader: function(loader){
- this.loader = loader;
- if(this.is('active')){
- this.load();
- }
- return this;
- },
- setValidator: function(validator) {
- if($.isFunction(validator)){
- this.validator = validator;
- }
- return this;
- },
- validate: function() {
- return this.validator.call(this.$pane.get(0), this);
- }
- });
|