<%@ 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="fac.inc" -->

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

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

var export_template = S("csstemplate") || {};
export_template.version = FCLTVersion;

function prettyJson(j)
{
  try
  {
    var xx = JSON.stringify(JSON.parse(j), null, 2);
    if (xx == "null")
        return "";
    return xx;
  }
  catch (e)
  {
    return j;
  };
};

%>

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

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

      function isValidJsonString(text) {
          try {
              JSON.parse(text);
          } catch (e) {
              return false;
          }
          return true;
      }
      function loadImportcss($dialog)
      {
          var defaultTemplate = JSON.parse("<%=safe.jsstring(JSON.stringify(FCLTHeader.defaultTemplate))%>");
          var jsonstring = $dialog.find("#cssimport").val() || '{}';
          if (!isValidJsonString(jsonstring))
          {
            FcltMgr.alert(L("lcl_obj_bad_value"));
            return;
          }
          var css = JSON.parse(jsonstring);
          for (name in defaultTemplate)
          {
              if (name in css)
              {
                  $("td input[name="+name+"]").val(css[name]);
                  if (name.slice(-5) === "image") {
                    $("[type=button][aria-controls=" + name + "]").val(css[name]);
                  }
              }
              else
              {
                  $("td input[name="+name+"]").val('');
              }
          }
      }
      function doImportcss()
      {
          var params = {  title: L("lcl_paste")
                        ,  oktekst: L("lcl_ok")
                        ,  ishtmlsafe: true
                        ,  fncallback: loadImportcss
                        ,  buttons: [{ text: L("lcl_cancel"), icon: "fal fa-fw fa-undo", class: "alertCancel" }]
                        };

          var page_content = '<textarea id="cssimport" class="fldtxt" rows="4" cols="50"></textarea>';
          FcltMgr.mydialog( page_content, params);
      }
      function doExportcss()
      {
          var params = {  title: L("lcl_transport")
                        ,  oktekst: L("lcl_ok")
                        ,  ishtmlsafe: true
                        };

          var page_content = '<textarea class="fldtxt" rows="4" cols="50" onclick="this.select()" readonly><%=safe.jsstring(JSON.stringify(export_template))%></textarea>';
          FcltMgr.mydialog( page_content, params);
      }
      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")%>&nbsp;<input type='button' class='button' value='<%=L("lcl_paste")%>' onclick='doImportcss()'></th>
        <th>&nbsp;</th>
        <th><%=L("lcl_fac_template_curval")%>&nbsp;<input type='button' class='button' value='<%=L("lcl_transport")%>' onclick='doExportcss()'></th></tr>
<%
        for (itm in FCLTHeader.defaultTemplate)
        {
            var act = "";
            if (itm in S("csstemplate"))
                act = S("csstemplate")[itm];
            var con = "";
            if (itm in S("csstemplate"))
                con = S("csstemplate")[itm];
  // Voor kleurwaarden tonen we een kleurvoorbeeld, dat bepalen we aan de hand van onze defaultwaarde
%><tr><td class='label'><label for='<%=safe.html(itm)%>'><%=safe.html(itm)%></label></td>
      <td style="text-align:right"><% =(FCLTHeader.defaultTemplate[itm]).match(/^#(?!#)|^rgb/i) ? '<div class="color-preview" style="color:'+safe.htmlattr(FCLTHeader.defaultTemplate[itm])+'">' + I("fa-square fa-2x", { fastyle: "fas" }) + '</div>' : '' %></td>
      <td><%=safe.html(FCLTHeader.defaultTemplate[itm])%></td>
<%    if (itm.slice(-5) === "image") {
          Response.Write("    <td class='filepicker'>"
                       + "        <input type='hidden' id='" + safe.htmlattr(itm) + "' name='" + safe.htmlattr(itm) + "' value='" + safe.htmlattr(con) + "'>"
                       + "        <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(itm) + "' value='" + safe.htmlattr(con || L("lcl_image")) + "'"
                       + "             aria-controls='" + itm + "'"
                       + "             data-default-title='" + safe.htmlattr(itm) + "'"
                       + "             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(itm) + "'>"
                       + I("fa-trash-alt")
                       + "        </span>"
                       + "    </td>");
} else { %>
      <td><input class="fld" id='<%=safe.htmlattr(itm)%>' name='<%=safe.htmlattr(itm)%>' value='<%=safe.htmlattr(con)%>'></td>
<%} %>
      <td style="text-align:right"><% =(act && (FCLTHeader.defaultTemplate[itm]).match(/^#(?!#)|^rgb/i) || act.match(/^#(?!#)|^rgb/i)) ? '<div class="color-preview" style="color:'+safe.htmlattr(act)+'">' + I("fa-square fa-2x", { fastyle: "fas" }) + '</div>' : '' %></td>
<%    if (itm.slice(-5) === "image" && act && act.match(/^## .* ##$/) === null) { %>
      <td><span class="details" onClick="iface.fullscreen_image('<%=safe.jsstring(safe.htmlattr(HTTP.urlzelfnoroot() + S("style_image_path") + act))%>');"><%=safe.html(act)%></span></td>
<%    } else { %>
      <td><%=safe.html(act)%></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>&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(); %>
