Mercurial > hg > digilib-old

changeset 1021:9aa282ceec8a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
move sliders out of buttons plugin
author hertzhaft
date Wed, 29 Feb 2012 11:28:42 +0100
parents 0eedb4a5b674
children a1bb909dfd38
files webapp/src/main/webapp/jquery/digilib.html webapp/src/main/webapp/jquery/jquery.digilib.buttons.js webapp/src/main/webapp/jquery/jquery.digilib.js
diffstat 3 files changed, 16 insertions(+), 387 deletions(-) [+]
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/digilib.html	Tue Feb 21 00:08:04 2012 +0100
+++ b/webapp/src/main/webapp/jquery/digilib.html	Wed Feb 29 11:28:42 2012 +0100
@@ -17,6 +17,7 @@
         <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.digilib.buttons.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>
@@ -26,7 +27,8 @@
             $(document).ready(function(){
                 var opts = {
                     interactionMode : 'fullscreen',
-                    showRegionNumbers : true
+                    showRegionNumbers : true,
+                    autoRegionLinks : true
                     };
                 var $div = $('div#digilib');
                 $div.digilib(opts);
--- a/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js	Tue Feb 21 00:08:04 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js	Wed Feb 29 11:28:42 2012 +0100
@@ -78,17 +78,17 @@
             icon : "mirror-vertical.png"
             },
         rot : {
-            onclick : "sliderRotate",
+            onclick : "rotate",
             tooltip : "rotate image",
             icon : "rotate.png"
             },
         brgt : {
-            onclick : "sliderBrightness",
+            onclick : "brightness",
             tooltip : "set brightness",
             icon : "brightness.png"
             },
         cont : {
-            onclick : "sliderContrast",
+            onclick : "contrast",
             tooltip : "set contrast",
             icon : "contrast.png"
             },
@@ -138,59 +138,6 @@
             }
         };
 
-    var sliders = {
-        rot : {
-            label : "Rotation angle",
-            tooltip : "rotate image",
-            icon : "rotate.png",
-            'min' : 0,
-            'max' : 360,
-            'start' : 90
-            },
-        brgt : {
-            label : "Brightness",
-            tooltip : "set numeric value to be added",
-            icon : "brightness.png",
-            'min' : -255,
-            'max' : 255,
-            'start' : 0
-            },
-        cont : {
-            label : "Contrast",
-            tooltip : "set numeric value to be multiplied",
-            icon : "contrast.png",
-            'min' : -4,
-            'max' : 4,
-            'start' : 0
-        },
-        red : {
-            label : "Red value",
-            tooltip : "set red value",
-            icon : "rgb.png",
-            'min' : 0,
-            'max' : 255,
-            'start' : 127
-            },
-
-        green : {
-            label : "Green value",
-            tooltip : "set green value",
-            icon : "rgb.png",
-            'min' : 0,
-            'max' : 255,
-            'start' : 127
-            },
-
-        blue : {
-            label : "Blue value",
-            tooltip : "set blue value",
-            icon : "rgb.png",
-            'min' : 0,
-            'max' : 255,
-            'start' : 127
-            },
-        };
-
     var modes = [
         {   name : "screen", 
             label : "fit to screen",
@@ -263,66 +210,6 @@
                 fn.storeOptions(data);
             },
 
-            // slider to set a rotation angle
-            sliderRotate : function (data) {
-                var $elem = data.$elem;
-                var $panel = fn.setupPanel(data);
-                if ($panel == null) {
-                    return;
-                    };
-                var opts = { 'start' : parseFloat(data.settings.rot) };
-                var $slider = fn.setupSlider(data, 'rot', opts);
-                var ok = function(d) {
-                    var angle = $slider.slider('getval');
-                    digilib.actions.rotate(d, angle);
-                    };
-                $panel.data['ok'] = ok;
-                $panel.fadeIn();
-                $panel.prepend($slider);
-                centerOnScreen(data, $panel);
-                $slider.slider('show');
-            },
-
-            // slider to set a brightness value
-            sliderBrightness : function (data) {
-                var $elem = data.$elem;
-                var $panel = fn.setupPanel(data);
-                if ($panel == null) {
-                    return;
-                    };
-                var opts = { 'start' : parseFloat(data.settings.brgt) };
-                var $slider = fn.setupSlider(data, 'brgt', opts);
-                var ok = function(d) {
-                    var brgt = $slider.slider('getval');
-                    digilib.actions.brightness(d, brgt);
-                    };
-                $panel.data['ok'] = ok;
-                $panel.fadeIn();
-                $panel.prepend($slider);
-                centerOnScreen(data, $panel);
-                $slider.slider('show');
-            },
-
-            // slider to set a contrast value
-            sliderContrast : function (data) {
-                var $elem = data.$elem;
-                var $panel = fn.setupPanel(data);
-                if ($panel == null) {
-                    return;
-                    };
-                var opts = { 'start' : parseFloat(data.settings.cont) };
-                var $slider = fn.setupSlider(data, 'cont', opts);
-                var ok = function(d) {
-                    var cont = $slider.slider('getval');
-                    digilib.actions.contrast(d, cont, true);
-                    };
-                $panel.data['ok'] = ok;
-                $panel.fadeIn();
-                $panel.prepend($slider);
-                centerOnScreen(data, $panel);
-                $slider.slider('show');
-            },
-
             // shows Calibration Div
             showCalibrationDiv : function (data) {
                 var $elem = data.$elem;
@@ -377,8 +264,6 @@
         // export functions
         fn.createButton = createButton;
         fn.highlightButtons = highlightButtons;
-        fn.setupSlider = setupSlider;
-        fn.setupPanel = setupPanel;
     };
 
     // plugin initialization
@@ -389,7 +274,6 @@
         // install event handler
         var $data = $(data);
         $data.bind('setup', handleSetup);
-        sliderPlugin(jQuery, data);
     };
 
     var handleSetup = function (evt) {
@@ -416,271 +300,6 @@
         return insets;
     };
 
