Remove templates js, remove modules prefix, add globals module, rename svg sprite, update jquery, add svg4everybody, fix grunt tasks

grunt_tasks/browserSync.js

@@ -4,7 +4,8 @@ module.exports = {
 			src : [
 				 'www/assets/styles/dist/*.css'
 				,'www/assets/scripts/dist/*.js'
-				,'www/assets/templates/*.php'
+				,'www/assets/images/dist/*.svg'
+				,'www/**/*.php'
 			]
 		},
 		options: {

grunt_tasks/svgstore.js

@@ -4,7 +4,7 @@ module.exports = {
 	},
 	default : {
 		files: {
-			'www/assets/images/dist/svgs.svg': ['www/assets/images/svgs/*.svg'],
+			'www/assets/images/dist/sprite.svg': ['www/assets/images/svgs/*.svg'],
 		}
 	}
 }

grunt_tasks/watch.js

@@ -1,33 +1,33 @@
 module.exports = {
-    javascript_app: {
-        files: [
-            'www/assets/scripts/src/**/*.js',
-            '!www/assets/scripts/src/vendors/*.js'
-        ],
-        tasks: ['browserify:dev', 'eslint', 'notify:javascript']
-    },
-    javascript_vendors: {
-        files: [
-            'www/assets/scripts/src/vendors/*.js'
-        ],
-        tasks: ['concat', 'notify:javascript']
-    },
-    sass: {
-        files: ['www/assets/styles/src/**/*.scss'],
-        tasks: ['sass', 'postcss', 'notify:sass'],
-        options: {
-            spawn: false,
-            livereload: true
-        }
-    },
-    svg: {
-        files: ['www/assets/images/**/*.svg'],
-        tasks: ['svgstore', 'notify:svg']
-    },
-    tasks: {
-        files: ['grunt_tasks/*.js'],
-        options: {
-            reload: true
-        }
-    }
+	javascript_app: {
+		files: [
+			'www/assets/scripts/src/**/*.js',
+			'!www/assets/scripts/src/vendors/*.js'
+		],
+		tasks: ['browserify:dev', 'eslint', 'notify:javascript']
+	},
+	javascript_vendors: {
+		files: [
+			'www/assets/scripts/src/vendors/*.js'
+		],
+		tasks: ['concat:vendors', 'notify:javascript']
+	},
+	sass: {
+		files: ['www/assets/styles/src/**/*.scss'],
+		tasks: ['sass', 'postcss', 'notify:sass'],
+		options: {
+			spawn: false,
+			livereload: true
+		}
+	},
+	svg: {
+		files: ['www/assets/images/**/*.svg'],
+		tasks: ['svgstore', 'notify:svg']
+	},
+	tasks: {
+		files: ['grunt_tasks/*.js'],
+		options: {
+			reload: true
+		}
+	}
 }

www/assets/scripts/dist/vendors.js

@@ -0,0 +1 @@
+!function(e,t){"function"==typeof define&&define.amd?define([],function(){return e.svg4everybody=t()}):"object"==typeof exports?module.exports=t():e.svg4everybody=t()}(this,function(){function e(e,t){if(t){var n=document.createDocumentFragment(),i=!e.getAttribute("viewBox")&&t.getAttribute("viewBox");i&&e.setAttribute("viewBox",i);for(var a=t.cloneNode(!0);a.childNodes.length;)n.appendChild(a.firstChild);e.appendChild(n)}}function t(t){t.onreadystatechange=function(){if(4===t.readyState){var n=t._cachedDocument;n||(n=t._cachedDocument=document.implementation.createHTMLDocument(""),n.body.innerHTML=t.responseText,t._cachedTarget={}),t._embeds.splice(0).map(function(i){var a=t._cachedTarget[i.id];a||(a=t._cachedTarget[i.id]=n.getElementById(i.id)),e(i.svg,a)})}},t.onreadystatechange()}function n(n){function i(){for(var n=0;n<g.length;){var r=g[n],d=r.parentNode;if(d&&/svg/i.test(d.nodeName)){var c=r.getAttribute("xlink:href");if(a&&(!o.validate||o.validate(c,d,r))){d.removeChild(r);var l=c.split("#"),m=l.shift(),f=l.join("#");if(m.length){var v=s[m];v||(v=s[m]=new XMLHttpRequest,v.open("GET",m),v.send(),v._embeds=[]),v._embeds.push({svg:d,id:f}),t(v)}else e(d,document.getElementById(f))}}else++n}u(i,67)}var a,o=Object(n),r=/\bTrident\/[567]\b|\bMSIE (?:9|10)\.0\b/,d=/\bAppleWebKit\/(\d+)\b/,c=/\bEdge\/12\.(\d+)\b/;a="polyfill"in o?o.polyfill:r.test(navigator.userAgent)||(navigator.userAgent.match(c)||[])[1]<10547||(navigator.userAgent.match(d)||[])[1]<537;var s={},u=window.requestAnimationFrame||setTimeout,g=document.getElementsByTagName("use");a&&i()}return n});

