2017-03-02 19:51:57 +03:00
|
|
|
import Component from 'ember-component';
|
|
|
|
import computed from 'ember-computed';
|
|
|
|
import run from 'ember-runloop';
|
|
|
|
import $ from 'jquery';
|
2017-03-01 22:23:03 +03:00
|
|
|
import layout from '../templates/components/koenig-toolbar';
|
2017-02-27 07:44:15 +03:00
|
|
|
|
|
|
|
import Tools from '../options/default-tools';
|
|
|
|
|
2017-03-02 19:51:57 +03:00
|
|
|
export default Component.extend({
|
2017-02-27 07:44:15 +03:00
|
|
|
layout,
|
2017-02-27 15:05:31 +03:00
|
|
|
classNames: ['gh-toolbar'],
|
2017-02-27 07:44:15 +03:00
|
|
|
classNameBindings: ['isVisible'],
|
|
|
|
isVisible: false,
|
|
|
|
tools: [],
|
2017-03-02 19:51:57 +03:00
|
|
|
|
|
|
|
isLink: computed({
|
2017-02-27 07:44:15 +03:00
|
|
|
get() {
|
|
|
|
return this._isLink;
|
|
|
|
},
|
|
|
|
set(_, value) {
|
|
|
|
this._isLink = value;
|
|
|
|
return this._isLink;
|
|
|
|
}
|
|
|
|
}),
|
2017-03-02 19:51:57 +03:00
|
|
|
|
|
|
|
toolbar: computed('tools.@each.selected', function () {
|
2017-02-27 07:44:15 +03:00
|
|
|
// TODO if a block section other than a primary section is selected then
|
|
|
|
// the returned list removes one of the primary sections to compensate,
|
|
|
|
// so that there are only ever four primary sections.
|
2017-03-02 19:51:57 +03:00
|
|
|
let visibleTools = [];
|
2017-02-27 07:44:15 +03:00
|
|
|
|
2017-03-02 19:51:57 +03:00
|
|
|
this.tools.forEach((tool) => {
|
2017-02-27 07:44:15 +03:00
|
|
|
if (tool.type === 'markup') {
|
|
|
|
visibleTools.push(tool);
|
|
|
|
}
|
|
|
|
});
|
2017-02-27 15:05:31 +03:00
|
|
|
return visibleTools;
|
2017-03-02 19:51:57 +03:00
|
|
|
}),
|
2017-02-27 15:05:31 +03:00
|
|
|
|
2017-03-02 19:51:57 +03:00
|
|
|
toolbarBlocks: computed('tools.@each.selected', function () {
|
2017-02-27 15:05:31 +03:00
|
|
|
// TODO if a block section other than a primary section is selected then
|
|
|
|
// the returned list removes one of the primary sections to compensate,
|
|
|
|
// so that there are only ever four primary sections.
|
2017-03-02 19:51:57 +03:00
|
|
|
let visibleTools = [];
|
2017-02-27 07:44:15 +03:00
|
|
|
|
2017-03-02 19:51:57 +03:00
|
|
|
this.tools.forEach((tool) => {
|
2017-02-27 15:05:31 +03:00
|
|
|
if (tool.toolbar) {
|
|
|
|
visibleTools.push(tool);
|
|
|
|
}
|
|
|
|
});
|
2017-02-27 07:44:15 +03:00
|
|
|
return visibleTools;
|
2017-03-02 19:51:57 +03:00
|
|
|
}),
|
2017-02-27 15:05:31 +03:00
|
|
|
|
2017-02-27 07:44:15 +03:00
|
|
|
init() {
|
|
|
|
this._super(...arguments);
|
2017-03-02 19:51:57 +03:00
|
|
|
this.tools = new Tools(this.get('editor'), this);
|
|
|
|
this.iconURL = `${this.get('assetPath')}/tools/`;
|
2017-02-27 07:44:15 +03:00
|
|
|
},
|
2017-03-02 19:51:57 +03:00
|
|
|
|
2017-02-27 07:44:15 +03:00
|
|
|
didRender() {
|
|
|
|
let $this = this.$();
|
2017-03-02 19:51:57 +03:00
|
|
|
let {editor} = this;
|
|
|
|
let $editor = $('.gh-editor-container'); // TODO - this element is part of ghost-admin, we need to separate them more.
|
2017-02-27 07:44:15 +03:00
|
|
|
let isMousedown = false;
|
2017-03-02 19:51:57 +03:00
|
|
|
if (!editor.range || editor.range.head.isBlank) {
|
2017-02-27 07:44:15 +03:00
|
|
|
this.set('isVisible', false);
|
|
|
|
}
|
|
|
|
$editor.mousedown(() => isMousedown = true);
|
2017-03-02 19:51:57 +03:00
|
|
|
$editor.mouseup(() => {
|
|
|
|
isMousedown = false;
|
|
|
|
updateToolbarToRange(this, $this, $editor, isMousedown);
|
|
|
|
});
|
2017-02-27 07:44:15 +03:00
|
|
|
editor.cursorDidChange(() => updateToolbarToRange(this, $this, $editor, isMousedown));
|
|
|
|
},
|
2017-03-02 19:51:57 +03:00
|
|
|
|
2017-02-27 07:44:15 +03:00
|
|
|
willDestroyElement() {
|
|
|
|
this.editor.destroy();
|
|
|
|
},
|
2017-03-02 19:51:57 +03:00
|
|
|
|
2017-02-27 07:44:15 +03:00
|
|
|
actions: {
|
|
|
|
linkKeyDown(event) {
|
|
|
|
// if escape close link
|
|
|
|
if (event.keyCode === 27) {
|
|
|
|
this.set('isLink', false);
|
|
|
|
}
|
|
|
|
},
|
2017-03-02 19:51:57 +03:00
|
|
|
|
2017-02-27 07:44:15 +03:00
|
|
|
linkKeyPress(event) {
|
|
|
|
// if enter run link
|
|
|
|
if (event.keyCode === 13) {
|
|
|
|
this.set('isLink', false);
|
|
|
|
|
2017-03-02 19:51:57 +03:00
|
|
|
this.editor.run((postEditor) => {
|
2017-02-27 07:44:15 +03:00
|
|
|
let markup = postEditor.builder.createMarkup('a', {href: event.target.value});
|
|
|
|
postEditor.addMarkupToRange(this.get('linkRange'), markup);
|
|
|
|
});
|
|
|
|
|
|
|
|
this.set('linkRange', null);
|
|
|
|
event.stopPropagation();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
doLink(range) {
|
|
|
|
|
|
|
|
this.set('isLink', true);
|
|
|
|
this.set('linkRange', range);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// update the location of the toolbar and display it if the range is visible.
|
|
|
|
function updateToolbarToRange(self, $holder, $editor, isMouseDown) {
|
2017-03-02 19:51:57 +03:00
|
|
|
// if there is no cursor:
|
|
|
|
let {editor} = self;
|
|
|
|
if (!editor.range || editor.range.head.isBlank || isMouseDown) {
|
|
|
|
if (!self.get('isLink')) {
|
|
|
|
self.set('isVisible', false);
|
2017-02-27 07:44:15 +03:00
|
|
|
}
|
2017-03-02 19:51:57 +03:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
self.propertyWillChange('toolbar');
|
|
|
|
self.propertyWillChange('toolbarBlocks');
|
2017-02-27 07:44:15 +03:00
|
|
|
|
2017-03-02 19:51:57 +03:00
|
|
|
if (!editor.range.isCollapsed) {
|
|
|
|
// if we have a selection, then the toolbar appears just below said selection:
|
2017-02-27 07:44:15 +03:00
|
|
|
|
2017-03-02 19:51:57 +03:00
|
|
|
let range = window.getSelection().getRangeAt(0); // get the actual range within the DOM.
|
|
|
|
let position = range.getBoundingClientRect();
|
|
|
|
let edOffset = $editor.offset();
|
2017-02-27 07:44:15 +03:00
|
|
|
|
2017-03-02 19:51:57 +03:00
|
|
|
self.set('isVisible', true);
|
|
|
|
run.schedule('afterRender', this,
|
|
|
|
() => {
|
|
|
|
$holder.css('top', position.top + $editor.scrollTop() - $holder.height() - 20); // - edOffset.top+10
|
|
|
|
$holder.css('left', position.left + (position.width / 2) + $editor.scrollLeft() - edOffset.left - ($holder.width() / 2));
|
2017-02-27 07:44:15 +03:00
|
|
|
}
|
2017-03-02 19:51:57 +03:00
|
|
|
);
|
2017-02-27 07:44:15 +03:00
|
|
|
|
2017-03-02 19:51:57 +03:00
|
|
|
self.set('isLink', false);
|
2017-02-27 07:44:15 +03:00
|
|
|
|
2017-03-02 19:51:57 +03:00
|
|
|
self.tools.forEach((tool) => {
|
|
|
|
if (tool.hasOwnProperty('checkElements')) {
|
|
|
|
// if its a list we want to know what type
|
|
|
|
let sectionTagName = editor.activeSection._tagName === 'li' ? editor.activeSection.parent._tagName : editor.activeSection._tagName;
|
|
|
|
tool.checkElements(editor.activeMarkups.concat([{tagName: sectionTagName}]));
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
if (self.isVisible) {
|
|
|
|
self.set('isVisible', false);
|
|
|
|
self.set('isLink', false);
|
2017-02-27 07:44:15 +03:00
|
|
|
}
|
2017-03-02 19:51:57 +03:00
|
|
|
}
|
2017-02-27 07:44:15 +03:00
|
|
|
|
2017-03-02 19:51:57 +03:00
|
|
|
self.propertyDidChange('toolbar');
|
|
|
|
self.propertyDidChange('toolbarBlocks');
|
2017-02-27 07:44:15 +03:00
|
|
|
}
|