move item popover to own component
This commit is contained in:
Phillip Thelen
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div
|
||||
ref="root"
|
||||
v-if="draggedItem"
|
||||
class="draggedItemInfo mouse"
|
||||
v-mousePosition="30"
|
||||
@mouseMoved="mouseMoved($event)">
|
||||
<Sprite
|
||||
class="dragging-icon"
|
||||
:image-name="imageName()"
|
||||
/>
|
||||
<div class="popover">
|
||||
<div
|
||||
class="popover-content"
|
||||
>
|
||||
{{ $t(popoverTextKey, { [translationKey]: itemText() }) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.draggedItemInfo {
|
||||
position: absolute;
|
||||
left: -500px;
|
||||
|
||||
z-index: 1080;
|
||||
|
||||
&.mouse {
|
||||
position: fixed;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.dragging-icon {
|
||||
width: 68px;
|
||||
margin: 0 auto 8px;
|
||||
display: block;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.popover {
|
||||
position: static;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
color: white;
|
||||
margin: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Sprite from '@/components/ui/sprite';
|
||||
import MouseMoveDirective from '@/directives/mouseposition.directive';
|
||||
|
||||
export default {
|
||||
name: 'ItemPopover',
|
||||
components: {
|
||||
Sprite,
|
||||
},
|
||||
directives: {
|
||||
mousePosition: MouseMoveDirective,
|
||||
},
|
||||
props: {
|
||||
draggedItem: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
popoverTextKey: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
translationKey: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
imageName () {
|
||||
if (this.draggedItem) {
|
||||
if (this.draggedItem.class) {
|
||||
return this.draggedItem.class;
|
||||
}
|
||||
if (this.draggedItem.target) {
|
||||
return `Pet_Food_${this.draggedItem.key}`;
|
||||
}
|
||||
}
|
||||
return '';
|
||||
},
|
||||
mouseMoved ($event) {
|
||||
if (this.$refs.root) {
|
||||
this.$refs.root.style.left = `${$event.x - 60}px`;
|
||||
this.$refs.root.style.top = `${$event.y + 10}px`;
|
||||
}
|
||||
},
|
||||
itemText () {
|
||||
if (this.draggedItem) {
|
||||
if (this.draggedItem.text) {
|
||||
return this.draggedItem.text();
|
||||
}
|
||||
return this.draggedItem.class;
|
||||
}
|
||||
return '';
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
@@ -1,8 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
v-mousePosition="30"
|
||||
class="row"
|
||||
@mouseMoved="mouseMoved($event)"
|
||||
>
|
||||
<div class="standard-sidebar d-none d-sm-block">
|
||||
<filter-sidebar>
|
||||
@@ -99,7 +97,7 @@
|
||||
{{ context.item.text }}
|
||||
</h4>
|
||||
<div
|
||||
v-if="currentDraggingPotion == null"
|
||||
v-if="!currentDraggingPotion"
|
||||
class="popover-content-text"
|
||||
>
|
||||
{{ context.item.notes }}
|
||||
@@ -148,7 +146,7 @@
|
||||
<h4 class="popover-content-title">
|
||||
{{ context.item.text }}
|
||||
</h4>
|
||||
<div class="popover-content-text">
|
||||
<div class="popover-content-text" v-if="!currentDraggingEgg">
|
||||
{{ context.item.notes }}
|
||||
</div>
|
||||
</template>
|
||||
@@ -224,122 +222,24 @@
|
||||
</div>
|
||||
</div>
|
||||
<hatchedPetDialog />
|
||||
<div
|
||||
ref="draggingEggInfo"
|
||||
class="eggInfo"
|
||||
>
|
||||
<div v-if="currentDraggingEgg != null">
|
||||
<Sprite
|
||||
class="dragging-icon"
|
||||
:imageName="`Pet_Egg_${currentDraggingEgg.key}`"
|
||||
/>
|
||||
<div class="popover">
|
||||
<div class="popover-content">
|
||||
{{ $t('dragThisEgg', {eggName: currentDraggingEgg.text }) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="eggClickMode"
|
||||
ref="clickEggInfo"
|
||||
class="eggInfo mouse"
|
||||
>
|
||||
<div v-if="currentDraggingEgg != null">
|
||||
<Sprite
|
||||
class="dragging-icon"
|
||||
:imageName="`Pet_Egg_${currentDraggingEgg.key}`"
|
||||
/>
|
||||
<div class="popover">
|
||||
<div
|
||||
class="popover-content"
|
||||
>
|
||||
{{ $t('clickOnPotionToHatch', {eggName: currentDraggingEgg.text }) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ref="draggingPotionInfo"
|
||||
class="hatchingPotionInfo"
|
||||
>
|
||||
<div v-if="currentDraggingPotion != null">
|
||||
<Sprite
|
||||
class="dragging-icon"
|
||||
:imageName="`Pet_HatchingPotion_${currentDraggingPotion.key}`"
|
||||
/>
|
||||
<div class="popover">
|
||||
<div
|
||||
class="popover-content"
|
||||
>
|
||||
{{ $t('dragThisPotion', {potionName: currentDraggingPotion.text }) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="potionClickMode"
|
||||
ref="clickPotionInfo"
|
||||
class="hatchingPotionInfo mouse"
|
||||
>
|
||||
<div v-if="currentDraggingPotion != null">
|
||||
<Sprite
|
||||
class="dragging-icon"
|
||||
:imageName="`Pet_HatchingPotion_${currentDraggingPotion.key}`"
|
||||
/>
|
||||
<div class="popover">
|
||||
<div
|
||||
class="popover-content"
|
||||
>
|
||||
{{ $t('clickOnEggToHatch', {potionName: currentDraggingPotion.text }) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ItemPopover
|
||||
:dragged-item="currentDraggingEgg"
|
||||
popoverTextKey="clickOnPotionToHatch"
|
||||
translationKey="eggName" />
|
||||
<ItemPopover
|
||||
:dragged-item="currentDraggingPotion"
|
||||
popoverTextKey="clickOnEggToHatch"
|
||||
translationKey="potionName" />
|
||||
<questDetailModal :group="user.party" />
|
||||
<cards-modal :card-options="cardOptions" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
|
||||
.eggInfo, .hatchingPotionInfo {
|
||||
position: absolute;
|
||||
left: -500px;
|
||||
|
||||
z-index: 1080;
|
||||
|
||||
&.mouse {
|
||||
position: fixed;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.dragging-icon {
|
||||
width: 68px;
|
||||
margin: 0 auto 8px;
|
||||
display: block;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.popover {
|
||||
position: inherit;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
color: white;
|
||||
margin: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import each from 'lodash/each';
|
||||
import throttle from 'lodash/throttle';
|
||||
import moment from 'moment';
|
||||
import ItemPopover from '@/components/inventory/itemPopover';
|
||||
import Item from '@/components/inventory/item';
|
||||
import ItemRows from '@/components/ui/itemRows';
|
||||
import CountBadge from '@/components/ui/countBadge';
|
||||
@@ -356,11 +256,9 @@ import { createAnimal } from '@/libs/createAnimal';
|
||||
|
||||
import notifications from '@/mixins/notifications';
|
||||
import DragDropDirective from '@/directives/dragdrop.directive';
|
||||
import MouseMoveDirective from '@/directives/mouseposition.directive';
|
||||
import FilterGroup from '@/components/ui/filterGroup';
|
||||
import Checkbox from '@/components/ui/checkbox';
|
||||
import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
|
||||
import Sprite from '@/components/ui/sprite';
|
||||
|
||||
const allowedSpecialItems = ['snowball', 'spookySparkles', 'shinySeed', 'seafoam'];
|
||||
|
||||
@@ -378,8 +276,6 @@ const groups = [
|
||||
allowedItems,
|
||||
}));
|
||||
|
||||
let lastMouseMoveEvent = {};
|
||||
|
||||
export default {
|
||||
name: 'Items',
|
||||
components: {
|
||||
@@ -394,11 +290,10 @@ export default {
|
||||
cardsModal,
|
||||
QuestInfo,
|
||||
FilterSidebar,
|
||||
Sprite,
|
||||
ItemPopover,
|
||||
},
|
||||
directives: {
|
||||
drag: DragDropDirective,
|
||||
mousePosition: MouseMoveDirective,
|
||||
},
|
||||
mixins: [notifications],
|
||||
data () {
|
||||
@@ -409,9 +304,7 @@ export default {
|
||||
sortBy: 'quantity', // or 'AZ'
|
||||
|
||||
currentDraggingEgg: null,
|
||||
eggClickMode: false,
|
||||
currentDraggingPotion: null,
|
||||
potionClickMode: false,
|
||||
cardOptions: {
|
||||
cardType: '',
|
||||
messageOptions: 0,
|
||||
@@ -571,22 +464,13 @@ export default {
|
||||
}
|
||||
|
||||
this.currentDraggingPotion = null;
|
||||
this.potionClickMode = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.currentDraggingEgg === null || this.currentDraggingEgg !== egg) {
|
||||
this.currentDraggingEgg = egg;
|
||||
this.eggClickMode = true;
|
||||
|
||||
// Wait for the div.eggInfo.mouse node to be added to the DOM before
|
||||
// changing its position.
|
||||
this.$nextTick(() => {
|
||||
this.mouseMoved(lastMouseMoveEvent);
|
||||
});
|
||||
} else {
|
||||
this.currentDraggingEgg = null;
|
||||
this.eggClickMode = false;
|
||||
}
|
||||
},
|
||||
onPotionClicked ($event, potion) {
|
||||
@@ -596,21 +480,12 @@ export default {
|
||||
}
|
||||
|
||||
this.currentDraggingEgg = null;
|
||||
this.eggClickMode = false;
|
||||
return;
|
||||
}
|
||||
if (this.currentDraggingPotion === null || this.currentDraggingPotion !== potion) {
|
||||
this.currentDraggingPotion = potion;
|
||||
this.potionClickMode = true;
|
||||
|
||||
// Wait for the div.hatchingPotionInfo.mouse node to be added to the
|
||||
// DOM before changing its position.
|
||||
this.$nextTick(() => {
|
||||
this.mouseMoved(lastMouseMoveEvent);
|
||||
});
|
||||
} else {
|
||||
this.currentDraggingPotion = null;
|
||||
this.potionClickMode = false;
|
||||
}
|
||||
},
|
||||
|
||||
@@ -644,23 +519,6 @@ export default {
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
mouseMoved ($event) {
|
||||
// Keep track of the last mouse position even in click mode so that we
|
||||
// know where to position the dragged potion/egg info on item click.
|
||||
lastMouseMoveEvent = $event;
|
||||
|
||||
// Update the potion/egg popover if we are already dragging it.
|
||||
if (this.potionClickMode) {
|
||||
// dragging potioninfo is 180px wide (90 would be centered)
|
||||
this.$refs.clickPotionInfo.style.left = `${$event.x - 60}px`;
|
||||
this.$refs.clickPotionInfo.style.top = `${$event.y + 10}px`;
|
||||
} else if (this.eggClickMode) {
|
||||
// dragging eggInfo is 180px wide (90 would be centered)
|
||||
this.$refs.clickEggInfo.style.left = `${$event.x - 60}px`;
|
||||
this.$refs.clickEggInfo.style.top = `${$event.y + 10}px`;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
v-mousePosition="30"
|
||||
class="row stable"
|
||||
@mouseMoved="mouseMoved($event)"
|
||||
>
|
||||
<div class="standard-sidebar d-none d-sm-block">
|
||||
<filter-sidebar>
|
||||
@@ -265,43 +263,10 @@
|
||||
</inventoryDrawer>
|
||||
</div>
|
||||
<hatchedPetDialog :hide-text="true" />
|
||||
<div
|
||||
ref="dragginFoodInfo"
|
||||
class="foodInfo"
|
||||
>
|
||||
<div v-if="currentDraggingFood != null">
|
||||
<Sprite
|
||||
class="food-icon"
|
||||
:image-name="`Pet_Food_${currentDraggingFood.key}`"
|
||||
/>
|
||||
<div class="popover">
|
||||
<div
|
||||
class="popover-content"
|
||||
>
|
||||
{{ $t('dragThisFood', {foodName: currentDraggingFood.text() }) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="foodClickMode"
|
||||
ref="clickFoodInfo"
|
||||
class="foodInfo mouse"
|
||||
>
|
||||
<div v-if="currentDraggingFood != null">
|
||||
<Sprite
|
||||
class="food-icon"
|
||||
:image-name="`Pet_Food_${currentDraggingFood.key}`"
|
||||
/>
|
||||
<div class="popover">
|
||||
<div
|
||||
class="popover-content"
|
||||
>
|
||||
{{ $t('clickOnPetToFeed', {foodName: currentDraggingFood.text() }) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ItemPopover
|
||||
:dragged-item="currentDraggingFood"
|
||||
popoverTextKey="clickOnPetToFeed"
|
||||
translationKey="foodName" />
|
||||
<mount-raised-modal />
|
||||
<welcome-modal />
|
||||
<hatching-modal :hatchable-pet.sync="hatchablePet" />
|
||||
@@ -364,34 +329,6 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.foodInfo {
|
||||
position: absolute;
|
||||
left: -500px;
|
||||
|
||||
z-index: 1080;
|
||||
|
||||
&.mouse {
|
||||
position: fixed;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.food-icon {
|
||||
margin: 0 auto 8px;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.popover {
|
||||
position: inherit;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
color: white;
|
||||
margin: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hatchablePopover {
|
||||
width: 180px;
|
||||
|
||||
@@ -428,6 +365,7 @@ import _throttle from 'lodash/throttle';
|
||||
import groupBy from 'lodash/groupBy';
|
||||
import { mapState } from '@/libs/store';
|
||||
|
||||
import ItemPopover from '@/components/inventory/itemPopover';
|
||||
import PetItem from './petItem';
|
||||
import MountItem from './mountItem.vue';
|
||||
import FoodItem from './foodItem';
|
||||
@@ -440,7 +378,6 @@ import InventoryDrawer from '@/components/shared/inventoryDrawer';
|
||||
|
||||
import ResizeDirective from '@/directives/resize.directive';
|
||||
import DragDropDirective from '@/directives/dragdrop.directive';
|
||||
import MouseMoveDirective from '@/directives/mouseposition.directive';
|
||||
|
||||
import { createAnimal } from '@/libs/createAnimal';
|
||||
|
||||
@@ -450,7 +387,6 @@ import notifications from '@/mixins/notifications';
|
||||
import openedItemRowsMixin from '@/mixins/openedItemRows';
|
||||
import petMixin from '@/mixins/petMixin';
|
||||
import seasonalNPC from '@/mixins/seasonalNPC';
|
||||
import Sprite from '@/components/ui/sprite';
|
||||
|
||||
import { CONSTANTS, setLocalSetting, getLocalSetting } from '@/libs/userlocalManager';
|
||||
import { isOwned } from '../../../libs/createAnimal';
|
||||
@@ -483,12 +419,11 @@ export default {
|
||||
WelcomeModal,
|
||||
HatchingModal,
|
||||
InventoryDrawer,
|
||||
Sprite,
|
||||
ItemPopover,
|
||||
},
|
||||
directives: {
|
||||
resize: ResizeDirective,
|
||||
drag: DragDropDirective,
|
||||
mousePosition: MouseMoveDirective,
|
||||
},
|
||||
mixins: [notifications, openedItemRowsMixin, petMixin, seasonalNPC],
|
||||
data () {
|
||||
|
||||
Reference in New Issue
Block a user