├── .editorconfig
├── .eslintrc
├── .github
├── CONTRIBUTING.md
├── FUNDING.yml
├── ISSUE_TEMPLATE
│ ├── bug_report.md
│ ├── misc.md
│ └── question.md
└── workflows
│ └── ci.yml
├── .gitignore
├── .gitpod.yml
├── EXAMPLES.md
├── LICENSE
├── README.md
├── index.html
├── package.json
├── pnpm-lock.yaml
├── scripts
├── build.js
└── bundles.js
├── src
├── js
│ ├── libs
│ │ ├── moveable.js
│ │ └── selectable.js
│ ├── pickr.js
│ ├── template.js
│ └── utils
│ │ ├── color.js
│ │ ├── hsvacolor.js
│ │ └── utils.js
└── scss
│ ├── base.scss
│ ├── lib
│ ├── _mixins.scss
│ └── _variables.scss
│ └── themes
│ ├── classic.scss
│ ├── monolith.scss
│ └── nano.scss
├── types
└── pickr.d.ts
├── webpack.config.js
└── www
├── favicon.png
├── index.css
└── index.js
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 4
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "eslint:recommended"
4 | ],
5 | "env": {
6 | "browser": true
7 | },
8 | "parserOptions": {
9 | "ecmaVersion": 2022,
10 | "sourceType": "module"
11 | },
12 | "rules": {
13 | "new-cap": "off",
14 | "no-cond-assign": "off"
15 | },
16 | "globals": {
17 | "VERSION": true
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contribution Guidelines
2 |
3 | ### Issue
4 |
5 | 1. Try [master](https://github.com/Simonwep/pickr/tree/master)-branch, perhaps the problem has been solved.
6 | 2. [Use the search](https://github.com/Simonwep/pickr/search?type=Issues), maybe there is already an answer.
7 | 3. If not found, [create an issue](https://github.com/Simonwep/pickr/issues/new), please dont forget to carefully describe it how to reproduce it / pay attention to the issue-template. If possible, provide a [JSFiddle](https://jsfiddle.net/).
8 |
9 | ***
10 |
11 | ### Pull Request
12 |
13 | 1. Before a Pull request run `npm run build`.
14 | 2. Please take care about basic commit message convetions, see [Writing Good Commit Messages](https://github.com/erlang/otp/wiki/writing-good-commit-messages).
15 | 3. Pull requests only into [master](https://github.com/Simonwep/pickr/tree/master)-branch.
16 |
17 | ***
18 |
19 | ### Setup
20 |
21 | This project requires [npm](https://nodejs.org/en/).
22 |
23 | 1. Fork this repo on [github](https://github.com/Simonwep/pickr).
24 | 2. Clone locally.
25 | 3. From your local repro run `npm install`.
26 | 4. Run lcoal dev server `npm run dev` and go to `http://localhost:8080/`
27 |
28 | ### Online setup with a single click
29 |
30 | You can also use Gitpod (A free online VS Code-like IDE). With a single click it will launch a workspace and automatically:
31 |
32 | - clone the pickr repo.
33 | - install the dependencies.
34 | - run `yarn run dev`.
35 |
36 | So that you can start straight away.
37 |
38 | [](https://gitpod.io/#https://github.com/Simonwep/pickr)
39 |
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: Simonwep
2 | patreon: simonwep
3 | custom: ["paypal.me/simonreinisch", "buymeacoffee.com/aVc3krbXQ"]
4 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | title: ''
5 | labels: unconfirmed
6 | assignees: ''
7 |
8 | ---
9 |
10 |
11 |
12 | #### What is the current behavior?
13 |
14 | #### Please provide the steps to reproduce and create a [JSFiddle](https://jsfiddle.net/Simonwep/qx2Lod6r/).
15 |
16 |
17 | #### What is the expected behavior?
18 |
19 | #### Your environment:
20 | ```
21 | Version (see Pickr.version):
22 | Used bundle (es5 or normal one):
23 | Used theme (default is classic):
24 | Browser-version:
25 | Operating-system:
26 | ```
27 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/misc.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Other
3 | about: General question or issue
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 |
11 | #### Your environment:
12 | ```
13 | Version (see Pickr.version):
14 | Used bundle (es5 or normal one):
15 | Used theme (default is classic):
16 | Browser-version:
17 | Operating-system:
18 | ```
19 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/question.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Question
3 | about: General request of information / help
4 | title: ''
5 | labels: question
6 | assignees: ''
7 |
8 | ---
9 |
10 | #### Your question
11 |
12 |
13 | #### Your environment:
14 | ```
15 | Version (see Pickr.version):
16 | Used bundle (es5 or normal one):
17 | Used theme (default is classic):
18 | Browser-version:
19 | Operating-system:
20 | ```
21 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on: [ "push", "pull_request" ]
4 |
5 | jobs:
6 | build:
7 | name: Lint and build
8 | runs-on: ubuntu-latest
9 | steps:
10 | - name: Checkout repository
11 | uses: actions/checkout@v4
12 |
13 | - name: Setup pnpm
14 | uses: pnpm/action-setup@v3
15 | with:
16 | version: 9.0.6
17 |
18 | - name: Set up Node.js
19 | uses: actions/setup-node@v4
20 | with:
21 | node-version: 20
22 | cache: 'pnpm'
23 |
24 | - name: Install dependencies
25 | run: pnpm install --frozen-lockfile
26 |
27 | - name: Lint
28 | run: pnpm run lint
29 |
30 | - name: Build
31 | run: pnpm run build
32 |
33 | - name: Bundle files for deployment
34 | run: tar -cvf github-pages.tar dist www index.html
35 |
36 | - name: Upload artifact for deployment
37 | uses: actions/upload-artifact@v4
38 | with:
39 | name: github-pages
40 | path: github-pages.tar
41 |
42 | deploy:
43 | name: Deploy to GitHub Pages
44 | needs: build
45 | permissions:
46 | pages: write
47 | id-token: write
48 | environment:
49 | name: github-pages
50 | url: ${{ steps.deployment.outputs.page_url }}
51 | runs-on: ubuntu-latest
52 | steps:
53 | - name: Deploy to GitHub Pages
54 | uses: actions/deploy-pages@v4
55 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Created by .ignore support plugin (hsz.mobi)
2 | ### Node template
3 | # Logs
4 | logs
5 | *.log
6 | npm-debug.log*
7 | yarn-debug.log*
8 | yarn-error.log*
9 |
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 |
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 |
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 |
22 | # nyc test coverage
23 | .nyc_output
24 |
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 |
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 |
31 | # node-waf configuration
32 | .lock-wscript
33 |
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 |
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 |
41 | # TypeScript v1 declaration files
42 | typings/
43 |
44 | # Optional npm cache directory
45 | .npm
46 |
47 | # Optional eslint cache
48 | .eslintcache
49 |
50 | # Optional REPL history
51 | .node_repl_history
52 |
53 | # Output of 'npm pack'
54 | *.tgz
55 |
56 | # Yarn Integrity file
57 | .yarn-integrity
58 |
59 | # dotenv environment variables file
60 | .env
61 |
62 | # next.js build output
63 | .next
64 |
65 | # IntelliJ
66 | *.iml
67 | /.idea
68 |
69 | # My psd files
70 | /_psd
71 | /dist
72 |
--------------------------------------------------------------------------------
/.gitpod.yml:
--------------------------------------------------------------------------------
1 | tasks:
2 | - init: npm install
3 | command: npm run dev
4 | ports:
5 | - port: 3005
6 | onOpen: open-preview
7 |
--------------------------------------------------------------------------------
/EXAMPLES.md:
--------------------------------------------------------------------------------
1 | ### Requested features - immediately brought to life by a bit of code
2 |
3 | #### Saving the current color and closing the popup on `Enter` ([#187](https://github.com/Simonwep/pickr/issues/187))
4 |
5 | ```js
6 | pickr.on('init', instance => {
7 |
8 | // Grab actual input-element
9 | const {result} = instance.getRoot().interaction;
10 |
11 | // Listen to any key-events
12 | result.addEventListener('keydown', e => {
13 |
14 | // Detect whever the user pressed "Enter" on their keyboard
15 | if (e.key === 'Enter') {
16 | instance.applyColor(); // Save the currently selected color
17 | instance.hide(); // Hide modal
18 | }
19 | }, {capture: true});
20 | });
21 | ```
22 |
23 | #### Extending pickr to add / remove a list of swatches ([#241](https://github.com/Simonwep/pickr/issues/241))
24 | [@GreenFootballs](https://github.com/GreenFootballs) showed in [#241](https://github.com/Simonwep/pickr/issues/241) a way to extend pickr so that you can add or remove a whole list of swatches:
25 |
26 | > Note: Extending prototypes is generally considered bad practice, but in this case its reasonable as [there won't be any new features](https://github.com/Simonwep/pickr#status-of-this-project).
27 |
28 | ```js
29 | Pickr.prototype.getSwatches = function() {
30 | return this._swatchColors.reduce((arr, swatch) => {
31 | arr.push(swatch.color.toRGBA().toString(0));
32 | return arr;
33 | }, [] );
34 | }
35 |
36 | Pickr.prototype.setSwatches = function(swatches) {
37 | if (!swatches.length) return;
38 | for (let i = this._swatchColors.length - 1; i > -1; i--) {
39 | this.removeSwatch(i);
40 | }
41 | swatches.forEach(swatch => this.addSwatch(swatch));
42 | }
43 | ```
44 |
45 | ---
46 |
47 |
48 | > Feel free to submit a [PR](https://github.com/Simonwep/pickr/compare) or open
49 | > an [issue](https://github.com/Simonwep/pickr/issues/new?assignees=Simonwep&labels=&template=feature_request.md&title=) if
50 | > you got any ideas for more examples!
51 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 - 2021 Simon Reinisch
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | Flat, Simple, Hackable Color-Picker.
7 |
8 |
9 |
12 |
13 |
16 |
36 |
37 |
38 |
39 |
41 |
42 |
43 |
44 |
45 |
46 |
372 | #shadow-root
373 |
374 |
375 | #shadow-root
376 |
377 |
378 |
379 |
Pickr
40 |
41 |
42 |
61 |
62 |
63 | (Tap it)
64 |
65 |
66 |
67 |
68 |
69 |
70 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@simonwep/pickr",
3 | "version": "1.9.1",
4 | "license": "MIT",
5 | "author": "Simon Reinisch ",
6 | "description": "Flat, Simple, Hackable Color-Picker.",
7 | "keywords": [
8 | "ux",
9 | "pickr",
10 | "color",
11 | "color-picker"
12 | ],
13 | "main": "./dist/pickr.min.js",
14 | "types": "./types/pickr.d.ts",
15 | "module": "./dist/pickr.min.js",
16 | "scripts": {
17 | "build": "node ./scripts/build.js",
18 | "dev": "webpack serve --mode development",
19 | "lint": "eslint ./src/**/*.js",
20 | "lint:fix": "npm run lint -- --fix",
21 | "test:ci": "npm run lint:fix && npm run build"
22 | },
23 | "homepage": "https://github.com/Simonwep/pickr#readme",
24 | "repository": {
25 | "type": "git",
26 | "url": "https://github.com/Simonwep/pickr.git"
27 | },
28 | "bugs": {
29 | "url": "https://github.com/Simonwep/pickr/issues"
30 | },
31 | "files": [
32 | "types",
33 | "dist",
34 | "src/scss"
35 | ],
36 | "devDependencies": {
37 | "@babel/core": "7.24.5",
38 | "@babel/preset-env": "7.24.5",
39 | "autoprefixer": "10.4.19",
40 | "babel-loader": "9.1.3",
41 | "css-loader": "7.1.1",
42 | "eslint": "8.57.0",
43 | "eslint-webpack-plugin": "4.1.0",
44 | "mini-css-extract-plugin": "2.9.0",
45 | "postcss-loader": "8.1.1",
46 | "sass": "1.77.0",
47 | "sass-loader": "14.2.1",
48 | "terser-webpack-plugin": "5.3.10",
49 | "webpack": "5.91.0",
50 | "webpack-cli": "5.1.4",
51 | "webpack-dev-server": "5.0.4",
52 | "webpack-remove-empty-scripts": "1.0.4"
53 | },
54 | "dependencies": {
55 | "core-js": "3.37.0",
56 | "nanopop": "2.4.2"
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
1 | const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
2 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
3 | const TerserPlugin = require('terser-webpack-plugin');
4 | const {version} = require('../package');
5 | const bundles = require('./bundles');
6 | const util = require('util');
7 | const webpack = util.promisify(require('webpack'));
8 | const path = require('path');
9 |
10 | (async () => {
11 | const banner = new webpack.BannerPlugin(`Pickr ${version} MIT | https://github.com/Simonwep/pickr`);
12 |
13 | // CSS
14 | console.log('Bundle themes');
15 | await webpack({
16 | mode: 'production',
17 | entry: {
18 | 'classic': path.resolve('./src/scss/themes/classic.scss'),
19 | 'monolith': path.resolve('./src/scss/themes/monolith.scss'),
20 | 'nano': path.resolve('./src/scss/themes/nano.scss')
21 | },
22 |
23 | output: {
24 | path: path.resolve('./dist/themes')
25 | },
26 |
27 | module: {
28 | rules: [
29 | {
30 | test: /\.scss$/,
31 | use: [
32 | MiniCssExtractPlugin.loader,
33 | 'css-loader',
34 | {
35 | loader: 'postcss-loader',
36 | options: {
37 | postcssOptions: {
38 | plugins: [
39 | require('autoprefixer')
40 | ]
41 | }
42 | },
43 | },
44 | 'sass-loader'
45 | ]
46 | }
47 | ]
48 | },
49 |
50 | plugins: [
51 | banner,
52 | new RemoveEmptyScriptsPlugin(),
53 | new MiniCssExtractPlugin({
54 | filename: '[name].min.css'
55 | })
56 | ]
57 | });
58 |
59 | // Chaining promises to prevent issues caused by both filename configurations
60 | // writing a minified CSS file; both processes having handles on the files can
61 | // result in strange suffixes that fail to parse due to an extra `ap*/`
62 | for (const {filename, babelConfig} of bundles) {
63 | console.log(`Bundle ${filename}`);
64 |
65 | await webpack({
66 | mode: 'production',
67 | entry: path.resolve('./src/js/pickr.js'),
68 |
69 | output: {
70 | filename,
71 | path: path.resolve('./dist'),
72 | library: 'Pickr',
73 | libraryExport: 'default',
74 | libraryTarget: 'umd'
75 | },
76 |
77 | module: {
78 | rules: [
79 | {
80 | test: /\.m?js$/,
81 | exclude: /@babel(?:\/|\\{1,2})runtime|core-js/,
82 | include: [
83 | path.join(__dirname, '..', 'node_modules/nanopop'),
84 | path.join(__dirname, '..', 'src')
85 | ],
86 | use: [
87 | {
88 | loader: 'babel-loader',
89 | options: babelConfig
90 | }
91 | ]
92 | }
93 | ]
94 | },
95 |
96 | plugins: [
97 | banner,
98 | new webpack.SourceMapDevToolPlugin({
99 | filename: `${filename}.map`
100 | }),
101 | new webpack.DefinePlugin({
102 | VERSION: JSON.stringify(version)
103 | })
104 | ],
105 |
106 | optimization: {
107 | minimizer: [
108 | new TerserPlugin({
109 | extractComments: false
110 | })
111 | ]
112 | }
113 | });
114 | }
115 | })();
116 |
--------------------------------------------------------------------------------
/scripts/bundles.js:
--------------------------------------------------------------------------------
1 | module.exports = [
2 | {
3 | 'filename': 'pickr.es5.min.js',
4 | 'babelConfig': {
5 | 'babelrc': false,
6 | 'presets': [
7 | [
8 | '@babel/preset-env',
9 | {
10 | 'targets': '> 1%, ie 11',
11 | 'useBuiltIns': 'usage',
12 | 'corejs': 3,
13 | 'loose': true
14 | }
15 | ]
16 | ]
17 | }
18 | },
19 | {
20 | 'filename': 'pickr.min.js',
21 | 'babelConfig': {
22 | 'babelrc': false,
23 | 'presets': [
24 | [
25 | '@babel/preset-env',
26 | {
27 | 'targets': '> 1.5%, not dead, not ie <= 11'
28 | }
29 | ]
30 | ]
31 | }
32 | }
33 | ];
34 |
--------------------------------------------------------------------------------
/src/js/libs/moveable.js:
--------------------------------------------------------------------------------
1 | import * as _ from '../utils/utils';
2 |
3 | const clamp = v => Math.max(Math.min(v, 1), 0);
4 | export default function Moveable(opt) {
5 |
6 | const that = {
7 |
8 | // Assign default values
9 | options: Object.assign({
10 | lock: null,
11 | onchange: () => 0,
12 | onstop: () => 0
13 | }, opt),
14 |
15 | _keyboard(e) {
16 | const {options} = that;
17 | const {type, key} = e;
18 |
19 | // Check to see if the Movable is focused and then move it based on arrow key inputs
20 | // For improved accessibility
21 | if (document.activeElement === options.wrapper) {
22 | const {lock} = that.options;
23 | const up = key === 'ArrowUp';
24 | const right = key === 'ArrowRight';
25 | const down = key === 'ArrowDown';
26 | const left = key === 'ArrowLeft';
27 |
28 | if (type === 'keydown' && (up || right || down || left)) {
29 | let xm = 0;
30 | let ym = 0;
31 |
32 | if (lock === 'v') {
33 | xm = (up || right) ? 1 : -1;
34 | } else if (lock === 'h') {
35 | xm = (up || right) ? -1 : 1;
36 | } else {
37 | ym = up ? -1 : (down ? 1 : 0);
38 | xm = left ? -1 : (right ? 1 : 0);
39 | }
40 |
41 | that.update(
42 | clamp(that.cache.x + (0.01 * xm)),
43 | clamp(that.cache.y + (0.01 * ym))
44 | );
45 | e.preventDefault();
46 | } else if (key.startsWith('Arrow')) {
47 | that.options.onstop();
48 | e.preventDefault();
49 | }
50 | }
51 | },
52 |
53 | _tapstart(evt) {
54 | _.on(document, ['mouseup', 'touchend', 'touchcancel'], that._tapstop);
55 | _.on(document, ['mousemove', 'touchmove'], that._tapmove);
56 |
57 | if (evt.cancelable) {
58 | evt.preventDefault();
59 | }
60 |
61 | // Trigger
62 | that._tapmove(evt);
63 | },
64 |
65 | _tapmove(evt) {
66 | const {options, cache} = that;
67 | const {lock, element, wrapper} = options;
68 | const b = wrapper.getBoundingClientRect();
69 |
70 | let x = 0, y = 0;
71 | if (evt) {
72 | const touch = evt && evt.touches && evt.touches[0];
73 | x = evt ? (touch || evt).clientX : 0;
74 | y = evt ? (touch || evt).clientY : 0;
75 |
76 | // Reset to bounds
77 | if (x < b.left) {
78 | x = b.left;
79 | } else if (x > b.left + b.width) {
80 | x = b.left + b.width;
81 | }
82 | if (y < b.top) {
83 | y = b.top;
84 | } else if (y > b.top + b.height) {
85 | y = b.top + b.height;
86 | }
87 |
88 | // Normalize
89 | x -= b.left;
90 | y -= b.top;
91 | } else if (cache) {
92 | x = cache.x * b.width;
93 | y = cache.y * b.height;
94 | }
95 |
96 | if (lock !== 'h') {
97 | element.style.left = `calc(${x / b.width * 100}% - ${element.offsetWidth / 2}px)`;
98 | }
99 |
100 | if (lock !== 'v') {
101 | element.style.top = `calc(${y / b.height * 100}% - ${element.offsetHeight / 2}px)`;
102 | }
103 |
104 | that.cache = {x: x / b.width, y: y / b.height};
105 | const cx = clamp(x / b.width);
106 | const cy = clamp(y / b.height);
107 |
108 | switch (lock) {
109 | case 'v':
110 | return options.onchange(cx);
111 | case 'h':
112 | return options.onchange(cy);
113 | default:
114 | return options.onchange(cx, cy);
115 | }
116 | },
117 |
118 | _tapstop() {
119 | that.options.onstop();
120 | _.off(document, ['mouseup', 'touchend', 'touchcancel'], that._tapstop);
121 | _.off(document, ['mousemove', 'touchmove'], that._tapmove);
122 | },
123 |
124 | trigger() {
125 | that._tapmove();
126 | },
127 |
128 | update(x = 0, y = 0) {
129 | const {left, top, width, height} = that.options.wrapper.getBoundingClientRect();
130 |
131 | if (that.options.lock === 'h') {
132 | y = x;
133 | }
134 |
135 | that._tapmove({
136 | clientX: left + width * x,
137 | clientY: top + height * y
138 | });
139 | },
140 |
141 | destroy() {
142 | const {options, _tapstart, _keyboard} = that;
143 | _.off(document, ['keydown', 'keyup'], _keyboard);
144 | _.off([options.wrapper, options.element], 'mousedown', _tapstart);
145 | _.off([options.wrapper, options.element], 'touchstart', _tapstart, {
146 | passive: false
147 | });
148 | }
149 | };
150 |
151 | // Initilize
152 | const {options, _tapstart, _keyboard} = that;
153 | _.on([options.wrapper, options.element], 'mousedown', _tapstart);
154 | _.on([options.wrapper, options.element], 'touchstart', _tapstart, {
155 | passive: false
156 | });
157 |
158 | _.on(document, ['keydown', 'keyup'], _keyboard);
159 |
160 | return that;
161 | }
162 |
--------------------------------------------------------------------------------
/src/js/libs/selectable.js:
--------------------------------------------------------------------------------
1 | import * as _ from '../utils/utils';
2 |
3 | export default function Selectable(opt = {}) {
4 | opt = Object.assign({
5 | onchange: () => 0,
6 | className: '',
7 | elements: []
8 | }, opt);
9 |
10 | const onTap = _.on(opt.elements, 'click', evt => {
11 | opt.elements.forEach(e =>
12 | e.classList[evt.target === e ? 'add' : 'remove'](opt.className)
13 | );
14 |
15 | opt.onchange(evt);
16 |
17 | // Fix for https://github.com/Simonwep/pickr/issues/243
18 | evt.stopPropagation();
19 | });
20 |
21 | return {
22 | destroy: () => _.off(...onTap)
23 | };
24 | }
25 |
--------------------------------------------------------------------------------
/src/js/pickr.js:
--------------------------------------------------------------------------------
1 | import * as _ from './utils/utils';
2 | import {parseToHSVA} from './utils/color';
3 | import {HSVaColor} from './utils/hsvacolor';
4 | import Moveable from './libs/moveable';
5 | import Selectable from './libs/selectable';
6 | import buildPickr from './template';
7 | import {createPopper} from 'nanopop';
8 |
9 | export default class Pickr {
10 |
11 | // Expose pickr utils
12 | static utils = _;
13 |
14 | // Assign version and export
15 | static version = VERSION;
16 |
17 | // Default strings
18 | static I18N_DEFAULTS = {
19 |
20 | // Strings visible in the UI
21 | 'ui:dialog': 'color picker dialog',
22 | 'btn:toggle': 'toggle color picker dialog',
23 | 'btn:swatch': 'color swatch',
24 | 'btn:last-color': 'use previous color',
25 | 'btn:save': 'Save',
26 | 'btn:cancel': 'Cancel',
27 | 'btn:clear': 'Clear',
28 |
29 | // Strings used for aria-labels
30 | 'aria:btn:save': 'save and close',
31 | 'aria:btn:cancel': 'cancel and close',
32 | 'aria:btn:clear': 'clear and close',
33 | 'aria:input': 'color input field',
34 | 'aria:palette': 'color selection area',
35 | 'aria:hue': 'hue selection slider',
36 | 'aria:opacity': 'selection slider'
37 | };
38 |
39 | // Default options
40 | static DEFAULT_OPTIONS = {
41 | appClass: null,
42 | theme: 'classic',
43 | useAsButton: false,
44 | padding: 8,
45 | disabled: false,
46 | comparison: true,
47 | closeOnScroll: false,
48 | outputPrecision: 0,
49 | lockOpacity: false,
50 | autoReposition: true,
51 | container: 'body',
52 |
53 | components: {
54 | interaction: {}
55 | },
56 |
57 | i18n: {},
58 | swatches: null,
59 | inline: false,
60 | sliders: null,
61 |
62 | default: '#42445a',
63 | defaultRepresentation: null,
64 | position: 'bottom-middle',
65 | adjustableNumbers: true,
66 | showAlways: false,
67 |
68 | closeWithKey: 'Escape'
69 | };
70 |
71 | // Will be used to prevent specific actions during initilization
72 | _initializingActive = true;
73 |
74 | // If the current color value should be recalculated
75 | _recalc = true;
76 |
77 | // Positioning engine and DOM-Tree
78 | _nanopop = null;
79 | _root = null;
80 |
81 | // Current and last color for comparison
82 | _color = HSVaColor();
83 | _lastColor = HSVaColor();
84 | _swatchColors = [];
85 |
86 | // Animation frame used for setup.
87 | // Will be cancelled in case of destruction.
88 | _setupAnimationFrame = null;
89 |
90 | // Evenlistener name: [callbacks]
91 | _eventListener = {
92 | init: [],
93 | save: [],
94 | hide: [],
95 | show: [],
96 | clear: [],
97 | change: [],
98 | changestop: [],
99 | cancel: [],
100 | swatchselect: []
101 | };
102 |
103 | constructor(opt) {
104 |
105 | // Assign default values
106 | this.options = opt = Object.assign({...Pickr.DEFAULT_OPTIONS}, opt);
107 |
108 | const {swatches, components, theme, sliders, lockOpacity, padding} = opt;
109 |
110 | if (['nano', 'monolith'].includes(theme) && !sliders) {
111 | opt.sliders = 'h';
112 | }
113 |
114 | // Check interaction section
115 | if (!components.interaction) {
116 | components.interaction = {};
117 | }
118 |
119 | // Overwrite palette if preview, opacity or hue are true
120 | const {preview, opacity, hue, palette} = components;
121 | components.opacity = (!lockOpacity && opacity);
122 | components.palette = palette || preview || opacity || hue;
123 |
124 | // Initialize picker
125 | this._preBuild();
126 | this._buildComponents();
127 | this._bindEvents();
128 | this._finalBuild();
129 |
130 | // Append pre-defined swatch colors
131 | if (swatches && swatches.length) {
132 | swatches.forEach(color => this.addSwatch(color));
133 | }
134 |
135 | // Initialize positioning engine
136 | const {button, app} = this._root;
137 | this._nanopop = createPopper(button, app, {
138 | margin: padding
139 | });
140 |
141 | // Initialize accessibility
142 | button.setAttribute('role', 'button');
143 | button.setAttribute('aria-label', this._t('btn:toggle'));
144 |
145 | // Initilization is finish, pickr is visible and ready for usage
146 | const that = this;
147 | this._setupAnimationFrame = requestAnimationFrame((function cb() {
148 |
149 | // TODO: Performance issue due to high call-rate?
150 | if (!app.offsetWidth) {
151 | return requestAnimationFrame(cb);
152 | }
153 |
154 | // Apply default color
155 | that.setColor(opt.default);
156 | that._rePositioningPicker();
157 |
158 | // Initialize color representation
159 | if (opt.defaultRepresentation) {
160 | that._representation = opt.defaultRepresentation;
161 | that.setColorRepresentation(that._representation);
162 | }
163 |
164 | // Show pickr if locked
165 | if (opt.showAlways) {
166 | that.show();
167 | }
168 |
169 | // Initialization is done - pickr is usable, fire init event
170 | that._initializingActive = false;
171 | that._emit('init');
172 | }));
173 | }
174 |
175 | // Create instance via method
176 | static create = options => new Pickr(options);
177 |
178 | // Does only the absolutly basic thing to initialize the components
179 | _preBuild() {
180 | const {options} = this;
181 |
182 | // Resolve elements
183 | for (const type of ['el', 'container']) {
184 | options[type] = _.resolveElement(options[type]);
185 | }
186 |
187 | // Create element and append it to body to
188 | // Prevent initialization errors
189 | this._root = buildPickr(this);
190 |
191 | // Check if a custom button is used
192 | if (options.useAsButton) {
193 | this._root.button = options.el; // Replace button with customized button
194 | }
195 |
196 | options.container.appendChild(this._root.root);
197 | }
198 |
199 | _finalBuild() {
200 | const opt = this.options;
201 | const root = this._root;
202 |
203 | // Remove from body
204 | opt.container.removeChild(root.root);
205 |
206 | if (opt.inline) {
207 | const parent = opt.el.parentElement;
208 |
209 | if (opt.el.nextSibling) {
210 | parent.insertBefore(root.app, opt.el.nextSibling);
211 | } else {
212 | parent.appendChild(root.app);
213 | }
214 | } else {
215 | opt.container.appendChild(root.app);
216 | }
217 |
218 | // Don't replace the the element if a custom button is used
219 | if (!opt.useAsButton) {
220 |
221 | // Replace element with actual color-picker
222 | opt.el.parentNode.replaceChild(root.root, opt.el);
223 | } else if (opt.inline) {
224 | opt.el.remove();
225 | }
226 |
227 | // Check if it should be immediatly disabled
228 | if (opt.disabled) {
229 | this.disable();
230 | }
231 |
232 | // Check if color comparison is disabled, if yes - remove transitions so everything keeps smoothly
233 | if (!opt.comparison) {
234 | root.button.style.transition = 'none';
235 |
236 | if (!opt.useAsButton) {
237 | root.preview.lastColor.style.transition = 'none';
238 | }
239 | }
240 |
241 | this.hide();
242 | }
243 |
244 | _buildComponents() {
245 |
246 | // Instance reference
247 | const inst = this;
248 | const cs = this.options.components;
249 | const sliders = (inst.options.sliders || 'v').repeat(2);
250 | const [so, sh] = sliders.match(/^[vh]+$/g) ? sliders : [];
251 |
252 | // Re-assign if null
253 | const getColor = () =>
254 | this._color || (this._color = this._lastColor.clone());
255 |
256 | const components = {
257 |
258 | palette: Moveable({
259 | element: inst._root.palette.picker,
260 | wrapper: inst._root.palette.palette,
261 |
262 | onstop: () => inst._emit('changestop', 'slider', inst),
263 | onchange(x, y) {
264 | if (!cs.palette) {
265 | return;
266 | }
267 |
268 | const color = getColor();
269 | const {_root, options} = inst;
270 | const {lastColor, currentColor} = _root.preview;
271 |
272 | // Update the input field only if the user is currently not typing
273 | if (inst._recalc) {
274 |
275 | // Calculate saturation based on the position
276 | color.s = x * 100;
277 |
278 | // Calculate the value
279 | color.v = 100 - y * 100;
280 |
281 | // Prevent falling under zero
282 | color.v < 0 ? color.v = 0 : 0;
283 | inst._updateOutput('slider');
284 | }
285 |
286 | // Set picker and gradient color
287 | const cssRGBaString = color.toRGBA().toString(0);
288 | this.element.style.background = cssRGBaString;
289 | this.wrapper.style.background = `
290 | linear-gradient(to top, rgba(0, 0, 0, ${color.a}), transparent),
291 | linear-gradient(to left, hsla(${color.h}, 100%, 50%, ${color.a}), rgba(255, 255, 255, ${color.a}))
292 | `;
293 |
294 | // Check if color is locked
295 | if (!options.comparison) {
296 | _root.button.style.setProperty('--pcr-color', cssRGBaString);
297 |
298 | // If the user changes the color, remove the cleared icon
299 | _root.button.classList.remove('clear');
300 | } else if (!options.useAsButton && !inst._lastColor) {
301 |
302 | // Apply color to both the last and current color since the current state is cleared
303 | lastColor.style.setProperty('--pcr-color', cssRGBaString);
304 | }
305 |
306 | // Check if there's a swatch which color matches the current one
307 | const hexa = color.toHEXA().toString();
308 | for (const {el, color} of inst._swatchColors) {
309 | el.classList[hexa === color.toHEXA().toString() ? 'add' : 'remove']('pcr-active');
310 | }
311 |
312 | // Change current color
313 | currentColor.style.setProperty('--pcr-color', cssRGBaString);
314 | }
315 | }),
316 |
317 | hue: Moveable({
318 | lock: sh === 'v' ? 'h' : 'v',
319 | element: inst._root.hue.picker,
320 | wrapper: inst._root.hue.slider,
321 |
322 | onstop: () => inst._emit('changestop', 'slider', inst),
323 | onchange(v) {
324 | if (!cs.hue || !cs.palette) {
325 | return;
326 | }
327 |
328 | const color = getColor();
329 |
330 | // Calculate hue
331 | if (inst._recalc) {
332 | color.h = v * 360;
333 | }
334 |
335 | // Update color
336 | this.element.style.backgroundColor = `hsl(${color.h}, 100%, 50%)`;
337 | components.palette.trigger();
338 | }
339 | }),
340 |
341 | opacity: Moveable({
342 | lock: so === 'v' ? 'h' : 'v',
343 | element: inst._root.opacity.picker,
344 | wrapper: inst._root.opacity.slider,
345 |
346 | onstop: () => inst._emit('changestop', 'slider', inst),
347 | onchange(v) {
348 | if (!cs.opacity || !cs.palette) {
349 | return;
350 | }
351 |
352 | const color = getColor();
353 |
354 | // Calculate opacity
355 | if (inst._recalc) {
356 | color.a = Math.round(v * 1e2) / 100;
357 | }
358 |
359 | // Update color
360 | this.element.style.background = `rgba(0, 0, 0, ${color.a})`;
361 | components.palette.trigger();
362 | }
363 | }),
364 |
365 | selectable: Selectable({
366 | elements: inst._root.interaction.options,
367 | className: 'active',
368 |
369 | onchange(e) {
370 | inst._representation = e.target.getAttribute('data-type').toUpperCase();
371 | inst._recalc && inst._updateOutput('swatch');
372 | }
373 | })
374 | };
375 |
376 | this._components = components;
377 | }
378 |
379 | _bindEvents() {
380 | const {_root, options} = this;
381 |
382 | const eventBindings = [
383 |
384 | // Clear color
385 | _.on(_root.interaction.clear, 'click', () => this._clearColor()),
386 |
387 | // Select last color on click
388 | _.on([
389 | _root.interaction.cancel,
390 | _root.preview.lastColor
391 | ], 'click', () => {
392 | this.setHSVA(...(this._lastColor || this._color).toHSVA(), true);
393 | this._emit('cancel');
394 | }),
395 |
396 | // Save color
397 | _.on(_root.interaction.save, 'click', () => {
398 | !this.applyColor() && !options.showAlways && this.hide();
399 | }),
400 |
401 | // User input
402 | _.on(_root.interaction.result, ['keyup', 'input'], e => {
403 |
404 | // Fire listener if initialization is finish and changed color was valid
405 | if (this.setColor(e.target.value, true) && !this._initializingActive) {
406 | this._emit('change', this._color, 'input', this);
407 | this._emit('changestop', 'input', this);
408 | }
409 |
410 | e.stopImmediatePropagation();
411 | }),
412 |
413 | // Detect user input and disable auto-recalculation
414 | _.on(_root.interaction.result, ['focus', 'blur'], e => {
415 | this._recalc = e.type === 'blur';
416 | this._recalc && this._updateOutput(null);
417 | }),
418 |
419 | // Cancel input detection on color change
420 | _.on([
421 | _root.palette.palette,
422 | _root.palette.picker,
423 | _root.hue.slider,
424 | _root.hue.picker,
425 | _root.opacity.slider,
426 | _root.opacity.picker
427 | ], ['mousedown', 'touchstart'], () => this._recalc = true, {passive: true})
428 | ];
429 |
430 | // Provide hiding / showing abilities only if showAlways is false
431 | if (!options.showAlways) {
432 | const ck = options.closeWithKey;
433 |
434 | eventBindings.push(
435 |
436 | // Save and hide / show picker
437 | _.on(_root.button, 'click', () => this.isOpen() ? this.hide() : this.show()),
438 |
439 | // Close with escape key
440 | _.on(document, 'keyup', e => this.isOpen() && (e.key === ck || e.code === ck) && this.hide()),
441 |
442 | // Cancel selecting if the user taps behind the color picker
443 | _.on(document, ['touchstart', 'mousedown'], e => {
444 | if (this.isOpen() && !_.eventPath(e).some(el => el === _root.app || el === _root.button)) {
445 | this.hide();
446 | }
447 | }, {capture: true})
448 | );
449 | }
450 |
451 | // Make input adjustable if enabled
452 | if (options.adjustableNumbers) {
453 | const ranges = {
454 | rgba: [255, 255, 255, 1],
455 | hsva: [360, 100, 100, 1],
456 | hsla: [360, 100, 100, 1],
457 | cmyk: [100, 100, 100, 100]
458 | };
459 |
460 | _.adjustableInputNumbers(_root.interaction.result, (o, step, index) => {
461 | const range = ranges[this.getColorRepresentation().toLowerCase()];
462 |
463 | if (range) {
464 | const max = range[index];
465 |
466 | // Calculate next reasonable number
467 | const nv = o + (max >= 100 ? step * 1000 : step);
468 |
469 | // Apply range of zero up to max, fix floating-point issues
470 | return nv <= 0 ? 0 : Number((nv < max ? nv : max).toPrecision(3));
471 | }
472 |
473 | return o;
474 | });
475 | }
476 |
477 | if (options.autoReposition && !options.inline) {
478 | let timeout = null;
479 | const that = this;
480 |
481 | // Re-calc position on window resize, scroll and wheel
482 | eventBindings.push(
483 | _.on(window, ['scroll', 'resize'], () => {
484 | if (that.isOpen()) {
485 |
486 | if (options.closeOnScroll) {
487 | that.hide();
488 | }
489 |
490 | if (timeout === null) {
491 | timeout = setTimeout(() => timeout = null, 100);
492 |
493 | // Update position on every frame
494 | requestAnimationFrame(function rs() {
495 | that._rePositioningPicker();
496 | (timeout !== null) && requestAnimationFrame(rs);
497 | });
498 | } else {
499 | clearTimeout(timeout);
500 | timeout = setTimeout(() => timeout = null, 100);
501 | }
502 | }
503 | }, {capture: true})
504 | );
505 | }
506 |
507 | // Save bindings
508 | this._eventBindings = eventBindings;
509 | }
510 |
511 | _rePositioningPicker() {
512 | const {options} = this;
513 |
514 | // No repositioning needed if inline
515 | if (!options.inline) {
516 | const success = this._nanopop.update({
517 | container: document.body.getBoundingClientRect(),
518 | position: options.position
519 | });
520 |
521 | if (!success) {
522 | const el = this._root.app;
523 | const eb = el.getBoundingClientRect();
524 | el.style.top = `${(window.innerHeight - eb.height) / 2}px`;
525 | el.style.left = `${(window.innerWidth - eb.width) / 2}px`;
526 | }
527 | }
528 | }
529 |
530 | _updateOutput(eventSource) {
531 | const {_root, _color, options} = this;
532 |
533 | // Check if component is present
534 | if (_root.interaction.type()) {
535 |
536 | // Construct function name and call if present
537 | const method = `to${_root.interaction.type().getAttribute('data-type')}`;
538 | _root.interaction.result.value = typeof _color[method] === 'function' ?
539 | _color[method]().toString(options.outputPrecision) : '';
540 | }
541 |
542 | // Fire listener if initialization is finish
543 | if (!this._initializingActive && this._recalc) {
544 | this._emit('change', _color, eventSource, this);
545 | }
546 | }
547 |
548 | _clearColor(silent = false) {
549 | const {_root, options} = this;
550 |
551 | // Change only the button color if it isn't customized
552 | if (!options.useAsButton) {
553 | _root.button.style.setProperty('--pcr-color', 'rgba(0, 0, 0, 0.15)');
554 | }
555 |
556 | _root.button.classList.add('clear');
557 |
558 | if (!options.showAlways) {
559 | this.hide();
560 | }
561 |
562 | this._lastColor = null;
563 | if (!this._initializingActive && !silent) {
564 |
565 | // Fire listener
566 | this._emit('save', null);
567 | this._emit('clear');
568 | }
569 | }
570 |
571 | _parseLocalColor(str) {
572 | const {values, type, a} = parseToHSVA(str);
573 | const {lockOpacity} = this.options;
574 | const alphaMakesAChange = a !== undefined && a !== 1;
575 |
576 | // If no opacity is applied, add undefined at the very end which gets
577 | // Set to 1 in setHSVA
578 | if (values && values.length === 3) {
579 | values[3] = undefined;
580 | }
581 |
582 | return {
583 | values: (!values || (lockOpacity && alphaMakesAChange)) ? null : values,
584 | type
585 | };
586 | }
587 |
588 | _t(key) {
589 | return this.options.i18n[key] || Pickr.I18N_DEFAULTS[key];
590 | }
591 |
592 | _emit(event, ...args) {
593 | this._eventListener[event].forEach(cb => cb(...args, this));
594 | }
595 |
596 | on(event, cb) {
597 | this._eventListener[event].push(cb);
598 | return this;
599 | }
600 |
601 | off(event, cb) {
602 | const callBacks = (this._eventListener[event] || []);
603 | const index = callBacks.indexOf(cb);
604 |
605 | if (~index) {
606 | callBacks.splice(index, 1);
607 | }
608 |
609 | return this;
610 | }
611 |
612 | /**
613 | * Appends a color to the swatch palette
614 | * @param color
615 | * @returns {boolean}
616 | */
617 | addSwatch(color) {
618 | const {values} = this._parseLocalColor(color);
619 |
620 | if (values) {
621 | const {_swatchColors, _root} = this;
622 | const color = HSVaColor(...values);
623 |
624 | // Create new swatch HTMLElement
625 | const el = _.createElementFromString(
626 | `
20 |
21 | ${useAsButton ? '' : '
'}
22 |
23 |
62 |
| null;
69 | defaultRepresentation?: Representation;
70 | showAlways?: boolean;
71 | closeWithKey?: string;
72 | position?: Position;
73 | adjustableNumbers?: boolean;
74 |
75 | components?: {
76 | palette?: boolean;
77 | preview?: boolean;
78 | opacity?: boolean;
79 | hue?: boolean;
80 |
81 | interaction?: {
82 | hex?: boolean;
83 | rgba?: boolean;
84 | hsla?: boolean;
85 | hsva?: boolean;
86 | cmyk?: boolean;
87 | input?: boolean;
88 | cancel?: boolean;
89 | clear?: boolean;
90 | save?: boolean;
91 | };
92 | };
93 |
94 | i18n?: {
95 | 'ui:dialog'?: string;
96 | 'btn:toggle'?: string;
97 | 'btn:swatch'?: string;
98 | 'btn:last-color'?: string;
99 | 'btn:save'?: string;
100 | 'btn:cancel'?: string;
101 | 'btn:clear'?: string;
102 | 'aria:btn:save'?: string;
103 | 'aria:btn:cancel'?: string;
104 | 'aria:btn:clear'?: string;
105 | 'aria:input'?: string;
106 | 'aria:palette'?: string;
107 | 'aria:hue'?: string;
108 | 'aria:opacity'?: string;
109 | }
110 | }
111 |
112 | interface RoundableNumberArray extends Omit, 'toString'> {
113 |
114 | /**
115 | * Uses Number.toFixed to truncate each value to the n-th decimal place.
116 | * @param precision Optional precision / decimal place at which point it should be truncated.
117 | */
118 | toString(precision?: number): string;
119 | }
120 |
121 | interface HSVaColor {
122 | toHSVA(): RoundableNumberArray;
123 |
124 | toHSLA(): RoundableNumberArray;
125 |
126 | toRGBA(): RoundableNumberArray;
127 |
128 | toCMYK(): RoundableNumberArray;
129 |
130 | toHEXA(): RoundableNumberArray;
131 |
132 | clone(): HSVaColor;
133 | }
134 |
135 | type EventType =
136 | 'init' |
137 | 'hide' |
138 | 'show' |
139 | 'save' |
140 | 'clear' |
141 | 'change' |
142 | 'changestop' |
143 | 'cancel' |
144 | 'swatchselect';
145 |
146 | type Theme = 'classic' | 'monolith' | 'nano';
147 |
148 | type Position =
149 | 'top-start' |
150 | 'top-middle' |
151 | 'top-end' |
152 | 'right-start' |
153 | 'right-middle' |
154 | 'right-end' |
155 | 'bottom-start' |
156 | 'bottom-middle' |
157 | 'bottom-end' |
158 | 'left-start' |
159 | 'left-middle' |
160 | 'left-end';
161 |
162 | type Representation =
163 | 'HEXA' |
164 | 'RGBA' |
165 | 'HSVA' |
166 | 'HSLA' |
167 | 'CMYK';
168 |
169 | type Slider = 'v' | 'h';
170 | }
171 |
172 | export default Pickr;
173 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const ESLintPlugin = require('eslint-webpack-plugin');
2 | const MiniCssExtractPlugin = require("mini-css-extract-plugin");
3 | const {version} = require('./package.json');
4 | const webpack = require('webpack');
5 |
6 | module.exports = {
7 | entry: {
8 | 'dist/pickr.es5.min': './src/js/pickr.js',
9 | 'dist/themes/classic.min': './src/scss/themes/classic.scss',
10 | 'dist/themes/nano.min': './src/scss/themes/nano.scss',
11 | 'dist/themes/monolith.min': './src/scss/themes/monolith.scss'
12 | },
13 |
14 | output: {
15 | filename: '[name].js',
16 | library: {
17 | type: 'umd',
18 | name: 'Pickr',
19 | export: 'default',
20 | umdNamedDefine: true
21 | }
22 | },
23 |
24 | devServer: {
25 | static: '.',
26 | host: '0.0.0.0',
27 | port: 3006
28 | },
29 |
30 | module: {
31 | rules: [
32 | {
33 | test: /\.scss$/,
34 | use: [
35 | MiniCssExtractPlugin.loader,
36 | 'css-loader',
37 | 'sass-loader'
38 | ]
39 | }
40 | ]
41 | },
42 |
43 | plugins: [
44 | new ESLintPlugin(),
45 | new MiniCssExtractPlugin({
46 | filename: '[name].css'
47 | }),
48 | new webpack.DefinePlugin({
49 | VERSION: JSON.stringify(version)
50 | })
51 | ]
52 | };
53 |
--------------------------------------------------------------------------------
/www/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simonwep/pickr/345091af645c42ee5e021d7cc3f70e71878ead95/www/favicon.png
--------------------------------------------------------------------------------
/www/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | -webkit-box-sizing: border-box;
5 | box-sizing: border-box;
6 | }
7 |
8 | body,
9 | html {
10 | height: 100%;
11 | width: 100%;
12 | background: white;
13 | font-family: 'Montserrat', serif;
14 | }
15 |
16 | body {
17 | background: linear-gradient(to bottom, #f0f8ff, #ffffff);
18 | }
19 |
20 | body header {
21 | position: relative;
22 | padding: 10vh 0;
23 | text-align: center;
24 | color: #36425b;
25 | }
26 |
27 | body header h1 {
28 | font-size: 3.5em;
29 | font-weight: 300;
30 | font-family: 'Montserrat', sans-serif;
31 | }
32 |
33 | body header a {
34 | display: inline-block;
35 | text-decoration: none;
36 | font-weight: 500;
37 | font-size: 0.8em;
38 | color: white;
39 | margin-top: 5vh;
40 | padding: 0.75em 1.25em;
41 | transition: 0.3s all;
42 | background: #4285f4;
43 | border-radius: 50em;
44 | box-shadow: 0 0.15em 0.5em rgba(66, 133, 244, 0.75);
45 | font-family: 'Montserrat', sans-serif;
46 | }
47 |
48 | body header a:hover {
49 | background: #4291f6;
50 | }
51 |
52 | body main {
53 | margin: 0 auto;
54 | display: flex;
55 | align-items: center;
56 | flex-direction: column;
57 | }
58 |
59 | .theme-container button {
60 | font-family: 'Montserrat', sans-serif;
61 | font-weight: 500;
62 | font-size: 0.95em;
63 | color: #36425b;
64 | outline: none;
65 | background: #e4f1ff;
66 | border: none;
67 | border-bottom: 2px solid rgba(80, 139, 234, 0.67);
68 | padding: 0.6em 0.8em 0.5em;
69 | cursor: pointer;
70 | transition: all 0.3s;
71 | margin: 0 0.5em;
72 | opacity: 0.45;
73 | text-transform: capitalize;
74 | }
75 |
76 | .theme-container button.active {
77 | opacity: 1;
78 | }
79 |
80 | .theme-container h3 {
81 | font-weight: 500;
82 | color: #36425b;
83 | }
84 |
85 | .pickr-container {
86 | margin-top: 2em;
87 | }
88 |
89 | main > p {
90 | margin-top: 0.35em;
91 | font-size: 0.75em;
92 | font-weight: 500;
93 | color: #42445a;
94 | }
95 |
96 | @-webkit-keyframes fadeIn {
97 | from {
98 | opacity: 0;
99 | }
100 |
101 | to {
102 | opacity: 1;
103 | }
104 | }
105 |
106 | @keyframes fadeIn {
107 | from {
108 | opacity: 0;
109 | }
110 |
111 | to {
112 | opacity: 1;
113 | }
114 | }
115 |
116 | @media screen and (max-width: 1000px) {
117 | body header {
118 | font-size: 0.6em;
119 | padding: 7vh 0;
120 | }
121 |
122 | body header a {
123 | padding: 1em 2em;
124 | font-weight: 600;
125 | font-size: 1.05em;
126 | }
127 |
128 | main > section {
129 | min-width: 90%;
130 | }
131 |
132 | main > section h2 {
133 | font-size: 1em;
134 | }
135 |
136 | main > section pre {
137 | font-size: 0.9em;
138 | }
139 |
140 | main section.demo .hint svg {
141 | height: 1.2em;
142 | }
143 |
144 | main section.demo .hint span {
145 | transform: translate3d(-3em, -1.4em, 0);
146 | font-size: 0.6em;
147 | }
148 | }
149 |
--------------------------------------------------------------------------------
/www/index.js:
--------------------------------------------------------------------------------
1 | const pickrContainer = document.querySelector('.pickr-container');
2 | const themeContainer = document.querySelector('.theme-container');
3 | const themes = [
4 | [
5 | 'classic',
6 | {
7 | swatches: [
8 | 'rgba(244, 67, 54, 1)',
9 | 'rgba(233, 30, 99, 0.95)',
10 | 'rgba(156, 39, 176, 0.9)',
11 | 'rgba(103, 58, 183, 0.85)',
12 | 'rgba(63, 81, 181, 0.8)',
13 | 'rgba(33, 150, 243, 0.75)',
14 | 'rgba(3, 169, 244, 0.7)',
15 | 'rgba(0, 188, 212, 0.7)',
16 | 'rgba(0, 150, 136, 0.75)',
17 | 'rgba(76, 175, 80, 0.8)',
18 | 'rgba(139, 195, 74, 0.85)',
19 | 'rgba(205, 220, 57, 0.9)',
20 | 'rgba(255, 235, 59, 0.95)',
21 | 'rgba(255, 193, 7, 1)'
22 | ],
23 |
24 | components: {
25 | preview: true,
26 | opacity: true,
27 | hue: true,
28 |
29 | interaction: {
30 | hex: true,
31 | rgba: true,
32 | hsva: true,
33 | input: true,
34 | clear: true,
35 | save: true
36 | }
37 | }
38 | }
39 | ],
40 | [
41 | 'monolith',
42 | {
43 | swatches: [
44 | 'rgba(244, 67, 54, 1)',
45 | 'rgba(233, 30, 99, 0.95)',
46 | 'rgba(156, 39, 176, 0.9)',
47 | 'rgba(103, 58, 183, 0.85)',
48 | 'rgba(63, 81, 181, 0.8)',
49 | 'rgba(33, 150, 243, 0.75)',
50 | 'rgba(3, 169, 244, 0.7)'
51 | ],
52 |
53 | defaultRepresentation: 'HEXA',
54 | components: {
55 | preview: true,
56 | opacity: true,
57 | hue: true,
58 |
59 | interaction: {
60 | hex: false,
61 | rgba: false,
62 | hsva: false,
63 | input: true,
64 | clear: true,
65 | save: true
66 | }
67 | }
68 | }
69 | ],
70 | [
71 | 'nano',
72 | {
73 | swatches: [
74 | 'rgba(244, 67, 54, 1)',
75 | 'rgba(233, 30, 99, 0.95)',
76 | 'rgba(156, 39, 176, 0.9)',
77 | 'rgba(103, 58, 183, 0.85)',
78 | 'rgba(63, 81, 181, 0.8)',
79 | 'rgba(33, 150, 243, 0.75)',
80 | 'rgba(3, 169, 244, 0.7)'
81 | ],
82 |
83 | defaultRepresentation: 'HEXA',
84 | components: {
85 | preview: true,
86 | opacity: true,
87 | hue: true,
88 |
89 | interaction: {
90 | hex: false,
91 | rgba: false,
92 | hsva: false,
93 | input: true,
94 | clear: true,
95 | save: true
96 | }
97 | }
98 | }
99 | ]
100 | ];
101 |
102 | const buttons = [];
103 | let pickr = null;
104 |
105 | for (const [theme, config] of themes) {
106 | const button = document.createElement('button');
107 | button.innerHTML = theme;
108 | buttons.push(button);
109 |
110 | button.addEventListener('click', () => {
111 | const el = document.createElement('p');
112 | pickrContainer.appendChild(el);
113 |
114 | // Delete previous instance
115 | if (pickr) {
116 | pickr.destroyAndRemove();
117 | }
118 |
119 | // Apply active class
120 | for (const btn of buttons) {
121 | btn.classList[btn === button ? 'add' : 'remove']('active');
122 | }
123 |
124 | // Create fresh instance
125 | pickr = new Pickr(Object.assign({
126 | el, theme,
127 | default: '#42445a'
128 | }, config));
129 |
130 | // Set events
131 | pickr.on('init', instance => {
132 | console.log('Event: "init"', instance);
133 | }).on('hide', instance => {
134 | console.log('Event: "hide"', instance);
135 | }).on('show', (color, instance) => {
136 | console.log('Event: "show"', color, instance);
137 | }).on('save', (color, instance) => {
138 | console.log('Event: "save"', color, instance);
139 | }).on('clear', instance => {
140 | console.log('Event: "clear"', instance);
141 | }).on('change', (color, source, instance) => {
142 | console.log('Event: "change"', color, source, instance);
143 | }).on('changestop', (source, instance) => {
144 | console.log('Event: "changestop"', source, instance);
145 | }).on('cancel', instance => {
146 | console.log('cancel', pickr.getColor().toRGBA().toString(0));
147 | }).on('swatchselect', (color, instance) => {
148 | console.log('Event: "swatchselect"', color, instance);
149 | });
150 | });
151 |
152 | themeContainer.appendChild(button);
153 | }
154 |
155 | buttons[0].click();
156 |
--------------------------------------------------------------------------------
3 | 
19 | 
22 | 
23 | 
28 | 
31 | 
40 |
41 |
42 | 
43 |
44 |