Verified Commit 39dfeb99 authored by Frauke's avatar Frauke

Merge branch 'master' into safari-autofill-solution

parents 3b364c2a a1b9747b
<template>
<ul class="color-picker" :style="`width: calc(${columns} * 2rem); box-sizing: content-box`">
<li v-for="color in mutableColors" :key="color.name"
class="color-picker__color"
:aria-label="color.name"
:style="`background-color: ${color.hex}`"
:tabIndex="color.hex === value.hex ? 0 : -1"
:data-color="JSON.stringify(color)"
@keydown.up.prevent="colorUp"
@keydown.down.prevent="colorDown"
@keydown.left.prevent="colorLeft"
@keydown.right.prevent="colorRight"
@click="$emit('input', color)">
</li>
</ul>
<fieldset class="color-picker" :style="`width: calc(${columns} * 2rem);`">
<template v-for="(color, index) in mutableColors">
<input type="radio"
class="color-picker__radio visually-hidden"
:id="`color-picker_${_uid}_${index}`"
:name="`color-picker_${_uid}`"
:checked="color.hex === value.hex"
@input="$emit('input', color)"/>
<label class="color-picker__color"
:for="`color-picker_${_uid}_${index}`"
:style="`background-color: ${color.hex}`"
:data-color="JSON.stringify(color)">
{{color.name}}
</label>
</template>
</fieldset>
</template>
<script>
export default {
name: "colorPicker",
components: {},
props: {
colors: {
type: Array,
default: []
export default {
name: 'colorPicker',
components: {},
props: {
colors: {
type: Array,
default: []
},
columns: {
type: Number,
default: 5
},
value: Object
},
columns: {
type: Number,
default: 5
computed: {
mutableColors () {
return this.colors.map(color => {
if (!color.rgba && color.hex) {
color.rgba = this.hexToRGBA(color.hex)
}
return color
})
}
},
value: Object
},
computed: {
mutableColors() {
return this.colors.map(color => {
if (!color.rgba && color.hex) {
color.rgba = this.hexToRGBA(color.hex);
methods: {
hexToRGBA (hex) {
return {
r: parseInt(hex.slice(1, 3), 16),
g: parseInt(hex.slice(3, 5), 16),
b: parseInt(hex.slice(5, 7), 16),
a: parseInt(hex.slice(7, 9), 16) || 1.0
}
return color;
});
}
},
mounted() {
if (
!this.mutableColors.find(color => {
return color.hex === this.value.hex;
})
) {
this.$el.querySelector("li:first-of-type").tabIndex = 0;
}
},
methods: {
hexToRGBA(hex) {
return {
r: parseInt(hex.slice(1, 3), 16),
g: parseInt(hex.slice(3, 5), 16),
b: parseInt(hex.slice(5, 7), 16),
a: parseInt(hex.slice(7, 9), 16) || 1.0
};
},
colorUp(e) {
e.target.tabIndex = -1;
const index = Array.from(e.target.parentNode.children).indexOf(e.target);
this.updateColor(
Array.from(e.target.parentNode.children)[index - this.columns] ||
Array.from(e.target.parentNode.children)[
e.target.parentNode.children.length - (this.columns - index)
]
);
},
colorDown(e) {
e.target.tabIndex = -1;
const index = Array.from(e.target.parentNode.children).indexOf(e.target);
this.updateColor(
Array.from(e.target.parentNode.children)[index + this.columns] ||
Array.from(e.target.parentNode.children)[index % this.columns]
);
},
colorLeft(e) {
e.target.tabIndex = -1;
this.updateColor(
e.target.previousSibling || e.target.parentNode.lastChild
);
},
colorRight(e) {
e.target.tabIndex = -1;
this.updateColor(e.target.nextSibling || e.target.parentNode.firstChild);
},
updateColor(next) {
next.tabIndex = 0;
next.focus();
this.$emit("input", JSON.parse(next.getAttribute("data-color")));
},
}
}
};
</script>
<style>
.color-picker {
list-style: none;
display: grid;
grid-gap: 0.5rem;
grid-template-columns: repeat(auto-fill, 1.5rem);
margin: 0;
}
.color-picker {
box-sizing: content-box;
list-style: none;
display: grid;
grid-gap: 0.5rem;
grid-template-columns: repeat(auto-fill, 1.5rem);
margin: 0;
border: 0;
}
.color-picker__color {
height: 1.5rem;
width: 1.5rem;
transition: transform 0.1s ease-out;
}
.color-picker__color {
height: 1.5rem;
width: 1.5rem;
transition: transform 0.1s ease-out;
overflow: hidden;
text-indent: 200%;
}
.color-picker__color:hover,
.color-picker__color:focus {
outline: none;
transform: scale(1.5, 1.5);
}
label.color-picker__color:hover,
.color-picker__radio:focus + label.color-picker__color {
outline: none;
transform: scale(1.5, 1.5);
}
</style>
......@@ -5,7 +5,7 @@
<div class="columns">
<div class="column editable-image__image preview-box"
:aria-describedby="`editable-image__described-${_uid}`"
tabindex="0"
:tabindex="hasImage ? 0 : -1"
:style="imageStyle" ref="image"
@keydown.up="moveImageUp"
@keydown.down="moveImageDown"
......@@ -127,6 +127,9 @@
backgroundImage: this.imageUrl === null || this.imageUrl === undefined ? 'none' : `url(${this.imageUrl})`,
backgroundPosition: `${this.metaData.x}% ${this.metaData.y}%`
}
},
hasImage() {
return this.imageUrl
}
},
async mounted () {
......
Markdown is supported
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