\
@@ -106,8 +106,8 @@
var $elem = data.$elem;
var settings = data.settings;
var cssPrefix = settings.cssPrefix;
- var $scaleDiv = $elem.find('#'+cssPrefix+'scalemode');
- if ($scaleDiv.length > 0) return; // already onscreen
+ var scaleModeSelector = '#'+cssPrefix+'scalemode';
+ if (fn.isOnScreen(data, scaleModeSelector)) return; // already onscreen
var html = '\
\
\
diff -r d139f59a5f80 -r 95d28c6ad018 webapp/src/main/webapp/jquery/jquery.digilib.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.js Sat Mar 31 00:41:28 2012 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.js Sat Mar 31 12:10:34 2012 +0200
@@ -38,7 +38,7 @@
var defaults = {
// version of this script
- 'version' : 'jquery.digilib.js 2.1.6a2',
+ 'version' : 'jquery.digilib.js 2.1.6a3',
// logo url
'logoUrl' : 'img/digilib-logo-text1.png',
// homepage url (behind logo)
@@ -266,8 +266,8 @@
var $elem = data.$elem;
var settings = data.settings;
var cssPrefix = settings.cssPrefix;
- var $about = $elem.find('#'+cssPrefix+'about');
- if ($about.length > 0) return; // already onscreen
+ var aboutSelector = '#'+cssPrefix+'about';
+ if (isOnScreen(data, aboutSelector)) return;
// make relative logoUrl absolute
var logoUrl = settings.logoUrl;
if (logoUrl.charAt(0) !== '/' && logoUrl.substring(0,3) !== 'http') {
@@ -1598,12 +1598,27 @@
/** center an item on the visible screen rect
*/
var centerOnScreen = function (data, $div) {
+ if ($div == null) return;
var r = geom.rectangle($div);
var s = fn.getFullscreenRect(data);
r.setCenter(s.getCenter());
r.adjustDiv($div);
};
+ /** find an element in digilib $elem
+ */
+ var find = function (data, selector) {
+ var $obj = data.$elem.find(selector);
+ return ($obj.length > 0) ? $obj : null;
+ };
+
+ /** does element exist in digilib?
+ */
+ var isOnScreen = function (data, selector) {
+ var $obj = find(data, selector);
+ return ($obj != null);
+ };
+
/** fade out and remove an item
*/
var withdraw = function ($item) {
@@ -1665,7 +1680,9 @@
cropFloat : cropFloat,
cropFloatStr : cropFloatStr,
centerOnScreen : centerOnScreen,
- withdraw : withdraw
+ withdraw : withdraw,
+ isOnScreen : isOnScreen,
+ find : find
};
// hook digilib plugin into jquery
diff -r d139f59a5f80 -r 95d28c6ad018 webapp/src/main/webapp/jquery/jquery.digilib.sliders.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js Sat Mar 31 00:41:28 2012 +0200
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js Sat Mar 31 12:10:34 2012 +0200
@@ -45,18 +45,25 @@
}
};
+ var primaryColors = ['r', 'g', 'b'];
var rgb = {
r : {
label : "red",
- color : "#800000"
+ color : "#800000",
+ a : 0,
+ m : 0
},
g : {
label : "green",
- color : "#008000"
+ color : "#008000",
+ a : 0,
+ m : 0
},
b : {
label : "blue",
- color : "#000080"
+ color : "#000080",
+ a : 0,
+ m : 0
}
}
var actions = {
@@ -103,7 +110,7 @@
fn.setButtonAction('brgt', 'tinySliderBrgt');
fn.setButtonAction('cont', 'tinySliderCont');
fn.setButtonAction('rot', 'tinySliderRot');
- // fn.setButtonAction('rgb', 'tinySliderRGB');
+ fn.setButtonAction('rgb', 'tinySliderRGB');
};
// plugin installation called by digilib on plugin object.
@@ -123,26 +130,46 @@
// plugin initialization
var init = function (data) {
console.debug('initialising sliders plugin. data:', data);
- // var settings = data.settings;
- // var $data = $(data);
- // we do setup at runtime
- // $data.bind('setup', handleSetup);
+ var $data = $(data);
+ $data.bind('update', handleUpdate);
};
+ // get rgba/rgbm params (color brightness/contrast)
+ var handleUpdate = function (evt) {
+ console.debug("sliders: handleUpdate");
+ var data = this;
+ setStartValues(data, 'a');
+ setStartValues(data, 'm');
+ var idSlider = '#'+ data.settings.cssPrefix + 'slider';
+ fn.centerOnScreen(data, fn.find(data, idSlider));
+ };
+
+ // set m/a start values for sliders
+ var setStartValues = function (data, code) {
+ var colorparts = data.settings['rgb'+code];
+ if (colorparts == null) return;
+ var values = colorparts.split("/");
+ rgb.r[code] = values[0] || 0;
+ rgb.g[code] = values[1] || 0;
+ rgb.b[code] = values[2] || 0;
+ };
+
/** creates a div with a form, setup events and callback
*/
var setupFormDiv = function (data, $content, cssSuffix, callback) {
var cssPrefix = data.settings.cssPrefix;
var cls = cssPrefix + cssSuffix;
+ var $elem = data.$elem;
+ var sliderSelector = '#'+cssPrefix+'slider';
+ if (fn.isOnScreen(data, sliderSelector)) return; // already onscreen
var html = '\
-
\
+
\
\
';
- var $elem = data.$elem;
- var $div = $(html).appendTo($elem);
+ $div = $(html).appendTo($elem);
var $form = $div.find('form');
$form.prepend($content);
// handle submit
@@ -191,8 +218,9 @@
$slider.data({'$text' : $text, '$range' : $range});
// connect slider and input
$range.on('change', function () {
- var val = $range.val();
- $text.val(val);
+ // crop floating point imprecision
+ var val = parseFloat($range.val()).toFixed(4);
+ $text.val(parseFloat(val));
});
$text.on('change', function () {
var val = $text.val();
@@ -225,19 +253,27 @@
var rgbSlider = function (data, callback) {
var cls = data.settings.cssPrefix + 'rgbslider';
var $table = $('
');
- var makeSliders = function(index, value) {
- // TODO: set start values
+ var setupTableRow = function(index, value) {
+ var color = rgb[value];
+ // start values are set in "handleSetup"
+ var $brgt = tinySlider(data, 'brgt', color.a);
+ var $cont = tinySlider(data, 'cont', color.m);
+ $table.data(value+'a', $brgt.data('$text'));
+ $table.data(value+'m', $cont.data('$text'));
var $tr = $('
|
').appendTo($table);
- var $td = $('
'+rgb[value].label+' | ').appendTo($tr);
- var $td = $('
| ').append(tinySlider(data, 'brgt')).appendTo($tr);
- var $td = $('
| ').append(tinySlider(data, 'cont')).appendTo($tr);
+ var $td = $('
'+color.label+' | ').appendTo($tr);
+ var $td = $('
| ').append($brgt).appendTo($tr);
+ var $td = $('
| ').append($cont).appendTo($tr);
}
- $.each(['r','g','b'], makeSliders);
- var getValue = function () {
- // TODO: get values from sliders
- callback(null, null);
+ $.each(primaryColors, setupTableRow);
+ var getValues = function () {
+ // get values from sliders
+ var input = $table.data();
+ var rgba = input['ra'].val() + '/' + input['ga'].val() + '/' + input['ba'].val();
+ var rgbm = input['rm'].val() + '/' + input['gm'].val() + '/' + input['bm'].val();
+ callback(rgbm, rgba);
};
- setupFormDiv(data, $table, 'rgbslider', getValue);
+ setupFormDiv(data, $table, 'rgbslider', getValues);
};
// plugin object with name and init