WIP: impl theme switcher

save config

lib/form/admin/customtheme.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var form = require('express-form')
+  , field = form.field
+  ;
+
+module.exports = form(
+  field('settingForm[customize:theme]')
+);

lib/form/index.js

@@ -23,6 +23,7 @@ module.exports = {
     customcss: require('./admin/customcss'),
     customscript: require('./admin/customscript'),
     customheader: require('./admin/customheader'),
+    customtheme: require('./admin/customtheme'),
     custombehavior: require('./admin/custombehavior'),
     customlayout: require('./admin/customlayout'),
     customfeatures: require('./admin/customfeatures'),

lib/models/config.js

@@ -87,6 +87,7 @@ module.exports = function(crowi) {
       'customize:header' : '',
       'customize:highlightJsStyle' : 'github',
       'customize:highlightJsStyleBorder' : false,
+      'customize:theme' : 'default',
       'customize:behavior' : 'crowi',
       'customize:layout' : 'crowi',
       'customize:isEnabledTimeline' : true,
@@ -360,6 +361,12 @@ module.exports = function(crowi) {
     return getValueForCrowiNS(config, key);
   }
 
+  configSchema.statics.theme = function(config)
+  {
+    const key = 'customize:theme';
+    return getValueForCrowiNS(config, key);
+  }
+
   configSchema.statics.behaviorType = function(config)
   {
     const key = 'customize:behavior';

lib/routes/index.js

@@ -74,6 +74,7 @@ module.exports = function(crowi, app) {
   app.post('/_api/admin/customize/css'      , loginRequired(crowi, app) , middleware.adminRequired() , csrf, form.admin.customcss, admin.api.customizeSetting);
   app.post('/_api/admin/customize/script'   , loginRequired(crowi, app) , middleware.adminRequired() , csrf, form.admin.customscript, admin.api.customizeSetting);
   app.post('/_api/admin/customize/header'   , loginRequired(crowi, app) , middleware.adminRequired() , csrf, form.admin.customheader, admin.api.customizeSetting);
+  app.post('/_api/admin/customize/theme'    , loginRequired(crowi, app) , middleware.adminRequired() , csrf, form.admin.customtheme, admin.api.customizeSetting);
   app.post('/_api/admin/customize/behavior' , loginRequired(crowi, app) , middleware.adminRequired() , csrf, form.admin.custombehavior, admin.api.customizeSetting);
   app.post('/_api/admin/customize/layout'   , loginRequired(crowi, app) , middleware.adminRequired() , csrf, form.admin.customlayout, admin.api.customizeSetting);
   app.post('/_api/admin/customize/features' , loginRequired(crowi, app) , middleware.adminRequired() , csrf, form.admin.customfeatures, admin.api.customizeSetting);

lib/views/admin/customize.html

@@ -48,21 +48,24 @@
     </div>
     <div class="col-md-9">
 
-      <form action="/_api/admin/customize/theme" method="post" class="form-horizontal" id="cutomthemeSettingForm" role="form">
+      <form action="/_api/admin/customize/theme" method="post" class="form-horizontal" id="customthemeSettingForm" role="form">
         <fieldset>
           <legend>{{ t('customize_page.Theme') }}</legend>
 
           <div id="themeOptions" class="d-flex">
-            <a href="#" class="default"      data-theme="{{ webpack_asset('style-theme-default').css }}">
+            <a href="#" class="default" onclick="selectTheme('default')"
+                data-theme="{{ webpack_asset('style-theme-default').css }}">
               {% include 'widget/theme-colorbox.html' %}
             </a>
-            <a href="#" class="default-dark" data-theme="{{ webpack_asset('style-theme-default-dark').css }}">
+            <a href="#" class="default-dark" onclick="selectTheme('default-dark')"
+                data-theme="{{ webpack_asset('style-theme-default-dark').css }}">
               {% include 'widget/theme-colorbox.html' %}
             </a>
           </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>
@@ -424,7 +427,9 @@ window.addEventListener('load', (event) => {
 {% block body_end %}
   {% parent %}
   <script>
-    $('#cutomcssSettingForm, #cutomscriptSettingForm, #cutomlayoutSettingForm, #cutombehaviorSettingForm, #customfeaturesSettingForm, #cutomheaderSettingForm, #cutomhighlightJsStyleSettingForm').each(function() {
+    $(`#customthemeSettingForm, #cutomlayoutSettingForm, #cutombehaviorSettingForm, #cutomhighlightJsStyleSettingForm,
+       #customfeaturesSettingForm, #cutomheaderSettingForm, #cutomcssSettingForm, #cutomscriptSettingForm`
+    ).each(function() {
       $(this).submit(function()
       {
         function showMessage(formId, msg, status) {
@@ -500,6 +505,10 @@ window.addEventListener('load', (event) => {
       $('#themeOptions').styleSwitcher(options);
     });
 
+    function selectTheme(theme) {
+      // update hidden
+      $('#hiddenInputTheme').val(theme);
+    }
   </script>
 
 </div>