From 32ad302369997d7105629d9c636e9a6dd72ba02e Mon Sep 17 00:00:00 2001 From: Sebastian Weyrauch Date: Tue, 17 Jan 2017 09:57:39 +0100 Subject: [PATCH 1/6] fixed and improved JS scaffolding --- source/modules/.scaffold/scaffold.hbs | 2 +- source/modules/.scaffold/scaffold.js | 63 ++++++++++++++------------- 2 files changed, 33 insertions(+), 32 deletions(-) diff --git a/source/modules/.scaffold/scaffold.hbs b/source/modules/.scaffold/scaffold.hbs index 832de801..5a82d7cd 100644 --- a/source/modules/.scaffold/scaffold.hbs +++ b/source/modules/.scaffold/scaffold.hbs @@ -1,3 +1,3 @@ -
+
{{originalName}}
diff --git a/source/modules/.scaffold/scaffold.js b/source/modules/.scaffold/scaffold.js index cc4926f9..74cc93d2 100644 --- a/source/modules/.scaffold/scaffold.js +++ b/source/modules/.scaffold/scaffold.js @@ -1,39 +1,49 @@ -/*! +import EstaticoModule from '../../assets/js/helpers/module'; + +const name = '{{name}}'; + +/* * {{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.${name}` + }; + static defaultData = {}; + static defaultOptions = { + domSelectors: { + // item: `[data-${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 +51,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}}; From 974a3e77b1da9788be1e8f3835ed48da047997ba Mon Sep 17 00:00:00 2001 From: Sebastian Weyrauch Date: Tue, 17 Jan 2017 12:01:53 +0100 Subject: [PATCH 2/6] moved the module class registration to the main.js again (should be outside the core app) --- gulp/scaffold/default.js | 4 ++-- .../assets/js/{helpers => core}/estaticoapp.js | 16 ++++++---------- source/assets/js/main.js | 12 ++++++++++-- 3 files changed, 18 insertions(+), 14 deletions(-) rename source/assets/js/{helpers => core}/estaticoapp.js (87%) 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..53561e2f 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, xxClass) { + this.modules[name] = xxClass; + } + initModule(moduleName, $node) { let Module = estatico.modules[moduleName].Class, _metaData = $node.data(moduleName + '-data') || {}, 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(); From d8ccf82d57dcdcc869b1d1757d634ffbb8aac2ee Mon Sep 17 00:00:00 2001 From: Sebastian Weyrauch Date: Tue, 17 Jan 2017 12:14:29 +0100 Subject: [PATCH 3/6] further improvement of the scaffolding (removed the name constant) --- source/modules/.scaffold/scaffold.hbs | 2 +- source/modules/.scaffold/scaffold.js | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/source/modules/.scaffold/scaffold.hbs b/source/modules/.scaffold/scaffold.hbs index 5a82d7cd..832de801 100644 --- a/source/modules/.scaffold/scaffold.hbs +++ b/source/modules/.scaffold/scaffold.hbs @@ -1,3 +1,3 @@ -
+
{{originalName}}
diff --git a/source/modules/.scaffold/scaffold.js b/source/modules/.scaffold/scaffold.js index 74cc93d2..d17f5982 100644 --- a/source/modules/.scaffold/scaffold.js +++ b/source/modules/.scaffold/scaffold.js @@ -1,7 +1,5 @@ import EstaticoModule from '../../assets/js/helpers/module'; -const name = '{{name}}'; - /* * {{originalName}} * @@ -10,12 +8,12 @@ const name = '{{name}}'; */ export default class {{className}} extends EstaticoModule { static events = { - // eventname: `eventname.estatico.${name}` + // eventname: `eventname.estatico.${{{className}}.name}` }; static defaultData = {}; static defaultOptions = { domSelectors: { - // item: `[data-${name}="item"]` + // item: `[data-${{{className}}.name}}="item"]` }, stateClasses: { // activated: 'is_activated' From 04d65e9511ed687ab02bcabf6ef8ec187d57f726 Mon Sep 17 00:00:00 2001 From: Sebastian Weyrauch Date: Tue, 17 Jan 2017 12:15:26 +0100 Subject: [PATCH 4/6] adjusted the instance's name to class' name --- source/assets/js/helpers/module.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 From 16a511325a73636193777ce14c30e434a7d165a9 Mon Sep 17 00:00:00 2001 From: Sebastian Weyrauch Date: Tue, 17 Jan 2017 12:16:06 +0100 Subject: [PATCH 5/6] adjusted the scaffolding gulp task to the new naming --- gulp/scaffold/default.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gulp/scaffold/default.js b/gulp/scaffold/default.js index 71f77787..5377ba21 100644 --- a/gulp/scaffold/default.js +++ b/gulp/scaffold/default.js @@ -48,7 +48,7 @@ var taskName = 'scaffold', src: './source/assets/js/helpers/estaticoapp.js', insertionPoint: '/* autoinsertmodule */', importInsertionPoint: '/* autoinsertmodulereference */', - insertionTemplate: 'this.modules.{{keyName}} = {{className}};\n ', + insertionTemplate: 'this.modules[{{className}}.name] = {{className}};\n ', importInsertionTemplate: 'import {{className}} from \'{{modulePath}}\';\n' }, From 67863a17dac0bf6bcfca63031ea5013c2c571b8a Mon Sep 17 00:00:00 2001 From: Sebastian Weyrauch Date: Tue, 17 Jan 2017 12:23:23 +0100 Subject: [PATCH 6/6] name refactoring --- source/assets/js/core/estaticoapp.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/assets/js/core/estaticoapp.js b/source/assets/js/core/estaticoapp.js index 53561e2f..4e48035b 100644 --- a/source/assets/js/core/estaticoapp.js +++ b/source/assets/js/core/estaticoapp.js @@ -25,8 +25,8 @@ class EstaticoApp { this._initModuleInitialiser(); } - registerModuleClass(name, xxClass) { - this.modules[name] = xxClass; + registerModuleClass(name, moduleClass) { + this.modules[name] = moduleClass; } initModule(moduleName, $node) {