From 3f0bf902fd02d730789185c56ac03cd3c930c569 Mon Sep 17 00:00:00 2001
From: Matthew Borden <borden0108@gmail.com>
Date: Wed, 9 Jul 2014 13:51:03 +1000
Subject: [PATCH] Update: Bold, Underline,Italics, Lists, Quotes Undo & Redo
 working

---
 ui/Squire-UI.html |  11 ++---
 ui/Squire-UI.js   | 123 +++++++++++++++++++++++++---------------------
 2 files changed, 71 insertions(+), 63 deletions(-)

diff --git a/ui/Squire-UI.html b/ui/Squire-UI.html
index 7a29cdc..9392b35 100644
--- a/ui/Squire-UI.html
+++ b/ui/Squire-UI.html
@@ -8,17 +8,14 @@
         </div>
     </div>
     <div class="group">
-        <div data-action="link" data-value=""class="item"><i class="fa fa-link"></i></div>
-        <div data-action="quote" data-value="" class="item"><i class="fa fa-quote-right"></i></div>
-        <div data-action="list" data-value="" class="item"><i class="fa fa-list"></i></div>
+        <div 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">
             <i class="fa fa-picture-o"></i>
         </div>
+        <div data-action="increaseQuoteLevel" data-value="" class="item"><i class="fa fa-quote-right"></i></div>
     </div>
-    <div class="group">
-        <div data-action="link" data-value=""class="item"><i class="fa fa-link"></i></div>
-        <div data-action="quote" data-value="" class="item"><i class="fa fa-quote-right"></i></div>
-    </div>
+    
     <div class="group">
         <div data-action="undo" data-value="" class="item"><i class="fa fa-undo"></i></div>
         <div data-action="redo" data-value="" class="item"><i class="fa fa-undo flip"></i></div>
diff --git a/ui/Squire-UI.js b/ui/Squire-UI.js
index 216ce94..ea9fda7 100644
--- a/ui/Squire-UI.js
+++ b/ui/Squire-UI.js
@@ -1,65 +1,76 @@
 if (typeof buildPath == "undefined") {
-        buildPath = 'build/';
+  buildPath = 'build/';
 }
 
 function buildPathConCat(value) {
-    return buildPath + value;
+  return buildPath + value;
 }
-
-
-$(document).ready(function () {
-
-    SquireUI = function(options) {
-        // Create instance of iFrame
-        var container, editor;
+$(document).ready(function() {
+  Squire.prototype.testPresenceinSelection = function(name, action, format,
+    validation) {
+    var path = this.getPath(),
+      test = (validation.test(path) | this.hasFormat(format));
+    if (name == action && test) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+  SquireUI = function(options) {
+    // Create instance of iFrame
+    var container, editor;
+    if (options.replace) {
+      container = $(options.replace).parent();
+      $(options.replace).remove();
+    } else if (options.div) {
+      container = $(options.div);
+    } else {
+      throw new Error(
+        "No element was defined for the editor to inject to.");
+    }
+    var iframe = document.createElement('iframe');
+    var div = document.createElement('div');
+    div.className = 'Squire-UI';
+    $(div).load(buildPath + 'Squire-UI.html', function() {
+      $('.item').click(function() {
+        var iframe = $(this).parents('.Squire-UI').next('iframe').first()[0];
+        var editor = iframe.contentWindow.editor;
+        var action = $(this).data('action');
         
-        if (options.replace) {
-            container = $(options.replace).parent();
-            $(options.replace).remove();
-        } else if (options.div) {
-            container = $(options.div);
+        test = {
+          testBold: editor.testPresenceinSelection('bold',
+            action, 'B', (/>B\b/)),
+          testItalic: editor.testPresenceinSelection('italic',
+            action, 'I', (/>I\b/)),
+          testUnderline: editor.testPresenceinSelection(
+            'underline', action, 'U', (/>U\b/)),
+          testOrderedList: editor.testPresenceinSelection(
+            'makeOrderedList', action, 'OL', (/>OL\b/)),
+          testLink: editor.testPresenceinSelection('makeLink',
+            action, 'A', (/>A\b/)),
+          testQuote: editor.testPresenceinSelection(
+            'increaseQuoteLevel', action, 'blockquote', (
+              />blockquote\b/))
+        };
+        
+        if (test.testBold | test.testItalic | test.testUnderline | test.testOrderedList | test.testLink | test.testQuote) {
+          if (test.testBold) editor.removeBold();
+          if (test.testItalic) editor.removeItalic();
+          if (test.testUnderline) editor.removeUnderline();
+          if (test.testLink) editor.removeLink();
+          if (test.testOrderedList) editor.removeList();
+          if (test.testQuote) editor.decreaseQuoteLevel();
         } else {
-            throw new Error(
-                "No element was defined for the editor to inject to."
-            );
+          editor[$(this).data('action')]();
         }
-        var iframe = document.createElement('iframe');
-        var div = document.createElement('div');
-        div.className = 'Squire-UI';
-        
-        $(div).load(buildPath + 'Squire-UI.html', function() {
-			$('.item').click(function() {
-				var me		= $(this);
-				var s       = SquireUI;
-				var iFrame 	= me.parents('.Squire-UI').next('iframe').first()[0];
-				var editor 	= iFrame.contentWindow.editor;
-				var test 	= (me.data('action') == ('bold' | 'italic' | 'underline' | 'link'));
- 				//create a helper function to deal with the whole problem in a very small way.
-				if (test && s.isBold(editor)) { editor.removeBold() };
-				me.data('action') == 'italic' && s.isItalic(editor)) editor.removeItalic();
-				me.data('action') == 'underline' && s.isUnderlined(editor)) editor.removeUnderline();
-				me.data('action') == 'link' && s.isLink(editor)) editor.removeLink();
-				
-				editor[me.data('action')](me.data('value'));
-			});
-		});
-
-        $(container).append(div);
-        $(container).append(iframe);
-        
-        iframe.addEventListener('load', function () {
-            iframe.contentWindow.editor = new Squire(iframe.contentWindow.document);
-        });
-
-        return iframe.contentWindow.editor;
-    };
-
-    SquireUI.isBold			= function (editor) { return (this.isPresent( 'B', ( />B\b/ ), editor )); };
-    SquireUI.isItalic		= function (editor) { return (isPresent( 'I', ( />I\b/ ), editor )); };
-    SquireUI.isUnderlined	= function (editor) { return (isPresent( 'U', ( />U\b/ ), editor)); };
-    SquireUI.isLink			= function (editor) { return (isPresent( 'A', ( />A\b/ ), editor )); };
-    SquireUI.isPresent		= function (format, validation, editor) {
-        var path = editor.getPath();
-		return validation.test(path) | editor.hasFormat(format);
-    };
+      });
+    });
+    $(container).append(div);
+    $(container).append(iframe);
+    iframe.contentWindow.editor = new Squire(iframe.contentWindow.document);
+    iframe.contentWindow.editor.setHTML(
+      "<div><b>Bold</b><br></div><div><i>Italics</i><br></div><div><u>Underline</u><br></div><ol><li><div>List<br></div></li><li><div>List<br></div></li><li><div>List<br></div></li></ol><blockquote>Quote<br></blockquote><div><br></div><div>Heading 1<br></div><div>Heading 2<br></div><div>Image<br></div><div>Link</div><div><br></div>"
+    );
+    return iframe.contentWindow.editor;
+  };
 });
\ No newline at end of file