Color Picker

by Amy L

HTML

<link rel="stylesheet" href="https://taufik-nurrohman.js.org/color-picker/index.min.css">
<p>
  <input id="testInputText" type="text">
</p>
<hr/>
<p>
  <input id="testInputColor" type="color">
</p>
<div id="container"></div>
<script src="https://taufik-nurrohman.js.org/color-picker/index.min.js"></script>

CSS

.color-picker__dialog--no-alpha .color-picker__control--a {
  display: none;
}

.color-picker__dialog--static {
  box-shadow: none;
  display: inline-block;
  left: 0 !important;
  position: static;
  top: 0 !important;
  vertical-align: middle;
}
#container {
  border: 5px dashed red;
}

JavaScript

window.addEventListener('DOMContentLoaded', (event) => {
			const inputs = [
      	document.querySelector('#testInputText'),
        document.querySelector('#testInputColor')
      ];
			const pickers = inputs.map((input) => {
        const picker = new CP(input, {
          color: 'HEX'
        });
        disableAlpha(picker);
        return picker;
      });
      disableHtml5Input(inputs[1]);
      
      //pickers[0].isStatic = true;
      pickers[0].self.classList.add(pickers[0].state.class + '__dialog--static');
      const container = document.querySelector('#container');
    	pickers[0].enter(container);
});

function disableAlpha(picker) {
  		picker.noAlpha = true;
      picker.self.classList.add(picker.state.class + '__dialog--no-alpha');
      picker.on('change', function(r, g, b, a) {
         this.source.value = this.color(r, g, b, 1);
         console.log(this.source.value);
      });
}
function disableHtml5Input(source) {
	source.noNativeColorPicker = true;
	// Prevent showing native color picker panel
  source.addEventListener('click', e => e.preventDefault());
}