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

     File:          fac_edit_template.asp
     Description:   Bewerk het css-template
     Parameters:
*/ %>

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

<%
FCLTHeader.Requires({ plugins:["jQuery"] })

var autfunction = "WEB_LAYOUT";
var authparams = user.checkAutorisation(autfunction);
%>

<html>
  <head>
<%  FCLTHeader.Generate(); %>
    <script type="text/javascript" >

      $(function()
      {
        $("#main-color").on("change", _ => {
            $("#main-color-contrast").val(0);
        });
        $("#accent-color").on("change", _ => {
            $("#accent-color-contrast").val(0);
        });

        $("#frameheader-bg-color").on("change", function (e) {
            var frameHeaderBackgroundColor = [
                "#F2F2F2",
                "color-mix(in srgb, var(--main-color) 10%, rgb(255, 255, 255))",
                "color-mix(in srgb, var(--main-color) 50%, rgb(255, 255, 255))",
                "color-mix(in srgb, var(--main-color) 90%, rgb(255, 255, 255))"
            ][this.value];
            $(this).closest("td").next("td").find(".color-preview").css("color", frameHeaderBackgroundColor);
        })

        $('textarea').autogrow();
        FcltMgr.startEdit(window);
      });

      function doSubmit()
      {
        FcltMgr.confirm(L("lcl_fac_save_templateq"), function() {
            $("input[name=previewmode]").val(2); // Moet in combinatie met save
            $("input[name=submitting]").val(1);

            //document.u2.submit();
            $.post($("form[name=u2]")[0].action,
                   $("[name=u2]").serialize(),
                   function() {
                     if (window.frameElement)
                     {
                       /* force iFrame reload after save */
                       window.frameElement.contentWindow.location.href = window.frameElement.contentWindow.location.href;
                     }
                     else
                     {
                       /* force iframe-less reload after save */
                       window.location.href = window.location.href;
                     }
                   },
                   "html");
            return true; // disable button
        });
      }
      function preview(mode, submitting)
      {
        $("input[name=previewmode]").val(mode);
        $("input[name=submitting]").val(submitting||0);
        document.u2.submit();
      }

      function doCancel()
      {
          FcltMgr.closeDetail(window, { cancel: true } );
      }
    </script>
  </head>

  <body class="editmode">
<%  SUBFRAME_START();
    var buttons = []
    buttons.push({ title: L("lcl_submit"), icon: "fa-fclt-save", action: "doSubmit()" });
    buttons.push({ title: L("lcl_cancel"), icon: "fa-fclt-cancel", action: "doCancel()" });
    IFRAMER_HEADER("Template", buttons);
%>
      <form name=u2
            method="post"
            action="fac_edit_template_save.asp?"
            target="workFrame"
            onSubmit="doSubmit();">
<%
        BLOCK_START("template_css", L("lcl_fac_template_title"), { icon: "fa-paint-roller", wide: true, tablestyle: true });
        var custtemplate = S("csstemplate");
%>
        <input type='hidden' name='previewmode'>
        <input type='hidden' name='submitting'>
    <tr><th><%=L("lcl_fac_template_name")%></th>
        <th>&nbsp;</th>
        <th><%=L("lcl_fac_template_default")%></th>
        <th><%=L("lcl_fac_template_newval")%></th>
        <th>&nbsp;</th>
        <th><%=L("lcl_fac_template_curval")%></th></tr>
