ninegate/src/cadolesuser-1.0/src/Cadoles/PortalBundle/Resources/views/Page/viewwidget.html.twig

{% extends '@CadolesCore/base.html.twig' %}


{% block pagewrapper %}
    {% if access=="config" %}
        <div class="pagemenu">
            <a href="{{ path('cadoles_portal_config_page_view', {id:entity.id})}}">{{ entity.name }}</a>>

            <a href='{{ path('cadoles_portal_config_page_update', {id:entity.id}) }}' title='Modifier le panel'><i class='fa fa-file fa-fw'></i></a>
            <a href='{{ path('cadoles_portal_config_page_delete', { id: entity.id }) }}' data-method='delete' data-confirm='Êtes-vous sûr de vouloir supprimer ?' title='Supprimer le panel'><i class='fa fa-trash fa-fw'></i></a>
            <a href='' style='cursor:pointer' data-toggle='modal' data-target='#selwidget' title='Ajouter un widget'><i class='fa fa-cubes fa-fw'></i></a>
        </div>
    {% endif %}

    <div id="loader"><img src="/{{alias}}/bundles/cadolescore/images/loading.gif" width="50px"></div>

    <div id="gridtemplate" style="{% if entity.maxwidth>0%} max-width:{{ entity.maxwidth }}px; margin:auto; {% endif %} margin-bottom:30px">

    </div>  

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

    <div id="selwidget" class="modal fade bs-item-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">SELECTIONNER UN WIDGET</h4>
                </div>

                <div class="modal-body">
                    <div class="form-group row clearfix">
                        <div class="col-md-12" style="margin-bottom:15px">
                            <a onclick="$('#selwidget').modal('hide');" class="btn btn-default">
                                Annuler
                            </a>
                        </div>  

                        <div class="dataTable_wrapper col-md-12">
                        <table id="dataTables" class="table table-bordered table-striped table-hover">  
                            <thead>
                            <tr>
                                <th width="100px">#</th>
                                <th>Nom</th>
                                <th class="no-sort">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="/{{ alias }}/{{ widget.icon.label }}" style="padding:2px">
                                            </a>
                                        </td>
                                        <td>{{ widget.name }}</td>
                                        <td>{{ widget.description }}</td>
                                    </tr>
                                {% endfor %}  
                            </tbody>
                        </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block localjavascript %}
    $('document').ready(function(){
        // Ajustement des frames
        $(window).resize(function() {
            AjustFrame();
        });  
		
        // Initialisation du tableau des widgets selectionnable à la création
        $('#dataTables').DataTable({
            columnDefs: [ { "targets": 'no-sort', "orderable": false }, { "targets": 0, "className": "text-center" } ],
            responsive: true,
            iDisplayLength: 10,
            order: [[ 1, "asc" ]],
        });

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

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

            $("#gridtemplate").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 class='row'>";
                mygrid+="<div class='colcontainer'>";

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

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

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

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

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

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

            $("#gridtemplate").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
        $("#gridtemplate .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","100px");

            // Cursor move sur les widgets header
            $(".widgetheader").css("cursor","move");

            // Rendre les widgets déplacable
            $("#gridtemplate .col").sortable({
                connectWith: "#gridtemplate .col",
                handle: '.widgetheader',
                placeholder: "widget widgetplacehorder",
                tolerance: "pointer",
                cursor: "move",
                opacity: 0.6,      
                start: function( event, ui ) {
                    ui.placeholder.css("height",ui.item.height());
                    $(".widgetbody").hide();
                    $(".colcontainer .col").css("border","1px solid #cdcdcd");
                    $(".colcontainer .col").css("padding-bottom","15px");
                },
                stop: function( event, ui ) {
                    $(".widgetbody").show();
                    $(".colcontainer .col").css("border","none");   
                    $(".colcontainer .col").css("padding-bottom","");

                    // Création des grilles d'items
                    var optiongrid={columnWidth: '.grid-sizer',itemSelector: '.grid-item'};
                    var grid = $('.grid').masonry(optiongrid);        
                },
                update: updateLocalisation
            });
        {% endif %}

        
        // Création des grilles d'items
        var optiongrid={columnWidth: '.grid-sizer', itemSelector: '.grid-item', gutter: '.grid-gutter-sizer'};
        var grid = $('.grid').masonry(optiongrid);        

        // Preview item de bureau
        $( ".grid .item-preview" ).click(function() {
            if($(this).parent().children(".grid-item-body").css('display') == 'none') {
                $(this).html('<i style="color: #FFF" class="fa fa-minus" title="Informations sur ce service"></i>');
                heightbody=$(this).parent().children(".grid-item-body").height()+30;
                heightitem=$(this).parent().parent().height();


                $(this).parent().children(".grid-item-body").show();
                $(this).parent().parent().css("width","100%");

                $(this).parent().parent().css("height",heightitem+heightbody);
                $(this).parent().children(".grid-item-content").css("height",heightitem+heightbody);
                $(this).parent().children(".item-preview").css("height",heightitem+heightbody);

                var grid = $('.grid').masonry(optiongrid);        
            }
            else {
                $(this).html('<i style="color: #FFF" class="fa fa-plus" title="Informations sur ce service"></i>');

                $(this).parent().children(".grid-item-body").hide();
                $(this).parent().parent().css("width","");
                $(this).parent().parent().css("height","");
                $(this).parent().children(".grid-item-content").css("height","");
                $(this).parent().children(".item-preview").css("height","");

                var grid = $('.grid').masonry(optiongrid);
            }
        });

        // Création des slick
        slick();

        // cacher le loader
        $("#loader").hide();
    });

    // function slick
    function slick() {
        $('.slick').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            //autoplaySpeed: ($(this).data("interval")*1000),
            dots: false,
            touchMove: false,
            pauseOnHover: false,
            fade: true,
            cssEase: 'linear',
            prevArrow: '<button type="button" class="slick-prev"></button>',
            nextArrow: '<button type="button" class="slick-next"></button>',
        });
    }    

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

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

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

    // Modifciation d'un widget
    function modWidget(idwidget) {
        var url="{{ path('cadoles_portal_'~access~'_pagewidget_widget_update',{idpage:entity.id,idwidget:'xx'})}}";

        url=url.replace('xx',idwidget);
        $(location).attr('href', url);
    }

    // Suppression d'un widget
    function delWidget(idwidget) {
        var txt;
        var r = confirm("Confirmez-vous la suppression de ce widget ?");
        if (r == true) {
            $.ajax({
                method: "POST",
                url: "{{ path('cadoles_portal_'~access~'_pagewidget_delete') }}",
                data: {
                    idwidget:idwidget
                }
            });

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

    // Ajout d'un bookmark
    function addBookmark(idwidget,touser) {
        var url="{{ path('cadoles_portal_'~access~'_bookmark_submit',{idpage:entity.id,idwidget:'xx',touser:'yy'})}}";
        url=url.replace('xx',idwidget);
        url=url.replace('yy',touser);

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

    // Modifciation d'un bookmark
    function modBookmark(idbookmark) {
        var url="{{ path('cadoles_portal_'~access~'_bookmark_update',{idpage:entity.id,id:'xx'})}}";

        url=url.replace('xx',idbookmark);
        $(location).attr('href', url);
    }

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

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

    }

    // Supprimer un fichier 
    function delFile(directory,filename) {
        var r = confirm("Confirmez-vous la suppression de ce fichier ?");
        if (r == true) {        
            $.ajax({
                method: "POST",
                url: "{{ path('cadoles_core_'~access~'_file_delete') }}",
                data: {
                    directory:directory,
                    filename:filename
                },
                success: function() {
                    location.reload();
                }            
            });        
        }
    }

    // Liste des slides
    function listSlide(idwidget) {
        var url="{{ path('cadoles_portal_'~access~'_slide_list',{idpage:entity.id,idwidget:'xx'})}}";
        url=url.replace('xx',idwidget);

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

    // Ajustement des frames
	function AjustFrame() {
		$('.frameajust').iframeAutoHeight({
			minHeight: 500, // Sets the iframe height to this value if the calculated value is less
			heightOffset: 0, // Optionally add some buffer to the bottom
			callback: function(callbackObject) { $(this).parent().css("height",callbackObject.newFrameHeight) ;}
		});

        if($(".frameitem").length>0) {
            var heightbody = $('html').height();
            var heightheader = $('.header').height();
            if($('.pagemenu').css("display")=="none")
                var heightmenu  = 0;
            else
                var heightmenu  = $('.pagemenu').height();

            var heightframe = heightbody-heightheader-heightmenu;

            $(".frameitem").height(heightframe);
        }
        
	}    

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

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

    // Affichage d'un Flux 
    function showFlux(idwidget, id) {
        console.log(idwidget);
        
        $(".widget[data-id="+idwidget+"]").find(".feed").hide();
        $(".widget[data-id="+idwidget+"]").find(".flux-"+id).show();
    }
      
{% endblock %}