unselectable theme when use kibela layout

src/server/views/admin/customize.html

@@ -52,71 +52,15 @@
       {% include './widget/menu.html' with {current: 'customize'} %}
     </div>
     <div class="col-md-9">
-      <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">
+      <form action="/_api/admin/customize/layout" method="post" class="form-horizontal" id="customlayoutSettingForm" 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"
+                <input type="radio" id="radioLayoutGrowi" name="settingForm[customize:layout]" value="growi" onclick="selectableTheme(true)"
                     {% if 'growi' === settingForm['customize:layout'] %}checked="checked"{% endif %}>
                 <label for="radioLayoutGrowi">
                   GROWI Enhanced Layout <small class="text-success">(Recommended)</small>
@@ -137,7 +81,7 @@
           <div class="col-xs-6">
             <h4>
               <div class="radio radio-primary">
-                <input type="radio" id="radioLayoutCrowi" name="settingForm[customize:layout]" value="crowi"
+                <input type="radio" id="radioLayoutCrowi" name="settingForm[customize:layout]" value="crowi" onclick="selectableTheme(true)"
                     {% if 'crowi' === settingForm['customize:layout'] %}checked="checked"{% endif %}>
                 <label for="radioLayoutCrowi">
                   Crowi Classic Layout
@@ -159,7 +103,7 @@
           <div class="col-xs-6">
             <h4>
               <div class="radio radio-primary">
-                <input type="radio" id="radioLayoutKibela" name="settingForm[customize:layout]" value="kibela"
+                <input type="radio" id="radioLayoutKibela" name="settingForm[customize:layout]" value="kibela" onclick="selectableTheme(false)"
                     {% if 'kibela' === settingForm['customize:layout'] %}checked="checked"{% endif %}>
                 <label   for="radioLayoutKibela">
                   Kibela Like Layout
@@ -179,32 +123,32 @@
             </ul>
           </div>
         </div>
-
-        <h2>{{ t('customize_page.Theme') }}</h2>
-          <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' } %}
-              {% include 'widget/theme-colorbox.html' with { name: 'wood',   bg: '#fffefb', topbar: '#aaa45f', theme: '#dddebf' } %}
-              {% include 'widget/theme-colorbox.html' with { name: 'island',   bg: '#8ecac0', topbar: '#0c2a44', theme: '#cef2ef' } %}
-              {% include 'widget/theme-colorbox.html' with { name: 'kibela',   bg: '#F4F5F6', topbar: '#ffffff', theme: '#5584E1' } %}
-            </div>
-            {# Dark Themes #}
-            <div class="d-flex mt-3">
-              {% 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' } %}
-              {% include 'widget/theme-colorbox.html' with { name: 'halloween',   bg: '#030003', topbar: '#cc5d1f', theme: '#e9af2b' } %}
+          <div id="customthemeSettingForm" {% if 'kibela' === settingForm['customize:layout'] %} hidden {% endif %}>
+            <h2>{{ t('customize_page.Theme') }}</h2>
+              <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' } %}
+                  {% include 'widget/theme-colorbox.html' with { name: 'wood',   bg: '#fffefb', topbar: '#aaa45f', theme: '#dddebf' } %}
+                  {% include 'widget/theme-colorbox.html' with { name: 'island',   bg: '#8ecac0', topbar: '#0c2a44', theme: '#cef2ef' } %}
+                  {% include 'widget/theme-colorbox.html' with { name: 'kibela',   bg: '#F4F5F6', topbar: '#ffffff', theme: '#5584E1' } %}
+                </div>
+                {# Dark Themes #}
+                <div class="d-flex mt-3">
+                  {% 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' } %}
+                  {% include 'widget/theme-colorbox.html' with { name: 'halloween',   bg: '#030003', topbar: '#cc5d1f', theme: '#e9af2b' } %}
+                </div>
+              </div>
+              {% if env === 'development' %}
+                <div class="alert alert-warning">
+                  <strong>DEBUG MESSAGE:</strong> development build では、リアルタイムプレビューが無効になります
+                </div>
+              {% endif %}
             </div>
-          </div>
-          {% if env === 'development' %}
-          <div class="alert alert-warning">
-            <strong>DEBUG MESSAGE:</strong> development build では、リアルタイムプレビューが無効になります
-          </div>
-          {% endif %}
-
         <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'] }}">
@@ -216,6 +160,60 @@
       </fieldset>
       </form>
 
+      <form action="/_api/admin/customize/behavior" method="post" class="form-horizontal" id="custombehaviorSettingForm" 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/features" method="post" class="form-horizontal" id="customfeaturesSettingForm" role="form">
       <fieldset>
       <legend>{{ t('customize_page.Function') }}</legend>
@@ -386,7 +384,7 @@ export  $initHighlight;</code></pre>
         </fieldset>
       </form>
 
-      <form action="/_api/admin/customize/header" method="post" class="form-horizontal" id="cutomheaderSettingForm" role="form">
+      <form action="/_api/admin/customize/header" method="post" class="form-horizontal" id="customheaderSettingForm" role="form">
       <fieldset>
         <legend>カスタムヘッダーHTML</legend>
 
@@ -423,7 +421,7 @@ export  $initHighlight;</code></pre>
       </fieldset>
       </form>
 
-      <form action="/_api/admin/customize/css" method="post" class="form-horizontal" id="cutomcssSettingForm" role="form">
+      <form action="/_api/admin/customize/css" method="post" class="form-horizontal" id="customcssSettingForm" role="form">
       <fieldset>
         <legend>{{ t('customize_page.Custom CSS') }}</legend>
 
@@ -456,7 +454,7 @@ export  $initHighlight;</code></pre>
       </form>
 
 
-      <form action="/_api/admin/customize/script" method="post" class="form-horizontal" id="cutomscriptSettingForm" role="form">
+      <form action="/_api/admin/customize/script" method="post" class="form-horizontal" id="customscriptSettingForm" role="form">
       <fieldset>
         <legend>{{ t('customize_page.Custom script') }}</legend>
 
@@ -520,8 +518,8 @@ window.addEventListener('load', (event) => {
 {% block body_end %}
   {% parent %}
   <script>
-    $(`#customthemeSettingForm, #cutomlayoutSettingForm, #cutombehaviorSettingForm, #customhighlightJsStyleSettingForm,
-       #customfeaturesSettingForm, #cutomheaderSettingForm, #cutomcssSettingForm, #cutomscriptSettingForm, #customtitleSettingForm`
+    $(`#customlayoutSettingForm, #custombehaviorSettingForm, #customhighlightJsStyleSettingForm,
+       #customfeaturesSettingForm, #customheaderSettingForm, #customcssSettingForm, #customscriptSettingForm, #customtitleSettingForm`
     ).each(function() {
       $(this).submit(function()
       {
@@ -584,6 +582,9 @@ window.addEventListener('load', (event) => {
       highlightJsCssDOM.href = highlightJsCssDOM.href.replace(/[^/]+\.css$/, `${val}.css`);
     }
 
+    function selectableTheme(flag) {
+      $("#customthemeSettingForm").prop("hidden", !flag);
+    }
     /*
      * Theme Selector
      */