diff --git a/.gitattributes b/.gitattributes old mode 100644 new mode 100755 diff --git a/.github/source/LICENSE.txt b/.github/source/LICENSE.txt old mode 100644 new mode 100755 diff --git a/.github/source/_index.pug b/.github/source/_index.pug old mode 100644 new mode 100755 diff --git a/.github/source/index.css.scss b/.github/source/index.css.scss old mode 100644 new mode 100755 index 21573fc..b90e096 --- a/.github/source/index.css.scss +++ b/.github/source/index.css.scss @@ -1,105 +1,66 @@ -$color: #000; -$size: 12px; +$name: 'color-picker'; -.color-picker { - &, - &::before, - &::after, - *, - *::before, - *::after { - box-sizing: border-box; - } +:root { + --color-#{$name}__controls: #000; + --fill-#{$name}__controls: 0 0; + --height-#{$name}__controls: 10em; + --shadow-#{$name}__dialog: 1px 3px 6px rgba(0, 0, 0, .5); + --size-#{$name}__controls: 12px; + --stroke-#{$name}__controls: #000; + --width-#{$name}__control--a: 1.5em; + --width-#{$name}__control--h: 1.5em; + --width-#{$name}__control--s\/v: 10em; } -.color-picker { - position: absolute; - top: 0; - left: 0; - z-index: 9999; - box-shadow: 1px 3px 6px rgba(0, 0, 0, .5); - > div { - display: flex; - height: 10em; - border: 1px solid $color; - color: $color; - * { - border-color: inherit; - color: inherit; - } - } - i { - font: inherit; - font-size: $size; /* Measure the color picker control size by measuring the text size */ - } - &\:a, - &\:h, - &\:sv { - background-size: 100% 100%; - position: relative; - -webkit-touch-callout: none; - -webkit-user-select: none; +.#{$name}__control { + &--a, + &--h, + &--s\/v { -moz-user-select: none; -ms-user-select: none; - user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; + -webkit-user-select: none; + background-size: 100% 100%; + position: relative; + user-select: none; div { - position: absolute; - top: 0; - right: 0; bottom: 0; left: 0; + position: absolute; + right: 0; + top: 0; } } - &\:a, - &\:h { - width: 1.5em; + &--a, + &--h { border-left: 1px solid; cursor: ns-resize; overflow: hidden; - i { - display: block; - height: .5em; - position: absolute; - top: -.25em; - right: 0; - left: 0; - z-index: 2; - &::before { - display: block; - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - border:.25em solid; - border-top-color: transparent; - border-bottom-color: transparent; - } - } } - &\:a { + &--a { + width: var(--width-#{$name}__control--a); div { z-index: 2; + div { background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%), linear-gradient(45deg, #ddd 25%, #fff 25%, #fff 75%, #ddd 75%, #ddd 100%); - background-size: .5em .5em; background-position: 0 0, .25em .25em; + background-size: .5em .5em; z-index: 1; } } } - &\:h { + &--h { + width: var(--width-#{$name}__control--a); div { background-image: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); } } - &\:sv { - width: 10em; + &--s\/v { cursor: crosshair; overflow: hidden; + width: var(--width-#{$name}__control--s\/v); div { + div { background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); @@ -108,26 +69,86 @@ $size: 12px; } } } - i { + } +} + +.#{$name}__controls { + background: var(--fill-#{$name}__controls); + border-radius: var(--arc-#{$name}__controls); + border: 1px solid; + border-color: var(--stroke-#{$name}__controls); + color: var(--color-#{$name}__controls); + display: flex; + height: var(--height-#{$name}__controls); + overflow: hidden; +} + +.#{$name}__dialog { + box-shadow: var(--shadow-#{$name}__dialog); + &, + &::before, + &::after, + *, + *::before, + *::after { + box-sizing: border-box; + font: inherit; + } +} + +.#{$name}__dialog { + left: 0; + position: absolute; + top: 0; + z-index: 9999; +} + +.#{$name}__cursor { + border-color: inherit; + color: inherit; + font: inherit; + font-size: var(--size-#{$name}__controls); /* Measure the color picker control size by measuring the text size */ + &--a, + &--h { + display: block; + height: .5em; + left: 0; + position: absolute; + right: 0; + top: -.25em; + z-index: 2; + &::before { + border:.25em solid; + border-bottom-color: transparent; + border-top-color: transparent; + bottom: 0; + content: ""; display: block; - width: .75em; - height: .75em; + left: 0; position: absolute; - top: -.375em; - right: -.375em; - z-index: 2; - &::before { - display: block; - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - border: 1px solid #fff; - border-radius: 100%; - box-shadow: 0 0 2px #000; - } + right: 0; + top: 0; } } -} + &--s\/v { + display: block; + height: .75em; + position: absolute; + right: -.375em; + top: -.375em; + width: .75em; + z-index: 2; + &::before { + border-radius: 100%; + border: 1px solid #fff; + bottom: 0; + box-shadow: 0 0 2px #000; + content: ""; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; + } + } +} \ No newline at end of file diff --git a/.github/source/index.html.pug b/.github/source/index.html.pug old mode 100644 new mode 100755 index f03ca5b..9370beb --- a/.github/source/index.html.pug +++ b/.github/source/index.html.pug @@ -64,7 +64,7 @@ block style | text-align: left; | vertical-align: top; | } - | body > p:first-child { + | [role='alert'] { | background: #ffa; | border: 1px dashed; | margin-top: 0; @@ -72,7 +72,7 @@ block style | } block content - p Do you like this project? Please support my #[a(href='https://github.com/mecha-cms') Mecha CMS] project too. Thank you! + p(role='alert') Do you like this project? Please support my #[a(href='https://github.com/mecha-cms') Mecha CMS] project too. Thank you! header h1= title p Color Picker is a simple JavaScript application that aims to provide custom color picker feature to the web with the most basic appearance and usability. diff --git a/.github/source/index.js.mjs b/.github/source/index.js.mjs old mode 100644 new mode 100755 index c524162..04c9e0a --- a/.github/source/index.js.mjs +++ b/.github/source/index.js.mjs @@ -125,7 +125,9 @@ function CP(source, state = {}) { return [0, 0, 0, 1]; // Default to black } - let className = state['class'], + let classNameB = state['class'], + classNameE = classNameB + '__', + classNameM = classNameB + '--', doEnter, doExit, doFit, @@ -138,31 +140,43 @@ function CP(source, state = {}) { theData = RGB2HSV(theColor), self = setElement('div', { - 'class': className + 'class': classNameE + 'dialog', + 'role': 'dialog' }), - C = setElement('div'), + C = setElement('div', { + 'class': classNameE + 'controls' + }), + classNameControl = classNameE + 'control', + classNameCursor = classNameE + 'cursor', + SV = setElement('div', { - 'class': className + ':sv' + 'class': classNameControl + ' ' + classNameControl + '--s/v' }), H = setElement('div', { - 'class': className + ':h' + 'class': classNameControl + ' ' + classNameControl + '--h' }), A = setElement('div', { - 'class': className + ':a' + 'class': classNameControl + ' ' + classNameControl + '--a' }), SVColor = setElement('div'), SVSaturation = setElement('div'), SVValue = setElement('div'), - SVCursor = setElement('i'), + SVCursor = setElement('i', { + 'class': classNameCursor + ' ' + classNameCursor + '--s/v' + }), HColor = setElement('div'), - HCursor = setElement('i'), + HCursor = setElement('i', { + 'class': classNameCursor + ' ' + classNameCursor + '--h' + }), AColor = setElement('div'), APattern = setElement('div'), - ACursor = setElement('i'), + ACursor = setElement('i', { + 'class': classNameCursor + ' ' + classNameCursor + '--a' + }), SVStarting = 0, HStarting = 0, @@ -392,7 +406,7 @@ function CP(source, state = {}) { return $; // Already ejected } delete source[name]; - letClass(source, className + '-source'); + letClass(source, classNameE + 'source'); offEvents(EVENTS_DOWN, source, doClick); return doExit(), fire('pop', theColor); }; @@ -408,7 +422,7 @@ function CP(source, state = {}) { return doSetColor(), $; }; - setClass(source, className + '-source'); + setClass(source, classNameE + 'source'); } doApply(1); diff --git a/.github/source/test.html.pug b/.github/source/test.html.pug old mode 100644 new mode 100755 diff --git a/.github/source/test/disabled.html.pug b/.github/source/test/disabled.html.pug old mode 100644 new mode 100755 diff --git a/.github/source/test/fit.html.pug b/.github/source/test/fit.html.pug old mode 100644 new mode 100755 diff --git a/.github/source/test/hooks.html.pug b/.github/source/test/hooks.html.pug old mode 100644 new mode 100755 diff --git a/.github/source/test/picker.html.pug b/.github/source/test/picker.html.pug old mode 100644 new mode 100755 diff --git a/.github/source/test/pop.html.pug b/.github/source/test/pop.html.pug old mode 100644 new mode 100755 diff --git a/.github/source/test/size.html.pug b/.github/source/test/size.html.pug old mode 100644 new mode 100755 index 094908f..0d8f8f9 --- a/.github/source/test/size.html.pug +++ b/.github/source/test/size.html.pug @@ -41,11 +41,11 @@ block content p By default, color picker size will follow the container’s text size; the container that bounds to the color picker panel. pre: code | /* To change the color picker size */ - | .color-picker { + | .color-picker__controls { | font-size: 20px; | } | - | /* To change the color picker control’s size */ - | .color-picker i { - | font-size: 15px; + | /* To change the color picker cursor’s size */ + | .color-picker__cursor { + | font-size: 20px; | } \ No newline at end of file diff --git a/.github/source/tweak/alpha.html.pug b/.github/source/tweak/alpha.html.pug old mode 100644 new mode 100755 index 4f9c4e2..6daa0c7 --- a/.github/source/tweak/alpha.html.pug +++ b/.github/source/tweak/alpha.html.pug @@ -7,7 +7,7 @@ block state block style style - | .color-picker.no-alpha .color-picker\:a { + | .color-picker__dialog--no-alpha .color-picker__control--a { | display: none; | } @@ -18,7 +18,7 @@ block script | return; | } | picker.noAlpha = true; - | picker.self.classList.add('no-alpha'); + | picker.self.classList.add(picker.state.class + '__dialog--no-alpha'); | picker.on('change', function(r, g, b) { | this.source.value = this.color(r, g, b, 1); | }); diff --git a/.github/source/tweak/button.html.pug b/.github/source/tweak/button.html.pug old mode 100644 new mode 100755 diff --git a/.github/source/tweak/close.html.pug b/.github/source/tweak/close.html.pug old mode 100644 new mode 100755 diff --git a/.github/source/tweak/color.hex.html.pug b/.github/source/tweak/color.hex.html.pug old mode 100644 new mode 100755 diff --git a/.github/source/tweak/color.name.html.pug b/.github/source/tweak/color.name.html.pug old mode 100644 new mode 100755 diff --git a/.github/source/tweak/color.rgba.html.pug b/.github/source/tweak/color.rgba.html.pug old mode 100644 new mode 100755 diff --git a/.github/source/tweak/events.html.pug b/.github/source/tweak/events.html.pug old mode 100644 new mode 100755 diff --git a/.github/source/tweak/input.html.pug b/.github/source/tweak/input.html.pug old mode 100644 new mode 100755 index b60b329..0d52723 --- a/.github/source/tweak/input.html.pug +++ b/.github/source/tweak/input.html.pug @@ -8,7 +8,7 @@ block state block style style | /* HTML5 color input does not support alpha channel */ - | .color-picker\:a { + | .color-picker__control--a { | display: none; | } diff --git a/.github/source/tweak/keyboard.html.pug b/.github/source/tweak/keyboard.html.pug old mode 100644 new mode 100755 index 10a48d9..a831883 --- a/.github/source/tweak/keyboard.html.pug +++ b/.github/source/tweak/keyboard.html.pug @@ -8,9 +8,9 @@ block state block style style | /* Fake focus state */ - | .color-picker.focus\:a .color-picker\:a div, - | .color-picker.focus\:h .color-picker\:h div, - | .color-picker.focus\:sv .color-picker\:sv div { + | .color-picker--focus--a .color-picker__control--a div, + | .color-picker--focus--h .color-picker__control--h div, + | .color-picker--focus--s\/v .color-picker__control--s\/v div { | outline: 2px solid rgba(0, 0, 255, .5); | outline-offset: -2px; | } @@ -71,7 +71,8 @@ block script | // 1: h | // 2: a | tabIndex = 0; - | let source = picker.source, + | let classNameM = picker.state.class + '--', + | source = picker.source, | self = picker.self, | controls = self.firstChild.children, | a = controls[2], @@ -86,9 +87,9 @@ block script | tabIndex = 1; | hh = h.offsetHeight; | hy = parseFloat(hCursor.style.top) + (ch = hCursor.offsetHeight / 2); - | self.classList.add('focus:h'); - | self.classList.remove('focus:a'); - | self.classList.remove('focus:sv'); + | self.classList.add(classNameM + 'focus--h'); + | self.classList.remove(classNameM + 'focus--a'); + | self.classList.remove(classNameM + 'focus--s/v'); | }, | svFocus = () => { | tabIndex = 0; @@ -96,17 +97,17 @@ block script | sx = parseFloat(svCursor.style.right) + (cw = svCursor.offsetWidth / 2); | vh = sv.offsetHeight; | vy = parseFloat(svCursor.style.top) + (ch = svCursor.offsetHeight / 2); - | self.classList.add('focus:sv'); - | self.classList.remove('focus:a'); - | self.classList.remove('focus:h'); + | self.classList.add(classNameM + 'focus--s/v'); + | self.classList.remove(classNameM + 'focus--a'); + | self.classList.remove(classNameM + 'focus--h'); | }, | aFocus = () => { | tabIndex = 2; | ah = a.offsetHeight; | ay = parseFloat(aCursor.style.top) + (ch = aCursor.offsetHeight / 2); - | self.classList.add('focus:a'); - | self.classList.remove('focus:h'); - | self.classList.remove('focus:sv'); + | self.classList.add(classNameM + 'focus--a'); + | self.classList.remove(classNameM + 'focus--h'); + | self.classList.remove(classNameM + 'focus--s/v'); | }; | picker.on('enter', () => { | ['touchstart', 'mousedown'].forEach(e => { diff --git a/.github/source/tweak/live.html.pug b/.github/source/tweak/live.html.pug old mode 100644 new mode 100755 diff --git a/.github/source/tweak/picker-color.html.pug b/.github/source/tweak/picker-color.html.pug old mode 100644 new mode 100755 index 8cb15ac..9a97ea8 --- a/.github/source/tweak/picker-color.html.pug +++ b/.github/source/tweak/picker-color.html.pug @@ -7,41 +7,42 @@ block state block style style - | .color-pickers { - | display: block; - | border: 1px solid #000; - | border-top-width: 0; - | overflow: hidden; - | } - | - | .color-pickers span { + | .color-picker__color { | display: block; | float: left; | width: 10%; | height: 1.25em; | cursor: pointer; | } + | + | .color-picker__colors { + | display: block; + | border: 1px solid #000; + | border-top-width: 0; + | overflow: hidden; + | } block script script - | function preDefineColorValues(picker, colors) { + | function preDefineColorValues(picker, pickers) { | if (picker.hasColorPallete) { | return; | } | picker.hasColorPallete = true; - | let pane = document.createElement('span'), c; - | for (let i = 0, j = colors.length; i < j; ++i) { - | c = document.createElement('span'); - | c.title = '#' + colors[i]; - | c.style.backgroundColor = '#' + colors[i]; - | c.addEventListener('click', function(e) { + | let color, colors = document.createElement('span'); + | for (let i = 0, j = pickers.length; i < j; ++i) { + | color = document.createElement('span'); + | color.className = picker.state.class + '__color'; + | color.style.backgroundColor = '#' + pickers[i]; + | color.title = '#' + pickers[i]; + | color.addEventListener('click', function(e) { | picker.set.apply(picker, CP.HEX(this.title)); | e.stopPropagation(); | }); - | pane.appendChild(c); + | colors.appendChild(color); | } - | pane.className = 'color-pickers'; - | picker.self.appendChild(pane); + | colors.className = picker.state.class + '__colors'; + | picker.self.appendChild(colors); | } | | const picker = new CP(document.querySelector('input')); diff --git a/.github/source/tweak/picker-view-code.html.pug b/.github/source/tweak/picker-view-code.html.pug old mode 100644 new mode 100755 index a5161f3..60e44d4 --- a/.github/source/tweak/picker-view-code.html.pug +++ b/.github/source/tweak/picker-view-code.html.pug @@ -7,7 +7,11 @@ block state block style style - | .color-picker input { + | .color-picker__control--a { + | display: none; + | } + | + | .color-picker__input { | box-sizing: border-box; | display: block; | width: 100%; @@ -21,13 +25,9 @@ block style | color: #000; | } | - | .color-picker input:invalid { + | .color-picker__input:invalid { | color: #f00; | } - | - | .color-picker\:a { - | display: none; - | } block script script @@ -37,6 +37,7 @@ block script | } | picker.hasColorInput = true; | let code = document.createElement('input'); + | code.className = picker.state.class + '__input'; | code.pattern = '^#([a-fA-F\\d]{3}){1,2}$'; | code.type = 'text'; | picker.self.appendChild(code); diff --git a/.github/source/tweak/picker-view.html.pug b/.github/source/tweak/picker-view.html.pug old mode 100644 new mode 100755 index 2d90c39..01e5d0f --- a/.github/source/tweak/picker-view.html.pug +++ b/.github/source/tweak/picker-view.html.pug @@ -7,21 +7,22 @@ block state block style style - | .color-view { - | display: block; - | border: 1px solid #000; - | border-top-width: 0; - | overflow: hidden; - | } - | - | .color-view span { + | .color-picker--view { + | cursor: pointer; | display: block; | float: left; - | width: 50%; | height: 50px; | line-height: 50px; | text-align: center; - | cursor: pointer; + | width: 50%; + | } + | + | .color-picker--views { + | border: 1px solid; + | border-color: var(--stroke-color-picker__controls); + | border-top-width: 0; + | display: block; + | overflow: hidden; | } block script @@ -34,7 +35,9 @@ block script | let box = document.createElement('span'), | boxReset = document.createElement('span'), | boxSubmit = document.createElement('span'); - | box.className = 'color-view'; + | box.className = picker.state.class + '--views'; + | boxReset.className = picker.state.class + '--view'; + | boxSubmit.className = picker.state.class + '--view'; | box.appendChild(boxReset); | box.appendChild(boxSubmit); | boxReset.textContent = 'Reset'; diff --git a/.github/source/tweak/replace.html.pug b/.github/source/tweak/replace.html.pug old mode 100644 new mode 100755 index de63555..351e3e8 --- a/.github/source/tweak/replace.html.pug +++ b/.github/source/tweak/replace.html.pug @@ -7,15 +7,16 @@ block state block style style - | .color-box { - | display: inline-block; - | width: 30px; - | height: 30px; + | .color-picker { | border: 1px solid; + | border-color: var(--stroke-color-picker__controls); | cursor: pointer; + | display: inline-block; + | height: 30px; + | width: 30px; | } | - | .color-picker { + | .color-picker__dialog { | margin-top: -1px; | } @@ -28,12 +29,12 @@ block script | source.hasColorBox = true; | let box = document.createElement('span'), | color = source.value; - | box.className = 'color-box'; | box.value = color; // Hacky :( | box.style.backgroundColor = color; | source.parentNode.insertBefore(box, source); | source.type = 'hidden'; | const picker = new CP(box); + | box.className = picker.state.class; | picker.on('change', function(r, g, b, a) { | let color = this.color(r, g, b, a); | source.value = color; diff --git a/.github/source/tweak/scroll.html.pug b/.github/source/tweak/scroll.html.pug old mode 100644 new mode 100755 diff --git a/.github/source/tweak/static.html.pug b/.github/source/tweak/static.html.pug old mode 100644 new mode 100755 index d823b74..c032799 --- a/.github/source/tweak/static.html.pug +++ b/.github/source/tweak/static.html.pug @@ -7,12 +7,13 @@ block state block style style - | .color-picker.is-static { + | .color-picker__dialog--static { + | box-shadow: none; | display: inline-block; - | position: static; | left: 0 !important; + | position: static; | top: 0 !important; - | box-shadow: none; + | vertical-align: middle; | } block script @@ -29,7 +30,7 @@ block script | this.source.value = this.color(r, g, b, a); | }); | // Add a `is-static` class to the color picker panel - | picker.self.classList.add('is-static'); + | picker.self.classList.add(picker.state.class + '__dialog--static'); | // Put color picker panel to `container` | picker.enter(container); | } diff --git a/.github/source/tweak/transition.html.pug b/.github/source/tweak/transition.html.pug old mode 100644 new mode 100755 diff --git a/.github/workflows/npm.yml b/.github/workflows/npm.yml old mode 100644 new mode 100755 diff --git a/.gitignore b/.gitignore old mode 100644 new mode 100755 diff --git a/LICENSE b/LICENSE index 6fbf1fd..c4fd36e 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright © 2021 Taufik Nurrohman +Copyright © 2022 Taufik Nurrohman Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal diff --git a/README.md b/README.md old mode 100644 new mode 100755 index 7ce49ec..8f7b06b --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ Color Picker ============ +![Code Size](https://img.shields.io/github/languages/code-size/taufik-nurrohman/color-picker?color=%23444&style=for-the-badge) ![License](https://img.shields.io/github/license/taufik-nurrohman/color-picker?color=%23444&style=for-the-badge) > A simple color picker application written in pure JavaScript, for modern browsers. Has support for touch events. Touchy… touchy… @@ -56,6 +57,11 @@ This project exists thanks to all the people who contribute. Release Notes ------------- +### 2.4.0 + + - Added CSS variables for easy integration with third-party applications. + - Changed CSS classes to follow the [BEM](http://getbem.com) approach. + ### 2.3.2 - Added keyboard controls example [#71](https://github.com/taufik-nurrohman/color-picker/issues/71). diff --git a/index.css b/index.css index 2931529..8fa3289 100644 --- a/index.css +++ b/index.css @@ -1,127 +1,152 @@ -.color-picker, -.color-picker::before, -.color-picker::after, -.color-picker *, -.color-picker *::before, -.color-picker *::after { - box-sizing: border-box; +:root { + --color-color-picker__controls: #000; + --fill-color-picker__controls: 0 0; + --height-color-picker__controls: 10em; + --shadow-color-picker__dialog: 1px 3px 6px rgba(0, 0, 0, .5); + --size-color-picker__controls: 12px; + --stroke-color-picker__controls: #000; + --width-color-picker__control--a: 1.5em; + --width-color-picker__control--h: 1.5em; + --width-color-picker__control--s\/v: 10em; } -.color-picker { - position: absolute; - top: 0; - left: 0; - z-index: 9999; - box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.5); -} -.color-picker > div { - display: flex; - height: 10em; - border: 1px solid #000; - color: #000; -} -.color-picker > div * { - border-color: inherit; - color: inherit; -} -.color-picker i { - font: inherit; - font-size: 12px; - /* Measure the color picker control size by measuring the text size */ -} -.color-picker\:a, -.color-picker\:h, -.color-picker\:sv { - background-size: 100% 100%; - position: relative; - -webkit-touch-callout: none; - -webkit-user-select: none; +.color-picker__control--a, +.color-picker__control--h, +.color-picker__control--s\/v { -moz-user-select: none; -ms-user-select: none; - user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; + -webkit-user-select: none; + background-size: 100% 100%; + position: relative; + user-select: none; } -.color-picker\:a div, -.color-picker\:h div, -.color-picker\:sv div { - position: absolute; - top: 0; - right: 0; +.color-picker__control--a div, +.color-picker__control--h div, +.color-picker__control--s\/v div { bottom: 0; left: 0; + position: absolute; + right: 0; + top: 0; } -.color-picker\:a, -.color-picker\:h { - width: 1.5em; +.color-picker__control--a, +.color-picker__control--h { border-left: 1px solid; cursor: ns-resize; overflow: hidden; } -.color-picker\:a i, -.color-picker\:h i { - display: block; - height: 0.5em; - position: absolute; - top: -0.25em; - right: 0; - left: 0; - z-index: 2; +.color-picker__control--a { + width: var(--width-color-picker__control--a); } -.color-picker\:a i::before, -.color-picker\:h i::before { - display: block; - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - border: 0.25em solid; - border-top-color: transparent; - border-bottom-color: transparent; -} -.color-picker\:a div { +.color-picker__control--a div { z-index: 2; } -.color-picker\:a div + div { +.color-picker__control--a div + div { background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%), linear-gradient(45deg, #ddd 25%, #fff 25%, #fff 75%, #ddd 75%, #ddd 100%); - background-size: 0.5em 0.5em; background-position: 0 0, 0.25em 0.25em; + background-size: 0.5em 0.5em; z-index: 1; } -.color-picker\:h div { +.color-picker__control--h { + width: var(--width-color-picker__control--a); +} +.color-picker__control--h div { background-image: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); } -.color-picker\:sv { - width: 10em; +.color-picker__control--s\/v { cursor: crosshair; overflow: hidden; + width: var(--width-color-picker__control--s\/v); } -.color-picker\:sv div + div { +.color-picker__control--s\/v div + div { background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); } -.color-picker\:sv div + div + div { +.color-picker__control--s\/v div + div + div { background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); } -.color-picker\:sv i { - display: block; - width: 0.75em; - height: 0.75em; + +.color-picker__controls { + background: var(--fill-color-picker__controls); + border-radius: var(--arc-color-picker__controls); + border: 1px solid; + border-color: var(--stroke-color-picker__controls); + color: var(--color-color-picker__controls); + display: flex; + height: var(--height-color-picker__controls); + overflow: hidden; +} + +.color-picker__dialog { + box-shadow: var(--shadow-color-picker__dialog); +} +.color-picker__dialog, +.color-picker__dialog::before, +.color-picker__dialog::after, +.color-picker__dialog *, +.color-picker__dialog *::before, +.color-picker__dialog *::after { + box-sizing: border-box; + font: inherit; +} + +.color-picker__dialog { + left: 0; position: absolute; - top: -0.375em; - right: -0.375em; - z-index: 2; + top: 0; + z-index: 9999; +} + +.color-picker__cursor { + border-color: inherit; + color: inherit; + font: inherit; + font-size: var(--size-color-picker__controls); + /* Measure the color picker control size by measuring the text size */ } -.color-picker\:sv i::before { +.color-picker__cursor--a, +.color-picker__cursor--h { display: block; - content: ""; + height: 0.5em; + left: 0; position: absolute; - top: 0; right: 0; + top: -0.25em; + z-index: 2; +} +.color-picker__cursor--a::before, +.color-picker__cursor--h::before { + border: 0.25em solid; + border-bottom-color: transparent; + border-top-color: transparent; bottom: 0; + content: ""; + display: block; left: 0; - border: 1px solid #fff; + position: absolute; + right: 0; + top: 0; +} +.color-picker__cursor--s\/v { + display: block; + height: 0.75em; + position: absolute; + right: -0.375em; + top: -0.375em; + width: 0.75em; + z-index: 2; +} +.color-picker__cursor--s\/v::before { border-radius: 100%; + border: 1px solid #fff; + bottom: 0; box-shadow: 0 0 2px #000; + content: ""; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; } \ No newline at end of file diff --git a/index.html b/index.html index 4dc217d..5e5c93c 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - Color Picker 2.3.2 + Color Picker 2.4.0 -

