editor: improved links, first take

diff --git a/src/editor/modules/documentCanvas/canvas/canvas.js b/src/editor/modules/documentCanvas/canvas/canvas.js
index ff2b31e..7599a71 100644 (file)
--- 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());
 
     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() {
     },
 
     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-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._container().addClass('current-node-element');

+                element.markAsCurrent(true);

             }
         }.bind(this);
 
             }
         }.bind(this);
 

diff --git a/src/editor/modules/documentCanvas/canvas/documentElement.js b/src/editor/modules/documentCanvas/canvas/documentElement.js
index 3073e72..7acf7c8 100644 (file)
--- 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);
     },
 
         this.toggleHighlight(toggle);
     },
 

+    markAsCurrent: function() {},
+

     toggleHighlight: function(toggle) {
         this._container().toggleClass('highlighted-element', toggle);
     },
     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 (file)
--- a/src/editor/plugins/core/canvasElements.js
+++ b/src/editor/plugins/core/canvasElements.js
@@ -1,9 +1,10 @@
 define(function(require) {
     
 'use strict';
 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) {
 
 var widgets = {
     footnoteHandler: function(clickHandler) {


@@ -111,7 +112,8 @@ $.extend(footnote, {
 
 return [
     {tag: 'aside', klass: 'comment', prototype: comment},
 
 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 (file)
--- 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;
     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 (file)
--- 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 (file)
index 0000000..d4594a7
--- /dev/null
+++ b/src/editor/plugins/core/links/box.html
@@ -0,0 +1,7 @@
+<div contenteditable="false" link-box style="white-space: nowrap">
+    <a link target="blank" href="<%= href %>"><%= href %></a> --
+    <span>
+        <a class="change" href="#"><%= gettext('change') %></a> |
+        <a class="delete" href="#"><%= gettext('remove') %></a>
+    </span>
+</div>
\ 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 (file)
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 (file)
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