Merge pull request #418 from Budibase/colorpicker/moz-prefixes-and-x-pos-awareness
Moz Prefixes and X Positional Awareness
This commit is contained in:
Conor_Mack
GitHub
commit
80b5ec4ed9
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import {buildStyle} from "../helpers.js"
|
import { buildStyle } from "../helpers.js"
|
||||||
import { fade } from "svelte/transition"
|
import { fade } from "svelte/transition"
|
||||||
|
|
||||||
export let backgroundSize = "10px"
|
export let backgroundSize = "10px"
|
||||||
|
|
@ -20,5 +20,7 @@
|
||||||
background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
|
background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
height: -moz-fit-content;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,267 +1,184 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount, createEventDispatcher } from "svelte"
|
import { onMount, createEventDispatcher } from "svelte";
|
||||||
import { fade } from "svelte/transition"
|
import { fade } from "svelte/transition";
|
||||||
import Swatch from "./Swatch.svelte"
|
import Swatch from "./Swatch.svelte";
|
||||||
import CheckedBackground from "./CheckedBackground.svelte"
|
import CheckedBackground from "./CheckedBackground.svelte";
|
||||||
import { buildStyle } from "../helpers.js"
|
import { buildStyle } from "../helpers.js";
|
||||||
import {
|
import {
|
||||||
getColorFormat,
|
getColorFormat,
|
||||||
convertToHSVA,
|
convertToHSVA,
|
||||||
convertHsvaToFormat,
|
convertHsvaToFormat
|
||||||
} from "../utils.js"
|
} from "../utils.js";
|
||||||
import Slider from "./Slider.svelte"
|
import Slider from "./Slider.svelte";
|
||||||
import Palette from "./Palette.svelte"
|
import Palette from "./Palette.svelte";
|
||||||
import ButtonGroup from "./ButtonGroup.svelte"
|
import ButtonGroup from "./ButtonGroup.svelte";
|
||||||
import Input from "./Input.svelte"
|
import Input from "./Input.svelte";
|
||||||
import Portal from "./Portal.svelte"
|
import Portal from "./Portal.svelte";
|
||||||
import { keyevents } from "../actions"
|
import { keyevents } from "../actions";
|
||||||
|
|
||||||
export let value = "#3ec1d3ff"
|
export let value = "#3ec1d3ff";
|
||||||
export let open = false
|
export let open = false;
|
||||||
export let swatches = []
|
export let swatches = [];
|
||||||
|
|
||||||
export let disableSwatches = false
|
export let disableSwatches = false;
|
||||||
export let format = "hexa"
|
export let format = "hexa";
|
||||||
export let style = ""
|
export let style = "";
|
||||||
export let pickerHeight = 0
|
export let pickerHeight = 0;
|
||||||
export let pickerWidth = 0
|
export let pickerWidth = 0;
|
||||||
|
|
||||||
let colorPicker = null
|
let colorPicker = null;
|
||||||
let adder = null
|
let adder = null;
|
||||||
let swatchesSetFromLocalStore = false
|
let swatchesSetFromLocalStore = false;
|
||||||
|
|
||||||
let h = 0
|
let h = 0;
|
||||||
let s = 0
|
let s = 0;
|
||||||
let v = 0
|
let v = 0;
|
||||||
let a = 0
|
let a = 0;
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
if (!swatches.length > 0) {
|
if (!swatches.length > 0) {
|
||||||
//Don't use locally stored recent colors if swatches have been passed as props
|
//Don't use locally stored recent colors if swatches have been passed as props
|
||||||
swatchesSetFromLocalStore = true
|
swatchesSetFromLocalStore = true;
|
||||||
swatches = getRecentColors() || []
|
swatches = getRecentColors() || [];
|
||||||
}
|
}
|
||||||
|
|
||||||
if (swatches.length > 12) {
|
if (swatches.length > 12) {
|
||||||
console.warn(
|
console.warn(
|
||||||
`Colorpicker - ${swatches.length} swatches were provided. Only the first 12 swatches will be displayed.`
|
`Colorpicker - ${swatches.length} swatches were provided. Only the first 12 swatches will be displayed.`
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (colorPicker) {
|
if (colorPicker) {
|
||||||
colorPicker.focus()
|
colorPicker.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (format) {
|
if (format) {
|
||||||
convertAndSetHSVA()
|
convertAndSetHSVA();
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
function getRecentColors() {
|
function getRecentColors() {
|
||||||
let colorStore = localStorage.getItem("cp:recent-colors")
|
let colorStore = localStorage.getItem("cp:recent-colors");
|
||||||
if (colorStore) {
|
if (colorStore) {
|
||||||
return JSON.parse(colorStore)
|
return JSON.parse(colorStore);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleEscape() {
|
function handleEscape() {
|
||||||
if (open) {
|
if (open) {
|
||||||
open = false
|
open = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function setRecentColors(color) {
|
function setRecentColors(color) {
|
||||||
const s = swatchesSetFromLocalStore
|
const s = swatchesSetFromLocalStore
|
||||||
? swatches
|
? swatches
|
||||||
: [...getRecentColors(), color]
|
: [...getRecentColors(), color];
|
||||||
localStorage.setItem("cp:recent-colors", JSON.stringify(s))
|
localStorage.setItem("cp:recent-colors", JSON.stringify(s));
|
||||||
}
|
}
|
||||||
|
|
||||||
function convertAndSetHSVA() {
|
function convertAndSetHSVA() {
|
||||||
let hsva = convertToHSVA(value, format)
|
let hsva = convertToHSVA(value, format);
|
||||||
setHSVA(hsva)
|
setHSVA(hsva);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setHSVA([hue, sat, val, alpha]) {
|
function setHSVA([hue, sat, val, alpha]) {
|
||||||
h = hue
|
h = hue;
|
||||||
s = sat
|
s = sat;
|
||||||
v = val
|
v = val;
|
||||||
a = alpha
|
a = alpha;
|
||||||
}
|
}
|
||||||
|
|
||||||
//fired by choosing a color from the palette
|
//fired by choosing a color from the palette
|
||||||
function setSaturationAndValue({ detail }) {
|
function setSaturationAndValue({ detail }) {
|
||||||
s = detail.s
|
s = detail.s;
|
||||||
v = detail.v
|
v = detail.v;
|
||||||
value = convertHsvaToFormat([h, s, v, a], format)
|
value = convertHsvaToFormat([h, s, v, a], format);
|
||||||
dispatchValue()
|
dispatchValue();
|
||||||
}
|
}
|
||||||
|
|
||||||
function setHue({ color, isDrag }) {
|
function setHue({ color, isDrag }) {
|
||||||
h = color
|
h = color;
|
||||||
value = convertHsvaToFormat([h, s, v, a], format)
|
value = convertHsvaToFormat([h, s, v, a], format);
|
||||||
if (!isDrag) {
|
if (!isDrag) {
|
||||||
dispatchValue()
|
dispatchValue();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function setAlpha({ color, isDrag }) {
|
function setAlpha({ color, isDrag }) {
|
||||||
a = color === "1.00" ? "1" : color
|
a = color === "1.00" ? "1" : color;
|
||||||
value = convertHsvaToFormat([h, s, v, a], format)
|
value = convertHsvaToFormat([h, s, v, a], format);
|
||||||
if (!isDrag) {
|
if (!isDrag) {
|
||||||
dispatchValue()
|
dispatchValue();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function dispatchValue() {
|
function dispatchValue() {
|
||||||
dispatch("change", value)
|
dispatch("change", value);
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeFormatAndConvert(f) {
|
function changeFormatAndConvert(f) {
|
||||||
format = f
|
format = f;
|
||||||
value = convertHsvaToFormat([h, s, v, a], format)
|
value = convertHsvaToFormat([h, s, v, a], format);
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleColorInput(text) {
|
function handleColorInput(text) {
|
||||||
let format = getColorFormat(text)
|
let format = getColorFormat(text);
|
||||||
if (format) {
|
if (format) {
|
||||||
value = text
|
value = text;
|
||||||
convertAndSetHSVA()
|
convertAndSetHSVA();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function dispatchInputChange() {
|
function dispatchInputChange() {
|
||||||
if (format) {
|
if (format) {
|
||||||
dispatchValue()
|
dispatchValue();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function addSwatch() {
|
function addSwatch() {
|
||||||
if (format) {
|
if (format) {
|
||||||
if (swatches.length === 12) {
|
if (swatches.length === 12) {
|
||||||
swatches.splice(0, 1)
|
swatches.splice(0, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!swatches.includes(value)) {
|
if (!swatches.includes(value)) {
|
||||||
swatches = [...swatches, value]
|
swatches = [...swatches, value];
|
||||||
setRecentColors(value)
|
setRecentColors(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
dispatch("addswatch", value)
|
dispatch("addswatch", value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeSwatch(idx) {
|
function removeSwatch(idx) {
|
||||||
let removedSwatch = swatches.splice(idx, 1)
|
let removedSwatch = swatches.splice(idx, 1);
|
||||||
swatches = swatches
|
swatches = swatches;
|
||||||
dispatch("removeswatch", removedSwatch)
|
dispatch("removeswatch", removedSwatch);
|
||||||
if (swatchesSetFromLocalStore) {
|
if (swatchesSetFromLocalStore) {
|
||||||
//as could be a swatch not present in local storage
|
//as could be a swatch not present in local storage
|
||||||
setRecentColors()
|
setRecentColors();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function applySwatch(color) {
|
function applySwatch(color) {
|
||||||
if (value !== color) {
|
if (value !== color) {
|
||||||
format = getColorFormat(color)
|
format = getColorFormat(color);
|
||||||
if (format) {
|
if (format) {
|
||||||
value = color
|
value = color;
|
||||||
convertAndSetHSVA()
|
convertAndSetHSVA();
|
||||||
dispatchValue()
|
dispatchValue();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
|
$: border = v > 90 && s < 5 ? "1px dashed #dedada" : "";
|
||||||
$: selectedColorStyle = buildStyle({ background: value, border })
|
$: selectedColorStyle = buildStyle({ background: value, border });
|
||||||
$: hasSwatches = swatches.length > 0
|
$: hasSwatches = swatches.length > 0;
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Portal>
|
|
||||||
<div
|
|
||||||
class="colorpicker-container"
|
|
||||||
use:keyevents={{ Escape: handleEscape }}
|
|
||||||
transition:fade
|
|
||||||
bind:this={colorPicker}
|
|
||||||
{style}
|
|
||||||
tabindex="0"
|
|
||||||
bind:clientHeight={pickerHeight}
|
|
||||||
bind:clientWidth={pickerWidth}>
|
|
||||||
|
|
||||||
<div class="palette-panel">
|
|
||||||
<Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="control-panel">
|
|
||||||
<div class="alpha-hue-panel">
|
|
||||||
<div>
|
|
||||||
<CheckedBackground borderRadius="50%" backgroundSize="8px">
|
|
||||||
<div
|
|
||||||
class="selected-color"
|
|
||||||
title={value}
|
|
||||||
style={selectedColorStyle} />
|
|
||||||
</CheckedBackground>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Slider
|
|
||||||
type="hue"
|
|
||||||
value={h}
|
|
||||||
on:change={hue => setHue(hue.detail)}
|
|
||||||
on:dragend={dispatchValue} />
|
|
||||||
|
|
||||||
<CheckedBackground borderRadius="10px" backgroundSize="7px">
|
|
||||||
<Slider
|
|
||||||
type="alpha"
|
|
||||||
value={a}
|
|
||||||
on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
|
|
||||||
on:dragend={dispatchValue} />
|
|
||||||
</CheckedBackground>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if !disableSwatches}
|
|
||||||
<div transition:fade class="swatch-panel">
|
|
||||||
{#if hasSwatches}
|
|
||||||
{#each swatches as color, idx}
|
|
||||||
{#if idx < 12}
|
|
||||||
<Swatch
|
|
||||||
{color}
|
|
||||||
on:click={() => applySwatch(color)}
|
|
||||||
on:removeswatch={() => removeSwatch(idx)} />
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
{/if}
|
|
||||||
{#if swatches.length < 12}
|
|
||||||
<div
|
|
||||||
tabindex="0"
|
|
||||||
use:keyevents={{ Enter: addSwatch }}
|
|
||||||
bind:this={adder}
|
|
||||||
transition:fade
|
|
||||||
class="adder"
|
|
||||||
class:shrink={hasSwatches}
|
|
||||||
on:click={addSwatch}>
|
|
||||||
<span>+</span>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="format-input-panel">
|
|
||||||
<ButtonGroup {format} onclick={changeFormatAndConvert} />
|
|
||||||
<Input
|
|
||||||
{value}
|
|
||||||
on:input={event => handleColorInput(event.target.value)}
|
|
||||||
on:change={dispatchInputChange} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</Portal>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.colorpicker-container {
|
.colorpicker-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -347,3 +264,86 @@
|
||||||
padding-top: 3px;
|
padding-top: 3px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<Portal>
|
||||||
|
<div
|
||||||
|
class="colorpicker-container"
|
||||||
|
use:keyevents={{ Escape: handleEscape }}
|
||||||
|
transition:fade
|
||||||
|
bind:this={colorPicker}
|
||||||
|
{style}
|
||||||
|
tabindex="0"
|
||||||
|
bind:clientHeight={pickerHeight}
|
||||||
|
bind:clientWidth={pickerWidth}>
|
||||||
|
|
||||||
|
<div class="palette-panel">
|
||||||
|
<Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control-panel">
|
||||||
|
<div class="alpha-hue-panel">
|
||||||
|
<div>
|
||||||
|
<CheckedBackground borderRadius="50%" backgroundSize="8px">
|
||||||
|
<div
|
||||||
|
class="selected-color"
|
||||||
|
title={value}
|
||||||
|
style={selectedColorStyle} />
|
||||||
|
</CheckedBackground>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Slider
|
||||||
|
type="hue"
|
||||||
|
value={h}
|
||||||
|
on:change={hue => setHue(hue.detail)}
|
||||||
|
on:dragend={dispatchValue} />
|
||||||
|
|
||||||
|
<CheckedBackground borderRadius="10px" backgroundSize="7px">
|
||||||
|
<Slider
|
||||||
|
type="alpha"
|
||||||
|
value={a}
|
||||||
|
on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
|
||||||
|
on:dragend={dispatchValue} />
|
||||||
|
</CheckedBackground>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if !disableSwatches}
|
||||||
|
<div transition:fade class="swatch-panel">
|
||||||
|
{#if hasSwatches}
|
||||||
|
{#each swatches as color, idx}
|
||||||
|
{#if idx < 12}
|
||||||
|
<Swatch
|
||||||
|
{color}
|
||||||
|
on:click={() => applySwatch(color)}
|
||||||
|
on:removeswatch={() => removeSwatch(idx)} />
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
{#if swatches.length < 12}
|
||||||
|
<div
|
||||||
|
tabindex="0"
|
||||||
|
title="Add Swatch"
|
||||||
|
use:keyevents={{ Enter: addSwatch }}
|
||||||
|
bind:this={adder}
|
||||||
|
transition:fade
|
||||||
|
class="adder"
|
||||||
|
class:shrink={hasSwatches}
|
||||||
|
on:click={addSwatch}>
|
||||||
|
<span>+</span>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="format-input-panel">
|
||||||
|
<ButtonGroup {format} onclick={changeFormatAndConvert} />
|
||||||
|
<Input
|
||||||
|
{value}
|
||||||
|
on:input={event => handleColorInput(event.target.value)}
|
||||||
|
on:change={dispatchInputChange} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Portal>
|
||||||
|
|
|
||||||
|
|
@ -1,93 +1,141 @@
|
||||||
<script>
|
<script>
|
||||||
import Colorpicker from "./Colorpicker.svelte"
|
import Colorpicker from "./Colorpicker.svelte";
|
||||||
import CheckedBackground from "./CheckedBackground.svelte"
|
import CheckedBackground from "./CheckedBackground.svelte";
|
||||||
import { createEventDispatcher, beforeUpdate, onMount } from "svelte"
|
import { createEventDispatcher, beforeUpdate, onMount } from "svelte";
|
||||||
|
|
||||||
import { buildStyle, debounce } from "../helpers.js"
|
import { buildStyle, debounce } from "../helpers.js";
|
||||||
import { fade } from "svelte/transition"
|
import { fade } from "svelte/transition";
|
||||||
import { getColorFormat } from "../utils.js"
|
import { getColorFormat } from "../utils.js";
|
||||||
|
|
||||||
export let value = "#3ec1d3ff"
|
export let value = "#3ec1d3ff";
|
||||||
export let swatches = []
|
export let swatches = [];
|
||||||
export let disableSwatches = false
|
export let disableSwatches = false;
|
||||||
export let open = false
|
export let open = false;
|
||||||
export let width = "25px"
|
export let width = "25px";
|
||||||
export let height = "25px"
|
export let height = "25px";
|
||||||
|
|
||||||
let format = "hexa"
|
let format = "hexa";
|
||||||
let dimensions = { top: 0, bottom: 0, right: 0, left: 0 }
|
let dimensions = { top: 0, bottom: 0, right: 0, left: 0 };
|
||||||
let positionSide = "top"
|
let positionY = "top";
|
||||||
let colorPreview = null
|
let positionX = "left";
|
||||||
|
let colorPreview = null;
|
||||||
|
|
||||||
let previewHeight = null
|
let previewHeight = null;
|
||||||
let previewWidth = null
|
let previewWidth = null;
|
||||||
let pickerWidth = 0
|
let pickerWidth = 0;
|
||||||
let pickerHeight = 0
|
let pickerHeight = 0;
|
||||||
|
|
||||||
let errorMsg = null
|
let errorMsg = null;
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
beforeUpdate(() => {
|
beforeUpdate(() => {
|
||||||
format = getColorFormat(value)
|
format = getColorFormat(value);
|
||||||
if (!format) {
|
if (!format) {
|
||||||
errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
|
errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`;
|
||||||
console.error(errorMsg)
|
console.error(errorMsg);
|
||||||
} else {
|
} else {
|
||||||
errorMsg = null
|
errorMsg = null;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
function openColorpicker(event) {
|
function openColorpicker(event) {
|
||||||
if (colorPreview) {
|
if (colorPreview) {
|
||||||
open = true
|
open = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onColorChange(color) {
|
function onColorChange(color) {
|
||||||
value = color.detail
|
value = color.detail;
|
||||||
dispatch("change", color.detail)
|
dispatch("change", color.detail);
|
||||||
}
|
}
|
||||||
|
|
||||||
function calculateDimensions() {
|
function calculateDimensions() {
|
||||||
const {
|
if (open) {
|
||||||
top: spaceAbove,
|
const {
|
||||||
width,
|
top: spaceAbove,
|
||||||
bottom,
|
width,
|
||||||
right,
|
bottom,
|
||||||
left,
|
right,
|
||||||
} = colorPreview.getBoundingClientRect()
|
left
|
||||||
|
} = colorPreview.getBoundingClientRect();
|
||||||
|
|
||||||
const spaceBelow = window.innerHeight - bottom
|
const spaceBelow = window.innerHeight - bottom;
|
||||||
const previewCenter = previewWidth / 2
|
const previewCenter = previewWidth / 2;
|
||||||
|
|
||||||
let y, x
|
let y, x;
|
||||||
|
|
||||||
if (spaceAbove > spaceBelow) {
|
if (spaceAbove > spaceBelow) {
|
||||||
positionSide = "bottom"
|
positionY = "bottom";
|
||||||
y = window.innerHeight - spaceAbove
|
y = window.innerHeight - spaceAbove;
|
||||||
} else {
|
} else {
|
||||||
positionSide = "top"
|
positionY = "top";
|
||||||
y = bottom
|
y = bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Centre picker by default
|
||||||
|
x = left + previewCenter - 220 / 2;
|
||||||
|
|
||||||
|
const spaceRight = window.innerWidth - right;
|
||||||
|
|
||||||
|
//Position picker left or right if space not available for centering
|
||||||
|
if (left < 110 && spaceRight > 220) {
|
||||||
|
positionX = "left";
|
||||||
|
x = right;
|
||||||
|
} else if (spaceRight < 100 && left > 220) {
|
||||||
|
positionX = "right";
|
||||||
|
x = document.body.clientWidth - left;
|
||||||
|
}
|
||||||
|
|
||||||
|
dimensions = { [positionY]: y.toFixed(1), [positionX]: x.toFixed(1) };
|
||||||
}
|
}
|
||||||
|
|
||||||
x = left + previewCenter - 220 / 2
|
|
||||||
|
|
||||||
dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$: if (open && colorPreview) {
|
$: if (open && colorPreview) {
|
||||||
calculateDimensions()
|
calculateDimensions();
|
||||||
}
|
}
|
||||||
|
|
||||||
$: previewStyle = buildStyle({ width, height, background: value })
|
$: previewStyle = buildStyle({ width, height, background: value });
|
||||||
$: errorPreviewStyle = buildStyle({ width, height })
|
$: errorPreviewStyle = buildStyle({ width, height });
|
||||||
$: pickerStyle = buildStyle({
|
$: pickerStyle = buildStyle({
|
||||||
[positionSide]: `${dimensions[positionSide]}px`,
|
[positionY]: `${dimensions[positionY]}px`,
|
||||||
left: `${dimensions.left}px`,
|
[positionX]: `${dimensions[positionX]}px`
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.color-preview-container {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-preview {
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #dedada;
|
||||||
|
position: absolute;
|
||||||
|
left: 110px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-error {
|
||||||
|
background: #cccccc;
|
||||||
|
color: #808080;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<svelte:window on:resize={debounce(calculateDimensions, 200)} />
|
<svelte:window on:resize={debounce(calculateDimensions, 200)} />
|
||||||
|
|
||||||
<div class="color-preview-container">
|
<div class="color-preview-container">
|
||||||
|
|
@ -127,41 +175,3 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
|
||||||
.color-preview-container {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row nowrap;
|
|
||||||
height: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-preview {
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 3px;
|
|
||||||
border: 1px solid #dedada;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-error {
|
|
||||||
background: #cccccc;
|
|
||||||
color: #808080;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 18px;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .picker-container {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 3;
|
|
||||||
width: fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
} */
|
|
||||||
|
|
||||||
.overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue