timoetting / kirby-color Goto Github PK
View Code? Open in Web Editor NEWColor picker field for Kirby 3
Color picker field for Kirby 3
Any plan to release it on composer ?
It would be nice if the plugin offered a way to specify the output color format used for storage (hex, rgb, hsa).
Alternatively, it would also be an idea to offer functions to convert color formats inside templates.
can be closed. the issue was not in the plugin!
apart from the index.js
file being massive with 1.8MB (forks bring it down to 20kb) this plugin might be causing other plugins not to work because of this issue:
If a color is selected for the first time (i. e. no color was selected previously), clicking “revert” in the bottom bar brings up the error message “this.color is null” in the place of the color field. It should revert to the unspecified state in which it was previously.
This plugin doesn't work when the color field is used as field in a structure...
Error shown: Cannot read properties of undefined (reading 'rgba')
.
Easy to replicate; add following in a structure:
color:
type: color
editableAlpha: false
label: Colour
I love the plugin and have moved from the other Colors plugin to this because of the UI and presets.
I'm having an issue in the Panel: when the color is set to a blank string, I get the error undefined is not an object (evaluating 'this.colors.rgba')
and the field is not displayed. In my use, the color is optional, so it will sometimes be blank. (I don't want it to be set to a default color, I just want it to be blank.)
I can't find where the error is coming from, but if you can point me in the right direction I'd be happy to investigate it further. If it is relevant, I'm using this in a Structure field.
Hi @TimOetting !
What is the status/plan/timeframe for the color picker ?
Kirby is at RC–4, release date set to 15 januari.
Best regards /
Fredrik
Hi! I think the dev version (1.8MB large & with HMR code) was committed to the latest revision.
I guess the production version (npm run build
) should be committed instead. :)
If editableAlpha: false
is set, the RGB and HSL modes of the color picker show “RGA” and “HSA” instead, i. e. it seems like the third field is hidden (i. e. “blue” in RGB mode and “lightness” in HSL mode) and the field for the alpha channel is still shown instead (albeit not properly usable).
-- pls delete --
Thanks for this helpful plugin.
In order to handle different use cases, it would be nice if the field offered settings for the UI components shown in the color picker. I'm not sure how flexible the underlying Vue component is, but I'm thinking about something like this:
color:
label: Color
type: color
components:
- saturation: true
- hue: false
- input: false
- presets: true
presets:
- "#fff"
This way, it would be possible to create a color picker with presets only or one that only offers the hex, rgb and hsa inputs.
If the default value is set to nothing (empty), adding a color for the first time doesn’t trigger a content change event (or whatever it is called when the bar with the save and revert buttons is triggered). One has to change the color again to be able to save the page. I’d expect it to trigger this bar even if no default color is set.
the plugin as it breaks the current version of markdown-field :(
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.