From: Aleksander Ɓukasz Date: Fri, 2 Aug 2013 07:50:13 +0000 (+0200) Subject: footnote wip: expanding/collapsing footnotes X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/84196c824e6a337a58b9c0a00c124c5e629d02b4 footnote wip: expanding/collapsing footnotes --- diff --git a/modules/documentCanvas/canvas/widgets.js b/modules/documentCanvas/canvas/widgets.js index 9563785..cedf16d 100644 --- a/modules/documentCanvas/canvas/widgets.js +++ b/modules/documentCanvas/canvas/widgets.js @@ -9,7 +9,28 @@ return { return $('') .addClass('canvas-widget canvas-widget-label') .text(tag + (klass ? ' / ' + klass : '')); + }, + + footnoteHandler: function(clickHandler) { + var mydom = $('') + .addClass('canvas-widget canvas-widget-footnote-handle') + .css('display', 'inline') + .show(); + + mydom.click(function() { + clickHandler(); + }); + + return mydom; + }, + + hideButton: function(clickHandler) { + var mydom = $('x') + .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 --- 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 --- 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 --- 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 {