databap/masks/procedure.html

<div id="procedure">
	<div class="h1_wrap">
		<h1 class="round"><span>Proc&eacute;dure</span></h1>
	</div>
	<form id="procedure_form" name="procedure_form">
		<input type="hidden" id="procedure_id" name="procedure_id" value="0" />
		<div class="proc_menu" id="top_menu">
			<span id="top_switch" class="button switch round"><span class="mode_read hide">Aper&ccedil;u</span><span class="mode_edit hide" class="hide">Modifier</span></span>
			<a id="share" class="button share round">Partager</a>
		</div>
		<div id="titles_edit" class="hide">
			<div id="procedure_title" class="step_box round">
				<p class="step_nb_box">Titre</p>
				<input type="text" name="title" id="title" class="step_line_item round" maxlength="200" value="" />
			</div>
			<div id="procedure_desc" class="step_box round">
				<p class="step_nb_box">Description</p>
				<input type="text" name="description" id="description" class="step_line_item round" maxlength="500" value="" />
			</div>
		</div>
		<div id="titles_read" class="step_box round hide">
			<p class="read_title"><span id="titles_read_title"></span></p>
			<p class="read_details">Cr&eacute;&eacute; par <span id="titles_read_user"></span> (<span id="titles_read_company"></span>) le <span id="titles_read_led"></span></p>
			<p class="read_description"><span id="titles_read_description"></span></p>
		</div>
		<div id="procedure_steps"></div>
		<div class="proc_menu" id="bottom_menu">
			<span id="add_step" class="button add round">Ajouter une &eacute;tape</span>
			<span id="submit_procedure" class="button ok round">Valider</span>
			<span id="bottom_switch" class="button switch round"><span class="mode_read">Aper&ccedil;u</span><span class="mode_edit" class="hide">Modifier</span></span>
		</div>
	</form>
	<div id="slider" class="round hide">
		<div id="slider_close" class="innerBorder clickable round"><img id="slider_image" src="images/processing_48.gif" /></div>
	</div>
</div>
<div id="models" class="hide">
	<div id="step_model">
		<table id="step" class="step_box round">
			<tr>
				<td colspan="2" class="step_nb_box">&Eacute;tape <span id="step_nb"></span></td>
			</tr>	
			<tr>
				<td class="step_margin"><textarea id="step_text" name="step_text" class="round"></textarea></td>
				<td class="image_box_container">
					<div id="step_images"></div>
					<div id="step_images_thumbs"></div>
				</td>
			</tr>
			<tr>
				<td colspan="2" class="step_buttons">
					<span id="insert_step_before" class="button add round" title="Ins&eacute;rer une &eacute;tape avant celle-ci">Ins&eacute;rer une &eacute;tape avant</span>
					<span id="insert_step_after" class="button add round" title="Ins&eacute;rer une &eacute;tape apr&egrave;s celle-ci">Ins&eacute;rer une &eacute;tape apr&egrave;s</span>
					<span id="delete_step" class="button delete delete_step_button round">Supprimer l'&eacute;tape</span>
				</td>
			</tr>
		</table>
	</div>
	<div id="image_model">
		<span id="image_action">
			<input type="text" id="image_desc" name="image_desc" class="image_description round" />
			<input type="hidden" name="image_name" id="image_name" value="" />
			<input type="button" id="delete_image" class="button delete round" />
		</span>
	</div>
	<div id="thumbnail_model">
		<p class="thumbnail_box">
			<img class="thumbnail_image round clickable" src="" title="Cliquer pour agrandir" />
			<span class="thumbnail_desc"></span>
		</p>
	</div>
