nineskeletor/templates/Page/updatewidget.html.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" %}
        {% if usage=="template" %}
            Modification Modèle de Page = {{page.name}}
        {% else %}
            Modification Page Widget = {{page.name}}
        {% endif %}        
    {% elseif mode=="submit" %}
    Création Page Widget
    {% endif %}
    </h1>

    <p>
    {{ form_widget(form.submit) }}
    {% if access=="admin" %}
        <a class="btn btn-secondary" href="{{ path('app_'~access~'_page_'~usage~'_view',{id:page.id}) }}">Annuler</a>
    {% 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_'~usage~'_delete',{'id':page.id}) }}
        class="btn btn-danger float-end"
        data-method="delete" data-csrf="_token:{{ 'csrf' }}"
        data-confirm="Êtes-vous sûr de vouloir supprimer cette page ?">
        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 %}
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-pencil fa-fw"></i> Informations
                </div>

                <div class="card-body">
                    {{ form_row(form.name) }}
                    {{ form_row(form.roworder) }}
                    {{ form_row(form.fonticon) }}
                    {{ form_row(form.maxwidth) }}
                    {{ form_row(form.template) }}
                </div>
            </div>
        </div>

        {% if form.roles is defined %}
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <i class="fa fa-link fa-fw"></i> Affectations
                    </div>
                    <div class="card-body">
                        {{ form_row(form.user) }}
                        {{ form_row(form.roles) }}
                        {{ form_row(form.groups) }}
                    </div>
                </div>
            </div>
        {% endif %}
    </div>

    <div class="card mt-3">
        <div class="card-header">
            <i class="fas fa-table-columns fa-fw"></i> Template de Mise en Page
        </div>
        <div class="card-body">
            <div id="gridtemplate">
        </div>
    </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 %}