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

Update: Bold, Underline,Italics, Lists, Quotes Undo & Redo working

Browse source
This commit is contained in:
Matthew Borden 2014-07-09 13:51:03 +10:00
parent 539e880e01
commit 3f0bf902fd
2 changed files with 71 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
ui/Squire-UI.html
View file

@ -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>

123
ui/Squire-UI.js
View file

@ -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;
};
});