Updated to event bubbling setup.

README.md

@@ -125,6 +125,8 @@ Gulp Boilerplate is licensed under the [MIT License](http://gomakethings.com/mit
 
 Gulp Boilerplate uses [semantic versioning](http://semver.org/).
 
+* v0.6.0 - August 23, 2014
+	* Updated to event bubbling setup.
 * v0.5.0 - August 23, 2014
 	* Updated unit tests path.
 * v0.4.0 - August 15, 2014

dist/css/myplugin.css

@@ -1,5 +1,5 @@
 /**
- * gulp-boilerplate v0.5.0
+ * gulp-boilerplate v0.6.0
  * My Gulp.js boilerplate for creating new web projects, by Chris Ferdinandi.
  * http://github.com/cferdinandi/Plugin
  * 

dist/css/myplugin.min.css

@@ -1 +1 @@
-/** gulp-boilerplate v0.5.0, by Chris Ferdinandi | http://github.com/cferdinandi/Plugin | Licensed under MIT: http://gomakethings.com/mit/ */
+/** gulp-boilerplate v0.6.0, by Chris Ferdinandi | http://github.com/cferdinandi/Plugin | Licensed under MIT: http://gomakethings.com/mit/ */

dist/js/bind-polyfill.js

@@ -1,5 +1,5 @@
 /**
- * gulp-boilerplate v0.5.0
+ * gulp-boilerplate v0.6.0
  * My Gulp.js boilerplate for creating new web projects, by Chris Ferdinandi.
  * http://github.com/cferdinandi/Plugin
  * 

dist/js/classList.js

@@ -1,5 +1,5 @@
 /**
- * gulp-boilerplate v0.5.0
+ * gulp-boilerplate v0.6.0
  * My Gulp.js boilerplate for creating new web projects, by Chris Ferdinandi.
  * http://github.com/cferdinandi/Plugin
  * 

dist/js/myplugin.js

@@ -1,5 +1,5 @@
 /**
- * gulp-boilerplate v0.5.0
+ * gulp-boilerplate v0.6.0
  * My Gulp.js boilerplate for creating new web projects, by Chris Ferdinandi.
  * http://github.com/cferdinandi/Plugin
  * 
@@ -25,16 +25,14 @@
 
 	var myPlugin = {}; // Object for public APIs
 	var supports = !!document.querySelector && !!root.addEventListener; // Feature test
-	var eventListeners = []; //Listeners array
-	var settings, ELEMENTS, eventTimeout;
+	var settings, eventTimeout;
 
 	// Default settings
 	var defaults = {
 		someVar: 123,
-		callbacks: {
-			before: function () {},
-			after: function () {}
-		}
+		initClass: 'js-myplugin',
+		callbackBefore: function () {},
+		callbackAfter: function () {}
 	};
 
 
@@ -93,27 +91,36 @@
 
 	// @todo Do something...
 
+	/**
+	 * Handle events
+	 * @private
+	 */
+	var eventHandler = function (event) {
+		var toggle = event.target;
+		if ( toggle.hasAttribute('data-myplugin') ) {
+			// run methods
+		}
+	};
+
 	/**
 	 * Destroy the current initialization.
 	 * @public
 	 */
 	myPlugin.destroy = function () {
 
+		// If plugin isn't already initialized, stop
 		if ( !settings ) return;
 
-		// @todo Undo init functions...
+		// Remove init class for conditional CSS
+		document.documentElement.classList.remove( settings.initClass );
+
+		// @todo Undo any other init functions...
 
 		// Remove event listeners
-		if ( ELEMENTS ) {
-			forEach( ELEMENTS, function ( elem, index ) {
-				elem.removeEventListener( 'click', eventListeners[index], false );
-			});
-			eventListeners = [];
-		}
+		document.removeEventListener('click', eventHandler, false);
 
 		// Reset variables
 		settings = null;
-		ELEMENTS = null;
 		eventTimeout = null;
 
 	};
@@ -122,14 +129,13 @@
 	 * On window scroll and resize, only run events at a rate of 15fps for better performance
 	 * @private
 	 * @param  {Function} eventTimeout Timeout function
-	 * @param  {TBD} ELEMENTS Some element, nodelist, or other variable to pass in
 	 * @param  {Object} settings
 	 */
-	var eventThrottler = function ( eventTimeout, ELEMENTS, settings ) {
+	var eventThrottler = function () {
 		if ( !eventTimeout ) {
 			eventTimeout = setTimeout(function() {
 				eventTimeout = null;
-				setWrapHeight( wrap, footer, settings );
+				actualMethod( settings );
 			}, 66);
 		}
 	};
@@ -147,17 +153,16 @@
 		// Destroy any existing initializations
 		myPlugin.destroy();
 
-		// Selectors and variables
-		settings = extend( defaults, options || {} ); // Merge user options with defaults
-		ELEMENTS = document.querySelectorAll('[data-ELEM]'); // Set your variable here
+		// Merge user options with defaults
+		settings = extend( defaults, options || {} );
+
+		// Add class to HTML element to activate conditional CSS
+		document.documentElement.classList.add( settings.initClass );
 
 		// @todo Do something...
 
-		// Assigns event listeners to an array so they can be programatically destroyed
-		forEach(ELEMENTS, function (elem, index) {
-			eventListeners[index] = myPlugin.METHOD.bind( null, elem, ELEMENTSS, settings );
-			elem.addEventListener('click', eventListeners[index], false);
-		});
+		// Listen for events
+		document.addEventListener('click', eventHandler, false);
 
 	};
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gulp-boilerplate",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"description": "My Gulp.js boilerplate for creating new web projects",
 	"author": {
 		"name": "Chris Ferdinandi",

src/js/myplugin.js

@@ -16,16 +16,14 @@
 
 	var myPlugin = {}; // Object for public APIs
 	var supports = !!document.querySelector && !!root.addEventListener; // Feature test
-	var eventListeners = []; //Listeners array
-	var settings, ELEMENTS, eventTimeout;
+	var settings, eventTimeout;
 
 	// Default settings
 	var defaults = {
 		someVar: 123,
-		callbacks: {
-			before: function () {},
-			after: function () {}
-		}
+		initClass: 'js-myplugin',
+		callbackBefore: function () {},
+		callbackAfter: function () {}
 	};
 
 
@@ -84,27 +82,36 @@
 
 	// @todo Do something...
 
+	/**
+	 * Handle events
+	 * @private
+	 */
+	var eventHandler = function (event) {
+		var toggle = event.target;
+		if ( toggle.hasAttribute('data-myplugin') ) {
+			// run methods
+		}
+	};
+
 	/**
 	 * Destroy the current initialization.
 	 * @public
 	 */
 	myPlugin.destroy = function () {
 
+		// If plugin isn't already initialized, stop
 		if ( !settings ) return;
 
-		// @todo Undo init functions...
+		// Remove init class for conditional CSS
+		document.documentElement.classList.remove( settings.initClass );
+
+		// @todo Undo any other init functions...
 
 		// Remove event listeners
-		if ( ELEMENTS ) {
-			forEach( ELEMENTS, function ( elem, index ) {
-				elem.removeEventListener( 'click', eventListeners[index], false );
-			});
-			eventListeners = [];
-		}
+		document.removeEventListener('click', eventHandler, false);
 
 		// Reset variables
 		settings = null;
-		ELEMENTS = null;
 		eventTimeout = null;
 
 	};
@@ -113,14 +120,13 @@
 	 * On window scroll and resize, only run events at a rate of 15fps for better performance
 	 * @private
 	 * @param  {Function} eventTimeout Timeout function
-	 * @param  {TBD} ELEMENTS Some element, nodelist, or other variable to pass in
 	 * @param  {Object} settings
 	 */
-	var eventThrottler = function ( eventTimeout, ELEMENTS, settings ) {
+	var eventThrottler = function () {
 		if ( !eventTimeout ) {
 			eventTimeout = setTimeout(function() {
 				eventTimeout = null;
-				setWrapHeight( wrap, footer, settings );
+				actualMethod( settings );
 			}, 66);
 		}
 	};
@@ -138,17 +144,16 @@
 		// Destroy any existing initializations
 		myPlugin.destroy();
 
-		// Selectors and variables
-		settings = extend( defaults, options || {} ); // Merge user options with defaults
-		ELEMENTS = document.querySelectorAll('[data-ELEM]'); // Set your variable here
+		// Merge user options with defaults
+		settings = extend( defaults, options || {} );
+
+		// Add class to HTML element to activate conditional CSS
+		document.documentElement.classList.add( settings.initClass );
 
 		// @todo Do something...
 
-		// Assigns event listeners to an array so they can be programatically destroyed
-		forEach(ELEMENTS, function (elem, index) {
-			eventListeners[index] = myPlugin.METHOD.bind( null, elem, ELEMENTSS, settings );
-			elem.addEventListener('click', eventListeners[index], false);
-		});
+		// Listen for events
+		document.addEventListener('click', eventHandler, false);
 
 	};