Updated the Link tool to support for fixtures.

GetmeUK · Aug 18, 2017 · 1d6d484 · 1d6d484
1 parent 1dd9eaf
commit 1d6d484
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 7 deletions.
diff --git a/build/content-tools.js b/build/content-tools.js
diff --git a/build/content-tools.min.css b/build/content-tools.min.css
diff --git a/build/content-tools.min.js b/build/content-tools.min.js
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ContentTools",
   "description": "A JS library for building WYSIWYG editors for HTML content",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "keywords": [
     "wysiwyg",
     "inline",

diff --git a/sandbox/index.html b/sandbox/index.html
@@ -14,6 +14,15 @@ <h1 data-fixture data-name="article-title">
                     5 rules for naming variables
                 </h1>
 
+                <a
+                    data-ce-tag="p"
+                    data-fixture
+                    data-name="article-title"
+                    href="/test"
+                    >
+                    Test link fixture
+                </a>
+
                 <div
                    data-ce-tag="img-fixture"
                    data-fixture

diff --git a/sandbox/sandbox.css b/sandbox/sandbox.css
@@ -1,4 +1,4 @@
-/*! ContentTools v1.4.0 by Anthony Blackshaw <[email protected]> (https://github.com/anthonyjb) */
+/*! ContentTools v1.5.1 by Anthony Blackshaw <[email protected]> (https://github.com/anthonyjb) */
 @charset "UTF-8";
 /* Vendor */
 html {

diff --git a/sandbox/sandbox.js b/sandbox/sandbox.js
@@ -138,7 +138,7 @@
   window.ImageUploader = ImageUploader;
 
   window.onload = function() {
-    var FIXTURE_TOOLS, IMAGE_FIXTURE_TOOLS, editor, req;
+    var FIXTURE_TOOLS, IMAGE_FIXTURE_TOOLS, LINK_FIXTURE_TOOLS, editor, req;
     ContentTools.IMAGE_UPLOADER = ImageUploader.createImageUploader;
     ContentTools.StylePalette.add([new ContentTools.Style('By-line', 'article__by-line', ['p']), new ContentTools.Style('Caption', 'article__caption', ['p']), new ContentTools.Style('Example', 'example', ['pre']), new ContentTools.Style('Example + Good', 'example--good', ['pre']), new ContentTools.Style('Example + Bad', 'example--bad', ['pre'])]);
     editor = ContentTools.EditorApp.get();
@@ -160,11 +160,14 @@
     });
     FIXTURE_TOOLS = [['undo', 'redo', 'remove']];
     IMAGE_FIXTURE_TOOLS = [['undo', 'redo', 'image']];
+    LINK_FIXTURE_TOOLS = [['undo', 'redo', 'link']];
     ContentEdit.Root.get().bind('focus', function(element) {
       var tools;
       if (element.isFixed()) {
         if (element.type() === 'ImageFixture') {
           tools = IMAGE_FIXTURE_TOOLS;
+        } else if (element.tagName() === 'a') {
+          tools = LINK_FIXTURE_TOOLS;
         } else {
           tools = FIXTURE_TOOLS;
         }

diff --git a/src/sandbox/sandbox.coffee b/src/sandbox/sandbox.coffee
@@ -44,11 +44,14 @@ window.onload = () ->
     # Handle tools available to fixtures
     FIXTURE_TOOLS = [['undo', 'redo', 'remove']]
     IMAGE_FIXTURE_TOOLS = [['undo', 'redo', 'image']]
+    LINK_FIXTURE_TOOLS = [['undo', 'redo', 'link']]
     ContentEdit.Root.get().bind 'focus', (element) ->
         # Determine what tools should be available to the user
         if element.isFixed()
             if element.type() is 'ImageFixture'
                 tools = IMAGE_FIXTURE_TOOLS
+            else if element.tagName() == 'a'
+                tools = LINK_FIXTURE_TOOLS
             else
                 tools = FIXTURE_TOOLS
         else

diff --git a/src/scripts/tools.coffee b/src/scripts/tools.coffee
@@ -182,6 +182,10 @@ class ContentTools.Tools.Link extends ContentTools.Tools.Bold
             if element.a
                 return element.a[attrName]
 
+        # Fixtures
+        else if element.isFixed() and element.tagName() is 'a'
+            return element.attr(attrName)
+
         # Text
         else
             # Find the first character in the selected text that has an `a` tag
@@ -203,6 +207,8 @@ class ContentTools.Tools.Link extends ContentTools.Tools.Bold
         # element/selection.
         if element.type() is 'Image'
             return true
+        else if element.isFixed() and element.tagName() is 'a'
+            return true
         else
             # Must support content
             unless element.content
@@ -226,6 +232,8 @@ class ContentTools.Tools.Link extends ContentTools.Tools.Bold
         # element/selection.
         if element.type() is 'Image'
             return element.a
+        else if element.isFixed() and element.tagName() is 'a'
+            return true
         else
             return super(element, selection)
 
@@ -246,6 +254,10 @@ class ContentTools.Tools.Link extends ContentTools.Tools.Bold
             # Images
             rect = element.domElement().getBoundingClientRect()
 
+        else if element.isFixed() and element.tagName() is 'a'
+            # Fixtures
+            rect = element.domElement().getBoundingClientRect()
+
         else
             # If the selection is collapsed then we need to select the entire
             # entire link.
@@ -371,6 +383,10 @@ class ContentTools.Tools.Link extends ContentTools.Tools.Bold
                 element.unmount()
                 element.mount()
 
+            else if element.isFixed() and element.tagName() is 'a'
+                # Fixtures
+                element.attr('href', detail.href)
+
             else
                 # Text elements