From deeb9be02fa983184ddf5fcc14d01f984079783d Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Tue, 6 May 2014 12:39:09 +0200 Subject: [PATCH] editor: improved links, first take --- .../modules/documentCanvas/canvas/canvas.js | 22 +++++- .../documentCanvas/canvas/documentElement.js | 2 + src/editor/plugins/core/canvasElements.js | 8 +- src/editor/plugins/core/canvasElements.less | 2 +- src/editor/plugins/core/core.less | 3 +- src/editor/plugins/core/links/box.html | 7 ++ src/editor/plugins/core/links/linkElement.js | 77 +++++++++++++++++++ src/editor/plugins/core/links/links.less | 14 ++++ 8 files changed, 129 insertions(+), 6 deletions(-) create mode 100644 src/editor/plugins/core/links/box.html create mode 100644 src/editor/plugins/core/links/linkElement.js create mode 100644 src/editor/plugins/core/links/links.less diff --git a/src/editor/modules/documentCanvas/canvas/canvas.js b/src/editor/modules/documentCanvas/canvas/canvas.js index ff2b31e..7599a71 100644 --- a/src/editor/modules/documentCanvas/canvas/canvas.js +++ b/src/editor/modules/documentCanvas/canvas/canvas.js @@ -290,6 +290,19 @@ $.extend(Canvas.prototype, Backbone.Events, { triggerSelectionChanged: function() { this.trigger('selectionChanged', this.getSelection()); + var s = this.getSelection(), + f = s.toDocumentFragment(); + if(f && f instanceof f.RangeFragment) { + var $current = this.wrapper.find('.current-node-element'); + var current = $current && this.getDocumentElement($current.parent()[0]); + + if($current) { + $current.removeClass('current-node-element'); + } + if(current) { + current.markAsCurrent(false); + } + } }, getSelection: function() { @@ -324,8 +337,15 @@ $.extend(Canvas.prototype, Backbone.Events, { this.wrapper.find('.current-text-element').removeClass('current-text-element'); element.dom.addClass('current-text-element'); } else { - this.wrapper.find('.current-node-element').removeClass('current-node-element'); + var $current = this.wrapper.find('.current-node-element'); + var current = this.getDocumentElement($current.parent()[0]); + $current.removeClass('current-node-element'); + + if(current) { + current.markAsCurrent(false); + } element._container().addClass('current-node-element'); + element.markAsCurrent(true); } }.bind(this); diff --git a/src/editor/modules/documentCanvas/canvas/documentElement.js b/src/editor/modules/documentCanvas/canvas/documentElement.js index 3073e72..7acf7c8 100644 --- a/src/editor/modules/documentCanvas/canvas/documentElement.js +++ b/src/editor/modules/documentCanvas/canvas/documentElement.js @@ -133,6 +133,8 @@ $.extend(DocumentNodeElement.prototype, { this.toggleHighlight(toggle); }, + markAsCurrent: function() {}, + toggleHighlight: function(toggle) { this._container().toggleClass('highlighted-element', toggle); }, diff --git a/src/editor/plugins/core/canvasElements.js b/src/editor/plugins/core/canvasElements.js index addaeae..229cd47 100644 --- a/src/editor/plugins/core/canvasElements.js +++ b/src/editor/plugins/core/canvasElements.js @@ -1,9 +1,10 @@ define(function(require) { 'use strict'; -var $ = require('libs/jquery'), - genericElement = require('modules/documentCanvas/canvas/genericElement'); // TODO: This should be accessible via plugin infrastructure +var $ = require('libs/jquery'), + genericElement = require('modules/documentCanvas/canvas/genericElement'), // TODO: This should be accessible via plugin infrastructure + linkElement = require('./links/linkElement'); var widgets = { footnoteHandler: function(clickHandler) { @@ -111,7 +112,8 @@ $.extend(footnote, { return [ {tag: 'aside', klass: 'comment', prototype: comment}, - {tag: 'aside', klass: 'footnote', prototype: footnote} + {tag: 'aside', klass: 'footnote', prototype: footnote}, + {tag: 'span', klass: 'link', prototype: linkElement} ]; diff --git a/src/editor/plugins/core/canvasElements.less b/src/editor/plugins/core/canvasElements.less index 6003476..6a663b1 100644 --- a/src/editor/plugins/core/canvasElements.less +++ b/src/editor/plugins/core/canvasElements.less @@ -36,4 +36,4 @@ font-size: 10px; color: lighten(@black, 10%); z-index:1000; -} \ No newline at end of file +} diff --git a/src/editor/plugins/core/core.less b/src/editor/plugins/core/core.less index 0754e03..14c179e 100644 --- a/src/editor/plugins/core/core.less +++ b/src/editor/plugins/core/core.less @@ -1 +1,2 @@ -@import 'canvasElements.less'; \ No newline at end of file +@import 'canvasElements.less'; +@import 'links/links.less'; diff --git a/src/editor/plugins/core/links/box.html b/src/editor/plugins/core/links/box.html new file mode 100644 index 0000000..d4594a7 --- /dev/null +++ b/src/editor/plugins/core/links/box.html @@ -0,0 +1,7 @@ +
+ <%= href %> -- + + <%= gettext('change') %> | + <%= gettext('remove') %> + +
\ No newline at end of file diff --git a/src/editor/plugins/core/links/linkElement.js b/src/editor/plugins/core/links/linkElement.js new file mode 100644 index 0000000..1214e95 --- /dev/null +++ b/src/editor/plugins/core/links/linkElement.js @@ -0,0 +1,77 @@ +define(function(require) { + +'use strict'; +/* globals gettext */ + + +var $ = require('libs/jquery'), + _ = require('libs/underscore'), + genericElement = require('modules/documentCanvas/canvas/genericElement'), + Dialog = require('views/dialog/dialog'), + boxTemplate = require('libs/text!./box.html'), + linkElement = Object.create(genericElement); + + +_.extend(linkElement, { + init: function() { + genericElement.init.call(this); + _.bindAll(this, 'changeLink', 'deleteLink'); + + this.box = $(_.template(boxTemplate)({href: this.wlxmlNode.getAttr('href')})); + this.box.find('.change').on('click', this.changeLink); + this.box.find('.delete').on('click', this.deleteLink); + this.box.hide(); + this.addWidget(this.box); + }, + markAsCurrent: function(toggle) { + this.box.toggle(toggle); + }, + onNodeAttrChange: function(event) { + if(event.meta.attr === 'href') { + var link = this.box.find('[link]'); + link.text(event.meta.newVal); + link.attr('href', event.meta.newVal); + } + }, + + changeLink: function(e) { + var el = this, + dialog = Dialog.create({ + title: gettext('Edit link'), + executeButtonText: gettext('Apply'), + cancelButtonText: gettext('Cancel'), + fields: [ + {label: gettext('Link'), name: 'href', type: 'input', initialValue: el.wlxmlNode.getAttr('href')} + ] + }); + e.preventDefault(); + e.stopPropagation(); + + dialog.on('execute', function(event) { + el.wlxmlNode.document.transaction(function() { + el.wlxmlNode.setAttr('href', event.formData.href); + event.success(); + }, { + metadata: { + description: gettext('Edit link') + } + }); + }); + dialog.show(); + }, + + deleteLink: function() { + var el = this; + el.wlxmlNode.document.transaction(function() { + el.wlxmlNode.unwrapContent(); + }, { + metadata: { + description: gettext('Remove link') + } + }); + } +}); + +return linkElement; + +}); diff --git a/src/editor/plugins/core/links/links.less b/src/editor/plugins/core/links/links.less new file mode 100644 index 0000000..f9ab609 --- /dev/null +++ b/src/editor/plugins/core/links/links.less @@ -0,0 +1,14 @@ +[link-box] { + border: 1px solid #ddd; + position: absolute; + color: black; + left:0; + font-size: 12px; + line-height: 10px; + bottom: -42px; + padding: 10px 15px; + background-color: rgba(255,255,255,1); + box-shadow:0 10px 5px #888888; + z-index:9999; + font-style: normal; +} \ No newline at end of file -- 2.20.1