New demo; enriched model

$UI now in instance model;
added selective alpha demo
pull/25/head
peterd 9 years ago
parent e48bc30d83
commit 742cece380

@ -29,6 +29,7 @@ On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
<option value="input">Input fields</option>
<option value="memory">Color memory spaces</option>
<option value="skinned">Skinned (white)</option>
<option value="skinned_sa">Skinned, selective alpha</option>
<option value="dev_skinned">Skinned dev-tools like</option>
<option value="dev_skinned_hh">Skinned dev-tools 3:2</option>
<option value="noalpha">Default without alpha</option>
@ -38,9 +39,9 @@ On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
(see index.html for more details...)
</p>
<div class="input-toggles">
<input class="color" value="#B6BD79" />
<input class="color" value="rgb(162, 63, 3)" />
<input class="color" value="hsl(32, 95%, 23%)" />
<input class="color no-alpha" value="#B6BD79" />
<input class="color no-alpha" value="rgb(162, 63, 3)" />
<input class="color no-alpha" value="hsl(32, 95%, 23%)" />
</div>
<div class="div-toggles">
<div class="trigger" value="#556B2F"><div><div></div></div></div>
@ -329,7 +330,7 @@ window.myColorPicker = $('input.color').colorPicker({
margin: '5px -2px 0',
doRender: 'div div',
cssAddon: // could also be in a css file instead
'.cp-color-picker{border:1px solid #999; padding:10px;' +
'.cp-color-picker{border:1px solid #999; padding:10px 10px 0;' +
'background:#eee; overflow:visible; border-radius:3px;}' +
'.cp-color-picker:after{content:""; display:block; ' +
'position:absolute; top:-15px; left:12px; border:8px solid #eee;' +
@ -346,11 +347,20 @@ window.myColorPicker = $('input.color').colorPicker({
'.cp-color-picker .cp-alpha{margin:10px 0 0; height:6px; border-radius:6px;' +
'overflow:visible; border:1px solid #999; box-sizing:border-box;' +
'background: linear-gradient(to right, rgba(238,238,238,1) 0%,rgba(238,238,238,0) 100%);}' +
'.cp-color-picker .cp-alpha{margin:10px 0}' +
'.cp-alpha-cursor{background: #eee; border-radius: 100%;' +
'width:14px; height:14px; margin:-5px -7px; border:1px solid #666!important;' +
'box-shadow:inset -2px -4px 3px #ccc}'
};
// the default skinned and white
plugin.skinned_sa = $.extend({}, plugin.skinned, {
renderCallback: function($elm, toggled) {
if (typeof toggled === 'boolean') {
$('.cp-alpha', this.$UI).css('display', $elm.hasClass('no-alpha') ? 'none' : '')
}
}});
// skinned similar to dev tools color picker (but then way smaller and faster...)
plugin.dev_skinned = {
customBG: '#222',
@ -564,7 +574,9 @@ window.myColorPicker = $('input.color').colorPicker({
plugin.dev_skinned_hh = $.extend({}, plugin.dev_skinned,
{cssAddon: plugin.dev_skinned.cssAddon +
'.cp-xy-slider{height:100px}' +
'.cp-z-slider{height:100px}'});
'.cp-z-slider{height:100px}' +
'.cp-xy-slider, .cp-patch, .cp-z-slider{box-shadow: inset 1px 1px 8px rgba(0,0,0,.15),' +
' inset -1px -1px 6px rgba(0,0,0,.15);'});
$pluginSelect.val(type || 'desktop').

@ -108,7 +108,8 @@
$('head').append('<style type="text/css">' +
(_options.css || _css) + (_options.cssAddon || '') + '</style>');
return _$UI = $(_html).css({'margin': _options.margin}).
return _colorPicker.$UI = _$UI =
$(_html).css({'margin': _options.margin}).
appendTo('body').
show(0, function() {
_GPU = _options.GPU && $(this).css('perspective') !== undefined;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save