databap/masks/code.html

<div id="add_code_container">
	<form id="add_code" name="add_code">
		<div class="loggued">
			<textarea id="content" name="content" class="round"></textarea>
		</div>
		<table id="extra_data" style="display:none;">
			<tr>
				<td>Description</td>
				<td><input type="text" name="description" id="description" class="round" maxlength="200" /></td>
			</tr>
			<tr>
				<td>Lien (facultatif)</td>
				<td>
					<input type="text" name="link" id="link" class="round" maxlength="200" />
					<span id="available_phrase" class="round"><i class="fa fa-30 fa-inline"></i><span id="available_phrase_text"></span></span>
					<span id="link_result" class="share round"><i class="fa fa-inline fa-30 fa-c-share"></i><span id="link_result_text"></span></span>
					<input type="hidden" name="link_escaped" id="link_escaped" value="" />
				</td>
			</tr>
			<tr><td colspan="2" class="last" id="button_box"></td></tr>
		</table>
	</form>
</div>
<div id="reader">
	<div id="code_menu"></div>
	<div id="previous_versions" class="standalone"></div>
	<div id="reader_box"><div id="reader_subbox" style="margin-top:10px;"><div id="code_container"></div></div></div>
	<div id="next_versions" class="standalone"></div>
	<div id="edit_container" class="side_margins">
		<form name="edit_code" id="edit_code">
			<textarea id="content" name="content" class="round"></textarea>
			<input type="hidden" id="id" name="id" value="" />
		</form>
	</div>
</div>
<script type="text/javascript">
databap.pageInit = function()
{
	self.tmp('started', false);
	self.tmp('add', $('#add_code_container'));
	self.tmp('read', $('#reader'));
	
	var bEdit = (self.vars.id > 0 || self.vars.id!='');
	self.tmp('add').toggle(!bEdit);
	self.tmp('read').toggle(bEdit);
	
	var fOnFinish = function(){databap.setInitEnd(true);};
	bEdit?initReadCode(fOnFinish):initAddCode(fOnFinish);
};

databap.onResize = function()
{
	//Add Code
	self.maximizeElem(self.tmp('add').find('#content'));
	
	//Read Code
	self.setScrollBarSize('optimize');
};

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

/* Add Code */

function initAddCode(fOnFinish)
{
	//Tmp
	databap.tmp('last_val', 'string');
	
	//content
	databap.tmp('add').find('#content')
		.addDefaultValue(databap.consts.add_code_text)
		.one('keydown', function()
		{
			//Block exit
			databap.tmp('started', true);
			
			//Add other fields
			var $ExtraBox = databap.tmp('add').find('#extra_data');
			if($ExtraBox.is(':hidden')) $(this).animate({'height':'-='+$ExtraBox.show().outerHeight(true)});
		});

	//Button
	databap.tmp('add').find('#button_box').addButton('ok', 'Envoyer', add_code, 'add_code_btn', 'heavy');
	
	//link phrase
	databap.tmp('add').find('#link').bind
	(
		'keyup',
		function()
		{
			$link = databap.tmp('add').find('#link_result_text');
			var link = $.trim($(this).val());
			var escaped_link = link.replace(/ /g, '_');
			if(escaped_link!=databap.tmp('last_val'))
			{
				databap.tmp('last_val', escaped_link);
				$link.text(databap.getInternalLink('code', escaped_link, true));
				databap.tmp('add').find('#link_escaped').val(escaped_link);
				if(escaped_link!='') checkUrlAvailability($.trim(escaped_link));
				else databap.tmp('add').find('#link_result').add(databap.tmp('add').find('#available_phrase')).hide('fast');
			}
		}
	);
	fOnFinish();
}

//submit
function add_code()
{
	var code = self.tmp('add').find('#content').val();
							
	if
	(
		code!=databap.consts.add_code_text &&
		code!='' &&
		self.tmp('add').find('#description').val()!=''
	)
	{
		databap.saveForm
		(
			'add_code',
			self.tmp('add').find('#add_code'),
			function(iCodeId)
			{
				var link = self.tmp('add').find('#link_escaped').val();
				databap.tmp('started', false);
				databap.goToInternalLink('code', iCodeId);
			},
			true
		);
	}
	else
	{
		databap.addErrorBefore('Tous les champs ne sont pas remplis', self.tmp('add').find('#add_code_btn'));
	}
}

function checkUrlAvailability(phrase, bTriggered)
{
	if(bTriggered == true)
	{
		databap.getInfo
		(
			'url',
			function(bExist)
			{
				var availabilityClass, availabilityText;
				var $link = databap.getMainElem('#link_result');
				if(bExist=='0')
				{
					availabilityClass = 'available';
					availabilityText = 'Disponible';
					if($link.is(':hidden')) $link.show('fast');
				}
				else
				{
					availabilityClass = 'unavailable';
					availabilityText = 'Indisponible';
					if($link.is(':visible')) $link.hide('fast');
				}
				var $AvailableBox = databap.getMainElem('#available_phrase');
				$AvailableBox
					.removeClass('available unavailable')
					.addClass(availabilityClass);
				$AvailableBox.find('#available_phrase_text').text(availabilityText);
				$AvailableBox.show('fast');
			},
			{link_escaped:phrase},
			'html',
			function(){},
			true
		);
	}
	else
	{
		databap.addBufferIcon();
		if(typeof oCheckLinkTimer != "undefined") clearTimeout(oCheckLinkTimer);
		oCheckLinkTimer = setTimeout(function(){checkUrlAvailability(phrase, true);}, 500);	
	}
}

/* Read Code */

function initReadCode(fOnFinish)
{
	databap.tmp('edit_btn', 'object');
	databap.initScrollBar('#reader_box', '#reader_subbox', '#code_container');
	databap.setCodeContainer
	(
		function()
		{
			databap.getInfo
			(
				'read_code',
				function(jContent)
				{
					//append code to main and refresh id
					databap.appendCode(databap.tmp('read').find('#code_reader'), jContent);
					
					if(typeof jContent.other_versions !== 'undefined')
					{
						//Truncated versions
						if(jContent.truncated)
						{
							var $Truncated = $(databap.consts.versionHtml);
							$Truncated.find('#item_link')
								.text('...')
								.prop('href', databap.getInternalLink('code', jContent.truncated))
								.prop('title', 'Afficher les versions masquées');
							databap.tmp('read').find('#previous_versions').append($Truncated);
						}
						
						//Display other versions
						$.each
						(
							jContent.other_versions,
							function(key, code_info)
							{
								$verHtml = $(databap.consts.versionHtml);
						 		$verHtml.find('#description').html(code_info.description);
						 		$verHtml.find('i.fa').addClass('fa-c-code');
							 	$verHtml.find('#author_name').html(code_info.name);
								$verHtml.find('#author_company').html(code_info.company);
								$verHtml.find('#led').html(code_info.led);
								$verHtml.find('#item_link').prop('href', databap.getInternalLink('code', code_info.id_code)).prop('title', 'Afficher cette version du code');
								
								$verHtml = databap.setElemTags($verHtml, code_info.id_code);
								var anchor = '#'+((parseInt(code_info.id_code) < parseInt(databap.vars.id))?'previous':'next')+'_versions';
								databap.tmp('read').find(anchor).append($verHtml);
							}
						);
					}
					
					//Buttons
					databap.tmp('read').find('#code_menu')
						.addButton('edit', 'Modifier', edit, 'edit', '', 'edit_btn')
						.addButton('raw', 'Fichier brut', databap.getActionLink('raw_code', {id:databap.vars.phrase}), 'raw')
						.addButton('save', 'Télécharger', databap.getActionLink('dl_code', {id:databap.vars.phrase}), 'save')
						.addButton('print', 'Imprimer', databap.getActionLink('print_code', {id:databap.vars.phrase}), 'edit')
						.addButton('share', 'Partager', function(){databap.shareEvent('code', databap.vars.phrase);}, 'share');
					
					//expanding
					databap.tmp('read').find("input").click(function(){expand($(this));});
					databap.tmp('read').find("#code_container input[id^=expand_loop]").hover
					(
						function()
						{
							databap.tmp('read').find('.'+$(this).attr('id').substr(7)).toggleClass('code_hover');
						}
					);
					
					//Edit Buttons
					databap.tmp('read').find('#edit_container').addButton('ok', 'Corriger', valid_edit, 'edit_btn');
					
					fOnFinish();
				},
				{id:databap.vars.id},
				'json',
				function(){},
				true
			);
		},
		'#code_container'
	);
}

//Button actions
function edit()
{
	if(databap.tmp('read').find('#content').val()=='')
	{
		//make space for edit box
		databap.tmp('read').find('#previous_versions, #next_versions, #reader_box').slideUp('fast');

		databap.getInfo
		(
			'nude_code', 
			function(data)
			{
				databap.vars.old_code = data;
				databap.tmp('read').find('#content').val(databap.vars.old_code);
				databap.tmp('read').find('#id').val(databap.vars.id);
				databap.tmp('read').find('#edit_container').show('fast', function(){databap.maximizeElem(databap.tmp('read').find('#content'));});
				databap.tmp('edit_btn').find('.icon').attr('class', 'icon fa fa-c-c'); //TODO add to standard code
				databap.tmp('edit_btn').find('.value').text('Afficher');
			}, 
			{id:databap.vars.id}
		);
	}
	else
	{
		//display other versions
		databap.tmp('read').find('#previous_versions, #reader_box, #next_versions').slideDown('fast');
		databap.tmp('read').find('#'+databap.getElemTag('tab_left', databap.vars.id)).height('auto');
		databap.tmp('read').find('#content').add('#id').val('');
		databap.tmp('read').find('#edit_container').hide('fast');
		databap.tmp('edit_btn').find('.icon').attr('class', 'icon fa fa-c-edit');
		databap.tmp('edit_btn').find('.value').text('Modifier');
	}
}
function valid_edit()
{		
	code = databap.tmp('read').find('textarea#content').val();			
	if(code !='')
	{
		if(code != databap.vars.old_code)
		{
			databap.saveForm
			(
				'edit_code',
				databap.tmp('read').find('#edit_code'),
				function(iCodeId)
				{
					databap.vars.old_code = '';
					databap.goToInternalLink('code', iCodeId);
				},
				true
			);
		}
		else
		{
			databap.addWarningBefore('Aucune modification n\'a &eacute;t&eacute; effectu&eacute;e', databap.tmp('edit_btn'));
		}
	}
	else
	{
		databap.addErrorBefore('Le champ code est vide', databap.tmp('edit_btn'));
	}
}
</script>