Accept DOM elements for the el option

The `el` option can now accept an HTMLElement/Element/Node or an array of HTMLElements in addition to a CSS selector.

Fixes #139

README.md

@@ -78,10 +78,12 @@ Coloris({
   // when the color fields are in a scrollable container and you want the color picker's dialog
   // to remain anchored to them. You will need to set the CSS position of the desired container
   // to "relative" or "absolute".
+  // The value of this option can be either a CSS selector or an HTMLElement/Element/Node.
   // Note: This should be a scrollable container with enough space to display the picker.
   parent: '.container',
 
   // A custom selector to bind the color picker to. This must point to HTML input fields.
+  // This can also accept an HTMLElement or an array of HTMLElements instead of a CSS selector.
   el: '.color-field',
 
   // The bound input fields are wrapped in a div that adds a thumbnail showing the current color

src/coloris.js

@@ -311,14 +311,22 @@
 
   /**
    * Bind the color picker to input fields that match the selector.
-   * @param {string} selector One or more selectors pointing to input fields.
+   * @param {(string|HTMLElement|HTMLElement[])} selector A CSS selector string, a DOM element or a list of DOM elements.
    */
   function bindFields(selector) {
-    // Show the color picker on click on the input fields that match the selector
-    addListener(document, 'click', selector, openPicker);
-
-    // Update the color preview of the input fields that match the selector
-    addListener(document, 'input', selector, updateColorPreview);
+    if (selector instanceof HTMLElement) {
+      selector = [selector];
+    } 
+
+    if (Array.isArray(selector)) {
+      selector.forEach(field => {
+        addListener(field, 'click', openPicker);
+        addListener(field, 'input', updateColorPreview);
+      });
+    } else  {   
+      addListener(document, 'click', selector, openPicker);
+      addListener(document, 'input', selector, updateColorPreview);
+    }
   }
 
   /**
@@ -439,27 +447,39 @@
 
   /**
    * Wrap the linked input fields in a div that adds a color preview.
-   * @param {string} selector One or more selectors pointing to input fields.
+   * @param {(string|HTMLElement|HTMLElement[])} selector A CSS selector string, a DOM element or a list of DOM elements.
    */
   function wrapFields(selector) {
-    document.querySelectorAll(selector).forEach(field => {
-      const parentNode = field.parentNode;
+    if (selector instanceof HTMLElement) {
+      wrapColorField(selector);
+    } else if (Array.isArray(selector)) {
+      selector.forEach(wrapColorField);
+    } else  {
+      document.querySelectorAll(selector).forEach(wrapColorField);
+    }
+  }
 
-      if (!parentNode.classList.contains('clr-field')) {
-        const wrapper = document.createElement('div');
-        let classes = 'clr-field';
+  /**
+   * Wrap an input field in a div that adds a color preview.
+   * @param {object} field The input field.
+   */
+  function wrapColorField(field) {
+    const parentNode = field.parentNode;
 
-        if (settings.rtl || field.classList.contains('clr-rtl')) {
-          classes += ' clr-rtl';
-        }
+    if (!parentNode.classList.contains('clr-field')) {
+      const wrapper = document.createElement('div');
+      let classes = 'clr-field';
 
-        wrapper.innerHTML = `<button type="button" aria-labelledby="clr-open-label"></button>`;
-        parentNode.insertBefore(wrapper, field);
-        wrapper.setAttribute('class', classes);
-        wrapper.style.color = field.value;
-        wrapper.appendChild(field);
+      if (settings.rtl || field.classList.contains('clr-rtl')) {
+        classes += ' clr-rtl';
       }
-    });
+
+      wrapper.innerHTML = '<button type="button" aria-labelledby="clr-open-label"></button>';
+      parentNode.insertBefore(wrapper, field);
+      wrapper.className = classes;
+      wrapper.style.color = field.value;
+      wrapper.appendChild(field);
+    }
   }
 
   /**