From 4beeae41a70aa22cd278e3f9d5bae9feef0a66af Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Sat, 11 Apr 2015 08:08:36 +0200 Subject: [PATCH] Allow to define actions as simple options objects --- src/Toolbar.js | 6 ++++- src/ToolbarAction.js | 46 +++++++++++++++++------------------ test/src/ToolbarActionSpec.js | 19 +++++++++------ test/src/ToolbarSpec.js | 16 ++++++++++++ 4 files changed, 56 insertions(+), 31 deletions(-) diff --git a/src/Toolbar.js b/src/Toolbar.js index 8ef6064..7b09151 100644 --- a/src/Toolbar.js +++ b/src/Toolbar.js @@ -52,7 +52,7 @@ L.Toolbar = L.Class.extend({ appendToContainer: function(container) { var baseClass = this.constructor.baseClass + '-' + this._calculateDepth(), className = baseClass + ' ' + this.options.className, - Action, action, + Action, action, actions = [], i, j, l, m; this._container = container; @@ -71,13 +71,17 @@ L.Toolbar = L.Class.extend({ action = new Action(); action._createIcon(this, this._ul, this._arguments); + actions.push(action); } + return actions; }, _getActionConstructor: function(Action) { var args = this._arguments, toolbar = this; + if (typeof Action === 'object') { Action = this.options.toolbarActionClass.extend({options: Action}); } + return Action.extend({ initialize: function() { Action.prototype.initialize.apply(this, args); diff --git a/src/ToolbarAction.js b/src/ToolbarAction.js index 537c369..a93b72f 100644 --- a/src/ToolbarAction.js +++ b/src/ToolbarAction.js @@ -4,49 +4,45 @@ L.ToolbarAction = L.Handler.extend({ }, options: { - toolbarIcon: { - html: '', - className: '', - tooltip: '' - }, + html: '', + className: '', + tooltip: '', subToolbar: new L.Toolbar() }, initialize: function(options) { - var defaultIconOptions = L.ToolbarAction.prototype.options.toolbarIcon; - L.setOptions(this, options); - this.options.toolbarIcon = L.extend({}, defaultIconOptions, this.options.toolbarIcon); - }, - enable: function() { - if (this._enabled) { return; } - this._enabled = true; - - if (this.addHooks) { this.addHooks(); } + // Retrocompat. + L.setOptions(this, this.options.toolbarIcon); + // End retrocompat. }, - disable: function() { - if (!this._enabled) { return; } - this._enabled = false; + addHooks: function () { + if (this.options.onEnable) { + this.options.onEnable.call(this); + } + }, - if (this.removeHooks) { this.removeHooks(); } + removeHooks: function () { + if (this.options.onDisable) { + this.options.onDisable.call(this); + } }, _createIcon: function(toolbar, container, args) { - var iconOptions = this.options.toolbarIcon; this.toolbar = toolbar; this._icon = L.DomUtil.create('li', '', container); this._link = L.DomUtil.create('a', '', this._icon); - this._link.innerHTML = iconOptions.html; + this._link.innerHTML = this.options.html; this._link.setAttribute('href', '#'); - this._link.setAttribute('title', iconOptions.tooltip); + this._link.setAttribute('title', this.options.tooltip); L.DomUtil.addClass(this._link, this.constructor.baseClass); - if (iconOptions.className) { - L.DomUtil.addClass(this._link, iconOptions.className); + if (this.options.className) { + L.DomUtil.addClass(this._link, this.options.className); } L.DomEvent.on(this._link, 'click', this.enable, this); @@ -91,3 +87,7 @@ L.toolbarAction = function toolbarAction(options) { L.ToolbarAction.extendOptions = function(options) { return this.extend({ options: options }); }; + +L.Toolbar.mergeOptions({ + toolbarActionClass: L.ToolbarAction +}); diff --git a/test/src/ToolbarActionSpec.js b/test/src/ToolbarActionSpec.js index f72d9ee..d373bcb 100644 --- a/test/src/ToolbarActionSpec.js +++ b/test/src/ToolbarActionSpec.js @@ -12,10 +12,8 @@ describe("L.ToolbarAction", function() { Action = L.ToolbarAction.extend({ options: { - toolbarIcon: { - html: 'Test Icon', - className: 'my-toolbar-icon' - } + html: 'Test Icon', + className: 'my-toolbar-icon' } }); toolbar = new L.Toolbar({ actions: [Action] }); @@ -42,6 +40,13 @@ describe("L.ToolbarAction", function() { expect(L.DomUtil.hasClass(iconButton, 'leaflet-toolbar-icon')).to.equal(true); expect(L.DomUtil.hasClass(iconButton, 'my-toolbar-icon')).to.equal(true); }); + + it("Support toolbarIcon options for retrocompat", function() { + var toolbar = new L.ToolbarAction({toolbarIcon: {html: 'click me'}}); + + expect(toolbar.options.html).to.equal('click me'); + }); + }); describe("#_addSubToolbar", function() { @@ -162,7 +167,7 @@ describe("L.ToolbarAction", function() { expect(h.options.color).to.equal('#d1bd0f'); /* Options of the parent constructor should be retained. */ - expect(h.options.toolbarIcon.html).to.equal(''); + expect(h.options.html).to.equal(''); }); }); }); @@ -170,9 +175,9 @@ describe("L.ToolbarAction", function() { describe("L.toolbarAction", function() { describe("class factory", function() { it("Creates an L.ToolbarAction instance.", function() { - var options = { toolbarIcon: { html: 'hello' } }; + var options = { html: 'hello' }; expect(L.toolbarAction(options)).to.deep.equal(new L.ToolbarAction(options)); }); }); -}); \ No newline at end of file +}); diff --git a/test/src/ToolbarSpec.js b/test/src/ToolbarSpec.js index 6120e4e..3081a00 100644 --- a/test/src/ToolbarSpec.js +++ b/test/src/ToolbarSpec.js @@ -51,6 +51,22 @@ describe("L.Toolbar", function() { toolbar.addTo(map, 2); toolbar.appendToContainer(container); }); + + it("Should allow defining actions from an options object.", function() { + var spy = sinon.spy(); + toolbar = new L.Toolbar({ actions: [{ + html: '⚑', + tooltip: 'Back to center', + className: 'custom-class', + onEnable: spy + }] }); + + toolbar.addTo(map); + var actions = toolbar.appendToContainer(container); + expect(container.querySelectorAll('.custom-class').length).to.equal(1); + actions[0].enable(); + expect(spy.calledOnce).to.equal(true); + }); }); describe("#appendToContainer", function() {