From 300a66a40dcf16954a378cd67f3301c5d6547a4f Mon Sep 17 00:00:00 2001 From: Simon Reinisch Date: Fri, 10 May 2024 16:29:31 +0200 Subject: [PATCH] Update README --- README.md | 74 ++++++++++++++++++++++++++----------------------------- 1 file changed, 35 insertions(+), 39 deletions(-) diff --git a/README.md b/README.md index ec3f650..24cfac4 100644 --- a/README.md +++ b/README.md @@ -6,38 +6,34 @@ Flat, Simple, Hackable Color-Picker. +
+ Fully Featured Demo +
+

- gzip size - brotli size Build Status + src="https://github.com/simonwep/pickr/actions/workflows/ci.yml/badge.svg"> Download count - No dependencies + src="https://img.shields.io/npm/dm/@simonwep/pickr.svg"> + No dependencies JSDelivr download count + src="https://data.jsdelivr.com/v1/package/npm/@simonwep/pickr/badge?style=rounded"> Current version + src="https://img.shields.io/github/tag/Simonwep/pickr.svg?color=3498DB&label=version"> Support me + src="https://img.shields.io/badge/github-support-3498DB.svg"> Gitpod Ready-to-Code

-
- -

- Fully Featured demo -

-

@@ -50,28 +46,28 @@
### Features -* Themes -* Simple usage -* Zero dependencies -* Multiple color representations -* Color comparison -* Opacity control -* Detail adjustments via. mouse-wheel -* Responsive and auto-positioning -* Supports touch devices -* Swatches for quick-selection -* Fully accessible and i18n -* [Shadow-dom support](#selection-through-a-shadow-dom) +* 🎨 Themes +* 🔄 Simple usage +* 🚫 Zero dependencies +* 🌈 Multiple color representations +* 🔍 Color comparison +* 🎚️ Opacity control +* 🖱️ Detail adjustments via mouse-wheel +* 📱 Responsive and auto-positioning +* 👆 Supports touch devices +* 🎨 Swatches for quick-selection +* ♿ Fully accessible and i18n +* 🌑 Shadow-dom support ### Status of this project -This project might continue to get important security- and bug-related updates but its _feature set_ is frozen, and it's highly unlikely that it'll get new features or enhancements. - -The reason behind this decision is the way this tool has been build (monolithic, the core is one single file, everything is in plain JS etc.) which makes it incredible hard to maintain, tests become impossible at this stage without a complete rewrite, and the fun is gone at such a level of cramped complexity. +> [!IMPORTANT] +> This project might continue to get important security- and bug-related updates but its _feature set_ is frozen, and it's highly unlikely that it'll get new features or enhancements. +> +> The reason behind this decision is the way this tool has been build (monolithic, the core is one single file, everything is in plain JS etc.) which makes it incredible hard to maintain, tests become impossible at this stage without a complete rewrite, and the fun is gone at such a level of cramped complexity. +> > Personally I recommend building these UI-Related "widgets" directly into the app with the framework you're using which takes more time but in return gives you full power of how it should work and look like. Frameworks such as [(p)react](https://preactjs.com/), [vue](https://vuejs.org/) and [svelte](https://svelte.dev/) will make it a breeze to develop such things within a day. -**As of 2021, this project is no longer maintained!** - ### Themes |Classic|Monolith|Nano| |-------|--------|----| @@ -337,8 +333,8 @@ const pickr = new Pickr({ cmyk: false, // Display 'input/output format as cmyk' button (cyan mangenta yellow key ) input: false, // Display input/output textbox which shows the selected color value. - // the format of the input is determined by defaultRepresentation, - // and can be changed by the user with the buttons set by hex, rgba, hsla, etc (above). + // the format of the input is determined by defaultRepresentation, + // and can be changed by the user with the buttons set by hex, rgba, hsla, etc (above). cancel: false, // Display Cancel Button, resets the color to the previous state clear: false, // Display Clear Button; same as cancel, but keeps the window open save: false, // Display Save Button, @@ -375,10 +371,10 @@ Example setup:

#shadow-root
-
- #shadow-root -
-
+
+ #shadow-root +
+
``` @@ -446,7 +442,7 @@ If `silent` is true (Default is false), the button won't change the current colo * createFromTemplate(str`:String`) _- See [inline doumentation](https://github.com/Simonwep/pickr/blob/master/src/js/lib/utils.js#L88)._ * resolveElement(val`:String|HTMLElement`) _- Resolves a `HTMLElement`, supports `>>>` as shadow dom selector._ * adjustableInputNumbers(el`:InputElement`, mapper`:Function`) _- Creates the possibility to change the numbers in an inputfield via mouse scrolling. -The mapper function takes three arguments: the matched number, an multiplier and the index of the match._ + The mapper function takes three arguments: the matched number, an multiplier and the index of the match._ Use this utils carefully, it's not for sure that they will stay forever!