Skip to content
Snippets Groups Projects
Commit caf9dded authored by Ole Voldsæter's avatar Ole Voldsæter
Browse files

byttet de kompliserte tooltip-greiene ut med details (html-tag)

parent 78e4186e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
package.json
+ 0
− 3
View file @ caf9dded
......@@ -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"
......
src/components/Header.vue
+ 44
− 30
View file @ caf9dded
<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>
src/components/vue-tooltipster.vue deleted 100644 → 0
+ 0
− 176
View file @ 78e4186e
<!-- 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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment