nineskeletor/templates/Child/search.html.twig

388 lines
20 KiB
Twig
Raw Permalink Normal View History

2023-02-16 17:03:53 +01:00
{% extends "base.html.twig" %}
{% block localstyle %}
<style>
h1 {
border-color: var(--colorbgbodydark);
border-block-width: 3px;
}
.tag, .tagalpha, .tagname {
background-color: var(--colorbgbodylight);
border-radius: 10px;
padding:5px 10px;
margin-bottom:5px;
display:inline-block;
min-width:35px;
text-align: center;
}
#selectcatparent, #selecttype, #selecttag {width:100%}
</style>
{% endblock %}
{% block body %}
<div class="row mb-5">
<div class="col-md-12 pt-3">
<div style="display:none">
<button data-types="16,17" class="btn btn-search mb-1 {% if childtypes=="16,17" %} btn-success{%else%} btn-primary{%endif%}">Ressources</button>
<button data-types="1,2" class="btn btn-search mb-1 {% if childtypes=="1,2" %} btn-success{%else%} btn-primary{%endif%}">Articles</button>
<button data-types="12,13" class="btn btn-search mb-1 {% if childtypes=="12,13" %} btn-success{%else%} btn-primary{%endif%}">Images</button>
<button data-types="10" class="btn btn-search mb-1 {% if childtypes=="10" %} btn-success{%else%} btn-primary{%endif%}">Visites Guidées</button>
<button data-types="11" class="btn btn-search mb-1 {% if childtypes=="11" %} btn-success{%else%} btn-primary{%endif%}">Sentiers</button>
<button data-types="14,15" class="btn btn-search mb-1 {% if childtypes=="14,15" %} btn-success{%else%} btn-primary{%endif%}">Vidéos</button>
<button data-types="18,19" class="btn btn-search mb-1 {% if childtypes=="18,19" %} btn-success{%else%} btn-primary{%endif%}">Interviews</button>
<button data-types="22" class="btn btn-search mb-1 {% if childtypes=="22" %} btn-success{%else%} btn-primary{%endif%}">Bibliographies</button>
<button data-types="30" class="btn btn-search mb-1 {% if childtypes=="30" %} btn-success{%else%} btn-primary{%endif%}">Photos Aériennes</button>
{% if is_granted('ROLE_ADMIN') %}
<button data-types="20" class="btn btn-search mb-1 {% if childtypes=="20" %} btn-success{%else%} btn-primary{%endif%}">Contacts</button>
<button data-types="21" class="btn btn-search mb-1 {% if childtypes=="21" %} btn-success{%else%} btn-primary{%endif%}">Liens</button>
{% endif %}
</div>
<div class="card card-body mt-3">
<div class="row">
<div class="col col-md-6">
<div class="form-group ">
<label class="control-label">Recherche</label>
<input id="searchname" class="form-control rounded" placeholder="Recherche" value="{{query}}"/>
</div>
</div>
<div class="col col-md-6" style="display:none">
<div class="form-group ">
<label for="selectcatparent">Types de Contenus</label>
<select id="selectcatparent">
{% for catparent in catparents %}
{% set selected ="" %}
{% if catparent == "map" %}
{% set selected ="selected" %}
{% endif %}
<option value="map" {{selected}}>Cartes</option>
{% set selected ="" %}
{% if catparent == "blog" %}
{% set selected ="selected" %}
{% endif %}
<option value="blog" {{selected}}>Actualités</option>
{% set selected ="" %}
{% if catparent == "page" %}
{% set selected ="selected" %}
{% endif %}
<option value="page" {{selected}}>Pages</option>
{% endfor %}
</select>
</div>
</div>
<div class="col col-md-6">
<div class="form-group ">
<label for="selecttag">Tags</label>
<select id="selecttag" multiple="multiple">
{% for tag in lsttags %}
{% set selected ="" %}
{% for selectag in tags %}
{% if tag.id == selectag %}
{% set selected ="selected" %}
{% endif %}
{% endfor %}
<option value="{{tag.id}}" {{selected}}>{{tag.id}}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9 pt-3">
{% set idchildtype=-100 %}
{% set idparent=-100 %}
{% set tbtag=[] %}
{% set tbname=[] %}
{% for child in childs %}
{% if loop.first %}
<h1 class="mt-3 mb-3">{{ child.childtype.name|replace({"Embed ":""}) }}</h1>
{% if not nopagination %}
<div class="mypaginationup mb-3" style="text-align:center;zoom:120%";></div>
{% endif %}
{% if not isalpha and child.childtype.id!=30 %}
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
{% endif %}
{% endif %}
{% if isalpha or child.childtype.id==30 %}
{% if child.idparent != idparent %}
{% if not loop.first %} </div> {% endif %}
<h2 class="mt-3 mb-3 MAP{{child.idparent}}">{{ child.nameparent }}</h2>
<div class="grid MAP{{child.idparent}}">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
{% set idparent=child.idparent %}
{% set tbname = tbname|merge({("MAP"~child.idparent):child.nameparent}) %}
{% endif %}
{% endif %}
{% set tagsclass="" %}
{% for tag in child.tags %}
{% set tagid=tag.id|replace({" ":""}) %}
{% if tag.id not in tbtag %}
{% set tbtag = tbtag|merge({(tagid):tag.id}) %}
{% endif %}
{% set tagsclass=tagsclass~" tag-"~tagid %}
{%endfor%}
{% if child.childtype.id==10 %}
<!--
{% set style="" %}
{% set url = "/"~appAlias~"/uploads/child/"~child.id~"/"~child.filename %}
<a href="{{url}}" target="_blank" class="d-block text-center">
<div class="grid-item grid-item-size-2 grid-square d-flex align-items-stretch {{tagsclass}}">
<div class="grid-image d-flex align-items-center pr-2 pl-2" style="{{style}}">
<div class="grid-item-title">{{ child.name }}</div>
</div>
</div>
</a>
-->
{% set url = "/"~appAlias~"/uploads/child/"~child.id~"/"~child.filename %}
<h2>{{ child.name }}</h2>
<a href="{{path("app_child_view",{catparent:child.catparent,idparent:child.idparent,idchild:0})}}">En savoir plus</a>
<iframe src="{{url}}" class="align-self-stretch" style="width:100%; background-color:#000;border:none; height:400px;"></iframe>
<a href="{{url}}" target="_blank" class="d-block text-center mb-5"><i class="fas fa-search-plus fa-2x"></i></a>
{% elseif child.childtype.id==12 or child.childtype.id==13 or child.childtype.id==30 %}
{% if child.childtype.id==12 or child.childtype.id==30 %}
{% set background="/"~appAlias~"/uploads/child/"~child.id~"/thumb/"~child.filename %}
{% else %}
{% set background=child.url %}
{% endif %}
{% set style="height:auto;background-position: center ; background-size: cover; background-image: url("~background~")" %}
<div class="grid-item grid-item-size-2 grid-square grid-modal d-flex align-items-stretch {{tagsclass}}" data-catparent="{{child.catparent}}" data-idparent="{{child.idparent}}" data-idchild="{{child.id}}">
<div class="grid-image d-flex align-items-center pr-2 pl-2" style="{{style}}"></div>
</div>
{% elseif child.childtype.id==16 or child.childtype.id==17 %}
{% set style="" %}
{%if child.image %}
{% set background=child.image|replace({"**appAlias**":appAlias}) %}
{% set style="height:auto;background-position: center ; background-size: cover; background-image: url("~background~")" %}
{% else %}
{%endif%}
<a href="{{path("app_child_view",{catparent:child.catparent,idparent:child.idparent,idchild:child.id})}}">
<div class="grid-item grid-item-size-2 grid-a4 d-flex align-items-stretch {{tagsclass}}">
<div class="grid-image d-flex align-items-center pr-2 pl-2" style="{{style}}">
<div class="grid-item-title">{{ child.name }}</div>
</div>
</div>
</a>
{%else%}
{% set style="" %}
{%if child.image %}
{% set background=child.image|replace({"**appAlias**":appAlias}) %}
{% set style="height:auto;background-position: center ; background-size: cover; background-image: url("~background~")" %}
{%endif%}
<a href="{{path("app_child_view",{catparent:child.catparent,idparent:child.idparent,idchild:child.id})}}">
<div class="grid-item grid-item-size-2 grid-square d-flex align-items-stretch {{tagsclass}}">
<div class="grid-image d-flex align-items-center pr-2 pl-2" style="{{style}}">
<div class="grid-item-title">{{ child.name }}</div>
</div>
</div>
</a>
{% endif %}
{% if loop.last %}
</div>
{% endif %}
{%endfor%}
{% if not nopagination %}
<div class="mypaginationdown" style="text-align:center;zoom:120%";></div>
{% endif %}
</div>
<div class="col-md-3">
<div class="mt-3 p-3" style="height:100%; background-color:#efefef;">
{% if isalpha %}
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"a"})}}">A</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"b"})}}">B</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"c"})}}">C</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"d"})}}">D</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"e"})}}">E</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"f"})}}">F</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"g"})}}">G</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"h"})}}">H</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"i"})}}">I</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"j"})}}">J</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"k"})}}">K</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"l"})}}">L</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"m"})}}">M</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"n"})}}">N</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"o"})}}">O</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"p"})}}">P</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"q"})}}">Q</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"r"})}}">R</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"s"})}}">S</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"t"})}}">T</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"u"})}}">U</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"v"})}}">V</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"w"})}}">W</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"x"})}}">X</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"y"})}}">Y</a>
<a class="btn-link tagalpha" href="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,alpha:"z"})}}">Z</a>
<br><br>
{% endif %}
{% if isalpha %}
<div style="zoom:80%">
<span data-id="tag-all" class="btn-link tagname"><i class="fas fa-tag"></i> Afficher Tout</span>
{% for key, name in tbname %}
<span data-id="{{key}}" class="btn-link tagname"><i class="fas fa-tag"></i> {{name}}</span>
{% endfor %}
</div>
{%else%}
<span data-id="tag-all" class="btn-link tag"><i class="fas fa-tag"></i> Afficher Tout</span>
{% for key, tag in tbtag %}
<span data-id="tag-{{key}}" class="btn-link tag"><i class="fas fa-tag"></i> {{tag}}</span>
{% endfor %}
{%endif%}
</div>
</div>
</div>
{% endblock %}
{% block localscript %}
<script>
$(window).resize(function() {
resizegrid();
});
$(document).ready(function() {
$("#selectcatparent").select2();
$("#selecttag").select2();
$("#selecttype").select2();
{% if not nopagination and count>maxresult%}
var itemsCount = {{count}};
var itemsOnPage = {{maxresult}};
url="{{path("app_child_search",{childtypes:childtypes,tags:tags|join(','),query:query,first:"{{page}}"})}}";
url=url.replaceAll("&amp;","&");
url=url.replaceAll("%7B","{");
url=url.replaceAll("%7D","}");
var pagination = new Pagination({
container: $(".mypaginationup"),
pageClickUrl: url
});
pagination.make(itemsCount, itemsOnPage, {{first}});
var pagination = new Pagination({
container: $(".mypaginationdown"),
pageClickUrl: url
});
pagination.make(itemsCount, itemsOnPage, {{first}});
{% endif %}
resizegrid();
});
function resizegrid() {
width=$('.grid-item').width();
console.log(width);
$('.grid-square').not('.grid-video').height(width);
$('.grid-a4').not('.grid-video').height(width/0.7);
$('.grid').masonry({
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer',
itemSelector: '.grid-item',
percentPosition: true,
horizontalOrder: false,
});
}
$(".tag").click(function(){
id=$(this).data("id");
if(id=="tag-all") {
$('.grid-item').each(function() {
$(this).addClass("d-flex");
$(this).show();
});
}
else {
$('.grid-item').each(function() {
$(this).removeClass("d-flex");
$(this).hide();
});
$('.'+id).each(function() {
$(this).addClass("d-flex");
$(this).show();
});
}
$('.grid').masonry();
});
$(".tagname").click(function(){
id=$(this).data("id");
if(id=="tag-all") {
$('.grid').show();
$('h2').show();
}
else {
$('.grid').hide();
$('h2').hide();
$('.'+id).each(function() {
$(this).show();
});
}
$("html, body").animate({ scrollTop: 0 },200);
});
$('#searchname').bind("enterKey",function(e){
$('.btn-success').click();
});
$('#searchname').keyup(function(e){
if(e.keyCode == 13)
{
$('.btn-success').click();
}
});
$('.grid-modal').click(function(){
url='{{path("app_child_view",{catparent:"ccc",idparent:"ppp",idchild:"iii"})}}';
url=url.replace("ccc",$(this).data("catparent"));
url=url.replace("ppp",$(this).data("idparent"));
url=url.replace("iii",$(this).data("idchild"));
ModalLoad('mymodallarge','Galerie',url );
});
$('.btn-search').click(function(){
catparent=$("#selectcatparent").val();
types=$(this).data("types");
tags=$("#selecttag").val().join(',');
query=$("#searchname").val();
url="{{path("app_child_search",{tags:"ttt",childtypes:"ppp",query:"qqq",catparents:"ccc"})}}";
url=url.replace("ccc",catparent);
url=url.replace("qqq",query);
url=url.replace("ppp",types);
url=url.replace("ttt",tags);
url=url.replaceAll("&amp;","&");
document.location=url;
});
$( ".grid-item" ).hover(function() {
$( this ).children(".grid-image").css("transform","scale(1.05)");
}, function() {
$( this ).children(".grid-image").css("transform","scale(1)");
});
</script>
{% endblock %}