Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Koenig - Allow clicks on cards to pass through for inputs

Browse source 
refs https://github.com/TryGhost/Ghost/issues/9311
- add `hasEditMode` flag to the `{{koenig-card}}` component so that cards without an edit mode (eg, the image card) don't have unnecessary state changes and even listeners
- allow `mousedown` events on cards to passthrough when selecting if the target was an input or textarea so that the cursor can be placed in an input immediately instead of requiring double clicks
This commit is contained in:
Kevin Ansfield 2018-02-22 13:46:24 +00:00
parent fecbbd518c
commit 618643606a
1 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ghost/admin/lib/koenig-editor/addon/components/koenig-card.js
View file

@ -18,6 +18,7 @@ export default Component.extend({
toolbar: null,
isSelected: false,
isEditing: false,
hasEditMode: true,
// properties
showToolbar: false,
@ -52,6 +53,7 @@ export default Component.extend({
let isSelected = this.get('isSelected');
let isEditing = this.get('isEditing');
let hasEditMode = this.get('hasEditMode');
if (isSelected !== this._lastIsSelected) {
if (isSelected) {
@ -62,7 +64,9 @@ export default Component.extend({
}
if (isEditing !== this._lastIsEditing) {
if (isEditing) {
if (!hasEditMode) {
isEditing = false;
} else if (isEditing) {
this._onEnterEdit();
} else {
this._onLeaveEdit();
@ -82,6 +86,7 @@ export default Component.extend({
mouseDown(event) {
let isSelected = this.get('isSelected');
let isEditing = this.get('isEditing');
let hasEditMode = this.get('hasEditMode');
// if we perform an action we want to prevent the mousedown from
// triggering a cursor position change which can result in multiple
@ -90,8 +95,17 @@ export default Component.extend({
if (!isSelected && !isEditing) {
this.selectCard();
this.set('showToolbar', true);
event.preventDefault();
} else if (isSelected && !isEditing) {
// in most situations we want to prevent default behaviour which
// can cause an underlying cursor position change but inputs and
// textareas are different and we want the focus to move to them
// immediately when clicked
let targetTagName = event.target.tagName;
let allowedTagNames = ['INPUT', 'TEXTAREA'];
if (!allowedTagNames.includes(targetTagName)) {
event.preventDefault();
}
} else if (hasEditMode && isSelected && !isEditing) {
this.editCard();
this.set('showToolbar', true);
event.preventDefault();
@ -99,7 +113,7 @@ export default Component.extend({
},
doubleClick() {
if (!this.get('isEditing')) {
if (this.get('hasEditMode') && !this.get('isEditing')) {
this.editCard();
this.set('showToolbar', true);
}