diff options
Diffstat (limited to 'www/wiki/extensions/Maps/resources/WikitextEditor/js/jquery.miniColors.js')
| -rw-r--r-- | www/wiki/extensions/Maps/resources/WikitextEditor/js/jquery.miniColors.js | 567 |
1 files changed, 567 insertions, 0 deletions
diff --git a/www/wiki/extensions/Maps/resources/WikitextEditor/js/jquery.miniColors.js b/www/wiki/extensions/Maps/resources/WikitextEditor/js/jquery.miniColors.js new file mode 100644 index 00000000..dfbce542 --- /dev/null +++ b/www/wiki/extensions/Maps/resources/WikitextEditor/js/jquery.miniColors.js @@ -0,0 +1,567 @@ +/* + * jQuery miniColors: A small color selector + * + * Copyright 2011 Cory LaViska for A Beautiful Site, LLC. (http://abeautifulsite.net/) + * + * Dual licensed under the MIT or GPL Version 2 licenses + * +*/ +if(jQuery) (function($) { + + $.extend($.fn, { + + miniColors: function(o, data) { + + var create = function(input, o, data) { + // + // Creates a new instance of the miniColors selector + // + + // Determine initial color (defaults to white) + var color = expandHex(input.val()); + if( !color ) color = 'ffffff'; + var hsb = hex2hsb(color); + + // Create trigger + var trigger = $('<a class="miniColors-trigger" style="background-color: #' + color + '" href="#"></a>'); + trigger.insertAfter(input); + + // 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('trigger', trigger) + .data('hsb', hsb) + .data('change', o.change ? o.change : null) + .attr('maxlength', 7) + .attr('autocomplete', 'off') + .val('#' + convertCase(color, o.letterCase)); + + // Handle options + if( o.readonly ) input.prop('readonly', true); + if( o.disabled ) disable(input); + + // Show selector when trigger is clicked + trigger.bind('click.miniColors', function(event) { + event.preventDefault(); + if( input.val() === '' ) input.val('#'); + show(input); + + }); + + // Show selector when input receives focus + input.bind('focus.miniColors', function(event) { + if( input.val() === '' ) input.val('#'); + show(input); + }); + + // Hide on blur + input.bind('blur.miniColors', function(event) { + var hex = expandHex(input.val()); + input.val( hex ? '#' + convertCase(hex, input.data('letterCase')) : '' ); + }); + + // Hide when tabbing out of the input + input.bind('keydown.miniColors', function(event) { + if( event.keyCode === 9 ) hide(input); + }); + + // Update when color is typed in + input.bind('keyup.miniColors', function(event) { + setColorFromInput(input); + }); + + // Handle pasting + input.bind('paste.miniColors', function(event) { + // Short pause to wait for paste to complete + setTimeout( function() { + setColorFromInput(input); + }, 5); + }); + + }; + + var destroy = function(input) { + // + // Destroys an active instance of the miniColors selector + // + + hide(); + input = $(input); + + // Restore to original state + input.data('trigger').remove(); + input + .attr('autocomplete', input.data('original-autocomplete')) + .attr('maxlength', input.data('original-maxlength')) + .removeData() + .removeClass('miniColors') + .unbind('.miniColors'); + $(document).unbind('.miniColors'); + }; + + var enable = function(input) { + // + // Enables the input control and the selector + // + input + .prop('disabled', false) + .data('trigger') + .css('opacity', 1); + }; + + var disable = function(input) { + // + // Disables the input control and the selector + // + hide(input); + input + .prop('disabled', true) + .data('trigger') + .css('opacity', 0.5); + }; + + var show = function(input) { + // + // Shows the miniColors selector + // + if( input.prop('disabled') ) return false; + + // 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></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' + }) + .addClass( input.attr('class') ); + + // Set background for colors + var hsb = input.data('hsb'); + selector + .find('.miniColors-colors') + .css('backgroundColor', '#' + hsb2hex({ h: hsb.h, s: 100, b: 100 })); + + // Set colorPicker position + var colorPosition = input.data('colorPosition'); + if( !colorPosition ) colorPosition = getColorPositionFromHSB(hsb); + selector.find('.miniColors-colorPicker') + .css('top', colorPosition.y + 'px') + .css('left', colorPosition.x + 'px'); + + // Set huePicker position + var huePosition = input.data('huePosition'); + if( !huePosition ) huePosition = getHuePositionFromHSB(hsb); + selector.find('.miniColors-huePicker').css('top', huePosition.y + 'px'); + + // Set input data + input + .data('selector', selector) + .data('huePicker', selector.find('.miniColors-huePicker')) + .data('colorPicker', selector.find('.miniColors-colorPicker')) + .data('mousebutton', 0); + + $('BODY').append(selector); + selector.fadeIn(100); + + // Prevent text selection in IE + selector.bind('selectstart', function() { return false; }); + + $(document).bind('mousedown.miniColors touchstart.miniColors', function(event) { + + input.data('mousebutton', 1); + + if( $(event.target).parents().andSelf().hasClass('miniColors-colors') ) { + event.preventDefault(); + input.data('moving', 'colors'); + moveColor(input, event); + } + + if( $(event.target).parents().andSelf().hasClass('miniColors-hues') ) { + event.preventDefault(); + input.data('moving', 'hues'); + moveHue(input, event); + } + + if( $(event.target).parents().andSelf().hasClass('miniColors-selector') ) { + event.preventDefault(); + return; + } + + if( $(event.target).parents().andSelf().hasClass('miniColors') ) return; + + hide(input); + }); + + $(document) + .bind('mouseup.miniColors touchend.miniColors', function(event) { + event.preventDefault(); + input.data('mousebutton', 0).removeData('moving'); + }) + .bind('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); + } + }); + + }; + + var hide = function(input) { + + // + // Hides one or more miniColors selectors + // + + // Hide all other instances if input isn't specified + if( !input ) input = '.miniColors'; + + $(input).each( function() { + var selector = $(this).data('selector'); + $(this).removeData('selector'); + $(selector).fadeOut(100, function() { + $(this).remove(); + }); + }); + + $(document).unbind('.miniColors'); + + }; + + var moveColor = function(input, event) { + + var colorPicker = input.data('colorPicker'); + + colorPicker.hide(); + + var position = { + x: event.pageX, + y: event.pageY + }; + + // Touch support + if( event.originalEvent.changedTouches ) { + 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; + if( position.x <= -5 ) position.x = -5; + if( position.x >= 144 ) position.x = 144; + if( position.y <= -5 ) position.y = -5; + if( position.y >= 144 ) position.y = 144; + + input.data('colorPosition', position); + colorPicker.css('left', position.x).css('top', position.y).show(); + + // Calculate saturation + var s = Math.round((position.x + 5) * 0.67); + if( s < 0 ) s = 0; + if( s > 100 ) s = 100; + + // Calculate brightness + var b = 100 - Math.round((position.y + 5) * 0.67); + if( b < 0 ) b = 0; + if( b > 100 ) b = 100; + + // Update HSB values + var hsb = input.data('hsb'); + hsb.s = s; + hsb.b = b; + + // Set color + setColor(input, hsb, true); + }; + + var moveHue = function(input, event) { + + var huePicker = input.data('huePicker'); + + huePicker.hide(); + + var position = { + y: event.pageY + }; + + // Touch support + if( event.originalEvent.changedTouches ) { + position.y = 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; + input.data('huePosition', position); + huePicker.css('top', position.y).show(); + + // Calculate hue + var h = Math.round((150 - position.y - 1) * 2.4); + if( h < 0 ) h = 0; + if( h > 360 ) h = 360; + + // Update HSB values + var hsb = input.data('hsb'); + hsb.h = h; + + // Set color + setColor(input, hsb, true); + + }; + + var setColor = function(input, hsb, updateInput) { + input.data('hsb', hsb); + var hex = hsb2hex(hsb); + if( updateInput ) input.val( '#' + convertCase(hex, input.data('letterCase')) ); + 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 })); + + // 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); + } + + }; + + var setColorFromInput = function(input) { + + input.val('#' + cleanHex(input.val())); + var hex = expandHex(input.val()); + if( !hex ) return false; + + // 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')); + colorPicker.css('top', colorPosition.y + 'px').css('left', colorPosition.x + 'px'); + input.data('colorPosition', colorPosition); + + // Set huePosition position + var huePosition = getHuePositionFromHSB(hsb); + var huePicker = $(input.data('huePicker')); + huePicker.css('top', huePosition.y + 'px'); + input.data('huePosition', huePosition); + + setColor(input, hsb); + + return true; + + }; + + var convertCase = function(string, letterCase) { + if( letterCase === 'lowercase' ) return string.toLowerCase(); + if( letterCase === 'uppercase' ) return string.toUpperCase(); + return string; + }; + + var getColorPositionFromHSB = function(hsb) { + var x = Math.ceil(hsb.s / 0.67); + if( x < 0 ) x = 0; + if( x > 150 ) x = 150; + var y = 150 - Math.ceil(hsb.b / 0.67); + if( y < 0 ) y = 0; + if( y > 150 ) y = 150; + return { x: x - 5, y: y - 5 }; + }; + + var getHuePositionFromHSB = function(hsb) { + var y = 150 - (hsb.h / 2.4); + if( y < 0 ) h = 0; + if( y > 150 ) h = 150; + return { y: y - 1 }; + }; + + var cleanHex = function(hex) { + return hex.replace(/[^A-F0-9]/ig, ''); + }; + + var expandHex = function(hex) { + hex = cleanHex(hex); + if( !hex ) return null; + if( hex.length === 3 ) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; + return hex.length === 6 ? hex : null; + }; + + var hsb2rgb = function(hsb) { + var rgb = {}; + var h = Math.round(hsb.h); + var s = Math.round(hsb.s*255/100); + var v = Math.round(hsb.b*255/100); + if(s === 0) { + rgb.r = rgb.g = rgb.b = v; + } else { + var t1 = v; + var t2 = (255 - s) * v / 255; + var t3 = (t1 - t2) * (h % 60) / 60; + if( h === 360 ) h = 0; + if( h < 60 ) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3; } + else if( h < 120 ) {rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3; } + else if( h < 180 ) {rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3; } + else if( h < 240 ) {rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3; } + else if( h < 300 ) {rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3; } + else if( h < 360 ) {rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3; } + else { rgb.r = 0; rgb.g = 0; rgb.b = 0; } + } + return { + r: Math.round(rgb.r), + g: Math.round(rgb.g), + b: Math.round(rgb.b) + }; + }; + + var rgb2hex = function(rgb) { + var hex = [ + rgb.r.toString(16), + rgb.g.toString(16), + rgb.b.toString(16) + ]; + $.each(hex, function(nr, val) { + if (val.length === 1) hex[nr] = '0' + val; + }); + return hex.join(''); + }; + + var hex2rgb = function(hex) { + hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16); + + return { + r: hex >> 16, + g: (hex & 0x00FF00) >> 8, + b: (hex & 0x0000FF) + }; + }; + + var rgb2hsb = function(rgb) { + var hsb = { h: 0, s: 0, b: 0 }; + var min = Math.min(rgb.r, rgb.g, rgb.b); + var max = Math.max(rgb.r, rgb.g, rgb.b); + var delta = max - min; + hsb.b = max; + hsb.s = max !== 0 ? 255 * delta / max : 0; + if( hsb.s !== 0 ) { + if( rgb.r === max ) { + hsb.h = (rgb.g - rgb.b) / delta; + } else if( rgb.g === max ) { + hsb.h = 2 + (rgb.b - rgb.r) / delta; + } else { + hsb.h = 4 + (rgb.r - rgb.g) / delta; + } + } else { + hsb.h = -1; + } + hsb.h *= 60; + if( hsb.h < 0 ) { + hsb.h += 360; + } + hsb.s *= 100/255; + hsb.b *= 100/255; + return hsb; + }; + + var hex2hsb = function(hex) { + var hsb = rgb2hsb(hex2rgb(hex)); + // Zero out hue marker for black, white, and grays (saturation === 0) + if( hsb.s === 0 ) hsb.h = 360; + return hsb; + }; + + var hsb2hex = function(hsb) { + return rgb2hex(hsb2rgb(hsb)); + }; + + + // Handle calls to $([selector]).miniColors() + switch(o) { + + case 'readonly': + + $(this).each( function() { + if( !$(this).hasClass('miniColors') ) return; + $(this).prop('readonly', data); + }); + + return $(this); + + case 'disabled': + + $(this).each( function() { + if( !$(this).hasClass('miniColors') ) return; + if( data ) { + disable($(this)); + } else { + enable($(this)); + } + }); + + return $(this); + + case 'value': + + // Getter + if( data === undefined ) { + if( !$(this).hasClass('miniColors') ) return; + var input = $(this), + hex = expandHex(input.val()); + return hex ? '#' + convertCase(hex, input.data('letterCase')) : null; + } + + // Setter + $(this).each( function() { + if( !$(this).hasClass('miniColors') ) return; + $(this).val(data); + setColorFromInput($(this)); + }); + + return $(this); + + case 'destroy': + + $(this).each( function() { + if( !$(this).hasClass('miniColors') ) return; + destroy($(this)); + }); + + return $(this); + + default: + + if( !o ) o = {}; + + $(this).each( function() { + + // Must be called on an input element + if( $(this)[0].tagName.toLowerCase() !== 'input' ) return; + + // If a trigger is present, the control was already created + if( $(this).data('trigger') ) return; + + // Create the control + create($(this), o, data); + + }); + + return $(this); + + } + + } + + }); + +})(jQuery);
\ No newline at end of file |