footnote wip: expanding/collapsing footnotes

diff --git a/modules/documentCanvas/canvas/widgets.js b/modules/documentCanvas/canvas/widgets.js
index 9563785..cedf16d 100644 (file)
--- a/modules/documentCanvas/canvas/widgets.js
+++ b/modules/documentCanvas/canvas/widgets.js
@@ -9,7 +9,28 @@ return {
         return $('<span>')
             .addClass('canvas-widget canvas-widget-label')
             .text(tag + (klass ? ' / ' + klass : ''));
+    },
+
+    footnoteHandler: function(clickHandler) {
+        var mydom = $('<span>')
+            .addClass('canvas-widget canvas-widget-footnote-handle')
+            .css('display', 'inline')
+            .show();
+
+        mydom.click(function() {
+            clickHandler();
+        });
+
+        return mydom;
+    },
+
+    hideButton: function(clickHandler) {
+        var mydom = $('<span>x</span>')
+            .addClass('canvas-widget canvas-widget-hide-button');
+        mydom.click(clickHandler);
+        return mydom;
     }
+
 };
 
 });
\ No newline at end of file

diff --git a/modules/documentCanvas/canvas/widgets.less b/modules/documentCanvas/canvas/widgets.less
index 484385f..0737aa7 100644 (file)
--- a/modules/documentCanvas/canvas/widgets.less
+++ b/modules/documentCanvas/canvas/widgets.less
@@ -1,6 +1,7 @@
 [document-node-element] {
     .canvas-widgets {
         display: inline;
+        text-indent: 0;
     }
 
     .canvas-widget {
@@ -23,4 +24,36 @@
         z-index:9999;
         white-space: nowrap;
     }
+
+
+
+    .canvas-widget-footnote-handle {
+        display: inline;
+        outline: 0px solid transparent;
+        cursor: pointer;
+        counter-increment: footnote;
+        vertical-align: super;
+        color: blue;
+        font-size: .8em;
+
+        &::before, {
+            content: "[" counter(footnote) "]";
+        }
+    }
+
+    .canvas-widget-hide-button {
+        @line_height: 12px;
+        @padding: 2px;
+
+        position: absolute;
+        top: -(@line_height + 2 * @padding);
+        right: 0;
+        line-height: @line_height;
+        padding: @padding;
+        font-weight: bold;
+        color: white;
+        background-image: linear-gradient(to bottom,#ee5f5b,#bd362f);
+        border-radius: 1px;
+        cursor: pointer;
+    }
 }
\ No newline at end of file

diff --git a/modules/documentCanvas/canvas/wlxmlManagers.js b/modules/documentCanvas/canvas/wlxmlManagers.js
index 2a9bf15..75d8c67 100644 (file)
--- a/modules/documentCanvas/canvas/wlxmlManagers.js
+++ b/modules/documentCanvas/canvas/wlxmlManagers.js
@@ -6,7 +6,7 @@ define([
 'use strict';
 
 
-var DocumentElementAPI = function(documentElement) {
+var DocumentElementWrapper = function(documentElement) {
     
     this.addWidget = function(widget) {
         documentElement.dom().find('.canvas-widgets').append(widget);
@@ -28,6 +28,10 @@ var DocumentElementAPI = function(documentElement) {
     this.klass = function() {
         return documentElement.getWlxmlClass();
     };
+
+    this.toggle = function(toggle) {
+        documentElement._container().toggle(toggle);
+    }
 }
 
 var getDisplayStyle = function(tag, klass) {
@@ -52,10 +56,58 @@ $.extend(GenericManager.prototype, {
     }
 })
 
+var managers = {
+    _m: {},
+    set: function(tag, klass, manager) {
+        if(!this._m[tag])
+            this._m[tag] = {};
+        this._m[tag][klass] = manager;
+    },
+    get: function(tag,klass) {
+        if(this._m[tag] && this._m[tag][klass])
+            return this._m[tag][klass];
+        return GenericManager;
+    }
+}
+
+var FootnoteManager = function(wlxmlElement) {
+    this.el = wlxmlElement;
+};
+$.extend(FootnoteManager.prototype, {
+    setup: function() {
+        this.el.clearWidgets();
+
+        var clickHandler = function() {
+            this._toggleFootnote(true);
+        }.bind(this);
+        this.footnoteHandler = widgets.footnoteHandler(clickHandler);
+        this.el.addWidget(this.footnoteHandler);
+
+        var closeHandler = function() {
+            this._toggleFootnote(false);
+
+        }.bind(this);
+        this.hideButton = widgets.hideButton(closeHandler);
+        this.el.addWidget(this.hideButton);
+
+        this._toggleFootnote(false);
+    },
+    _toggleFootnote: function(toggle) {
+        this.hideButton.toggle(toggle);
+        this.footnoteHandler.toggle(!toggle);
+        
+        this.el.setDisplayStyle(toggle ? 'block' : 'inline');
+        this.el.toggle(toggle);
+    }
+})
+managers.set('aside', 'footnote', FootnoteManager);
+
+
 return {
     getFor: function(documentElement) {
-        var wlxmlElement = new DocumentElementAPI(documentElement);
-        return new GenericManager(wlxmlElement);
+        var wlxmlElement = new DocumentElementWrapper(documentElement);
+        return new (managers.get(wlxmlElement.tag(), wlxmlElement.klass()))(wlxmlElement);
+
     }
 };
 

diff --git a/modules/documentCanvas/documentCanvas.less b/modules/documentCanvas/documentCanvas.less
index 41405b3..e17dce4 100644 (file)
--- a/modules/documentCanvas/documentCanvas.less
+++ b/modules/documentCanvas/documentCanvas.less
@@ -50,6 +50,8 @@
     .highlighted-element {
         border: 1px solid red;
     }
+
+    counter-reset: footnote;
 }
 
 .rng-module-documentCanvas-currentNode {