Initial Commit

.npmignore

@@ -28,3 +28,4 @@
 /.node_modules.ember-try/
 /bower.json.ember-try
 /package.json.ember-try
+/config/addon-docs.js

README.md

@@ -1,7 +1,7 @@
 ember-pickr
 ==============================================================================
 
-[Short description of the addon.]
+Color Picker for EmberJS using pickr
 
 Installation
 ------------------------------------------------------------------------------
@@ -13,8 +13,42 @@ ember install ember-pickr
 
 Usage
 ------------------------------------------------------------------------------
+```
+{{color-picker
+  value=value
+  default="#e04e39"
+  format="hex"
+}}
+```
+
+Options
+------------------------------------------------------------------------------
 
-[Longer description of how to use the addon in apps.]
+Takes all [options](https://github.com/Simonwep/pickr#optional-options) that are applicable to pickr.
+
+* **`disabled`**: Start state. If `true`, 'disabled' will be added to the button's classlist | **`false`**
+* **`default`**: Default color | **#fff**
+* **`comparison`**: If set to `false` it would directly apply the selected color on the button and preview | **`true`**
+* **`defaultRepresentation`**: Default color representation. Valid options are `HEX`, `RGBA`, `HSVA`, `HSLA` and `CMYK` | **`HEX`**
+* **`showAlways`**: Option to keep the color picker always visible | **`false`**
+* **`closeWithKey`**: Close pickr with this specific key. Can be the event key or code | **`Escape`**
+* **`position`**: Defines the position of the color-picker. Available options are top, left and middle relative
+to the picker button. If clipping occurs, the color picker will automatically choose his position. | **`middle`**
+* **`adjustableNumbers`**: Enables the ability to change numbers in an input field with the scroll-wheel.
+To use it set the cursor on a position where a number is and scroll, use ctrl to make steps of five | **`true`**
+* **`saveLabel`**: Button label for save button | **`Save`**
+* **`clearLabel`**: Button label for clear button | **`Clear`**
+* **`format`**: One of `hsva`, `hsla`, `rgba`, `hex`, `cmyk` | **`{ h, s, v, a }`**
+* To use the **`onChange`** and **`onSave`** handlers, use closure actions.
+
+```
+{{color-picker
+  value=value
+  default="#e04e39"
+  format="hex"
+  saveLabel="Set Color"
+}}
+```
 
 
 License

addon/components/color-picker.js

@@ -0,0 +1,120 @@
+import Component from '@ember/component';
+import layout from '../templates/components/color-picker';
+import mergeDeep from "../utils/mergeDeep";
+import { assert } from '@ember/debug';
+
+import Pickr from 'pickr';
+
+export default Component.extend({
+  layout,
+
+  didInsertElement() {
+    this._super(...arguments);
+
+    this._setupPickr();
+  },
+
+  _setupPickr() {
+    this._options = {
+      // Start state. If true 'disabled' will be added to the button's classlist.
+      disabled: this.get('disabled') || false,
+
+      // If set to false it would directly apply the selected color on the button and preview.
+      comparison: this.get('comparison') || true,
+
+      // Default color
+      default: this.get('value') || this.get('default') || 'fff',
+
+      // Default color representation.
+      // Valid options are `HEX`, `RGBA`, `HSVA`, `HSLA` and `CMYK`.
+      defaultRepresentation: this.get('defaultRepresentation') || 'HEX',
+
+      // Option to keep the color picker always visible. You can still hide / show it via
+      // 'pickr.hide()' and 'pickr.show()'. The save button keeps his functionality, so if
+      // you click it, it will fire the onSave event.
+      showAlways: this.get('showAlways') || false,
+
+      // Close pickr with this specific key.
+      // Default is 'Escape'. Can be the event key or code.
+      closeWithKey: this.get('closeWithKey') || 'Escape',
+
+      // Defines the position of the color-picker. Available options are
+      // top, left and middle relative to the picker button.
+      // If clipping occurs, the color picker will automatically choose his position.
+      position: this.get('position') || 'middle',
+
+      // Enables the ability to change numbers in an input field with the scroll-wheel.
+      // To use it set the cursor on a position where a number is and scroll, use ctrl to make steps of five
+      adjustableNumbers: this.get('adjustableNumbers') || true,
+
+      strings: {
+        save: this.get('saveLabel') || 'Save',
+        clear: this.get('clearLabel') || 'Clear'
+      }
+    };
+
+    this._components = mergeDeep({
+      preview: true,
+      opacity: true,
+      hue: true,
+
+      interaction: {
+        hex: true,
+        rgba: true,
+        hsva: true,
+        input: true,
+        clear: true,
+        save: true
+      }
+    }, this.get('components'));
+
+    let pickr = Pickr.create({
+      el: this.element,
+
+      ...this._options,
+
+      components: {
+        ...this._components
+      },
+
+      onSave: (hsva, instance) => {
+        let value = this.formatColor(hsva);
+        this.set('value', value);
+
+        if (this.onSave) {
+          this.onSave(hsva, instance);
+        }
+      },
+
+      onChange: (hsva, instance) => {
+        if (this.onChange) {
+          this.onChange(hsva, instance);
+        }
+      }
+    });
+
+    this.set('value', this.formatColor(pickr.getColor()));
+    this._pickr = pickr;
+  },  
+
+  formatColor(hsva) {
+    let value = hsva;
+    let format = this.get('format');
+    if (format) {
+      format = format.toUpperCase();
+      assert(
+        '[ember-pickr]: Format must be one of HSVA, HSLA, RGBA, HEX, CMYK',
+        ['HSVA', 'HSLA', 'RGBA', 'HEX', 'CMYK'].includes(format)
+      );
+
+      value = value[`to${format}`]().toString();
+    }
+
+    return value;
+  },
+
+  willDestroyElement() {
+    this._pickr.destroy();
+    this._super(...arguments);
+  }
+});

addon/templates/components/color-picker.hbs

@@ -0,0 +1 @@
+{{yield}}

addon/utils/mergeDeep.js

@@ -0,0 +1,21 @@
+function isObject(item) {
+  return (item && typeof item === 'object' && !Array.isArray(item));
+}
+
+export default function mergeDeep(target, ...sources) {
+  if (!sources.length) return target;
+  const source = sources.shift();
+
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} });
+        mergeDeep(target[key], source[key]);
+      } else {
+        Object.assign(target, { [key]: source[key] });
+      }
+    }
+  }
+
+  return mergeDeep(target, ...sources);
+}

