Add JS build pipeline

package.json

@@ -3,10 +3,10 @@
   "version": "4.0.0",
   "description": " Source code for TheOrangeOne.net",
   "scripts": {
-    "lint": "eslint 'static/src/js/'",
+    "lint": "eslint 'theme/static/src/js/'",
     "build-js": "./scripts/build-js.sh",
-    "create-build-dirs": "mkdir -p static/build/js/lib static/build/fonts static/build/css static/build/img",
     "build-scss": "bash scripts/build-scss.sh",
+    "create-build-dirs": "mkdir -p theme/static/build/js/lib theme/static/build/fonts theme/static/build/css theme/static/build/img",
     "test": "npm run lint",
     "spellcheck": "mdspell --en-gb -ranx \"templates/**/*.*\""
   },
@@ -19,6 +19,7 @@
     "bootstrap-sass": "=3.3.6",
     "ionicons": "=3.0.0",
     "jquery": "=2.2.3",
+    "jquery.easing": "=1.3.2",
     "underscore": "=1.8.3"
   },
   "devDependencies": {

scripts/build-js.sh

@@ -7,38 +7,38 @@ then
   echo ">>> WARNING: Building in Production Mode!"
 fi
 
-mkdir -p static/build/js/lib
+mkdir -p theme/static/build/js/lib
 
 if [[ $BUILD_PRODUCTION ]]
 then
   echo ">> Compressing Libraries..."
-  uglifyjs node_modules/bootstrap/dist/js/bootstrap.js --compress --screw-ie8 --define --stats --keep-fnames -o static/build/js/lib/bootstrap.js
+  uglifyjs node_modules/bootstrap-sass/assets/javascripts/bootstrap.js --compress --screw-ie8 --define --stats --keep-fnames -o theme/static/build/js/lib/bootstrap.js
-  uglifyjs static/build/js/lib/* --compress --screw-ie8 --define --stats --keep-fnames -o static/build/js/libs.js
+  uglifyjs theme/static/build/js/lib/* --compress --screw-ie8 --define --stats --keep-fnames -o theme/static/build/js/libs.js
 else
   echo ">> Building Libraries..."
-  cp node_modules/bootstrap/dist/js/bootstrap.js static/build/js/lib/bootstrap.js
+  cp node_modules/bootstrap-sass/assets/javascripts/bootstrap.js theme/static/build/js/lib/bootstrap.js
-  uglifyjs static/build/js/lib/* --screw-ie8 --stats --keep-fnames -o static/build/js/libs.js
+  uglifyjs theme/static/build/js/lib/* --screw-ie8 --stats --keep-fnames -o theme/static/build/js/libs.js
 fi
 
-rm -rf static/build/js/lib
+rm -rf theme/static/build/js/lib
 
 if [[ $BUILD_PRODUCTION ]]
 then
   echo ">> Compressing jQuery..."
-  uglifyjs node_modules/jquery/dist/jquery.js --compress --screw-ie8 --define --stats --keep-fnames -o static/build/js/jquery.js
+  uglifyjs node_modules/jquery/dist/jquery.js --compress --screw-ie8 --define --stats --keep-fnames -o theme/static/build/js/jquery.js
 else
   echo ">> Building jQuery..."
-  uglifyjs node_modules/jquery/dist/jquery.js --screw-ie8 --stats --keep-fnames -o static/build/js/jquery.js
+  uglifyjs node_modules/jquery/dist/jquery.js --screw-ie8 --stats --keep-fnames -o theme/static/build/js/jquery.js
 fi
 
 
 echo ">> Building Application JS..."
-browserify -t [ babelify --presets [ es2015 react ] ] static/src/js/app.js -o static/build/js/app.js
+browserify -t [ babelify --presets [ es2015 react ] ] theme/static/src/js/app.js -o theme/static/build/js/app.js
 
 if [[ $BUILD_PRODUCTION ]]
 then
   echo ">> Compressing Application..."
-  uglifyjs static/build/js/app.js --compress --screw-ie8 --define --stats --keep-fnames -o static/build/js/app.js
+  uglifyjs theme/static/build/js/app.js --compress --screw-ie8 --define --stats --keep-fnames -o theme/static/build/js/app.js
 fi
 
 echo "> JS Built!"

theme/static/src/js/app.js

@@ -0,0 +1 @@
+import './creative';

theme/static/src/js/creative/creative.js

@@ -0,0 +1,44 @@
+/*!
+ * Start Bootstrap - Creative Bootstrap Theme (http://startbootstrap.com)
+ * Code licensed under the Apache License v2.0.
+ * For details, see http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+(function($) {
+    "use strict"; // Start of use strict
+
+    // jQuery for page scrolling feature - requires jQuery Easing plugin
+    $('a.page-scroll').bind('click', function(event) {
+        var $anchor = $(this);
+        $('html, body').stop().animate({
+            scrollTop: ($($anchor.attr('href')).offset().top - 50)
+        }, 1250, 'easeInOutExpo');
+        event.preventDefault();
+    });
+
+    // Highlight the top nav as scrolling occurs
+    $('body').scrollspy({
+        target: '.navbar-fixed-top',
+        offset: 51
+    })
+
+    // Closes the Responsive Menu on Menu Item Click
+    $('.navbar-collapse ul li a').click(function() {
+        $('.navbar-toggle:visible').click();
+    });
+
+    // Fit Text Plugin for Main Header
+    $("h1").fitText(
+        1.2, {
+            minFontSize: '35px',
+            maxFontSize: '65px'
+        }
+    );
+
+    // Offset for Main Navigation
+    $('#mainNav').affix({
+        offset: {
+            top: 100
+        }
+    });
+})(jQuery); // End of use strict

theme/static/src/js/creative/index.js

@@ -0,0 +1,3 @@
+import 'jquery.easing';
+import './jquery.fittext';
+import './creative';

theme/static/src/js/creative/jquery.fittext.js

@@ -0,0 +1,43 @@
+/*global jQuery */
+/*!
+* FitText.js 1.2
+*
+* Copyright 2011, Dave Rupert http://daverupert.com
+* Released under the WTFPL license
+* http://sam.zoy.org/wtfpl/
+*
+* Date: Thu May 05 14:23:00 2011 -0600
+*/
+
+(function( $ ){
+
+  $.fn.fitText = function( kompressor, options ) {
+
+    // Setup options
+    var compressor = kompressor || 1,
+        settings = $.extend({
+          'minFontSize' : Number.NEGATIVE_INFINITY,
+          'maxFontSize' : Number.POSITIVE_INFINITY
+        }, options);
+
+    return this.each(function(){
+
+      // Store the object
+      var $this = $(this);
+
+      // Resizer() resizes items based on the object width divided by the compressor * 10
+      var resizer = function () {
+        $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
+      };
+
+      // Call once to set.
+      resizer();
+
+      // Call on resize. Opera debounces their resize by default.
+      $(window).on('resize.fittext orientationchange.fittext', resizer);
+
+    });
+
+  };
+
+})( jQuery );

theme/templates/index.html

@@ -253,15 +253,6 @@
 
     <!-- Custom Theme JavaScript -->
     <script src="static/js/app.js"></script>
-
-    <!-- Plugin JavaScript -->
-    <script src="static/js/jquery.easing.min.js"></script>
-    <script src="static/js/jquery.fittext.js"></script>
-    <script src="static/js/wow.min.js"></script>
-
-    <!-- Custom Theme JavaScript -->
-    <script src="static/js/creative.js"></script>
-
 </body>
 
 </html>