Korbs/Squire
0
Fork 0
mirror of https://github.com/fastmail/Squire.git synced 2025-01-08 16:00:06 -05:00
Code Issues Activity

Update: Loading now works in Chrome

Browse source
This commit is contained in:
Matthew Borden 2014-07-08 11:21:18 +10:00
parent 99ae3eac96
commit c63ab9c74b
5 changed files with 23 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Demo.html
View file

@ -10,7 +10,7 @@
<script src="build/Squire-UI.js" type="text/javascript"></script> <script src="build/Squire-UI.js" type="text/javascript"></script>
<script> <script>
window.addEventListener('load', function () { window.addEventListener('load', function () {
var editor = new SquireUI({div: '#editor'}); var editor = new SquireUI({replace: 'textarea#foo'});
}); });
</script> </script>
</head> </head>

4
build/Squire-UI.css
View file

@ -6,6 +6,9 @@ body {
font: 400 14px/1.24 helvetica, arial, sans-serif; font: 400 14px/1.24 helvetica, arial, sans-serif;
text-shadow: 0 1px 0 white; text-shadow: 0 1px 0 white;
} }
iframe {
width:100%;
}
.menu .item { .menu .item {
color:#000; color:#000;
@ -31,7 +34,6 @@ body {
} }
.menu { .menu {
text-align:center;
-webkit-touch-callout:none; -webkit-touch-callout:none;
-webkit-user-select:none; -webkit-user-select:none;
-khtml-user-select:none; -khtml-user-select:none;

5
ui/Squire-UI.css
View file

@ -7,6 +7,10 @@ body {
text-shadow: 0 1px 0 white; text-shadow: 0 1px 0 white;
} }
iframe {
width:100%;
}
.menu .item { .menu .item {
color:#000; color:#000;
float:left; float:left;
@ -31,7 +35,6 @@ body {
} }
.menu { .menu {
text-align:center;
-webkit-touch-callout:none; -webkit-touch-callout:none;
-webkit-user-select:none; -webkit-user-select:none;
-khtml-user-select:none; -khtml-user-select:none;

12
ui/Squire-UI.html
View file

@ -1,16 +1,16 @@
<div class="menu" contenteditable="false"> <div class="menu" contenteditable="false">
<div class="group"> <div class="group">
<div class="item"><i class="fa fa-bold"></i></div> <div class="item"><i data-action="bold" data-value="" class="fa fa-bold"></i></div>
<div class="item"><i class="fa fa-italic"></i></div> <div class="item"><i data-action="italic" data-value="" class="fa fa-italic"></i></div>
<div class="item"><i class="fa fa-underline"></i></div> <div class="item"><i data-action="underline" data-value="" class="fa fa-underline"></i></div>
<div id="font" class="item"> <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> </div>
<div class="group"> <div class="group">
<div class="item"><i class="fa fa-link"></i></div> <div class="item"><i class="fa fa-link"></i></div>
<div class="item"><i class="fa fa-quote-right"></i></div> <div data-action="quote" data-value="" class="item"><i class="fa fa-quote-right"></i></div>
<div class="item"><i class="fa fa-list"></i></div> <div data-action="list" data-value="" class="item"><i class="fa fa-list"></i></div>
<div class="item"> <div class="item">
<i class="fa fa-picture-o"></i> <i class="fa fa-picture-o"></i>
</div> </div>

16
ui/Squire-UI.js
View file

@ -222,7 +222,7 @@ LazyLoad = (function (doc) {
SquireUI = function(options) { SquireUI = function(options) {
// Create instance of iFrame // Create instance of iFrame
var container; var container, editor;
if (options.replace) { if (options.replace) {
container = $(options.replace).parent(); container = $(options.replace).parent();
@ -236,14 +236,16 @@ SquireUI = function(options) {
var iframe = document.createElement('iframe'); var iframe = document.createElement('iframe');
var div = document.createElement('div'); 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; $(container).append(div);
var editor = new Squire(editorDocument); $(container).append(iframe);
editor = new Squire ($(container).children('iframe').first()[0].contentWindow.document);
$('.squire-ui-button').click(function () { $('i').click(function () {
var instance = $(this).parent.child('iframe')[0]; var instance = $(this).parent().children('iframe').first();
eval('instance.contentWindow.document.' + $(this).data('action') + '(' + $(this).data('action') + ')') console.log(instance);
}); });
return editor; return editor;