Korbs/Squire
0
Fork 0
mirror of https://github.com/fastmail/Squire.git synced 2024-12-22 15:23:29 -05:00
Code Issues Activity

Functional stuff working a little better

Browse source
This commit is contained in:
Matthew Borden 2014-07-09 15:15:32 +10:00
parent 3f0bf902fd
commit cac68fb551
2 changed files with 34 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ui/Squire-UI.html
View file

@ -3,14 +3,14 @@
<div data-action="bold" data-value="" class="item"><i class="fa fa-bold"></i></div> <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="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="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> <i class="fa fa-font"></i>
</div> </div>
</div> </div>
<div class="group"> <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="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> <i class="fa fa-picture-o"></i>
</div> </div>
<div data-action="increaseQuoteLevel" data-value="" class="item"><i class="fa fa-quote-right"></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> </div>
<div class="templates hidden"> <div class="templates hidden">
<div class="drop-font"> <div id="drop-font">
<i class="fa fa-chevron-up quit"></i> <i class="fa fa-chevron-up quit"></i>
Text Size: <input type="number" min="12" max="72" step="6" value="12" name="font-size"> Text Size: <input type="number" min="12" max="72" step="6" value="12" name="font-size">
<br> <br>

31
ui/Squire-UI.js
View file

@ -32,12 +32,36 @@ $(document).ready(function() {
var div = document.createElement('div'); var div = document.createElement('div');
div.className = 'Squire-UI'; div.className = 'Squire-UI';
$(div).load(buildPath + 'Squire-UI.html', function() { $(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() { $('.item').click(function() {
var iframe = $(this).parents('.Squire-UI').next('iframe').first()[0]; var iframe = $(this).parents('.Squire-UI').next('iframe').first()[0];
var editor = iframe.contentWindow.editor; var editor = iframe.contentWindow.editor;
var action = $(this).data('action'); var action = $(this).data('action');
if (editor.getSelectedText() === '' && action != 'insertImage') return 0;
test = { test = {
value: $(this).data('action'),
testBold: editor.testPresenceinSelection('bold', testBold: editor.testPresenceinSelection('bold',
action, 'B', (/>B\b/)), action, 'B', (/>B\b/)),
testItalic: editor.testPresenceinSelection('italic', testItalic: editor.testPresenceinSelection('italic',
@ -50,8 +74,11 @@ $(document).ready(function() {
action, 'A', (/>A\b/)), action, 'A', (/>A\b/)),
testQuote: editor.testPresenceinSelection( testQuote: editor.testPresenceinSelection(
'increaseQuoteLevel', action, 'blockquote', ( '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 | test.testItalic | test.testUnderline | test.testOrderedList | test.testLink | test.testQuote) {
if (test.testBold) editor.removeBold(); if (test.testBold) editor.removeBold();
@ -60,6 +87,8 @@ $(document).ready(function() {
if (test.testLink) editor.removeLink(); if (test.testLink) editor.removeLink();
if (test.testOrderedList) editor.removeList(); if (test.testOrderedList) editor.removeList();
if (test.testQuote) editor.decreaseQuoteLevel(); if (test.testQuote) editor.decreaseQuoteLevel();
} else if (test.isNotValue('makeLink') | test.isNotValue('insertImage') | test.isNotValue('selectFont')) {
// do nothing
} else { } else {
editor[$(this).data('action')](); editor[$(this).data('action')]();
} }