third-party/smartwizard-1636c86/js/jquery.smartWizard-2.0.js

   1 /*
   2  * SmartWizard 2.0 plugin
   3  * jQuery Wizard control Plugin
   4  * by Dipu
   5  *
   6  * http://www.techlaboratory.net
   7  * http://tech-laboratory.blogspot.com
   8  */
   9
  10 (function($){
  11     $.fn.smartWizard = function(action) {
  12         var options = $.extend({}, $.fn.smartWizard.defaults, action);
  13         var args = arguments;
  14
  15         return this.each(function(){
  16                 var obj = $(this);
  17                 var curStepIdx = options.selected;
  18                 var steps = $("ul > li > a[href^='#step-']", obj); // Get all anchors in this array
  19                 var contentWidth = 0;
  20                 var loader,msgBox,elmActionBar,elmStepContainer,btNext,btPrevious,btFinish;
  21
  22                 elmActionBar = $('.actionBar',obj);
  23                 if(elmActionBar.length == 0){
  24                   elmActionBar = $('<div></div>').addClass("actionBar");
  25                 }
  26
  27                 msgBox = $('.msgBox',obj);
  28                 if(msgBox.length == 0){
  29                   msgBox = $('<div class="msgBox"><div class="content"></div><a href="#" class="close">X</a></div>');
  30                   elmActionBar.append(msgBox);
  31                 }
  32
  33                 $('.close',msgBox).click(function() {
  34                     msgBox.fadeOut("normal");
  35                     return false;
  36                 });
  37
  38
  39                 // Method calling logic
  40                 if (!action || action === 'init' || typeof action === 'object') {
  41                   init();
  42                 }else if (action === 'showMessage') {
  43                   //showMessage(Array.prototype.slice.call( args, 1 ));
  44                   var ar =  Array.prototype.slice.call( args, 1 );
  45                   showMessage(ar[0]);
  46                   return true;
  47                 }else if (action === 'setError') {
  48                   var ar =  Array.prototype.slice.call( args, 1 );
  49                   setError(ar[0].stepnum,ar[0].iserror);
  50                   return true;
  51                 }else if (action === 'setDone') {
  52                   var ar =  Array.prototype.slice.call( args, 1 );
  53                   setDone(ar[0].stepnum,ar[0].isdone);
  54                   return true;
  55                 } else {
  56                   $.error( 'Method ' +  action + ' does not exist' );
  57                 }
  58
  59                 function init(){
  60                   var allDivs =obj.children('div'); //$("div", obj);
  61                   obj.children('ul').addClass("anchor");
  62                   allDivs.addClass("content");
  63                   // Create Elements
  64                   loader = $('<div>Loading</div>').addClass("loader");
  65                   elmActionBar = $('<div></div>').addClass("actionBar");
  66                   elmStepContainer = $('<div></div>').addClass("stepContainer");
  67                   btNext = $('<a>'+options.labelNext+'</a>').attr("href","#").addClass("buttonNext");
  68                   btPrevious = $('<a>'+options.labelPrevious+'</a>').attr("href","#").addClass("buttonPrevious");
  69                   btFinish = $('<a>'+options.labelFinish+'</a>').attr("href","#").addClass("buttonFinish");
  70
  71                   // highlight steps with errors
  72                   if(options.errorSteps && options.errorSteps.length>0){
  73                     $.each(options.errorSteps, function(i, n){
  74                       setError(n,true);
  75                     });
  76                   }
  77
  78
  79                   elmStepContainer.append(allDivs);
  80                   elmActionBar.append(loader);
  81                   obj.append(elmStepContainer);
  82                   obj.append(elmActionBar);
  83                   if (options.includeFinishButton) {
  84                     elmActionBar.append(btFinish);
  85                   }
  86                   elmActionBar.append(btNext).append(btPrevious);
  87                   contentWidth = elmStepContainer.width();
  88
  89                   $(btNext).click(function() {
  90                       if($(this).hasClass('buttonDisabled')){
  91                         return false;
  92                       }
  93                       doForwardProgress();
  94                       return false;
  95                   });
  96                   $(btPrevious).click(function() {
  97                       if($(this).hasClass('buttonDisabled')){
  98                         return false;
  99                       }
 100                       doBackwardProgress();
 101                       return false;
 102                   });
 103                   $(btFinish).click(function() {
 104                       if(!$(this).hasClass('buttonDisabled')){
 105                          if($.isFunction(options.onFinish)) {
 106                             if(!options.onFinish.call(this,$(steps))){
 107                               return false;
 108                             }
 109                          }else{
 110                            var frm = obj.parents('form');
 111                            if(frm && frm.length){
 112                              frm.submit();
 113                            }
 114                          }
 115                       }
 116
 117                       return false;
 118                   });
 119
 120                   $(steps).bind("click", function(e){
 121                       if(steps.index(this) == curStepIdx){
 122                         return false;
 123                       }
 124                       var nextStepIdx = steps.index(this);
 125                       var isDone = steps.eq(nextStepIdx).attr("isDone") - 0;
 126                       if(isDone == 1){
 127                         LoadContent(nextStepIdx);
 128                       }
 129                       return false;
 130                   });
 131
 132                   // Enable keyboard navigation
 133                   if(options.keyNavigation){
 134                       $(document).keyup(function(e){
 135                           if(e.which==39){ // Right Arrow
 136                             doForwardProgress();
 137                           }else if(e.which==37){ // Left Arrow
 138                             doBackwardProgress();
 139                           }
 140                       });
 141                   }
 142                   //  Prepare the steps
 143                   prepareSteps();
 144                   // Show the first slected step
 145                   LoadContent(curStepIdx);
 146                 }
 147
 148                 function prepareSteps(){
 149                   if(!options.enableAllSteps){
 150                     $(steps, obj).removeClass("selected").removeClass("done").addClass("disabled");
 151                     $(steps, obj).attr("isDone",0);
 152                   }else{
 153                     $(steps, obj).removeClass("selected").removeClass("disabled").addClass("done");
 154                     $(steps, obj).attr("isDone",1);
 155                   }
 156
 157                     $(steps, obj).each(function(i){
 158                         $($(this).attr("href"), obj).hide();
 159                         $(this).attr("rel",i+1);
 160                   });
 161                 }
 162
 163                 function LoadContent(stepIdx){
 164                     var selStep = steps.eq(stepIdx);
 165                     var ajaxurl = options.contentURL;
 166                     var hasContent =  selStep.data('hasContent');
 167                     stepNum = stepIdx+1;
 168                     if(ajaxurl && ajaxurl.length>0){
 169                        if(options.contentCache && hasContent){
 170                            showStep(stepIdx);
 171                        }else{
 172                            $.ajax({
 173                             url: ajaxurl,
 174                             type: "POST",
 175                             data: ({step_number : stepNum}),
 176                             dataType: "text",
 177                             beforeSend: function(){ loader.show(); },
 178                             error: function(){loader.hide();},
 179                             success: function(res){
 180                               loader.hide();
 181                               if(res && res.length>0){
 182                                  selStep.data('hasContent',true);
 183                                  $($(selStep, obj).attr("href"), obj).html(res);
 184                                  showStep(stepIdx);
 185                               }
 186                             }
 187                           });
 188                       }
 189                     }else{
 190                       showStep(stepIdx);
 191                     }
 192                 }
 193
 194                 function showStep(stepIdx){
 195                     var selStep = steps.eq(stepIdx);
 196                     var curStep = steps.eq(curStepIdx);
 197                     if(stepIdx != curStepIdx){
 198                       if($.isFunction(options.onLeaveStep)) {
 199                         if(!options.onLeaveStep.call(this,$(curStep))){
 200                           return false;
 201                         }
 202                       }
 203                     }
 204                     if (options.updateHeight)
 205                         elmStepContainer.height($($(selStep, obj).attr("href"), obj).outerHeight());
 206                     if(options.transitionEffect == 'slide'){
 207                       $($(curStep, obj).attr("href"), obj).slideUp("fast",function(e){
 208                             $($(selStep, obj).attr("href"), obj).slideDown("fast");
 209                             curStepIdx =  stepIdx;
 210                             SetupStep(curStep,selStep);
 211                           });
 212                     } else if(options.transitionEffect == 'fade'){
 213                       $($(curStep, obj).attr("href"), obj).fadeOut("fast",function(e){
 214                             $($(selStep, obj).attr("href"), obj).fadeIn("fast");
 215                             curStepIdx =  stepIdx;
 216                             SetupStep(curStep,selStep);
 217                           });
 218                     } else if(options.transitionEffect == 'slideleft'){
 219                         var nextElmLeft = 0;
 220                         var curElementLeft = 0;
 221                         if(stepIdx > curStepIdx){
 222                             nextElmLeft1 = contentWidth + 10;
 223                             nextElmLeft2 = 0;
 224                             curElementLeft = 0 - $($(curStep, obj).attr("href"), obj).outerWidth();
 225                         } else {
 226                             nextElmLeft1 = 0 - $($(selStep, obj).attr("href"), obj).outerWidth() + 20;
 227                             nextElmLeft2 = 0;
 228                             curElementLeft = 10 + $($(curStep, obj).attr("href"), obj).outerWidth();
 229                         }
 230                         if(stepIdx == curStepIdx){
 231                             nextElmLeft1 = $($(selStep, obj).attr("href"), obj).outerWidth() + 20;
 232                             nextElmLeft2 = 0;
 233                             curElementLeft = 0 - $($(curStep, obj).attr("href"), obj).outerWidth();
 234                         }else{
 235                             $($(curStep, obj).attr("href"), obj).animate({left:curElementLeft},"fast",function(e){
 236                               $($(curStep, obj).attr("href"), obj).hide();
 237                             });
 238                         }
 239
 240                         $($(selStep, obj).attr("href"), obj).css("left",nextElmLeft1);
 241                         $($(selStep, obj).attr("href"), obj).show();
 242                         $($(selStep, obj).attr("href"), obj).animate({left:nextElmLeft2},"fast",function(e){
 243                           curStepIdx =  stepIdx;
 244                           SetupStep(curStep,selStep);
 245                         });
 246                     } else{
 247                         $($(curStep, obj).attr("href"), obj).hide();
 248                         $($(selStep, obj).attr("href"), obj).show();
 249                         curStepIdx =  stepIdx;
 250                         SetupStep(curStep,selStep);
 251                     }
 252                     return true;
 253                 }
 254
 255                 function SetupStep(curStep,selStep){
 256                    $(curStep, obj).removeClass("selected");
 257                    $(curStep, obj).addClass("done");
 258
 259                    $(selStep, obj).removeClass("disabled");
 260                    $(selStep, obj).removeClass("done");
 261                    $(selStep, obj).addClass("selected");
 262                    $(selStep, obj).attr("isDone",1);
 263                    adjustButton();
 264                    if($.isFunction(options.onShowStep)) {
 265                       if(!options.onShowStep.call(this,$(selStep))){
 266                         return false;
 267                       }
 268                    }
 269                 }
 270
 271                 function doForwardProgress(){
 272                   var nextStepIdx = curStepIdx + 1;
 273                   if(steps.length <= nextStepIdx){
 274                     if(!options.cycleSteps){
 275                       return false;
 276                     }
 277                     nextStepIdx = 0;
 278                   }
 279                   LoadContent(nextStepIdx);
 280                 }
 281
 282                 function doBackwardProgress(){
 283                   var nextStepIdx = curStepIdx-1;
 284                   if(0 > nextStepIdx){
 285                     if(!options.cycleSteps){
 286                       return false;
 287                     }
 288                     nextStepIdx = steps.length - 1;
 289                   }
 290                   LoadContent(nextStepIdx);
 291                 }
 292
 293                 function adjustButton(){
 294                   if(!options.cycleSteps){
 295                     if(0 >= curStepIdx){
 296                       $(btPrevious).addClass("buttonDisabled");
 297                     }else{
 298                       $(btPrevious).removeClass("buttonDisabled");
 299                     }
 300                     if((steps.length-1) <= curStepIdx){
 301                       $(btNext).addClass("buttonDisabled");
 302                     }else{
 303                       $(btNext).removeClass("buttonDisabled");
 304                     }
 305                   }
 306                   // Finish Button
 307                   if(!steps.hasClass('disabled') || options.enableFinishButton){
 308                     $(btFinish).removeClass("buttonDisabled");
 309                   }else{
 310                     $(btFinish).addClass("buttonDisabled");
 311                   }
 312                 }
 313
 314                 function showMessage(msg){
 315                   $('.content',msgBox).html(msg);
 316                         msgBox.show();
 317                 }
 318
 319                 function setError(stepnum,iserror){
 320                   if(iserror){
 321                     $(steps.eq(stepnum-1), obj).addClass('error')
 322                   }else{
 323                     $(steps.eq(stepnum-1), obj).removeClass("error");
 324                   }
 325                 }
 326
 327                 function setDone(stepnum,isdone){
 328                   if(isdone){
 329                     $(steps.eq(stepnum-1), obj).removeClass("selected").removeClass("disabled").addClass('done')
 330                   }else{
 331                     $(steps.eq(stepnum-1), obj).removeClass("done");
 332                   }
 333                 }
 334         });
 335     };
 336
 337     // Default Properties and Events
 338     $.fn.smartWizard.defaults = {
 339           selected: 0,  // Selected Step, 0 = first step
 340           keyNavigation: true, // Enable/Disable key navigation(left and right keys are used if enabled)
 341           enableAllSteps: false,
 342           updateHeight: true,
 343           transitionEffect: 'fade', // Effect on navigation, none/fade/slide/slideleft
 344           contentURL:null, // content url, Enables Ajax content loading
 345           contentCache:true, // cache step contents, if false content is fetched always from ajax url
 346           cycleSteps: false, // cycle step navigation
 347           includeFinishButton: true, // whether to show a Finish button
 348           enableFinishButton: false, // make finish button enabled always
 349           errorSteps:[],    // Array Steps with errors
 350           labelNext:'Next',
 351           labelPrevious:'Previous',
 352           labelFinish:'Finish',
 353           onLeaveStep: null, // triggers when leaving a step
 354           onShowStep: null,  // triggers when showing a step
 355           onFinish: null  // triggers when Finish button is clicked
 356     };
 357
 358 })(jQuery);