@thednp/color-picker 0.0.1-alpha1 → 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +63 -26
  3. package/dist/css/color-picker.css +504 -337
  4. package/dist/css/color-picker.min.css +2 -0
  5. package/dist/css/color-picker.rtl.css +529 -0
  6. package/dist/css/color-picker.rtl.min.css +2 -0
  7. package/dist/js/color-picker-element-esm.js +3851 -2
  8. package/dist/js/color-picker-element-esm.min.js +2 -0
  9. package/dist/js/color-picker-element.js +2086 -1278
  10. package/dist/js/color-picker-element.min.js +2 -2
  11. package/dist/js/color-picker-esm.js +3742 -0
  12. package/dist/js/color-picker-esm.min.js +2 -0
  13. package/dist/js/color-picker.js +2030 -1286
  14. package/dist/js/color-picker.min.js +2 -2
  15. package/package.json +18 -9
  16. package/src/js/color-palette.js +71 -0
  17. package/src/js/color-picker-element.js +62 -16
  18. package/src/js/color-picker.js +734 -618
  19. package/src/js/color.js +621 -358
  20. package/src/js/index.js +0 -9
  21. package/src/js/util/colorNames.js +2 -152
  22. package/src/js/util/colorPickerLabels.js +22 -0
  23. package/src/js/util/getColorControls.js +103 -0
  24. package/src/js/util/getColorForm.js +26 -19
  25. package/src/js/util/getColorMenu.js +88 -0
  26. package/src/js/util/isValidJSON.js +13 -0
  27. package/src/js/util/nonColors.js +5 -0
  28. package/src/js/util/roundPart.js +9 -0
  29. package/src/js/util/setCSSProperties.js +12 -0
  30. package/src/js/util/tabindex.js +3 -0
  31. package/src/js/util/templates.js +1 -0
  32. package/src/scss/color-picker.rtl.scss +23 -0
  33. package/src/scss/color-picker.scss +449 -0
  34. package/types/cp.d.ts +263 -162
  35. package/types/index.d.ts +9 -2
  36. package/types/source/source.ts +2 -1
  37. package/types/source/types.d.ts +28 -5
  38. package/dist/js/color-picker.esm.js +0 -2998
  39. package/dist/js/color-picker.esm.min.js +0 -2
  40. package/src/js/util/getColorControl.js +0 -49
  41. package/src/js/util/init.js +0 -14
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  The MIT License (MIT)
2
2
 
3
- Copyright (c) 2016 thednp
3
+ Copyright (c) 2022 thednp
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -1,23 +1,36 @@
1
1
  # ColorPicker Web Component
2
- The feature rich color picker component for the modern web built with TypeScript definition, WAI-ARIA compliant.
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
+ [![image](./docs/img/color-picker.png)](http://thednp.github.io/color-picker)
3
5
 
4
6
  [![NPM Version](https://img.shields.io/npm/v/@thednp/color-picker.svg?style=flat-square)](https://www.npmjs.com/package/@thednp/color-picker)
5
7
  [![NPM Downloads](https://img.shields.io/npm/dm/@thednp/color-picker.svg?style=flat-square)](http://npm-stat.com/charts.html?package=@thednp/color-picker)
6
8
  [![jsDeliver](https://data.jsdelivr.com/v1/package/npm/@thednp/color-picker/badge)](https://www.jsdelivr.com/package/npm/@thednp/color-picker)
7
9
 
8
- # Demo
9
- Download the package and check the demo folder, or check it online [here](http://thednp.github.io/color-picker).
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
- * SCSS sources
15
- * very light footprint, `5kb` in size when minified
16
- * 3 sets of positions top (main), left or right
17
- * provides a set of options for JavaScript initialization
18
- * DATA API allows you to automatically initiate without JS invocation
19
- * modern browsers supported and semi-modern alike with a special polyfill for IE10+ provided
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 need to provide the `data-function="color-picker"` attribute to your target, like so:
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" class="color-preview" value="#069" data-function="color-picker">
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">Color Label</label>
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
- In this case the `data-function="color-picker"` attribute is no longer required.
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
- # ES6+
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
- * @see https://www.eyecon.ro/colorpicker/
86
- * @see http://www.dematte.at/colorPicker/
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).