Skip to content
This repository has been archived by the owner on Nov 28, 2022. It is now read-only.

Commit

Permalink
🐝 Card menu fixes (#597)
Browse files Browse the repository at this point in the history 
closes: TryGhost/Ghost#8106

- Fixes the keyboard selection problems of the '+' menu.
- Makes the active state of the keyboard selection blank until a key is pressed.
- Fixes it so that the '+' menu executes the tool on Enter.
  • Loading branch information
@disordinary @kevinansfield
disordinary authored and kevinansfield committed Mar 20, 2017
1 parent 83519a1 commit bcbc9c2
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 53 deletions.
104 changes: 56 additions & 48 deletions lib/gh-koenig/addon/components/koenig-plus-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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,
Expand Down Expand Up @@ -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() {
Expand All @@ -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;
Expand Down Expand Up @@ -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,
Expand All @@ -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);
}
}
}
});
15 changes: 11 additions & 4 deletions lib/gh-koenig/addon/components/koenig-slash-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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);
Expand Down
11 changes: 10 additions & 1 deletion lib/gh-koenig/addon/templates/components/koenig-plus-menu.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,16 @@
<div class="gh-cardmenu">
<div class="gh-cardmenu-search">
{{inline-svg "search.svg"}}
{{gh-input query class="gh-input gh-cardmenu-search-input" placeholder="Search for a card..." type="text" update=(action (mut query)) key-press=(action "updateSelection")}}
{{gh-input query class="gh-input gh-cardmenu-search-input" placeholder="Search for a card..." type="text" update=(action (mut query))
keyEvents=(hash
27=(action "closeMenu")
13=(action "selectTool")
37=(action "moveSelectionLeft")
38=(action "moveSelectionUp")
39=(action "moveSelectionRight")
40=(action "moveSelectionDown")
)
}}
</div>
<div class="gh-cardmenu-divider">
Primary
Expand Down

0 comments on commit bcbc9c2

Please sign in to comment.