543 lines
18 KiB
Twig
543 lines
18 KiB
Twig
|
{% extends 'base.html.twig' %}
|
||
|
|
||
|
{% block localstyle %}
|
||
|
<style>
|
||
|
#gridtemplate {
|
||
|
border: 1px solid #cdcdcd;
|
||
|
padding:20px;
|
||
|
margin: 0px;
|
||
|
}
|
||
|
|
||
|
#gridtemplate .row {
|
||
|
height: 500px;
|
||
|
border: 1px solid #cdcdcd;
|
||
|
margin: 0px 0px 20px 0px;
|
||
|
background-color: #c8f7c5;
|
||
|
}
|
||
|
|
||
|
|
||
|
#gridtemplate .rowcontainer {
|
||
|
float:left;
|
||
|
width:90%;
|
||
|
height:80%;
|
||
|
}
|
||
|
|
||
|
#gridtemplate .rowcontainer .row {height:33.333333333333333%; margin:0px}
|
||
|
#gridtemplate .rowcontainer .maxright, #gridtemplate .rowcontainer .maxleft {height:90% !important; width:20% !important; }
|
||
|
#gridtemplate .rowcontainer .rowcontainer {width:60% !important;}
|
||
|
#gridtemplate .rowcontainer .addRow {display:none;}
|
||
|
#gridtemplate .rowcontainer .colcontainer {padding:5px;}
|
||
|
|
||
|
#gridtemplate .addRow {
|
||
|
width: 100%;
|
||
|
height: 10%;
|
||
|
padding: 2px;
|
||
|
max-height: 30px
|
||
|
}
|
||
|
|
||
|
#gridtemplate .delRow {
|
||
|
height:100%;
|
||
|
width: 5%;
|
||
|
background-color: #e74c3c;
|
||
|
color: #fff;
|
||
|
text-align:center;
|
||
|
float: left;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
#gridtemplate .delRow i {
|
||
|
position: relative;
|
||
|
top: 50%;
|
||
|
-webkit-transform: translateY(-50%);
|
||
|
-ms-transform: translateY(-50%);
|
||
|
transform: translateY(-50%);
|
||
|
}
|
||
|
|
||
|
#gridtemplate .colcontainer {
|
||
|
width:90%;
|
||
|
height:100% !important;
|
||
|
float:left;
|
||
|
padding:15px;
|
||
|
}
|
||
|
|
||
|
#gridtemplate .colcontainer .col {
|
||
|
border: 1px solid #cdcdcd;
|
||
|
height:100%;
|
||
|
padding: 0px;
|
||
|
background-color:#fff;
|
||
|
}
|
||
|
|
||
|
#gridtemplate .addCol {
|
||
|
height:100%;
|
||
|
width: 5%;
|
||
|
background-color: #2c3e50;
|
||
|
color: #fff;
|
||
|
text-align:center;
|
||
|
float: right;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
#gridtemplate .addCol i {
|
||
|
position: relative;
|
||
|
top: 50%;
|
||
|
-webkit-transform: translateY(-50%);
|
||
|
-ms-transform: translateY(-50%);
|
||
|
transform: translateY(-50%);
|
||
|
}
|
||
|
|
||
|
#gridtemplate .colcontainer .col .delCol {
|
||
|
height:10%;
|
||
|
width: 100%;
|
||
|
background-color: #e74c3c;
|
||
|
color: #fff;
|
||
|
text-align:center;
|
||
|
float: right;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
#gridtemplate .colcontainer .col .delCol i {
|
||
|
position: relative;
|
||
|
top: 50%;
|
||
|
-webkit-transform: translateY(-50%);
|
||
|
-ms-transform: translateY(-50%);
|
||
|
transform: translateY(-50%);
|
||
|
}
|
||
|
|
||
|
#gridtemplate .colcontainer .col .maxleft {
|
||
|
height:80%;
|
||
|
width: 5%;
|
||
|
background-color: #2c3e50;
|
||
|
color: #fff;
|
||
|
text-align:center;
|
||
|
float: left;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
#gridtemplate .colcontainer .col .maxleft i {
|
||
|
position: relative;
|
||
|
top: 50%;
|
||
|
-webkit-transform: translateY(-50%);
|
||
|
-ms-transform: translateY(-50%);
|
||
|
transform: translateY(-50%);
|
||
|
}
|
||
|
|
||
|
#gridtemplate .colcontainer .col .maxright {
|
||
|
height:80%;
|
||
|
width: 5%;
|
||
|
background-color: #2c3e50;
|
||
|
color: #fff;
|
||
|
text-align:center;
|
||
|
float: right;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
|
||
|
#gridtemplate .colcontainer .col .maxright i {
|
||
|
position: relative;
|
||
|
top: 50%;
|
||
|
-webkit-transform: translateY(-50%);
|
||
|
-ms-transform: translateY(-50%);
|
||
|
transform: translateY(-50%);
|
||
|
}
|
||
|
|
||
|
|
||
|
</style>
|
||
|
|
||
|
{% endblock %}
|
||
|
{% block body %}
|
||
|
{{ form_start(form) }}
|
||
|
<h1 class="page-header">
|
||
|
{% if mode=="update" %}
|
||
|
Modification Page Widget = {{page.name}}
|
||
|
{% elseif mode=="updatetemplate" %}
|
||
|
Modification Modèle de Page = {{page.name}}
|
||
|
{% elseif mode=="submit" %}
|
||
|
Création Page Widget
|
||
|
{% endif %}
|
||
|
</h1>
|
||
|
|
||
|
<p>
|
||
|
{{ form_widget(form.submit) }}
|
||
|
{% if access=="config" %}
|
||
|
{% if mode=="updatetemplate" %}
|
||
|
<a class="btn btn-secondary" href="{{ path('app_config_pagetemplate_view',{id:page.id}) }}">Annuler</a>
|
||
|
{% else %}
|
||
|
<a class="btn btn-secondary" href="{{ path('app_config_page_view',{id:page.id}) }}">Annuler</a>
|
||
|
{% endif %}
|
||
|
{% else %}
|
||
|
<a class="btn btn-secondary" href="{{ path('app_home',{id:page.id}) }}">Annuler</a>
|
||
|
{% endif %}
|
||
|
|
||
|
{% if mode=="update" %}
|
||
|
<a href={{ path('app_'~access~'_page_delete',{'id':page.id}) }}
|
||
|
class="btn btn-danger float-right"
|
||
|
data-method="delete" data-csrf="_token:{{ 'csrf' }}"
|
||
|
data-confirm="Êtes-vous sûr de vouloir supprimer cette page ?">
|
||
|
Supprimer
|
||
|
</a>
|
||
|
{% endif %}
|
||
|
|
||
|
{% if mode=="updatetemplate" %}
|
||
|
<a href={{ path('app_'~access~'_pagetemplate_delete',{'id':page.id}) }}
|
||
|
class="btn btn-danger pull-right"
|
||
|
data-method="delete" data-csrf="_token:{{ 'csrf' }}"
|
||
|
data-confirm="Êtes-vous sûr de vouloir supprimer ce modèle ?">
|
||
|
Supprimer
|
||
|
</a>
|
||
|
{% endif %}
|
||
|
</p>
|
||
|
|
||
|
{% if app.session.flashbag.has('error') %}
|
||
|
<div class='alert alert-danger' style='margin: 5px 0px'>
|
||
|
<strong>Erreur</strong><br>
|
||
|
{% for flashMessage in app.session.flashbag.get('error') %}
|
||
|
{{ flashMessage }}<br>
|
||
|
{% endfor %}
|
||
|
</div>
|
||
|
{% endif %}
|
||
|
|
||
|
{% if app.session.flashbag.has('notice') %}
|
||
|
<div class='alert alert-info' style='margin: 5px 0px'>
|
||
|
<strong>Information</strong><br>
|
||
|
{% for flashMessage in app.session.flashbag.get('notice') %}
|
||
|
{{ flashMessage }}<br>
|
||
|
{% endfor %}
|
||
|
</div>
|
||
|
{% endif %}
|
||
|
|
||
|
<div class="form-group row clearfix">
|
||
|
{% if form.roles is defined %}
|
||
|
<div class="col-md-8">
|
||
|
{% else %}
|
||
|
<div class="col-md-12">
|
||
|
{% endif %}
|
||
|
|
||
|
{{ form_row(form.name) }}
|
||
|
{{ form_row(form.roworder) }}
|
||
|
{{ form_row(form.fonticon) }}
|
||
|
{{ form_row(form.maxwidth) }}
|
||
|
{{ form_row(form.template) }}
|
||
|
</div>
|
||
|
|
||
|
{% if form.roles is defined %}
|
||
|
<div class="col-md-4">
|
||
|
{{ form_row(form.user) }}
|
||
|
{{ form_row(form.roles) }}
|
||
|
{{ form_row(form.groups) }}
|
||
|
</div>
|
||
|
{% endif %}
|
||
|
</div>
|
||
|
|
||
|
<h3>Template de Mise en Page</h3>
|
||
|
<div id="gridtemplate">
|
||
|
</div>
|
||
|
{{ form_end(form) }}
|
||
|
{% endblock %}
|
||
|
|
||
|
|
||
|
{% block localscript %}
|
||
|
|
||
|
<script>
|
||
|
var defcol = [];
|
||
|
defcol[1] = ["col-12"];
|
||
|
defcol[2] = ["col-6","col-6"];
|
||
|
defcol[3] = ["col-4","col-4","col-4"];
|
||
|
defcol[4] = ["col-3","col-3","col-3","col-3"];
|
||
|
defcol[5] = ["col-4","col-2","col-2","col-2","col-2"];
|
||
|
defcol[6] = ["col-2","col-2","col-2","col-2","col-2","col-2"];
|
||
|
|
||
|
var defaultcol = ""
|
||
|
defaultcol+="<div class='delCol'>";
|
||
|
defaultcol+="<i class='fa fa-trash'></i>";
|
||
|
defaultcol+="</div>";
|
||
|
defaultcol+="<div class='maxleft'>";
|
||
|
defaultcol+="<i class='fa fa-chevron-left'></i>";
|
||
|
defaultcol+="</div>";
|
||
|
defaultcol+="<div class='rowcontainer'>";
|
||
|
defaultcol+="</div>";
|
||
|
defaultcol+="<div class='maxright'>";
|
||
|
defaultcol+="<i class='fa fa-chevron-right'></i>";
|
||
|
defaultcol+="</div>";
|
||
|
defaultcol+="<a class='addRow btn btn-info'>Ajouter une Ligne</a>";
|
||
|
|
||
|
$('document').ready(function(){
|
||
|
// Template de base
|
||
|
if($(page_update_widget_template).val()=="") {
|
||
|
myrow ="<div class='row'>";
|
||
|
myrow+="<div class='delRow'><i class='fa fa-trash'></i></div>";
|
||
|
|
||
|
myrow+="<div class='row colcontainer'>";
|
||
|
myrow+="<div class='col col-4'>"+defaultcol+"</div>"
|
||
|
myrow+="<div class='col col-4'>"+defaultcol+"</div>"
|
||
|
myrow+="<div class='col col-4'>"+defaultcol+"</div>"
|
||
|
myrow+="</div>"
|
||
|
|
||
|
myrow+="<div class='addCol'><i class='fa fa-plus'></i></div>";
|
||
|
myrow+="</div>"
|
||
|
|
||
|
$("#gridtemplate").append(myrow);
|
||
|
}
|
||
|
// Interprétation du template sauvegardé
|
||
|
else {
|
||
|
var json = jQuery.parseJSON($(page_update_widget_template).val());
|
||
|
var mygrid="";
|
||
|
$.each(json.rows, function( index, rownv01 ) {
|
||
|
mygrid+="<div class='row'>";
|
||
|
mygrid+="<div class='delRow'><i class='fa fa-trash'></i></div>";
|
||
|
mygrid+="<div class='row colcontainer'>";
|
||
|
|
||
|
$.each(rownv01.cols, function( index, colnv01 ) {
|
||
|
mygrid+="<div class='col col-"+colnv01.size+"'>";
|
||
|
mygrid+="<div class='delCol'>";
|
||
|
mygrid+="<i class='fa fa-trash'></i>";
|
||
|
mygrid+="</div>";
|
||
|
mygrid+="<div class='maxleft'>";
|
||
|
mygrid+="<i class='fa fa-chevron-left'></i>";
|
||
|
mygrid+="</div>";
|
||
|
mygrid+="<div class='rowcontainer'>";
|
||
|
|
||
|
$.each(colnv01.rows, function( index, rownv02 ) {
|
||
|
mygrid+="<div class='row'>";
|
||
|
mygrid+="<div class='delRow'><i class='fa fa-trash'></i></div>";
|
||
|
mygrid+="<div class='row colcontainer'>";
|
||
|
$.each(rownv02.cols, function( index, colnv02 ) {
|
||
|
mygrid+="<div class='col col-"+colnv02.size+"'>"+defaultcol+"</div>";
|
||
|
});
|
||
|
mygrid+="</div>";
|
||
|
mygrid+="<div class='addCol'><i class='fa fa-plus'></i></div>";
|
||
|
mygrid+="</div>";
|
||
|
});
|
||
|
|
||
|
mygrid+="</div>";
|
||
|
mygrid+="<div class='maxright'>";
|
||
|
mygrid+="<i class='fa fa-chevron-right'></i>";
|
||
|
mygrid+="</div>";
|
||
|
mygrid+="<a class='addRow btn btn-info'>Ajouter une Ligne</a>";
|
||
|
mygrid+="</div>";
|
||
|
});
|
||
|
|
||
|
mygrid+="</div>";
|
||
|
mygrid+="<div class='addCol'><i class='fa fa-plus'></i></div>";
|
||
|
mygrid+="</div>";
|
||
|
});
|
||
|
|
||
|
$("#gridtemplate").append(mygrid);
|
||
|
}
|
||
|
|
||
|
$("#gridtemplate").append("<a class='addRow btn btn-info'>Ajouter une Ligne</a>");
|
||
|
|
||
|
// Ajout d'une ligne
|
||
|
$(document).on('click','.addRow', function(event){
|
||
|
lastrow=$(this).parent().children('.row').last();
|
||
|
parentid=$(this).parent().attr("id");
|
||
|
|
||
|
if(parentid=="gridtemplate") {
|
||
|
nbrow=$(this).parent().children('.row').length;
|
||
|
nbmax=5;
|
||
|
}
|
||
|
else {
|
||
|
nbrow=$(this).parent().children(".rowcontainer").children('.row').length;
|
||
|
nbmax=4;
|
||
|
}
|
||
|
|
||
|
nbrow++;
|
||
|
if(nbrow==nbmax)
|
||
|
alert("Vous ne pouvez pas insérer plus de "+(nbmax-1)+" lignes");
|
||
|
else {
|
||
|
myrow ="<div class='row'>";
|
||
|
myrow+="<div class='delRow'><i class='fa fa-trash'></i></div>";
|
||
|
|
||
|
myrow+="<div class='row colcontainer'>";
|
||
|
myrow+="<div class='col col-4'>"+defaultcol+"</div>"
|
||
|
myrow+="<div class='col col-4'>"+defaultcol+"</div>"
|
||
|
myrow+="<div class='col col-4'>"+defaultcol+"</div>"
|
||
|
myrow+="</div>"
|
||
|
|
||
|
myrow+="<div class='addCol'><i class='fa fa-plus'></i></div>";
|
||
|
myrow+="</div>"
|
||
|
|
||
|
if(lastrow.length)
|
||
|
lastrow.after(myrow);
|
||
|
else
|
||
|
$(this).parent().children(".rowcontainer").append(myrow);
|
||
|
}
|
||
|
});
|
||
|
|
||
|
// Suppression d'une ligne
|
||
|
$(document).on('click','.delRow', function(event){
|
||
|
// On compte le nombre de row de ce niveau et on bloque s'il en reste plus qu'une et que l'on est sur le premier niveau de ligne
|
||
|
if($( this ).parent().parent().children(".row").length==1 && $( this ).parent().parent().attr("id")=="gridtemplate")
|
||
|
{
|
||
|
alert("Votre page doit avoir au minimum une ligne");
|
||
|
}
|
||
|
// Si ce n'est pas le cas on la supprime
|
||
|
else {
|
||
|
$( this ).parent().remove();
|
||
|
}
|
||
|
});
|
||
|
|
||
|
// Ajout d'une Colonne
|
||
|
$(document).on('click','.addCol', function(event){
|
||
|
// On récupère la ligne
|
||
|
row=$( this ).parent();
|
||
|
colcontainer=row.children(".colcontainer");
|
||
|
|
||
|
// On compte le nombre de colonne
|
||
|
nbcol=colcontainer.children(".col").length;
|
||
|
nbcol++;
|
||
|
if(nbcol>6) {
|
||
|
alert("Votre page ne peut avoir plus de 6 colonnes");
|
||
|
}
|
||
|
else {
|
||
|
// Pour chaque colonne on applique la répartition de taille en fonction du nombre de colonne total
|
||
|
colcontainer.children('.col').each(function( index ) {
|
||
|
$(this).removeClass();
|
||
|
$(this).attr("class","col "+defcol[nbcol][index]);
|
||
|
});
|
||
|
|
||
|
// On ajoute une colonne après la derniere colonne de la ligne
|
||
|
lastcol=colcontainer.children('.col').last();
|
||
|
lastcol.after("<div class='col "+defcol[nbcol][nbcol-1]+"'>"+defaultcol+"</div>");
|
||
|
}
|
||
|
});
|
||
|
|
||
|
// Suppression d'une Colonne
|
||
|
$(document).on('click','.delCol', function(event){
|
||
|
// On récupère la colonne
|
||
|
col=$( this ).parent();
|
||
|
colcontainer=col.parent();
|
||
|
|
||
|
// On compte le nombre de colonne
|
||
|
nbcol=colcontainer.children(".col").length;
|
||
|
nbcol--;
|
||
|
if(nbcol<1) {
|
||
|
alert("Au minimum 1 colonne");
|
||
|
}
|
||
|
else {
|
||
|
// On détruit la colonne
|
||
|
col.remove();
|
||
|
|
||
|
// Pour chaque colonne on applique la répartition de taille en fonction du nombre de colonne total
|
||
|
colcontainer.children('.col').each(function( index ) {
|
||
|
$(this).removeClass();
|
||
|
$(this).attr("class","col "+defcol[nbcol][index]);
|
||
|
});
|
||
|
}
|
||
|
});
|
||
|
|
||
|
// Agrandissement colonne sur la droite
|
||
|
$(document).on('click','.maxright', function(event){
|
||
|
// On récupère la colonne
|
||
|
col=$( this ).parent();
|
||
|
colcontainer=col.parent();
|
||
|
|
||
|
// On recherche la colonne suivante
|
||
|
colnext=col.next();
|
||
|
if(colnext.length) {
|
||
|
// uniquement si taille de la colonne suivant n'est pas col-1
|
||
|
if(colnext.attr("class")!="col col-1") {
|
||
|
// On récupére la taille de la colonne suivante et en cours
|
||
|
taillenext=parseInt(colnext.attr("class").replace("col-","").replace("col ",""));
|
||
|
taille=parseInt(col.attr("class").replace("col-","").replace("col ",""));
|
||
|
|
||
|
// On applique la nouvelle taille à la colonne en cours
|
||
|
col.removeClass();
|
||
|
col.attr("class","col col-"+(taille+1));
|
||
|
|
||
|
// On applique la nouvelle taille à la colonne suivante
|
||
|
colnext.removeClass();
|
||
|
colnext.attr("class","col col-"+(taillenext-1));
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
|
||
|
|
||
|
// Agrandissement colonne sur la gauche
|
||
|
$(document).on('click','.maxleft', function(event){
|
||
|
console.log("here");
|
||
|
// On récupère la colonne
|
||
|
col=$( this ).parent();
|
||
|
colcontainer=col.parent();
|
||
|
|
||
|
// On recherche la colonne suivante
|
||
|
colprev=col.prev();
|
||
|
|
||
|
if(colprev.length) {
|
||
|
// uniquement si taille de la colonne précédente n'est pas col-1
|
||
|
if(colprev.attr("class")!="col col-1") {
|
||
|
console.log(colprev.attr("class"));
|
||
|
// On récupére la taille de la colonne précédente et en cours
|
||
|
tailleprev=parseInt(colprev.attr("class").replace("col-","").replace("col ",""));
|
||
|
taille=parseInt(col.attr("class").replace("col-","").replace("col ",""));
|
||
|
console.log(taille);
|
||
|
|
||
|
// On applique la nouvelle taille à la colonne en cours
|
||
|
col.removeClass();
|
||
|
col.attr("class","col col-"+(taille+1));
|
||
|
|
||
|
// On applique la nouvelle taille à la colonne suivante
|
||
|
colprev.removeClass();
|
||
|
colprev.attr("class","col col-"+(tailleprev-1));
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
|
||
|
// Sur validation formulaire
|
||
|
$( "form" ).submit(function( event ) {
|
||
|
//event.preventDefault();
|
||
|
|
||
|
template='{"rows":[';
|
||
|
|
||
|
// Pour chaque ligne de niveau 01 de la grille
|
||
|
nbrownv01=$("#gridtemplate").children('.row').length;
|
||
|
$("#gridtemplate").children('.row').each(function( index ) {
|
||
|
template+='{';
|
||
|
template+='"id":'+index+',';
|
||
|
|
||
|
// Pour chaque colonne de la ligne de niveau 01
|
||
|
nbcolnv01=$(this).children('.colcontainer').children('.col').length;
|
||
|
template+='"cols":[';
|
||
|
$(this).children('.colcontainer').children('.col').each(function( index ) {
|
||
|
template+='{';
|
||
|
template+='"id":'+index+',';
|
||
|
template+='"size": '+parseInt($(this).attr("class").replace("col-","").replace("col ",""))+',';
|
||
|
|
||
|
// Pour chaque ligne de niveau 02
|
||
|
template+='"rows":[';
|
||
|
nbrownv02=$(this).children('.rowcontainer').children('.row').length;
|
||
|
$(this).children('.rowcontainer').children('.row').each(function( index ) {
|
||
|
template+='{';
|
||
|
template+='"id":'+index+',';
|
||
|
|
||
|
nbcolnv02=$(this).children('.colcontainer').children('.col').length;
|
||
|
template+='"cols":[';
|
||
|
$(this).children('.colcontainer').children('.col').each(function( index ) {
|
||
|
template+='{';
|
||
|
template+='"id":'+index+',';
|
||
|
template+='"size": '+parseInt($(this).attr("class").replace("col-","").replace("col ",""));
|
||
|
template+='}';
|
||
|
if(index+1<nbcolnv02) template+=',';
|
||
|
});
|
||
|
template+=']';
|
||
|
template+='}';
|
||
|
|
||
|
if(index+1<nbrownv02) template+=',';
|
||
|
});
|
||
|
template+=']';
|
||
|
|
||
|
|
||
|
template+='}';
|
||
|
if(index+1<nbcolnv01) template+=',';
|
||
|
|
||
|
});
|
||
|
template+=']';
|
||
|
template+='}';
|
||
|
if(index+1<nbrownv01) template+=',';
|
||
|
});
|
||
|
template+=']}';
|
||
|
|
||
|
$("#page_update_widget_template").val(template);
|
||
|
});
|
||
|
|
||
|
});
|
||
|
</script>
|
||
|
{% endblock %}
|