databap/masks/doc.html

<div id="doc">
	<div class="h1_wrap">
		<h1 class="round"><span>Documentation</span></h1>
	</div>
	<div id="doc_container">
		<div id="titles_edit" class="hide">
			<form id="doc_form" name="doc_form">
				<div id="title_edit" 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="desc_edit" 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 id="attach_file"></div>
				<div id="doc_menu"><span id="submit_doc" class="button ok round">Valider</span></div>
			</form>
		</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="docs_read" class="step_box round hide">
			<p class="step_nb_box">Documents</p>
			<p id="doc_links"></p>
		</div>
	</div>
</div>
<div id="image_model" class="hide">
	<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>
<script type="text/javascript">
databap.pageInit = function()
{
	//image
	databap.vars.imageHtml = databap.getMainElem('#image_model').html();
	
	//On Resize Event
	databap.onResize = function()
	{
		//TODO : to be replaced by tinyscrollbar
		databap.$main.css('overflow', 'auto');
	
		var maxWidth = databap.getMainElem('#desc_edit').find('p.step_nb_box').width();
		databap.getMainElem('#description').width(maxWidth-10);
	};
	
	//load Uploader
	oUploader = new qq.FileUploader
	(
		{
			element: document.getElementById('attach_file'),
			action: databap.getActionLink('upload_file'),
			allowedExtensions: databap.consts.authorized_file_exts,
			sizeLimit: parseInt(databap.consts.max_size)*100,
			addSlideText: 'Glisser les fichier ici',
			addFileText: 'Ajouter un fichier',
			debug:true,
			stepId:1
        }
	);

	if(databap.vars.doc_id>0)
	{
		loadDoc
		(
			databap.vars.doc_id,
			function()
			{
				databap.setInitEnd(true);
			}
		);
	}
	else
	{
		setDisplay('edit');
		
		//Init's end
		databap.setInitEnd(true);
	}

	//submit
	databap.getMainElem('#submit_doc').click(saveDoc);
};

function loadDoc(iDocId, fOnSuccess)
{
	databap.getInfo
	(
		'get_doc',
		function(doc_info)
		{
			databap.getMainElem('#titles_read_title').html(doc_info.title);
			databap.getMainElem('#titles_read_user').html(doc_info.name);
			databap.getMainElem('#titles_read_company').html(doc_info.company);
			databap.getMainElem('#titles_read_led').html(doc_info.led);
			databap.getMainElem('#titles_read_description').html(doc_info.description);

			//links
			for(i in doc_info.files)
			{
				databap.getMainElem('#doc_links')
					.append(
						$('<a>', {title:'T&eacute;l&eacute;charger cette documentation', href:databap.getActionLink('dl_file&id='+i)})
							.addClass(doc_info.files[i].ext)
							.text(doc_info.files[i].description)
						)
					.append('<br />');
				
			}
			setDisplay('read');
			fOnSuccess();
		},
		{id:iDocId},
		'json'
	);
	
}

function saveDoc()
{
	if(databap.getMainElem('#title').val()!='' && databap.getMainElem('#description').val()!='')
	{
		databap.saveForm
		(
			'add_doc', 
			databap.getMainElem('#doc_form'), 
			function(data)
			{
				if(data.result == 'success') loadDoc(data.doc_id);
			}, 
			true, 
			'json'
		);
	}
	else
	{
		databap.addErrorBefore('Tous les champs en sont pas remplis', '#doc_menu');
	}
}

function setDisplay(sNewMode)
{	
	//Hide / show boxes
	var $EditBoxes = databap.getMainElem('#titles_edit');
	var $ReadBoxes = databap.getMainElem('#titles_read, #docs_read');
	
	switch(sNewMode)
	{
		case 'read':
			$EditBoxes.hide();
			$ReadBoxes.show();
			break;
		case 'edit':
			$EditBoxes.show();
			$ReadBoxes.hide();
			break;
	}
}

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;
}

</script>