mirror of
https://github.com/fastmail/Squire.git
synced 2024-12-22 15:23:29 -05:00
Update: Bold, Underline,Italics, Lists, Quotes Undo & Redo working
This commit is contained in:
Matthew Borden
parent
539e880e01
commit
3f0bf902fd
2 changed files with 71 additions and 63 deletions
|
|
@ -8,17 +8,14 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<div data-action="link" data-value=""class="item"><i class="fa fa-link"></i></div>
|
<div data-action="makeLink" 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="makeOrderedList" data-value="" 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 data-action="image" data-value="" class="item">
|
<div data-action="image" 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>
|
</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 class="group">
|
||||||
<div data-action="undo" data-value="" class="item"><i class="fa fa-undo"></i></div>
|
<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>
|
<div data-action="redo" data-value="" class="item"><i class="fa fa-undo flip"></i></div>
|
||||||
|
|
|
||||||
123
ui/Squire-UI.js
123
ui/Squire-UI.js
|
|
@ -1,65 +1,76 @@
|
||||||
if (typeof buildPath == "undefined") {
|
if (typeof buildPath == "undefined") {
|
||||||
buildPath = 'build/';
|
buildPath = 'build/';
|
||||||
}
|
}
|
||||||
|
|
||||||
function buildPathConCat(value) {
|
function buildPathConCat(value) {
|
||||||
return buildPath + value;
|
return buildPath + value;
|
||||||
}
|
}
|
||||||
|
$(document).ready(function() {
|
||||||
|
Squire.prototype.testPresenceinSelection = function(name, action, format,
|
||||||
$(document).ready(function () {
|
validation) {
|
||||||
|
var path = this.getPath(),
|
||||||
SquireUI = function(options) {
|
test = (validation.test(path) | this.hasFormat(format));
|
||||||
// Create instance of iFrame
|
if (name == action && test) {
|
||||||
var container, editor;
|
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) {
|
test = {
|
||||||
container = $(options.replace).parent();
|
testBold: editor.testPresenceinSelection('bold',
|
||||||
$(options.replace).remove();
|
action, 'B', (/>B\b/)),
|
||||||
} else if (options.div) {
|
testItalic: editor.testPresenceinSelection('italic',
|
||||||
container = $(options.div);
|
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 {
|
} else {
|
||||||
throw new Error(
|
editor[$(this).data('action')]();
|
||||||
"No element was defined for the editor to inject to."
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
var iframe = document.createElement('iframe');
|
});
|
||||||
var div = document.createElement('div');
|
});
|
||||||
div.className = 'Squire-UI';
|
$(container).append(div);
|
||||||
|
$(container).append(iframe);
|
||||||
$(div).load(buildPath + 'Squire-UI.html', function() {
|
iframe.contentWindow.editor = new Squire(iframe.contentWindow.document);
|
||||||
$('.item').click(function() {
|
iframe.contentWindow.editor.setHTML(
|
||||||
var me = $(this);
|
"<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>"
|
||||||
var s = SquireUI;
|
);
|
||||||
var iFrame = me.parents('.Squire-UI').next('iframe').first()[0];
|
return iframe.contentWindow.editor;
|
||||||
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);
|
|
||||||
};
|
|
||||||
});
|
});
|
||||||
Loading…
Reference in a new issue