From: Aleksander Łukasz Date: Thu, 3 Apr 2014 14:46:26 +0000 (+0200) Subject: Switching to explicit inheritance for canvas elements X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/2e14f0181735b7acd0da023eb4c9524b75a45b56?ds=sidebyside Switching to explicit inheritance for canvas elements --- diff --git a/src/editor/modules/documentCanvas/canvas/canvas.test.js b/src/editor/modules/documentCanvas/canvas/canvas.test.js index 4f954f1..63ef243 100644 --- a/src/editor/modules/documentCanvas/canvas/canvas.test.js +++ b/src/editor/modules/documentCanvas/canvas/canvas.test.js @@ -4,8 +4,9 @@ define([ 'libs/sinon', 'modules/documentCanvas/canvas/canvas', 'modules/documentCanvas/canvas/utils', +'modules/documentCanvas/canvas/documentElement', 'wlxml/wlxml', -], function($, chai, sinon, canvas, utils, wlxml) { +], function($, chai, sinon, canvas, utils, documentElement, wlxml) { 'use strict'; /* global describe, it, beforeEach, afterEach */ @@ -228,20 +229,20 @@ describe('Default document changes handling', function() { describe('Custom elements based on wlxml class attribute', function() { it('allows custom rendering', function() { - var c = getCanvasFromXML('
', [ - {tag: 'div', klass: 'testClass', prototype: { + var prototype = $.extend({}, documentElement.DocumentNodeElement.prototype, { init: function() { this._container().append(''); } - }, extending: {tag: 'div'}} + }), + c = getCanvasFromXML('
', [ + {tag: 'div', klass: 'testClass', prototype: prototype} ]); expect(c.doc().children()[0]._container().children('test').length).to.equal(1); // @! }); it('allows handling changes to internal structure of rendered node', function() { - var c = getCanvasFromXML('
', [ - {tag: 'div', klass: 'testClass', prototype: { + var prototype = $.extend({}, documentElement.DocumentNodeElement.prototype, { init: function() { this.header = $('

'); this._container().append(this.header); @@ -254,7 +255,10 @@ describe('Custom elements based on wlxml class attribute', function() { void(event); this.refresh2(); } - }, extending: {tag: 'div'}} + }); + + var c = getCanvasFromXML('
', [ + {tag: 'div', klass: 'testClass', prototype: prototype} ]); var node = c.wlxmlDocument.root.contents()[0], diff --git a/src/editor/modules/documentCanvas/canvas/documentElement.js b/src/editor/modules/documentCanvas/canvas/documentElement.js index 277d70a..99e97d0 100644 --- a/src/editor/modules/documentCanvas/canvas/documentElement.js +++ b/src/editor/modules/documentCanvas/canvas/documentElement.js @@ -81,6 +81,7 @@ DocumentNodeElement.prototype = Object.create(DocumentElement.prototype); $.extend(DocumentNodeElement.prototype, { defaultDisplayStyle: 'block', + init: function() {}, addWidget: function(widget) { this.dom.children('.canvas-widgets').append(widget.DOM ? widget.DOM : widget); }, diff --git a/src/editor/modules/documentCanvas/canvas/elementsRegister.js b/src/editor/modules/documentCanvas/canvas/elementsRegister.js index 0d31c7d..24a700a 100644 --- a/src/editor/modules/documentCanvas/canvas/elementsRegister.js +++ b/src/editor/modules/documentCanvas/canvas/elementsRegister.js @@ -5,27 +5,18 @@ var _ = require('libs/underscore'), wlxml = require('wlxml/wlxml'); -var ElementsRegister = function(basePrototype, defaultPrototype) { +var ElementsRegister = function(BaseType) { this._register = {}; - this.basePrototype = basePrototype; - this.DefaultType = this.createCanvasElementType(defaultPrototype); + this.BaseType = BaseType; }; _.extend(ElementsRegister.prototype, { - createCanvasElementType: function(elementPrototype, extending) { - var inheritFrom = this.basePrototype; - if(extending && extending.tag) { - inheritFrom = this.getElement(extending); - } + createCanvasElementType: function(elementPrototype) { + var register = this; var Constructor = function() { - if(!this.super) { - this.super = inheritFrom.prototype; - } - inheritFrom.apply(this, Array.prototype.slice.call(arguments, 0)); - + register.BaseType.apply(this, Array.prototype.slice.call(arguments, 0)); }; - Constructor.prototype = Object.create(inheritFrom.prototype); - _.extend(Constructor.prototype, elementPrototype); + Constructor.prototype = elementPrototype; return Constructor; }, register: function(params) { @@ -33,7 +24,7 @@ _.extend(ElementsRegister.prototype, { params.prototype = params.prototype || Object.create({}); this._register[params.tag] = this._register[params.tag] || {}; - this._register[params.tag][params.klass] = this.createCanvasElementType(params.prototype, params.extending); + this._register[params.tag][params.klass] = this.createCanvasElementType(params.prototype); }, getElement: function(params) { params.klass = params.klass || ''; @@ -47,7 +38,7 @@ _.extend(ElementsRegister.prototype, { }.bind(this)); } if(!Factory) { - Factory = this.DefaultType; + Factory = this.BaseType; } return Factory; } diff --git a/src/editor/modules/documentCanvas/canvas/elementsRegister.test.js b/src/editor/modules/documentCanvas/canvas/elementsRegister.test.js index eb7ad89..542e199 100644 --- a/src/editor/modules/documentCanvas/canvas/elementsRegister.test.js +++ b/src/editor/modules/documentCanvas/canvas/elementsRegister.test.js @@ -13,20 +13,18 @@ var expect = chai.expect; describe('Elements register', function() { it('registers element for a tag', function() { var register = new ElementsRegister(documentElement.DocumentNodeElement), - prototype = {testMethod: function(){}}; + prototype = Object.create({}); register.register({ tag: 'div', prototype: prototype, }); - var Element = register.getElement({tag: 'div'}); - expect(Element.prototype.testMethod).to.equal(prototype.testMethod, '1'); - expect(Element.prototype instanceof documentElement.DocumentNodeElement).to.equal(true, '2'); + expect(Element.prototype).to.equal(prototype); }); it('registers element for a class', function() { var register = new ElementsRegister(documentElement.DocumentNodeElement), - prototype = {testMethod: function(){}}; + prototype = Object.create({}); register.register({ tag: 'div', @@ -34,29 +32,7 @@ describe('Elements register', function() { prototype: prototype, }); var Element = register.getElement({tag: 'div', klass: 'a.b.c'}); - expect(Element.prototype.testMethod).to.equal(prototype.testMethod, '1'); - expect(Element.prototype instanceof documentElement.DocumentNodeElement).to.equal(true, '2'); - }); - it('allows inheriting from selected element', function() { - var register = new ElementsRegister(documentElement.DocumentNodeElement), - method1 = function() {}, - method2 = function() {}; - - register.register({ - tag: 'div', - prototype: {method1: method1} - }); - - register.register({ - tag: 'div', - klass: 'a', - prototype: {method2: method2}, - extending: {tag: 'div'} - }); - - var Element = register.getElement({tag: 'div', klass: 'a'}); - expect(Element.prototype.method2).to.equal(method2, '2'); - expect(Element.prototype instanceof register.getElement({tag: 'div'})).to.equal(true, '2'); + expect(Element.prototype).to.equal(prototype); }); }); diff --git a/src/editor/modules/documentCanvas/canvas/genericElement.js b/src/editor/modules/documentCanvas/canvas/genericElement.js index e23aa9b..d11cbd1 100644 --- a/src/editor/modules/documentCanvas/canvas/genericElement.js +++ b/src/editor/modules/documentCanvas/canvas/genericElement.js @@ -14,8 +14,11 @@ var labelWidget = function(tag, klass) { }; void(labelWidget); // for linters; labelWidget is unused on purpose for now +var DocumentNodeElement = documentElement.DocumentNodeElement; -var generic = { +var generic = Object.create(DocumentNodeElement.prototype); + +$.extend(generic, { onNodeAttrChange: function(event) { if(event.meta.attr === 'class') { this.setWlxmlClass(event.meta.newVal); // @@ -138,6 +141,7 @@ var generic = { this.refreshPath(); }, init: function() { + DocumentNodeElement.prototype.init.call(this); this._container() .attr('wlxml-tag', this.wlxmlNode.getTagName()); this.setWlxmlClass(this.wlxmlNode.getClass()); @@ -186,7 +190,7 @@ var generic = { }); return toret; }, -}; +}); return generic; diff --git a/src/editor/plugins/core/canvasElements.js b/src/editor/plugins/core/canvasElements.js index e74adee..addaeae 100644 --- a/src/editor/plugins/core/canvasElements.js +++ b/src/editor/plugins/core/canvasElements.js @@ -1,7 +1,8 @@ define(function(require) { 'use strict'; -var $ = require('libs/jquery'); +var $ = require('libs/jquery'), + genericElement = require('modules/documentCanvas/canvas/genericElement'); // TODO: This should be accessible via plugin infrastructure var widgets = { @@ -53,9 +54,10 @@ var widgets = { }; -var comment = { +var comment = Object.create(genericElement); +$.extend(comment, { init: function() { - this.super.init.call(this); + genericElement.init.call(this); this.commentAdnotation = widgets.commentAdnotation(this.wlxmlNode); this.addWidget(this.commentAdnotation, 'show'); this.commentAdnotation.DOM.show(); @@ -70,11 +72,12 @@ var comment = { onMetadataRemoved: function(event) { return this.onMetadataChanged(event); } -}; +}); -var footnote = { +var footnote = Object.create(genericElement); +$.extend(footnote, { init: function() { - this.super.init.call(this); + genericElement.init.call(this); var clickHandler = function() { this.toggle(true); }.bind(this); @@ -103,12 +106,12 @@ var footnote = { this.trigger('elementToggled', toggle, this); } } -}; +}); return [ - {tag: 'aside', klass: 'comment', prototype: comment, extending: {tag: 'div'}}, - {tag: 'aside', klass: 'footnote', prototype: footnote, extending: {tag: 'aside'}} + {tag: 'aside', klass: 'comment', prototype: comment}, + {tag: 'aside', klass: 'footnote', prototype: footnote} ];