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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
<template lang="html"> <template lang="html">
<v-card-text> <v-card-text>
<v-layout align-center justify-center> <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 Open Dialog
</v-btn> </v-btn>
</v-layout> </v-layout>

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

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