Netsyms/tinyColorPicker
2
0
Fork 0
mirror of https://github.com/PitPik/tinyColorPicker synced 2025-07-17 06:54:28 -06:00
Code Issues Releases Wiki Activity

Merge d6140d12744cbf992dc999b79dde9e437cfd357c into b9f0c9ae016e1815fe8ccb264f7d9d27d5874431

Browse Source
This commit is contained in:
Omar Desogus 2016-04-14 17:32:30 +00:00
commit 9eb8ea42a5
2 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -46,8 +46,8 @@ $('.color').colorPicker({
GPU: true, // use transform: translate3d GPU: true, // use transform: translate3d
doRender: true | 'selector', // manipulate color and bgColor of input field (on certain elements if selector) doRender: true | 'selector', // manipulate color and bgColor of input field (on certain elements if selector)
opacity: true, // enable / disable alpha slider opacity: true, // enable / disable alpha slider
renderCallback: function($elm, toggled) {}, // this === instance; $elm: the input field;toggle === true -> just appeared; false -> opposite; else -> is rendering on pointer move renderCallback: function($elm, toggled) {}, // this === instance; $elm: the input field;toggle === 'opened' -> just appeared; 'closed' -> just closed; else -> is rendering on pointer move
// toggled true/false can for example be used to check if the $elm has a certain className and then hide alpha,... // toggled 'opened'/'closed' can for example be used to check if the $elm has a certain className and then hide alpha,...
buildCallback: function($elm) {}, // this === instance; $elm: the UI buildCallback: function($elm) {}, // this === instance; $elm: the UI
css: '', // replaces existing css css: '', // replaces existing css
cssAddon: '', // adds css to existing cssAddon: '', // adds css to existing
@ -65,10 +65,12 @@ The renderCallback can be used as openCallback and closeCallback:
```javascript ```javascript
renderCallback: function($elm, toggled) { renderCallback: function($elm, toggled) {
if (toggled === true) { // simple, lightweight check if (toggled === 'opened') { // simple, lightweight check
// ... like an open callback // ... like an open callback
} else if (toggled === false) { } else if (toggled === 'closed') {
// ... like a close callback // ... like a close callback
} else {
// ..on pointer move
} }
} }
``` ```

12
jqColorPicker.js
View File

@ -109,12 +109,14 @@
_$xy_slider._height = _$xy_slider.height(); _$xy_slider._height = _$xy_slider.height();
_color.setColor(extractValue(_$trigger[0])); _color.setColor(extractValue(_$trigger[0]));
preRender(true); preRender('opened');
_options.doRender = true;
}); });
} else if (_colorPicker.$trigger) { } else if (_colorPicker.$trigger) {
$(_$UI).hide(_options.animationSpeed, function() { $(_$UI).hide(_options.animationSpeed, function() {
preRender(false); preRender('closed');
_colorPicker.$trigger = null; _colorPicker.$trigger = null;
_options.doRender = false;
}); });
} }
} }
@ -260,7 +262,7 @@
_options.renderCallback.call( _options.renderCallback.call(
_colorPicker, _colorPicker,
_$trigger, _$trigger,
typeof toggled === 'boolean' ? toggled : undefined typeof toggled === 'string' ? toggled : undefined
); );
} }
@ -303,7 +305,7 @@
return this.on('focusin.a click.a', toggle) return this.on('focusin.a click.a', toggle)
.on('change.a', function() { .on('change.a', function() {
_color.setColor(this.value || '#FFF'); _color.setColor(this.value || '#FFF');
_instance.colorPicker.render(true); _instance.colorPicker.render('opened');
}) })
.each(function() { .each(function() {
var value = extractValue(this), var value = extractValue(this),
@ -328,4 +330,4 @@
_instance = $(); _instance = $();
}; };
})); }));