mirror of
https://github.com/fastmail/Squire.git
synced 2025-01-03 05:00:13 -05:00
Added font selection, working on text size
This commit is contained in:
Matthew Borden
parent
d06a3831b7
commit
d9612277fc
5 changed files with 46 additions and 30 deletions
|
|
@ -11,7 +11,7 @@
|
|||
<script src="build/Squire-UI.js" type="text/javascript"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
UI = new SquireUI({replace: 'textarea#foo', height: 200});
|
||||
UI = new SquireUI({replace: 'textarea#foo', height: 700});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ body {
|
|||
position: relative;
|
||||
margin: 0 auto;
|
||||
padding: 50px;
|
||||
width: 540px;
|
||||
width: 70%;
|
||||
font: 400 14px/1.24 helvetica, arial, sans-serif;
|
||||
text-shadow: 0 1px 0 white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ body {
|
|||
position: relative;
|
||||
margin: 0 auto;
|
||||
padding: 50px;
|
||||
width: 540px;
|
||||
width: 70%;
|
||||
font: 400 14px/1.24 helvetica, arial, sans-serif;
|
||||
text-shadow: 0 1px 0 white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,12 @@
|
|||
<div data-action="increaseQuoteLevel" class="item"><i class="fa fa-quote-right"></i></div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div data-action="makeOrderedList" class="item"><i class="fa fa-list"></i></div>
|
||||
<div data-action="makeOrderedList" class="item"><i class="fa fa-list"></i></div>
|
||||
<div data-action="makeOrderedList" class="item"><i class="fa fa-list"></i></div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div data-action="undo" class="item"><i class="fa fa-undo"></i></div>
|
||||
<div data-action="redo" class="item"><i class="fa fa-undo flip"></i></div>
|
||||
|
|
@ -23,21 +29,22 @@
|
|||
</div>
|
||||
<div class="templates hidden">
|
||||
<div id="drop-font">
|
||||
<strong>Insert Link</strong>
|
||||
<strong>Change Font</strong>
|
||||
<i class="fa fa-chevron-up quit"></i><br>
|
||||
Text Size: <input type="number" min="12" max="72" step="6" value="12" name="font-size">
|
||||
Text Size: <input id="textSelector" type="text" min="12" max="72" step="6" placeholder="12" name="font-size">
|
||||
<br>
|
||||
Font:
|
||||
<select>
|
||||
<option data-fonts="georgia, serif">Georgia</option>
|
||||
<option data-fonts="arial, sans-serif">Arial</option>
|
||||
<option data-fonts="helvetica, arial, sans-serif">Helvetica</option>
|
||||
<select id="fontSelect">
|
||||
<option data-fonts="georgia">Georgia</option>
|
||||
<option data-fonts="arial">Arial</option>
|
||||
<option data-fonts="helvetica, arial">Helvetica</option>
|
||||
<option data-fonts="menlo, consolas, courier new, monospace">Monospace</option>
|
||||
<option data-fonts="\"Times New Roman\", times, serif">Times New Roman</option>
|
||||
<option data-fonts="\"Times New Roman\", times">Times New Roman</option>
|
||||
<option data-fonts="tahoma, sans-serif">Tahoma</option>
|
||||
<option data-fonts="\"Trebuchet MS\", sans-serif ">Trebuchet MS</option>
|
||||
<option data-fonts="verdana, sans-serif">Verdana</option>
|
||||
<option data-fonts="\"Trebuchet MS\"">Trebuchet MS</option>
|
||||
<option data-fonts="verdana">Verdana</option>
|
||||
</select>
|
||||
<div class="btn submitFont">Apply</div>
|
||||
</div>
|
||||
<div id="drop-link">
|
||||
<strong>Insert Link</strong>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,3 @@
|
|||
if (typeof buildPath == "undefined") {
|
||||
buildPath = 'build/';
|
||||
}
|
||||
|
||||
function buildPathConCat(value) {
|
||||
return buildPath + value;
|
||||
}
|
||||
$(document).ready(function() {
|
||||
Squire.prototype.testPresenceinSelection = function(name, action, format,
|
||||
validation) {
|
||||
|
|
@ -17,6 +10,9 @@ $(document).ready(function() {
|
|||
}
|
||||
};
|
||||
SquireUI = function(options) {
|
||||
if (typeof options.buildPath == "undefined") {
|
||||
options.buildPath = 'build/';
|
||||
}
|
||||
// Create instance of iFrame
|
||||
var container, editor;
|
||||
if (options.replace) {
|
||||
|
|
@ -33,8 +29,7 @@ $(document).ready(function() {
|
|||
div.className = 'Squire-UI';
|
||||
iframe.height = options.height;
|
||||
|
||||
|
||||
$(div).load(buildPath + 'Squire-UI.html', function() {
|
||||
$(div).load(options.buildPath + 'Squire-UI.html', function() {
|
||||
this.linkDrop = new Drop({
|
||||
target: $('#makeLink').first()[0],
|
||||
content: $('#drop-link').html(),
|
||||
|
|
@ -48,7 +43,7 @@ $(document).ready(function() {
|
|||
});
|
||||
|
||||
$('.submitLink').click(function () {
|
||||
editor = iframe.contentWindow.editor;
|
||||
var editor = iframe.contentWindow.editor;
|
||||
editor.makeLink($(this).parent().children('#url').first().val());
|
||||
$(this).parent().parent().removeClass('drop-open');
|
||||
$(this).parent().children('#url').attr('value', '');
|
||||
|
|
@ -69,7 +64,7 @@ $(document).ready(function() {
|
|||
|
||||
$('.sumbitImageURL').unbind().click(function () {
|
||||
console.log("Passed through .sumbitImageURL");
|
||||
editor = iframe.contentWindow.editor;
|
||||
var editor = iframe.contentWindow.editor;
|
||||
url = $(this).parent().children('#imageUrl').first()[0];
|
||||
editor.insertImage(url.value);
|
||||
$(this).parent().parent().removeClass('drop-open');
|
||||
|
|
@ -86,13 +81,20 @@ $(document).ready(function() {
|
|||
});
|
||||
|
||||
this.fontDrop.on('open', function () {
|
||||
$('.quit').unbind().click(function () {
|
||||
$('.quit').click(function () {
|
||||
$(this).parent().parent().removeClass('drop-open');
|
||||
});
|
||||
|
||||
$('.sumbitImageURL').unbind().click(function () {
|
||||
|
||||
$('.submitFont').unbind().click(function () {
|
||||
var editor = iframe.contentWindow.editor;
|
||||
var selectedFonts = $('select#fontSelect option:selected').last().data('fonts');
|
||||
var fontSize = $('input#textSelector').val();
|
||||
editor.setFontFace(selectedFonts);
|
||||
editor.setFontSize(fontSize);
|
||||
$(this).parent().parent().removeClass('drop-open');
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
$('.item').click(function() {
|
||||
|
|
@ -130,18 +132,25 @@ $(document).ready(function() {
|
|||
} else if (test.isNotValue('makeLink') | test.isNotValue('insertImage') | test.isNotValue('selectFont')) {
|
||||
// do nothing these are dropdowns.
|
||||
} else {
|
||||
if (editor.getSelectedText() === '' && (action == 'insertImage' || action == 'makeOrderedList' || action == 'increaseQuoteLevel') == false) return;
|
||||
if (editor.getSelectedText() === '' && !(action == 'insertImage' || action == 'makeOrderedList' || action == 'increaseQuoteLevel' || action == 'redo' || action == 'undo')) return;
|
||||
editor[action]();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(container).append(div);
|
||||
$(container).append(iframe);
|
||||
|
||||
var style = document.createElement('style');
|
||||
style.innerHTML = 'blockquote { border-left: 3px green solid; padding-left: 5px; }';
|
||||
|
||||
|
||||
iframe.contentWindow.editor = new Squire(iframe.contentWindow.document);
|
||||
iframe.addEventListener('load', function() {
|
||||
iframe.contentWindow.editor = new Squire(iframe.contentWindow.document);
|
||||
});
|
||||
|
||||
iframe.contentWindow.document.head.appendChild(style);
|
||||
return iframe.contentWindow.editor;
|
||||
};
|
||||
});
|
||||
Loading…
Reference in a new issue