</div>
<script type="text/javascript">
databap.pageInit = function()
{
	//TODO : to be replaced by tinyscrollbar
	databap.$main.css('overflow', 'auto');
	
	//Get step HTML
	databap.vars.stepHtml = databap.getMainElem('#step_model').html();
	databap.vars.imageHtml = databap.getMainElem('#image_model').html();
	databap.vars.thumbnailHtml = databap.getMainElem('#thumbnail_model').html();

	//Get user data
	databap.getUserInfo
	(
		function(data)
		{
			data.led = '(aucune date)';
			addExtraReadElements(data);
		}
	);
	
	//Add titles
	databap.getMainElem('#procedure_title').show('fast');
	databap.getMainElem('#procedure_desc').show('fast', resizeDescription);
	
	//Init steps and images
	curStep = 0;
	curStepImages = {};
	uploaders = {};
	
	//Add new step
	var $StepBox = databap.getMainElem('#add_step');
	$StepBox.click(function(){addStep();});

	//submit
	databap.getMainElem('#submit_procedure').click(saveProcedure);

	//Set display
	databap.getMainElem('#bottom_switch,#top_switch').click(function(){setDisplay();});
	databap.getMainElem('#share').click
	(
		function()
		{
			var iProcId = getProcId();
			if(iProcId>0)
			{
				$(this)
					.hide()
					.text(databap.getProcLink(iProcId))
					.addClass('addr')
					.slideDown('fast')
					.unbind('click');
			}
		}
	);
	if(databap.vars.proc_id>0)
	{
		loadProcedure
		(
			databap.vars.proc_id,
			function()
			{
				//Init's end
				databap.setInitEnd(true);
			}
		);
	}
	else
	{
		setDisplay('edit');
		$StepBox.trigger('click');
	}

	//Slider
	oSlider = new Slider();
	databap.onResize = function()
	{
		oSlider.resizeImage();
		resizeDescription();
	};
	databap.onKeyUp = function(e){if(e.keyCode==27)oSlider.quit();};
};

function resizeDescription()
{
	//width adjustement
	var maxWidth = databap.getMainElem('#procedure_desc').find('p.step_nb_box').width();
	databap.getMainElem('#description').width(maxWidth-10);
}

function setDisplay(sNewMode)
{
	//On page first load
	var sOldMode = databap.vars.mode;
	if(!sOldMode || sOldMode=='')
	{
		sOldMode = (sNewMode=='read')?'edit':'read';
	}

	//default behaviour : switch to alternative display
	if(!sNewMode)
	{
		sNewMode = (sOldMode=='read')?'edit':'read';
	}

	//Set new Display
	if(sNewMode!=sOldMode)
	{		
		var sDisabled;

		//Set read mode data
		if(sNewMode=='read')
		{
			syncReadModeData();
		}
		
		//Hide / show boxes
		var $EditBoxes = databap.getMainElem('.uploader_box, .step_buttons, #add_step, #submit_procedure, #titles_edit');
		var $ReadBoxes = databap.getMainElem('#share, #titles_read');
		
		switch(sNewMode)
		{
			case 'read':
				sDisabled = true;
				$EditBoxes.hide();
				$ReadBoxes.show();
				break;
			case 'edit':
				sDisabled = false;
				$EditBoxes.show();
				$ReadBoxes.hide();
				break;
		}
		
		//Enable / disable inputs
		databap.getMainElem('#procedure_form :input').attr('disabled', sDisabled);
	
		//Add / Remove image thumbnails
		setThumbnails(sDisabled);
				
		//Change mode internally 
		databap.vars.mode = sNewMode;

		//Change switch button
		//databap.getMainElem('#mode_'+sNewMode).hide('fast', function(){databap.getMainElem('#mode_'+sOldMode).show('fast');});
		
		databap.getMainElem('#bottom_switch,#top_switch').find('.mode_'+sNewMode).hide('fast', function(){$(this).parent().find('.mode_'+sOldMode).show('fast');});
	}
}

function syncReadModeData()
{
	//Title & description
	var $EditBox = databap.getMainElem('#titles_edit');
	var $ReadBox = databap.getMainElem('#titles_read');
	$ReadBox.find('#titles_read_title').text($EditBox.find('#title').val());
	$ReadBox.find('#titles_read_description').text($EditBox.find('#description').val());
	
	//Steps
}

