mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update jquery-miniColors to 1.2.1

This commit is contained in:
Lukas Reschke 2012-10-13 00:47:50 +02:00
parent 2d190e29c2
commit d528b264a6
5 changed files with 292 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
3rdparty/miniColors/css/images/colors.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
3rdparty/miniColors/css/images/trigger.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 706 B

92
3rdparty/miniColors/css/jquery.miniColors.css vendored
View File

@ -1,19 +1,13 @@
.miniColors-trigger {
height: 22px;
width: 22px;
background: url(images/trigger.png) center no-repeat;
vertical-align: middle;
margin: 0 .25em;
display: inline-block;
outline: none;
INPUT.miniColors {
margin-right: 4px;
}
.miniColors-selector {
position: absolute;
width: 175px;
height: 150px;
background: #FFF;
border: solid 1px #BBB;
background: white;
border: solid 1px #bababa;
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, .25);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .25);
box-shadow: 0 0 6px rgba(0, 0, 0, .25);
@ -24,9 +18,13 @@
z-index: 999999;
}
.miniColors.opacity.miniColors-selector {
width: 200px;
}
.miniColors-selector.black {
background: #000;
border-color: #000;
background: black;
border-color: black;
}
.miniColors-colors {
@ -35,25 +33,43 @@
left: 5px;
width: 150px;
height: 150px;
background: url(images/colors.png) right no-repeat;
background: url(images/colors.png) -40px 0 no-repeat;
cursor: crosshair;
}
.miniColors.opacity .miniColors-colors {
left: 30px;
}
.miniColors-hues {
position: absolute;
top: 5px;
left: 160px;
width: 20px;
height: 150px;
background: url(images/colors.png) left no-repeat;
background: url(images/colors.png) 0 0 no-repeat;
cursor: crosshair;
}
.miniColors.opacity .miniColors-hues {
left: 185px;
}
.miniColors-opacity {
position: absolute;
top: 5px;
left: 5px;
width: 20px;
height: 150px;
background: url(images/colors.png) -20px 0 no-repeat;
cursor: crosshair;
}
.miniColors-colorPicker {
position: absolute;
width: 9px;
height: 9px;
border: 1px solid #fff;
width: 11px;
height: 11px;
border: 1px solid black;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
@ -64,18 +80,46 @@
left: 0;
width: 7px;
height: 7px;
border: 1px solid #000;
border: 2px solid white;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
.miniColors-huePicker {
.miniColors-huePicker,
.miniColors-opacityPicker {
position: absolute;
left: -3px;
width: 24px;
height: 1px;
border: 1px solid #fff;
left: -2px;
width: 22px;
height: 2px;
border: 1px solid black;
background: white;
margin-top: -1px;
border-radius: 2px;
background: #000;
}
.miniColors-trigger,
.miniColors-triggerWrap {
width: 22px;
height: 22px;
display: inline-block;
}
.miniColors-triggerWrap {
background: url(images/trigger.png) -22px 0 no-repeat;
}
.miniColors-triggerWrap.disabled {
filter: alpha(opacity=50);
opacity: .5;
}
.miniColors-trigger {
vertical-align: middle;
outline: none;
background: url(images/trigger.png) 0 0 no-repeat;
}
.miniColors-triggerWrap.disabled .miniColors-trigger {
cursor: default;
}

314
3rdparty/miniColors/js/jquery.miniColors.js vendored
View File

@ -1,7 +1,7 @@
/*
* jQuery miniColors: A small color selector
*
* Copyright 2011 Cory LaViska for A Beautiful Site, LLC. (http://abeautifulsite.net/)
* Copyright 2012 Cory LaViska for A Beautiful Site, LLC. (http://www.abeautifulsite.net/)
*
* Dual licensed under the MIT or GPL Version 2 licenses
*
@ -18,20 +18,30 @@ if(jQuery) (function($) {
//
// Determine initial color (defaults to white)
var color = expandHex(input.val());
if( !color ) color = 'ffffff';
var hsb = hex2hsb(color);
var color = expandHex(input.val()) || 'ffffff',
hsb = hex2hsb(color),
rgb = hsb2rgb(hsb),
alpha = parseFloat(input.attr('data-opacity')).toFixed(2);
if( alpha > 1 ) alpha = 1;
if( alpha < 0 ) alpha = 0;
// Create trigger
var trigger = $('<a class="miniColors-trigger" style="background-color: #' + color + '" href="#"></a>');
trigger.insertAfter(input);
trigger.wrap('<span class="miniColors-triggerWrap"></span>');
if( o.opacity ) {
trigger.css('backgroundColor', 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + alpha + ')');
}
// Set input data and update attributes
input
.addClass('miniColors')
.data('original-maxlength', input.attr('maxlength') || null)
.data('original-autocomplete', input.attr('autocomplete') || null)
.data('letterCase', 'uppercase')
.data('letterCase', o.letterCase === 'uppercase' ? 'uppercase' : 'lowercase')
.data('opacity', o.opacity ? true : false)
.data('alpha', alpha)
.data('trigger', trigger)
.data('hsb', hsb)
.data('change', o.change ? o.change : null)
@ -42,11 +52,11 @@ if(jQuery) (function($) {
.val('#' + convertCase(color, o.letterCase));
// Handle options
if( o.readonly ) input.prop('readonly', true);
if( o.disabled ) disable(input);
if( o.readonly || input.prop('readonly') ) input.prop('readonly', true);
if( o.disabled || input.prop('disabled') ) disable(input);
// Show selector when trigger is clicked
trigger.bind('click.miniColors', function(event) {
trigger.on('click.miniColors', function(event) {
event.preventDefault();
if( input.val() === '' ) input.val('#');
show(input);
@ -54,29 +64,29 @@ if(jQuery) (function($) {
});
// Show selector when input receives focus
input.bind('focus.miniColors', function(event) {
input.on('focus.miniColors', function(event) {
if( input.val() === '' ) input.val('#');
show(input);
});
// Hide on blur
input.bind('blur.miniColors', function(event) {
input.on('blur.miniColors', function(event) {
var hex = expandHex( hsb2hex(input.data('hsb')) );
input.val( hex ? '#' + convertCase(hex, input.data('letterCase')) : '' );
});
// Hide when tabbing out of the input
input.bind('keydown.miniColors', function(event) {
input.on('keydown.miniColors', function(event) {
if( event.keyCode === 9 ) hide(input);
});
// Update when color is typed in
input.bind('keyup.miniColors', function(event) {
input.on('keyup.miniColors', function(event) {
setColorFromInput(input);
});
// Handle pasting
input.bind('paste.miniColors', function(event) {
input.on('paste.miniColors', function(event) {
// Short pause to wait for paste to complete
setTimeout( function() {
setColorFromInput(input);
@ -89,19 +99,18 @@ if(jQuery) (function($) {
//
// Destroys an active instance of the miniColors selector
//
hide();
input = $(input);
// Restore to original state
input.data('trigger').remove();
input.data('trigger').parent().remove();
input
.attr('autocomplete', input.data('original-autocomplete'))
.attr('maxlength', input.data('original-maxlength'))
.removeData()
.removeClass('miniColors')
.unbind('.miniColors');
$(document).unbind('.miniColors');
.off('.miniColors');
$(document).off('.miniColors');
};
var enable = function(input) {
@ -110,8 +119,7 @@ if(jQuery) (function($) {
//
input
.prop('disabled', false)
.data('trigger')
.css('opacity', 1);
.data('trigger').parent().removeClass('disabled');
};
var disable = function(input) {
@ -121,8 +129,7 @@ if(jQuery) (function($) {
hide(input);
input
.prop('disabled', true)
.data('trigger')
.css('opacity', 0.5);
.data('trigger').parent().addClass('disabled');
};
var show = function(input) {
@ -133,24 +140,27 @@ if(jQuery) (function($) {
// Hide all other instances
hide();
// Generate the selector
var selector = $('<div class="miniColors-selector"></div>');
selector
.append('<div class="miniColors-colors" style="background-color: #FFF;"><div class="miniColors-colorPicker"><div class="miniColors-colorPicker-inner"></div></div>')
.append('<div class="miniColors-hues"><div class="miniColors-huePicker"></div></div>')
.css({
top: input.is(':visible') ? input.offset().top + input.outerHeight() : input.data('trigger').offset().top + input.data('trigger').outerHeight(),
left: input.is(':visible') ? input.offset().left : input.data('trigger').offset().left,
display: 'none'
})
.append('<div class="miniColors-colors" style="background-color: #FFF;"><div class="miniColors-colorPicker"><div class="miniColors-colorPicker-inner"></div></div>')
.css('display', 'none')
.addClass( input.attr('class') );
// Opacity
if( input.data('opacity') ) {
selector
.addClass('opacity')
.prepend('<div class="miniColors-opacity"><div class="miniColors-opacityPicker"></div></div>');
}
// Set background for colors
var hsb = input.data('hsb');
selector
.find('.miniColors-colors')
.css('backgroundColor', '#' + hsb2hex({ h: hsb.h, s: 100, b: 100 }));
.find('.miniColors-colors').css('backgroundColor', '#' + hsb2hex({ h: hsb.h, s: 100, b: 100 })).end()
.find('.miniColors-opacity').css('backgroundColor', '#' + hsb2hex({ h: hsb.h, s: hsb.s, b: hsb.b })).end();
// Set colorPicker position
var colorPosition = input.data('colorPosition');
@ -162,64 +172,106 @@ if(jQuery) (function($) {
// Set huePicker position
var huePosition = input.data('huePosition');
if( !huePosition ) huePosition = getHuePositionFromHSB(hsb);
selector.find('.miniColors-huePicker').css('top', huePosition.y + 'px');
selector.find('.miniColors-huePicker').css('top', huePosition + 'px');
// Set opacity position
var opacityPosition = input.data('opacityPosition');
if( !opacityPosition ) opacityPosition = getOpacityPositionFromAlpha(input.attr('data-opacity'));
selector.find('.miniColors-opacityPicker').css('top', opacityPosition + 'px');
// Set input data
input
.data('selector', selector)
.data('huePicker', selector.find('.miniColors-huePicker'))
.data('opacityPicker', selector.find('.miniColors-opacityPicker'))
.data('colorPicker', selector.find('.miniColors-colorPicker'))
.data('mousebutton', 0);
$('BODY').append(selector);
selector.fadeIn(100);
// Position the selector
var trigger = input.data('trigger'),
hidden = !input.is(':visible'),
top = hidden ? trigger.offset().top + trigger.outerHeight() : input.offset().top + input.outerHeight(),
left = hidden ? trigger.offset().left : input.offset().left,
selectorWidth = selector.outerWidth(),
selectorHeight = selector.outerHeight(),
triggerWidth = trigger.outerWidth(),
triggerHeight = trigger.outerHeight(),
windowHeight = $(window).height(),
windowWidth = $(window).width(),
scrollTop = $(window).scrollTop(),
scrollLeft = $(window).scrollLeft();
// Adjust based on viewport
if( (top + selectorHeight) > windowHeight + scrollTop ) top = top - selectorHeight - triggerHeight;
if( (left + selectorWidth) > windowWidth + scrollLeft ) left = left - selectorWidth + triggerWidth;
// Set position and show
selector.css({
top: top,
left: left
}).fadeIn(100);
// Prevent text selection in IE
selector.bind('selectstart', function() { return false; });
selector.on('selectstart', function() { return false; });
$(document).bind('mousedown.miniColors touchstart.miniColors', function(event) {
input.data('mousebutton', 1);
var testSubject = $(event.target).parents().andSelf();
if( testSubject.hasClass('miniColors-colors') ) {
event.preventDefault();
input.data('moving', 'colors');
moveColor(input, event);
}
if( testSubject.hasClass('miniColors-hues') ) {
event.preventDefault();
input.data('moving', 'hues');
moveHue(input, event);
}
if( testSubject.hasClass('miniColors-selector') ) {
event.preventDefault();
return;
}
if( testSubject.hasClass('miniColors') ) return;
hide(input);
});
// Hide on resize (IE7/8 trigger this when any element is resized...)
if( !$.browser.msie || ($.browser.msie && $.browser.version >= 9) ) {
$(window).on('resize.miniColors', function(event) {
hide(input);
});
}
$(document)
.bind('mouseup.miniColors touchend.miniColors', function(event) {
.on('mousedown.miniColors touchstart.miniColors', function(event) {
input.data('mousebutton', 1);
var testSubject = $(event.target).parents().andSelf();
if( testSubject.hasClass('miniColors-colors') ) {
event.preventDefault();
input.data('moving', 'colors');
moveColor(input, event);
}
if( testSubject.hasClass('miniColors-hues') ) {
event.preventDefault();
input.data('moving', 'hues');
moveHue(input, event);
}
if( testSubject.hasClass('miniColors-opacity') ) {
event.preventDefault();
input.data('moving', 'opacity');
moveOpacity(input, event);
}
if( testSubject.hasClass('miniColors-selector') ) {
event.preventDefault();
return;
}
if( testSubject.hasClass('miniColors') ) return;
hide(input);
})
.on('mouseup.miniColors touchend.miniColors', function(event) {
event.preventDefault();
input.data('mousebutton', 0).removeData('moving');
})
.bind('mousemove.miniColors touchmove.miniColors', function(event) {
.on('mousemove.miniColors touchmove.miniColors', function(event) {
event.preventDefault();
if( input.data('mousebutton') === 1 ) {
if( input.data('moving') === 'colors' ) moveColor(input, event);
if( input.data('moving') === 'hues' ) moveHue(input, event);
if( input.data('moving') === 'opacity' ) moveOpacity(input, event);
}
});
// Fire open callback
if( input.data('open') ) {
input.data('open').call(input.get(0), '#' + hsb2hex(hsb), hsb2rgb(hsb));
input.data('open').call(input.get(0), '#' + hsb2hex(hsb), $.extend(hsb2rgb(hsb), { a: parseFloat(input.attr('data-opacity')) }));
}
};
@ -231,22 +283,22 @@ if(jQuery) (function($) {
//
// Hide all other instances if input isn't specified
if( !input ) input = '.miniColors';
if( !input ) input = $('.miniColors');
$(input).each( function() {
input.each( function() {
var selector = $(this).data('selector');
$(this).removeData('selector');
$(selector).fadeOut(100, function() {
// Fire close callback
if( input.data('close') ) {
var hsb = input.data('hsb'), hex = hsb2hex(hsb);
input.data('close').call(input.get(0), '#' + hex, hsb2rgb(hsb));
input.data('close').call(input.get(0), '#' + hex, $.extend(hsb2rgb(hsb), { a: parseFloat(input.attr('data-opacity')) }));
}
$(this).remove();
});
});
$(document).unbind('.miniColors');
$(document).off('.miniColors');
};
@ -266,8 +318,8 @@ if(jQuery) (function($) {
position.x = event.originalEvent.changedTouches[0].pageX;
position.y = event.originalEvent.changedTouches[0].pageY;
}
position.x = position.x - input.data('selector').find('.miniColors-colors').offset().left - 5;
position.y = position.y - input.data('selector').find('.miniColors-colors').offset().top - 5;
position.x = position.x - input.data('selector').find('.miniColors-colors').offset().left - 6;
position.y = position.y - input.data('selector').find('.miniColors-colors').offset().top - 6;
if( position.x <= -5 ) position.x = -5;
if( position.x >= 144 ) position.x = 144;
if( position.y <= -5 ) position.y = -5;
@ -301,23 +353,21 @@ if(jQuery) (function($) {
huePicker.hide();
var position = {
y: event.pageY
};
var position = event.pageY;
// Touch support
if( event.originalEvent.changedTouches ) {
position.y = event.originalEvent.changedTouches[0].pageY;
position = event.originalEvent.changedTouches[0].pageY;
}
position.y = position.y - input.data('selector').find('.miniColors-colors').offset().top - 1;
if( position.y <= -1 ) position.y = -1;
if( position.y >= 149 ) position.y = 149;
position = position - input.data('selector').find('.miniColors-colors').offset().top - 1;
if( position <= -1 ) position = -1;
if( position >= 149 ) position = 149;
input.data('huePosition', position);
huePicker.css('top', position.y).show();
huePicker.css('top', position).show();
// Calculate hue
var h = Math.round((150 - position.y - 1) * 2.4);
var h = Math.round((150 - position - 1) * 2.4);
if( h < 0 ) h = 0;
if( h > 360 ) h = 360;
@ -330,18 +380,65 @@ if(jQuery) (function($) {
};
var moveOpacity = function(input, event) {
var opacityPicker = input.data('opacityPicker');
opacityPicker.hide();
var position = event.pageY;
// Touch support
if( event.originalEvent.changedTouches ) {
position = event.originalEvent.changedTouches[0].pageY;
}
position = position - input.data('selector').find('.miniColors-colors').offset().top - 1;
if( position <= -1 ) position = -1;
if( position >= 149 ) position = 149;
input.data('opacityPosition', position);
opacityPicker.css('top', position).show();
// Calculate opacity
var alpha = parseFloat((150 - position - 1) / 150).toFixed(2);
if( alpha < 0 ) alpha = 0;
if( alpha > 1 ) alpha = 1;
// Update opacity
input
.data('alpha', alpha)
.attr('data-opacity', alpha);
// Set color
setColor(input, input.data('hsb'), true);
};
var setColor = function(input, hsb, updateInput) {
input.data('hsb', hsb);
var hex = hsb2hex(hsb);
var hex = hsb2hex(hsb),
selector = $(input.data('selector'));
if( updateInput ) input.val( '#' + convertCase(hex, input.data('letterCase')) );
selector
.find('.miniColors-colors').css('backgroundColor', '#' + hsb2hex({ h: hsb.h, s: 100, b: 100 })).end()
.find('.miniColors-opacity').css('backgroundColor', '#' + hex).end();
var rgb = hsb2rgb(hsb);
// Set background color (also fallback for non RGBA browsers)
input.data('trigger').css('backgroundColor', '#' + hex);
if( input.data('selector') ) input.data('selector').find('.miniColors-colors').css('backgroundColor', '#' + hsb2hex({ h: hsb.h, s: 100, b: 100 }));
// Set background color + opacity
if( input.data('opacity') ) {
input.data('trigger').css('backgroundColor', 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + input.attr('data-opacity') + ')');
}
// Fire change callback
if( input.data('change') ) {
if( hex === input.data('lastChange') ) return;
input.data('change').call(input.get(0), '#' + hex, hsb2rgb(hsb));
input.data('lastChange', hex);
if( (hex + ',' + input.attr('data-opacity')) === input.data('lastChange') ) return;
input.data('change').call(input.get(0), '#' + hex, $.extend(hsb2rgb(hsb), { a: parseFloat(input.attr('data-opacity')) }));
input.data('lastChange', hex + ',' + input.attr('data-opacity'));
}
};
@ -355,10 +452,6 @@ if(jQuery) (function($) {
// Get HSB equivalent
var hsb = hex2hsb(hex);
// If color is the same, no change required
var currentHSB = input.data('hsb');
if( hsb.h === currentHSB.h && hsb.s === currentHSB.s && hsb.b === currentHSB.b ) return true;
// Set colorPicker position
var colorPosition = getColorPositionFromHSB(hsb);
var colorPicker = $(input.data('colorPicker'));
@ -368,9 +461,14 @@ if(jQuery) (function($) {
// Set huePosition position
var huePosition = getHuePositionFromHSB(hsb);
var huePicker = $(input.data('huePicker'));
huePicker.css('top', huePosition.y + 'px');
huePicker.css('top', huePosition + 'px');
input.data('huePosition', huePosition);
// Set opacity position
var opacityPosition = getOpacityPositionFromAlpha(input.attr('data-opacity'));
var opacityPicker = $(input.data('opacityPicker'));
opacityPicker.css('top', opacityPosition + 'px');
input.data('opacityPosition', opacityPosition);
setColor(input, hsb);
return true;
@ -378,9 +476,11 @@ if(jQuery) (function($) {
};
var convertCase = function(string, letterCase) {
if( letterCase === 'lowercase' ) return string.toLowerCase();
if( letterCase === 'uppercase' ) return string.toUpperCase();
return string;
if( letterCase === 'uppercase' ) {
return string.toUpperCase();
} else {
return string.toLowerCase();
}
};
var getColorPositionFromHSB = function(hsb) {
@ -397,7 +497,14 @@ if(jQuery) (function($) {
var y = 150 - (hsb.h / 2.4);
if( y < 0 ) h = 0;
if( y > 150 ) h = 150;
return { y: y - 1 };
return y;
};
var getOpacityPositionFromAlpha = function(alpha) {
var y = 150 * alpha;
if( y < 0 ) y = 0;
if( y > 150 ) y = 150;
return 150 - y;
};
var cleanHex = function(hex) {
@ -542,6 +649,29 @@ if(jQuery) (function($) {
});
return $(this);
case 'opacity':
// Getter
if( data === undefined ) {
if( !$(this).hasClass('miniColors') ) return;
if( $(this).data('opacity') ) {
return parseFloat($(this).attr('data-opacity'));
} else {
return null;
}
}
// Setter
$(this).each( function() {
if( !$(this).hasClass('miniColors') ) return;
if( data < 0 ) data = 0;
if( data > 1 ) data = 1;
$(this).attr('data-opacity', data).data('alpha', data);
setColorFromInput($(this));
});
return $(this);
case 'destroy':

4
3rdparty/miniColors/js/jquery.miniColors.min.js vendored
View File

File diff suppressed because one or more lines are too long