Context Navigation

← Previous Revision
Latest Revision
Next Revision →
Blame
Revision Log

source: branches/1888_OaaS/HeuristicLab.Services.Optimization.Web/Content/smartwizard2.0/js/jquery.smartWizard-2.0.js @ 16115

Visit:

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

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.

Download in other formats:

Update cookies preferences