The color selection application we shared this time is based on HTML5 and CSS3. Its feature is that you can select several common colors in a certain color system and copy the hexadecimal value of the corresponding color.
Advertisement
<div class="container">
<div class="material-color-picker">
<div class="material-color-picker__left-panel">
<ol class="color-selector" data-bind="foreach: materialColors">
<li>
<input name="material-color" type="radio" data-bind="attr: { id: 'materialColor' + $index() }, checked: selectedColor, value: color" >
<label data-bind="attr: { for: 'materialColor' + $index(), title: color }, style: { 'color': $data.variations[4].hex }"></label>
</li>
</ol>
</div>
<div class="material-color-picker__right-panel" data-bind="foreach: materialColors">
<div class="color-palette-wrapper" data-bind="css: { 'js-active': selectedColor() === color }">
<h2 class="color-palette-header" data-bind="text: color"></h2>
<ol class="color-palette" data-bind="foreach: variations">
<li id="clipboardItem" class="color-palette__item" data-bind="attr: { 'data-clipboard-text': hex }, style: { 'background-color': hex }">
<span data-bind="text: weight"></span>
<span data-bind="text: hex"></span>
<span class="copied-indicator" data-bind="css: { 'js-copied': copiedHex() === hex }">Color copied!</span>
</li>
</ol>
</div>
</div>
</div>
</div>
var copiedHex = ko.observable();
var clipboard = new Clipboard('#clipboardItem');
clipboard.on('success', function(el) {
console.clear();
console.info('Action:', el.action);
console.info('Text:', el.text);
console.info('Trigger:', el.trigger);
el.clearSelection();
copiedHex(el.text);
});
Advertisement
