var sel = document.getSelection();
var anchorNode = sel.anchorNode;
var prev_p = sel.anchorNode.previousSibling;
+ if (! prev_p) return;
if (prev_p.tagName != 'P') {
prev_p = $(prev_p).parents('p')[0];
}
}
return true;
});
+ $('div[contenteditable]').on('keyup', function(event) {
+ var sel = document.getSelection();
+ if (sel.anchorNode instanceof Element && sel.anchorOffset == 0 && sel.isCollapsed) {
+ // start of line
+ show_block_style_popup();
+ } else {
+ hide_block_style_popup();
+ }
+ return true;
+ });
+
$('#save').on('click', function() {
var text = $('div[contenteditable]')[0].innerHTML;
- $.post('api-save/', {text: text}).fail(function() {
+ var csrf = $('[name=csrfmiddlewaretoken]').val();
+ $.post('api-save/',
+ { text: text, csrfmiddlewaretoken: csrf}
+ ).fail(function() {
$('#save').css('background', 'red');
});
return false;
});
+
+ var block_style_popup = null;
+ function block_style() {
+ var action = $(this).data('action');
+ var class_name = null;
+ if (action == 'code') {
+ action = 'pre';
+ class_name = 'screen';
+ }
+ document.execCommand('formatBlock', false, action);
+ var sel = window.getSelection();
+ if (class_name) {
+ $(sel.anchorNode).addClass(class_name);
+ }
+ var range = document.createRange();
+ range.setStart(sel.anchorNode, 0);
+ sel.removeAllRanges();
+ sel.addRange(range);
+ hide_block_style_popup();
+ }
+ function show_block_style_popup() {
+ if (block_style_popup === null) {
+ block_style_popup = $(
+ '<div class="style-popup">' +
+ '<button data-action="code">code</button>' +
+ '</div>');
+ block_style_popup.hide();
+ block_style_popup.insertAfter($('.actions'));
+ block_style_popup.find('button').on('click', block_style);
+ }
+ block_style_popup.css('position', 'absolute');
+ var sel = window.getSelection();
+ var pos = $(sel.anchorNode).offset();
+ block_style_popup.css('top', pos.top - 33);
+ block_style_popup.css('left', pos.left);
+ block_style_popup.show();
+ }
+ function hide_block_style_popup() {
+ if (block_style_popup) {
+ $(block_style_popup).hide();
+ }
+ }
+
+ var style_popup = null;
+ function update_style() {
+ var action = $(this).data('action');
+ var param = null;
+ if (action == 'code') {
+ action = 'insertHTML';
+ param = $('<code></code>', {text: window.getSelection().toString()})[0].outerHTML;
+ }
+ if (action == 'createLink') {
+ var sel = window.getSelection();
+ var $input = $('input[name=link-target]');
+ $input[0]._range = sel.getRangeAt(0);
+ if (sel.anchorNode instanceof Element) {
+ var elem = sel.anchorNode.childNodes[sel.anchorOffset];
+ if (elem.tagName == 'A') {
+ $input.val(elem.href);
+ }
+ }
+ $input.addClass('shown');
+ $input.focus();
+ return;
+ }
+ document.execCommand(action, false, param);
+ }
+ function validate_link(ev) {
+ var charCode = typeof ev.which == "number" ? ev.which : ev.keyCode;
+ if (ev.key == "Enter") {
+ var $input = $(this);
+ var range = this._range;
+ var url = $input.val();
+ $input.removeClass('shown');
+ var sel = window.getSelection();
+ sel.addRange(this._range);
+ if (url) {
+ document.execCommand('createLink', false, url);
+ } else {
+ document.execCommand('unlink', false, null);
+ }
+ sel.empty();
+ $input.val('');
+ }
+ }
+ function focusout_link(ev) {
+ var $input = $(this);
+ $input.removeClass('shown');
+ var range = this._range;
+ var sel = window.getSelection();
+ sel.addRange(this._range);
+ }
+
+ function show_style_popup(sel) {
+ if (style_popup === null) {
+ style_popup = $('<div class="style-popup short">' +
+ '<button data-action="italic"><i>i</i></button>' +
+ '<button data-action="bold"><b>b</b></button>' +
+ '<button data-action="code">#</button>' +
+ '<button data-action="removeFormat">×</button>' +
+ '<button data-action="createLink">a</button>' +
+ '<input name="link-target"/>' +
+ '</div>');
+ style_popup.hide();
+ style_popup.insertAfter($('.actions'));
+ style_popup.find('button').on('click', update_style);
+ style_popup.find('[name=link-target]').on('keypress', validate_link).on('focusout', focusout_link);
+ }
+ style_popup.css('position', 'absolute');
+ var pos = sel.getRangeAt(0).getClientRects()[0];
+ style_popup.css('top', pos.top + window.scrollY - 33);
+ style_popup.css('left', pos.left + window.scrollX);
+ style_popup.show();
+ };
+ $(document).on('selectionchange', function(event) {
+ if ($('input[name=link-target].shown').length) {
+ return;
+ }
+ var sel = window.getSelection();
+ if ($(sel.anchorNode).parents('div[contenteditable]').length && sel.toString()) {
+ show_style_popup(sel);
+ } else if (style_popup) {
+ $(style_popup).hide();
+ }
+ });
});