<%
        for (item in FCLTHeader.defaultTemplate)
        {
            var defaultValue = FCLTHeader.defaultTemplate[item];
            var actualValue = "";
            if (item in S("csstemplate")) {
                actualValue = S("csstemplate")[item];
            }
            var isColor = function(s) { return (s).match(/^#(?!#)|^rgb/i); };
            var isImage = item.slice(-5) === "image";

  // Voor kleurwaarden tonen we een kleurvoorbeeld, dat bepalen we aan de hand van onze defaultwaarde
%><tr><td class='label'><label for='<%=safe.html(item)%>'><%=safe.html(item)%></label></td>
      <td style="text-align:right">
<%    if (isColor(defaultValue)) { %>
        <div class="color-preview" style="color:<%=safe.htmlattr(defaultValue)%>"><%=I("fa-square fa-2x", { fastyle: "fas" })%></div>
<%    } %>
      </td>
      <td><%=safe.html(defaultValue)%></td>
<%    if (isImage) {
          Response.Write("    <td class='filepicker'>"
                       + "        <input type='hidden' id='" + safe.htmlattr(item) + "' name='" + safe.htmlattr(item) + "' value='" + safe.htmlattr(actualValue) + "'>"
                       + "        <span class='button-icon-wrapper file-picker'>"
                       + "            <span class='starticon'>" + I("fa-file-image") + "</span>"
                       + "            <input type='button' class='button symbol-upload' title='" + safe.htmlattr(item) + "' value='" + safe.htmlattr(actualValue || L("lcl_image")) + "'"
                       + "             aria-controls='" + item + "'"
                       + "             data-default-title='" + safe.htmlattr(item) + "'"
                       + "             data-module='STYLE'"
                       + "             data-upload-url='" + safe.htmlattr(protectQS.create("../shared/BijlagenForm.asp?module=STYLE")) + "'>"
                       + "        </span>"
                       + "        <span class='default-clickable-icon symbol-delete' aria-controls='" + safe.htmlattr(item) + "'>"
                       + I("fa-trash-alt")
                       + "        </span>"
                       + "    </td>");
      } else { %>
      <td><%
        RWFIELD(item, "fld", "", actualValue, { "datatype": "color" });
%>    </td><%
      } %>

      <td style="text-align:right"><%=(actualValue && isColor(defaultValue) || isColor(actualValue) ? '<div class="color-preview" style="color:'+safe.htmlattr(actualValue)+'">' + I("fa-square fa-2x", { fastyle: "fas" }) + '</div>' : '')%></td>
<%    if (item.slice(-5) === "image" && actualValue && actualValue.match(/^## .* ##$/) === null) { %>
      <td><span class="details" onClick="iface.fullscreen_image('<%=safe.jsstring(safe.htmlattr(HTTP.urlzelfnoroot() + S("style_image_path") + actualValue))%>');"><%=safe.html(actualValue)%></span></td>
<%    } else { %>
      <td><%=safe.html(actualValue)%></td>
<%    } %>
  </tr><%

      if (item == "main-color" || item == "accent-color") { %>
      <tr>
        <td class='label'><%=item%>-contrast</td>
        <td>&nbsp;</td>
        <td>Hoogste contrast</td>
        <td><%
        var sql = " SELECT 0, 'Hoogste contrast' FROM DUAL"
                + " UNION ALL"
                + " SELECT 1, 'Wit' FROM DUAL"
                + " UNION ALL"
                + " SELECT 2, 'Zwart' FROM DUAL"
                + " UNION ALL"
                + " SELECT 3, " + safe.quoted_sql(item == "main-color" ? "accent-color" : "main-color") + " FROM DUAL";
        var initKey = 0;
        if (item + "-contrast" in S("csstemplate")) {
            initKey = S("csstemplate")[item + "-contrast"];
        }
        FCLTselector(item + "-contrast", sql, {
            initKey: initKey,
            required: true
        });
%>      </td>
        <td style="text-align:right"><div class="color-preview" style="color:var(--<%=item%>-contrast);"><%=I("fa-square fa-2x", { fastyle: "fas" })%></div></td>
        <td>*Niet aanpassen om aan toegankelijkheidseisen te voldoen</td>
      </tr><%
        if (item == "accent-color") { // Na accent-color-contrast nog een pseudo-veld; frameheader-bg-color
%>    <tr>
        <td class='label'>frameheader-bg-color</td>
        <td style="text-align:right"><div class="color-preview" style="color: #F2F2F2"><%=I("fa-square fa-2x", { fastyle: "fas" })%></div></td>
        <td>#F2F2F2</td>
        <td><%
        var sql = " SELECT 0, 'Lichtgrijs (default)' FROM DUAL"
                + " UNION ALL"
                + " SELECT 1, '10% main-color' FROM DUAL"
                + " UNION ALL"
                + " SELECT 2, '50% main-color' FROM DUAL"
                + " UNION ALL"
                + " SELECT 3, '90% main-color' FROM DUAL";
        var initKey = 0;
        if ("frameheader-bg-color" in S("csstemplate")) {
            initKey = S("csstemplate")["frameheader-bg-color"];
        }
        var frameHeaderBackgroundColor = [
            "#F2F2F2",
            "color-mix(in srgb, var(--main-color) 10%, rgb(255, 255, 255))",
            "color-mix(in srgb, var(--main-color) 50%, rgb(255, 255, 255))",
            "color-mix(in srgb, var(--main-color) 90%, rgb(255, 255, 255))"
        ][initKey];
        FCLTselector("frameheader-bg-color", sql, {
            initKey: initKey,
            required: true
        });
%>      </td>
        <td style="text-align:right"><div class="color-preview" style="color:<%=frameHeaderBackgroundColor%>;"><%=I("fa-square fa-2x", { fastyle: "fas" })%></div></td>
        <td></td>
      </tr>
<%      }
      }
        }
%>
    <tr>
        <td></td>
        <td></td>
        <td><input type='button' class='button' value='<%=L("lcl_fac_template_preview")%>' onclick='preview(1)'></td>
        <td><input type='button' class='button' value='<%=L("lcl_fac_template_preview")%>' onclick='preview(2)'></td>
        <td></td>
        <td><input type='button' class='button' value='<%=L("lcl_fac_template_preview")%>' onclick='preview(0)'></td>
    </tr>
<%   if (user.has("WEB_PRSSYS"))
     {
%>    <tr><td colspan="6">&nbsp;</td></tr>
      <tr>
        <td><%=L("lcl_fac_csscust")%></td><td colspan="3"><textarea class="fldtxt" rows="3" id="csscust" name="csscust" maxlength="4000"><%=safe.textarea(S("csscust"))%></textarea></td>
      </tr>
<%   }
        BLOCK_END();

        IFACE.FORM_END();
%>
      </form>
      <% SUBFRAME_END(); %>

    <div id="result">
      <iframe width="100%" height="100%"
              src="../Shared/empty.asp"
              name="workFrame" id="workFrame"
              onload="FcltMgr.iframeLoaded(this, {widthToo: false, largerOnly: true})"
              frameborder="0" scrolling="no">
      </iframe>
    </div>

  </body>
</html>
<% ASPPAGE_END(); %>