-    var centerOnScreen = function (data, $div) {
-        var r = geom.rectangle($div);
-        var s = fn.getFullscreenRect(data);
-        r.setCenter(s.getCenter());
-        r.adjustDiv($div);
-    };
-
-    // slider
-    var sliderPlugin = function($, digilibdata) {
-        var cssPrefix = digilibdata.settings.cssPrefix;
-        var defaults = {
-            'cssclass' : cssPrefix+'slider',
-            'label' : 'Slider',
-            'direction' : 'x',
-            'handlesize' : 16,
-            'min' : 0,
-            'max' : 100,
-            'start' : 33,
-            'numberoffset' : -24,
-            'labeloffset' : 16,
-            'rect' : null,
-            'factor' : null,
-            'onmove' : null // callback function
-            };
-        var methods = {
-            init : function( options ) {
-                // make a slider from each element
-                return this.each(function() {
-                    var $this = $(this);
-                    // var settings = data.settings;
-                    var settings = $.extend( defaults, options);
-                    console.debug('new slider: ', $this, ' settings:', settings);
-                    $this.data('digilib', digilibdata);
-                    var data = $this.data('settings');
-                    if (!data) {
-                        $this.data('settings', settings);
-                        $this.addClass(settings.cssclass);
-                        var $handle = $('<div class="'+settings.cssclass+'handle" />');
-                        var $label = $('<div class="'+settings.cssclass+'label">'
-                            +settings.label+': '+settings.start+'</div>');
-                        var $min = $('<div class="'+settings.cssclass+'number">'+settings.min+'</div>');
-                        var $max = $('<div class="'+settings.cssclass+'number">'+settings.max+'</div>');
-                        $this.append($handle);
-                        $this.append($label);
-                        $this.append($min);
-                        $this.append($max);
-                        $.extend(settings, {
-                            '$handle' : $handle,
-                            '$label' : $label,
-                            '$min' : $min,
-                            '$max' : $max,
-                            'diff' : settings.max - settings.min,
-                            'vertical' : settings.direction == 'y',
-                            'val' : settings.start,
-                            'handlerect' : geom.rectangle(0, 0, settings.handlesize, settings.handlesize)
-                            });
-                        }
-                    });
-            },
-            getval : function(data) {
-                // returns the slider value
-                var $this = this;
-                var settings = $this.data('settings');
-                return settings.val;
-            },
-            setval : function(data, val) {
-                // sets the slider value and moves the handle acordingly
-                var $this = this;
-                var settings = $this.data('settings');
-                if (val != null) settings.val = val;
-                var ratio = (settings.val - settings.min) / settings.diff;
-                var r = settings.rect;
-                var newpos = settings.vertical
-                    ? geom.position(r.x + r.width / 2, r.y + ratio * r.height)
-                    : geom.position(r.x + ratio * r.width, r.y + r.height / 2);
-                $this.slider('moveto', newpos);
-            },
-            moveto : function(data, pos, calc) {
-                // move the handle in response to a mouse position
-                var $this = this;
-                var settings = $this.data('settings');
-                var r = settings.rect;
-                var h = settings.handlerect;
-                var handlepos = r.getCenter();
-                if (settings.vertical) {
-                    handlepos.y = Math.min(Math.max(r.y, pos.y), r.y + r.height)
-                } else {
-                    handlepos.x = Math.min(Math.max(r.x, pos.x), r.x + r.width)
-                    }
-                h.setCenter(handlepos);
-                h.adjustDiv(settings.$handle);
-                if (calc) {
-                    // calculate new slider value
-                    var temp = settings.vertical
-                        ? (handlepos.y - r.y)
-                        : (handlepos.x - r.x);
-                    settings.val = fn.cropFloat(temp * settings.factor + settings.min);
-                    }
-                if (settings.onmove) {
-                    settings.onmove($this);
-                    }
-            },
-            show : function(data) {
-                var $this = this;
-                $this.fadeIn();
-                var settings = $this.data('settings');
-                // the jquery elements we need
-                var $body = $('body');
-                // some variables for easier calculation
-                var label = settings.label + ': ';
-                // calculate positions for the slider elements
-                var r = geom.rectangle($this);
-                settings.rect = r;
-                var v = settings.vertical;
-                settings.factor = v
-                    ? settings.diff / r.height
-                    : settings.diff / r.width;
-                var labelpos = geom.position(r.x, r.y + settings.labeloffset);
-                var minpos = v
-                    ? geom.position(r.x + settings.numberoffset, r.y)
-                    : geom.position(r.x, r.y + settings.numberoffset);
-                var maxpos = v
-                    ? geom.position(r.x + settings.numberoffset, r.y + r.width)
-                    : geom.position(r.x + r.width - settings.$max.width(), r.y + settings.numberoffset);
-                // adjust elements
-                labelpos.adjustDiv(settings.$label);
-                minpos.adjustDiv(settings.$min);
-                maxpos.adjustDiv(settings.$max);
-                // set the handle
-                $this.slider('setval');
-
-                // mousedown handler: start sliding
-                var sliderStart = function (event) {
-                    $body.on("mousemove.slider", sliderMove);
-                    $body.on("mouseup.slider", sliderEnd);
-                    return false;
-                };
-
-                // mousemove handler: move slider
-                var sliderMove = function (event) {
-                    var pos = geom.position(event);
-                    $this.slider('moveto', pos, true);
-                    settings.$label.text(label + settings.val);
-                    return false;
-                };
-
-                // mouseup handler: end sliding
-                var sliderEnd = function (event) {
-                    $body.off("mousemove.slider");
-                    $body.off("mouseup.slider");
-                    return false;
-                };
-
-                // bind mousedown handler to sliderhandle
-                settings.$handle.on('mousedown.slider', sliderStart);
-                console.debug('show slider: ', $this, ' settings:', settings);
-            },
-            destroy : function( ) {
-                var $this = this;
-                var settings = $this.data('settings');
-                var $handle = settings.$handle;
-                $handle.off('mousedown.slider');
-                $this.fadeOut(function(){
-                    $this.remove()
-                    });
-            }
-        };
-
-        // TODO:
-        // - take start value from a given param
-        // - set the param after sliding
-        // - show min/max/current values on slider
-        $.fn.slider = function( method ) {
-            if ( methods[method] ) {
-                // call a method
-                var $elem = $(this);
-                var data = $elem.data('digilib');
-                var args = Array.prototype.slice.call(arguments, 1);
-                args.unshift(data);
-                return methods[method].apply(this, args);
-                }
-            else if ( !method || typeof method === 'object' ) {
-                // call init(), with an optional object containing options
-                return methods.init.apply( this, arguments );
-                }
-            else {
-                $.error( 'Method ' +  method + ' does not exist on digilib.buttons.slider!' );
-                }
-        };
-    };
-
-    /** creates the HTML structure for a panel div
-     */
-    var setupPanel = function (data) {
-        var $elem = data.$elem;
-        var panelClass = data.settings.cssPrefix + 'panel';
-        var $panel = $elem.find('.' + panelClass);
-        // remove panel if it exists already
-        if ($panel.length > 0) {
-            $panel.fadeOut(function() {
-                $panel.remove();
-                });
-            return null;
-            }
-        $panel = $('<div/>');
-        $panel.addClass(panelClass);
-        var $okcancel = setupOkCancel(data);
-        $panel.append($okcancel);
-        $elem.append($panel);
-        return $panel;
-    };
-
-    /** creates the HTML structure for a slider div
-     */
-    var setupSlider = function (data, paramname, opts) {
-        var id = paramname + "-slider";
-        var $div = $('#' + id);
-        if ($div.length == 0) {
-            // slider not yet created
-            $div = $('<div/>');
-            var options = sliders[paramname];
-            if (opts != null) {
-                $.extend(options, opts);
-                }
-            $div.attr('id', paramname + "-slider");
-            $div.slider(options);
-            }
-        return $div;
-    };
-
-    /** creates the HTML structure for a ok and cancel div
-     */
-    var setupOkCancel = function (data) {
-        var settings = data.settings;
-        var cssPrefix = settings.cssPrefix;
-        var html = '\
-            <div>\
-                <button class="'+cssPrefix+'button" id="'+cssPrefix+'Ok">OK</button>\
-                <button class="'+cssPrefix+'button" id="'+cssPrefix+'Cancel">Cancel</button>\
-            </div>';
-        var $div = $(html);
-        var handler = function(event) {
-            var $panel = $(this).parents('.'+cssPrefix+'panel');
-            if (event.keyCode == 27 || event.target.id == cssPrefix+'Cancel') {
-                var callback = $panel.data['cancel'];
-                if (callback) {
-                    callback(data);
-                    }
-                }
-            if (event.keyCode == 13 || event.target.id == cssPrefix+'Ok') {
-                var callback = $panel.data['ok'];
-                if (callback) {
-                    callback(data);
-                    }
-                }
-            $panel.fadeOut(function() {
-                $panel.remove();
-                });
-            return false;
-            };
-        $div.children().on('click', handler);
-        return $div;
-    };
-
-
     /** creates HTML structure for the calibration div
      */
     var setupCalibrationDiv = function (data) {
@@ -707,7 +326,7 @@
         data.calibrationDiv = $calDiv;
         data.calibrationErrorDiv = $calDiv.find('div.'+cssPrefix+'calibration-error');
         data.calibrationInput = $input;
-        centerOnScreen(data, $calDiv);
+        fn.centerOnScreen(data, $calDiv);
         var handler = function(event) {
             var _data = data;
             if (event.keyCode == 27 || event.target.id == cssPrefix+'calibrationCancel') {
--- a/webapp/src/main/webapp/jquery/jquery.digilib.js	Tue Feb 21 00:08:04 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.js	Wed Feb 29 11:28:42 2012 +0100
@@ -1607,6 +1607,13 @@
         return cropFloat(x).toString();
     };
 
+    var centerOnScreen = function (data, $div) {
+        var r = geom.rectangle($div);
+        var s = fn.getFullscreenRect(data);
+        r.setCenter(s.getCenter());
+        r.adjustDiv($div);
+    };
+
     // fallback for console.log calls
     if (customConsole) {
         var logFunction = function(type) {
@@ -1657,7 +1664,8 @@
             getFullscreenRect : getFullscreenRect,
             getBorderWidth : getBorderWidth,
             cropFloat : cropFloat,
-            cropFloatStr : cropFloatStr
+            cropFloatStr : cropFloatStr,
+            centerOnScreen : centerOnScreen
     };
 
     // hook digilib plugin into jquery