function setThumbnails(bShow)
{	
	//Each step
	databap.getMainElem('#procedure_steps').children().each
	(
		function(iRank, step)
		{
			$step = $(step);
			var iStepId = databap.getFirstElemId($step.attr('id'));
			var $ThumbnailsBox = $step.find('#'+databap.getElemTag('step_images_thumbs', iStepId));
			if(bShow)
			{
				$ThumbnailsBox.show('fast');

				//Each image
				$step.find('#'+databap.getElemTag('uploader_list', iStepId)).children().filter('.uploader_item_success').each
				(
					function(index)
					{
						$Image = $(this);
						var aiIds = databap.getElemIds($Image.attr('id'));
						var iImageId = aiIds[1];
						var sImageDesc = $Image.find('#'+databap.getElemTag('image_desc', [iStepId, iImageId])).val();
						var sImageName = $Image.find('#'+databap.getElemTag('image_name', [iStepId, iImageId])).val();

						//Add image thumbnail
						var $Thumbnail = $(databap.vars.thumbnailHtml);
						var sThumbnailUrl = getImageUrl(sImageName, true);
						if(sThumbnailUrl=='')
						{
							sThumbnailUrl = databap.consts.app_image_folder+'no_48.png';
							$Thumbnail.find('.thumbnail_image').attr('title', 'Image introuvable');
						}
						$Thumbnail.find('.thumbnail_image').attr('src', sThumbnailUrl);
						//$Thumbnail.find('.thumbnail_image').attr('alt', sImageName);
						
						//Add image description
						$Thumbnail.find('.thumbnail_desc').text(sImageDesc);
						$Thumbnail.hide().appendTo($ThumbnailsBox).show
						(
							function()
							{
								//add event listener : Enlarge picture
								$Thumbnail.find('.thumbnail_image').click
								(
									function()
									{
										$this = $(this);
										var sImageUrl = getImageUrl(basename($this.attr('src')));
										if(sImageUrl!='')
										{
											oSlider.startSlider(sImageUrl);
										}
									}
								);
							}
						);
					}
				);
			}
			else
			{
				$ThumbnailsBox.hide(0, function(){$(this).empty();});
			}
		}
	);
}

function getImageUrl(sImageName, bThumbnail)
{
	var sImageUrl = (bThumbnail?databap.consts.image_folder_thumb:databap.consts.image_folder)+sImageName;
	if(file_exists(sImageUrl))
	{
		return sImageUrl;
	}
	sImageUrl = databap.consts.image_folder_tmp+sImageName;
	if(file_exists(sImageUrl))
	{
		return sImageUrl;
	}
	return '';
}

function Slider()
{
	//Variables
	this.$Slider = databap.getMainElem('#slider');
	this.$SliderImage = this.$Slider.find('#slider_image');
	var self = this;

	//Methods
	this.resizeImage = function()
	{
		//max size
		var maxWidth = databap.consts.maxWidth - 60; //5*2*2 border + 20*2 margin
		var maxHeight = databap.consts.maxHeight - 60;
		$image = self.$SliderImage.css({'width':'auto', 'height':'auto'});
		var image_height = $image.height();
		var image_width = $image.width();
		//debug('max H : '+maxHeight+', max W : '+maxWidth)
		//debug('H : '+image_height+', W : '+image_width)
		if(image_width > maxWidth || image_height > maxHeight)
		{
			if(image_width > maxWidth)
			{
				image_height = maxWidth / image_width * image_height;
				image_width = maxWidth;
			}
			if(image_height > maxHeight)
			{
				image_width = maxHeight / image_height * image_width;
				image_height = maxHeight;
			}
			//debug('new H : '+image_height+', new W : '+image_width)
			$image.css({'width':image_width+'px', 'height':image_height+'px'});
		}
		var sliderLeftPos = (databap.consts.maxWidth - self.$Slider.width())/2 - 5;
		var sliderTopPos = (databap.consts.maxHeight - self.$Slider.height())/2 - 5;
		self.$Slider.css({'left':sliderLeftPos, 'top':sliderTopPos});
	};
	
	this.startSlider = function(sImageUrl)
	{
		//this.$Slider.find('#slider_image').animate({width:'auto', height:'auto'});
		this.$Slider.show();
		this.$SliderImage.attr('src', sImageUrl).css({'width':'auto', 'height':'auto'});
	};

	this.quit = function()
	{
		self.$Slider.hide();
	};

	//Bindings
	this.$Slider.find('#slider_close').click(this.quit);
	this.$SliderImage.resize(this.resizeImage);
	//this.$SliderImage.load(function(){debug('load');});
}

