Colorpicker functionality for components panel
This commit is contained in:
parent
1efc3dba72
commit
26fdad57fd
|
@ -0,0 +1,71 @@
|
||||||
|
<script>
|
||||||
|
import { onMount, beforeUpdate, afterUpdate } from "svelte"
|
||||||
|
|
||||||
|
export let value = null
|
||||||
|
export let onChanged = () => {}
|
||||||
|
export let swatches = []
|
||||||
|
|
||||||
|
let picker
|
||||||
|
let cp = null
|
||||||
|
|
||||||
|
function getRecentColors() {
|
||||||
|
let colorStore = localStorage.getItem("bb:recentColors")
|
||||||
|
if (!!colorStore) {
|
||||||
|
swatches = JSON.parse(colorStore)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setRecentColor(color) {
|
||||||
|
if (swatches.length >= 15) {
|
||||||
|
swatches.splice(0, 1)
|
||||||
|
picker.removeSwatch(0)
|
||||||
|
}
|
||||||
|
if (!swatches.includes(color)) {
|
||||||
|
swatches = [...swatches, color]
|
||||||
|
picker.addSwatch(color)
|
||||||
|
localStorage.setItem("bb:recentColors", JSON.stringify(swatches))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function createPicker() {
|
||||||
|
picker = Pickr.create({
|
||||||
|
el: cp,
|
||||||
|
theme: "nano",
|
||||||
|
default: value || "#000000",
|
||||||
|
|
||||||
|
swatches,
|
||||||
|
closeWithKey: "Escape",
|
||||||
|
|
||||||
|
components: {
|
||||||
|
preview: true,
|
||||||
|
opacity: true,
|
||||||
|
hue: true,
|
||||||
|
|
||||||
|
interaction: {
|
||||||
|
hex: true,
|
||||||
|
rgba: true,
|
||||||
|
input: true,
|
||||||
|
save: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
afterUpdate(() => {
|
||||||
|
picker.setColor(value)
|
||||||
|
})
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
getRecentColors()
|
||||||
|
createPicker()
|
||||||
|
|
||||||
|
picker.on("save", (colour, instance) => {
|
||||||
|
let color = colour.toHEXA().toString()
|
||||||
|
onChanged(color)
|
||||||
|
setRecentColor(color)
|
||||||
|
picker.hide()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div bind:this={cp} class="color-picker" />
|
|
@ -3,6 +3,7 @@
|
||||||
import Input from "../common/Input.svelte"
|
import Input from "../common/Input.svelte"
|
||||||
import PropertyCascader from "./PropertyCascader"
|
import PropertyCascader from "./PropertyCascader"
|
||||||
import { isBinding, getBinding, setBinding } from "../common/binding"
|
import { isBinding, getBinding, setBinding } from "../common/binding"
|
||||||
|
import Colorpicker from "../common/Colorpicker.svelte"
|
||||||
|
|
||||||
export let value = ""
|
export let value = ""
|
||||||
export let onChanged = () => {}
|
export let onChanged = () => {}
|
||||||
|
@ -36,6 +37,8 @@
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
|
{:else if type === 'colour'}
|
||||||
|
<Colorpicker {onChanged} {value} />
|
||||||
{:else}
|
{:else}
|
||||||
<PropertyCascader {onChanged} {value} />
|
<PropertyCascader {onChanged} {value} />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -80,4 +80,5 @@ export const types = {
|
||||||
asset: propType(() => "", isString, defaultDef("asset")),
|
asset: propType(() => "", isString, defaultDef("asset")),
|
||||||
event: propType(() => [], isEventList, defaultDef("event")),
|
event: propType(() => [], isEventList, defaultDef("event")),
|
||||||
state: propType(() => emptyState(), isBound, defaultDef("state")),
|
state: propType(() => emptyState(), isBound, defaultDef("state")),
|
||||||
|
colour: propType(() => "#000000", isString, defaultDef("colour")),
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,6 +15,8 @@
|
||||||
<link rel='stylesheet' href='/_builder/bundle.css'>
|
<link rel='stylesheet' href='/_builder/bundle.css'>
|
||||||
<link rel='stylesheet' href='/_builder/fonts.css'>
|
<link rel='stylesheet' href='/_builder/fonts.css'>
|
||||||
<link rel='stylesheet' href="/_builder/uikit.min.css">
|
<link rel='stylesheet' href="/_builder/uikit.min.css">
|
||||||
|
<link rel='stylesheet' href="/_builder/nano.min.css">
|
||||||
|
<script src='/_builder/pickr.min.js'></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body id="app">
|
<body id="app">
|
||||||
|
|
|
@ -12,10 +12,10 @@
|
||||||
"props": {
|
"props": {
|
||||||
"logoUrl": "string",
|
"logoUrl": "string",
|
||||||
"title": "string",
|
"title": "string",
|
||||||
"backgroundColor": "string",
|
"backgroundColor": "colour",
|
||||||
"color": "string",
|
"color": "colour",
|
||||||
"borderWidth": "string",
|
"borderWidth": "string",
|
||||||
"borderColor": "string",
|
"borderColor": "colour",
|
||||||
"borderStyle": "string"
|
"borderStyle": "string"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -30,8 +30,8 @@
|
||||||
"className": "string",
|
"className": "string",
|
||||||
"disabled": "bool",
|
"disabled": "bool",
|
||||||
"onClick": "event",
|
"onClick": "event",
|
||||||
"background": "string",
|
"background": "colour",
|
||||||
"color": "string",
|
"color": "colour",
|
||||||
"border": "string",
|
"border": "string",
|
||||||
"padding": "string",
|
"padding": "string",
|
||||||
"hoverColor": "string",
|
"hoverColor": "string",
|
||||||
|
@ -167,6 +167,7 @@
|
||||||
"children": false,
|
"children": false,
|
||||||
"props": {
|
"props": {
|
||||||
"text": "string",
|
"text": "string",
|
||||||
|
"color": "colour",
|
||||||
"fontFamily": {
|
"fontFamily": {
|
||||||
"type": "options",
|
"type": "options",
|
||||||
"default": "initial",
|
"default": "initial",
|
||||||
|
@ -182,8 +183,7 @@
|
||||||
"Lucida Sans Unicode"
|
"Lucida Sans Unicode"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"fontSize": "string",
|
"fontSize": "string",
|
||||||
"color": "string",
|
|
||||||
"textAlign": {
|
"textAlign": {
|
||||||
"type": "options",
|
"type": "options",
|
||||||
"default": "inline",
|
"default": "inline",
|
||||||
|
@ -258,7 +258,8 @@
|
||||||
"description": "A HTML icon tag",
|
"description": "A HTML icon tag",
|
||||||
"props": {
|
"props": {
|
||||||
"icon": "string",
|
"icon": "string",
|
||||||
"fontSize": "string"
|
"fontSize": "string",
|
||||||
|
"color": "colour"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"link": {
|
"link": {
|
||||||
|
@ -267,8 +268,8 @@
|
||||||
"url": "string",
|
"url": "string",
|
||||||
"openInNewTab": "bool",
|
"openInNewTab": "bool",
|
||||||
"text": "string",
|
"text": "string",
|
||||||
"color": "string",
|
"color": "colour",
|
||||||
"hoverColor": "string",
|
"hoverColor": "colour",
|
||||||
"underline": "bool",
|
"underline": "bool",
|
||||||
"fontSize": "string",
|
"fontSize": "string",
|
||||||
"fontFamily": {
|
"fontFamily": {
|
||||||
|
@ -355,6 +356,7 @@
|
||||||
"description": "An HTML H1 - H6 tag",
|
"description": "An HTML H1 - H6 tag",
|
||||||
"props": {
|
"props": {
|
||||||
"className": "string",
|
"className": "string",
|
||||||
|
"color":"colour",
|
||||||
"text": "string",
|
"text": "string",
|
||||||
"type": {
|
"type": {
|
||||||
"type": "options",
|
"type": "options",
|
||||||
|
|
|
@ -5,11 +5,13 @@
|
||||||
export let _bb
|
export let _bb
|
||||||
export let text = ""
|
export let text = ""
|
||||||
export let fontFamily = ""
|
export let fontFamily = ""
|
||||||
|
export let color = ""
|
||||||
|
|
||||||
let containerElement
|
let containerElement
|
||||||
|
|
||||||
$: containerElement && !text && _bb.attachChildren(containerElement)
|
$: containerElement && !text && _bb.attachChildren(containerElement)
|
||||||
$: style = buildStyle({ "font-family": fontFamily })
|
$: style = buildStyle({ "font-family": fontFamily, color })
|
||||||
|
// $: console.log("HEADING", color)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if type === 'h1'}
|
{#if type === 'h1'}
|
||||||
|
|
Loading…
Reference in New Issue