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

Working: on getting text selection to work

Browse source
This commit is contained in:
Matthew Borden 2014-07-08 20:42:00 +10:00
parent 632dd68a2f
commit 8479a7e1c7
2 changed files with 72 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
ui/Squire-UI.html
View file

@ -1,30 +1,51 @@
<div class="menu" contenteditable="false"> <div class="menu" contenteditable="false">
<div class="group"> <div class="group">
<div data-action="bold" data-value="" class="item"><i class="fa fa-bold"></i></div> <div class="item fa fa-bold" data-action="bold" data-value="" style=
<div data-action="italic" data-value="" class="item"><i class="fa fa-italic"></i></div> "font-style: italic"></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 class="item fa fa-italic" data-action="italic" data-value="" style=
<i class="fa fa-font"></i> "font-style: italic"></div>
</div>
<div class="item fa fa-underline" data-action="underline" data-value=""
style="font-style: italic"></div>
<div class="item fa fa-font" data-action="" data-value="" id="font"
style="font-style: italic"></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 class="item fa fa-link" data-action="link" data-value="" style=
<div data-action="quote" data-value="" class="item"><i class="fa fa-quote-right"></i></div> "font-style: italic"></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 class="item fa fa-quote-right" data-action="quote" data-value=""
<i class="fa fa-picture-o"></i> style="font-style: italic"></div>
</div>
<div class="item fa fa-list" data-action="list" data-value="" style=
"font-style: italic"></div>
<div class="item fa fa-picture-o" data-action="image" data-value=""
style="font-style: italic"></div>
</div> </div>
<div class="group"> <div class="group">
<div data-action="undo" data-value="" class="item"><i class="fa fa-undo"></i></div> <div class="item fa fa-link" data-action="link" data-value="" style=
<div data-action="redo" data-value="" class="item"><i class="fa fa-undo flip"></i></div> "font-style: italic"></div>
<div class="item fa fa-quote-right" data-action="quote" data-value=""
style="font-style: italic"></div>
</div> </div>
</div>
<div class="templates hidden"> <div class="group">
<div class="drop-font"> <div class="item fa fa-undo" data-action="undo" data-value="" style=
<i class="fa fa-chevron-up quit"></i> "font-style: italic"></div>
Text Size: <input type="number" min="12" max="72" step="6" value="12" name="font-size">
<br> <div class="item fa fa-undo flip" data-action="redo" data-value="" style=
Font: <input type="text"> "font-style: italic"></div>
</div> </div>
</div> </div>
<div class="templates hidden drop-font">
<i class="fa fa-chevron-up quit"></i> Text Size: <input max="72" min="12"
name="font-size" step="6" type="number" value="12"><br>
Font: <input type="text">
</div>

47
ui/Squire-UI.js
View file

@ -26,29 +26,40 @@ $(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', this.menuAction);
$('.item').click(function () {
var me = $(this);
var iFrame = me.parents('.Squire-UI').next('iframe').first()[0];
editor = iFrame.contentWindow.document;
console.log(me.data('action'), me.data('value'));
try {
editor[me.data('action')](me.data('value'));
} catch (error) {
console.log(error);
}
});
});
$(container).append(div); $(container).append(div);
$(container).append(iframe); $(container).append(iframe);
editor = new Squire(iframe.contentWindow.document); iframe.contentWindow.editor = new Squire(iframe.contentWindow.document);
return editor; return iframe.contentWindow.editor;
}; };
SquireUI.menuAction = function() {
$('.item').click(function() {
var me = $(this);
var iFrame = me.parents('.Squire-UI').next('iframe').first()[0];
var editor = iFrame.contentWindow.editor;
try {
editor[me.data('action')](me.data('value'));
} catch (error) {
console.log(error);
}
});
};
SquireUI.isBold = isPresent( 'B', ( />B\b/ ) );
SquireUI.isItalic = isPresent( 'I', ( />I\b/ ) );
SquireUI.isUnderlined = isPresent( 'U', ( />U\b/ ) );
SquireUI.isStriked = isPresent( 'S', ( />S\b/ ) );
SquireUI.isLink = isPresent( 'A', ( />A\b/ ) );
SquireUI.isPresent = function () {
editor.getPath()
};
SquireUI.whenTextSelected = function () {
}
}); });