# HG changeset patch
# User hertzhaft
# Date 1425198343 -3600
# Node ID 3eb2d1cda56d6fd8136109d382cdc9f66855dc86
# Parent  1705efc794987f080c23c1c745339825956f99c6
measure: color picker for line colors

diff -r 1705efc79498 -r 3eb2d1cda56d webapp/src/main/webapp/jquery/jquery-test-measure.html
--- 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">
diff -r 1705efc79498 -r 3eb2d1cda56d webapp/src/main/webapp/jquery/jquery.colorPicker.js
--- /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">&nbsp;</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);
diff -r 1705efc79498 -r 3eb2d1cda56d webapp/src/main/webapp/jquery/jquery.digilib.measure.css
--- 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;
+}
diff -r 1705efc79498 -r 3eb2d1cda56d webapp/src/main/webapp/jquery/jquery.digilib.measure.js
--- 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) {