From caf9ddedd842ebd0901b506655af062338396014 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ole=20Volds=C3=A6ter?= <ole.voldsater@uib.no>
Date: Fri, 20 Mar 2020 15:28:14 +0100
Subject: [PATCH] byttet de kompliserte tooltip-greiene ut med details
(html-tag)
---
package.json | 3 -
src/components/Header.vue | 74 +++++++-----
src/components/vue-tooltipster.vue | 176 -----------------------------
3 files changed, 44 insertions(+), 209 deletions(-)
delete mode 100644 src/components/vue-tooltipster.vue
diff --git a/package.json b/package.json
index 1e9391fa..8606aae1 100644
--- a/package.json
+++ b/package.json
@@ -11,9 +11,6 @@
"@trevoreyre/autocomplete-vue": "^2.1.1",
"axios": "^0.19.2",
"core-js": "^2.6.11",
- "jquery": "^3.4.1",
- "lodash": "^4.17.15",
- "tooltipster": "^4.2.7",
"vue": "^2.6.11",
"vue-awesome": "^3.5.4",
"vue-router": "^3.1.5"
diff --git a/src/components/Header.vue b/src/components/Header.vue
index fbd75d4a..4a4a3f4f 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,31 +1,30 @@
<template>
- <VueTooltipster :showClosebutton="false">
+ <div>
<h1 v-for="(lemma, index) in lemmas" :key="index">
<span class="homograph">{{lemma.hgno ? String.fromCharCode(0x215f + lemma.hgno) : ''}}</span>
{{lemma.lemma}}{{index+1 < lemmas.length ? ',' : ''}} </h1>
- <span class="word-classification">{{group_list}}</span>
- <div slot="content" class="tooltip">
- <div v-for="(lemma, index) in lemmas" :key="index">
- <h4>{{lemma.lemma}}</h4>
- <table v-for="(std, index) in lemma.standardisations" :key="index">
- <tr>
- <th rowspan="2">{{std.tags ? std.tags.join(', ') : ''}}</th>
- <th v-for="(inflection, index) in std.inflection" :key="index">{{inflection.tags.join(', ')}}</th>
- </tr>
- <tr>
- <td v-for="(inflection, index) in std.inflection" :key="index">{{inflection.word_form}}</td>
- </tr>
- </table>
- </div>
- </div>
- </VueTooltipster>
+ <details title="Klikk for å se bøyninger">
+ <summary>{{group_list}}</summary>
+ <div class="inflection">
+ <div v-for="(lemma, index) in lemmas" :key="index">
+ <h4>{{lemma.lemma}}</h4>
+ <table v-for="(std, index) in lemma.standardisations" :key="index">
+ <tr>
+ <th rowspan="2">{{std.tags ? std.tags.join(', ') : ''}}</th>
+ <th v-for="(inflection, index) in std.inflection" :key="index">{{inflection.tags.join(', ')}}</th>
+ </tr>
+ <tr>
+ <td v-for="(inflection, index) in std.inflection" :key="index">{{inflection.word_form}}</td>
+ </tr>
+ </table>
+ </div>
+ </div>
+ </details>
+ </div>
</template>
<script>
import helpers from '../utils/helpers.js'
-import VueTooltipster from './vue-tooltipster.vue'
-import jQuery from 'jquery'
-window.jQuery = jQuery
export default {
name: 'Header',
@@ -38,7 +37,6 @@ export default {
}
},
components: {
- VueTooltipster
}
}
</script>
@@ -52,14 +50,7 @@ h1 {
display: inline;
}
-.tooltip {
- font-family: 'Avenir', Helvetica, Arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- color: #2c3e50;
-}
-
-.tooltip table {
+.inflection table {
border-collapse: collapse;
margin: 10px;
}
@@ -69,10 +60,33 @@ h1 {
font-weight: normal;
}
-.tooltip td, .tooltip th {
+.inflection td, .inflection th {
border: solid;
border-width: 1px;
margin: 0px 0px 0px 0px;
padding: 3px;
}
+
+details > summary {
+ padding: 2px 6px;
+ width: 15em;
+ border: none;
+ cursor: help;
+ list-style: none;
+ text-decoration: underline;
+ text-decoration-style: dashed;
+}
+
+details > summary::-webkit-details-marker {
+ display: none;
+}
+
+details > div {
+ border-radius: 0 0 10px 10px;
+ background-color: #eee;
+ padding: 2px 6px;
+ margin: 0;
+ box-shadow: 3px 3px 4px black;
+}
+
</style>
diff --git a/src/components/vue-tooltipster.vue b/src/components/vue-tooltipster.vue
deleted file mode 100644
index c2d3814e..00000000
--- a/src/components/vue-tooltipster.vue
+++ /dev/null
@@ -1,176 +0,0 @@
-<!-- Code examples, use label or slot content if it is html:
-
- import VueTooltipster from './vue-tooltipster'
-
- components: {
- VueTooltipster
- }
-
- <vue-tooltipster label="tester">
- <span>tester1234</span>
- </vue-tooltipster>
-
- <vue-tooltipster>
- <span>tester</span>
- <div slot="content" style="background-color: red">tooltip content tester<h1>h1</h1></div>
- </vue-tooltipster>
-
- <vue-tooltipster :label="statusText" :options="{trigger: 'click'}">
- <svg :height="height" :width="width">
- <circle :cx="cxSize" :cy="cySize" :r="rSize" stroke="black" stroke-width="0.5" :fill="colorFill" />
- </svg>
- </vue-tooltipster>
- -->
- <template>
- <div class="full-height">
- <div ref="tooltipster" @click="toggleTip" class="full-height">
- <slot></slot> <!-- trigger del tooltip -->
- </div>
- <div class="hidden p-xs" style="color:black;">
- <div ref="content">
- <div v-if="showClosebutton">
- <div class="btn pull-right" @click="closeTooltip" v-show="showTip">
- <icon name="close"></icon>
- </div>
- </div>
- <slot name="content"></slot>
- </div>
- </div>
- </div>
- </template>
-
- <script>
- import 'tooltipster/dist/css/tooltipster.bundle.min.css';
- // import 'tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-borderless.min.css'
- // import 'tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css'
- import 'tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-noir.min.css';
- // import 'tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-punk.min.css'
- // import 'tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css'
- import $ from 'jquery';
- import 'tooltipster';
- import _ from 'lodash';
- import 'vue-awesome/icons';
- import Icon from 'vue-awesome/components/Icon.vue';
-
- export default {
- name: 'tooltip',
- beforeDestroy: function () {
- this.closeTooltip();
- this.tooltipsterInstance.close();
- },
- components: {
- Icon
- },
- mounted: function () {
- let self = this;
- this.tooltipsterInstance = $(this.$refs.tooltipster.children[1]).tooltipster(
- _.merge(this.defaultOptions, this.tooltipsterOptions, {content: this.label ? this.label : this.$refs.content})
- ).tooltipster('instance');
- this.tooltipsterInstance.on('close', function (event) {
- if (self.showTip) {
- event.stop();
- }
- });
-
- this.tooltipsterInstance.on('before', function (event) {
- self.$emit('openTooltipster');
- });
-
- this.tooltipsterInstance.on('after', function (event) {
- self.$emit('closeTooltipster');
- });
- },
- data: function () {
- return {
- showTip: false,
- showConfig: false,
- defaultOptions: {
- animationDuration: 500,
- animation: 'fade',
- contentAsHtml: true,
- delay: 0,
- minWidth: 450,
- interactive: true,
- distance: 20,
- theme: 'tooltipster-noir', // tooltipster-shadow, tooltipster-light, tooltipster-borderless, tooltipster-punk, , tooltipster-noir
- multiple: true,
- respositionOnScroll: true,
- trigger: 'custom',
- trackTooltip: false,
- triggerOpen: {
- mouseenter: true,
- touchstart: true
- },
- triggerClose: {
- mouseleave: true,
- originClick: false,
- touchleave: true
- }
- }
- };
- },
- methods: {
- toggleTip: function () {
- this.showTip = !this.showTip;
- if (!this.showTip) {
- this.showConfig = false;
- }
- },
- closeTooltip: function () {
- this.toggleTip();
- this.showConfig = false;
- this.showTip = false;
- }
- },
- props: {
- label: {
- default: ''
- },
- tooltipsterOptions: { // view possible options at http://iamceege.github.io/tooltipster/
- type: Object,
- default: function () { return {}; }
- },
- showClosebutton: {
- type: Boolean,
- default: true
- }
- },
- watch: {
- label: function (newLabel) { // if label change need to wath in order to update content to tooltipster!
- if (newLabel) {
- $(this.$refs.tooltipster.children[0]).tooltipster({
- content: newLabel
- });
- } else {
- $(this.$refs.tooltipster.children[0]).tooltipster({
- content: _.get(this.$slots, 'content[0].elm')
- });
- }
- }
- }
- }
-</script>
-
-<style scoped>
- .hidden {
- display: none;
- }
- .p-xs {
- padding: 5px;
- }
- .btn {
- padding-top:2px;
- padding-bottom:2px;
- padding-left:10px;
- padding-right:10px;
- cursor: pointer;
- border: 1px solid black;
- border-radius: 25px;
- }
- .pull-right {
- float: right;
- }
- div {
- color: black;
- }
-</style>
--
GitLab