Mercurial > hg > digilib
changeset 1380:3eb2d1cda56d
measure: color picker for line colors
| author | hertzhaft |
|---|---|
| date | Sun, 01 Mar 2015 09:25:43 +0100 |
| parents | 1705efc79498 |
| children | c7991547e461 |
| files | webapp/src/main/webapp/jquery/jquery-test-measure.html webapp/src/main/webapp/jquery/jquery.colorPicker.js webapp/src/main/webapp/jquery/jquery.digilib.measure.css webapp/src/main/webapp/jquery/jquery.digilib.measure.js |
| diffstat | 4 files changed, 336 insertions(+), 2 deletions(-) [+] |
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery-test-measure.html Sat Feb 28 15:17:41 2015 +0100 +++ b/webapp/src/main/webapp/jquery/jquery-test-measure.html Sun Mar 01 09:25:43 2015 +0100 @@ -19,6 +19,7 @@ <link rel="stylesheet" type="text/css" href="jquery.digilib.css"></link> <link rel="stylesheet" type="text/css" href="jquery.digilib.measure.css"></link> <script type="text/javascript" src="jquery.digilib.vector.js"></script> + <script type="text/javascript" src="jquery.colorPicker.js"></script> <script type="text/javascript" src="jquery.digilib.measure.js" charset="utf-8"></script> <script type="text/javascript">
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/webapp/src/main/webapp/jquery/jquery.colorPicker.js Sun Mar 01 09:25:43 2015 +0100 @@ -0,0 +1,278 @@ +/** + * Really Simple Color Picker in jQuery + * + * Licensed under the MIT (MIT-LICENSE.txt) licenses. + * + * Copyright (c) 2008-2012 + * Lakshan Perera (www.laktek.com) & Daniel Lacy (daniellacy.com) + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to + * deal in the Software without restriction, including without limitation the + * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or + * sell copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS + * IN THE SOFTWARE. + */ + +(function ($) { + /** + * Create a couple private variables. + **/ + var selectorOwner, + activePalette, + cIterate = 0, + templates = { + palette : $('<div id="colorPicker_palette" class="colorPicker-palette" />'), + swatch : $('<div class="colorPicker-swatch"> </div>'), + hexField : $('<input type="text" id="colorPicker_hex" />') + }, + transparent = "transparent", + lastColor; + + /** + * Create our colorPicker function + **/ + $.fn.colorPicker = function (options) { + return this.each(function () { + // Setup time. Clone new elements from our templates, set some IDs, make shortcuts, jazzercise. + var element = $(this), + opts = $.extend({}, $.fn.colorPicker.defaults, options), + defaultColor = $.fn.colorPicker.toHex(opts.pickerDefault), + newPalette = templates.palette.clone().attr('id', 'colorPicker_palette-' + cIterate), + newHexField = templates.hexField.clone(), + paletteId = newPalette[0].id, + swatch, controlText; + + /** + * Build a color palette. + **/ + $.each(opts.colors, function (i) { + swatch = templates.swatch.clone(); + if (opts.colors[i] === transparent) { + swatch.addClass(transparent).text('X'); + $.fn.colorPicker.bindPalette(newHexField, swatch, transparent); + } else { + swatch.css("background-color", "#" + this); + $.fn.colorPicker.bindPalette(newHexField, swatch); + } + swatch.appendTo(newPalette); + }); + newHexField.attr({ + 'id' : 'colorPicker_hex-' + cIterate, + 'value' : defaultColor + }); + newHexField.on("keydown", function (event) { + if (event.keyCode === 13) { + var hexColor = $.fn.colorPicker.toHex($(this).val()); + $.fn.colorPicker.changeColor(hexColor); + } + if (event.keyCode === 27) { + $.fn.colorPicker.hidePalette(); + } + }); + newHexField.on("keyup", function (event) { + var hexColor = $.fn.colorPicker.toHex($(event.target).val()); + $.fn.colorPicker.previewColor(hexColor); + }); + $('<div class="colorPicker_hexWrap" />').appendTo(newPalette); + newPalette.find('.colorPicker_hexWrap').append(newHexField); + if (opts.showHexField === false) { + newHexField.hide(); + } + newPalette.on("click", function () { + $.fn.colorPicker.hidePalette(); + }); + $("body").append(newPalette); + newPalette.hide(); + element.css("background-color", defaultColor); + element.on("click", function () { + if( element.is( ':not(:disabled)' ) ) { + $.fn.colorPicker.togglePalette($('#' + paletteId), $(this)); + } + }); + if( options && options.onColorChange ) { + element.data('onColorChange', options.onColorChange); + } else { + element.data('onColorChange', function() {} ); + } + cIterate++; + }); + }; + + /** + * Extend colorPicker with... all our functionality. + **/ + $.extend(true, $.fn.colorPicker, { + /** + * Return a Hex color, convert an RGB value and return Hex, or return false. + * + * Inspired by http://code.google.com/p/jquery-color-utils + **/ + toHex : function (color) { + // If we have a standard or shorthand Hex color, return that value. + if (color.match(/[0-9A-F]{6}|[0-9A-F]{3}$/i)) { + return (color.charAt(0) === "#") ? color : ("#" + color); + // Alternatively, check for RGB color, then convert and return it as Hex. + } else if (color.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/)) { + var c = ([parseInt(RegExp.$1, 10), parseInt(RegExp.$2, 10), parseInt(RegExp.$3, 10)]), + pad = function (str) { + if (str.length < 2) { + for (var i = 0, len = 2 - str.length; i < len; i++) { + str = '0' + str; + } + } + return str; + }; + if (c.length === 3) { + var r = pad(c[0].toString(16)), + g = pad(c[1].toString(16)), + b = pad(c[2].toString(16)); + return '#' + r + g + b; + } + // Otherwise we wont do anything. + } else { + return color; + } + }, + + /** + * Check whether user clicked on the selector or owner. + **/ + checkMouse : function (event, paletteId) { + var selector = activePalette, + selectorParent = $(event.target).parents("#" + selector.attr('id')).length; + if (event.target === $(selector)[0] || event.target === selectorOwner[0] || selectorParent > 0) { + return; + } + $.fn.colorPicker.hidePalette(); + }, + + /** + * Hide the color palette modal. + **/ + hidePalette : function () { + $(document).unbind("mousedown", $.fn.colorPicker.checkMouse); + $('.colorPicker-palette').hide(); + }, + + /** + * Show the color palette modal. + **/ + showPalette : function (palette) { + var hexColor = selectorOwner.prev("input").val(); + palette.css({ + top : selectorOwner.offset().top + (selectorOwner.outerHeight()), + left : selectorOwner.offset().left + }); + $("#color_value").val(hexColor); + palette.show(); + $(document).bind("mousedown", $.fn.colorPicker.checkMouse); + }, + + /** + * Toggle visibility of the colorPicker palette. + **/ + togglePalette : function (palette, origin) { + // selectorOwner is the clicked .colorPicker-picker. + if (origin) { + selectorOwner = origin; + } + activePalette = palette; + if (activePalette.is(':visible')) { + $.fn.colorPicker.hidePalette(); + } else { + $.fn.colorPicker.showPalette(palette); + } + }, + + /** + * Update the input with a newly selected color. + **/ + changeColor : function (value) { + selectorOwner.css("background-color", value); + $.fn.colorPicker.hidePalette(); + var callback = selectorOwner.data('onColorChange'); + callback(value); + }, + + + /** + * Preview the input with a newly selected color. + **/ + previewColor : function (value) { + selectorOwner.css("background-color", value); + }, + + /** + * Bind events to the color palette swatches. + */ + bindPalette : function (paletteInput, element, color) { + color = color ? color : $.fn.colorPicker.toHex(element.css("background-color")); + + element.bind({ + click : function (ev) { + lastColor = color; + $.fn.colorPicker.changeColor(color); + }, + mouseover : function (ev) { + lastColor = paletteInput.val(); + $(this).css("border-color", "#598FEF"); + paletteInput.val(color); + paletteInput.css("background-color", color); + $.fn.colorPicker.previewColor(color); + }, + mouseout : function (ev) { + $(this).css("border-color", "#000"); + paletteInput.val(lastColor); + paletteInput.css("background-color", lastColor); + $.fn.colorPicker.previewColor(lastColor); + } + }); + } + }); + + /** + * Default colorPicker options. + * + * These are publibly available for global modification using a setting such as: + * + * $.fn.colorPicker.defaults.colors = ['151337', '111111'] + * + * They can also be applied on a per-bound element basis like so: + * + * $('#element1').colorPicker({pickerDefault: 'efefef', transparency: true}); + * $('#element2').colorPicker({pickerDefault: '333333', colors: ['333333', '111111']}); + * + **/ + $.fn.colorPicker.defaults = { + // colorPicker default selected color. + pickerDefault : "FFFFFF", + + // Default color set. + colors : [ + '000000', '993300', '333300', '000080', '333399', '333333', '800000', 'FF6600', + '808000', '008000', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', + '99CC00', '339966', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', + 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', 'FF99CC', 'FFCC99', + 'FFFF99', 'CCFFFF', '99CCFF', 'FFFFFF' + ], + + // If we want to simply add more colors to the default set, use addColors. + addColors : [], + + // Show hex field + showHexField : true + }; + +})(jQuery);
--- a/webapp/src/main/webapp/jquery/jquery.digilib.measure.css Sat Feb 28 15:17:41 2015 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.measure.css Sun Mar 01 09:25:43 2015 +0100 @@ -129,3 +129,43 @@ border: 1px solid darkgray; background-color: darkgray; } + +div.colorPicker-palette { + width: 140px; + position: absolute; + border: 1px solid grey; + border-radius: 10px; + background-color: silver; + padding: 5px; + z-index: 9999; +} + +div.colorPicker_hexWrap { + width: 100%; + float:left +} + +div.colorPicker_hexWrap label { + font-size: 90%; + color: #2F2F2F; + margin: 5px 2px; + width: 25% +} + +div.colorPicker_hexWrap input { + font-size: 90%; + margin: 5px 2px; + padding: 0; + width: 100px; + border: 1px solid #000; +} + +div.colorPicker-swatch { + height: 12px; + width: 12px; + border: 1px solid #000; + margin: 1px; + float: left; + cursor: pointer; + line-height: 12px; +}
--- a/webapp/src/main/webapp/jquery/jquery.digilib.measure.js Sat Feb 28 15:17:41 2015 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.measure.js Sun Mar 01 09:25:43 2015 +0100 @@ -1298,8 +1298,6 @@ var axis1 = side1.parallel(mid0); // long axis var maxDiam = axis0.length()-1; // maximal diameter for small circles var handle = axis1.perpendicularPoint(p[3]); // drag point projected on long axis - - console.debug(handle.distance(mid2), maxDiam); if (handle.distance(mid0) > axis1.length()) { // constrain handle handle.moveTo(mid2); } else if (handle.distance(mid2) > maxDiam) { @@ -1371,6 +1369,23 @@ $head.append($lineStyles); data.settings.$lineStyles = $lineStyles; updateLineStyles(data); + var widget = data.measureWidgets; + if ($.fn.colorPicker == null) { + return; } + var styleName = data.settings.implementedStyles; + var style = data.settings.styles; + var setupColorPicker = function(i, item) { + var changeStroke = function(color) { + style[item].stroke = color; + updateLineStyles(data); + }; + var w = widget[item+'color']; + w.colorPicker({ + pickerDefault : style[item].stroke, + onColorChange : changeStroke + }); + }; + $.each(styleName, setupColorPicker); }; var setupMeasureBar = function(data) {