Colorpicker - Portal and Centering
This commit is contained in:
parent
5baa33093d
commit
90c70e85ee
4 changed files with 168 additions and 132 deletions
|
@ -13,16 +13,18 @@
|
||||||
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"
|
||||||
|
|
||||||
export let value = "#3ec1d3ff"
|
export let value = "#3ec1d3ff"
|
||||||
|
export let open = false;
|
||||||
export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
|
export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
|
||||||
export let disableSwatches = false
|
export let disableSwatches = false
|
||||||
export let format = "hexa"
|
export let format = "hexa"
|
||||||
export let open = false
|
export let style = ""
|
||||||
|
|
||||||
export let pickerHeight = 0
|
export let pickerHeight = 0
|
||||||
export let pickerWidth = 0
|
export let pickerWidth = 0
|
||||||
|
|
||||||
|
let colorPicker = null
|
||||||
let adder = null
|
let adder = null
|
||||||
|
|
||||||
let h = null
|
let h = null
|
||||||
|
@ -38,6 +40,10 @@
|
||||||
getRecentColors()
|
getRecentColors()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(colorPicker) {
|
||||||
|
colorPicker.focus()
|
||||||
|
}
|
||||||
|
|
||||||
if (format) {
|
if (format) {
|
||||||
convertAndSetHSVA()
|
convertAndSetHSVA()
|
||||||
}
|
}
|
||||||
|
@ -50,6 +56,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleEscape(e) {
|
||||||
|
if(open && e.key === "Escape") {
|
||||||
|
open = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function setRecentColor(color) {
|
function setRecentColor(color) {
|
||||||
if (swatches.length === 12) {
|
if (swatches.length === 12) {
|
||||||
swatches.splice(0, 1)
|
swatches.splice(0, 1)
|
||||||
|
@ -145,12 +157,20 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
$: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
|
$: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
|
||||||
$: style = buildStyle({ background: value, border })
|
$: selectedColorStyle = buildStyle({ background: value, border })
|
||||||
$: shrink = swatches.length > 0
|
$: shrink = swatches.length > 0
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<Portal>
|
||||||
<div
|
<div
|
||||||
class="colorpicker-container"
|
class="colorpicker-container"
|
||||||
|
transition:fade
|
||||||
|
bind:this={colorPicker}
|
||||||
|
{style}
|
||||||
|
tabindex="0"
|
||||||
|
on:keydown={handleEscape}
|
||||||
bind:clientHeight={pickerHeight}
|
bind:clientHeight={pickerHeight}
|
||||||
bind:clientWidth={pickerWidth}>
|
bind:clientWidth={pickerWidth}>
|
||||||
|
|
||||||
|
@ -162,7 +182,7 @@
|
||||||
<div class="alpha-hue-panel">
|
<div class="alpha-hue-panel">
|
||||||
<div>
|
<div>
|
||||||
<CheckedBackground borderRadius="50%" backgroundSize="8px">
|
<CheckedBackground borderRadius="50%" backgroundSize="8px">
|
||||||
<div class="selected-color" {style} />
|
<div class="selected-color" style={selectedColorStyle} />
|
||||||
</CheckedBackground>
|
</CheckedBackground>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -216,14 +236,18 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</Portal>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.colorpicker-container {
|
.colorpicker-container {
|
||||||
|
position: absolute;
|
||||||
|
outline: none;
|
||||||
|
z-index: 3;
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
/* height: 265px; */
|
margin: 5px 0px;
|
||||||
height: auto;
|
height: auto;
|
||||||
width: 220px;
|
width: 220px;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import Colorpicker from "./Colorpicker.svelte"
|
import Colorpicker from "./Colorpicker.svelte"
|
||||||
import CheckedBackground from "./CheckedBackground.svelte"
|
import CheckedBackground from "./CheckedBackground.svelte"
|
||||||
import { createEventDispatcher, afterUpdate, beforeUpdate } from "svelte"
|
import { createEventDispatcher, beforeUpdate } from "svelte"
|
||||||
|
|
||||||
import { buildStyle } from "./helpers.js"
|
import { buildStyle } from "./helpers.js"
|
||||||
import { fade } from "svelte/transition"
|
import { fade } from "svelte/transition"
|
||||||
|
@ -15,7 +15,8 @@
|
||||||
export let height = "25px"
|
export let height = "25px"
|
||||||
|
|
||||||
let format = "hexa"
|
let format = "hexa"
|
||||||
let dimensions = { top: 0, left: 0 }
|
let dimensions = { top: 0, bottom: 0, right: 0, left: 0 }
|
||||||
|
let positionSide = "top"
|
||||||
let colorPreview = null
|
let colorPreview = null
|
||||||
|
|
||||||
let previewHeight = null
|
let previewHeight = null
|
||||||
|
@ -23,17 +24,8 @@
|
||||||
let pickerWidth = 0
|
let pickerWidth = 0
|
||||||
let pickerHeight = 0
|
let pickerHeight = 0
|
||||||
|
|
||||||
let anchorEl = null
|
|
||||||
let parentNodes = []
|
|
||||||
let errorMsg = null
|
let errorMsg = null
|
||||||
|
|
||||||
$: previewStyle = buildStyle({ width, height, background: value })
|
|
||||||
$: errorPreviewStyle = buildStyle({ width, height })
|
|
||||||
$: pickerStyle = buildStyle({
|
|
||||||
top: `${dimensions.top}px`,
|
|
||||||
left: `${dimensions.left}px`,
|
|
||||||
})
|
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
beforeUpdate(() => {
|
beforeUpdate(() => {
|
||||||
|
@ -46,25 +38,6 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
afterUpdate(() => {
|
|
||||||
if (colorPreview && colorPreview.offsetParent && !anchorEl) {
|
|
||||||
//Anchor relative to closest positioned ancestor element. If none, then anchor to body
|
|
||||||
anchorEl = colorPreview.offsetParent
|
|
||||||
let curEl = colorPreview
|
|
||||||
let els = []
|
|
||||||
//Travel up dom tree from preview element to find parent elements that scroll
|
|
||||||
while (!anchorEl.isSameNode(curEl)) {
|
|
||||||
curEl = curEl.parentNode
|
|
||||||
let elOverflow = window
|
|
||||||
.getComputedStyle(curEl)
|
|
||||||
.getPropertyValue("overflow")
|
|
||||||
if (/scroll|auto/.test(elOverflow)) {
|
|
||||||
els.push(curEl)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
parentNodes = els
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
function openColorpicker(event) {
|
function openColorpicker(event) {
|
||||||
if (colorPreview) {
|
if (colorPreview) {
|
||||||
|
@ -72,43 +45,45 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onColorChange(color) {
|
||||||
|
value = color.detail
|
||||||
|
dispatch("change", color.detail)
|
||||||
|
}
|
||||||
|
|
||||||
$: if(open && colorPreview) {
|
$: if(open && colorPreview) {
|
||||||
const {
|
const {
|
||||||
top: spaceAbove,
|
top: spaceAbove,
|
||||||
width,
|
width,
|
||||||
bottom,
|
bottom,
|
||||||
right,
|
right,
|
||||||
left: spaceLeft,
|
left,
|
||||||
} = colorPreview.getBoundingClientRect()
|
} = colorPreview.getBoundingClientRect()
|
||||||
const { innerHeight, innerWidth } = window
|
|
||||||
|
|
||||||
const { offsetLeft, offsetTop } = colorPreview
|
const spaceBelow = window.innerHeight - bottom
|
||||||
//get the scrollTop value for all scrollable parent elements
|
const previewCenter = previewWidth / 2
|
||||||
let scrollTop = parentNodes.reduce(
|
|
||||||
(scrollAcc, el) => (scrollAcc += el.scrollTop),
|
|
||||||
0
|
|
||||||
)
|
|
||||||
|
|
||||||
const spaceBelow = innerHeight - spaceAbove - previewHeight
|
let y, x;
|
||||||
const top =
|
|
||||||
spaceAbove > spaceBelow
|
|
||||||
? offsetTop - pickerHeight - scrollTop
|
|
||||||
: offsetTop + previewHeight - scrollTop
|
|
||||||
|
|
||||||
//TOO: Testing and Scroll Awareness for x Scroll
|
if(spaceAbove > spaceBelow) {
|
||||||
const spaceRight = innerWidth - spaceLeft + previewWidth
|
positionSide = "bottom"
|
||||||
const left =
|
y = (window.innerHeight - spaceAbove)
|
||||||
spaceRight > spaceLeft
|
}else{
|
||||||
? offsetLeft + previewWidth
|
positionSide = "top"
|
||||||
: offsetLeft - pickerWidth
|
y = bottom
|
||||||
|
|
||||||
dimensions = { top, left }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function onColorChange(color) {
|
x = (left + previewCenter) - (pickerWidth / 2)
|
||||||
value = color.detail
|
|
||||||
dispatch("change", color.detail)
|
dimensions = { [positionSide]: y.toFixed(1), left: x.toFixed(1) }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$: previewStyle = buildStyle({ width, height, background: value })
|
||||||
|
$: errorPreviewStyle = buildStyle({ width, height })
|
||||||
|
$: pickerStyle = buildStyle({
|
||||||
|
[positionSide]: `${dimensions[positionSide]}px`,
|
||||||
|
left: `${dimensions.left}px`,
|
||||||
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="color-preview-container">
|
<div class="color-preview-container">
|
||||||
|
@ -124,8 +99,8 @@
|
||||||
</CheckedBackground>
|
</CheckedBackground>
|
||||||
|
|
||||||
{#if open}
|
{#if open}
|
||||||
<div transition:fade class="picker-container" style={pickerStyle}>
|
|
||||||
<Colorpicker
|
<Colorpicker
|
||||||
|
style={pickerStyle}
|
||||||
on:change={onColorChange}
|
on:change={onColorChange}
|
||||||
on:addswatch
|
on:addswatch
|
||||||
on:removeswatch
|
on:removeswatch
|
||||||
|
@ -133,10 +108,10 @@
|
||||||
bind:value
|
bind:value
|
||||||
bind:pickerHeight
|
bind:pickerHeight
|
||||||
bind:pickerWidth
|
bind:pickerWidth
|
||||||
|
bind:open
|
||||||
{swatches}
|
{swatches}
|
||||||
{disableSwatches}
|
{disableSwatches}
|
||||||
{open} />
|
/>
|
||||||
</div>
|
|
||||||
<div on:click|self={() => (open = false)} class="overlay" />
|
<div on:click|self={() => (open = false)} class="overlay" />
|
||||||
{/if}
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
|
@ -154,6 +129,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-preview {
|
.color-preview {
|
||||||
|
cursor: pointer;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: 1px solid #dedada;
|
border: 1px solid #dedada;
|
||||||
}
|
}
|
||||||
|
@ -166,12 +142,12 @@
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.picker-container {
|
/* .picker-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
}
|
} */
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
@ -0,0 +1,37 @@
|
||||||
|
<script>
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
|
export let target = document.body;
|
||||||
|
|
||||||
|
let targetEl;
|
||||||
|
let portal;
|
||||||
|
let componentInstance;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
if (typeof target === "string") {
|
||||||
|
targetEl = document.querySelector(target);
|
||||||
|
// Force exit
|
||||||
|
if (targetEl === null) {
|
||||||
|
return () => {};
|
||||||
|
}
|
||||||
|
} else if (target instanceof HTMLElement) {
|
||||||
|
targetEl = target;
|
||||||
|
} else {
|
||||||
|
throw new TypeError(
|
||||||
|
`Unknown target type: ${typeof target}. Allowed types: String (CSS selector), HTMLElement.`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
portal = document.createElement("div");
|
||||||
|
targetEl.appendChild(portal);
|
||||||
|
portal.appendChild(componentInstance);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
targetEl.removeChild(portal);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div bind:this={componentInstance}>
|
||||||
|
<slot />
|
||||||
|
</div>
|
|
@ -88,7 +88,6 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
z-index: 5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-pane {
|
.preview-pane {
|
||||||
|
|
Loading…
Reference in a new issue