franzz/databap
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix link replacement (table / one-letter replacement)

Browse Source
This commit is contained in:
lutranf
2014-08-28 10:54:38 +02:00
parent 27df89b0aa
commit 52d117316f
6 changed files with 63 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

566
masks/procedure.html Executable file
View File

@@ -0,0 +1,566 @@
<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="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">
<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></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)
{
//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('#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()
{
//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('.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)
{
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 addStep(stepId, sPosition, sDesc)
{
//Set Step Count
iCurrentStep = '0';
//Build new Step
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);
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();
//setDisplay('read');
//Unblock exit
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);
//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;
}
);
}
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>