Colorpicker functionality for components panel
This commit is contained in:
Conor_Mack
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 PropertyCascader from "./PropertyCascader"
|
||||
import { isBinding, getBinding, setBinding } from "../common/binding"
|
||||
import Colorpicker from "../common/Colorpicker.svelte"
|
||||
|
||||
export let value = ""
|
||||
export let onChanged = () => {}
|
||||
|
|
@ -36,6 +37,8 @@
|
|||
{/if}
|
||||
{/each}
|
||||
</select>
|
||||
{:else if type === 'colour'}
|
||||
<Colorpicker {onChanged} {value} />
|
||||
{:else}
|
||||
<PropertyCascader {onChanged} {value} />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -80,4 +80,5 @@ export const types = {
|
|||
asset: propType(() => "", isString, defaultDef("asset")),
|
||||
event: propType(() => [], isEventList, defaultDef("event")),
|
||||
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/fonts.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>
|
||||
|
||||
<body id="app">
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@
|
|||
"props": {
|
||||
"logoUrl": "string",
|
||||
"title": "string",
|
||||
"backgroundColor": "string",
|
||||
"color": "string",
|
||||
"backgroundColor": "colour",
|
||||
"color": "colour",
|
||||
"borderWidth": "string",
|
||||
"borderColor": "string",
|
||||
"borderColor": "colour",
|
||||
"borderStyle": "string"
|
||||
}
|
||||
},
|
||||
|
|
@ -30,8 +30,8 @@
|
|||
"className": "string",
|
||||
"disabled": "bool",
|
||||
"onClick": "event",
|
||||
"background": "string",
|
||||
"color": "string",
|
||||
"background": "colour",
|
||||
"color": "colour",
|
||||
"border": "string",
|
||||
"padding": "string",
|
||||
"hoverColor": "string",
|
||||
|
|
@ -167,6 +167,7 @@
|
|||
"children": false,
|
||||
"props": {
|
||||
"text": "string",
|
||||
"color": "colour",
|
||||
"fontFamily": {
|
||||
"type": "options",
|
||||
"default": "initial",
|
||||
|
|
@ -183,7 +184,6 @@
|
|||
]
|
||||
},
|
||||
"fontSize": "string",
|
||||
"color": "string",
|
||||
"textAlign": {
|
||||
"type": "options",
|
||||
"default": "inline",
|
||||
|
|
@ -258,7 +258,8 @@
|
|||
"description": "A HTML icon tag",
|
||||
"props": {
|
||||
"icon": "string",
|
||||
"fontSize": "string"
|
||||
"fontSize": "string",
|
||||
"color": "colour"
|
||||
}
|
||||
},
|
||||
"link": {
|
||||
|
|
@ -267,8 +268,8 @@
|
|||
"url": "string",
|
||||
"openInNewTab": "bool",
|
||||
"text": "string",
|
||||
"color": "string",
|
||||
"hoverColor": "string",
|
||||
"color": "colour",
|
||||
"hoverColor": "colour",
|
||||
"underline": "bool",
|
||||
"fontSize": "string",
|
||||
"fontFamily": {
|
||||
|
|
@ -355,6 +356,7 @@
|
|||
"description": "An HTML H1 - H6 tag",
|
||||
"props": {
|
||||
"className": "string",
|
||||
"color":"colour",
|
||||
"text": "string",
|
||||
"type": {
|
||||
"type": "options",
|
||||
|
|
|
|||
|
|
@ -5,11 +5,13 @@
|
|||
export let _bb
|
||||
export let text = ""
|
||||
export let fontFamily = ""
|
||||
export let color = ""
|
||||
|
||||
let containerElement
|
||||
|
||||
$: containerElement && !text && _bb.attachChildren(containerElement)
|
||||
$: style = buildStyle({ "font-family": fontFamily })
|
||||
$: style = buildStyle({ "font-family": fontFamily, color })
|
||||
// $: console.log("HEADING", color)
|
||||
</script>
|
||||
|
||||
{#if type === 'h1'}
|
||||
|
|
|
|||
Loading…
Reference in New Issue