125 lines
2.8 KiB
PHTML
125 lines
2.8 KiB
PHTML
<style>
|
|
div#entete {
|
|
width:45%;
|
|
float:left;
|
|
border:1px solid #bebebe;
|
|
height:400px;
|
|
overflow:auto;
|
|
margin:5px 0;
|
|
}
|
|
|
|
div#entete li {
|
|
background-color:#4D90FE;
|
|
border-top:2px solid #ffffff;
|
|
border-bottom:2px solid #ffffff;
|
|
line-height:20px;
|
|
font-weight:bold;
|
|
color:#000000;
|
|
margin-left:30px;
|
|
padding-left:10px;
|
|
}
|
|
|
|
div#dico {
|
|
width:45%;
|
|
height:400px;
|
|
float:right;
|
|
border:1px solid #bebebe;
|
|
overflow:auto;
|
|
margin:5px 0;
|
|
}
|
|
|
|
div#dico li {
|
|
list-style-type:none;
|
|
padding-left:10px;
|
|
background-color:#4D90FE;
|
|
border-top:2px solid #ffffff;
|
|
border-bottom:2px solid #ffffff;
|
|
line-height:20px;
|
|
font-weight:bold;
|
|
color:#000000;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="entete">
|
|
<h1 class="ui-widget-header">Entete</h1>
|
|
<div class="ui-widget-content">
|
|
<ol>
|
|
<span class="placeholder">Placer les elements ici</span>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="dico">
|
|
<h1 class="ui-widget-header">Elements disponibles</h1>
|
|
<ul>
|
|
<?php foreach($this->elements as $key => $element) {?>
|
|
<li id="<?=$key?>">
|
|
<?php if (isset($element['lib'])) { echo $element['lib']; } else { echo $key; }?>
|
|
<?php if (isset($element['values'])) { echo "<input type=\"text\" name=\"".$key."\" value=\"\"/>"; }?>
|
|
</li>
|
|
<?php }?>
|
|
</ul>
|
|
</div>
|
|
|
|
<div style="clear:both;">
|
|
Référence <input type="text" name="profil" value="" />
|
|
<a id="save" href="<?=$this->url(array('controller'=>'profil', 'action'=>'save'))?>">Sauvegarder</a>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
$("#dico li").draggable({
|
|
appendTo: "body",
|
|
helper: "clone"
|
|
});
|
|
$("#entete ol").droppable({
|
|
activeClass: "ui-state-default",
|
|
hoverClass: "ui-state-hover",
|
|
accept: ":not(.ui-sortable-helper)",
|
|
drop: function( event, ui ) {
|
|
$( this ).find( ".placeholder" ).remove();
|
|
var id = ui.draggable.attr('id');
|
|
$('<li id="'+id+'"></li>').html( ui.draggable.html() ).appendTo( this );
|
|
}
|
|
}).sortable({
|
|
items: "li:not(.placeholder)",
|
|
sort: function() {
|
|
$( this ).removeClass( "ui-state-default" );
|
|
}
|
|
});
|
|
|
|
$("#entete").delegate("a.delete","click", function(){
|
|
$(this).parent().remove();
|
|
});
|
|
|
|
$("#entete ol").delegate("li" , "hover", function(e) {
|
|
if (e.type === 'mouseenter') {
|
|
var html = $(this).html();
|
|
$(this).html(html+'<a href="#" class="delete">Supprimer</a>');
|
|
} else {
|
|
$( this ).find( ".delete" ).remove();
|
|
}
|
|
});
|
|
|
|
$('#save').click(function(e){
|
|
e.preventDefault();
|
|
var url = $(this).attr('href');
|
|
var list = new Array();
|
|
$('#entete ol li').each(function(index){
|
|
var id = $(this).attr('id');
|
|
if($('input[name='+id+']', this).length>0){
|
|
id = id + '(' + $('input[name='+id+']', this).val() + ')';
|
|
}
|
|
list.push(id);
|
|
});
|
|
var ref = $('input[name=profil]').val();
|
|
if (ref!='') {
|
|
$.post(url, { reference: ref, criteres: list.join() }, function(data){
|
|
if (data!='Erreur'){ window.location.href = '/'; }
|
|
}, 'json');
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|