add color options and button type

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 2.4.0
+
+* Deprecated the use of `id="permanent"` in favor of `data-permanent`
+
+***
+
+* Add the option to change the background color of a html element to it's pickers color
+* Add button type color picker
+
 ## 2.3.6
 
 * Fix misspell causing download break

README.md

@@ -75,18 +75,37 @@ game.settings.get("myModule", "myColorSetting") // Returns color code, eg: "#000
 
 ### Form
 
-To add a color picker to a html form, add `is="colorpicker-input"` to a text input field. If you want it to be a permanently open color picker you can give it the id `permanent`
+_A form color picker does not require a `window.Ardittristan.ColorSetting` object since it just outputs to the text input box._
+
+#### Input
+
+To add a color picker to a text field, add `is="colorpicker-input"` to the text field element. If you want the color of the text field to change according to color, you can add the data tag `data-responsive-color` If you want it to be a permanently open color picker you can give it the data tag `data-permanent` (can be combined)
 
 Example:
 
 ```html
 <input type="text" name="clickable" is="colorpicker-input">
-<input type="text" name="alwaysOn" is="colorpicker-input" id="permanent">
+<input type="text" name="alwaysOn" is="colorpicker-input" data-permanent>
+<input type="text" name="colored" is="colorpicker-input" data-responsive-color>
 ```
 
 When the user clicks the OK button, it puts the color code in the text field in hex8 form (eg: `#123456ff`)
 
-_A form color picker does not require a `window.Ardittristan.ColorSetting` object since it just outputs to the text input box._
+#### Button
+
+To add a color picker to a button, add `is="colorpicker-button"` to the button element. If you want the color of the button to change according to color, you can add the data tag `data-responsive-color`
+
+*If you want to get the button value in your form, you should add form="form_id".*
+
+Example:
+
+```html
+<button name="clickable" is="colorpicker-button">
+<button name="forForm" is="colorpicker-button" form="myFormId">
+<button name="colored" is="colorpicker-button" data-responsive-color>
+```
+
+When the user clicks the OK button, it puts the color code in the element's value property in hex8 form (eg: `#123456ff`)
 
 ## Changelog
 

colorSetting.js

@@ -40,6 +40,7 @@ function registerClass() {
  window.Ardittristan.ColorSetting = ColorSetting;
 }
 
+// register text input field
 function registerInput() {
  if (customElements.get('colorpicker-input') != undefined) {
  return;
@@ -49,6 +50,16 @@ function registerInput() {
  });
 }
 
+// register button picker
+function registerButton() {
+ if (customElements.get('colorpicker-button') != undefined) {
+ return;
+ }
+ customElements.define('colorpicker-button', colorPickerButton, {
+ extends: 'button'
+ });
+}
+
 
 
 
@@ -229,9 +240,8 @@ class colorPickerInput extends HTMLInputElement {
  this._getEyeDropper = this._getEyeDropper.bind(this);
  this._makePicker = this._makePicker.bind(this);
  this.visible = false;
- let _this = this;
  // check if picker should be always shown.
- if (this.id === "permanent") {
+ if (/** @deprecated */this.id === "permanent" || this.dataset.permanent !== undefined) {
  this._makePicker("picker_inline");
  }
  else {
@@ -243,6 +253,11 @@ class colorPickerInput extends HTMLInputElement {
  }
  });
  }
+
+ if(this.dataset.responsiveColor !== undefined && this.value != undefined && this.value.length != 0 && this.value.startsWith("#") && this.value.match(/[^A-Fa-f0-9#]+/g) == null) {
+ this.style.backgroundColor = this.value
+ this.style.color = getTextColor(this.value)
+ }
  }
 
  _makePicker(pickerClass) {
@@ -260,12 +275,16 @@ class colorPickerInput extends HTMLInputElement {
  onDone: (color) => {
  this.picker.destroy();
  this.visible = false;
- Hooks.call('pickerDone', 
+ Hooks.call('pickerDone',
  this.parentElement,
  color.hex
- )
+ );
  },
  onChange: (color) => {
+ if (this.dataset.responsiveColor !== undefined) {
+ this.style.backgroundColor = color.rgbaString;
+ this.style.color = getTextColor(color.hex);
+ }
  this.value = color.hex;
  }
  });
@@ -295,6 +314,85 @@ class colorPickerInput extends HTMLInputElement {
  }
 };
 
