nineskeletor/templates/Page/viewwidget.html.twig

{% extends 'base.html.twig' %}

{% block menuuser %}
    {% if access=="admin" %}
        <li><a href='{{ path('app_'~access~'_page_'~usage~'_update', {id:page.id}) }}' title='Modifier la page'><i class='fa fa-cog fa-fw'></i></a></li>
        <li><a href='{{ path('app_'~access~'_page_'~usage~'_delete', { id: page.id }) }}' data-method='delete' data-confirm='Êtes-vous sûr de vouloir supprimer ?' title='Supprimer la page'><i class='fa fa-trash fa-fw'></i></a></li>
        <li><a class="btn-modal" style='cursor:pointer' data-modalid='selwidget' title='Ajouter un widget'><i class='fa fa-cubes fa-fw'></i></a></li>
    {% endif %}
{% endblock %}

{% block body %}
    <div id="widget-container" style="{% if page.maxwidth>0%} max-width:{{ page.maxwidth }}px; margin:auto; {% endif %}">

    </div>  


    <div id="tolocalize" style="display:none">
        {% for pagewidget in page.pagewidgets %}
            <a href="{{ url(pagewidget.widget.routeview|replace({'_admin_':'_'~access~'_'}),{id:pagewidget.id,usage:usage}) }}"></a>
            {{ render(url(pagewidget.widget.routeview|replace({'_admin_':'_'~access~'_'}),{id:pagewidget.id,usage:usage})) }}
        {% endfor %}
    </div>

    {% if access!="all" %}
        <div id="selwidget" class="modal fade" role="dialog">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div id="mymodalheader" class="modal-header">
                        <h4 class="modal-title">SELECTIONNER UN WIDGET</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <a onclick="$('#selwidget').modal('hide');" class="btn btn-secondary mb-3">
                            Annuler
                        </a>

                        <table id="dataTables" class="table table-striped table-bordered table-hover" style="width:100%">
                            <thead>
                                <tr>
                                    <th class="no-sort" width="80px"></th>
                                    <th width="100px">Nom</th>
                                    <th class="no-sort" width="500px">Description</th>
                                </tr>
                            </thead>

                            <tbody>
                                {% for widget in widgets %}
                                    <tr>
                                        <td>
                                            <a onClick="selWidget({{ widget.id }})" style="cursor:pointer;">
                                                <img id="widgettype-{{ widget.id }}" class="grid-item-img" height="40" src="{{path('app_minio_image',{file:widget.icon.label}) }}" style="padding:2px">
                                            </a>
                                        </td>
                                        <td>{{ widget.name }}</td>
                                        <td>{{ widget.description }}</td>
                                    </tr>
                                {% endfor %}  
                            </tbody>
                        </table>                        
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block localscript %}
    <script>
        // Ajustement des frames
        $(window).resize(function() {
            AjustFrame();
            Masonry();
        });  


        $('document').ready(function(){

            // Initialisation du tableau des widgets selectionnable à la création
            $('#dataTables').DataTable({
                columnDefs: [ { "targets": 'no-sort', "orderable": false }, { "targets": 0, "className": "text-center" } ],
                iDisplayLength: 10,
                order: [[ 1, "asc" ]],
                //responsive: false,
                scrollX: false,                
            });

            

            // Création de la grille des widgets
            var template = '{{ page.template | raw }}';

            // Template de base
            if(template=="") {
                myrow ="<div>";
                myrow+="<div class='row colcontainer no-gutters'>";
                myrow+="<div id='R1C1' class='col col-lg-4'></div>"
                myrow+="<div id='R1C2' class='col col-lg-4'></div>"
                myrow+="<div id='R1C3' class='col col-lg-4'></div>"
                myrow+="</div>"

                $("#widget-container").append(myrow);
            }
            // Interprétation du template sauvegardé
            else {
                var json = jQuery.parseJSON(template);
                var mygrid="";
                var row01=0;

                $.each(json.rows, function( index, rownv01 ) {
                    row01++;
                    col01=0;
                    mygrid+="<div>";
                    mygrid+="<div class='row colcontainer no-gutters'>";

                    $.each(rownv01.cols, function( index, colnv01 ) {
                        col01++;
                        var row02=0;

                        mygrid+="<div id='R"+row01+"C"+col01+"' class='mycol col-lg-"+colnv01.size+"'>";
                        mygrid+="<div class='rowcontainer'>";

                        $.each(colnv01.rows, function( index, rownv02 ) {
                            row02++;
                            col02=0;

                            mygrid+="<div>";
                            mygrid+="<div class='row colcontainer no-gutters'>";   
                            $.each(rownv02.cols, function( index, colnv02 ) { 
                                col02++;
                                mygrid+="<div id='R"+row01+"C"+col01+"R"+row02+"C"+col02+"' class='mycol col-lg-"+colnv02.size+"'></div>";
                            });
                            mygrid+="</div>";
                            mygrid+="</div>";                          
                        });

                        mygrid+="</div>";    
                        mygrid+="</div>";      
                    });

                    mygrid+="</div>";
                    mygrid+="</div>";
                });

                $("#widget-container").append(mygrid);
            }

            // On déplace les widgets à leur emplacement
            $("#tolocalize").children(".widget").each(function( element ) {
                if($('#'+$(this).attr("loc")).length)
                    $(this).appendTo('#'+$(this).attr("loc"));
                else
                    $(this).appendTo('#R1C1');
            });

            // On ajoute un widget vide à chaque colonne
            $("#widget-container .col").each(function(element) {
                $("<div class='widgetempty'>&nbsp;</div>").appendTo($(this));
            });

            {% if canupdate %}
                // Mettre une taille mini de colonne sinon on ne pourra pas déplacer le widget dans la colonne
                $(".colcontainer .col").css("min-height","80px");

                // Rendre les widgets déplacable
                $("#widget-container .mycol").sortable({
                    connectWith: "#widget-container .mycol",
                    handle: '.widget-sortable',
                    placeholder: "widgetplaceholder",
                    tolerance: "pointer",
                    cursor: "move",
                    opacity: 0.6,      
                    start: function( event, ui ) {
                        ui.placeholder.css("height",ui.item.height());
                        $(".widgetbody").hide();
                        $(".colcontainer .mycol").css("border","1px solid #cdcdcd");
                        //$(".colcontainer .mycol").css("padding","15px");
                        $(".colcontainer .mycol").css("min-height","200px");
                        ui.placeholder.css("margin-right","-15px");
                        ui.placeholder.css("margin-left","-15px");
                        ui.placeholder.css("margin-bottom","30px");
                    },
                    stop: function( event, ui ) {
                        $(".widgetbody").show();
                        $(".colcontainer .mycol").css("border","none");   
                        $(".colcontainer .mycol").css("padding-bottom",""); 
                        $(".colcontainer .mycol").css("min-height","");    
                    },
                    update: updateLocalisation
                });
            {% endif %}

            
            // Sur le click des titres de widgets ouvrir / fermer le widget
            $( ".widget-header .widget-title" ).click(function() {
                showhideWidget(this);
            });        
            $( ".widget-header .widget-logo" ).click(function() {
                showhideWidget(this);
            });  

            // balise h des widget editor
            $(".widget-editor .widgetbody :header").css("color",$(".widgetbody").css("color"));

            // Création des slick
            Slick();

            // Masonry
            Masonry();
        });

        // function slick
        function Slick() {
            $('.widget-body .slick').each(function() {
                if(!$(this).parent().hasClass("widget-adjust"))
                    $(this).height($(this).parent().height());
                height=$(this).height();

                $(this).slick({
                    dots: true,
                    infinite: true,
                    fade: true,
                    cssEase: 'linear',
                    autoplay: true,
                    autoplaySpeed: $(this).data("slicktime"),
                });                
            });



            $('.widget-body .slick-slide ').each(function() {
                if(!$(this).parent().parent().parent().hasClass("widget-adjust"))
                    $(this).height($(this).parent().parent().parent().height());
            });
        }    

        function Masonry() {
            $('.masonry').imagesLoaded(function() {
                $('.widget-body .masonry').each(function() {
                    $(this).show();

                    var perc;
                    if($(this).width() >= 1500) perc="14,285714286%";
                    else if($(this).width() >= 1200) perc="16,666666667%";
                    else if($(this).width() >= 1000)  perc="20%";
                    else if($(this).width() >= 800)  perc="25%";
                    else if($(this).width() >= 500)  perc="33.333333333%";
                    else if($(this).width() >= 350)  perc="50%";
                    else perc="100%";

                    $(".masonry-item",$(this)).each(function() {
                        $(this).css("width",perc.toString().replace(",","."));
                    });
                    
                    $(".masonry-sizer",$(this)).each(function() {
                        $(this).css("width",perc.toString().replace(",","."));
                    });

                    $(this).masonry({
                        itemSelector: '.masonry-item',
                        columnWidth: '.masonry-sizer',
                        percentPosition: true,
                    });

                });
            });
        }

        // Cacher afficher le menu des widgets 
        $(".widget").hover(function() {
            if($(this).find(".widget-menu").length) {
                $(this).find(".widget-menu").show();
            }
        });

        $( ".widget" ).mouseleave(function() {
            $(this).find(".widget-menu").hide();
        });

        function showhideWidget(elem) {
            widget=$(elem).parent().parent();
            idwidget= widget.data("id");
            if(widget.children(".widget-body").css("display")=='block')
                value=false;
            else
                value=true;
            
            {% if app.user %}
            $.ajax({
                method: "POST",
                url: "{{ path('app_all_preference') }}",
                data: {
                    id:idwidget,
                    key:'widgetshowhide',
                    value:value
                },
                success: function(idbookmark) {
                    // on récupère le parent widget conteneur
                    widget=$(elem).parent().parent();
                    widget.find(".widget-body" ).toggle();
                }            
            });
            {% endif %}
                
        }

        // Modification de la localisation d'un widget
        function updateLocalisation() {
            $('.colcontainer .mycol').each(function(index) {
                var idloc=$(this).attr('id');
                $(this).children(".widget").each(function(order){
                    var idwidget=$(this).data('id');
                    $.ajax({
                        method: "POST",
                        url: "{{ path('app_'~access~'_pagewidget_order') }}",
                        data: {
                            idwidget:idwidget,
                            order:order,
                            idloc:idloc
                        }
                    });
                });
            });

            // On remasone
            Masonry();
        }

        // Création d'un widget selectionné
        function selWidget(idwidgettype) {
            var url="{{ path('app_'~access~'_pagewidget_widget_sumbit',{idpage:page.id,idwidgettype:'xx',usage:usage})}}";
            url=url.replace('xx',idwidgettype);

            $(location).attr('href', url);
        };

        // Modifciation d'un widget
        function modWidget(idwidget) {
            var url="{{ path('app_'~access~'_pagewidget_widget_update',{idpage:page.id,idwidget:'xx',usage:usage})}}";
            url=url.replace('xx',idwidget);
            url=url.replace(/&amp;/g,"&");

            $(location).attr('href', url);
        }

        // Suppression d'un widget
        function delWidget(idwidget) {
            var txt;
            var r = confirm("ATTENTION\nConfirmez-vous la suppression de ce widget ?\n\nL'ensemble du contenu sera définitivement perdu !!");
            if (r == true) {
                url="{{ path('app_'~access~'_pagewidget_delete',{idwidget:'xx'}) }}";
                url=url.replace('xx',idwidget);
                $.ajax({
                    method: "POST",
                    url: url, 
                });

                $(".widget[data-id="+idwidget+"]").remove();
            }
        }  

        // Changer widget
        function changeWidget(idwidget,key,value) {
            {% if app.user %}
            if(key=="modedesktop") {
                value=value+1;
                if(value==5) value=0;
            }
            
            $.ajax({
                method: "POST",
                url: "{{ path('app_all_preference') }}",
                data: {
                    id:idwidget,
                    key:key,
                    value:value
                },
                success: function() {
                    location.reload();
                }            
            });
            {% endif %}
        }   

        // Ajout d'un bookmark
        function addBookmark(idwidget,touser) {
            var url="{{ path('app_'~access~'_bookmark_submit',{idpage:page.id,idwidget:'yy',touser:'zz',usage:usage})}}";
            url=url.replace('yy',idwidget);
            url=url.replace('zz',touser);
            url=url.replace(/&amp;/g,"&");

            $(location).attr('href', url);
        }

        // Modifciation d'un bookmark
        function modBookmark(idbookmark,idwidget,touser) {
            var url="{{ path('app_'~access~'_bookmark_update',{id:'xx',idpage:page.id,idwidget:'yy',touser:'zz',usage:usage})}}";

            url=url.replace('xx',idbookmark);
            url=url.replace('yy',idwidget);
            url=url.replace('zz',touser);
            url=url.replace(/&amp;/g,"&");

            $(location).attr('href', url);
        }

        // Ajouter un item aux bookmark
        function heartBookmark(iditem) {
            var idbookmark;

            $.ajax({
                method: "POST",
                url: "{{ path('app_'~access~'_bookmark_heart') }}",
                data: {
                    iditem:iditem
                },
                success: function(idbookmark) {
                    location.reload();
                }            
            });

        }

        // Supprimer un bookmark
        function delBookmark(idbookmark,idwidget,touser) {
            if (confirm('Êtes-vous sûr de vouloir supprimer ce favoris ?')) {
                var url="{{ path('app_'~access~'_bookmark_delete',{id:'xx',idpage:page.id,idwidget:'yy',touser:'zz',usage:usage})}}";

                url=url.replace('xx',idbookmark);
                url=url.replace('yy',idwidget);
                url=url.replace('zz',touser);
                url=url.replace(/&amp;/g,"&");

                $.ajax({
                    method: "POST",
                    url: url,
                    success: function(idbookmark) {
                        location.reload();
                    }            
                });
            }
        }

        // Ajouter image
        function addImage(idwidget) {
            var url="{{ path('app_'~access~'_file_upload',{category:'pagewidget', id:'yy', type:'image', usage:usage})}}";
            url=url.replace('yy',idwidget);
            url=url.replace(/&amp;/g,"&");

            $("#mymodallarge .modal-title").text("Téléchargement");
            $("#mymodallarge iframe").attr("src",url);
            $("#mymodallarge").modal("show");
        }
                
        // Supprimer un fichier 
        function delFile(idwidget,file,navigation=false) {
            var url="{{ path('app_'~access~'_file_delete',{category:'pagewidget', id:'yy', file:'zz', navigation: 'xx', usage:usage})}}";
            url=url.replace('yy',idwidget);
            url=url.replace('zz',file);
            url=url.replace('xx',navigation);

            var r = confirm("Confirmez-vous la suppression de ce fichier ?");
            if (r == true) {        
                $.ajax({
                    method: "POST",
                    url:url,
                    data: {
                        directory:directory,
                        filename:filename
                    },
                    success: function() {
                        location.reload();
                    }            
                });        
            }
        }

        function viewFile(idwidget,file,navigation=false) {
            file=file.replace(".thumb/","");

            var url="{{ path('app_'~access~'_file_view',{category:'pagewidget', id:'yy', file:'zz', navigation: 'xx', usage:usage})}}";
            url=url.replace('yy',idwidget);
            url=url.replace('zz',file);
            url=url.replace('xx',navigation);
            url=url.replace(/&amp;/g,"&");

            $(location).attr('href', url);
        }

        // Liste des slides
        function listSlide(idwidget) {
            var url="{{ path('app_'~access~'_pagewidgetslide_list',{idwidget:'xx',usage:usage})}}";
            
            url=url.replace('xx',idwidget);
            url=url.replace(/&amp;/g,"&");
            
            $(location).attr('href', url);
        }    

        // Forum ckeditor
        function ckeditor(idwidget) {
            var url="{{ path('app_'~access~'_pagewidget_ckeditor',{idwidget:'xx',usage:usage})}}";
            
            url=url.replace('xx',idwidget);
            url=url.replace(/&amp;/g,"&");
            
            $(location).attr('href', url);
        }  

        // Ajustement des frames
        function AjustFrame() {
            if($(".itemframe").length>0) {
                $(".itemframe").css("height",$(window).height()-$(".header").height());
            }
        }    

        // Affichage des frames associés aux items de bureau
        function showItemframe(id,url,forcereload) {
            {% if access=="all" %}
                parent.showItemframe(id,url,forcereload);
            {% else %}
                $("#page").hide();
                $("body").css("overflow-y","hidden");

                if($("#itemframe-"+id).length) {
                    if(forcereload) {
                        $("#itemframe-"+id).attr("src",url);
                    }
                    $("#itemframe-"+id).show();
                }
                else {
                    $("#page").before("<iframe id='itemframe-"+id+"' class='itemframe' src='"+url+"'></iframe>");
                }

                AjustFrame();
            {% endif %}
        }

        // Affichage des items d'une catégorie
        function showItemCat(idwidget, id) {
            $(".widget[data-id="+idwidget+"]").find("#itemsearch").val("");

            $(".widget[data-id="+idwidget+"]").find(".item").hide();
            $(".widget[data-id="+idwidget+"]").find(".itemcategory-title").hide();

            if(id=="all") {
                $(".widget[data-id="+idwidget+"]").find(".item").show();
                $(".widget[data-id="+idwidget+"]").find(".itemcategory-title").show();
            }
            else if(id=="fav") {
                $(".widget[data-id="+idwidget+"]").find(".item[data-idcategory="+id+"]").show();
                $(".widget[data-id="+idwidget+"]").find(".itemcategory-title[data-idcategory="+id+"]").show();
            }
            else {
                $(".widget[data-id="+idwidget+"]").find(".item[data-idcategory="+id+"]").show();
                $(".widget[data-id="+idwidget+"]").find(".itemcategory-title[data-idcategory="+id+"]").show();
            }
        }

        // Affichage des items d'une catégorie
        function searchItem(idwidget, label) {
            $(".widget[data-id="+idwidget+"]").find(".bookmark-container").show();
            $(".widget[data-id="+idwidget+"]").find(".itemcategory-container").show();
            if(label=="") {
                $(".widget[data-id="+idwidget+"]").find(".itemcategory-title").show();
                $(".widget[data-id="+idwidget+"]").find(".item").show();
            }
            else {
                $(".widget[data-id="+idwidget+"]").find(".itemcategory-title").hide();
                $(".widget[data-id="+idwidget+"]").find(".item").hide();

                items=$(".widget[data-id="+idwidget+"]").find(".item[data-title*='"+label.toLowerCase()+"']");
                if(items.length) {
                    items.show();
                    items.each(function() {
                        category=$(this).data("idcategory");
                        $(".widget[data-id="+idwidget+"]").find(".itemcategory-title[data-idcategory="+category+"]").show();
                    });                   
                }
            }
        }      

        // Place un message en lu
        function hideAlert(id) {
            $.ajax({
                method: "POST",
                url: "{{ path('app_all_alert_read') }}",
                data: {
                    id:id
                },
                success: function() {
                    $("#alert-"+id).remove();
                }            
            }); 
        }
    </script>
{% endblock %}