function addImage(stepId, imageId, imageName, imageDesc)
{
	//get image number
	$ImageBox = databap.getMainElem('#'+databap.getElemTag('uploader_item', [stepId, imageId]));
	
	//Create new image
	$newImage = $(databap.vars.imageHtml);
	
	//Set image name
	$newImage.find('#image_name').val(imageName);

	//Set image description
	$newImage.find('#image_desc').val(imageDesc);
	
	//delete button for this image
	$newImage.find('#delete_image').click
	(
		function()
		{
			var stepIds = databap.getElemIds($(this).attr('id'));
			removeImage(stepIds[0], stepIds[1]);
		}
	);
	
	//Add ids
	$newImage = databap.setElemTags($newImage, [stepId, imageId]);
	
	//Add Image to the step
	$newImage.appendTo($ImageBox);
	
	return imageId;
}

function addStep(stepId, sPosition, sDesc)
{
	//Set Step Count
	iCurrentStep = '0';

	//Build new Step
	$StepBox = databap.getMainElem('#procedure_steps');
	var $step = $(databap.vars.stepHtml);

	//Add Step text
	if(sDesc)
	{
		$step.find('#step_text').val(sDesc);
	}
	
	//Insert new step before this step
	$step.find('#insert_step_before').click
	(
		function()
		{
			var stepId = databap.getFirstElemId($(this).attr('id'));
			addStep(stepId, 'before');
		}
	);

	//Insert new step after this step
	$step.find('#insert_step_after').click
	(
		function()
		{
			var stepId = databap.getFirstElemId($(this).attr('id'));
			addStep(stepId, 'after');
		}
	);

	//Delete this step
	$step.find('#delete_step').click
	(
		function()
		{
			var stepId = databap.getFirstElemId($(this).attr('id'));
			removeStep(stepId);
		}
	);

	//Append to page
	$step.hide();
	if(!stepId)
	{
		$step.appendTo(databap.getMainElem('#procedure_steps'));
	}
	else
	{
		var $elem = databap.getMainElem('#'+databap.getElemTag('step', stepId));
		switch(sPosition)
		{
			case 'before':
				$elem.before($step);
				break;
			case 'after':
				$elem.after($step);
				break;
		}		
	}

	//Add unique Ids
	recalculateStepNb();
	
	//Add Image Uploader
	var iStepId = databap.getFirstElemId($step.attr('id'));
	var sImageBoxId = databap.getElemTag('step_images', iStepId);
	uploaders[iStepId] = new qq.FileUploader
	(
		{
			element: document.getElementById(sImageBoxId),
			action: databap.getActionLink('upload_image'),
			allowedExtensions: databap.consts.authorized_img_exts,
			sizeLimit: parseInt(databap.consts.max_size)*100,
			debug: false,
			stepId: iStepId
        }
	);
	$step.show('fast', function(){databap.setInitEnd(true);});
	
	return iStepId;
}

function removeImage(iStepId, iImageId)
{
	var sImageTag = databap.getElemTag('uploader_item', [iStepId, iImageId]);
	databap.getMainElem('#'+sImageTag).hide
	(
		'fast',
		function()
		{
			$(this).remove();
		}
	);
}

function removeStep(iStepId)
{
	//debug('removing step '+iStepId);
	var sStepTag = databap.getElemTag('step', [iStepId]);
	databap.getMainElem('#'+sStepTag).slideUp
	(
		'fast',
		function()
		{
			$this = $(this);
			delete uploaders[databap.getFirstElemId($this.attr('id'))];
			$this.remove();
			recalculateStepNb();
		}
	);
}

