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 (file)
--- 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 = $('<div>').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 (file)
--- 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 = $('<div>')
                 .attr('document-node-element', ''),
             widgetsContainer = $('<div>')
@@ -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('<div>');
         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('<div>');
         this.dom().parent().before(element.dom());

diff --git a/modules/documentCanvas/canvas/wlxmlManagers.js b/modules/documentCanvas/canvas/wlxmlManagers.js
index 0a48fdc..8973a6c 100644 (file)
--- 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);