}
var sel = window.getSelection();
if ($(sel.anchorNode).parents('div[contenteditable]').length && sel.toString()) {
- show_style_popup(sel);
- } else if (style_popup) {
- $(style_popup).hide();
+ show_inline_style_toolbar(sel);
+ } else if (inline_style_toolbar) {
+ $(inline_style_toolbar).hide();
}
});
},
bind_events: function(elem) {
$(elem).on('input', Phylly.input_event);
- $(elem).on('keyup click', update_block_style_popup);
+ $(elem).on('keyup click', update_block_style_toolbar);
},
}
return null;
}
- var block_style_popup = null;
+ var block_style_toolbar = null;
function block_style() {
var sel = window.getSelection();
var current_anchor = sel.anchorNode;
range.setStart(current_anchor, 0);
sel.removeAllRanges();
sel.addRange(range);
- update_block_style_popup();
+ update_block_style_toolbar();
}
- function update_block_style_popup() {
+ function update_block_style_toolbar() {
var sel = window.getSelection();
if (! ((sel.anchorNode instanceof Element && (sel.anchorOffset == 0 && sel.isCollapsed)) || get_active_block(sel.anchorNode))) {
- if (block_style_popup) {
- $(block_style_popup).hide();
+ if (block_style_toolbar) {
+ $(block_style_toolbar).hide();
}
return true;
}
- if (block_style_popup === null) {
- block_style_popup = $('<div class="block-style-popup"></div>');
+ if (block_style_toolbar === null) {
+ block_style_toolbar = $('<div class="block-style-popup"></div>');
for (const block of Phylly.BLOCKS) {
var button = document.createElement('button');
button.action_block = block;
button.dataset.action = block.name;
button.textContent = block.name;
- block_style_popup.append(button);
+ block_style_toolbar.append(button);
}
- block_style_popup.hide();
- block_style_popup.insertAfter(document.body);
- block_style_popup.find('button').on('click', block_style);
+ block_style_toolbar.hide();
+ block_style_toolbar.insertAfter(document.body);
+ block_style_toolbar.find('button').on('click', block_style);
}
- block_style_popup.css('position', 'absolute');
+ block_style_toolbar.css('position', 'absolute');
var block = get_active_block(sel.anchorNode);
- block_style_popup.find('button').removeClass('on');
+ block_style_toolbar.find('button').removeClass('on');
if (block) {
- block_style_popup.find('[data-action=' + block.name + ']').addClass('on');
- block_style_popup.addClass('selected');
+ block_style_toolbar.find('[data-action=' + block.name + ']').addClass('on');
+ block_style_toolbar.addClass('selected');
} else {
- block_style_popup.removeClass('selected');
+ block_style_toolbar.removeClass('selected');
}
var anchor = get_contenteditable_subnode(sel.anchorNode);
var pos = $(anchor).offset();
- block_style_popup.css('top', pos.top - 33);
- block_style_popup.css('left', pos.left);
- block_style_popup.show();
+ block_style_toolbar.css('top', pos.top - 33);
+ block_style_toolbar.css('left', pos.left);
+ block_style_toolbar.show();
return true;
}
- var style_popup = null;
+ var inline_style_toolbar = null;
function update_style() {
var action = $(this).data('action');
var param = null;
sel.addRange(this._range);
}
- function show_style_popup(sel) {
- if (style_popup === null) {
- style_popup = $('<div class="inline-style-popup">' +
+ function show_inline_style_toolbar(sel) {
+ if (inline_style_toolbar === null) {
+ inline_style_toolbar = $('<div class="inline-style-popup">' +
'<button data-action="italic"><i>i</i></button>' +
'<button data-action="bold"><b>b</b></button>' +
'<button data-action="code"><></button>' +
'<button data-action="createLink">a</button>' +
'<input name="link-target"/>' +
'</div>');
- style_popup.hide();
- style_popup.insertAfter(document.body);
- style_popup.find('button').on('click', update_style);
- style_popup.find('[name=link-target]').on('keypress', validate_link).on('focusout', focusout_link);
+ inline_style_toolbar.hide();
+ inline_style_toolbar.insertAfter(document.body);
+ inline_style_toolbar.find('button').on('click', update_style);
+ inline_style_toolbar.find('[name=link-target]').on('keypress', validate_link).on('focusout', focusout_link);
}
- style_popup.css('position', 'absolute');
+ inline_style_toolbar.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();
+ inline_style_toolbar.css('top', pos.top + window.scrollY - 33);
+ inline_style_toolbar.css('left', pos.left + window.scrollX);
+ inline_style_toolbar.show();
};
}(window, document));