# HG changeset patch
# User robcast
# Date 1331309414 -3600
# Node ID ef94924cc0c42285598f56d5581c54fc9cf7d7a1
# Parent  7c8ac6fb14cea5031d169843aeed0d1baa719cd5
experiment with jquery.range.js for brightness slider.

diff -r 7c8ac6fb14ce -r ef94924cc0c4 webapp/src/main/webapp/jquery/digilib.html
--- a/webapp/src/main/webapp/jquery/digilib.html	Thu Mar 08 10:25:54 2012 +0100
+++ b/webapp/src/main/webapp/jquery/digilib.html	Fri Mar 09 17:10:14 2012 +0100
@@ -16,8 +16,10 @@
         <script type="text/javascript" src="jquery.digilib.js"></script>
         <script type="text/javascript" src="jquery.digilib.geometry.js"></script>
         <script type="text/javascript" src="jquery.digilib.arrows.js"></script>
+        <script type="text/javascript" src="jquery.range.js"></script>
+        <link rel="stylesheet" type="text/css" href="jquery.range.css" />
         <script type="text/javascript" src="jquery.digilib.buttons.js"></script>
-        <script type="text/javascript" src="jquery.digilib.sliders.js"></script>
+        <!-- <script type="text/javascript" src="jquery.digilib.sliders.js"></script> -->
         <script type="text/javascript" src="jquery.digilib.birdseye.js"></script>
         <script type="text/javascript" src="jquery.digilib.marks.js"></script>
         <script type="text/javascript" src="jquery.digilib.regions.js"></script>
@@ -28,7 +30,6 @@
                 var opts = {
                     interactionMode : 'fullscreen',
                     showRegionNumbers : true,
-                    autoRegionLinks : true
                     };
                 var $div = $('div#digilib');
                 $div.digilib(opts);
diff -r 7c8ac6fb14ce -r ef94924cc0c4 webapp/src/main/webapp/jquery/img/range-rail-x.png
Binary file webapp/src/main/webapp/jquery/img/range-rail-x.png has changed
diff -r 7c8ac6fb14ce -r ef94924cc0c4 webapp/src/main/webapp/jquery/img/range-thumb.png
Binary file webapp/src/main/webapp/jquery/img/range-thumb.png has changed
diff -r 7c8ac6fb14ce -r ef94924cc0c4 webapp/src/main/webapp/jquery/jquery.digilib.buttons.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js	Thu Mar 08 10:25:54 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js	Fri Mar 09 17:10:14 2012 +0100
@@ -83,7 +83,8 @@
             icon : "rotate.png"
             },
         brgt : {
-            onclick : "brightness",
+            //onclick : "brightness",
+            onclick : "sliderBrgt",
             tooltip : "set brightness",
             icon : "brightness.png"
             },
@@ -245,7 +246,61 @@
                     left : Math.abs(buttonRect.x - divRect.width - 4),
                     top : buttonRect.y + 4
                     });
-            }
+            },
+            
+            // shows brightness slider
+            sliderBrgt : function (data) {
+                var $elem = data.$elem;
+                var brgt = data.settings.brgt;
+                var cssPrefix = data.settings.cssPrefix;
+                var cssClass = cssPrefix + 'sliderNeu';
+                var sliderHtml = '\
+            <div class="'+cssClass+'" style="width:300px; background-color:white">\
+                <form class="'+cssClass+'">\
+                    <span>Brightness:</span>\
+                    <input type="range" class="'+cssClass+'range" name="brgt" min="-255" max="255" value="'+brgt+'"/>\
+                    <input type="text" class="'+cssClass+'text" name="brgt" size="3" value="'+brgt+'"/>\
+                    <br/>\
+                    <input class="'+cssClass+'cancel" type="button" value="Cancel"/><input type="submit" name="sub" value="Ok"/>\
+                </form>\
+            </div>';
+                var $slider = $(sliderHtml);
+                $elem.append($slider);
+                var $range = $slider.find('input.'+cssClass+'range');
+                var $text = $slider.find('input.'+cssClass+'text');
+                // fix non-HTML5 slider
+                if ($range.prop('type') !== 'range') {
+                    console.debug('fix input type=range');
+                    $range.range({change: function (val) {
+                        $range.trigger('change');
+                    }});
+                }
+                // connect slider and input
+                $range.on('change', function () {
+                    var val = $range.val();
+                    $text.val(val);
+                });
+                $text.on('change', function () {
+                    var val = $text.val();
+                    $range.val(val);
+                });
+                // handle submit
+                $slider.find('form').on('submit', function () {
+                    console.debug("brgt-form:", this, " sub=", this.sub);
+                    brgt = $text.val();
+                    digilib.actions.brightness(data, brgt);
+                    $slider.remove();
+                    return false;  
+                });
+                // handle cancel
+                $slider.find('.'+cssClass+'cancel').on('click', function () {
+                    $slider.remove();
+                });
+                $slider.fadeIn();
+                fn.centerOnScreen(data, $slider);
+            },
+
+
         };
 
     // plugin installation called by digilib on plugin object.
