93 lines
3.6 KiB
Vue
93 lines
3.6 KiB
Vue
<template>
|
|
<div class="character-kink" :class="kinkClasses" :id="kink.key" @click="toggleSubkinks"
|
|
@mouseover.stop="showTooltip = true" @mouseout.stop="showTooltip = false">
|
|
<i v-show="kink.hasSubkinks" class="fa" :class="{'fa-minus': !listClosed, 'fa-plus': listClosed}"></i>
|
|
<i v-show="!kink.hasSubkinks && kink.isCustom" class="far custom-kink-icon"></i>
|
|
<span class="kink-name">{{ kink.name }}</span>
|
|
<span class="kink-custom-desc" v-if="((kink.isCustom) && (expandedCustom))">{{kink.description}}</span>
|
|
<template v-if="kink.hasSubkinks">
|
|
<div class="subkink-list" :class="{closed: this.listClosed}">
|
|
<kink v-for="subkink in kink.subkinks" :kink="subkink" :key="subkink.id" :comparisons="comparisons"
|
|
:highlights="highlights"></kink>
|
|
</div>
|
|
</template>
|
|
<div class="popover popover-top" v-if="((showTooltip) && ((!kink.isCustom) || (!expandedCustom)))">
|
|
<div class="arrow" style="left:10%"></div>
|
|
<h5 class="popover-header">{{kink.name}}</h5>
|
|
<div class="popover-body"><p>{{kink.description}}</p></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Watch } from '@f-list/vue-ts';
|
|
import Vue from 'vue';
|
|
import { DisplayKink } from './interfaces';
|
|
import { kinkComparisonSwaps } from '../../learn/matcher-types';
|
|
|
|
@Component({ name: 'kink' })
|
|
export default class KinkView extends Vue {
|
|
@Prop({required: true})
|
|
readonly kink!: DisplayKink;
|
|
@Prop({required: true})
|
|
readonly highlights!: {[key: number]: boolean};
|
|
@Prop({required: true})
|
|
readonly comparisons!: {[key: number]: string | undefined};
|
|
|
|
@Prop({required: false})
|
|
// tslint:disable-next-line: vue-props
|
|
expandedCustom = false;
|
|
|
|
listClosed = true;
|
|
initialListClosedState = true;
|
|
showTooltip = false;
|
|
|
|
@Watch('expandedCustom')
|
|
onExpandedCustomChange(): void {
|
|
if (this.expandedCustom) {
|
|
this.initialListClosedState = this.listClosed;
|
|
this.listClosed = false;
|
|
} else {
|
|
this.listClosed = this.initialListClosedState;
|
|
}
|
|
}
|
|
|
|
toggleExpandedCustoms(): void {
|
|
this.expandedCustom = !this.expandedCustom;
|
|
}
|
|
|
|
toggleSubkinks(): void {
|
|
if(!this.kink.hasSubkinks)
|
|
return;
|
|
|
|
this.listClosed = !this.listClosed;
|
|
this.initialListClosedState = this.listClosed;
|
|
}
|
|
|
|
get kinkClasses(): {[key: string]: boolean} {
|
|
const classes: {[key: string]: boolean} = {
|
|
'stock-kink': !this.kink.isCustom,
|
|
'custom-kink': this.kink.isCustom,
|
|
highlighted: !this.kink.isCustom && this.highlights[this.kink.id],
|
|
subkink: this.kink.hasSubkinks,
|
|
'expanded-custom-kink': this.expandedCustom
|
|
};
|
|
classes[`kink-id-${this.kink.key}`] = true;
|
|
classes[`kink-group-${this.kink.group}`] = true;
|
|
|
|
const theirKinkId = (this.kink.id in kinkComparisonSwaps) ? kinkComparisonSwaps[this.kink.id] : this.kink.id;
|
|
|
|
if(!this.kink.isCustom && typeof this.comparisons[theirKinkId] !== 'undefined') {
|
|
classes['comparison-result'] = true;
|
|
classes[`comparison-${this.comparisons[theirKinkId]}`] = true;
|
|
}
|
|
|
|
return classes;
|
|
}
|
|
|
|
get customId(): number | undefined {
|
|
return this.kink.isCustom ? this.kink.id : undefined;
|
|
}
|
|
}
|
|
</script>
|