-
Notifications
You must be signed in to change notification settings - Fork 0
/
tk-explain.html
94 lines (81 loc) · 2.56 KB
/
tk-explain.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-tooltip/paper-tooltip.html">
<!--
`tk-explain` is a simple text component that highlights the text within it and adds a tooltip
to it so that users can mouseover the word to see why its highlighted.
Example:
<tk-explain>No tooltip here</tk-explain>
<tk-explain label="Laughing out loud">LOL</tk-explain>
### Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--tk-explain-line` | text-decoration line type | `underline`
`--tk-explain-style` | text-decoration line style | `dashed`
`--tk-explain-color` | text-decoration lin color | `--paper-light-blue-a400`
`--tk-explain` | Mixin applied to host | `{}`
`--tk-explain-tooltip-margin-top` | Number of pixels to adjust the position of the tooltip | `15px`
@customElement
@polymer
@demo demo/index.html
-->
<dom-module id="tk-explain">
<template>
<style>
:host(:not([disabled])) {
--tk-explain-line: underline;
--tk-explain-style: dashed;
--tk-explain-color: var(--paper-light-blue-a400);
--tk-explain-tooltip-margin-top: 15px;
display: inline-block;
text-decoration-line: var(--tk-explain-line);
text-decoration-style: var(--tk-explain-style);
text-decoration-color: var(--tk-explain-color);
@apply --tk-explain;
}
paper-tooltip[position=top] {
margin-top: var(--tk-explain-tooltip-margin-top);
}
</style>
<paper-tooltip position="top">
[[label]]
</paper-tooltip>
<slot></slot>
</template>
<script>
class TkExplain extends Polymer.Element {
static get is() { return 'tk-explain'; }
static get properties() {
return {
/**
* Is this element effectively disabled. Ie. No tooltip or CSS decorations are used.
* @type {boolean}
*/
disabled: {
type: Boolean,
computed: '_computeDisabled(label)',
reflectToAttribute: true
},
/**
* The label to be displayed above this element on mouseover.
* @type {string}
*/
label: {
type: String,
value: ''
}
};
}
/**
* Compute the disabled attribute based on the value of the label property.
* @param {string} label The string to set the label to.
* @return {boolean} Whether this element is disabled or not.
*/
_computeDisabled(value) {
return value.length == 0;
}
}
window.customElements.define(TkExplain.is, TkExplain);
</script>
</dom-module>