refs sparkfabrik#56: Import jquery by webpack and reorganize js libra…

…ries

custom/themes/spark-playbook/public/js/app.js

@@ -1,33 +1,2 @@
-$(document).on('ready', function() {
-    // to close all item of the menu (desktop version)
-    $('#menu__general-toggle').change(function () {
-      $('input[id^="menu__toggle-"]').prop('checked',this.checked);
-    });
-
-    $('input[id^="menu__toggle-"]').change(function () {
-    if ($('input[id^="menu__toggle-"]:checked').length == $('input[id^="menu__toggle-"]').length){
-      $('#menu__general-toggle').prop('checked',true);
-    }
-    else {
-      $('#menu__general-toggle').prop('checked',false);
-    }
-    });
-
-    // add overflow:hidden to body on mobile version
-    $('#menu__general-toggle').change(function () {
-      if ( ($( window ).width()) <= 767) {
-        if ($('#menu__general-toggle').is(':checked')) {
-          $("body").css({"overflow":"visible"});
-        } else {
-          $("body").css({"overflow":"hidden"});
-        }
-      }
-    });
-    $(window).on('resize', function(){
-      var win = $(this); //this = window
-      if (win.height() >= 768) { 
-        $("body").removeAttr("style") 
-      }
-    });
-});
-
+// Import custom project specific Javascript.
+import './custom.js';

custom/themes/spark-playbook/public/js/custom.js

@@ -0,0 +1,34 @@
+
+$(window).on('load', function() {
+  // to close all item of the menu (desktop version)
+  $('#menu__general-toggle').change(function () {
+    $('input[id^="menu__toggle-"]').prop('checked',this.checked);
+  });
+
+  $('input[id^="menu__toggle-"]').change(function () {
+  if ($('input[id^="menu__toggle-"]:checked').length == $('input[id^="menu__toggle-"]').length){
+    $('#menu__general-toggle').prop('checked',true);
+  }
+  else {
+    $('#menu__general-toggle').prop('checked',false);
+  }
+  });
+
+  // add overflow:hidden to body on mobile version
+  $('#menu__general-toggle').change(function () {
+    if ( ($( window ).width()) <= 767) {
+      if ($('#menu__general-toggle').is(':checked')) {
+        $("body").css({"overflow":"visible"});
+      } else {
+        $("body").css({"overflow":"hidden"});
+      }
+    }
+  });
+  $(window).on('resize', function(){
+    var win = $(this); //this = window
+    if (win.height() >= 768) { 
+      $("body").removeAttr("style") 
+    }
+  });
+});
+

custom/themes/spark-playbook/templates/layout.html

@@ -97,14 +97,18 @@ <h4 class="modal-title" id="myModalLabel">{{lang.global.reallyDeletePage}}</h4>
     </div>
   {{/loggedIn}}
   {{/config.allow_editing}}
+
+  {{! You need of these lib to create new categories and pages by frontend editor.
+      This happen when the allow_editing and authentication variables are set to true in config.js.}}
+      {{! script src="/lib/jquery/dist/jquery.min.js"
+                src="/lib/bootstrap/dist/js/bootstrap.min.js">
+                src="/lib/masonry-layout/dist/masonry.pkgd.min.js">
+                src="/js/ghostdown.js">
+                src="/lib/highlightjs/highlight.pack.min.js">
+                src="/lib/fitvids/fitvids.min.js">
+                src="/js/spark.js"> }}
+
   <!-- JavaScript -->
-  <script src="{{config.base_url}}/lib/jquery/dist/jquery.min.js"></script>
-  <script src="{{config.base_url}}/lib/bootstrap/dist/js/bootstrap.min.js"></script>
-  <script src="{{config.base_url}}/lib/highlightjs/highlight.pack.min.js"></script>
-  <script src="{{config.base_url}}/lib/fitvids/fitvids.min.js"></script>
-  <script src="{{config.base_url}}/lib/masonry-layout/dist/masonry.pkgd.min.js"></script>
-  <script src="{{config.base_url}}/js/ghostdown.js"></script>
-  <script src="{{config.base_url}}/js/spark.js"></script>
   <script src="{{config.base_url}}/dist/main.js"></script>
 </body>
 </html>

custom/themes/spark-playbook/templates/login.html

@@ -56,6 +56,6 @@ <h1>Login</h1>
   <script src="{{config.base_url}}/lib/jquery/dist/jquery.min.js"></script>
   <script src="{{config.base_url}}/lib/bootstrap/dist/js/bootstrap.min.js"></script>
   <script src="{{config.base_url}}/lib/sweetalert/dist/sweetalert.min.js"></script>
-  <script src="{{config.base_url}}/scripts/login.js"></script>
+  <script src="{{config.base_url}}/js/login.js"></script>
 </body>
 </html>

custom/themes/spark-playbook/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const StylelintPlugin = require('stylelint-webpack-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+var webpack = require('webpack');
 
 module.exports = env => {
   // inProduction is true when we are building the production code.
@@ -14,6 +15,10 @@ module.exports = env => {
       new StylelintPlugin({
         // fix: inProduction, // Enable if you want to autofix SCSS files when building production dist files.
         lintDirtyModulesOnly: true,
+      }),
+      new webpack.ProvidePlugin({
+        $: "jquery",
+        jQuery: "jquery"
       })
     ],