Mercurial > hg > digilib-old

changeset 1062:41991d1598f1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
rgb slider: reset now functional, minor refactoring
author hertzhaft
date Sun, 01 Apr 2012 18:43:42 +0200
parents 4f5c5c578aa4
children fb4d550869c8
files webapp/src/main/webapp/jquery/jquery.digilib.css webapp/src/main/webapp/jquery/jquery.digilib.sliders.js
diffstat 2 files changed, 65 insertions(+), 32 deletions(-) [+]
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css	Sat Mar 31 22:34:50 2012 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.css	Sun Apr 01 18:43:42 2012 +0200
@@ -153,6 +153,12 @@
 	background: transparent;
 	}
 
+div.dl-digilib table.dl-rgbslider td.dl-rgb {
+    width: 40%;
+    padding: 6px;
+    border: 2px solid lightcyan;
+}
+
 div.dl-digilib div.dl-rgbslider {
     display: none;
 	border: 2px solid lightcyan;
@@ -163,9 +169,21 @@
     top: 0px;	
     }
 
-div.dl-digilib div.dl-rgbslidergrey span,
-div.dl-digilib div.dl-rgbsliderindicator span {
-    padding: 0px 20px;
+div.dl-digilib div.dl-rgbsliderindicator {
+	border: 2px solid lightcyan;
+	margin: 10px 0px;
+    }
+
+div.dl-digilib table.dl-rgbslider,
+div.dl-digilib table.dl-rgbslidergrey,
+div.dl-digilib table.dl-rgbsliderindicator {
+    width: 100%;
+    border-collapse: collapse;
+    }
+
+div.dl-digilib table.dl-rgbslidergrey td,
+div.dl-digilib table.dl-rgbsliderindicator td {
+    height: 20px;
     }
 
 div.dl-digilib td.dl-color div {
@@ -173,7 +191,7 @@
     border: 2px solid lightcyan;
     text-align: center;
     padding: 20px 0px;
-    margin: 10px;
+    margin: 0px 20px 20px 0px;
     }
 
 div.dl-digilib td.dl-r div {
@@ -260,16 +278,6 @@
     opacity: 1;
 }
 
-div.dl-digilib table.dl-rgbslider  {
-    width: 100%;
-}
-
-div.dl-digilib table.dl-rgbslider td.dl-rgb {
-    width: 40%;
-    padding: 6px;
-    border: 2px solid lightcyan;
-}
-
 /* special definitions for fullscreen */
 div.dl-digilib.dl-fullscreen div.dl-buttons {
 	position: fixed;
--- a/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js	Sat Mar 31 22:34:50 2012 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js	Sun Apr 01 18:43:42 2012 +0200
@@ -159,6 +159,7 @@
     var setupFormDiv = function (data, $content, cssSuffix, onSubmit) {
         var cssPrefix = data.settings.cssPrefix;
         var cls = cssPrefix + cssSuffix;
+        var tiny = cssPrefix + 'tinyslider';
         var $elem = data.$elem;
         var sliderSelector = '#'+cssPrefix+'slider';
         if (fn.isOnScreen(data, sliderSelector)) return; // already onscreen
@@ -166,7 +167,7 @@
             <div id="'+cssPrefix+'slider" class="'+cls+'">\
                 <form class="'+cls+'">\
                     <input class="'+cls+'cancel" type="button" value="Cancel"/>\
-                    <input class="'+cls+'reset" type="reset" value="Reset"/>\
+                    <input class="'+cls+'reset" type="button" value="Reset"/>\
                     <input type="submit" name="sub" value="Ok"/>\
                 </form>\
             </div>';
@@ -179,6 +180,15 @@
             fn.withdraw($div);
             return false;
         });
+        // handle reset
+        $form.find('.'+cls+'reset').on('click', function () {
+            var sliders = $form.find('div.'+tiny);
+            sliders.each(function () {
+                var reset = $(this).data('reset');
+                reset();
+                });
+                // TODO: update indicator
+        });
         // handle cancel
         $form.find('.'+cls+'cancel').on('click', function () {
             fn.withdraw($div);
@@ -186,7 +196,6 @@
         // show div
         $div.fadeIn();
         // fix non-HTML5 slider
-        var tiny = cssPrefix + 'tinyslider';
         var $range = $form.find('input.'+tiny+'range');
         var HTML5 = $range.prop('type') === 'range';
         if (!HTML5) {
@@ -208,7 +217,7 @@
         var cssPrefix = data.settings.cssPrefix;
         var cls = cssPrefix + 'tinyslider';
         var html = '\
-            <div class="'+cls+'frame">\
+            <div class="'+cls+'">\
                 <span>'+opts.label+'</span>\
                 <input type="range" class="'+cls+'range" name="'+paramname+'" step="'+opts.step+'" min="'+opts.min+'" max="'+opts.max+'" value="'+param+'"/>\
                 <input type="text" class="'+cls+'text" name="'+paramname+'" size="4" value="'+param+'"/>\
@@ -216,17 +225,15 @@
         var $slider = $(html);
         var $range = $slider.find('input.'+cls+'range');
         var $text = $slider.find('input.'+cls+'text');
-        $slider.data({'$text' : $text, '$range' : $range});
-        // connect slider and input
-        $range.on('change', function () {
+        var rangeChange = function () {
             // crop floating point imprecision
             var val = parseFloat($range.val()).toFixed(4);
             $text.val(parseFloat(val));
             if ($.isFunction(onChange)) {
                 onChange($slider, val);
             }
-        });
-        $text.on('change', function () {
+        };
+        var textChange = function () {
             var val = $text.val();
             $range.val(val);
             // val doesn't change the slider handle position in Tinyrange
@@ -238,6 +245,18 @@
             if ($.isFunction(onChange)) {
                 onChange($slider, val);
             }
+        };
+        var reset = function () {
+            $text.val(param);
+            textChange();
+        };
+        // connect slider and input
+        $range.on('change', rangeChange); 
+        $text.on('change', textChange);
+        $slider.data({
+            '$text' : $text,
+            '$range' : $range,
+            'reset' : reset
         });
         return $slider;
     };
@@ -265,15 +284,21 @@
         var html = '\
             <div>\
                 <table class="'+cls+'" />\
-                <div class="'+cls+'grey">\
-                    <span/><span/><span/><span/><span/><span/><span/><span/><span/>\
-                </div>\
-                <div class="'+cls+'indicator">\
-                    <span/><span/><span/><span/><span/><span/><span/><span/><span/>\
+                <div  class="'+cls+'indicator">\
+                    <table class="'+cls+'grey">\
+                        <tr>\
+                        <td/><td/><td/><td/><td/><td/><td/><td/><td/>\
+                        </tr>\
+                    </table>\
+                    <table class="'+cls+'indicator">\
+                        <tr>\
+                        <td/><td/><td/><td/><td/><td/><td/><td/><td/>\
+                        </tr>\
+                    </table>\
                 </div>\
             </div>';
         var $div = $(html);
-        var $table = $div.find('table');
+        var $table = $div.find('table.'+cls);
         var onChange = function () {
             // show effects of color brightness/contrast on a grey scale
             var input = $table.data();
@@ -290,9 +315,9 @@
                 var b = Math.min(Math.max(Math.round(Math.pow(2, bm) * val + ba), 0), 255);
                 $(this).css('background-color', 'rgb('+r+','+g+','+b+')');
                 };
-            $div.find('div.'+cls+'indicator span').each(setRGBValue);
+            $div.find('table.'+cls+'indicator td').each(setRGBValue);
             };
-        var setupTableRow = function(index, value) {
+        var insertTableRow = function(index, value) {
             var color = rgb[value];
             // start values are set in "handleSetup"
             var $tr = $('<tr/>').appendTo($table);
@@ -320,8 +345,8 @@
             var rgbm = input['rm'].val() + '/' + input['gm'].val() + '/' + input['bm'].val();
             onSubmit(rgbm, rgba);
             };
-        $.each(primaryColors, setupTableRow);
-        $div.find('div.'+cls+'grey span').each(setGreyScale);
+        $.each(primaryColors, insertTableRow);
+        $div.find('table.'+cls+'grey td').each(setGreyScale);
         setupFormDiv(data, $div, 'rgbslider', getValues);
         onChange();
     };