2018-02-28 08:18:07 +01:00
|
|
|
{{#if delegateKey}}
|
2018-01-28 21:51:48 +01:00
|
|
|
<button type="button"
|
|
|
|
aria-label="{{label}}"
|
2018-02-28 08:18:07 +01:00
|
|
|
aria-pressed="{{pressable ? !!pressed : ''}}"
|
2018-02-24 23:49:28 +01:00
|
|
|
class="{{computedClass}}"
|
2018-02-28 08:18:07 +01:00
|
|
|
:disabled
|
2018-03-17 03:04:48 +01:00
|
|
|
delegate-key="{{delegateKey}}"
|
|
|
|
focus-key="{{focusKey || ''}}" >
|
2018-03-21 17:38:20 +01:00
|
|
|
<svg class="icon-button-svg" ref:svg>
|
2018-01-28 21:51:48 +01:00
|
|
|
<use xlink:href="{{href}}" />
|
|
|
|
</svg>
|
|
|
|
</button>
|
|
|
|
{{else}}
|
|
|
|
<button type="button"
|
|
|
|
aria-label="{{label}}"
|
2018-02-28 08:18:07 +01:00
|
|
|
aria-pressed="{{pressable ? !!pressed : ''}}"
|
2018-02-24 23:49:28 +01:00
|
|
|
class="{{computedClass}}"
|
2018-03-17 03:04:48 +01:00
|
|
|
focus-key="{{focusKey || ''}}"
|
2018-02-28 08:18:07 +01:00
|
|
|
:disabled
|
|
|
|
on:click >
|
2018-03-21 17:38:20 +01:00
|
|
|
<svg class="icon-button-svg" ref:svg>
|
2018-01-28 21:51:48 +01:00
|
|
|
<use xlink:href="{{href}}" />
|
|
|
|
</svg>
|
|
|
|
</button>
|
|
|
|
{{/if}}
|
|
|
|
<style>
|
2018-03-16 16:42:10 +01:00
|
|
|
.icon-button {
|
2018-01-28 21:51:48 +01:00
|
|
|
padding: 6px 10px;
|
|
|
|
background: none;
|
|
|
|
border: none;
|
|
|
|
}
|
|
|
|
|
2018-03-16 16:42:10 +01:00
|
|
|
.icon-button-svg {
|
2018-01-28 21:51:48 +01:00
|
|
|
width: 24px;
|
|
|
|
height: 24px;
|
|
|
|
fill: var(--action-button-fill-color);
|
2018-03-23 04:09:20 +01:00
|
|
|
pointer-events: none; /* hack for Edge */
|
2018-01-28 21:51:48 +01:00
|
|
|
}
|
|
|
|
|
2018-03-16 16:42:10 +01:00
|
|
|
.icon-button.big-icon .icon-button-svg {
|
2018-01-28 21:51:48 +01:00
|
|
|
width: 32px;
|
|
|
|
height: 32px;
|
|
|
|
}
|
|
|
|
|
2018-03-16 16:42:10 +01:00
|
|
|
.icon-button:hover .icon-button-svg {
|
2018-01-28 21:51:48 +01:00
|
|
|
fill: var(--action-button-fill-color-hover);
|
|
|
|
}
|
|
|
|
|
2018-03-16 16:42:10 +01:00
|
|
|
.icon-button.not-pressable:active .icon-button-svg {
|
2018-01-28 21:51:48 +01:00
|
|
|
fill: var(--action-button-fill-color-active);
|
|
|
|
}
|
|
|
|
|
2018-03-16 16:42:10 +01:00
|
|
|
.icon-button.pressed .icon-button-svg {
|
2018-03-21 17:38:20 +01:00
|
|
|
fill: var(--action-button-fill-color-pressed);
|
2018-01-28 21:51:48 +01:00
|
|
|
}
|
|
|
|
|
2018-03-16 16:42:10 +01:00
|
|
|
.icon-button.pressed:hover .icon-button-svg {
|
2018-01-28 21:51:48 +01:00
|
|
|
fill: var(--action-button-fill-color-pressed-hover);
|
|
|
|
}
|
|
|
|
|
2018-03-16 16:42:10 +01:00
|
|
|
.icon-button.pressed:active .icon-button-svg {
|
2018-01-28 21:51:48 +01:00
|
|
|
fill: var(--action-button-fill-color-pressed-active);
|
|
|
|
}
|
2018-02-24 23:49:28 +01:00
|
|
|
</style>
|
|
|
|
<script>
|
2018-03-15 02:52:33 +01:00
|
|
|
|
|
|
|
import { classname } from '../_utils/classname'
|
|
|
|
|
2018-02-24 23:49:28 +01:00
|
|
|
export default {
|
2018-03-21 17:38:20 +01:00
|
|
|
oncreate() {
|
|
|
|
this.observe('animation', animation => {
|
|
|
|
if (!animation) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
let svg = this.refs.svg
|
|
|
|
let animations = animation.map(({properties, options}) => svg.animate(properties, options))
|
|
|
|
animations.forEach(anim => anim.play())
|
|
|
|
})
|
|
|
|
},
|
2018-02-24 23:49:28 +01:00
|
|
|
computed: {
|
2018-03-03 06:55:04 +01:00
|
|
|
computedClass: (pressable, pressed, big, className) => {
|
2018-03-15 02:52:33 +01:00
|
|
|
return classname(
|
2018-02-24 23:49:28 +01:00
|
|
|
'icon-button',
|
|
|
|
!pressable && 'not-pressable',
|
|
|
|
pressed && 'pressed',
|
|
|
|
big && 'big-icon',
|
2018-03-03 06:55:04 +01:00
|
|
|
className
|
2018-03-15 02:52:33 +01:00
|
|
|
)
|
2018-02-24 23:49:28 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|