nineskeletor/templates/Page/viewwidget.html.twig

599 lines
23 KiB
Twig
Raw Normal View History

2023-01-12 16:14:31 +01:00
{% extends 'base.html.twig' %}
{% block menuuser %}
{% if access=="admin" %}
2023-01-23 09:46:34 +01:00
<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>
2023-01-12 16:14:31 +01:00
<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 %}
2023-01-23 09:46:34 +01:00
<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})) }}
2023-01-12 16:14:31 +01:00
{% 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>
2023-02-01 09:03:27 +01:00
// Ajustement des frames
$(window).resize(function() {
AjustFrame();
Masonry();
});
2023-01-12 16:14:31 +01:00
$('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",
2023-01-23 09:46:34 +01:00
handle: '.widget-sortable',
2023-02-01 09:03:27 +01:00
placeholder: "widgetplaceholder",
2023-01-12 16:14:31 +01:00
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");
2023-02-01 09:03:27 +01:00
//$(".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");
2023-01-12 16:14:31 +01:00
},
stop: function( event, ui ) {
$(".widgetbody").show();
$(".colcontainer .mycol").css("border","none");
2023-02-01 09:03:27 +01:00
$(".colcontainer .mycol").css("padding-bottom","");
$(".colcontainer .mycol").css("min-height","");
2023-01-12 16:14:31 +01:00
},
update: updateLocalisation
});
{% endif %}
// Sur le click des titres de widgets ouvrir / fermer le widget
2023-01-23 09:46:34 +01:00
$( ".widget-header .widget-title" ).click(function() {
2023-01-12 16:14:31 +01:00
showhideWidget(this);
});
2023-01-23 09:46:34 +01:00
$( ".widget-header .widget-logo" ).click(function() {
2023-01-12 16:14:31 +01:00
showhideWidget(this);
});
// balise h des widget editor
$(".widget-editor .widgetbody :header").css("color",$(".widgetbody").css("color"));
2023-02-01 09:03:27 +01:00
// Création des slick
Slick();
// Masonry
Masonry();
2023-01-12 16:14:31 +01:00
});
// function slick
2023-02-01 09:03:27 +01:00
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());
2023-01-12 16:14:31 +01:00
});
}
2023-02-01 09:03:27 +01:00
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,
});
});
});
}
2023-01-12 16:14:31 +01:00
// 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");
2023-01-23 09:46:34 +01:00
if(widget.children(".widget-body").css("display")=='block')
2023-01-12 16:14:31 +01:00
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();
2023-01-23 09:46:34 +01:00
widget.find(".widget-body" ).toggle();
2023-01-12 16:14:31 +01:00
}
});
{% 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
}
});
});
});
2023-02-01 09:03:27 +01:00
// On remasone
Masonry();
2023-01-12 16:14:31 +01:00
}
// Création d'un widget selectionné
function selWidget(idwidgettype) {
2023-01-23 09:46:34 +01:00
var url="{{ path('app_'~access~'_pagewidget_widget_sumbit',{idpage:page.id,idwidgettype:'xx',usage:usage})}}";
2023-01-12 16:14:31 +01:00
url=url.replace('xx',idwidgettype);
$(location).attr('href', url);
};
// Modifciation d'un widget
function modWidget(idwidget) {
2023-01-23 09:46:34 +01:00
var url="{{ path('app_'~access~'_pagewidget_widget_update',{idpage:page.id,idwidget:'xx',usage:usage})}}";
2023-01-12 16:14:31 +01:00
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;
}
2023-01-23 09:46:34 +01:00
2023-01-12 16:14:31 +01:00
$.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) {
2023-01-23 09:46:34 +01:00
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);
2023-01-12 16:14:31 +01:00
url=url.replace(/&amp;/g,"&");
$(location).attr('href', url);
}
// Modifciation d'un bookmark
2023-01-23 09:46:34 +01:00
function modBookmark(idbookmark,idwidget,touser) {
var url="{{ path('app_'~access~'_bookmark_update',{id:'xx',idpage:page.id,idwidget:'yy',touser:'zz',usage:usage})}}";
2023-01-12 16:14:31 +01:00
url=url.replace('xx',idbookmark);
2023-01-23 09:46:34 +01:00
url=url.replace('yy',idwidget);
url=url.replace('zz',touser);
2023-01-12 16:14:31 +01:00
url=url.replace(/&amp;/g,"&");
$(location).attr('href', url);
}
// Ajouter un item aux bookmark
function heartBookmark(iditem) {
var idbookmark;
$.ajax({
method: "POST",
2023-01-23 09:46:34 +01:00
url: "{{ path('app_'~access~'_bookmark_heart') }}",
2023-01-12 16:14:31 +01:00
data: {
iditem:iditem
},
success: function(idbookmark) {
location.reload();
}
});
}
// Supprimer un bookmark
2023-01-23 09:46:34 +01:00
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})}}";
2023-01-12 16:14:31 +01:00
url=url.replace('xx',idbookmark);
2023-01-23 09:46:34 +01:00
url=url.replace('yy',idwidget);
url=url.replace('zz',touser);
2023-01-12 16:14:31 +01:00
url=url.replace(/&amp;/g,"&");
$.ajax({
method: "POST",
url: url,
success: function(idbookmark) {
location.reload();
}
});
}
}
2023-02-01 09:03:27 +01:00
// 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");
}
2023-01-12 16:14:31 +01:00
// Supprimer un fichier
2023-02-01 09:03:27 +01:00
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);
2023-01-12 16:14:31 +01:00
var r = confirm("Confirmez-vous la suppression de ce fichier ?");
if (r == true) {
$.ajax({
method: "POST",
2023-02-01 09:03:27 +01:00
url:url,
2023-01-12 16:14:31 +01:00
data: {
directory:directory,
filename:filename
},
success: function() {
location.reload();
}
});
}
}
2023-02-01 09:03:27 +01:00
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);
}
2023-01-12 16:14:31 +01:00
// Liste des slides
function listSlide(idwidget) {
2023-02-01 09:03:27 +01:00
var url="{{ path('app_'~access~'_pagewidgetslide_list',{idwidget:'xx',usage:usage})}}";
2023-01-12 16:14:31 +01:00
url=url.replace('xx',idwidget);
url=url.replace(/&amp;/g,"&");
$(location).attr('href', url);
}
2023-02-01 09:03:27 +01:00
// 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);
}
2023-01-12 16:14:31 +01:00
// 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" %}
2023-01-23 09:46:34 +01:00
parent.showItemframe(id,url,forcereload);
2023-01-12 16:14:31 +01:00
{% 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 %}