databap/masks/procedure.html

<div id="procedure_box">
	<div id="procedure">
		<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">
				<a id="top_switch" class="button round">
					<i class="fa fa-c-switch"></i>
					<span class="mode_read hide">Aper&ccedil;u</span>
					<span class="mode_edit hide" class="hide">Modifier</span>
				</a>
				<a id="share" class="button round"><i class="fa fa-c-share"></i>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 inc_border 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 inc_border round" maxlength="500" value="" />
				</div>
			</div>
			<div id="titles_read" class="step_box round hide">
				<p class="read_title"><span id="title_read" class="read"></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="description_read" class="read"></span></p>
			</div>
			<div id="procedure_steps"></div>
			<div class="proc_menu" id="bottom_menu">
				<a id="add_step" class="button round"><i class="fa fa-c-add"></i>Ajouter une &eacute;tape</a>
				<a id="submit_procedure" class="button round"><i class="fa fa-c-ok"></i>Valider</a>
				<a id="bottom_switch" class="button round">
					<i class="fa fa-c-switch"></i>
					<span class="mode_read">Aper&ccedil;u</span>
					<span class="mode_edit" class="hide">Modifier</span>
				</a>
			</div>
		</form>
	</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>
					<div id="step_text_read" class="read textarea round"></div>
				</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">
					<a id="insert_step_before" class="button round" title="Ins&eacute;rer une &eacute;tape avant celle-ci"><i class="fa fa-c-up"></i>Ins&eacute;rer une &eacute;tape avant</a>
					<a id="insert_step_after" class="button round" title="Ins&eacute;rer une &eacute;tape apr&egrave;s celle-ci"><i class="fa fa-c-down"></i>Ins&eacute;rer une &eacute;tape apr&egrave;s</a>
					<a id="delete_step" class="button round"><i class="fa fa-c-delete"></i>Supprimer l'&eacute;tape</a>
				</td>
			</tr>
		</table>
	</div>
	<div id="thumbnail_model">
		<p class="thumbnail_box">
			<a class="original_image" rel="lightbox" href="" title="">
				<img class="thumbnail_image round clickable" alt="" src="" />
			</a>
			<span class="thumbnail_desc"></span>
		</p>
	</div>
</div>
<script type="text/javascript">
databap.pageInit = function()
{
	databap.vars.mode = '';
	self.tmp('started', false);
	self.initScrollBar('#main', '#procedure_box', '#procedure');
	
	//Get step HTML
	self.vars.stepHtml = self.getMainElem('#step_model').html();
	self.vars.thumbnailHtml = self.getMainElem('#thumbnail_model').html();

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

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

	//Set display
	self.getMainElem('#bottom_switch,#top_switch').click(function(){setDisplay();});
	self.getMainElem('#share').click(function(){self.shareEvent('proc', getProcId());});
	
	if(self.vars.id>0)
	{
		loadProcedure
		(
			self.vars.id,
			function()
			{
				//Init's end
				self.setInitEnd(true);
			}
		);
	}
	else
	{
		setDisplay('edit');
		self.setInitEnd(true);
		$StepBox.trigger('click');
	}
};

databap.onResize = function()
{
	self.setScrollBarSize('optimize');
	resizeDescription();
};

databap.onQuit = function(){ return (self.tmp('started') === false); };

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)
{
	var sOldMode = databap.vars.mode;
	sNewMode = sNewMode || '';
	
	//On page first load	
	if(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' && databap.vars.mode!='') syncReadModeData();
		
		//Hide / show boxes
		var $EditBoxes = databap.getMainElem('.uploader_box, .step_buttons, #add_step, #submit_procedure, #titles_edit, textarea[id$="step_text"]');
		var $ReadBoxes = databap.getMainElem('#share, #titles_read, div[id$="step_text_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('#bottom_switch,#top_switch').find('.mode_'+sNewMode).hide('fast', function(){$(this).parent().find('.mode_'+sOldMode).show('fast');});
		
		//Resize scrollbar & description
		databap.updateScrollBar();
		resizeDescription();
	}
}

function syncReadModeData()
{
	$('.read').each(function()
	{
		$This = $(this);
		var sEditValue = $('#'+$This.attr('id').substr(0, $This.attr('id').length - '_read'.length)).val();
		var sReadValue = sEditValue.replace(/(?:\r\n|\r|\n)/g, '<br />');
		$This.html(sReadValue);
	});
	databap.feedback('warning', 'Le formattage du texte reviendra lors de la validation');
}

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('.original_image')
							.attr('href', getImageUrl(basename($Thumbnail.find('.thumbnail_image').attr('src'))))
							.attr('rel', 'lightbox[step_'+iStepId+']')
							.attr('title', sImageDesc);
						
						//Add image description
						$Thumbnail.find('.thumbnail_desc').text(sImageDesc);
						$Thumbnail.hide().appendTo($ThumbnailsBox).show();
					}
				);
			}
			else
			{
				$ThumbnailsBox.hide(0, function(){$(this).empty();});
			}
		}
	);
}

function getImageUrl(sImageName, bThumbnail)
{
	bThumbnail = bThumbnail || false;
	
	//Stored image
	var sImageUrl = (bThumbnail?databap.consts.image_folder_thumb:databap.consts.image_folder)+sImageName;
	if(!file_exists(sImageUrl))
	{
		//Temp image
		sImageUrl = databap.consts.image_folder_tmp+sImageName;
		if(!file_exists(sImageUrl)) sImageUrl = '';
	}
	return sImageUrl;	
}

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

	//Build new Step
	var $step = $(databap.vars.stepHtml);

	//Add Step text
	if(sDesc) $step.find('#step_text').val(sDesc);
	if(sFormatedDesc) $step.find('#step_text_read').html(sFormatedDesc);
	
	//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);
	var asOptions = {	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};

	uploaders[iStepId] = new qq.FileUploader(asOptions);
	$step.show('fast', function(){databap.setInitEnd(true);});
	
	databap.updateScrollBar();
	return iStepId;
}

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();
			databap.updateScrollBar();
		}
	);
}

//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())
	{
		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();
					
					//Unblock exit & go
					databap.tmp('started', false);
					databap.goToInternalLink('proc', proc_info.proc_id);
				}
				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, sStepDesc.formated_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);
								}
							);
						}
					}
				);
				databap.tmp('started', false);
			}
			else $form.find('#title').val('Introuvable !');

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

//TODO delete this silly function and rethink the whole thing
function addExtraReadElements(data)
{
	debug(data);
	
	//Add extra read-mode data
	$ReadTitles = databap.getMainElem('#titles_read');
	$ReadTitles.find('#title_read').text(data.title);
	$ReadTitles.find('#description_read').text(data.description);
	$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>