Do you like this project? Please support my Mecha CMS project too. Thank you!

+

Do you like this project? Please support my Mecha CMS project too. Thank you!

-

Color Picker 2.3.2

+

Color Picker 2.4.0

Color Picker is a simple JavaScript application that aims to provide custom color picker feature to the web with the most basic appearance and usability.

@@ -370,7 +370,7 @@

License

diff --git a/test/hooks.html b/test/hooks.html index 2fd8223..5bc3916 100644 --- a/test/hooks.html +++ b/test/hooks.html @@ -16,11 +16,9 @@ diff --git a/tweak/button.html b/tweak/button.html index f8719fb..45691ae 100644 --- a/tweak/button.html +++ b/tweak/button.html @@ -45,9 +45,7 @@ let source = picker.source; source.parentNode.insertBefore(button, source.nextSibling); } - const picker = new CP(document.querySelector('input')); - enableToggleByButton(picker); diff --git a/tweak/close.html b/tweak/close.html index 322eccb..0ae0405 100644 --- a/tweak/close.html +++ b/tweak/close.html @@ -30,9 +30,7 @@ this.source.value = this.color(r, g, b, a); }); } - const picker = new CP(document.querySelector('input')); - enableCloseByButton(picker); diff --git a/tweak/color.hex.html b/tweak/color.hex.html index 74eab49..1f27b28 100644 --- a/tweak/color.hex.html +++ b/tweak/color.hex.html @@ -14,7 +14,6 @@ diff --git a/tweak/input.html b/tweak/input.html index dc37c79..056b405 100644 --- a/tweak/input.html +++ b/tweak/input.html @@ -8,7 +8,7 @@ @@ -33,7 +33,6 @@ this.source.value = this.color(r, g, b, 1); }); } - document.querySelectorAll('input[type=color]').forEach(applyToColorInput); diff --git a/tweak/keyboard.html b/tweak/keyboard.html index 7f6a589..2b070d1 100644 --- a/tweak/keyboard.html +++ b/tweak/keyboard.html @@ -8,9 +8,9 @@ @@ -30,46 +30,32 @@ \ No newline at end of file diff --git a/tweak/picker-view-code.html b/tweak/picker-view-code.html index f792249..00f8917 100644 --- a/tweak/picker-view-code.html +++ b/tweak/picker-view-code.html @@ -7,7 +7,11 @@ Color Picker @@ -42,6 +42,7 @@ } picker.hasColorInput = true; let code = document.createElement('input'); + code.className = picker.state.class + '__input'; code.pattern = '^#([a-fA-F\\d]{3}){1,2}$'; code.type = 'text'; picker.self.appendChild(code); @@ -65,9 +66,7 @@ code.addEventListener(e, onChange); }); } - const picker = new CP(document.querySelector('input')); - enableColorInput(picker); diff --git a/tweak/picker-view.html b/tweak/picker-view.html index f2790d6..45efefd 100644 --- a/tweak/picker-view.html +++ b/tweak/picker-view.html @@ -7,21 +7,22 @@ Color Picker @@ -40,7 +41,9 @@ let box = document.createElement('span'), boxReset = document.createElement('span'), boxSubmit = document.createElement('span'); - box.className = 'color-view'; + box.className = picker.state.class + '--views'; + boxReset.className = picker.state.class + '--view'; + boxSubmit.className = picker.state.class + '--view'; box.appendChild(boxReset); box.appendChild(boxSubmit); boxReset.textContent = 'Reset'; @@ -77,7 +80,6 @@ picker.source.focus(); }); } - // function isDark(hex) { let rgb = parseInt(hex.slice(1), 16), @@ -86,9 +88,7 @@ b = (rgb >> 0) & 0xff; return (.2126 * r + .7152 * g + .0722 * b) < 40; } - const picker = new CP(document.querySelector('input')); - enableColorView(picker); diff --git a/tweak/replace.html b/tweak/replace.html index 401014b..112d477 100644 --- a/tweak/replace.html +++ b/tweak/replace.html @@ -7,15 +7,16 @@ Color Picker @@ -34,12 +35,12 @@ source.hasColorBox = true; let box = document.createElement('span'), color = source.value; - box.className = 'color-box'; box.value = color; // Hacky :( box.style.backgroundColor = color; source.parentNode.insertBefore(box, source); source.type = 'hidden'; const picker = new CP(box); + box.className = picker.state.class; picker.on('change', function(r, g, b, a) { let color = this.color(r, g, b, a); source.value = color; @@ -47,7 +48,6 @@ this.source.style.backgroundColor = color; }); } - replaceWithColorBox(document.querySelector('input')); diff --git a/tweak/scroll.html b/tweak/scroll.html index 0ee9e13..ba9ba49 100644 --- a/tweak/scroll.html +++ b/tweak/scroll.html @@ -67,7 +67,6 @@ picker.self.style.marginLeft = (initScrollPosition.y - this.scrollLeft) + 'px'; }); } - let sources = document.querySelectorAll('input'), picker_1 = new CP(sources[0]), picker_2 = new CP(sources[1]); @@ -75,10 +74,8 @@ function onChange(r, g, b, a) { this.source.value = this.color(r, g, b, a); } - picker_1.on('change', onChange); picker_2.on('change', onChange); - scrollFollowColorPicker(picker_2, document.querySelector('#pane-2')); diff --git a/tweak/static.html b/tweak/static.html index 3b0bdc6..76dc5bf 100644 --- a/tweak/static.html +++ b/tweak/static.html @@ -7,12 +7,13 @@ Color Picker @@ -36,13 +37,11 @@ this.source.value = this.color(r, g, b, a); }); // Add a `is-static` class to the color picker panel - picker.self.classList.add('is-static'); + picker.self.classList.add(picker.state.class + '__dialog--static'); // Put color picker panel to `container` picker.enter(container); } - const picker = new CP(document.querySelector('input')); - enableStaticColorPicker(picker, document.querySelectorAll('p')[1]); diff --git a/tweak/transition.html b/tweak/transition.html index 7adad4f..f1149d0 100644 --- a/tweak/transition.html +++ b/tweak/transition.html @@ -33,13 +33,10 @@ this.self.style[property] = change[0]; }); } - const picker = new CP(document.querySelector('input')); - picker.on('change', function(r, g, b, a) { this.source.value = this.color(r, g, b, a); }); - enableColorPickerEffect(picker, 'opacity', [0, 1], 250);