diff --git a/ghost/admin/lib/gh-koenig/addon/components/koenig-plus-menu.js b/ghost/admin/lib/gh-koenig/addon/components/koenig-plus-menu.js index c78f6fd28c..ff9ba00189 100644 --- a/ghost/admin/lib/gh-koenig/addon/components/koenig-plus-menu.js +++ b/ghost/admin/lib/gh-koenig/addon/components/koenig-plus-menu.js @@ -3,6 +3,7 @@ import computed from 'ember-computed'; import run from 'ember-runloop'; import Tools from '../options/default-tools'; import layout from '../templates/components/koenig-plus-menu'; +import Range from 'mobiledoc-kit/utils/cursor/range'; import $ from 'jquery'; const ROW_LENGTH = 4; @@ -15,7 +16,7 @@ export default Component.extend({ return this.get('isOpen') || this.get('isButton'); }), toolsLength: 0, - selected: 0, + selected: -1, selectedTool: null, query: '', range: null, @@ -44,13 +45,13 @@ export default Component.extend({ }); this.set('toolsLength', i); tools.sort((a, b) => a.order > b.order); - - let selectedTool = tools[selected] || tools[0]; - if (selectedTool) { - this.set('selectedTool', selectedTool); - selectedTool.selected = true; + if (selected > -1) { + let selectedTool = tools[selected] || tools[0]; + if (selectedTool) { + this.set('selectedTool', selectedTool); + selectedTool.selected = true; + } } - return tools; }), init() { @@ -74,45 +75,6 @@ export default Component.extend({ }, 200); }); - input.keydown(({keyCode}) => { - let item = this.get('selected'); - let length = this.get('toolsLength'); - switch (keyCode) { - case 27: // escape - return this.send('closeMenu'); - case 37: // left - if (item > 0) { - this.set('selected', item - 1); - } else { - this.set('selected', length - 1); - } - break; - case 38: // up - if (item > ROW_LENGTH) { - this.set('selected', item - ROW_LENGTH); - } else { - this.set('selected', 0); - } - break; - case 39: // right - if (item < length) { - this.set('selected', item + 1); - } else { - this.set('selected', 1); - } - break; - case 40: // down - if (item + ROW_LENGTH < length) { - this.set('selected', item + ROW_LENGTH); - } else { - this.set('selected', length - 1); - } - break; - case 13: // enter - alert('enter'); - } - }); - editor.cursorDidChange(() => { if (!editor.range || !editor.range.head.section) { return; @@ -152,6 +114,10 @@ export default Component.extend({ startOffset: editor.range.head.offset, endOffset: editor.range.head.offset }); + + this.set('selected', -1); + this.set('selectedTool', null); + this.propertyDidChange('toolbar'); run.schedule('afterRender', this, @@ -169,8 +135,50 @@ export default Component.extend({ closeMenuKeepButton: function () { // eslint-disable-line this.set('isOpen', false); }, - updateSelection: function (event) { // eslint-disable-line - // alert(event); + selectTool: function () { // eslint-disable-line + let {section} = this.get('range'); + let editor = this.get('editor'); + editor.range = Range.create(section, 0, section, 0); + this.get('selectedTool').onClick(editor); + this.send('closeMenuKeepButton'); + }, + moveSelectionLeft: function () { // eslint-disable-line + let item = this.get('selected'); + let length = this.get('toolsLength'); + if (item > 0) { + this.set('selected', item - 1); + } else { + this.set('selected', length - 1); + } + }, + moveSelectionUp: function () { // eslint-disable-line + let item = this.get('selected'); + if (item > ROW_LENGTH) { + this.set('selected', item - ROW_LENGTH); + } else { + this.set('selected', 0); + } + }, + moveSelectionRight: function () { // eslint-disable-line + let item = this.get('selected'); + let length = this.get('toolsLength'); + if (item < length) { + this.set('selected', item + 1); + } else { + this.set('selected', 0); + } + }, + moveSelectionDown: function () { // eslint-disable-line + let item = this.get('selected'); + if (item < 0) { + item = 0; + } + let length = this.get('toolsLength'); + if (item + ROW_LENGTH < length) { + this.set('selected', item + ROW_LENGTH); + } else { + this.set('selected', length - 1); + } } } }); diff --git a/ghost/admin/lib/gh-koenig/addon/components/koenig-slash-menu.js b/ghost/admin/lib/gh-koenig/addon/components/koenig-slash-menu.js index ab95dd3cf4..db5b551ae6 100644 --- a/ghost/admin/lib/gh-koenig/addon/components/koenig-slash-menu.js +++ b/ghost/admin/lib/gh-koenig/addon/components/koenig-slash-menu.js @@ -41,10 +41,12 @@ export default Component.extend({ this.set('toolsLength', i); tools.sort((a, b) => a.order > b.order); - let selectedTool = tools[selected] || tools[0]; - if (selectedTool) { - this.set('selectedTool', selectedTool); - selectedTool.selected = true; + let selectedTool = tools[selected]; + if (selected > -1) { + if (selectedTool) { + this.set('selectedTool', selectedTool); + selectedTool.selected = true; + } } return tools; @@ -109,6 +111,8 @@ export default Component.extend({ startOffset: editor.range.head.offset, endOffset: editor.range.head.offset }); + this.set('selected', -1); + this.set('selectedTool', null); editor.registerKeyCommand({ str: 'LEFT', @@ -156,6 +160,9 @@ export default Component.extend({ name: 'slash', run() { let item = self.get('selected'); + if (item < 0) { + item = 0; + } let length = self.get('toolsLength'); if (item + ROW_LENGTH < length) { self.set('selected', item + ROW_LENGTH); diff --git a/ghost/admin/lib/gh-koenig/addon/templates/components/koenig-plus-menu.hbs b/ghost/admin/lib/gh-koenig/addon/templates/components/koenig-plus-menu.hbs index 79def109c2..fff08433c1 100644 --- a/ghost/admin/lib/gh-koenig/addon/templates/components/koenig-plus-menu.hbs +++ b/ghost/admin/lib/gh-koenig/addon/templates/components/koenig-plus-menu.hbs @@ -5,7 +5,16 @@