diff -r 7c8ac6fb14ce -r ef94924cc0c4 webapp/src/main/webapp/jquery/jquery.range.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/webapp/src/main/webapp/jquery/jquery.range.css	Fri Mar 09 17:10:14 2012 +0100
@@ -0,0 +1,27 @@
+.range-input {
+  position: relative;
+  height: 25px;
+}
+
+.range-rail {
+  background: url('img/range-rail-x.png') repeat-x 0 -2px;
+  height: 10px;
+}
+
+.range-selection {
+  position: absolute;
+  background: #aaa;
+  height: 3px;
+  top: 5px;
+  border-top: 1px solid #999;
+}
+
+.range-handle {
+  display: block;
+  position: absolute;
+  top: 0px;
+  background: url('img/range-thumb.png') no-repeat 0 -12px;
+  width:14px;
+  height: 26px;
+  border-radius: 10px;
+}
diff -r 7c8ac6fb14ce -r ef94924cc0c4 webapp/src/main/webapp/jquery/jquery.range.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/webapp/src/main/webapp/jquery/jquery.range.js	Fri Mar 09 17:10:14 2012 +0100
@@ -0,0 +1,285 @@
+/*
+ * jQuery.range - A tiny, easily styleable range selector
+ * Tom Moor, http://tommoor.com
+ * Copyright (c) 2011 Tom Moor
+ * MIT Licensed
+ * @version 1.0
+ */
+
+(function($){
+
+  var TinyRange = function(){
+    // locals
+    var options;
+    var $input;
+    var $rail;
+    var $handle;
+    var $handle2;
+    var $selection;
+    var $dragging;
+    var $original;
+    var jump;
+    var size;
+    var defaults = {
+      orientation: 'horizontal', // todo
+      range: false,
+      values: false,
+      snap: false,
+      change: null,
+      blur: null
+    };
+    
+    var jumpHandle = function(ev) {
+      ev.pageX = ev.pageX - $input.offset().left;
+      
+      // get closest handle
+      var x1 = $handle.position().left;
+      var dist = ev.pageX - x1;
+      
+      if($handle2){
+        var x2 = $handle2.position().left;
+        var dist2 = ev.pageX - x2;
+      }
+
+      // move towards click
+      if(!$handle2 || Math.abs(dist) < Math.abs(dist2) ){
+        if(dist > 0) moveHandle($handle, valueToPx(jump)+x1);
+        if(dist < 0) moveHandle($handle, -valueToPx(jump)+x1);
+      } else {
+        if(dist2 > 0) moveHandle($handle2, valueToPx(jump)+x2);
+        if(dist2 < 0) moveHandle($handle2, -valueToPx(jump)+x2);
+      }
+    }
+    
+    var moveHandle = function($h, p, update){
+
+      var boundR = $input.width()-size;
+      var boundL = 0;
+
+      if(options.range){
+        if($h[0] === $handle[0]){
+          boundR = $handle2.position().left;
+        } else {
+          boundL = $handle.position().left;
+        }
+      }
+      
+      if(p >= boundR){
+        p = boundR;
+      } else if(p <= boundL){
+        p = boundL;
+      }
+      
+      if(options.snap && p !== boundR){
+        var snapPx = valueToPx(options.snap);
+        p = Math.round(p/snapPx) * snapPx;
+      }
+      
+      $h.css({'left': p, 'position': 'absolute'});
+      if(options.range) updateSelection();
+      if(update !== false) updateValues();
+    }
+    
+    var dragStart = function(ev){
+      ev.stopPropagation();
+      ev.preventDefault();
+      
+      $dragging = $(this);
+    };
+    
+    var drag = function(ev){
+     
+      if($dragging){
+        ev.preventDefault();
+        var pos = ev.pageX - $input.offset().left;
+        
+        moveHandle($dragging, pos);
+      }
+    };
+    
+    var updateSelection = function(){
+    
+      var p = $handle.position().left;
+      var w = $handle2.position().left-p;
+      $selection.css({
+        'left': p, 
+        'width': w,
+        'position': 'absolute'
+      });
+    };
+    
+    var dragEnd = function(ev){
+      if($dragging){
+        $dragging = null;
+        if (options.blur == null) {
+          // send original blur event
+          $original.blur();
+        } else {
+          options.blur(options.values);
+        }
+      }
+    };
+    
+    var updateValues = function(){
+
+      var prev;
+      if(options.range){
+      
+        prev = options.values.slice(); // clone
+        options.values[0] = pxToValue($handle);
+        options.values[1] = pxToValue($handle2);
+        
+        // set value on original element
+        $original.val(options.values[0] +','+options.values[1]);
+      } else {
+      
+        prev = options.values;
+        options.values = pxToValue($handle);
+        
+        // set value on original element
+        $original.val(options.values);
+      }
+
+      if(options.values !== prev) {
+          if (options.change == null) {
+            // trigger original change event
+            $original.change();
+          } else {
+            options.change(options.values);
+          }
+      }
+    };
+    
+    var updateHandles = function(){
+
+      if (options.values){
+        if (options.range){
+          moveHandle($handle2, valueToPx(options.values[1]), false);
+          moveHandle($handle, valueToPx(options.values[0]), false);
+        } else {
+          moveHandle($handle, valueToPx(options.values), false);
+        }
+      }
+      
+      updateValues();
+    };
+    
+    var pxToValue = function($h){
+      var w = $input.width()-size;
+      var p = $h.position().left;
+      var v = (p/(w/(options.max-options.min)))+options.min;
+
+      if(options.snap) return Math.floor(v/options.snap) * options.snap;
+
+      return Math.round(v);
+    };
+    
+    var valueToPx = function(val){
+      var w = $input.width();
+      var v = (val*(w/(options.max-options.min)))-options.min;
+      
+      return v;
+    };
+        
+    var bound = function(input){
+      return Math.max(Math.min(input, options.max), options.min);
+    };
+    
+    var methods = {
+      init : function(o){
+        
+        // element already replaced
+        if($(this).data('TinyRange')) return this;
+        
+        // options 
+        defaults.min = parseFloat($(this).attr('min'));
+        defaults.max = parseFloat($(this).attr('max'));
+        defaults.snap = parseFloat($(this).attr('step'));
+
+        // options passed into plugin override input attributes
+        options = $.extend(defaults, o);
+        
+        if(options.values){
+          //
+        } else if(options.range){
+          options.values = [0, options.max];
+        } else {
+          options.values = parseFloat($(this).attr('value'));
+        }
+ 
+        // how far do handles jump on click, default to step value
+        jump = options.snap ? options.snap : options.max/10;
+
+        // create dom elements
+        $input  = $('<div/>', {'class': 'range-input'}).mousedown(jumpHandle);
+        $rail   = $('<div/>', {'class': 'range-rail'}).appendTo($input);
+        if(options.range) $selection = $('<div/>', {'class': 'range-selection'}).appendTo($input); 
+        $handle = $('<a/>', {'class': 'range-handle'}).appendTo($input).mousedown(dragStart);
+        if(options.range) $handle2 = $handle.clone(true).appendTo($input);
+        
+        // replace dom element
+        $(this).after($input);
+        $(this).hide();
+        $original = $(this);
+        
+        // attach events
+        $(document).bind('mouseup', dragEnd);
+        $(document).bind('mousemove', drag);
+        
+        // position handles
+        size = $handle.width();
+        updateHandles();
+        
+        return this;
+      },
+      set: function(input){
+
+        if(typeof input === 'string'){
+          options.values = bound(input); 
+        } else if(typeof input === 'object' && input.length === 2){
+          options.values[0] = bound(input[0]);
+          options.values[1] = bound(input[1]);
+        }
+        
+        updateHandles();
+      },
+      destroy : function(){
+        
+        $input.remove();
+        $(this).show().data('TinyRange', false);
+        $(document).unbind('mouseup', dragEnd);
+        $(document).unbind('mousemove', drag);
+        
+        return this;
+      }
+    };
+
+    return methods;
+  };
+
+  $.fn.range = function(method) {
+  
+    // so that arguments are accessible within each closure
+    var args = arguments;
+
+    return this.each(function(){
+      var state = $(this).data('TinyRange');
+
+      // Method calling logic
+      if (state && state[method] ) {
+        state[ method ].apply( this, Array.prototype.slice.call( args, 1 ));
+      } else if ( typeof method === 'object' || ! method ) {
+      
+        // create new tinyrange
+        var tr = (new TinyRange(this));
+        tr.init.apply( this, args );
+        
+        // save state in jquery data
+        $(this).data('TinyRange', tr);
+        
+      } else {
+        $.error( 'Method ' +  method + ' does not exist on jQuery.range' );
+      }    
+    });
+  };
+})(jQuery);