pinafore/routes/_components/IconButton.html

144 lines
3.5 KiB
HTML
Raw Normal View History

{#if delegateKey}
2018-01-28 21:51:48 +01:00
<button type="button"
title={label}
aria-label={label}
aria-pressed={pressable ? !!pressed : ''}
class={computedClass}
{disabled}
delegate-key={delegateKey}
focus-key={focusKey || ''} >
<svg class="icon-button-svg {svgClassName || ''}" ref:svg>
<use xlink:href={href} />
2018-01-28 21:51:48 +01:00
</svg>
</button>
{:else}
2018-01-28 21:51:48 +01:00
<button type="button"
title={label}
aria-label={label}
aria-pressed={pressable ? !!pressed : ''}
class={computedClass}
focus-key={focusKey || ''}
{disabled}
2018-02-28 08:18:07 +01:00
on:click >
<svg class="icon-button-svg {svgClassName || ''}" ref:svg>
<use xlink:href={href} />
2018-01-28 21:51:48 +01:00
</svg>
</button>
{/if}
2018-01-28 21:51:48 +01:00
<style>
.icon-button {
2018-01-28 21:51:48 +01:00
padding: 6px 10px;
background: none;
border: none;
2018-04-05 06:45:19 +02:00
display: flex;
align-items: center;
justify-content: center;
2018-01-28 21:51:48 +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
}
.icon-button.big-icon .icon-button-svg {
2018-01-28 21:51:48 +01:00
width: 32px;
height: 32px;
}
2018-04-05 06:45:19 +02:00
/*
* regular styles
*/
.icon-button:hover .icon-button-svg {
2018-01-28 21:51:48 +01:00
fill: var(--action-button-fill-color-hover);
}
.icon-button.not-pressable:active .icon-button-svg {
2018-01-28 21:51:48 +01:00
fill: var(--action-button-fill-color-active);
}
.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
}
.icon-button.pressed:hover .icon-button-svg {
2018-01-28 21:51:48 +01:00
fill: var(--action-button-fill-color-pressed-hover);
}
.icon-button.pressed:active .icon-button-svg {
2018-01-28 21:51:48 +01:00
fill: var(--action-button-fill-color-pressed-active);
}
2018-04-05 06:45:19 +02:00
/*
* muted
*/
.icon-button.muted-style .icon-button-svg {
fill: var(--action-button-deemphasized-fill-color);
}
.icon-button.muted-style:hover .icon-button-svg {
fill: var(--action-button-deemphasized-fill-color-hover);
}
.icon-button.muted-style.not-pressable:active .icon-button-svg {
fill: var(--action-button-deemphasized-fill-color-active);
}
.icon-button.muted-style.pressed .icon-button-svg {
fill: var(--action-button-deemphasized-fill-color-pressed);
}
.icon-button.muted-style.pressed:hover .icon-button-svg {
fill: var(--action-button-deemphasized-fill-color-pressed-hover);
}
.icon-button.muted-style.pressed:active .icon-button-svg {
fill: var(--action-button-deemphasized-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-03-23 04:23:00 +01:00
import { store } from '../_store/store'
2018-03-15 02:52:33 +01:00
2018-02-24 23:49:28 +01:00
export default {
data: () => ({
big: false,
muted: false,
disabled: false,
svgClassName: void 0,
focusKey: void 0,
pressable: false,
pressed: false,
className: void 0,
delegateKey: void 0
}),
2018-03-23 04:23:00 +01:00
store: () => store,
2018-02-24 23:49:28 +01:00
computed: {
computedClass: ({ pressable, pressed, big, muted, 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-04-05 06:45:19 +02:00
muted && 'muted-style',
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
}
2018-04-21 17:32:40 +02:00
},
methods: {
animate (animation) {
let { reduceMotion } = this.store.get()
if (!animation || reduceMotion) {
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
}
}
</script>