Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve color picker ux #5

Merged
merged 11 commits into from
Oct 4, 2024
Merged

Improve color picker ux #5

Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6f06f7d
Add @jaames/iro, provide haxe typings
hubol Oct 1, 2024
493d44e
Disable border-radius, borders
hubol Oct 2, 2024
e8f2fbc
Styling the picker, some close behavior
hubol Oct 2, 2024
355f285
HubolColorPicker opening, placement
hubol Oct 2, 2024
9c2cd45
No initial color
hubol Oct 2, 2024
bfdcef8
Close on certain key presses
hubol Oct 2, 2024
1c2fd7d
Functional, but messy
hubol Oct 3, 2024
ea98c9e
Open and use eye dropper
hubol Oct 4, 2024
1e87321
Close color picker on any key press
hubol Oct 4, 2024
250752a
static methods, fields -> instance methods, fields
hubol Oct 4, 2024
21504ec
Cleanup
hubol Oct 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Cleanup
  • Loading branch information
@hubol
hubol committed Oct 4, 2024
commit 21504ecec24e1fe0951c91c8dde47d87dea42647
83 changes: 41 additions & 42 deletions src/util/Fields.hx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,16 +241,16 @@ class Fields

public static function createRgb(color:Color, ?into:JQuery, ?onChangeStart:Void->Void, ?onChange:Color->Void, ?onChangeCommit:Color->Void):JQuery
{
var element = new JQuery('<div class="color-box-v2">');
final element = new JQuery('<div class="color-box-v2">');

if (color.a != 1)
trace('Warning: createRgb got alpha != 1: ${color.a}');

var input1 = new JQuery('<div class="color-input">');
final eyedropper = new JQuery('<div class="eyedropper icon icon-eyedropper">');
var input2 = new JQuery('<input type="text" maxlength="7">');
final previewPickerEl = new JQuery('<div class="color-input">');
final eyedropperEl = new JQuery('<div class="eyedropper icon icon-eyedropper">');
final textInputEl = new JQuery('<input type="text" maxlength="7">');

input2.on("keydown", function(ev) {
textInputEl.on("keydown", function(ev) {
if (ev.key.length > 1 || ev.ctrlKey)
return;
var character = ev.key.charAt(0);
Expand All @@ -259,26 +259,6 @@ class Fields
ev.preventDefault();
});

var canFireOnChangeStart = true;

function onDomInput(value:String) {
if (canFireOnChangeStart) {
if (onChangeStart != null)
onChangeStart();
canFireOnChangeStart = false;
}
if (onChange != null)
onChange(Color.fromHex(value, 1));
}

function onDomChange(value:String) {
if (canFireOnChangeStart && onChangeStart != null)
onChangeStart();
canFireOnChangeStart = true;
if (onChangeCommit != null)
onChangeCommit(Color.fromHex(value, 1));
}

function validate(value:String) {
var valid = isValidHexCode(value);
element.toggleClass('invalid', !valid);
Expand All @@ -287,41 +267,60 @@ class Fields
return valid;
}

element.append(input1).append(eyedropper).append(input2);
element.append(previewPickerEl).append(eyedropperEl).append(textInputEl);

function renderValue(value:String) {
input1.css("background-color", value);
input2.val(value);
previewPickerEl.css("background-color", value);
textInputEl.val(value);
}

function onInput(value:String) {
var canFireOnChangeStart = true;

function _onChange(value:String) {
trace("_onChange " + value);
renderValue(value);
if (validate(value))
onDomInput(value);
if (!validate(value))
return;

if (canFireOnChangeStart) {
if (onChangeStart != null)
onChangeStart();
canFireOnChangeStart = false;
}
if (onChange != null)
onChange(Color.fromHex(value, 1));
}

function onChange(value:String) {
function _onChangeCommit(value:String) {
trace("_onChangeCommit " + value);

renderValue(value);
if (validate(value))
onDomChange(value);
if (!validate(value))
return;

if (canFireOnChangeStart && onChangeStart != null)
onChangeStart();
canFireOnChangeStart = true;
if (onChangeCommit != null)
onChangeCommit(Color.fromHex(value, 1));
}

input2.on("input", function (ev) {
textInputEl.on("input", function (ev) {
final value = ev.target.value;
onInput(value);
_onChange(value);
});

input2.on("change", function (ev) {
textInputEl.on("change", function (ev) {
final value = ev.target.value;
onChange(value);
_onChangeCommit(value);
});

input1.on("mousedown", function() {
HubolColorPicker.singleton.open(input1.get(0), input2.val(), (color) -> onInput(color.hexString), (color) -> onChange(color.hexString));
previewPickerEl.on("mousedown", function() {
HubolColorPicker.singleton.open(previewPickerEl.get(0), textInputEl.val(), (color) -> _onChange(color.hexString), (color) -> _onChangeCommit(color.hexString));
});

eyedropper.on("mousedown", function() {
EyeDropper.open((result) -> onChange(result.sRGBHex));
eyedropperEl.on("mousedown", function() {
EyeDropper.open((result) -> _onChangeCommit(result.sRGBHex));
});

var initialValue = color.toHex();
Expand Down