74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
<template>
|
|
<button v-if="gridable.unlocked" :class="{ feature: true, tile: true, can: gridable.canClick, locked: !gridable.canClick}"
|
|
:style="style" @click="gridable.click" @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start"
|
|
@touchend="stop" @touchcancel="stop">
|
|
<div v-if="title"><component :is="title" /></div>
|
|
<component :is="display" style="white-space: pre-line;" />
|
|
<branch-node :branches="gridable.branches" :id="id" featureType="gridable" />
|
|
</button>
|
|
</template>
|
|
|
|
<script>
|
|
import { layers } from '../../store/layers';
|
|
import { coerceComponent } from '../../util/vue';
|
|
|
|
export default {
|
|
name: 'gridable',
|
|
inject: [ 'tab' ],
|
|
props: {
|
|
layer: String,
|
|
id: [ Number, String ],
|
|
cell: [ Number, String ],
|
|
size: {
|
|
type: [ Number, String ]
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
interval: false,
|
|
time: 0
|
|
};
|
|
},
|
|
computed: {
|
|
gridable() {
|
|
return layers[this.layer || this.tab.layer].grids[this.id][this.cell];
|
|
},
|
|
style() {
|
|
return [
|
|
this.gridable.canClick ? { 'background-color': layers[this.layer || this.tab.layer].color } : {},
|
|
layers[this.layer || this.tab.layer].componentStyles?.gridable,
|
|
this.gridable.style
|
|
];
|
|
},
|
|
title() {
|
|
if (this.gridable.title) {
|
|
return coerceComponent(this.gridable.title, 'h3');
|
|
}
|
|
return null;
|
|
},
|
|
display() {
|
|
return coerceComponent(this.gridable.display, 'div');
|
|
}
|
|
},
|
|
methods: {
|
|
start() {
|
|
if (!this.interval) {
|
|
this.interval = setInterval(this.gridable.click, 250);
|
|
}
|
|
},
|
|
stop() {
|
|
clearInterval(this.interval);
|
|
this.interval = false;
|
|
this.time = 0;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tile {
|
|
min-height: 80px;
|
|
width: 80px;
|
|
font-size: 10px;
|
|
}
|
|
</style>
|