nineskeletor/templates/Icon/select.html.twig

71 lines
3.0 KiB
Twig

{% extends 'base.html.twig' %}
{% block body %}
<div class="row">
<div class="col-md-12" style="margin-bottom:15px">
<a onclick="window.parent.$('#mymodal').modal('hide');" class="btn btn-secondary">Fermer</a>
<a href="{{ path('app_'~access~'_icon',{'inframe':true}) }}" class="btn btn-secondary">Gérer les Icônes</a>
</div>
<div class="col-md-12">
<label class="control-label" for="group_label">Recherche</label>
<input type="text" id="icon_search" name="icon_search" class="form-control form-control" style="margin-bottom:15px">
{% if iconsuser is not empty %}
<h3>Mes Icônes</h3>
{% for icon in iconsuser %}
{% set tag = "" %}
{% if icon.tags %}
{% set tag = icon.tags %}
{% endif %}
{% if icon.label starts with 'icon/icon_' %}
{% set tag = tag ~ icon.label|replace({'icon/icon_':'', '.png':''}) %}
{% endif %}
<img onClick="window.parent.selIcon({{ icon.id }},'{{ path('app_minio_image',{file:icon.label}) }}')" data="{{tag}}" id="icon-{{ icon.id }}" class="grid-item-img" height="40" src="{{ path('app_minio_image',{file:icon.label}) }}" style="cursor:pointer; padding:2px; margin-bottom:2px; background-color: var(--colorbgbodydark">
{% endfor %}
<h3 class="mt-3">Icônes Communs</h3>
{% endif %}
{% for icon in icons %}
{% set tag = "" %}
{% if icon.tags %}
{% set tag = icon.tags %}
{% endif %}
{% if icon.label starts with 'icon/icon_' %}
{% set tag = tag ~ icon.label|replace({'icon/icon_':'', '.png':''}) %}
{% endif %}
<img onClick="window.parent.selIcon({{ icon.id }},'{{ path('app_minio_image',{file:icon.label}) }}')" data="{{tag}}" id="icon-{{ icon.id }}" class="grid-item-img" height="40" src="{{ path('app_minio_image',{file:icon.label}) }}" style="cursor:pointer; padding:2px; margin-bottom:2px; background-color: var(--colorbgbodydark">
{% endfor %}
</div>
</div>
{% endblock %}
{% block localscript %}
<script>
$('document').ready(function(){
$( "#icon_search" ).focus();
});
$( "#icon_search" ).on("keyup", function() {
if($( "#icon_search" ).val()=="")
$(".grid-item-img").show();
else {
tags=$( "#icon_search" ).val().toLowerCase().split(' ');
$(".grid-item-img").hide();
tags.forEach(function(tag){
$(".grid-item-img").each(function(index) {
icontags=$( this ).attr("data");
if (typeof icontags !== 'undefined') {
if(icontags.includes(tag)) $(this).show();
}
});
});
}
});
</script>
{% endblock %}