WIP: impl theme switcher

config/webpack.common.js

@@ -10,6 +10,7 @@ const helpers = require('./helpers');
  */
 const AssetsPlugin = require('assets-webpack-plugin');
 const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');;
 
 /*
@@ -55,17 +56,27 @@ module.exports = function (options) {
             }
           }]
         },
+        {
+          test: /\.scss$/,
+          use: ExtractTextPlugin.extract({
+            fallback: 'style-loader',
+            use: 'css-loader!sass-loader'
+          }),
+          include: [helpers.root('resource/styles/scss')]
+        },
         {
           test: /\.css$/,
           use: ['style-loader', 'css-loader'],
           // comment out 'include' spec for crowi-plugins
           // include: [helpers.root('resource')]
+          exclude: [helpers.root('resource/styles/scss')]
         },
         {
           test: /\.scss$/,
           use: ['style-loader', 'css-loader', 'sass-loader'],
           // comment out 'include' spec for crowi-plugins
           // include: [helpers.root('resource')]
+          exclude: [helpers.root('resource/styles/scss')]
         },
         /*
          * File loader for supporting images, for example, in CSS files.

config/webpack.dev.js

@@ -13,6 +13,7 @@ const commonConfig = require('./webpack.common.js');
  * Webpack Plugins
  */
 const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin;
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
@@ -51,6 +52,8 @@ module.exports = function (options) {
     },
     plugins: [
 
+      new ExtractTextPlugin('[name].bundle.css'),
+
       new DllBundlesPlugin({
         bundles: {
           vendor: [

config/webpack.prod.js

@@ -11,6 +11,7 @@ const commonConfig = require('./webpack.common.js'); // the settings that are co
  * Webpack Plugins
  */
 const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
 const OptimizeJsPlugin = require('optimize-js-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
@@ -45,6 +46,8 @@ module.exports = function (env) {
         }
       }),
 
+      new ExtractTextPlugin('[name].[contenthash].css'),
+
       new OptimizeJsPlugin({
         sourceMap: false
       }),

lib/views/admin/customize.html

@@ -2,6 +2,11 @@
 
 {% block html_title %}{{ t('Customize') }} {% endblock %}
 
+{% block style_css_block %}
+<link rel="stylesheet" href="{{ webpack_asset('style').css }}">
+<link rel="stylesheet" id="jssDefault" {# append id for style-switcher #} href="{{ webpack_asset('style-theme-default').css }}">
+{% endblock %}
+
 {% block html_additional_headers %}
   {% parent %}
   <!-- CodeMirror -->
@@ -43,6 +48,44 @@
     </div>
     <div class="col-md-9">
 
+      <form action="/_api/admin/customize/theme" method="post" class="form-horizontal" id="cutomthemeSettingForm" role="form">
+        <fieldset>
+          <legend>{{ t('customize_page.Theme') }}</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> -->
+
+          <script type="text/javascript">
+            // $(document).ready(function() {
+            //   $('#styleOptions').styleSwitcher();
+            // });
+          </script>
+          <ul id="styleOptions">
+            <li>
+              <a href="javascript: void(0)" data-theme="{{ webpack_asset('style-theme-default').css }}">Default</a>
+            </li>
+            <li>
+              <a href="javascript: void(0)" data-theme="{{ webpack_asset('style-theme-default-dark').css }}">Default Dark</a>
+            </li>
+          </ul>
+
+          <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/behavior" method="post" class="form-horizontal" id="cutombehaviorSettingForm" role="form">
       <fieldset>
         <legend>{{ t('customize_page.Behavior') }}</legend>
@@ -391,7 +434,10 @@ window.addEventListener('load', (event) => {
 
     </div>
   </div>
+{% endblock content_main %}
 
+{% block body_end %}
+  {% parent %}
   <script>
     $('#cutomcssSettingForm, #cutomscriptSettingForm, #cutomlayoutSettingForm, #cutombehaviorSettingForm, #customfeaturesSettingForm, #cutomheaderSettingForm, #cutomhighlightJsStyleSettingForm').each(function() {
       $(this).submit(function()
@@ -441,7 +487,9 @@ window.addEventListener('load', (event) => {
       });
     });
 
-    // init highlight.js
+    /*
+     * highlight.js style switcher
+     */
     hljs.initHighlightingOnLoad()
 
     function selectHighlightJsStyle(event) {
@@ -453,10 +501,24 @@ window.addEventListener('load', (event) => {
       highlightJsCssDOM.href = highlightJsCssDOM.href.replace(/[^/]+\.css$/, `${val}.css`);
     }
 
+    /*
+     * Theme switcher
+     */
+    options = {
+      hasPreview: false,
+      fullPath: '',
+      cookie: {
+        isManagingLoad: false
+      }
+    };
+    $(document).ready(function() {
+      $('#styleOptions').styleSwitcher(options);
+    });
+
   </script>
 
 </div>
-{% endblock content_main %}
+{% endblock %}
 
 {% block content_footer %}
 {% endblock content_footer %}

lib/views/layout/layout.html

@@ -67,20 +67,23 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
     <script src="{{ webpack_asset('dev').js }}" async></script>
   {% endif %}
 
-  <script src="{{ webpack_asset('style').js }}"></script>
-  <script src="{{ webpack_asset('style-theme-default').js }}"></script>
-  <!-- <script src="{{ webpack_asset('style-theme-default-dark').js }}"></script> -->
   <script src="{{ webpack_asset('commons').js }}" defer></script>
   {% if isEnabledPlugins() %}
-    <script src="{{ webpack_asset('plugin').js }}" defer></script>
+  <script src="{{ webpack_asset('plugin').js }}" defer></script>
   {% endif %}
   {% block html_head_loading_legacy %}
-    <script src="{{ webpack_asset('legacy').js }}" defer></script>
+  <script src="{{ webpack_asset('legacy').js }}" defer></script>
   {% endblock %}
   {% block html_head_loading_app %}
   <script src="{{ webpack_asset('app').js }}" defer></script>
   {% endblock %}
 
+  <!-- styles -->
+  {% block style_css_block %}
+  <link rel="stylesheet" href="{{ webpack_asset('style').css }}">
+  <link rel="stylesheet" href="{{ webpack_asset('style-theme-default').css }}">
+  {% endblock %}
+
   <!-- Google Fonts -->
   <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
   <!-- Font Awesome -->

lib/views/page_presentation.html

@@ -39,14 +39,16 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
       <script src="{{ webpack_asset('dev').js }}" async></script>
     {% endif %}
 
-    <script src="{{ webpack_asset('style').js }}"></script>
-    <script src="{{ webpack_asset('style-theme-default').js }}"></script>
-    <script src="{{ webpack_asset('style-presentation').js }}"></script>
     <script src="{{ webpack_asset('commons').js }}" defer></script>
     <script src="{{ webpack_asset('legacy-presentation').js }}" defer></script>
 
     <title>{{ path|path2name }} | {{ path }}</title>
 
+    <!-- styles -->
+    <link rel="stylesheet" href="{{ webpack_asset('style').css }}">
+    <link rel="stylesheet" href="{{ webpack_asset('style-theme-default').css }}">
+    <link rel="stylesheet" href="{{ webpack_asset('style-presentation').css }}">
+
     <!-- Google Fonts -->
     <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
 

package.json

@@ -84,6 +84,7 @@
     "express-pino-logger": "^3.0.1",
     "express-session": "~1.15.0",
     "express-webpack-assets": "^0.1.0",
+    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.0",
     "googleapis": "^27.0.0",
     "graceful-fs": "^4.1.11",

resource/js/legacy/crowi-admin.js

@@ -1,5 +1,4 @@
 require('bootstrap-select');
-console.log('require style-switcher');
 require('./thirdparty-js/jQuery.style.switcher');
 
 $(function() {

resource/js/legacy/thirdparty-js/jQuery.style.switcher.js

@@ -24,7 +24,6 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 **/
-console.log('style switcher');
 (function ($) {
 	var jStyleSwitcher,
 		_defaultOptions = {
@@ -174,7 +173,7 @@ console.log('style switcher');
 		},
 
 		getFullAssetPath: function(asset) {
-			return this.config.fullPath + asset + '.css';
+			return this.config.fullPath + asset;
 		},
 
 		checkCookie: function () {
@@ -214,7 +213,7 @@ console.log('style switcher');
 			this.$root.find('a').click(
 				function () {
 					var asset = $(this).data('theme'),
-						newStyle = self.getFullAssetPath(asset);
+            newStyle = self.getFullAssetPath(asset);
 					// update link tag
 					self.updateStyle(newStyle);
 					// update default ref
@@ -229,7 +228,6 @@ console.log('style switcher');
 	};
 
 	$.fn.styleSwitcher = function (options) {
-    console.log('options', options);
 		return new jStyleSwitcher(this, $.extend(true, _defaultOptions, options));
 	};
 })(jQuery);

yarn.lock

@@ -361,7 +361,7 @@ async@^1.5.0:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^2.1.2, async@^2.1.5, async@^2.3.0:
+async@^2.1.2, async@^2.1.5, async@^2.3.0, async@^2.4.1:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
   dependencies:
@@ -2588,6 +2588,15 @@ extglob@^0.3.1:
   dependencies:
     is-extglob "^1.0.0"
 
+extract-text-webpack-plugin@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.2.tgz#5f043eaa02f9750a9258b78c0a6e0dc1408fb2f7"
+  dependencies:
+    async "^2.4.1"
+    loader-utils "^1.1.0"
+    schema-utils "^0.3.0"
+    webpack-sources "^1.0.1"
+
 extsprintf@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.2.0.tgz#5ad946c22f5b32ba7f8cd7426711c6e8a3fc2529"