//re-calculate steps displayed id
function recalculateStepNb()
{
	databap.getMainElem('#procedure_steps').children().each
	(
		function(iRank, step)
		{
			$step = $(step);
			
			//Get current and new step id
			var iStepId = databap.getFirstElemId($step.attr('id'));
			var iNewStepId = iRank+1;
			
			//Update step id
			databap.setElemTags($step, [iNewStepId], true);

			//Update step number (displayed)
			//debug("oldtag: "+$step.attr('id')+", oldid: "+iStepId+", newtag: "+databap.getElemTag('step_nb', [iStepId])+", newid : "+iNewStepId);
			$step.find('#'+databap.getElemTag('step_nb', [iNewStepId])).text(iNewStepId);
			
			//update uploader step id
			if(iStepId>0 && iNewStepId!=iStepId)
			{
				uploaders[iNewStepId] = uploaders[iStepId];
				delete uploaders[iStepId];
			}
		}
	);
}

function checkProcedure()
{
	bValidForm = true;
	databap.getMainElem('#procedure_form').find('input[type=text],textarea').each
	(
		function(key,object)
		{
			if($(object).val() == '')
			{
				bValidForm = false;
			}
		}
	);
	return bValidForm;
}

function saveProcedure()
{
	if(checkProcedure())
	{
		//debug(databap.getMainElem('#procedure_form').find('input,textarea'));
		databap.saveForm
		(
			'add_procedure',
			databap.getMainElem('#procedure_form'),
			function(proc_info)
			{
				if(proc_info.result=='success')
				{
					//Update procedure Id
					majProcId(proc_info.proc_id);
					addExtraReadElements(proc_info);
					
					databap.addSuccessBefore('La proc&eacute;dure est enregistr&eacute;e', '#bottom_menu');
					databap.addSuccessIcon();
					setDisplay('read');
				}
				else
				{
					$.each
					(
						proc_info.errors,
						function(key, value)
						{
							databap.addErrorBefore(key+"|"+value, '#bottom_menu');
						}
					);
				}
			},
			true,
			'json'
		);
	}
	else
	{
		databap.addErrorBefore('Tous les champs en sont pas remplis', '#bottom_menu');
	}
}

function loadProcedure(iProcId, fOnSuccess)
{
	databap.getInfo
	(
		'get_procedure',
		function(proc_info)
		{
			//Form Element
			$form = databap.getMainElem('#procedure_form');

			if(proc_info.proc_id > 0)
			{
				//maj proc number
				majProcId(proc_info.proc_id);
				
				//Title
				$form.find('#title').val(proc_info.title);
	
				//Description
				$form.find('#description').val(proc_info.description);
	
				//Extra read mode data
				addExtraReadElements(proc_info);
	
				//Steps
				$.each
				(
					proc_info.steps,
					function(iStepId, sStepDesc)
					{
						iDisplayedStepId = addStep(false, false, sStepDesc.description);
						
						//Image
						if(iStepId in proc_info.images)
						{
							$.each
							(
								proc_info.images[iStepId],
								function(iImageId, asImage)
								{
									var iImageId = uploaders[iDisplayedStepId]._handler.addToFiles({fileName:asImage.name, fileSize:1});
									uploaders[iDisplayedStepId]._onSubmit(iImageId, asImage.name);
									
									var oResult = {status:200, responseText:"{success:true, file_name:\""+asImage.name+"\", fileDesc:\""+asImage.desc+"\"}"};
									uploaders[iDisplayedStepId]._handler._onComplete(iImageId, oResult);
								}
							);
						}
					}
				);
			}
			else $form.find('#title').val('Introuvable !');

			//Switch to read mode
			setDisplay('read');
			fOnSuccess();
		},
		{proc_id:iProcId},
		'json',
		function(textStatus)
		{
			delay = 10;
		}
	);
}

function addExtraReadElements(data)
{
	//Add extra read-mode data
	$ReadTitles = databap.getMainElem('#titles_read');
	$ReadTitles.find('#titles_read_user').text(data.name);
	$ReadTitles.find('#titles_read_company').text(data.company);
	$ReadTitles.find('#titles_read_led').text(data.led);
}

function majProcId(iProcId)
{
	databap.getMainElem('#procedure_id').val(iProcId);
}

function getProcId()
{
	return databap.getMainElem('#procedure_id').val();
}
</script>