<%@language = "javascript" %>
<%
/*  $Revision$
    $Id$

    File:               iconpicker.asp
    Description:        Geeft de text terug in formaat 'fa-flag' van het gekozen icoon
    Parameters:         Geen
    Context:            Modal om aan te vragen

*/ %>

<!-- #include file="../Shared/common.inc" -->
<!-- #include file="../Shared/iface.inc" -->

<%
FCLTHeader.Requires({ plugins:["jQuery"], js: ["jQuery-ui.js"]});
%>

<html>
  <head>
<%
   FCLTHeader.Generate();
%>
    <script>
        "use strict";
        function icon_cancel() {
            FcltMgr.closeDetail(window, { cancel: true });
        }

        $(function () {
            $(".fa-icon-picker").on("click", e => {
                if (e.target.tagName === "I") {
                    FcltMgr.closeDetail(window, { "success": true, "icon": e.target.classList[e.target.classList.length - 1] });
                }
            });

            $(".card-header-content").append("<span class='filter fal fa-search'><input type='text' id='autofilter' placeholder='" + L("lcl_autofilter_eng") + "'></span>");

            $("#autofilter").on("keyup", e => {
                var searchStr = $("#autofilter").val().toLowerCase();
                $(".fa-icon-picker").find("i").each((i, elem) => {
                    $(elem).toggle(String($(elem).attr("title")).indexOf(searchStr) > -1);
                });
                FcltMgr.resized();
            }).focus();
        })

    </script>
  </head>

<body class="fclt-modal" id="mod_iconpicker">
<% MODAL_START();

    var fa_symbols = [];
    var fa_style = S("fontawesomestyle");

    var cssfile = Server.MapPath("./css/fontawesome.min.css");
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var fread = fso.OpenTextFile(cssfile, 1); // For Reading
    var css = fread.ReadAll();
    fread.Close();

    var regexp = /\.fa-[a-z\d\-\.\:\,]*?(?={content)/g;
    var match, icons;
    while (match = regexp.exec(css)) {
        fa_symbols.push(match[0].split(",")); // => [ ".fa-coffee:before", ".fa-mug-saucer:before" ];
    }

    var version_regexp = /\s(\d+\.\d+\.\d+)\s/;
    var fa_version;
    match = version_regexp.exec(css)
    if (match) {
        fa_version = match[1];
    }

    MODAL_BLOCK_START("iconpicker", L("lcl_fac_font_awesome_icons").format(fa_version), { "icon": "fa-flag" });
%>  </table>
    <span class="fa-icon-picker"><%
        var terms, icon;
        for (var i = 0; i < fa_symbols.length; i++) {
            terms = [];
            for (var j in fa_symbols[i]) {
                terms.push(fa_symbols[i][j].slice(4, -7)); // Strip '.fa-' en ':before'
            }
            icon = fa_symbols[i][0].slice(1, -7); // Strip leading '.' en ':before' van de eerste alias
%>          <i class="<%=safe.htmlattr(fa_style)%> fa-fw <%=safe.htmlattr(icon)%>" title="<%=safe.htmlattr(terms.join("\r\n"))%>"></i>
<%      } %>
    </span>

<%  MODAL_BLOCK_END();

    SIMPLE_BLOCK_START();
    var buttons =  [
        { title: L("lcl_cancel"),  action: "icon_cancel()", importance: 3, icon: "fa-fclt-cancel" }
    ];
    CreateButtons(buttons);
    SIMPLE_BLOCK_END();
%>
<% MODAL_END(); %>
  </body>
</html>
<% ASPPAGE_END(); %>
