| MFColorPicker / 1.02 / demo / mf-colorpicker-demo.html file last updated : 2024-03-20 |
|---|
<!-- methodfish package release
Project : MFColorPicker
Release : 1.02
Release date : 2024-03-20 12:18:37
License : MIT
For more information please refer to https://methodfish.com/Projects/MFColorPicker
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Methodfish Color Picker demo</title>
<meta name="viewport" content="width=device-width, initial-scale=0.9, maximum-scale=1.0, user-scalable=no">
<link rel="icon" type="image/png" href="https://methodfish.com/images/methodfish.ico">
<link rel="stylesheet preload prefetch" as="style" href="https://fonts.googleapis.com/icon?family=Material+Icons|Roboto">
<script src="../js/mf-colorpicker.js"></script>
<link rel="stylesheet preload prefetch" as="style" href="../css/mf-colorpicker.css">
<link rel='stylesheet preload prefetch' as='style' href='https://methodfish.com/Download/MFFloatawayMsg/files/latest/css/mf-floataway-msg.css'>
<script src='https://methodfish.com/Download/MFFloatawayMsg/files/latest/js/mf-floataway-msg.js'></script>
<style>
* {
font-family:Roboto;
}
code {
display:block;
white-space:pre-wrap;
font-family:Courier New;
font-size:85%;
background-color: #eeeeee;
padding:10px;
margin:10px;
border-radius: 10px;
overflow:scroll;
}
.hidden {
display:none;
}
.style1, .style2, .style3, .style4, .style5, input[type="color"] {
margin:10px;
}
.style2 > div {
border:solid 2px blue;
}
.style3 > div {
border-radius:50px;
}
.style4 {
border:solid 2px black!important;
border-radius:2px;
padding:2px!important;
line-height:0;
vertical-align:middle;
}
.style4 > div {
margin:0!important;
border:none;
left:2px!important;
top:2px!important;
}
.style5 > div {
width:50px;
height:50px;
margin-bottom:5px;
padding:5px;
}
.table {
display:table;
width:100%;
}
.table > div {
display:table-cell;
padding: 0 10px 10px 10px;
border:solid 1px lightgrey;
}
@media screen and (max-width:900px) {
.table > div {
display:block;
}
}
</style>
</head>
<body>
<h1><a href="https://methodfish.com/Projects/MFColorPicker">Methodfish MF-ColorPicker</a> javascript widget</h1>
<p>
Unhappy with the Windows11 color picker, I decided something better was needed, including:
<UL>
<LI>Optional palette of preset colors,</LI>
<LI>a transparency selector,</LI>
<LI>color sampling eyedropper (browser dependent)</LI>
</UL>
</p>
<input type="hidden" id="mfpresets" value="#ff0000,005500aa">
<datalist id="basiclist">
<option>#ffffff</option>
<option>#000000</option>
<option>#ff0000</option>
<option>#00ff00</option>
<option>#0000ff</option>
</datalist>
<div class="table">
<div>
<h2>Standard HTML...</h2>
no styling, no list: <input type="color" onchange="addFloatawayMsg('set to '+this.value, 'T')">
<BR>with some styling + no list: <input type="color" style='background:white; width:25px' onchange="addFloatawayMsg('set to '+this.value, 'T')">
<BR>with color list: <input type="color" list="basiclist" onchange="addFloatawayMsg('set to '+this.value,'B')">
<p>Note, presets for standard color inputs is handled through a <code style="display:inline-block; margin:0"><datalist><option></option>...</datalist></code> set</p>
</div>
<div>
<h2>MF-ColorPicker...</h2>
.style1 with onChange: <input type="hidden" class="mfcolorpicker style1 hidden" onChange="doColorSelected(this, this.value)")>
<BR>.style2 with onChange & onInput: <input type="text" class="mfcolorpicker style2 hidden" value="#00D1AB" onChange="doColorSelected(this, this.value)" onInput="doColorHover(this, this.value)">
<BR>.style3 with onChange & onInput: <input type="text" class="mfcolorpicker style3 hidden" value="#DD2D2D55" onChange="doColorSelected(this, this.value)" onInput="doColorHover(this, this.value)">
<BR>.style4 with onChange & onInput: <input type="text" class="mfcolorpicker style4 hidden" value="#0095CD" onChange="doColorSelected(this, this.value)" onInput="doColorHover(this, this.value)">
<BR>.style5 with change & input events: <input type="text" class="mfcolorpicker style5 hidden" value="#e50053c9"></span>
<p>Note, presets for MFColorPicker color inputs is handled through an <code style="display:inline-block; margin:0"><input></code> with a csv value of 6 or 8 digit hex color codes</p>
</div>
</div>
<p>
To implement you need to include the .js and .css files, and javascript call <code style="display:inline-block; margin:0">MFColorPicker().init('mfpresetsId')</code> in order to initalize existing inputs
<code><link rel='stylesheet preload prefetch' as='style' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet preload prefetch' as='style' href='https://methodfish.com/Download/MFColorPicker/files/latest/css/mf-colorpicker.css'>
<script src='https://methodfish.com/Download/MFColorPicker/files/latest/js/mf-colorpicker.js'></script>
.
.
.
<input type="hidden" id="mfpresets" value="#ffffff,#000000,#ff0000,00f000,0000ff">
<input type="color" class="mfcolorpicker" onchange="alert('something happened')">
</code>
Along with ....
<code><script>
window.addEventListener('load', function() {
new MFColorPicker().init('mfpresets'); // Finds all input.mfcolorpicker elements
});
</script></code>
or
<code>window.addEventListener('load', function() {
new MFColorPicker().init('mfpresets');
});
</code>
</p>
<script>
window.addEventListener('load', function() {
new MFColorPicker().init('mfpresets');
doSaveExistingColors();
document.querySelector('.style5').addEventListener('change', function(e) {
doColorSelected(e.target, e.target.value);
});
document.querySelector('.style5').addEventListener('input', function(e) {
doColorHover(e.target, e.target.value);
});
});
function doColorSelected(target, hex) {
// Do something...
addFloatawayMsg('set to '+hex, 'T')
console.warn(`${hex} selected`);
// Remember all the current colors....
doSaveExistingColors();
}
function doSaveExistingColors() {
console.warn(`Resetting the presets`);
const uniqueValues = new Set();
document.querySelectorAll('input.mfcolorpicker').forEach(input => {
uniqueValues.add(new MFColorPicker().colToHex(input.value).replace('#',''));
});
document.querySelector('#mfpresets').value = Array.from(uniqueValues).join(',');
}
function doColorHover(target, hex) {
console.log('doColorHover '+hex);
new MFColorPicker().setSelectedTarget(target, hex);
}
</script>
</body>
</html>Also see
articles/HTML-hex-color-codessquarearticles/Implementing-a-Monaco-Editorsquarearticles/iConnectionTestsquarearticles/javascript-camerasquarearticles/list-editsquarearticles/minifierssquarearticles/opayosquarearticles/table-drag-sortersquarearticles/typewatchsquareprojects/MFCalendarPopupsquareprojects/MFChartColumnsquareprojects/MFColorPickersquareprojects/MFColorPickerBasicsquareprojects/MFColumnGradientsquareprojects/MFFloatawayMsgsquareprojects/MFPanelssquareprojects/MFSelectorsquare
Comments
New Comment