Functional stuff working a little better

ui/Squire-UI.html

@@ -3,14 +3,14 @@
         <div data-action="bold" data-value="" class="item"><i class="fa fa-bold"></i></div>
         <div data-action="italic" data-value="" class="item"><i  class="fa fa-italic"></i></div>
         <div data-action="underline" data-value="" class="item"><i class="fa fa-underline"></i></div>
-        <div data-action="" data-value=""  id="font" class="item">
+        <div id="selectFont" data-action="selectFont" data-value="" class="item">
             <i class="fa fa-font"></i>
         </div>
     </div>
     <div class="group">
-        <div data-action="makeLink" data-value=""class="item"><i class="fa fa-link"></i></div>
+        <div id="makeLink"data-action="makeLink" data-value=""class="item"><i class="fa fa-link"></i></div>
         <div data-action="makeOrderedList" data-value="" class="item"><i class="fa fa-list"></i></div>
-        <div data-action="image" data-value="" class="item">
+        <div id="insertImage" data-action="insertImage" data-value="" class="item">
             <i class="fa fa-picture-o"></i>
         </div>
         <div data-action="increaseQuoteLevel" data-value="" class="item"><i class="fa fa-quote-right"></i></div>
@@ -22,7 +22,7 @@
     </div>
 </div>
 <div class="templates hidden">
-    <div class="drop-font">
+    <div id="drop-font">
         <i class="fa fa-chevron-up quit"></i>
         Text Size: <input type="number" min="12" max="72" step="6" value="12" name="font-size">
         <br>

ui/Squire-UI.js

@@ -32,12 +32,36 @@ $(document).ready(function() {
     var div = document.createElement('div');
     div.className = 'Squire-UI';
     $(div).load(buildPath + 'Squire-UI.html', function() {
+
+      function createDrop(element, content) {
+        element.drop = new Drop({
+          target: element,
+          content: content,
+          position: 'bottom left',
+          openOn: 'click'
+        });
+
+        element.drop.on('open', function () {
+          $('.quit').click(function () {
+            $(this).parent().parent().removeClass('drop-open');
+          });
+        });
+      }
+
+      createDrop($('#makeLink').first()[0], "Hello World");
+      createDrop($('#insertImage').first()[0], "Hello World");
+      createDrop($('#selectFont').first()[0], $('#drop-font').first().html());
+      
+
       $('.item').click(function() {
         var iframe = $(this).parents('.Squire-UI').next('iframe').first()[0];
         var editor = iframe.contentWindow.editor;
         var action = $(this).data('action');
         
+        if (editor.getSelectedText() === '' && action != 'insertImage') return 0;
+
         test = {
+          value: $(this).data('action'),
           testBold: editor.testPresenceinSelection('bold',
             action, 'B', (/>B\b/)),
           testItalic: editor.testPresenceinSelection('italic',
@@ -50,9 +74,12 @@ $(document).ready(function() {
             action, 'A', (/>A\b/)),
           testQuote: editor.testPresenceinSelection(
             'increaseQuoteLevel', action, 'blockquote', (
-              />blockquote\b/))
+              />blockquote\b/)),
+          isNotValue: function (a) {return (a == action && this.value !== ''); }
         };
 
+        
+        
         if (test.testBold | test.testItalic | test.testUnderline | test.testOrderedList | test.testLink | test.testQuote) {
           if (test.testBold) editor.removeBold();
           if (test.testItalic) editor.removeItalic();
@@ -60,6 +87,8 @@ $(document).ready(function() {
           if (test.testLink) editor.removeLink();
           if (test.testOrderedList) editor.removeList();
           if (test.testQuote) editor.decreaseQuoteLevel();
+        } else if (test.isNotValue('makeLink') | test.isNotValue('insertImage') | test.isNotValue('selectFont')) {
+          // do nothing
         } else {
           editor[$(this).data('action')]();
         }