DaveGoosem
1/26/2017 - 11:58 PM

Example of Module for dave

Example of Module for dave

var webpack = require('webpack');

module.exports = {
	watch: true,
	devtool: 'source-map',
	entry: {
		['script']: [
			'./init.js'
		]
	},

	resolve: {
		extensions: ['', '.js'],
		modulesDirectories: [
			'node_modules'
		]
	},

	output: {
		path: '/assets/',
		filename: '[name].js',
        libraryTarget: 'var',
	},

	externals: {
		'jquery': 'jQuery',
		'window': 'window'
	},

	module: {
		loaders: [{
			test: /\.js?$/,
			exclude: /(node_modules|bower_components|\.tmp|build)/,
			loader: 'babel',
			query: {
				presets: ['es2015']
			}
		}]
	},

	plugins: [
		new webpack.optimize.OccurenceOrderPlugin(),
		new webpack.optimize.DedupePlugin(),
	],

	node: {
		console: false
	}
};
var expander = require('./expander');
var $scope = $('body');

expander.init($scope);

// When writing vanilla es i like to do this
var $ = require('jquery'); // declared as a global in my webpack config

module.exports = (function() {
  
  class ExpandCollapse {
    constructor(el) {
      this.element = el;
      this.$element = $(this.element);
      this.isExpanded = false; // or go more complex and determin if is collapsed or opened at init;
      this.$element.data('ExpandCollapse', this); // easily grab the class object later if you want direct control
      
      this._bindEvents();
    }
    
    // private
    _bindEvents() {
     // bind browser events like clicks ect. 
    }
    
    // public
    expand(cb) {
      // expand logic like animations, other calls ect.
      this.isExpanded = true;
    }
    
    collapse(cb) {
      // collapse logic like animations, other calls ect.
      this.isExpanded = false;
    }
  }
  
  
  //$scope: jQuery element
  var init = function($scope) {
    // initilise any modules on the page kind of like deloitte does
    var $mod = $scope.find('.selector')
    
    if ($mod.length > 0) {
      $mod.each(function() {
        var expander = new ExpandCollapse(this); // this is the native element
      }
    }
    
    
  };
  
  return {
    init,
    ExpandCollapse
  }
}()); // self running anonymous function