Free cookie consent management tool by TermsFeed Policy Generator

source: branches/OaaS/HeuristicLab.Services.Optimization.Web/Content/smartwizard2.0/js/jquery.smartWizard-2.0.js @ 15802

Last change on this file since 15802 was 9305, checked in by fschoepp, 12 years ago

#1888:

  • Added an Update / GetExperiment... methods to the controller for updating and querying experiments.
  • The AlgorithmConverter class now properly converts from/to JSON format.
  • Integrated backbone js as MVC provider for JavaScript + jquery.
  • Added experiment.model.js + experiment.view.js + experiment.controller.js containing the MVC impl. for the Experiment pages.
  • Added new methods to the ExperimentController usable by the backbone js model implementation.
  • Added the experiment dialog from HL 3.3.7 (variate experiment parameters). It's capable of variating the algorithm parameters.
File size: 15.6 KB
Line 
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 {
52                  $.error( 'Method ' +  action + ' does not exist' );
53                }
54               
55                function init(){
56                  var allDivs =obj.children('div'); //$("div", obj);               
57                  obj.children('ul').addClass("anchor");
58                  allDivs.addClass("content");
59                  // Create Elements
60                  loader = $('<div>Loading</div>').addClass("loader");
61                  elmActionBar = $('<div></div>').addClass("actionBar");
62                  elmStepContainer = $('<div></div>').addClass("stepContainer");
63                  btNext = $('<a>'+options.labelNext+'</a>').attr("href","#").addClass("buttonNext");
64                  btPrevious = $('<a>'+options.labelPrevious+'</a>').attr("href","#").addClass("buttonPrevious");
65                  btFinish = $('<a>'+options.labelFinish+'</a>').attr("href","#").addClass("buttonFinish");
66                 
67                  // highlight steps with errors
68                  if(options.errorSteps && options.errorSteps.length>0){
69                    $.each(options.errorSteps, function(i, n){
70                      setError(n,true);
71                    });
72                  }
73
74
75                  elmStepContainer.append(allDivs);
76                  elmActionBar.append(loader);
77                  obj.append(elmStepContainer);
78                  obj.append(elmActionBar);
79                  if (options.includeFinishButton) {
80                    elmActionBar.append(btFinish);
81                  }
82                  elmActionBar.append(btNext).append(btPrevious);
83                  contentWidth = elmStepContainer.width();
84
85                  $(btNext).click(function() {
86                      if($(this).hasClass('buttonDisabled')){
87                        return false;
88                      }
89                      doForwardProgress();
90                      return false;
91                  });
92                  $(btPrevious).click(function() {
93                      if($(this).hasClass('buttonDisabled')){
94                        return false;
95                      }
96                      doBackwardProgress();
97                      return false;
98                  });
99                  $(btFinish).click(function() {
100                      if(!$(this).hasClass('buttonDisabled')){
101                         if($.isFunction(options.onFinish)) {
102                            if(!options.onFinish.call(this,$(steps))){
103                              return false;
104                            }
105                         }else{
106                           var frm = obj.parents('form');
107                           if(frm && frm.length){
108                             frm.submit();
109                           }                         
110                         }                     
111                      }
112
113                      return false;
114                  });
115                 
116                  $(steps).bind("click", function(e){
117                      if(steps.index(this) == curStepIdx){
118                        return false;                   
119                      }
120                      var nextStepIdx = steps.index(this);
121                      var isDone = steps.eq(nextStepIdx).attr("isDone") - 0;
122                      if(isDone == 1){
123                        LoadContent(nextStepIdx);                   
124                      }
125                      return false;
126                  });
127                 
128                  // Enable keyboard navigation                 
129                  if(options.keyNavigation){
130                      $(document).keyup(function(e){
131                          if(e.which==39){ // Right Arrow
132                            doForwardProgress();
133                          }else if(e.which==37){ // Left Arrow
134                            doBackwardProgress();
135                          }
136                      });
137                  }
138                  //  Prepare the steps
139                  prepareSteps();
140                  // Show the first slected step
141                  LoadContent(curStepIdx);                 
142                }
143
144                function prepareSteps(){
145                  if(!options.enableAllSteps){
146                    $(steps, obj).removeClass("selected").removeClass("done").addClass("disabled");
147                    $(steps, obj).attr("isDone",0);                 
148                  }else{
149                    $(steps, obj).removeClass("selected").removeClass("disabled").addClass("done");
150                    $(steps, obj).attr("isDone",1);
151                  }
152
153                  $(steps, obj).each(function(i){
154                        $($(this).attr("href"), obj).hide();
155                        $(this).attr("rel",i+1);
156                  });
157                }
158               
159                function LoadContent(stepIdx){
160                    var selStep = steps.eq(stepIdx);
161                    var ajaxurl = options.contentURL;
162                    var hasContent =  selStep.data('hasContent');
163                    stepNum = stepIdx+1;
164                    if(ajaxurl && ajaxurl.length>0){
165                       if(options.contentCache && hasContent){
166                           showStep(stepIdx);                         
167                       }else{
168                           $.ajax({
169                            url: ajaxurl,
170                            type: "POST",
171                            data: ({step_number : stepNum}),
172                            dataType: "text",
173                            beforeSend: function(){ loader.show(); },
174                            error: function(){loader.hide();},
175                            success: function(res){
176                              loader.hide();       
177                              if(res && res.length>0){ 
178                                 selStep.data('hasContent',true);           
179                                 $($(selStep, obj).attr("href"), obj).html(res);
180                                 showStep(stepIdx);
181                              }
182                            }
183                          });
184                      }
185                    }else{
186                      showStep(stepIdx);
187                    }
188                }
189               
190                function showStep(stepIdx){
191                    var selStep = steps.eq(stepIdx);
192                    var curStep = steps.eq(curStepIdx);
193                    if(stepIdx != curStepIdx){
194                      if($.isFunction(options.onLeaveStep)) {
195                        if(!options.onLeaveStep.call(this,$(curStep))){
196                          return false;
197                        }
198                      }
199                    }     
200                    if (options.updateHeight)
201                        elmStepContainer.height($($(selStep, obj).attr("href"), obj).outerHeight());               
202                    if(options.transitionEffect == 'slide'){
203                      $($(curStep, obj).attr("href"), obj).slideUp("fast",function(e){
204                            $($(selStep, obj).attr("href"), obj).slideDown("fast");
205                            curStepIdx =  stepIdx;                       
206                            SetupStep(curStep,selStep);
207                          });
208                    } else if(options.transitionEffect == 'fade'){                     
209                      $($(curStep, obj).attr("href"), obj).fadeOut("fast",function(e){
210                            $($(selStep, obj).attr("href"), obj).fadeIn("fast");
211                            curStepIdx =  stepIdx;                       
212                            SetupStep(curStep,selStep);                           
213                          });                   
214                    } else if(options.transitionEffect == 'slideleft'){
215                        var nextElmLeft = 0;
216                        var curElementLeft = 0;
217                        if(stepIdx > curStepIdx){
218                            nextElmLeft1 = contentWidth + 10;
219                            nextElmLeft2 = 0;
220                            curElementLeft = 0 - $($(curStep, obj).attr("href"), obj).outerWidth();
221                        } else {
222                            nextElmLeft1 = 0 - $($(selStep, obj).attr("href"), obj).outerWidth() + 20;
223                            nextElmLeft2 = 0;
224                            curElementLeft = 10 + $($(curStep, obj).attr("href"), obj).outerWidth();
225                        }
226                        if(stepIdx == curStepIdx){
227                            nextElmLeft1 = $($(selStep, obj).attr("href"), obj).outerWidth() + 20;
228                            nextElmLeft2 = 0;
229                            curElementLeft = 0 - $($(curStep, obj).attr("href"), obj).outerWidth();                           
230                        }else{
231                            $($(curStep, obj).attr("href"), obj).animate({left:curElementLeft},"fast",function(e){
232                              $($(curStep, obj).attr("href"), obj).hide();
233                            });                       
234                        }
235
236                        $($(selStep, obj).attr("href"), obj).css("left",nextElmLeft1);
237                        $($(selStep, obj).attr("href"), obj).show();
238                        $($(selStep, obj).attr("href"), obj).animate({left:nextElmLeft2},"fast",function(e){
239                          curStepIdx =  stepIdx;                       
240                          SetupStep(curStep,selStep);                     
241                        });
242                    } else{
243                        $($(curStep, obj).attr("href"), obj).hide();
244                        $($(selStep, obj).attr("href"), obj).show();
245                        curStepIdx =  stepIdx;                       
246                        SetupStep(curStep,selStep);
247                    }
248                    return true;
249                }
250               
251                function SetupStep(curStep,selStep){
252                   $(curStep, obj).removeClass("selected");
253                   $(curStep, obj).addClass("done");
254                   
255                   $(selStep, obj).removeClass("disabled");
256                   $(selStep, obj).removeClass("done");
257                   $(selStep, obj).addClass("selected");
258                   $(selStep, obj).attr("isDone",1);
259                   adjustButton();
260                   if($.isFunction(options.onShowStep)) {
261                      if(!options.onShowStep.call(this,$(selStep))){
262                        return false;
263                      }
264                   }
265                }               
266               
267                function doForwardProgress(){
268                  var nextStepIdx = curStepIdx + 1;
269                  if(steps.length <= nextStepIdx){
270                    if(!options.cycleSteps){
271                      return false;
272                    }                 
273                    nextStepIdx = 0;
274                  }
275                  LoadContent(nextStepIdx);
276                }
277               
278                function doBackwardProgress(){
279                  var nextStepIdx = curStepIdx-1;
280                  if(0 > nextStepIdx){
281                    if(!options.cycleSteps){
282                      return false;
283                    }
284                    nextStepIdx = steps.length - 1;
285                  }
286                  LoadContent(nextStepIdx);
287                } 
288               
289                function adjustButton(){
290                  if(!options.cycleSteps){               
291                    if(0 >= curStepIdx){
292                      $(btPrevious).addClass("buttonDisabled");
293                    }else{
294                      $(btPrevious).removeClass("buttonDisabled");
295                    }
296                    if((steps.length-1) <= curStepIdx){
297                      $(btNext).addClass("buttonDisabled");
298                    }else{
299                      $(btNext).removeClass("buttonDisabled");
300                    }
301                  }
302                  // Finish Button
303                  if(!steps.hasClass('disabled') || options.enableFinishButton){
304                    $(btFinish).removeClass("buttonDisabled");
305                  }else{
306                    $(btFinish).addClass("buttonDisabled");
307                  }                 
308                }
309               
310                function showMessage(msg){
311                  $('.content',msgBox).html(msg);
312                  msgBox.show();
313                }
314               
315                function setError(stepnum,iserror){
316                  if(iserror){                   
317                    $(steps.eq(stepnum-1), obj).addClass('error')
318                  }else{
319                    $(steps.eq(stepnum-1), obj).removeClass("error");
320                  }                                   
321                }                       
322        }); 
323    }; 
324 
325    // Default Properties and Events
326    $.fn.smartWizard.defaults = {
327          selected: 0,  // Selected Step, 0 = first step   
328          keyNavigation: true, // Enable/Disable key navigation(left and right keys are used if enabled)
329          enableAllSteps: false,
330          updateHeight: true,
331          transitionEffect: 'fade', // Effect on navigation, none/fade/slide/slideleft
332          contentURL:null, // content url, Enables Ajax content loading
333          contentCache:true, // cache step contents, if false content is fetched always from ajax url
334          cycleSteps: false, // cycle step navigation
335          includeFinishButton: true, // whether to show a Finish button
336          enableFinishButton: false, // make finish button enabled always
337          errorSteps:[],    // Array Steps with errors
338          labelNext:'Next',
339          labelPrevious:'Previous',
340          labelFinish:'Finish',         
341          onLeaveStep: null, // triggers when leaving a step
342          onShowStep: null,  // triggers when showing a step
343          onFinish: null  // triggers when Finish button is clicked
344    };   
345   
346})(jQuery);
Note: See TracBrowser for help on using the repository browser.