diff --git a/gulp/scaffold/default.js b/gulp/scaffold/default.js index 71f77787..9f02fb1f 100644 --- a/gulp/scaffold/default.js +++ b/gulp/scaffold/default.js @@ -45,10 +45,10 @@ var taskName = 'scaffold', insertionSuffix: '";\n' }, registerScript: { - src: './source/assets/js/helpers/estaticoapp.js', + src: './source/assets/js/main.js', insertionPoint: '/* autoinsertmodule */', importInsertionPoint: '/* autoinsertmodulereference */', - insertionTemplate: 'this.modules.{{keyName}} = {{className}};\n ', + insertionTemplate: 'app.registerModuleClass({{className}}.name, {{className}});\n', importInsertionTemplate: 'import {{className}} from \'{{modulePath}}\';\n' }, diff --git a/source/assets/js/helpers/estaticoapp.js b/source/assets/js/core/estaticoapp.js similarity index 87% rename from source/assets/js/helpers/estaticoapp.js rename to source/assets/js/core/estaticoapp.js index aaee3f0a..4e48035b 100644 --- a/source/assets/js/helpers/estaticoapp.js +++ b/source/assets/js/core/estaticoapp.js @@ -1,15 +1,10 @@ +import $ from '../../../../node_modules/jquery/dist/jquery'; + /** * Init registered modules on specified events * * @license APLv2 */ -import $ from '../../../../node_modules/jquery/dist/jquery'; - -/** Demo modules **/ -import SkipLinks from '../../../demo/modules/skiplinks/skiplinks'; -import SlideShow from '../../../demo/modules/slideshow/slideshow'; -/* autoinsertmodulereference */ - class EstaticoApp { constructor() { @@ -20,9 +15,6 @@ class EstaticoApp { // Module registry - mapping module name (used in data-init) to module Class this.modules = {}; - this.modules.slideshow = SlideShow; - this.modules.skiplinks = SkipLinks; - /* autoinsertmodule */ // expose initModule function estatico.helpers.initModule = this.initModule; @@ -33,6 +25,10 @@ class EstaticoApp { this._initModuleInitialiser(); } + registerModuleClass(name, moduleClass) { + this.modules[name] = moduleClass; + } + initModule(moduleName, $node) { let Module = estatico.modules[moduleName].Class, _metaData = $node.data(moduleName + '-data') || {}, diff --git a/source/assets/js/helpers/module.js b/source/assets/js/helpers/module.js index aa36c482..32df3905 100644 --- a/source/assets/js/helpers/module.js +++ b/source/assets/js/helpers/module.js @@ -12,7 +12,7 @@ class EstaticoModule { * @param {object} options - The options passed as data attribute in the Module */ constructor($element, _defaultData, _defaultOptions, data, options) { - this.name = this.constructor.name.toLowerCase(); + this.name = this.constructor.name; this.ui = { $element diff --git a/source/assets/js/main.js b/source/assets/js/main.js index 8828a644..7413a34f 100644 --- a/source/assets/js/main.js +++ b/source/assets/js/main.js @@ -2,11 +2,19 @@ import datasetPolyfill from 'element-dataset'; import '../../../node_modules/handlebars/dist/handlebars'; import './helpers/module'; import './helpers/svgspriteloader'; +import EstaticoApp from './core/estaticoapp'; -import EstaticoApp from './helpers/estaticoapp'; +/** Demo modules **/ +import SkipLinks from '../../demo/modules/skiplinks/skiplinks'; +import SlideShow from '../../demo/modules/slideshow/slideshow'; +/* autoinsertmodulereference */ datasetPolyfill(); -let app = new EstaticoApp(); +const app = new EstaticoApp(); + +app.registerModuleClass(SlideShow.name, SlideShow); +app.registerModuleClass(SkipLinks.name, SkipLinks); +/* autoinsertmodule */ app.start(); diff --git a/source/modules/.scaffold/scaffold.js b/source/modules/.scaffold/scaffold.js index cc4926f9..d17f5982 100644 --- a/source/modules/.scaffold/scaffold.js +++ b/source/modules/.scaffold/scaffold.js @@ -1,39 +1,47 @@ -/*! +import EstaticoModule from '../../assets/js/helpers/module'; + +/* * {{originalName}} * * @author * @copyright */ -import EstaticoModule from '../../assets/js/helpers/module'; - -class {{className}} extends EstaticoModule { +export default class {{className}} extends EstaticoModule { + static events = { + // eventname: `eventname.estatico.${{{className}}.name}` + }; + static defaultData = {}; + static defaultOptions = { + domSelectors: { + // item: `[data-${{{className}}.name}}="item"]` + }, + stateClasses: { + // activated: 'is_activated' + } + }; constructor($element, data, options) { - let _defaultData = {}, - _name = '{{name}}', - _defaultOptions = { - domSelectors: { - // item: '[data-' + _name + '="item"]' - }, - stateClasses: { - // activated: 'is_activated' - } - }; - - super($element, _defaultData, _defaultOptions, data, options); + super($element, {{className}}.defaultData, {{className}}.defaultOptions, data, options); this._initUi(); this._initEventListeners(); } - static get events() { - return { - // eventname: 'eventname.estatico.' + {{name}} - }; + /** + * Unbind events, remove data, custom teardown + * + * @public + */ + destroy() { + super.destroy(); + + // Custom destroy actions go here } /** * Initialisation of variables, which point to DOM elements + * + * @private */ _initUi() { // DOM element pointers @@ -41,19 +49,10 @@ class {{className}} extends EstaticoModule { /** * Event listeners initialisation + * + * @private */ _initEventListeners() { // Event listeners } - - /** - * Unbind events, remove data, custom teardown - */ - destroy() { - super.destroy(); - - // Custom destroy actions go here - } } - -export default {{className}};