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