weseek__growi/lib/views/admin/customize.html

{% extends '../layout/admin.html' %}

{% block html_title %}{{ customTitle(t('Customize')) }} {% endblock %}

{% block style_css_block %}
  {% if env === 'development' %}
    <script src="{{ webpack_asset('style').js }}"></script>
    <script src="{{ webpack_asset('style-theme-' + theme()).js }}"></script>
  {% else %}
    <link rel="stylesheet" href="{{ webpack_asset('style').css }}">
    <link rel="stylesheet" id="jssDefault" {# append id for theme selector #} href="{{ webpack_asset('style-theme-' + theme()).css }}">
  {% endif %}
{% endblock %}

{% block html_additional_headers %}
  {% parent %}
  <!-- CodeMirror -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.css">
  <style>
    .CodeMirror {
      border: 1px solid #eee;
    }
  </style>
{% endblock %}

{% block content_header %}
<div class="header-wrap">
  <header id="page-header">
    <h1 class="title" id="">{{ t('Customize') }} </h1>
  </header>
</div>
{% endblock %}

{% block content_main %}
<div class="content-main admin-customize">
  {% set smessage = req.flash('successMessage') %}
  {% if smessage.length %}
  <div class="alert alert-success">
    {{ smessage }}
  </div>
  {% endif %}

  {% set emessage = req.flash('errorMessage') %}
  {% if emessage.length %}
  <div class="alert alert-danger">
    {{ emessage }}
  </div>
  {% endif %}

  <div class="row">
    <div class="col-md-3">
      {% include './widget/menu.html' with {current: 'customize'} %}
    </div>
    <div class="col-md-9">

      <form action="/_api/admin/customize/theme" method="post" class="form-horizontal" id="customthemeSettingForm" role="form">
        <fieldset>
          <legend>{{ t('customize_page.Theme') }}</legend>

          {% if env === 'development' %}
            <div class="alert alert-warning">
              <strong>DEBUG MESSAGE:</strong> development build では、リアルタイムプレビューが無効になります
            </div>
          {% endif %}

          <div id="themeOptions">
            {# Light Themes #}
            <div class="d-flex">
              {% include 'widget/theme-colorbox.html' with { name: 'default',  bg: '#ffffff', topbar: '#334455', theme: '#112744' } %}
              {% include 'widget/theme-colorbox.html' with { name: 'nature',   bg: '#f9fff3', topbar: '#118050', theme: '#460039' } %}
              {% include 'widget/theme-colorbox.html' with { name: 'mono-blue',   bg: '#F7FBFD', topbar: '#00587A', theme: '#00587A' } %}
            </div>
            {# Dark Themes #}
            <div class="d-flex">
              {% include 'widget/theme-colorbox.html' with { name: 'default-dark', bg: '#212731', topbar: '#151515', theme: '#f75b36' } %}
              {# {% include 'widget/theme-colorbox.html' with { name: 'future', bg: '#16282D', topbar: '#011414', theme: '#04B4AE' } %} #}
              {% include 'widget/theme-colorbox.html' with { name: 'blue-night', bg: '#061F2F', topbar: '#27343B', theme: '#0090C8' } %}
            </div>
          </div>

          <div class="form-group">
            <div class="col-xs-offset-5 col-xs-6">
              <input type="hidden" id="hiddenInputTheme" name="settingForm[customize:theme]" value="{{ settingForm['customize:theme'] }}">
              <input type="hidden" name="_csrf" value="{{ csrf() }}">
              <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
            </div>
          </div>

        </fieldset>
      </form>

      <form action="/_api/admin/customize/behavior" method="post" class="form-horizontal" id="cutombehaviorSettingForm" role="form">
      <fieldset>
        <legend>{{ t('customize_page.Behavior') }}</legend>

        {% set isBehaviorGrowi = 'growi' === settingForm['customize:behavior'] || 'crowi-plus' === settingForm['customize:behavior'] %}
        <div class="form-group">
          <div class="col-xs-6">
            <h4>
              <div class="radio radio-primary">
                <input type="radio" id="radioBehaviorGrowi" name="settingForm[customize:behavior]" value="growi"
                    {% if isBehaviorGrowi %}checked="checked"{% endif %}>
                <label for="radioBehaviorGrowi">
                  GROWI Simplified Behavior <small class="text-success">(Recommended)</small>
                </label>
            </div>
            </h4>
            <ul>
              <li>Both of <code>/page</code> and <code>/page/</code> shows the same page</li>
              <li><code>/nonexistent_page</code> shows editing form</li>
              <li>All pages shows the list of sub pages <b>if using GROWI Enhanced Layout</b></li>
            </ul>
          </div>
          <div class="col-xs-6">
            <h4>
              <div class="radio radio-primary">
                <input type="radio" id="radioBehaviorCrowi" name="settingForm[customize:behavior]" value="crowi"
                    {% if !isBehaviorGrowi %}checked="checked"{% endif %}>
                <label for="radioBehaviorCrowi">
                  Crowi Classic Behavior
                </label>
              </div>
            </h4>
            <ul>
              <li><code>/page</code> shows the page</li>
              <li><code>/page/</code> shows the list of sub pages</li>
              <ul>
                <li>If portal is applied to <code>/page/</code> , the portal and the list of sub pages are shown</li>
              </ul>
              <li><code>/nonexistent_page</code> shows editing form</li>
              <li><code>/nonexistent_page/</code> the list of sub pages</li>
            </ul>
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-5 col-xs-6">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
          </div>
        </div>

      </fieldset>
      </form>


      <form action="/_api/admin/customize/layout" method="post" class="form-horizontal" id="cutomlayoutSettingForm" role="form">
      <fieldset>
        <legend>{{ t('customize_page.Layout') }}</legend>

        {% set isLayoutGrowi = 'growi' === settingForm['customize:layout'] || 'crowi-plus' === settingForm['customize:layout'] %}
        <div class="form-group">
          <div class="col-xs-6">
            <h4>
              <div class="radio radio-primary">
                <input type="radio" id="radioLayoutGrowi" name="settingForm[customize:layout]" value="growi"
                    {% if isLayoutGrowi %}checked="checked"{% endif %}>
                <label for="radioLayoutGrowi">
                  GROWI Enhanced Layout <small class="text-success">(Recommended)</small>
                </label>
              </div>
            </h4>
            <a href="/images/admin/customize/layout-crowi-plus.gif" class="ss-container">
              <img src="/images/admin/customize/layout-crowi-plus-thumb.gif" width="240px">
            </a>
            <ul>
              <li>Simple and Clear</li>
              <ul>
                <li>Show and post comments from the bottom of the page</li>
                <li>Affix Table-of-contents</li>
              </ul>
            </ul>
          </div>
          <div class="col-xs-6">
            <h4>
              <div class="radio radio-primary">
                <input type="radio" id="radioLayoutCrowi" name="settingForm[customize:layout]" value="crowi"
                    {% if !isLayoutGrowi %}checked="checked"{% endif %}>
                <label for="radioLayoutCrowi">
                  Crowi Classic Layout
                </label>
              </div>
            </h4>
            <a href="/images/admin/customize/layout-classic.gif" class="ss-container">
              <img src="/images/admin/customize/layout-classic-thumb.gif" width="240px">
            </a>
            <ul>
              <li>Functional</li>
              <ul>
                <li>Collapsible Sidebar</li>
                <li>Show and post comments in Sidebar</li>
                <li>Collapsible Table-of-contents</li>
              </ul>
            </ul>
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-5 col-xs-6">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
          </div>
        </div>

      </fieldset>
      </form>

      <form action="/_api/admin/customize/features" method="post" class="form-horizontal" id="customfeaturesSettingForm" role="form">
      <fieldset>
      <legend>{{ t('customize_page.Function') }}</legend>
        <p class="well">{{ t("customize_page.function_choose") }}</p>

        <div class="form-group">
          <label for="settingForm[customize:isEnabledTimeline]" class="col-xs-3 control-label">{{ t('customize_page.Timeline function') }}</label>
          <div class="col-xs-9">
            <div class="btn-group btn-toggle" data-toggle="buttons">
              <label class="btn btn-default btn-rounded btn-outline {% if settingForm['customize:isEnabledTimeline'] %}active{% endif %}" data-active-class="primary">
                <input name="settingForm[customize:isEnabledTimeline]" value="true" type="radio"
                    {% if true === settingForm['customize:isEnabledTimeline'] %}checked{% endif %}> ON
              </label>
              <label class="btn btn-default btn-rounded btn-outline {% if !settingForm['customize:isEnabledTimeline'] %}active{% endif %}" data-active-class="default">
                <input name="settingForm[customize:isEnabledTimeline]" value="false" type="radio"
                    {% if !settingForm['customize:isEnabledTimeline'] %}checked{% endif %}> OFF
              </label>
            </div>

            <p class="help-block">
              {{ t("customize_page.subpage_display") }}
            </p>
            <p class="help-block">
              {{ t("customize_page.performance_decrease") }}<br>
              {{ t("customize_page.list_page_display") }}
            </p>
          </div>
        </div>

        <div class="form-group">
          <label for="settingForm[customize:isSavedStatesOfTabChanges]" class="col-xs-3 control-label">{{ t("customize_page.tab_switch") }}</label>
          <div class="col-xs-9">
            <div class="btn-group btn-toggle" data-toggle="buttons">
              <label class="btn btn-default btn-rounded btn-outline {% if settingForm['customize:isSavedStatesOfTabChanges'] %}active{% endif %}" data-active-class="primary">
                <input name="settingForm[customize:isSavedStatesOfTabChanges]" value="true" type="radio"
                    {% if true === settingForm['customize:isSavedStatesOfTabChanges'] %}checked{% endif %}> ON
              </label>
              <label class="btn btn-default btn-rounded btn-outline {% if !settingForm['customize:isSavedStatesOfTabChanges'] %}active{% endif %}" data-active-class="default">
                <input name="settingForm[customize:isSavedStatesOfTabChanges]" value="false" type="radio"
                    {% if !settingForm['customize:isSavedStatesOfTabChanges'] %}checked{% endif %}> OFF
              </label>
            </div>

            <p class="help-block">
              {{ t("customize_page.save_edit") }}<br>
              {{ t("customize_page.by_invalidating") }}
            </p>
          </div>
        </div>

        <div class="form-group">
          <label for="settingForm[customize:isEnabledAttachTitleHeader]" class="col-xs-3 control-label">{{ t("customize_page.attach_title_header") }}</label>
          <div class="col-xs-9">
            <div class="btn-group btn-toggle" data-toggle="buttons">
              <label class="btn btn-default btn-rounded btn-outline {% if settingForm['customize:isEnabledAttachTitleHeader'] %}active{% endif %}" data-active-class="primary">
                <input name="settingForm[customize:isEnabledAttachTitleHeader]" value="true" type="radio" {% if true===settingForm['customize:isEnabledAttachTitleHeader'] %}checked{% endif %}> ON
              </label>
              <label class="btn btn-default btn-rounded btn-outline {% if !settingForm['customize:isEnabledAttachTitleHeader'] %}active{% endif %}" data-active-class="default">
                <input name="settingForm[customize:isEnabledAttachTitleHeader]" value="false" type="radio" {% if !settingForm['customize:isEnabledAttachTitleHeader'] %}checked{% endif %}> OFF
              </label>
            </div>

            <p class="help-block">
              {{ t("customize_page.attach_title_header_desc") }}
            </p>
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-3 col-xs-6">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
          </div>
        </div>

      </fieldset>
      </form>

      <form action="/_api/admin/customize/highlightJsStyle" method="post" class="form-horizontal" id="customhighlightJsStyleSettingForm" role="form">
        <fieldset>
          <legend>{{ t('customize_page.Code Highlight') }}</legend>
          <div class="form-group">
            <label for="settingForm[customize:highlightJsStyle]" class="col-xs-3 control-label">{{ t('customize_page.Theme') }}</label>
            <div class="col-xs-9">
              <select class="form-control selectpicker" name="settingForm[customize:highlightJsStyle]" onChange="selectHighlightJsStyle(event)">
                {% for key in Object.keys(highlightJsCssSelectorOptions) %}
                  <option value={{key}} {% if key == highlightJsStyle() %} selected {% endif %}>{{highlightJsCssSelectorOptions[key].name}}</option>
                {% endfor %}
              </select>
            </div>
          </div>

          <div class="form-group">
            <label for="settingForm[customize:highlightJsStyleBorder]" class="col-xs-3 control-label">(TBD) Border</label>
            <div class="col-xs-9">
              <div class="btn-group btn-toggle" data-toggle="buttons">
                <label class="btn btn-default btn-rounded btn-outline {% if settingForm['customize:highlightJsStyleBorder'] %}active{% endif %}" data-active-class="primary" onclick="selectBorderOn()">
                  <input name="settingForm[customize:highlightJsStyleBorder]" value="true" type="radio"
                      {% if true === settingForm['customize:highlightJsStyleBorder'] %}checked{% endif %}> ON
                </label>
                <label class="btn btn-default btn-rounded btn-outline {% if !settingForm['customize:highlightJsStyleBorder'] %}active{% endif %}" data-active-class="default" onclick="selectBorderOff()">
                  <input name="settingForm[customize:highlightJsStyleBorder]" value="false" type="radio"
                      {% if !settingForm['customize:highlightJsStyleBorder'] %}checked{% endif %}> OFF
                </label>
              </div>
            </div>
          </div>

          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/{{ highlightJsStyle() }}.css" class="highlightJsCss">

          <p class="help-block">
            Examples:
            <pre class="hljs {% if !settingForm['customize:highlightJsStyleBorder'] %}hljs-no-border{% endif %}"><code class="highlightjs-demo">function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
              ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }
}

export  $initHighlight;</code></pre>
          </p>

          <div class="form-group">
            <div class="col-xs-offset-5 col-xs-6">
              <input type="hidden" name="_csrf" value="{{ csrf() }}">
              <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
            </div>
          </div>

        </fieldset>
      </form>

      <form action="/_api/admin/customize/title" method="post" class="form-horizontal" id="customtitleSettingForm" role="form">
        <fieldset>
          <legend>カスタム Title</legend>

          <p class="well">
            <code>&lt;title&gt;</code>タグのコンテンツをカスタマイズできます。<br>
            <code>&#123;&#123;sitename&#125;&#125;</code>がサイト名、<code>&#123;&#123;page&#125;&#125;</code>がページ名またはページパスに置換されます
          </p>

          <p class="help-block">
            Default Value: <code>&#123;&#123;page&#125;&#125; - &#123;&#123;sitename&#125;&#125;</code>
            <br>
            Default Output: <pre><code class="xml">&lt;title&gt;/Sandbox - {{ appTitle }}&lt;&#047;title&gt;</code></pre>
          </p>

          <div class="form-group">
            <div class="col-xs-12">
              <input class="form-control" name="settingForm[customize:title]" value="{{ settingForm['customize:title'] }}"></input>
            </div>
          </div>

          <div class="form-group">
            <div class="col-xs-offset-5 col-xs-6">
              <input type="hidden" name="_csrf" value="{{ csrf() }}">
              <button type="submit" class="btn btn-primary">更新</button>
            </div>
          </div>

        </fieldset>
      </form>

      <form action="/_api/admin/customize/header" method="post" class="form-horizontal" id="cutomheaderSettingForm" role="form">
      <fieldset>
        <legend>カスタムヘッダーHTML</legend>

        <p class="well">
          システム全体に適用される HTML を記述できます。<code>&lt;header&gt;</code> タグ内の他の <code>&lt;script&gt;</code> タグ読み込み前に展開されます。<br>
          変更の反映はページの更新が必要です。
        </p>

        <p class="help-block">
          Examples:
          <pre class="hljs"><code>&lt;script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js" defer&gt;&lt;/script&gt;</code></pre>
        </p>

        <div class="form-group">
          <div class="col-xs-12">
            <div id="custom-header-editor"></div>
            <input type="hidden" id="inputCustomHeader" name="settingForm[customize:header]" value="{{ settingForm['customize:header'] }}">
          </div>
          <div class="col-xs-12">
            <p class="help-block text-right">
              <i class="fa fa-fw fa-keyboard-o" aria-hidden="true"></i>
              Ctrl+Space でコード補完
            </p>
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-5 col-xs-6">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
          </div>
        </div>

      </fieldset>
      </form>

      <form action="/_api/admin/customize/css" method="post" class="form-horizontal" id="cutomcssSettingForm" role="form">
      <fieldset>
        <legend>{{ t('customize_page.Custom CSS') }}</legend>

        <p class="well">
          {{ t("customize_page.write_CSS") }}<br>
          {{ t("customize_page.reflect_change") }}
        </p>

        <div class="form-group">
          <div class="col-xs-12">
            <div id="custom-css-editor"></div>
            <input type="hidden" id="inputCustomCss" name="settingForm[customize:css]" value="{{ settingForm['customize:css'] }}">
          </div>
          <div class="col-xs-12">
            <p class="help-block text-right">
              <i class="fa fa-fw fa-keyboard-o" aria-hidden="true"></i>
              {{ t("customize_page.ctrl_space") }}
            </p>
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-5 col-xs-6">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
          </div>
        </div>

      </fieldset>
      </form>


      <form action="/_api/admin/customize/script" method="post" class="form-horizontal" id="cutomscriptSettingForm" role="form">
      <fieldset>
        <legend>{{ t('customize_page.Custom script') }}</legend>

        <p class="well">
          {{ t("customize_page.write_java") }}<br>
          {{ t("customize_page.reflect_change") }}
        </p>

        <p class="help-block">
          Placeholders:<br>
          (Available after <code>load</code> event)
          <dl class="dl-horizontal">
            <dt><code>$</code></dt>
            <dd>jQuery instance</dd>
            <dt><code>crowi</code></dt>
            <dd>Crowi context instance</dd>
            <dt><code>Crowi</code></dt>
            <dd>Crowi legacy instance (jQuery based)</dd>
            <dt><code>crowiRenderer</code></dt>
            <dd>Crowi Renderer instance</dd>
            <dt><code>crowiPlugin</code></dt>
            <dd>GROWI plugin manager instance</dd>
          </dl>
        </p>
        <p class="help-block">
          Examples:
<pre class="hljs"><code>console.log($('.main-container'));

window.addEventListener('load', (event) => {
  console.log('config: ', crowi.config);
});</code></pre>
        </p>

        <div class="form-group">
          <div class="col-xs-12">
            <div id="custom-script-editor"></div>
            <input type="hidden" id="inputCustomScript" name="settingForm[customize:script]" value="{{ settingForm['customize:script'] }}">
          </div>
          <div class="col-xs-12">
            <p class="help-block text-right">
              <i class="fa fa-fw fa-keyboard-o" aria-hidden="true"></i>
              {{ t("customize_page.ctrl_space") }}
            </p>
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-5 col-xs-6">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
          </div>
        </div>

      </fieldset>
      </form>

    </div>
  </div>
{% endblock content_main %}

{% block body_end %}
  {% parent %}
  <script>
    $(`#customthemeSettingForm, #cutomlayoutSettingForm, #cutombehaviorSettingForm, #customhighlightJsStyleSettingForm,
       #customfeaturesSettingForm, #cutomheaderSettingForm, #cutomcssSettingForm, #cutomscriptSettingForm, #customtitleSettingForm`
    ).each(function() {
      $(this).submit(function()
      {
        function showMessage(formId, msg, status) {
          $('#' + formId + ' #alert-results').remove();

          if (!status) {
            status = 'success';
          }
          var $message = $('<p id="alert-results" class="alert"></p>');
          $message.addClass('alert-' + status);
          $message.html(msg.replace('\n', '<br>'));
          $message.insertAfter('#' + formId + ' legend');

          if (status == 'success') {
            setTimeout(function()
            {
              $message.fadeOut({
                complete: function() {
                  $message.remove();
                }
              });
            }, 5000);
          }
        }

        var $form = $(this);
        var $id = $form.attr('id');
        var $button = $('button', this);
        $button.attr('disabled', 'disabled');
        var jqxhr = $.post($form.attr('action'), $form.serialize(), function(data)
          {
            if (data.status) {
              showMessage($id, '更新しました');
            } else {
              showMessage($id, data.message, 'danger');
            }
          })
          .fail(function() {
            showMessage($id, 'エラーが発生しました', 'danger');
          })
          .always(function() {
            $button.prop('disabled', false);
        });
        return false;
      });
    });

    /*
     * highlight.js style switcher
     */
    hljs.initHighlightingOnLoad()

    function selectHighlightJsStyle(event) {
      var highlightJsCssDOM = $(".highlightJsCss")[0]
      // selected value
      var val = event.target.value
      // replace css url
      // see https://regex101.com/r/gBNZYu/4
      highlightJsCssDOM.href = highlightJsCssDOM.href.replace(/[^/]+\.css$/, `${val}.css`);
    }

    /*
     * Theme Selector
     */
    options = {
      hasPreview: false,
      fullPath: '',
      cookie: {
        isManagingLoad: false
      }
    };
    $(document).ready(function() {
      $('#themeOptions').styleSwitcher(options);
    });

    function selectTheme(theme) {
      // update hidden
      $('#hiddenInputTheme').val(theme);
      // update .active class
      $('#themeOptions .active').removeClass('active');
      $(`#themeOptions #theme-option-${theme}`).addClass('active');
    }

    function selectBorderOn(){
      $('.hljs-no-border').removeClass('hljs-no-border');
    }
    function selectBorderOff(){
      $('#customhighlightJsStyleSettingForm .hljs').addClass('hljs-no-border')
    }
  </script>

</div>
{% endblock %}

{% block content_footer %}
{% endblock content_footer %}