From c63ab9c74b3d1c6b839228c28d00d803fc5074c5 Mon Sep 17 00:00:00 2001
From: Matthew Borden <borden0108@gmail.com>
Date: Tue, 8 Jul 2014 11:21:18 +1000
Subject: [PATCH] Update: Loading now works in Chrome

---
 Demo.html           |  2 +-
 build/Squire-UI.css |  4 +++-
 ui/Squire-UI.css    |  5 ++++-
 ui/Squire-UI.html   | 12 ++++++------
 ui/Squire-UI.js     | 16 +++++++++-------
 5 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/Demo.html b/Demo.html
index 3194032..7d95307 100644
--- a/Demo.html
+++ b/Demo.html
@@ -10,7 +10,7 @@
     <script src="build/Squire-UI.js" type="text/javascript"></script>
     <script>
     window.addEventListener('load', function () {
-      var editor = new SquireUI({div: '#editor'});
+      var editor = new SquireUI({replace: 'textarea#foo'});
     });
     </script>
 </head>
diff --git a/build/Squire-UI.css b/build/Squire-UI.css
index f2704d3..e2a5f7e 100644
--- a/build/Squire-UI.css
+++ b/build/Squire-UI.css
@@ -6,6 +6,9 @@ body {
     font: 400 14px/1.24 helvetica, arial, sans-serif;
     text-shadow: 0 1px 0 white;
   }
+iframe {
+    width:100%;
+}
   
 .menu .item {
     color:#000;
@@ -31,7 +34,6 @@ body {
 }
 
 .menu {
-    text-align:center;
     -webkit-touch-callout:none;
     -webkit-user-select:none;
     -khtml-user-select:none;
diff --git a/ui/Squire-UI.css b/ui/Squire-UI.css
index f2704d3..5a3eda9 100644
--- a/ui/Squire-UI.css
+++ b/ui/Squire-UI.css
@@ -7,6 +7,10 @@ body {
     text-shadow: 0 1px 0 white;
   }
   
+iframe {
+    width:100%;
+}
+  
 .menu .item {
     color:#000;
     float:left;
@@ -31,7 +35,6 @@ body {
 }
 
 .menu {
-    text-align:center;
     -webkit-touch-callout:none;
     -webkit-user-select:none;
     -khtml-user-select:none;
diff --git a/ui/Squire-UI.html b/ui/Squire-UI.html
index 5385e26..4ced264 100644
--- a/ui/Squire-UI.html
+++ b/ui/Squire-UI.html
@@ -1,16 +1,16 @@
 <div class="menu" contenteditable="false">
     <div class="group">
-        <div class="item"><i class="fa fa-bold"></i></div>
-        <div class="item"><i class="fa fa-italic"></i></div>
-        <div class="item"><i class="fa fa-underline"></i></div>
+        <div class="item"><i data-action="bold" data-value="" class="fa fa-bold"></i></div>
+        <div class="item"><i data-action="italic" data-value="" class="fa fa-italic"></i></div>
+        <div class="item"><i data-action="underline" data-value="" class="fa fa-underline"></i></div>
         <div id="font" class="item">
-            <i class="fa fa-font"></i>
+            <i data-action="bold" data-value="" class="fa fa-font"></i>
         </div>
     </div>
     <div class="group">
         <div class="item"><i class="fa fa-link"></i></div>
-        <div class="item"><i class="fa fa-quote-right"></i></div>
-        <div class="item"><i class="fa fa-list"></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 class="item">
             <i class="fa fa-picture-o"></i>
         </div>
diff --git a/ui/Squire-UI.js b/ui/Squire-UI.js
index 0dd813f..a68aaf4 100644
--- a/ui/Squire-UI.js
+++ b/ui/Squire-UI.js
@@ -222,7 +222,7 @@ LazyLoad = (function (doc) {
 	
 SquireUI = function(options) {
       // Create instance of iFrame
-      var container;
+      var container, editor;
 
       if (options.replace) {
           container = $(options.replace).parent();
@@ -236,14 +236,16 @@ SquireUI = function(options) {
 
       var iframe  = document.createElement('iframe');
       var div     = document.createElement('div');
-      $(div).load(buildPath + 'Squire-UI.html').appendTo(element);
+      $(div).load(buildPath + 'Squire-UI.html');
       
-      var editorDocument = editorContainer[0].contentWindow.document;
-      var editor = new Squire(editorDocument);
+      $(container).append(div);
+      $(container).append(iframe);
+      
+      editor = new Squire ($(container).children('iframe').first()[0].contentWindow.document);
 
-      $('.squire-ui-button').click(function () {
-        var instance = $(this).parent.child('iframe')[0];
-        eval('instance.contentWindow.document.' + $(this).data('action') + '(' +  $(this).data('action') + ')') 
+      $('i').click(function () {
+        var instance = $(this).parent().children('iframe').first();
+        console.log(instance);
       });
 
       return editor;