Context Navigation

← Previous Revision
Latest Revision
Next Revision →
Normal
Revision Log

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

Visit:

Last change on this file since 10554 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

Rev	Line
[9305]	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