+class colorPickerButton extends HTMLButtonElement {
+ constructor(...args) {
+ super(...args);
+ this.picker = undefined;
+ this._getEyeDropper = this._getEyeDropper.bind(this);
+ this._makePicker = this._makePicker.bind(this);
+ this.visible = false;
+ // check if picker should be always shown.
+
+ this.addEventListener("click", (event) => {
+ event.preventDefault()
+ if (!this.visible) {
+ this.visible = true;
+ this._makePicker();
+ }
+ });
+
+ if(this.dataset.responsiveColor !== undefined && this.value != undefined && this.value.length != 0 && this.value.startsWith("#") && this.value.match(/[^A-Fa-f0-9#]+/g) == null) {
+ this.style.backgroundColor = this.value
+ this.style.color = getTextColor(this.value)
+ }
+ }
+
+ _makePicker() {
+ this.picker = new Picker();
+
+ // check if an actual value 
+ if (this.value != undefined && this.value.length != 0 && this.value.startsWith("#") && this.value.match(/[^A-Fa-f0-9#]+/g) == null) {
+ this.picker.setColor(this.value.padEnd(9, "f").slice(0, 9), true);
+ }
+
+ this.picker.setOptions({
+ popup: false,
+ parent: this.parentElement,
+ cancelButton: true,
+ onDone: (color) => {
+
+ this.picker.destroy();
+ this.visible = false;
+ Hooks.call('pickerDone',
+ this.parentElement,
+ color.hex
+ );
+ },
+ onChange: (color) => {
+ if (this.dataset.responsiveColor !== undefined) {
+ this.style.backgroundColor = color.rgbaString;
+ this.style.color = getTextColor(color.hex);
+ }
+ this.value = color.hex;
+ }
+ });
+
+ jQuery(this.picker.domElement).insertAfter(this)
+
+ if (this.picker._domCancel) {
+ this.picker._domCancel.textContent = " Eye Dropper";
+ this.picker._domCancel.style.paddingBottom = 0;
+ this.picker._domCancel.style.paddingTop = 0;
+ this.picker._domCancel.onclick = () => {
+ document.addEventListener("click", this._getEyeDropper, true);
+ };
+ }
+
+ jQuery(this.picker.domElement).find("div.picker_cancel").each(function () {
+ if (this.firstChild.firstChild.textContent === " Eye Dropper") {
+ let faIcon = document.createElement("i");
+ faIcon.className = "fas fa-eye-dropper";
+ this.firstChild.prepend(faIcon);
+ }
+ });
+
+ }
+
+ async _getEyeDropper(event) {
+ getEyeDropper(event, this);
+ }
+}
+
 
 async function getEyeDropper(event, _this) {
  event.preventDefault();
@@ -336,7 +434,7 @@ async function getEyeDropper(event, _this) {
  document.body.appendChild(htmlCanvas);
  let imageData = ctx.getImageData(event.pageX, event.pageY, 1, 1).data;
  let color = [imageData[0], imageData[1], imageData[2], imageData[3] / 255];
- htmlCanvas.remove()
+ htmlCanvas.remove();
  _this.picker.setColor(color);
  });
  }
@@ -429,9 +527,9 @@ Hooks.once('init', function () {
  }
  }
 
- Hooks.once('ready', function() {
+ Hooks.once('ready', function () {
  ui.notifications.notify("A module is running a backup color picker library. For best results, please install and enable the Lib-Color Settings module.", "warning");
- })
+ });
  console.log("ColorSettings | initializing fallback mode");
 
  } else {
@@ -442,6 +540,7 @@ Hooks.once('init', function () {
  registerInput();
  registerClass();
  registerInitVar();
+ registerButton();
 });
 
 

module.json

@@ -2,7 +2,7 @@
  "name": "colorsettings",
  "title": "lib - Color Settings",
  "description": "Library that allows modules to add color settings and forms.",
- "version": "2.3.6",
+ "version": "2.4.0",
  "author": "ardittristan#0001",
  "esmodules": ["colorSetting.js"],
  "socket": true,