From: Aleksander Ɓukasz Date: Tue, 6 Aug 2013 07:21:25 +0000 (+0200) Subject: EventBus for canvas elements + setting current element after footnote close use case X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/ecf3b34e969acfeeb5d09b7287b233ce4bffed83 EventBus for canvas elements + setting current element after footnote close use case --- diff --git a/modules/documentCanvas/canvas/canvas.js b/modules/documentCanvas/canvas/canvas.js index dd15d06..9ce8a72 100644 --- a/modules/documentCanvas/canvas/canvas.js +++ b/modules/documentCanvas/canvas/canvas.js @@ -1,13 +1,15 @@ define([ 'libs/jquery-1.9.1.min', 'libs/underscore-min', +'libs/backbone-min', 'modules/documentCanvas/canvas/documentElement', 'modules/documentCanvas/canvas/utils' -], function($, _, documentElement, utils) { +], function($, _, Backbone, documentElement, utils) { 'use strict'; var Canvas = function(wlxml, publisher) { + this.eventBus = _.extend({}, Backbone.Events); this.loadWlxml(wlxml); this.publisher = publisher ? publisher : function() {}; }; @@ -19,7 +21,8 @@ $.extend(Canvas.prototype, { if(d) { this.wrapper = $('
').addClass('canvas-wrapper').attr('contenteditable', true); this.wrapper.append(d); - + var canvas = this; + this.wrapper.find('*').replaceWith(function() { var currentTag = $(this); if(currentTag.attr('wlxml-tag')) @@ -40,7 +43,7 @@ $.extend(Canvas.prototype, { meta: meta, others: others, rawChildren: currentTag.contents() - }); + }, canvas); ['orig-before', 'orig-after', 'orig-begin', 'orig-end'].forEach(function(attr) { element.data(attr, ''); @@ -137,7 +140,6 @@ $.extend(Canvas.prototype, { this.d = this.wrapper.children(0); - var canvas = this; this.wrapper.on('keydown', function(e) { if(e.which === 13) { e.preventDefault(); @@ -255,6 +257,13 @@ $.extend(Canvas.prototype, { el.toggleLabel(false); }); + this.eventBus.on('elementToggled', function(toggle, element) { + if(!toggle) { + element = canvas.getDocumentElement(utils.nearestInDocumentOrder('[document-text-element]:visible', 'above', element.dom()[0])); + canvas.setCurrentElement(element); + } + }) + } else { this.d = null; } diff --git a/modules/documentCanvas/canvas/documentElement.js b/modules/documentCanvas/canvas/documentElement.js index e1d3203..749a2ef 100644 --- a/modules/documentCanvas/canvas/documentElement.js +++ b/modules/documentCanvas/canvas/documentElement.js @@ -46,6 +46,9 @@ $.extend(DocumentElement.prototype, { _setupDOMHandler: function(htmlElement) { this.$element = $(htmlElement); }, + bound: function() { + return this.canvas !== undefined; + }, dom: function() { return this.$element; }, @@ -115,7 +118,7 @@ var DocumentNodeElement = function(htmlElement, canvas) { }; $.extend(DocumentNodeElement, { - createDOM: function(params) { + createDOM: function(params, canvas) { var dom = $('
') .attr('document-node-element', ''), widgetsContainer = $('
') @@ -128,7 +131,7 @@ $.extend(DocumentNodeElement, { // Make sure widgets aren't navigable with arrow keys widgetsContainer.find('*').add(widgetsContainer).attr('tabindex', -1); - var element = this.fromHTMLElement(dom[0]); + var element = this.fromHTMLElement(dom[0], canvas); element.setWlxmlTag(params.tag); if(params.klass) @@ -147,7 +150,7 @@ $.extend(DocumentNodeElement, { }, create: function(params, canvas) { - return this.fromHTMLElement(this.createDOM(params)[0]); + return this.fromHTMLElement(this.createDOM(params, canvas)[0], canvas); }, fromHTMLElement: function(htmlElement, canvas) { @@ -427,7 +430,7 @@ $.extend(DocumentTextElement.prototype, { if(params instanceof DocumentNodeElement) { element = params; } else { - element = DocumentNodeElement.create(params); + element = DocumentNodeElement.create(params, this.canvas); } this.dom().wrap('
'); this.dom().parent().after(element.dom()); @@ -441,7 +444,7 @@ $.extend(DocumentTextElement.prototype, { if(params instanceof DocumentNodeElement) { element = params; } else { - element = DocumentNodeElement.create(params); + element = DocumentNodeElement.create(params, this.canvas); } this.dom().wrap('
'); this.dom().parent().before(element.dom()); diff --git a/modules/documentCanvas/canvas/wlxmlManagers.js b/modules/documentCanvas/canvas/wlxmlManagers.js index 0a48fdc..8973a6c 100644 --- a/modules/documentCanvas/canvas/wlxmlManagers.js +++ b/modules/documentCanvas/canvas/wlxmlManagers.js @@ -8,6 +8,8 @@ define([ var DocumentElementWrapper = function(documentElement) { + this.documentElement = documentElement; + this.addWidget = function(widget) { documentElement.dom().find('.canvas-widgets').append(widget); }; @@ -32,6 +34,13 @@ var DocumentElementWrapper = function(documentElement) { this.toggle = function(toggle) { documentElement._container().toggle(toggle); } + + var eventBus = documentElement.bound() ? documentElement.canvas.eventBus : + {trigger: function() {}}; + this.trigger = function() { + eventBus.trigger.apply(eventBus, arguments); + } + } var getDisplayStyle = function(tag, klass) { @@ -94,14 +103,17 @@ $.extend(FootnoteManager.prototype, { this.hideButton = widgets.hideButton(closeHandler); this.el.addWidget(this.hideButton); - this.toggle(false); + this.toggle(false, {silent: true}); }, - toggle: function(toggle) { + toggle: function(toggle, options) { + options = options || {}; this.hideButton.toggle(toggle); this.footnoteHandler.toggle(!toggle); this.el.setDisplayStyle(toggle ? 'block' : 'inline'); this.el.toggle(toggle); + if(!options.silent) + this.el.trigger('elementToggled', toggle, this.el.documentElement); } }) managers.set('aside', 'footnote', FootnoteManager);