krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-17 14:47:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

[WIP] drag/drop fixes (#8851)

Browse Source 
* Stable: Highlight pet on dragging food / add drag* events

* Stable: hatch dialog instead of popover / .btn-flat / update bootstrap-vie

* Layout: change sidebar width to fixed 236px - removed .col-2/.col-10

* Stable: Drag&Drop Food Image + Text - refactor directive to use custom event names

* Stable: fixes

* Stable: click to select food + attached food info box

* fix lint issues

* Drag&Drop&Click: Potions on Eggs - fix click on item + attached infobox-position in click mode
This commit is contained in:
negue
2017-07-10 10:07:23 +02:00
committed by Matteo Pagliazzi
parent 78fd79931e
commit dd29c60d87
18 changed files with 492 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
website/client/directives/dragdrop.directive.js
View File

@@ -7,12 +7,15 @@ import _without from 'lodash/without';
* DRAG_GROUP is a static custom value
* KEY_OF_ITEM
*
* v-drag.DRAG_GROUP="KEY_OF_ITEM"
* v-drag.drop.DRAG_GROUP="KEY_OF_ITEM" @dropped="callback" @dragover="optional"
* v-drag.DRAG_GROUP="KEY_OF_ITEM" @itemDragEnd="optional" @itemDragStart="optional"
* v-drag.drop.DRAG_GROUP="KEY_OF_ITEM" @itemDropped="callback" @itemDragOver="optional"
*/
const DROPPED_EVENT_NAME = 'dropped';
const DRAGOVER_EVENT_NAME = 'dragover';
const DROPPED_EVENT_NAME = 'itemDropped';
const DRAGSTART_EVENT_NAME = 'itemDragStart';
const DRAGEND_EVENT_NAME = 'itemDragEnd';
const DRAGOVER_EVENT_NAME = 'itemDragOver';
const DRAGLEAVE_EVENT_NAME = 'itemDragLeave';
export default {
bind (el, binding, vnode) {
@@ -24,13 +27,28 @@ export default {
el.draggable = true;
el.handleDrag = (ev) => {
ev.dataTransfer.setData('KEY', binding.value);
let dragStartEventData = {
event: ev,
};
emit(vnode, DRAGSTART_EVENT_NAME, dragStartEventData);
};
el.addEventListener('dragstart', el.handleDrag);
el.handleDragEnd = () => {
let dragEndEventData = {};
emit(vnode, DRAGEND_EVENT_NAME, dragEndEventData);
};
el.addEventListener('dragend', el.handleDrag);
} else {
el.handleDragOver = (ev) => {
let dragOverEventData = {
dropable: true,
draggingKey: ev.dataTransfer.getData('KEY'),
event: ev,
};
emit(vnode, DRAGOVER_EVENT_NAME, dragOverEventData);
@@ -47,16 +65,23 @@ export default {
emit(vnode, DROPPED_EVENT_NAME, dropEventData);
};
el.handleDragLeave = () => {
emit(vnode, DRAGLEAVE_EVENT_NAME, {});
};
el.addEventListener('dragover', el.handleDragOver);
el.addEventListener('dragleave', el.handleDragLeave);
el.addEventListener('drop', el.handleDrop);
}
},
unbind (el) {
if (!el.isDropHandler) {
el.removeEventListener('drag', el.handleDrag);
el.removeEventListener('dragstart', el.handleDrag);
el.removeEventListener('dragend', el.handleDragEnd);
} else {
el.removeEventListener('dragover', el.handleDragOver);
el.removeEventListener('dragleave', el.handleDragLeave);
el.removeEventListener('drop', el.handleDrop);
}
},