2017-03-02 19:51:57 +03:00
|
|
|
import Component from 'ember-component';
|
|
|
|
import $ from 'jquery';
|
2017-03-01 22:23:03 +03:00
|
|
|
import layout from '../templates/components/koenig-toolbar-newitem';
|
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,
|
|
|
|
classNames: ['toolbar-newitem'],
|
2017-03-02 19:51:57 +03:00
|
|
|
|
|
|
|
init() {
|
2017-02-27 07:44:15 +03:00
|
|
|
this._super(...arguments);
|
2017-03-07 13:57:09 +03:00
|
|
|
let editor = this.get('editor');
|
2017-02-27 07:44:15 +03:00
|
|
|
let tools = new Tools(editor, this);
|
2017-03-02 19:51:57 +03:00
|
|
|
this.tools = [];
|
2017-02-27 07:44:15 +03:00
|
|
|
|
2017-03-02 19:51:57 +03:00
|
|
|
tools.forEach((item) => {
|
|
|
|
if (item.type === 'block' || item.type === 'newline') {
|
2017-02-27 07:44:15 +03:00
|
|
|
this.tools.push(item);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2017-03-02 19:51:57 +03:00
|
|
|
this.iconURL = `${this.get('assetPath')}/tools/`;
|
2017-02-27 07:44:15 +03:00
|
|
|
},
|
|
|
|
didRender() {
|
|
|
|
let $this = this.$();
|
2017-03-07 13:57:09 +03:00
|
|
|
let editor = this.get('editor');
|
2017-03-14 14:59:34 +03:00
|
|
|
let $editor = $(this.get('containerSelector'));
|
2017-02-27 07:44:15 +03:00
|
|
|
|
2017-03-02 19:51:57 +03:00
|
|
|
if (!editor.range || !editor.range.head.section || !editor.range.head.section.isBlank
|
|
|
|
|| editor.range.head.section.renderNode._element.tagName.toLowerCase() !== 'p') {
|
2017-02-27 07:44:15 +03:00
|
|
|
$this.hide();
|
|
|
|
}
|
|
|
|
|
|
|
|
editor.cursorDidChange(() => {
|
|
|
|
|
2017-03-07 13:57:09 +03:00
|
|
|
// if there is no cursor:
|
2017-03-02 19:51:57 +03:00
|
|
|
if (!editor.range || !editor.range.head.section || !editor.range.head.section.isBlank
|
|
|
|
|| editor.range.head.section.renderNode._element.tagName.toLowerCase() !== 'p') {
|
2017-02-27 07:44:15 +03:00
|
|
|
$this.hide();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
let element = editor.range.head.section.renderNode._element;
|
|
|
|
|
2017-03-02 19:51:57 +03:00
|
|
|
if (this._element === element) {
|
2017-02-27 07:44:15 +03:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.propertyWillChange('toolbar');
|
|
|
|
|
|
|
|
this.__state = 'normal';
|
|
|
|
this.isBlank = true;
|
|
|
|
|
|
|
|
let offset = this.$(element).position();
|
|
|
|
let edOffset = $editor.offset();
|
|
|
|
|
|
|
|
$this.css('top', offset.top + $editor.scrollTop() - edOffset.top - 13);
|
2017-03-02 19:51:57 +03:00
|
|
|
$this.css('left', offset.left + $editor.scrollLeft() + 20);
|
2017-02-27 07:44:15 +03:00
|
|
|
|
|
|
|
$this.show();
|
|
|
|
|
|
|
|
this._element = element;
|
|
|
|
|
2017-03-02 19:51:57 +03:00
|
|
|
this.tools.forEach((tool) => {
|
2017-02-27 07:44:15 +03:00
|
|
|
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}]));
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
this.propertyDidChange('toolbar');
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|