Move template appending into function, add test coverage

mduvall · Sep 5, 2013 · f88e808 · f88e808
1 parent 4fb34f6
commit f88e808
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 45 deletions.
diff --git a/js/grande.js b/js/grande.js
@@ -1,39 +1,16 @@
 (function() {
   var root = this,   // Root object, this is going to be the window for now
       document = this.document, // Safely store a document here for us to use
-      div = document.createElement("div"),
-      toolbarTemplate = "<div class='options'> \
-                  <span class='no-overflow'> \
-                    <span class='ui-inputs'> \
-                      <button class='bold'>B</button> \
-                      <button class='italic'>i</button> \
-                      <button class='header1'>h1</button> \
-                      <button class='header2'>h2</button> \
-                      <button class='quote'>&rdquo;</button> \
-                      <button class='url useicons'>&#xe001;</button> \
-                      <input class='url-input' type='text' placeholder='Paste or type a link'/> \
-                    </span> \
-                  </span> \
-                </div>";
-
-  div.className = "text-menu hide";
-  div.innerHTML = toolbarTemplate;
-
-  // If user hasn't provided a .text-menu, insert one into the DOM
-  if (!document.querySelector(".text-menu"))
-    document.body.appendChild(div);
-
-
-  var editableNodes = document.querySelectorAll(".g-body article"),
-      textMenu = document.querySelectorAll(".g-body .text-menu")[0],
-      optionsNode = document.querySelectorAll(".g-body .text-menu .options")[0],
-      urlInput = document.querySelectorAll(".g-body .text-menu .url-input")[0],
+      editableNodes = document.querySelectorAll(".g-body article"),
       isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1,
-
+      textMenu,
+      optionsNode,
+      urlInput,
       previouslySelectedText,
 
       grande = {
         bind: function() {
+          attachToolbarTemplate();
           bindTextSelectionEvents();
           bindTextStylingEvents();
         },
@@ -51,6 +28,34 @@
         "blockquote": "quote"
       };
 
+  function attachToolbarTemplate() {
+    var div = document.createElement("div"),
+        toolbarTemplate = "<div class='options'> \
+          <span class='no-overflow'> \
+            <span class='ui-inputs'> \
+              <button class='bold'>B</button> \
+              <button class='italic'>i</button> \
+              <button class='header1'>h1</button> \
+              <button class='header2'>h2</button> \
+              <button class='quote'>&rdquo;</button> \
+              <button class='url useicons'>&#xe001;</button> \
+              <input class='url-input' type='text' placeholder='Paste or type a link'/> \
+            </span> \
+          </span> \
+        </div>";
+
+    div.className = "text-menu hide";
+    div.innerHTML = toolbarTemplate;
+
+    if (document.querySelectorAll(".text-menu").length === 0) {
+      document.body.appendChild(div);
+    }
+
+    textMenu = document.querySelectorAll(".text-menu")[0];
+    optionsNode = document.querySelectorAll(".text-menu .options")[0];
+    urlInput = document.querySelectorAll(".text-menu .url-input")[0];
+  }
+
   function bindTextSelectionEvents() {
     var i,
         len,
@@ -79,7 +84,7 @@
   }
 
   function iterateTextMenuButtons(callback) {
-    var textMenuButtons = document.querySelectorAll(".g-body .text-menu button"),
+    var textMenuButtons = document.querySelectorAll(".text-menu button"),
         i,
         len,
         node;

diff --git a/test/grande.html b/test/grande.html
@@ -9,22 +9,6 @@
   <div id="qunit"></div>
   <div id="qunit-fixture">
     <div class="g-body">
-      <div class="text-menu hide">
-        <div class="options">
-          <span class="no-overflow">
-            <span class="ui-inputs">
-              <button class="bold">B</button>
-              <button class="italic">i</button>
-              <button class="header1">h1</button>
-              <button class="header2">h2</button>
-              <button class="quote">&rdquo;</button>
-              <button class="url useicons">&#xe001;</button>
-              <input class="url-input" type="text" placeholder="Paste or type a link"/>
-            </span>
-          </span>
-        </div>
-      </div>
-
       <section>
         <article contenteditable="true" class="content">
         </article>

diff --git a/test/grande.js b/test/grande.js
@@ -64,11 +64,26 @@ test("it should bind to the windows resize event", function() {
     "window resize should be bound to a function");
 });
 
+test("it should attach the toolbar template to the DOM", function() {
+  equal(document.querySelectorAll(".text-menu").length, 0,
+    "text menu should not be defined on the dom");
+
+  grande.bind();
+
+  equal(document.querySelectorAll(".text-menu").length, 1,
+    "text menu should be defined on the dom");
+});
+
 
 function unbind() {
   document.onmousedown =
     document.onmouseup =
       document.onkeyup =
        window.onresize = null;
+
+  var menuEl = document.querySelectorAll(".text-menu");
+  if (menuEl.length) {
+    menuEl[0].parentNode.removeChild(menuEl[0]);
+  }
 }