From 8d470023d49b811bed5433e20d2ef8b8699a51d8 Mon Sep 17 00:00:00 2001 From: Jason Shortall Date: Mon, 11 May 2020 13:50:29 +0000 Subject: [PATCH] update to polymer3 --- .gitignore | 2 + .travis.yml | 17 +- demo/index.html | 42 +- index.html | 4 +- package.json | 42 ++ ...r-icon.html => paper-swatch-picker-icon.js | 31 +- paper-swatch-picker.html | 467 ----------------- paper-swatch-picker.js | 468 ++++++++++++++++++ test/basic.html | 398 +++++++-------- test/index.html | 2 +- 10 files changed, 775 insertions(+), 698 deletions(-) create mode 100644 package.json rename paper-swatch-picker-icon.html => paper-swatch-picker-icon.js (64%) delete mode 100644 paper-swatch-picker.html create mode 100644 paper-swatch-picker.js diff --git a/.gitignore b/.gitignore index 2be39e4..89bce50 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ bower_components* bower-*.json + +node_modules diff --git a/.travis.yml b/.travis.yml index f520d0e..b009934 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,22 +1,21 @@ language: node_js sudo: required -before_script: -- npm install -g polymer-cli -- polymer install --variants +before_script: npm install -g polymer-cli node_js: stable addons: firefox: latest apt: sources: - - google-chrome + - google-chrome packages: - - google-chrome-stable + - google-chrome-stable sauce_connect: true script: -- xvfb-run polymer test -- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default'; fi + - xvfb-run polymer test --module-resolution=node --npm + - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test --module-resolution=node --npm -s ''default''; fi' dist: trusty env: global: - - secure: AhT656+287bNaHUPaCe5eyeO3NGr50x4RoV5C3hB5Q6qkraVIu7PV8SjVN041wxXIkSJYe1bwh+f4LnmfrB1J1NBANk8RqrnY/Be/cq/2JmZFFT8F8Mk6vLEqY/81fGi16G/U2j0Ke6Fs423gCaLpvJLHoTz57n1uhduGPnYRKn+i691ktTjn6838oItBFDAcb89qOOlFr1oAlYKQHWmQ7MflD3xll62bOd4gN+1zU/fTE6ES2hSLhkhfcXfEHDuxlUnLcKM0VZxQ02em8o66EtAuWnL+MJviAUsEPd0ycFiCUID87RxsQJqgFZsHItQk5xvXYFDgxRfvR8JZnffc7XiFZYyuE8XVUluj8ugW1ATTqpgoiF42GD/fVYmGsmfUHJuJrcQroF0oq6mJhCGooLi23fzawi7nhERvGWib9meW43t9K4CrSVObn5zl7l4TxwNnBKFd4Wtuc0jLwTM9iClA5ULU+mY0pnwPnea8aQKIx7/HptaxjFBBIPVXYoHK7rqJR1N1dW5PZVmJS4U4nR1h1Rpw3Xno0RJXZgKhKLNkorpkCY4pWjtyGPdwv/LKZGnGUoQvJX0dQEsrDMfLWGT5OE5MJmdLCACxEUZbWduq18qLzGDevfXhOGJs/6bphj0F7SshM8jdEHX+Vp+4YSvuhF9LTEj8XJaTBpO1P0= - - secure: Shc1QD4paw7CAPNkaSnjH3vcQBzlBL4qrk+SBfvcnnDqW+cYjSZoZYseJkznOuNgRSb8lytXl7fb/p/5uTD7rW8mgKNYxrWrJzTEqcMRHGgLVLlYGyUFgdD2x6GFCVsY8rupHy1/8A/HFalVGc66sTWkyYIvTFZrKzw3aA9ogdonc4cnNwVGUQyJkDYh4LCjXvwLR3jg45baircECxAQAq4yvl9/aldjq36GLtMcALXqcOblF1kX/LMU+WGj0s3756moLhZvnO1uaF7M9uZ4XRfTE8yHw0RAaxyOHTyLSvVczuXspbB5FOyUEZiL6sk8YctUektxc3t7aFBtqJnE6UtZOnIpjnMZRHKIECQc1WbrdtWauexf0d9HGLAX2R+2wTRRoC3AVk+5QNCaJfV5WxifPTVe9KkXmmNtz2XMuXKRqaEz9YEl55SvCA7xTAz8sD2NG5hsBiO/Wehy2TkTFO1KE/g/+1sVBQkExKae+ZbSImBuvBbF28BKMwfwcZ4jrvct5Yx+xvBkyWbR7ZG3qMRpzBwH9WL8lFmIjzXrkDsT+j0hmbk1N0Vs4ZH7IFSLOdRwcmSxs4YRzecqjqM0jAW8ZYLfHnHP0S1z/CMV5b92NIMYUv51YS1gHPTwDxqmNWchILrHwOy2brfJpp/RfDBHjPKFoDt+MzbqAFYCcUk= + - secure: AhT656+287bNaHUPaCe5eyeO3NGr50x4RoV5C3hB5Q6qkraVIu7PV8SjVN041wxXIkSJYe1bwh+f4LnmfrB1J1NBANk8RqrnY/Be/cq/2JmZFFT8F8Mk6vLEqY/81fGi16G/U2j0Ke6Fs423gCaLpvJLHoTz57n1uhduGPnYRKn+i691ktTjn6838oItBFDAcb89qOOlFr1oAlYKQHWmQ7MflD3xll62bOd4gN+1zU/fTE6ES2hSLhkhfcXfEHDuxlUnLcKM0VZxQ02em8o66EtAuWnL+MJviAUsEPd0ycFiCUID87RxsQJqgFZsHItQk5xvXYFDgxRfvR8JZnffc7XiFZYyuE8XVUluj8ugW1ATTqpgoiF42GD/fVYmGsmfUHJuJrcQroF0oq6mJhCGooLi23fzawi7nhERvGWib9meW43t9K4CrSVObn5zl7l4TxwNnBKFd4Wtuc0jLwTM9iClA5ULU+mY0pnwPnea8aQKIx7/HptaxjFBBIPVXYoHK7rqJR1N1dW5PZVmJS4U4nR1h1Rpw3Xno0RJXZgKhKLNkorpkCY4pWjtyGPdwv/LKZGnGUoQvJX0dQEsrDMfLWGT5OE5MJmdLCACxEUZbWduq18qLzGDevfXhOGJs/6bphj0F7SshM8jdEHX+Vp+4YSvuhF9LTEj8XJaTBpO1P0= + - secure: Shc1QD4paw7CAPNkaSnjH3vcQBzlBL4qrk+SBfvcnnDqW+cYjSZoZYseJkznOuNgRSb8lytXl7fb/p/5uTD7rW8mgKNYxrWrJzTEqcMRHGgLVLlYGyUFgdD2x6GFCVsY8rupHy1/8A/HFalVGc66sTWkyYIvTFZrKzw3aA9ogdonc4cnNwVGUQyJkDYh4LCjXvwLR3jg45baircECxAQAq4yvl9/aldjq36GLtMcALXqcOblF1kX/LMU+WGj0s3756moLhZvnO1uaF7M9uZ4XRfTE8yHw0RAaxyOHTyLSvVczuXspbB5FOyUEZiL6sk8YctUektxc3t7aFBtqJnE6UtZOnIpjnMZRHKIECQc1WbrdtWauexf0d9HGLAX2R+2wTRRoC3AVk+5QNCaJfV5WxifPTVe9KkXmmNtz2XMuXKRqaEz9YEl55SvCA7xTAz8sD2NG5hsBiO/Wehy2TkTFO1KE/g/+1sVBQkExKae+ZbSImBuvBbF28BKMwfwcZ4jrvct5Yx+xvBkyWbR7ZG3qMRpzBwH9WL8lFmIjzXrkDsT+j0hmbk1N0Vs4ZH7IFSLOdRwcmSxs4YRzecqjqM0jAW8ZYLfHnHP0S1z/CMV5b92NIMYUv51YS1gHPTwDxqmNWchILrHwOy2brfJpp/RfDBHjPKFoDt+MzbqAFYCcUk= + diff --git a/demo/index.html b/demo/index.html index f814a6f..688b40e 100644 --- a/demo/index.html +++ b/demo/index.html @@ -16,39 +16,56 @@ - + - - - + + + - + - + + -
+ diff --git a/index.html b/index.html index 23b0dd4..5be72f4 100644 --- a/index.html +++ b/index.html @@ -16,8 +16,8 @@ paper-swatch-picker - - + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..bc51c97 --- /dev/null +++ b/package.json @@ -0,0 +1,42 @@ +{ + "description": "A color picker element using all the Material Design colours", + "keywords": [ + "web-components", + "polymer", + "color", + "picker" + ], + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/paper-swatch-picker.git" + }, + "homepage": "https://github.com/PolymerElements/paper-swatch-picker", + "name": "@katapult/paper-swatch-picker", + "version": "3.0.0", + "resolutions": { + "inherits": "2.0.3", + "samsam": "1.1.3", + "supports-color": "3.1.2", + "type-detect": "1.0.0" + }, + "main": "paper-swatch-picker.js", + "author": "The Polymer Authors", + "license": "BSD-3-Clause", + "dependencies": { + "@polymer/iron-flex-layout": "^3.0.0", + "@polymer/iron-iconset-svg": "^3.0.0", + "@polymer/paper-icon-button": "^3.0.0", + "@polymer/paper-item": "^3.0.0", + "@polymer/paper-listbox": "^3.0.0", + "@polymer/paper-menu-button": "^3.0.0", + "@polymer/polymer": "^3.0.0" + }, + "devDependencies": { + "@polymer/iron-component-page": "^4.0.0", + "@polymer/iron-demo-helpers": "^3.0.0", + "@polymer/iron-test-helpers": "^3.0.0", + "wct-browser-legacy": "^1.0.1", + "@webcomponents/webcomponentsjs": "^2.0.0", + "web-animations-js": "^2.3.1" + } +} diff --git a/paper-swatch-picker-icon.html b/paper-swatch-picker-icon.js similarity index 64% rename from paper-swatch-picker-icon.html rename to paper-swatch-picker-icon.js index 2fe129a..974c150 100644 --- a/paper-swatch-picker-icon.html +++ b/paper-swatch-picker-icon.js @@ -1,4 +1,16 @@ - - - - - - - - - - +*/ +/* + FIXME(polymer-modulizer): the above comments were extracted + from HTML and may be out of place here. Review them and + then delete this comment! +*/ +; diff --git a/paper-swatch-picker.html b/paper-swatch-picker.html deleted file mode 100644 index 5fc5292..0000000 --- a/paper-swatch-picker.html +++ /dev/null @@ -1,467 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/paper-swatch-picker.js b/paper-swatch-picker.js new file mode 100644 index 0000000..444eea0 --- /dev/null +++ b/paper-swatch-picker.js @@ -0,0 +1,468 @@ +/** +@license +Copyright (c) 2016 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +*/ +/** +This is a simple color picker element that will allow you to choose one +of the Material Design colors from a list of available swatches. + +Example: + + + + + +You can configure the color palette being used using the `colorList` array and +the `columnCount` property, which specifies how many "generic" colours (i.e. columns +in the picker) you want to display. + + + +### Styling + +The following custom properties and mixins are available for styling: + +Custom property | Description | Default +----------------|-------------|---------- +`--paper-swatch-picker-color-size` | The size of each of the color boxes | `20px` +`--paper-swatch-picker-icon-size` | The size of the color picker icon | `24px` +`--paper-swatch-picker-icon` | Mixin applied to the color picker icon | `{}` + +@element paper-swatch-picker +@demo demo/index.html +*/ +/* + FIXME(polymer-modulizer): the above comments were extracted + from HTML and may be out of place here. Review them and + then delete this comment! +*/ +import '../../@polymer/polymer/polymer-legacy.js'; + +import '../../@polymer/iron-flex-layout/iron-flex-layout.js'; +import '../../@polymer/paper-icon-button/paper-icon-button.js'; +import '../../@polymer/paper-item/paper-item.js'; +import '../../@polymer/paper-listbox/paper-listbox.js'; +import '../../@polymer/paper-menu-button/paper-menu-button.js'; +import './paper-swatch-picker-icon.js'; +import { Polymer } from '../../@polymer/polymer/lib/legacy/polymer-fn.js'; +import { html } from '../../@polymer/polymer/lib/utils/html-tag.js'; +Polymer({ + _template: html` + + + + + + + + + + + +
+ +
+ + + +
+
+ r: +
+
+ g: +
+
+ b: +
+
+ a: +
+
+ +
+
+ +`, + + is: 'paper-swatch-picker', + + hostAttributes: { + 'tabindex': 0 + }, + + listeners: { + 'paper-dropdown-open': '_onOpen', + 'iron-select': '_onColorTap' + }, + + /** + * Fired when a color has been selected + * + * @event color-picker-selected + */ + + properties: { + /** + * The selected color, as hex (i.e. #ffffff). + * value. + */ + color: { + type: String, + notify: true, + observer: '_colorChanged' + }, + rgbaR: { + type: Number, + value: 0 + }, + rgbaG: { + type: Number, + value: 0 + }, + rgbaB: { + type: Number, + value: 0 + }, + rgbaA: { + type: Number, + value: 1 + }, + /** + * The colors to be displayed. By default, these are the Material Design + * colors. This array is arranged by "generic color", so for example, + * all the reds (from light to dark), then the pinks, then the blues, etc. + * Depending on how many of these generic colors you have, you should + * update the `columnCount` property. + */ + colorList: { + type: Array, + value: function() { + return this.defaultColors(); + }, + observer: '_colorListChanged' + }, + + /* The number of columns to display in the picker. This corresponds to + * the number of generic colors (i.e. not counting the light/dark) variants + * of a specific color) you are using in your `colorList`. For example, + * the Material Design palette has 18 colors */ + columnCount: { + type: Number, + value: 18, + observer: '_columnCountChanged' + }, + + + noOverlap:{ + type:Boolean, + reflectToAttribute:true + }, + + /** + * The orientation against which to align the menu dropdown + * horizontally relative to the dropdown trigger. + */ + horizontalAlign: { + type: String, + value: 'left', + reflectToAttribute: true + }, + + /** + * The orientation against which to align the menu dropdown + * vertically relative to the dropdown trigger. + */ + verticalAlign: { + type: String, + value: 'top', + reflectToAttribute: true + }, + + /** + * The name of the icon to use for the button used as a dropdown trigger. + * The name should be of the form: `iconset_name:icon_name`. + * You must manually import the icon/iconset you wish you use. + */ + icon: { + type: String, + value: 'swatch:format-color-fill' + }, + + /** + * If true, the color picker button will not produce a ripple effect when interacted + * with via the pointer. + */ + noink: { + type: Boolean + } + }, + + created: function() { + // Note: we won't actually render these color boxes unless the menu is + // actually tapped. + this._renderedColors = false; + }, + + attached: function() { + this._updateSize(); + }, + + /** + * Returns the default Material Design colors. + * + * @return {Array[string]} + */ + defaultColors: function() { + return [ + // '#ffffff', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#e53935', '#d32f2f', '#c62828', '#b71c1c', + // '#fce4ec', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a', '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', + // '#f3e5f5', '#e1bee7', '#ce93d8', '#ba68c8', '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#6a1b9a', '#4a148c', + // '#ede7f6', '#d1c4e9', '#b39ddb', '#9575cd', '#7e57c2', '#673ab7', '#5e35b1', '#512da8', '#4527a0', '#311b92', + // '#e8eaf6', '#c5cae9', '#9fa8da', '#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', '#283593', '#1a237e', + // '#e3f2fd', '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5', '#1976d2', '#1565c0', '#0d47a1', + // '#e1f5fe', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4', '#039be5', '#0288d1', '#0277bd', '#01579b', + // '#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1', '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064', + // '#e0f2f1', '#b2dfdb', '#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b', '#00695c', '#004d40', + // '#e8f5e9', '#c8e6c9', '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047', '#388e3c', '#2e7d32', '#1b5e20', + // '#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581', '#9ccc65', '#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', + // '#f9fbe7', '#f0f4c3', '#e6ee9c', '#dce775', '#d4e157', '#cddc39', '#c0ca33', '#afb42b', '#9e9d24', '#827717', + // '#fffde7', '#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835', '#fbc02d', '#f9a825', '#f57f17', + // '#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28', '#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00', + // '#fff3e0', '#ffe0b2', '#ffcc80', '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00', '#e65100', + // '#fbe9e7', '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e', '#e64a19', '#d84315', '#bf360c', + // '#efebe9', '#d7ccc8', '#bcaaa4', '#a1887f', '#8d6e63', '#795548', '#6d4c41', '#5d4037', '#4e342e', '#3e2723', + // '#fafafa', '#f5f5f5', '#eeeeee', '#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242', '#000000' + '#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#e53935', '#d32f2f', '#c62828', '#b71c1c', + '#fce4ec', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a', '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', + '#f3e5f5', '#e1bee7', '#ce93d8', '#ba68c8', '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#6a1b9a', '#4a148c', + '#ede7f6', '#d1c4e9', '#b39ddb', '#9575cd', '#7e57c2', '#673ab7', '#5e35b1', '#512da8', '#4527a0', '#311b92', + '#e8eaf6', '#c5cae9', '#9fa8da', '#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', '#283593', '#1a237e', + '#e3f2fd', '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5', '#1976d2', '#1565c0', '#0d47a1', + '#e1f5fe', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4', '#039be5', '#0288d1', '#0277bd', '#01579b', + '#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1', '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064', + '#e0f2f1', '#b2dfdb', '#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b', '#00695c', '#004d40', + '#e8f5e9', '#c8e6c9', '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047', '#388e3c', '#2e7d32', '#1b5e20', + '#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581', '#9ccc65', '#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', + '#f9fbe7', '#f0f4c3', '#e6ee9c', '#dce775', '#d4e157', '#cddc39', '#c0ca33', '#afb42b', '#9e9d24', '#827717', + '#fffde7', '#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835', '#fbc02d', '#f9a825', '#f57f17', + '#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28', '#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00', + '#fff3e0', '#ffe0b2', '#ffcc80', '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00', '#e65100', + '#fbe9e7', '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e', '#e64a19', '#d84315', '#bf360c', + '#efebe9', '#d7ccc8', '#bcaaa4', '#a1887f', '#8d6e63', '#795548', '#6d4c41', '#5d4037', '#4e342e', '#3e2723', + '#ffffff', '#f5f5f5', '#eeeeee', '#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242', '#000000' + ]; + }, + + _onOpen: function() { + // Fill in the colors if we haven't already. + if (this._renderedColors) + return; + + var colorBoxes = this.$.container.querySelectorAll('.color'); + for (var i = 0; i < colorBoxes.length; i++) { + colorBoxes[i].style.color = colorBoxes[i].innerHTML; + } + this._renderedColors = true; + }, + + _addOverflowClass: function() { + this.$.container.toggleClass('opened', true); + }, + + _removeOverflowClass: function() { + this.$.container.toggleClass('opened', false); + }, + + _onColorTap: function(event) { + var item = event.detail.item; + if (item != undefined) { + // The inner `span` element has the background color; + this.color = w3color(item.style.color).toRgb(); + + this.rgbaR = this.color.r + this.rgbaG = this.color.g + this.rgbaB = this.color.b + this.rgbaA = this.color.a + } + else { + if (!Number.isInteger(Number(this.rgbaR)) || !Number.isInteger(Number(this.rgbaG)) || !Number.isInteger(Number(this.rgbaB)) || isNaN(this.rgbaA) + || this.rgbaR < 0 || this.rgbaR > 255 || this.rgbaG < 0 || this.rgbaG > 255 || this.rgbaB < 0 || this.rgbaB > 255 || this.rgbaA < 0 || this.rgbaA > 1) { + this.fire('toast', 'Please enter valid numbers'); + return; + } + else { + this.color = w3color('rgba(' + this.rgbaR + ',' + this.rgbaG + ',' + this.rgbaB + ',' + this.rgbaA + ')').toRgb(); + } + this.$.menu.close(); + } + this.color = 'rgba(' + this.rgbaR + ',' + this.rgbaG + ',' + this.rgbaB + ',' + this.rgbaA + ')' + this.fire('color-picker-selected', {color: this.color}); + }, + + _colorChanged: function() { + this.$.iconButton.style.backgroundColor = this.color; + }, + + _colorListChanged: function() { + // Fall back to the first color, if the new color list doesn't contain the selected color + //if (this.color && this.color !== '' && this.colorList.indexOf(this.color) === -1) { + // this.color = this.colorList[0]; + //} + this._updateSize(); + }, + + _columnCountChanged: function() { + this._updateSize(); + }, + + /** + * Takes an rgb(r, g, b) style string and converts it to a #ffffff hex value. + */ + _rgbToHex: function(rgb) { + // Split the rgb(r, g, b) string up. + var split = rgb.split('(')[1].split(')')[0].split(','); + + if (split.length != 3) + return ''; + + // From https://gist.github.com/lrvick/2080648. + var bin = split[0] << 16 | split[1] << 8 | split[2]; + return (function(h) { + return '#' + new Array(7 - h.length).join('0') + h; + })(bin.toString(16).toLowerCase()); + }, + + _updateSize: function() { + // Fit the color boxes in columns. We first need to get the width of + // a color box (which is customizable), and then change the box's + // width to fit all the columns. + var sizeOfAColorDiv = this.getComputedStyleValue('--paper-swatch-picker-color-size'); + if (!sizeOfAColorDiv || sizeOfAColorDiv == '') { // Default value case + sizeOfAColorDiv = 25; + } else { + sizeOfAColorDiv = sizeOfAColorDiv.replace('px', ''); + } + + var rowCount = Math.ceil(this.colorList.length / this.columnCount); + this.$.container.style.height = rowCount * sizeOfAColorDiv + 'px'; + this.$.container.style.width = this.columnCount * sizeOfAColorDiv + 'px'; + this._renderedColors = false; + } +}); diff --git a/test/basic.html b/test/basic.html index 1bbb68c..b94c983 100644 --- a/test/basic.html +++ b/test/basic.html @@ -14,13 +14,13 @@ paper-swatch-picker basic tests - - - - + + + + - - + + @@ -55,201 +55,205 @@ - + }); + }, 1); + }, 1); + }); +}); + diff --git a/test/index.html b/test/index.html index 1fbea34..fdce64c 100644 --- a/test/index.html +++ b/test/index.html @@ -12,7 +12,7 @@ paper-swatch-picker tests - +