Skip to content

Commit 53b4b40

Browse files
Yair Even OrYair Even Or
Yair Even Or
authored and
Yair Even Or
committed
refactoring
1 parent 93b7ff8 commit 53b4b40

9 files changed

+503
-73
lines changed

‎README.md

+18
Original file line numberDiff line numberDiff line change
@@ -153,3 +153,21 @@ NanoPop.reposition( myColor, cPicker.DOM.scope )
153153
resizeObserver.observe(document.body)
154154
```
155155

156+
### Helper methods exported alongside the *default* `ColorPicker`
157+
158+
| Name | Parameters | Info | Info |
159+
|---------------------|---------------------------------|-------------------------------------------------------------------------------------|
160+
| `any_to_hex` | `String` | Converts any color string to `hex` format
161+
| `hex_rgba` | `String` | Converts `Hex` to `RGBA` format
162+
| `rgba_hsla` | `String` | Converts `RGBA` to `HSLA` format
163+
| `CSStoHSLA` | `String` | Converts CSS-string `HSLA` to an `HSLA` javascript Object
164+
| `HSLAtoCSS` | `String` | Converts `HSLA` Object to CSS-string
165+
| `changeColorFormat` | color `string`, format `string` | Converts any color string to another color format string
166+
167+
168+
### Methods (`ColorPicker` instance)
169+
170+
| Name | Parameters | Info |
171+
|------------------|-----------------------|-------------------------------------------------------------------------------|
172+
| `setColor` | `String` | Sets the instance color
173+
| `getColorFormat` | `String` | Gets the format of a color string: `hex`, `rgba` or `hsla`

‎dist/color-picker.js

+425-2
Large diffs are not rendered by default.

‎index.html

+22-10
Original file line numberDiff line numberDiff line change
@@ -93,32 +93,37 @@ <h1>Color Picker</h1>
9393
<script src="./dist/color-picker.js"></script>
9494

9595
<script>
96+
const { default:ColorPicker, any_to_hex } = window.ColorPicker
97+
9698
// let the delayed (non-blocking) CSS a chance to load first
9799
setTimeout(init, 1000)
98100

99101
function init(){
100-
document.querySelectorAll('.myColor').forEach(myColor => {
102+
// iterate all color inputs and instantiate an new ColorPicker instance for each
103+
document.querySelectorAll('.myColor').forEach(colorInput => {
101104
const resizeObserver = new ResizeObserver(entries => {
102105
if( !cPicker.DOM.scope.classList.contains('hidden') )
103-
NanoPop.reposition( myColor, cPicker.DOM.scope )
106+
NanoPop.reposition( colorInput, cPicker.DOM.scope )
104107
})
105108

106109
const cPicker = new ColorPicker({
107-
color: myColor.value, // accepts formats: HEX(A), RGB(A), HSL(A)
110+
color: colorInput.value, // accepts formats: HEX(A), RGB(A), HSL(A)
108111

109112
className: 'hidden',
110113

111-
swatches: myColor.dataset.swatches == 'false'
114+
// defaultFormat: 'rgb',
115+
116+
swatches: colorInput.dataset.swatches == 'false'
112117
? false
113-
: JSON.parse(myColor.dataset.swatches),
118+
: JSON.parse(colorInput.dataset.swatches),
114119

115120
swatchesLocalStorage: true,
116121

117122
onClickOutside(e){
118123
let action = 'add'
119124

120-
if( e.target == myColor ){
121-
NanoPop.reposition( myColor, cPicker.DOM.scope )
125+
if( e.target == colorInput ){
126+
NanoPop.reposition( colorInput, cPicker.DOM.scope )
122127
action = 'toggle'
123128
}
124129

@@ -129,18 +134,25 @@ <h1>Color Picker</h1>
129134
},
130135

131136
onInput(c){
132-
myColor.value = c;
133-
myColor.style.setProperty('--color', c)
137+
colorInput.value = c;
138+
colorInput.style.setProperty('--color', c)
134139
},
135140

136141
// onChange: console.log
137142
})
138143

139144
document.body.appendChild(cPicker.DOM.scope)
140145

141-
NanoPop.reposition( myColor, cPicker.DOM.scope )
146+
NanoPop.reposition( colorInput, cPicker.DOM.scope )
142147
resizeObserver.observe(document.body)
148+
149+
colorInput._colorPicker = cPicker
143150
})
151+
152+
// setTimeout(() => {
153+
// document.querySelector('.myColor')._colorPicker.setColor( 'red' )
154+
// }, 2000)
155+
144156
}
145157
</script>
146158
</body>

‎package-lock.json

+1-38
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎rollup.config.dev.js

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export default [
1111
output: {
1212
file: pkg.main,
1313
format: 'umd',
14+
exports: 'named',
1415
name: 'ColorPicker',
1516
},
1617
plugins: [

‎rollup.config.prod.js

+2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ export default [
1515
file: pkg.main,
1616
format: 'umd',
1717
name: 'ColorPicker',
18+
exports: 'named',
19+
sourcemap: true,
1820
},
1921
plugins: [
2022
terser(),

‎src/color-picker.js

+15-19
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as templates from './templates'
44
import * as events from './events'
55
import history from './history'
66
import * as swatches from './swatches'
7-
import { any_to_hex, hex_rgba, rgba_hsla, CSStoHSLA, HSLAtoCSS} from './utils/convertColors'
7+
import {any_to_hex, hex_rgba, rgba_hsla, CSStoHSLA, HSLAtoCSS, changeColorFormat} from './utils/convertColors'
88

99
var raf = window.requestAnimationFrame || (cb => window.setTimeout(cb, 1000 / 60))
1010

@@ -18,8 +18,7 @@ function ColorPicker(settings){
1818
this.sharedSwatches = this.getSetGlobalSwatches() // only this gets syncs with the localstorage (if chosen to)
1919
this.initialSwatches = swatches || []
2020
this.swatches = swatches && this.sharedSwatches.concat(this.initialSwatches) // global (shared) via localstorage
21-
22-
this.setColor(this.getHSLA( this.changeColorFormat(color, defaultFormat) ))
21+
this.color = changeColorFormat(color, defaultFormat)
2322
this.history = history.call(this)
2423
this.init()
2524
}
@@ -39,26 +38,19 @@ ColorPicker.prototype = {
3938
: ''
4039
},
4140

42-
changeColorFormat(color, format){
43-
format = (format+"").toLowerCase()
44-
color = any_to_hex(color)
45-
46-
return format == 'hex'
47-
? color
48-
: format.startsWith('hsl')
49-
? HSLAtoCSS( rgba_hsla( hex_rgba(color) ) )
50-
: format.startsWith('rgb')
51-
? hex_rgba(color)
52-
: color
53-
},
54-
5541
/**
5642
* normalizes any color to HSLA-Object
5743
* @param {String} color
5844
*/
5945
getHSLA( color ){
6046
let result
6147

48+
if( !color ) return
49+
50+
// if color argument is already an HSLA object, return it as-is
51+
if( color.h && color.s )
52+
return color
53+
6254
this.colorFormat = this.getColorFormat(color)
6355

6456
if( !color.indexOf('hsla') ){
@@ -128,10 +120,12 @@ ColorPicker.prototype = {
128120
*
129121
* @param {Object} hsla {h,s,l,a}
130122
*/
131-
setColor( hsla ){
132-
if( !hsla ) return
123+
setColor( value ){
124+
if( !value ) return
125+
126+
value = this.getHSLA(value)
133127

134-
this.color = hsla
128+
this.color = value
135129
this.setCSSColor()
136130
this.DOM.scope && this.updateAllCSSVars()
137131

@@ -175,4 +169,6 @@ ColorPicker.prototype = {
175169
}
176170
}
177171

172+
export { any_to_hex, hex_rgba, rgba_hsla, CSStoHSLA, HSLAtoCSS, changeColorFormat }
173+
178174
export default ColorPicker

‎src/swatches.js

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import parseHTML from './utils/parseHTML'
22
import { any_to_hex } from './utils/convertColors'
33

4-
const swatchesIncludes = (swatches, color) => swatches.some(swatch => {
5-
console.log( any_to_hex(swatch) , any_to_hex(color), any_to_hex(swatch) == any_to_hex(color) )
6-
return any_to_hex(swatch) == any_to_hex(color)
7-
})
4+
const swatchesIncludes = (swatches, color) => swatches.some(swatch => any_to_hex(swatch) == any_to_hex(color))
85

96
const storeKey = '@yaireo/color-picker/swatches'
107

‎src/utils/convertColors.js

+18
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,21 @@ export const rgba_hsla = rgba => {
7070

7171
export const hexToHsl = hex => rgba_hsla( hex_rgba(hex) )
7272

73+
/**
74+
* converts any color format to anoter
75+
* @param {String} color
76+
* @param {String} format ['hex', 'rgba', 'hsla']
77+
* @returns a color in another format
78+
*/
79+
export const changeColorFormat = (color, format) => {
80+
format = (format+"").toLowerCase()
81+
color = any_to_hex(color)
82+
83+
return format == 'hex'
84+
? color
85+
: format.startsWith('hsl')
86+
? HSLAtoCSS( rgba_hsla( hex_rgba(color) ) )
87+
: format.startsWith('rgb')
88+
? hex_rgba(color)
89+
: color
90+
}

0 commit comments

Comments
 (0)