jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed dialog stack from using element ids to data-ids to allow duplicate ids to work

Browse Source
This commit is contained in:
Stefan Zermatten
2019-02-18 15:17:31 +02:00
parent a31a70f435
commit e63ae96cb5
9 changed files with 38 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/imports/ui/character/StatsTab.vue
View File

@@ -15,8 +15,8 @@
<ability-list-tile
v-bind="ability"
:key="ability._id"
:id="`${_uid}-${ability._id}`"
@click="clickAttribute({elementId: `${_uid}-${ability._id}`, _id: ability._id})"
:data-id="ability._id"
@click="clickAttribute({_id: ability._id})"
/>
</template>
</v-list>
@@ -26,16 +26,16 @@
<div v-for="stat in stats" class="stat" :key="stat._id">
<attribute-card
v-bind="stat"
:id="`${_uid}-${stat._id}`"
@click="clickAttribute({elementId: `${_uid}-${stat._id}`, _id: stat._id})"
:data-id="stat._id"
@click="clickAttribute({_id: stat._id})"
/>
</div>
<div v-for="modifier in modifiers" class="modifier" :key="modifier._id">
<attribute-card modifier
v-bind="modifier"
:id="`${_uid}-${modifier._id}`"
@click="clickAttribute({elementId: `${_uid}-${modifier._id}`, _id: modifier._id})"
:data-id="modifier._id"
@click="clickAttribute({_id: modifier._id})"
/>
</div>
@@ -47,9 +47,9 @@
<v-divider v-if="index !== 0" :key="hitDice._id + 'divider'"/>
<hit-dice-list-tile
v-bind="hitDie"
:id="`${_uid}-${hitDie._id}`"
:data-id="hitDie._id"
:key="hitDice._id"
@click="clickAttribute({elementId: `${_uid}-${hitDie._id}`, _id: hitDie._id})"
@click="clickAttribute({_id: hitDie._id})"
@change="e => hitDiceChange(hitDie._id, e)"
/>
</template>
@@ -65,8 +65,8 @@
v-for="save in savingThrows"
v-bind="save"
:key="save._id"
:id="`${_uid}-${save._id}`"
@click="clickSkill({elementId: `${_uid}-${save._id}`, _id: save._id})"
:data-id="save._id"
@click="clickSkill({_id: save._id})"
/>
</v-list>
</v-card>
@@ -80,8 +80,8 @@
v-for="skill in skills"
v-bind="skill"
:key="skill._id"
:id="`${_uid}-${skill._id}`"
@click="clickSkill({elementId: `${_uid}-${skill._id}`, _id: skill._id})"
:data-id="skill._id"
@click="clickSkill({_id: skill._id})"
/>
</v-list>
</v-card>
@@ -173,10 +173,10 @@
},
},
methods: {
clickAttribute({elementId, _id}){
clickAttribute({_id}){
this.$store.commit("pushDialogStack", {
component: "attribute-dialog-container",
elementId,
elementId: _id,
data: {_id},
});
},

2
app/imports/ui/components/AbilityListTile.Story.vue
View File

@@ -4,7 +4,7 @@
<v-divider v-if="index !== 0"/>
<ability-list-tile
:key="ability.name"
:id="`${_uid}-${ability.name}`"
:data-id="`${_uid}-${ability.name}`"
v-bind="ability"
@click="click({ability, elementId: `${_uid}-${ability.name}`})"
/>

9
app/imports/ui/components/EffectListTile.vue
View File

@@ -2,9 +2,9 @@
<v-list-tile
class="effect-list-tile"
:class="{disabled: !enabled}"
:id="elementId"
:data-id="_id"
v-on="$listeners.click ? { click(e){
$emit('click', {$props, elementId})
$emit('click', $props)
} } : {}"
>
<v-layout row align-center class="net-effect">
@@ -46,11 +46,6 @@
stat: String,
statName: String,
},
computed: {
elementId(){
return `${this._uid}-${this._id}`
},
},
methods: {
getEffectIcon,
getOperation(op, value){

4
app/imports/ui/components/HealthBar.vue
View File

@@ -7,13 +7,13 @@
style="min-height: 48px;"
:class="{ hover }"
class="my-3 health-bar"
:id="`${_uid}-${_id}`"
:data-id="_id"
>
<div
class="subheading text-truncate pa-2 name"
@mouseover="hover = true"
@mouseleave="hover = false"
@click="$emit('click', { elementId: `${_uid}-${_id}` })"
@click="$emit('click')"
>
{{ name }}
</div>

3
app/imports/ui/components/HealthBarCard.vue
View File

@@ -6,8 +6,9 @@
:value="attribute.value + (attribute.adjustment || 0)"
:maxValue="attribute.value"
:name="attribute.name"
:_id="attribute._id"
@change="e => $emit('change', {_id: attribute._id, change: e})"
@click="e => $emit('click', {_id: attribute._id, elementId: e.elementId})"
@click="e => $emit('click', {_id: attribute._id})"
/>
</v-card>
</template>

4
app/imports/ui/components/HealthBarCardContainer.vue
View File

@@ -30,10 +30,10 @@
},
},
methods: {
healthBarClicked({_id, elementId}){
healthBarClicked({_id}){
this.$store.commit("pushDialogStack", {
component: "attribute-dialog-container",
elementId,
elementId: _id,
data: {_id},
});
},

4
app/imports/ui/dialogStack/DialogBase.Story.vue
View File

@@ -4,8 +4,8 @@
Test Dialog
</div>
<div>
<v-btn @click="openDialog(_uid + 'btn')" :id="_uid + 'btn'">Open Dialog</v-btn>
<v-btn fab @click="openDialog(_uid + 'fab')" :id="_uid + 'fab'" color="green">Open Dialog</v-btn>
<v-btn @click="openDialog('btn')" data-id="btn">Open Dialog</v-btn>
<v-btn fab @click="openDialog('fab')" data-id="fab" color="green">Open Dialog</v-btn>
</div>
</dialog-base>
</template>

2
app/imports/ui/dialogStack/DialogStack.Story.vue
View File

@@ -1,7 +1,7 @@
<template lang="html">
<v-card-text>
<v-layout align-center justify-center>
<v-btn @click="openDialog(_uid + 'btn')" :id="_uid + 'btn'">
<v-btn @click="openDialog('btn')" data-id="btn">
Open Dialog
</v-btn>
</v-layout>

18
app/imports/ui/dialogStack/DialogStack.vue
View File

@@ -22,6 +22,7 @@
:data-element-id="dialog.elementId"
:data-return-element-id="dialog.returnElementId"
:data-index="index"
:ref="index"
:style="getDialogStyle(index)"
:elevation="6"
>
@@ -49,10 +50,6 @@
},
},
methods: {
logAndReturn(thing){
console.log(thing);
return thing;
},
popDialogStack(result){
this.$store.dispatch("popDialogStack", result);
},
@@ -67,13 +64,22 @@
const top = (num - index) * -OFFSET;
return `left:${left}px; top:${top}px;`;
},
getTopElementByDataId(elementId, offset = 0){
let stackLength = this.$store.state.dialogStack.dialogs.length - offset;
if (stackLength){
let topDialog = this.$refs[stackLength - 1][0];
return topDialog.$el.querySelector(`[data-id='${elementId}']`);
} else {
return document.querySelector(`[data-id='${elementId}']`);
}
},
enter(target, done){
if (!target || !target.attributes['data-element-id']){
done();
return;
}
let elementId = target.attributes['data-element-id'].value;
let source = document.getElementById(elementId);
let source = this.getTopElementByDataId(elementId, 1);
if (!source){
done();
return;
@@ -119,7 +125,7 @@
}
elementId = target.attributes['data-element-id'].value;
}
let source = document.getElementById(elementId);
let source = this.getTopElementByDataId(elementId);
if (!source){
done();
return;