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

🐛 Fixed unexpected image positions when re-ordering gallery images

Browse source 
no issue

- the position that images were inserted did not always match the position indicator because of errors in the insert index calculations
This commit is contained in:
Kevin Ansfield 2019-07-05 14:50:05 +01:00
parent 526c94d954
commit 46d5b779ae
2 changed files with 6 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -406,26 +406,21 @@ export default Component.extend({
return {}; return {};
}, },
_onDrop(draggableInfo, droppableElem, position) { _onDrop(draggableInfo/*, droppableElem, position*/) {
// do not allow dropping of non-images // do not allow dropping of non-images
if (draggableInfo.type !== 'image' && draggableInfo.cardName !== 'image') { if (draggableInfo.type !== 'image' && draggableInfo.cardName !== 'image') {
return false; return false;
} }
let {insertIndex} = draggableInfo;
let droppables = Array.from(this.element.querySelectorAll('[data-image]')); let droppables = Array.from(this.element.querySelectorAll('[data-image]'));
let draggableIndex = droppables.indexOf(draggableInfo.element); let draggableIndex = droppables.indexOf(draggableInfo.element);
if (this._isDropAllowed(draggableIndex, draggableInfo.insertIndex)) { if (this._isDropAllowed(draggableIndex, insertIndex)) {
if (draggableIndex === -1) { if (draggableIndex === -1) {
// external image being added // external image being added
let {payload} = draggableInfo; let {payload} = draggableInfo;
let img = draggableInfo.element.querySelector(`img[src="${payload.src}"]`); let img = draggableInfo.element.querySelector(`img[src="${payload.src}"]`);
let insertIndex = draggableInfo.insertIndex;
// insert index needs adjusting because we're not shuffling
if (position && position.match(/right/)) {
insertIndex += 1;
}
// image card payloads may not have all of the details we need but we can fill them in // image card payloads may not have all of the details we need but we can fill them in
payload.width = payload.width || img.naturalWidth; payload.width = payload.width || img.naturalWidth;
@ -440,8 +435,9 @@ export default Component.extend({
} else { } else {
// internal image being re-ordered // internal image being re-ordered
let draggedImage = this.images.findBy('src', draggableInfo.payload.src); let draggedImage = this.images.findBy('src', draggableInfo.payload.src);
let accountForRemoval = draggableIndex < insertIndex && insertIndex ? -1 : 0;
this.images.removeObject(draggedImage); this.images.removeObject(draggedImage);
this.images.insertAt(draggableInfo.insertIndex, draggedImage); this.images.insertAt(insertIndex + accountForRemoval, draggedImage);
} }
this._recalculateImageRows(); this._recalculateImageRows();
@ -514,14 +510,10 @@ export default Component.extend({
} }
}); });
if (position.match(/right/) && draggableIndex > insertIndex) { if (position.match(/right/)) {
insertIndex += 1; insertIndex += 1;
} }
if (insertIndex >= this.images.length - 1) {
insertIndex = this.images.length - 1;
}
return { return {
direction: 'horizontal', direction: 'horizontal',
position: position.match(/left/) ? 'left' : 'right', position: position.match(/left/) ? 'left' : 'right',

1
ghost/admin/lib/koenig-editor/addon/services/koenig-drag-drop-handler.js
View file

@ -353,7 +353,6 @@ export default Service.extend({
this._currentOverContainer.onDragLeaveDroppable(overDroppableElem); this._currentOverContainer.onDragLeaveDroppable(overDroppableElem);
} }
this._currentOverDroppableElem = null; this._currentOverDroppableElem = null;
this._currentOverDroppablePosition = null;
} }
if (isOverDroppable) { if (isOverDroppable) {