@thednp/color-picker 0.0.1-alpha1 → 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +63 -26
- package/dist/css/color-picker.css +504 -337
- package/dist/css/color-picker.min.css +2 -0
- package/dist/css/color-picker.rtl.css +529 -0
- package/dist/css/color-picker.rtl.min.css +2 -0
- package/dist/js/color-picker-element-esm.js +3851 -2
- package/dist/js/color-picker-element-esm.min.js +2 -0
- package/dist/js/color-picker-element.js +2086 -1278
- package/dist/js/color-picker-element.min.js +2 -2
- package/dist/js/color-picker-esm.js +3742 -0
- package/dist/js/color-picker-esm.min.js +2 -0
- package/dist/js/color-picker.js +2030 -1286
- package/dist/js/color-picker.min.js +2 -2
- package/package.json +18 -9
- package/src/js/color-palette.js +71 -0
- package/src/js/color-picker-element.js +62 -16
- package/src/js/color-picker.js +734 -618
- package/src/js/color.js +621 -358
- package/src/js/index.js +0 -9
- package/src/js/util/colorNames.js +2 -152
- package/src/js/util/colorPickerLabels.js +22 -0
- package/src/js/util/getColorControls.js +103 -0
- package/src/js/util/getColorForm.js +26 -19
- package/src/js/util/getColorMenu.js +88 -0
- package/src/js/util/isValidJSON.js +13 -0
- package/src/js/util/nonColors.js +5 -0
- package/src/js/util/roundPart.js +9 -0
- package/src/js/util/setCSSProperties.js +12 -0
- package/src/js/util/tabindex.js +3 -0
- package/src/js/util/templates.js +1 -0
- package/src/scss/color-picker.rtl.scss +23 -0
- package/src/scss/color-picker.scss +449 -0
- package/types/cp.d.ts +263 -162
- package/types/index.d.ts +9 -2
- package/types/source/source.ts +2 -1
- package/types/source/types.d.ts +28 -5
- package/dist/js/color-picker.esm.js +0 -2998
- package/dist/js/color-picker.esm.min.js +0 -2
- package/src/js/util/getColorControl.js +0 -49
- package/src/js/util/init.js +0 -14
package/LICENSE
CHANGED
package/README.md
CHANGED
@@ -1,23 +1,36 @@
|
|
1
1
|
# ColorPicker Web Component
|
2
|
-
The feature rich
|
2
|
+
The feature rich **ColorPicker** component for the modern web built with TypeScript definitions, WAI-ARIA compliant and lots of goodies. In addition, it features its own version of [TinyColor](https://github.com/bgrins/TinyColor) called simply `Color`.
|
3
|
+
|
4
|
+
[](http://thednp.github.io/color-picker)
|
3
5
|
|
4
6
|
[](https://www.npmjs.com/package/@thednp/color-picker)
|
5
7
|
[](http://npm-stat.com/charts.html?package=@thednp/color-picker)
|
6
8
|
[](https://www.jsdelivr.com/package/npm/@thednp/color-picker)
|
7
9
|
|
8
|
-
|
9
|
-
|
10
|
+
**ColorPicker** can use existing colour palettes or generate custom ones via DATA API configuration. If you want to play, check out [this codepen](https://codepen.io/thednp/pen/WNdRWPN) I've setup for you. Have fun!
|
11
|
+
|
10
12
|
|
11
13
|
# Highlights
|
12
|
-
* Accessibility Focus
|
14
|
+
* Accessibility Focus for WAI-ARIA compliance
|
13
15
|
* ES6+ sources with TypeScript definitions
|
14
|
-
*
|
15
|
-
*
|
16
|
-
*
|
17
|
-
*
|
18
|
-
*
|
19
|
-
*
|
20
|
-
|
16
|
+
* Framework agnostic and flexible design
|
17
|
+
* Supporting HEX(a), RGB(a), HSL(a) and HWB, the last three also in CSS4 Color Module flavours
|
18
|
+
* Supports keyboard and touch events
|
19
|
+
* Automatic repositioning of the popup dropdown on show / window scroll
|
20
|
+
* SCSS sources with minimal style required
|
21
|
+
* Right To Left Languages Supported
|
22
|
+
* light footprint, `10kb` in size when minified and gZipped
|
23
|
+
|
24
|
+
# Wiki
|
25
|
+
For an in depth guide on all things **ColorPicker**, check out the wiki pages:
|
26
|
+
* [Home](https://github.com/thednp/color-picker/wiki) - the **ColorPicker** wiki home.
|
27
|
+
* [NPM](https://github.com/thednp/color-picker/wiki/NPM) - quick installation guide.
|
28
|
+
* [CDN Link](https://github.com/thednp/color-picker/wiki/CDN) - quick implementation guide.
|
29
|
+
* [Usage](https://github.com/thednp/color-picker/wiki/Usage) - an in-depth browser usage.
|
30
|
+
* [ES6+](https://github.com/thednp/color-picker/wiki/ES6) - your usual quick ES6+ guide.
|
31
|
+
* [Node.js](https://github.com/thednp/color-picker/wiki/Node.js) - is this a thing?
|
32
|
+
|
33
|
+
**Note** - the wiki pages are still under construction.
|
21
34
|
|
22
35
|
# NPM
|
23
36
|
You can install **ColorPicker** through NPM:
|
@@ -41,6 +54,10 @@ OR use the `ColorPickerElement` custom element:
|
|
41
54
|
```html
|
42
55
|
<script src="../assets/js/color-picker-element.js"></script>
|
43
56
|
```
|
57
|
+
OR use the `ColorPickerElement` custom element ESM module:
|
58
|
+
```html
|
59
|
+
<script type="module" src="../assets/js/color-picker-element-esm.js"></script>
|
60
|
+
```
|
44
61
|
|
45
62
|
If you don't want to use the custom element, you can initialize the function for your elements at the end of your `<body>` tag
|
46
63
|
```html
|
@@ -49,41 +66,61 @@ var myPicker = new ColorPicker('input.SELECTOR');
|
|
49
66
|
</script>
|
50
67
|
```
|
51
68
|
|
52
|
-
To use the DATA-API, you
|
69
|
+
To use the DATA-API, you can provide for instance the `data-format="hex"`, and other specific attributes like so:
|
53
70
|
```html
|
54
71
|
<label for="myPicker">Color Label</label>
|
55
72
|
<div class="color-picker">
|
56
|
-
<input id="myPicker" name="myPicker"
|
73
|
+
<input id="myPicker" name="myPicker" data-function="color-picker" data-format="hex" data-color-presets="red,green,blue" class="color-preview" value="#069">
|
57
74
|
</div>
|
58
75
|
```
|
76
|
+
The `data-function="color-picker"` attribute is useful for mass initialization, [check this usage section of the wiki](https://github.com/thednp/color-picker/wiki/Usage#initialize-multiple-targets).
|
59
77
|
|
60
|
-
Alternatively you can use the `ColorPickerElement` custom element:
|
78
|
+
Alternatively you can use the `ColorPickerElement` custom element, the `data-function="color-picker"` attribute is no longer required:
|
61
79
|
```html
|
62
|
-
<label for="myPicker">
|
63
|
-
<color-picker>
|
80
|
+
<label for="myPicker">Colour Field Label</label>
|
81
|
+
<color-picker data-format="rgb" data-color-keywords="#069:default,#111:revert">
|
64
82
|
<input id="myPicker" name="myPicker" class="color-preview" value="#069">
|
65
83
|
</color-picker>
|
66
84
|
|
67
|
-
<script type="module" src="../path-to/color-picker-element.js"></script>
|
85
|
+
<script type="module" src="../path-to/color-picker-element-esm.js"></script>
|
68
86
|
```
|
69
|
-
|
70
|
-
|
71
|
-
Other initialization and markup options apply, explained in [the demo](http://thednp.github.io/color-picker/).
|
87
|
+
As shown in the above example, all DATA API attributes for instance configuration are to be used on your **custom element**.
|
72
88
|
|
73
89
|
|
74
|
-
#
|
90
|
+
# Initialize INPUT
|
75
91
|
```javascript
|
76
|
-
import ColorPicker from '@thednp/color-picker'
|
92
|
+
import ColorPicker from '@thednp/color-picker';
|
77
93
|
|
78
|
-
let myPicker = new ColorPicker('#myPicker')
|
94
|
+
let myPicker = new ColorPicker('#myPicker');
|
95
|
+
```
|
96
|
+
|
97
|
+
# Initialize Custom Element
|
98
|
+
```javascript
|
99
|
+
import ColorPickerElement from '@thednp/color-picker/src/color-picker-element';
|
100
|
+
|
101
|
+
// initialize the CustomElement
|
102
|
+
const myPicker = new ColorPickerElement();
|
103
|
+
// set DATA API
|
104
|
+
myPicker.setAttribute('data-format', 'hsl');
|
105
|
+
myPicker.setAttribute('data-id', 'ADD_YOUR_UNIQUE_ID');
|
106
|
+
myPicker.setAttribute('data-value', 'rgb(150 0 150 / 0.8)');
|
107
|
+
myPicker.setAttribute('data-label', 'Color Picker Element Label');
|
108
|
+
myPicker.setAttribute('data-color-keywords', 'false');
|
109
|
+
|
110
|
+
// append, connectedCallback() is triggered
|
111
|
+
document.body.append(myPicker);
|
79
112
|
```
|
113
|
+
Other configuration options apply, see [the API Guide](https://github.com/thednp/color-picker/wiki/API).
|
80
114
|
|
81
115
|
|
82
116
|
# Thanks
|
83
117
|
* Dimitris Grammatikogiannis for his [initial project](https://codepen.io/dgrammatiko/pen/zLvXwR) as well as testing and contributions
|
84
118
|
* Serhii Kulykov for his [Vanilla Colorful](https://github.com/web-padawan/vanilla-colorful)
|
85
|
-
*
|
86
|
-
*
|
119
|
+
* Brian Grinstead for his [TinyColor](https://github.com/bgrins/TinyColor)
|
120
|
+
* Jonathan Neal for his [convert-colors](https://github.com/jonathantneal/convert-colors)
|
121
|
+
* Peter Dematté for his [colorPicker](http://www.dematte.at/colorPicker/)
|
122
|
+
* Ștefan Petre at eyecon for his [colorPicker](https://www.eyecon.ro/colorpicker/)
|
123
|
+
* Brian Teeman for his [patience](https://github.com/joomla/joomla-cms/pull/35639)
|
87
124
|
|
88
125
|
# License
|
89
|
-
[MIT License](https://github.com/thednp/color-picker/blob/master/LICENSE)
|
126
|
+
**ColorPicker** is released under the [MIT License](https://github.com/thednp/color-picker/blob/master/LICENSE).
|