www/assets/scripts/src/app.js

@@ -1,7 +1,6 @@
 /* jshint esnext: true */
 // ==========================================================================
 import * as modules from './modules'
-import * as templates from './templates'
 
 class App {
 	constructor (options) {
@@ -12,12 +11,14 @@ class App {
 		};
 
 		this.params = {
-			current_modules: [],
-			current_template: this.elements.html.getAttribute('data-template')
+			current_modules: []
 		};
 
 		this.modules = modules;
-		this.templates = templates;
+
+		// Globals module
+		// ==========================================================================
+		const globals = new this.modules['Globals'];
 
 		/**
 		 * @todo  [1]  Discuss storing instanciated objects
@@ -25,7 +26,7 @@ class App {
 		 */
 		// Modules
 		// ==========================================================================
-		var moduleEls = document.querySelectorAll('[data-module]');
+		const moduleEls = document.querySelectorAll('[data-module]');
 		for (let i = 0, elsLen = moduleEls.length; i < elsLen; i++) {
 
 			let attr = moduleEls[i].getAttribute('data-module');
@@ -36,12 +37,9 @@ class App {
 			for (let j = 0, modLen = moduleAttrs.length; j < modLen; j++) {
 				let moduleAttr = moduleAttrs[j];
 
-				// Uppercasing for class usage
-				let ident = moduleAttr.charAt(0).toUpperCase() + moduleAttr.slice(1) + 'Module';
-
-				if (typeof this.modules[ident] === 'function' && this.params.current_modules.indexOf(ident) === -1) {
+				if (typeof this.modules[moduleAttr] === 'function' && this.params.current_modules.indexOf(moduleAttr) === -1) {
 					// [1,2]
-					let module = new this.modules[ident]({
+					let module = new this.modules[moduleAttr]({
 						$el: $(moduleEls[i])
 					});
 					// [2]
@@ -50,16 +48,6 @@ class App {
 			}
 		}
 
-		// Template
-		// ==========================================================================
-		if (typeof(this.params.current_template) === 'string' && this.params.current_template.length !== 0) {
-			var templateIdent = this.params.current_template.charAt(0).toUpperCase() + this.params.current_template.slice(1) + 'Template';
-
-			if (typeof this.templates[templateIdent] === 'function') {
-				var template = new this.templates[templateIdent];
-			}
-		}
-
 	}
 };
 

www/assets/scripts/src/app/globals.js

@@ -1,16 +0,0 @@
-// ==========================================================================
-// Globals
-// ==========================================================================
-var app = window.app || {};
-
-app.globals = {
-
-    init : function() {
-
-        // Global modules
-        // ==========================================================================
-        // app.parallax.init();
-
-    }
-
-};

www/assets/scripts/src/modules.js

@@ -1,2 +1,3 @@
-export {default as GenericModule} from './modules/Generic';
-export {default as TitleModule} from './modules/Title';
+export {default as Globals} from './modules/Globals';
+export {default as Generic} from './modules/Generic';
+export {default as Title} from './modules/Title';

www/assets/scripts/src/modules/Generic.js

@@ -2,7 +2,7 @@
 // Generic module
 // ==========================================================================
 
-class GenericModule {
+class Generic {
 	constructor (options) {
         this.$el = options.$el;
 		console.log('Generic module');
@@ -10,4 +10,5 @@ class GenericModule {
 	}
 }
 
-export default GenericModule;
+export default Generic;
+ 

www/assets/scripts/src/modules/Globals.js

@@ -1,12 +1,12 @@
 // ==========================================================================
-// Generic template
+// Globals module
 // ==========================================================================
+import Svg from './Svg';
 
-class GenericTemplate {
-	constructor (options) {
-		console.log('Generic template');
-		this.options = options;
+class Globals {
+	constructor () {
+		new Svg();
 	}
 }
 
-export default GenericTemplate;
+export default Globals;

www/assets/scripts/src/modules/Svg.js

@@ -0,0 +1,12 @@
+// ==========================================================================
+// Svg
+// ==========================================================================
+
+class Svg {
+	constructor () {
+		svg4everybody();
+	}
+}
+
+export default Svg;
+ 

www/assets/scripts/src/modules/Title.js

@@ -2,7 +2,7 @@
 // Title module
 // ==========================================================================
 
-class TitleModule {
+class Title {
 	constructor (options) {
         this.$el = options.$el;
 		console.log('Title module');
@@ -10,4 +10,4 @@ class TitleModule {
 	}
 }
 
-export default TitleModule;
+export default Title;

www/assets/scripts/src/templates.js

@@ -1 +0,0 @@
-export {default as GenericTemplate} from './templates/Generic';

www/assets/scripts/src/vendors/svg4everybody.min.js

@@ -0,0 +1 @@
+!function(e,t){"function"==typeof define&&define.amd?define([],function(){return e.svg4everybody=t()}):"object"==typeof exports?module.exports=t():e.svg4everybody=t()}(this,function(){function e(e,t){if(t){var n=document.createDocumentFragment(),i=!e.getAttribute("viewBox")&&t.getAttribute("viewBox");i&&e.setAttribute("viewBox",i);for(var a=t.cloneNode(!0);a.childNodes.length;)n.appendChild(a.firstChild);e.appendChild(n)}}function t(t){t.onreadystatechange=function(){if(4===t.readyState){var n=t._cachedDocument;n||(n=t._cachedDocument=document.implementation.createHTMLDocument(""),n.body.innerHTML=t.responseText,t._cachedTarget={}),t._embeds.splice(0).map(function(i){var a=t._cachedTarget[i.id];a||(a=t._cachedTarget[i.id]=n.getElementById(i.id)),e(i.svg,a)})}},t.onreadystatechange()}function n(n){function i(){for(var n=0;n<g.length;){var r=g[n],d=r.parentNode;if(d&&/svg/i.test(d.nodeName)){var c=r.getAttribute("xlink:href");if(a&&(!o.validate||o.validate(c,d,r))){d.removeChild(r);var l=c.split("#"),m=l.shift(),f=l.join("#");if(m.length){var v=s[m];v||(v=s[m]=new XMLHttpRequest,v.open("GET",m),v.send(),v._embeds=[]),v._embeds.push({svg:d,id:f}),t(v)}else e(d,document.getElementById(f))}}else++n}u(i,67)}var a,o=Object(n),r=/\bTrident\/[567]\b|\bMSIE (?:9|10)\.0\b/,d=/\bAppleWebKit\/(\d+)\b/,c=/\bEdge\/12\.(\d+)\b/;a="polyfill"in o?o.polyfill:r.test(navigator.userAgent)||(navigator.userAgent.match(c)||[])[1]<10547||(navigator.userAgent.match(d)||[])[1]<537;var s={},u=window.requestAnimationFrame||setTimeout,g=document.getElementsByTagName("use");a&&i()}return n});

www/index.html

@@ -1,26 +1,26 @@
 <!doctype html>
 <!--[if lte IE 9]>     <html lang="fr" class="ie9"> <![endif]-->
 <!--[if gt IE 9]><!--> <html lang="fr" data-template="generic"> <!--<![endif]-->
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="description" content="">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="theme-color" content="#f2f2f2">
-        <title>Boilerplate</title>
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="description" content="">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="theme-color" content="#f2f2f2">
+		<title>Boilerplate</title>
 
-        <link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png">
-        <link rel="icon" href="assets/images/favicon.png">
+		<link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png">
+		<link rel="icon" href="assets/images/favicon.png">
 
-        <link rel="stylesheet" href="assets/styles/dist/main.css">
-    </head>
-    <body >
+		<link rel="stylesheet" href="assets/styles/dist/main.css">
+	</head>
+	<body>
 
-        <h1 data-module="generic,title">Locomotive boilerplate</h1>
+		<h1 data-module="Generic, Title">Locomotive boilerplate</h1>
 
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
-        <script>window.jQuery || document.write('<script src="assets/scripts/dist/jquery-1.11.3.min.js"><\/script>')</script>
-        <script src="assets/scripts/dist/vendors.js"></script>
-        <script src="assets/scripts/dist/app.js"></script>
-    </body>
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+		<script>window.jQuery || document.write('<script src="assets/scripts/dist/jquery-2.2.0.min.js"><\/script>')</script>
+		<script src="assets/scripts/dist/vendors.js"></script>
+		<script src="assets/scripts/dist/app.js"></script>
+	</body>
 </html>