app/components/color-picker.js

@@ -0,0 +1 @@
+export { default } from 'ember-pickr/components/color-picker';

config/addon-docs.js

@@ -0,0 +1,9 @@
+/* eslint-env node */
+'use strict';
+
+const AddonDocsConfig = require('ember-cli-addon-docs/lib/config');
+
+module.exports = class extends AddonDocsConfig {
+  // See https://ember-learn.github.io/ember-cli-addon-docs/docs/deploying
+  // for details on configuration you can override here.
+};

config/deploy.js

@@ -0,0 +1,29 @@
+/* eslint-env node */
+'use strict';
+
+module.exports = function(deployTarget) {
+  let ENV = {
+    build: {}
+    // include other plugin configuration that applies to all deploy targets here
+  };
+
+  if (deployTarget === 'development') {
+    ENV.build.environment = 'development';
+    // configure other plugins for development deploy target here
+  }
+
+  if (deployTarget === 'staging') {
+    ENV.build.environment = 'production';
+    // configure other plugins for staging deploy target here
+  }
+
+  if (deployTarget === 'production') {
+    ENV.build.environment = 'production';
+    // configure other plugins for production deploy target here
+  }
+
+  // Note: if you need to build some configuration asynchronously, you can return
+  // a promise that resolves with the ENV object instead of returning the
+  // ENV object synchronously.
+  return ENV;
+};

index.js

@@ -1,5 +1,22 @@
 'use strict';
 
+const path = require('path');
+
 module.exports = {
-  name: require('./package').name
+  name: require('./package').name,
+
+  options: {
+    autoImport: {
+      alias: {
+        pickr: 'pickr-widget/dist/pickr.min.js'
+      }
+    }
+  },
+
+  included: function colpick_included() {
+    this._super.included.apply(this, arguments);
+
+    let pickr = path.join('node_modules', 'pickr-widget', 'dist');
+    this.app.import(path.join(pickr, 'pickr.min.css'));
+  }
 };