# 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 @@
+
+
-
+
@@ -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 = '\
+
\
+ \
+
';
+ 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 = $('', {'class': 'range-input'}).mousedown(jumpHandle);
+ $rail = $('', {'class': 'range-rail'}).appendTo($input);
+ if(options.range) $selection = $('', {'class': 'range-selection'}).appendTo($input);
+ $handle = $('', {'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);