[(#VAL{1}|cibloc_start)]

<script>/* <![CDATA[ */    
cibloc_js_affichage_icone();
/* ]]> */</script>
<script>
    var cibloc_icone_couleur = '';
    var cibloc_icone_echelle = 2;
    var cibloc_icone_align = 'left';
    
    $("#cibloc_liste_icone i.fa").css("color", ["(#VAL{icone_defaut}|cibloc_couleur_icone)"]);
    
    function cibloc_change_style_icone_select(pos) {
        pos.style.backgroundColor  = pos[pos.selectedIndex].style.backgroundColor ;
        pos.style.color = pos[pos.selectedIndex].style.color ;
        var couleur = pos[pos.selectedIndex].value;
        if (couleur=='icone_defaut'){
            cibloc_icone_couleur = '';
        } else {    
            cibloc_icone_couleur = couleur.substring(6);
        }
        
        $("#cibloc_liste_icone i.fa").css("color", pos.style.backgroundColor);
        $("#cibloc_liste_icone i.fa").css("backgroundColor", '#FFFFFF');
        if (pos.style.backgroundColor=='#FFFFFF' || pos.style.backgroundColor=='rgb(255, 255, 255)'){
            $("#cibloc_liste_icone i.fa").css("backgroundColor", '#767676');
        }
    }
    
    function cibloc_change_echelle_icone_select(pos) {
        cibloc_icone_echelle = pos[pos.selectedIndex].value;
        var largeur_li = cibloc_icone_echelle * 3/2;
        
        $("#cibloc_liste_icone i.fa").removeClass("fa-2x fa-3x fa-4x fa-5x");
        $("#cibloc_liste_icone li").css("width", largeur_li + "rem");
        if (cibloc_icone_echelle>1){
            $("#cibloc_liste_icone i.fa").addClass("fa-"+cibloc_icone_echelle+"x");
        }
    }

    function cibloc_change_align_icone_select(pos) {
        cibloc_icone_align = pos[pos.selectedIndex].value;
    }
    
</script>

<div id="cibloc_popin_icones" class="cibloc_popin-choisir">
    <div class="cibloc_modal_header">
    <h1><:cibloc:choisir_icone:></h1>
    <button class="cibloc_lien_explications" onclick="cibloc_toggle(this); return false;" aria-hidden="true" aria-expanded="false" aria-controls="cibloc_info" data-hide="<:cibloc:voir_explication:>" data-show="<:cibloc:masquer_explication:>">
    <:cibloc:voir_explication:>
    </button>
    <div id="cibloc_info" class="cibloc_info" style="display:none;"><:cibloc:info_icone:><:cibloc:info_pied_icone:></div>
    </div>
    
    <div class="editer cibloc_icone_options">
            #SET{name,echelle}
            <label for="#GET{name}"><:cibloc:echelle:></label>
            [(#GET{name}|cibloc_popin_choix_echelle_icone)]            
        
            &nbsp;&nbsp;<label for="align"><:cibloc:alignement:></label>
            <select name="align" onchange="cibloc_change_align_icone_select(this)">
            <option value="left" selected="selected">left</option>
            <option value="center">center</option>
            <option value="right">right</option>
            </select>
            
            #SET{name,icone}
            &nbsp;&nbsp;<label for="#GET{name}"><:cibloc:couleur:></label>
            [(#GET{name}|cibloc_popin_choix_couleur_icone)]
    </div>

    <div id="cibloc_liste_icone" class="cibloc_modal_body">
    </div>
</div>