Merge pull request #7 from astronomersiva/update-pickr

Update pickr

addon/components/color-picker.js

@@ -78,26 +78,30 @@ export default Component.extend({
 
       components: {
         ...this._components
-      },
+      }
+    });
 
-      onSave: (hsva, instance) => {
-        let value = this.formatColor(hsva);
-        this.set('_value', value);
+    pickr.on('init', () => {
+      this.set('_value', this.formatColor(pickr.getColor()));
+      this._pickr = pickr;
+    });
 
-        if (this.onSave) {
-          this.onSave(hsva, instance);
-        }
-      },
+    pickr.on('save', (...args) => {
+      let [hsva, instance] = args;
+      let value = this.formatColor(hsva);
+      this.set('_value', value);
 
-      onChange: (hsva, instance) => {
-        if (this.onChange) {
-          this.onChange(hsva, instance);
-        }
+      if (this.onSave) {
+        this.onSave(hsva, instance);
       }
     });
 
-    this.set('_value', this.formatColor(pickr.getColor()));
-    this._pickr = pickr;
+    pickr.on('change', (...args) => {
+      let [hsva, instance] = args;
+      if (this.onChange) {
+        this.onChange(hsva, instance);
+      }
+    });
   },
 
   value: computed('_value', {

index.js

@@ -1,18 +1,27 @@
 'use strict';
 
 const path = require('path');
+const caniuse = require('caniuse-api')
 
 module.exports = {
   name: require('./package').name,
 
   options: {
     autoImport: {
-      alias: {
-        pickr: 'pickr-widget/dist/pickr.min.js'
-      }
+      alias: {}
     }
   },
 
+  choosePickrForTargets(targets = {}) {
+    let { browsers = [] } = targets;
+    let browserQuery = browsers.join(',');
+    if (caniuse.isSupported('es6-module', browserQuery)) {
+      return '@simonwep/pickr/dist/pickr.min.js';
+    }
+
+    return '@simonwep/pickr/dist/pickr.es5.min.js';
+  },
+
   included: function() {
     this._super.included.apply(this, arguments);
 
@@ -21,7 +30,10 @@ module.exports = {
 
     this.app = app;
 
-    let pickr = path.join('node_modules', 'pickr-widget', 'dist');
+    let pickr = path.join('node_modules', '@simonwep/pickr', 'dist');
     app.import(path.join(pickr, 'pickr.min.css'));
+
+    let targets = this.project.targets;
+    this.options.autoImport.alias.pickr = this.choosePickrForTargets(targets);
   }
 };

package.json

@@ -21,10 +21,11 @@
     "test:all": "ember try:each"
   },
   "dependencies": {
+    "@simonwep/pickr": "0.4.4",
+    "caniuse-api": "^3.0.0",
     "ember-auto-import": "^1.2.19",
     "ember-cli-babel": "^7.1.2",
-    "ember-cli-htmlbars": "^3.0.1",
-    "pickr-widget": "0.3.2"
+    "ember-cli-htmlbars": "^3.0.1"
   },
   "devDependencies": {
     "@ember/optional-features": "^0.6.3",

tests/integration/components/color-picker-test.js

@@ -3,11 +3,18 @@ import { setupRenderingTest } from 'ember-qunit';
 import { click, fillIn, render } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
+// This horror is because, pickr has CSS transitions
+// while values are set. Without these, most tests will fail.
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
 module('Integration | Component | color-picker', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function(assert) {
-    await render(hbs`{{color-picker}}`);
+    await render(hbs`{{color-picker default="ffffff"}}`);
+    await sleep(1000);
 
     assert.equal(
       getComputedStyle(this.element.querySelector('.pcr-button')).backgroundColor,
@@ -17,18 +24,21 @@ module('Integration | Component | color-picker', function(hooks) {
 
   test('it applies the disabled property', async function(assert) {
     await render(hbs`{{color-picker disabled=true}}`);
+    await sleep(1000);
 
     assert.ok(this.element.querySelector('.pcr-button').className.includes('disabled'));
   });
 
   test('it is not disabled by default', async function(assert) {
     await render(hbs`{{color-picker}}`);
+    await sleep(1000);
 
     assert.notOk(this.element.querySelector('.pcr-button').className.includes('disabled'));
   });
 
   test('it applies the default value', async function(assert) {
     await render(hbs`{{color-picker default="#333"}}`);
+    await sleep(1000);
 
     assert.equal(
       getComputedStyle(this.element.querySelector('.pcr-button')).backgroundColor,
@@ -38,6 +48,7 @@ module('Integration | Component | color-picker', function(hooks) {
 
   test('it takes the color assigned to value in initial render', async function(assert) {
     await render(hbs`{{color-picker value="#fff"}}`);
+    await sleep(1000);
 
     assert.equal(
       getComputedStyle(this.element.querySelector('.pcr-button')).backgroundColor,
@@ -47,6 +58,7 @@ module('Integration | Component | color-picker', function(hooks) {
 
   test('it takes the color assigned to value in initial render even when default is present', async function(assert) {
     await render(hbs`{{color-picker default="#ff0000" value="#fff"}}`);
+    await sleep(1000);
 
     assert.equal(
       getComputedStyle(this.element.querySelector('.pcr-button')).backgroundColor,
@@ -56,6 +68,7 @@ module('Integration | Component | color-picker', function(hooks) {
 
   test('it keeps the color palette hidden when rendered', async function(assert) {
     await render(hbs`{{color-picker}}`);
+    await sleep(1000);
 
     assert.equal(
       getComputedStyle(this.element.querySelector('.pcr-app')).visibility,
@@ -70,6 +83,7 @@ module('Integration | Component | color-picker', function(hooks) {
 
   test('it opens the color palette when clicked', async function(assert) {
     await render(hbs`{{color-picker showAlways=true}}`);
+    await sleep(1000);
     await click('.pcr-button');
 
     assert.equal(
@@ -95,6 +109,7 @@ module('Integration | Component | color-picker', function(hooks) {
     this.set('componentOpts', components);
 
     await render(hbs`{{color-picker components=componentOpts}}`);
+    await sleep(1000);
     await click('.pcr-button');
 
     assert.equal(
@@ -109,11 +124,13 @@ module('Integration | Component | color-picker', function(hooks) {
     await render(hbs`
       {{color-picker value=color format="hex"}}
     `);
+    await sleep(1000);
     assert.equal(this.get('color'), '#123123');
 
     await render(hbs`
       {{color-picker value=color format="hsva"}}
     `);
+    await sleep(1000);
     assert.equal(this.get('color'), 'hsva(153, 64%, 20%, 1.0)');
 
   });
@@ -125,6 +142,7 @@ module('Integration | Component | color-picker', function(hooks) {
       {{input value=color}}
       {{color-picker value=color format="hex"}}
     `);
+    await sleep(1000);
 
     assert.equal(this.get('color'), '#123123');
     assert.equal(this.element.querySelector('input').value, '#123123');