From fa6868e4af204ce96224ff8fadee68b68f21a941 Mon Sep 17 00:00:00 2001 From: Matthew Borden Date: Thu, 10 Jul 2014 08:27:59 +1000 Subject: [PATCH] Working: Images --- build/Squire-UI.css | 33 +++++++++++++++++++++++++++++++++ ui/Squire-UI.css | 33 +++++++++++++++++++++++++++++++++ ui/Squire-UI.html | 12 ++++++++++++ ui/Squire-UI.js | 32 ++++++++++++++++++++++++++++---- 4 files changed, 106 insertions(+), 4 deletions(-) diff --git a/build/Squire-UI.css b/build/Squire-UI.css index aa554b1..bd6af5c 100644 --- a/build/Squire-UI.css +++ b/build/Squire-UI.css @@ -46,7 +46,39 @@ iframe { transform:rotateY(180deg) } +.btn { + background: #516066; + display: block; + position: relative; + padding: 10px 15px; + margin-top: 10px; + text-transform: uppercase; + font-size: 11px; + font-weight: 500; + color: #fff; + text-align: center; + overflow: hidden; + letter-spacing: 1px; + border-radius: 4px; +} +input[type=text] { + background-color: #fff; + vertical-align: middle; + max-width: 100%; + border: 1px solid #a8afb2; + border-color: #a8afb2 #d4d7d9 #d4d7d9; + color: #516066; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: border linear 150ms; + -moz-transition: border linear 150ms; + -o-transition: border linear 150ms; + transition: border linear 150ms; + font-size: 14px; + padding: 5px; + width: 100%; +} .menu .group .item:hover, .menu .item:first-child:hover { border-left: 3px #55ACEE solid; @@ -74,6 +106,7 @@ iframe { float: right; top:0; right:0; + margin-bottom: 5px; } .drop-element, .drop-element:after, .drop-element:before, .drop-element *, .drop-element *:after, .drop-element *:before { diff --git a/ui/Squire-UI.css b/ui/Squire-UI.css index ede8a11..cf07eb6 100644 --- a/ui/Squire-UI.css +++ b/ui/Squire-UI.css @@ -46,7 +46,39 @@ iframe { transform:rotateY(180deg) } +.btn { + background: #516066; + display: block; + position: relative; + padding: 10px 15px; + margin-top: 10px; + text-transform: uppercase; + font-size: 11px; + font-weight: 500; + color: #fff; + text-align: center; + overflow: hidden; + letter-spacing: 1px; + border-radius: 4px; +} +input[type=text] { + background-color: #fff; + vertical-align: middle; + max-width: 100%; + border: 1px solid #a8afb2; + border-color: #a8afb2 #d4d7d9 #d4d7d9; + color: #516066; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: border linear 150ms; + -moz-transition: border linear 150ms; + -o-transition: border linear 150ms; + transition: border linear 150ms; + font-size: 14px; + padding: 5px; + width: 100%; +} .menu .group .item:hover, .menu .item:first-child:hover { border-left: 3px #55ACEE solid; @@ -74,6 +106,7 @@ iframe { float: right; top:0; right:0; + margin-bottom: 5px; } \ No newline at end of file diff --git a/ui/Squire-UI.html b/ui/Squire-UI.html index ee2f770..8a1cf96 100644 --- a/ui/Squire-UI.html +++ b/ui/Squire-UI.html @@ -28,4 +28,16 @@
Font: + +
+ + + +
Insert
+
diff --git a/ui/Squire-UI.js b/ui/Squire-UI.js index e62c010..a824445 100644 --- a/ui/Squire-UI.js +++ b/ui/Squire-UI.js @@ -37,19 +37,36 @@ $(document).ready(function() { element.drop = new Drop({ target: element, content: content, - position: 'bottom left', + position: 'bottom center', openOn: 'click' }); + element.drop.iframe = iframe; + element.drop.on('open', function () { $('.quit').click(function () { $(this).parent().parent().removeClass('drop-open'); }); + _iframe = this.iframe; + + $('.sumbitImageURL').click(function () { + editor = _iframe.contentWindow.editor; + url = $(this).parent().children('#imageUrl').first()[0]; + editor.insertImage(url.value); + $(this).parent().parent().removeClass('drop-open'); + }); + + $('.sumbitLink').click(function () { + editor = _iframe.contentWindow.editor; + url = $(this).parent().children('#url').first()[0]; + editor.makeLink(url.value); + $(this).parent().parent().removeClass('drop-open'); + }); }); } - createDrop($('#makeLink').first()[0], "Hello World"); - createDrop($('#insertImage').first()[0], "Hello World"); + createDrop($('#makeLink').first()[0], $('#drop-link').first().html()); + createDrop($('#insertImage').first()[0], $('#drop-image').first().html()); createDrop($('#selectFont').first()[0], $('#drop-font').first().html()); @@ -88,7 +105,7 @@ $(document).ready(function() { if (test.testOrderedList) editor.removeList(); if (test.testQuote) editor.decreaseQuoteLevel(); } else if (test.isNotValue('makeLink') | test.isNotValue('insertImage') | test.isNotValue('selectFont')) { - // do nothing + // do nothing these are dropdowns. } else { editor[$(this).data('action')](); } @@ -100,6 +117,13 @@ $(document).ready(function() { iframe.contentWindow.editor.setHTML( "
Bold
Italics
Underline
  1. List
  2. List
  3. List
Quote

Heading 1
Heading 2
Image
Link

" ); + iframe.addEventListener('load', function() { + iframe.contentWindow.editor = new Squire(iframe.contentWindow.document); + iframe.contentWindow.editor.setHTML( + "
Bold
Italics
Underline
  1. List
  2. List
  3. List
Quote

Heading 1
Heading 2
Image
Link

" + ); + }); + return iframe.contentWindow.editor; }; }); \ No newline at end of file