digilib-old: client/digitallibrary/jquery/jquery.digilib.js comparison

comparison client/digitallibrary/jquery/jquery.digilib.js @ 877:971b7122930f jquery

arrows: got basic functionality working

author	hertzhaft
date	Thu, 17 Mar 2011 16:43:59 +0100
parents	a5a460afb912
children	f6e2e6831aaf

comparison

equal deleted inserted replaced

-:a5a460afb912
+:971b7122930f
 tooltip : "less options",
 icon : "options.png"
 },
 up : {
 onclick : ["moveZoomArea", 0, -1],
-tooltip : "move up",
+tooltip : "move zoom area up",
 icon : "up.png"
 },
 down : {
 onclick : ["moveZoomArea", 0, 1],
-tooltip : "move down",
+tooltip : "move zoom area down",
 icon : "down.png"
 },
 left : {
 onclick : ["moveZoomArea", -1, 0],
-tooltip : "move left",
+tooltip : "move zoom area left",
 icon : "left.png"
 },
 right : {
 onclick : ["moveZoomArea", 1, 0],
-tooltip : "move right",
+tooltip : "move zoom area right",
 icon : "right.png"
 },
 SEP : {
 icon : "sep.png"
 }
 // add attributes and bindings
 $button.attr('title', tooltip);
 $button.addClass('button-' + buttonName);
 $img.attr('src', icon);
 // create handler for the buttons
-$a.bind('click.digilib', (function () {
+$button.bind('click.digilib', (function () {
 // we create a new closure to capture the value of action
 if ($.isArray(action)) {
 // the handler function calls digilib with action and parameters
 return function (evt) {
 console.debug('click action=', action, ' evt=', evt);
 // creates arrow overlays for moving the zoomed area
 var setupZoomArrows = function (data) {
 var $elem = data.$elem;
 var settings = data.settings;
-var show = settings.zoomArrows;
+var show = settings.showZoomArrows;
 console.log('zoom arrows:', show);
 if (!show) return;
-data.$arrows = {};
+var mode = settings.interactionMode;
-var $arrows = data.$arrows;
+var arrowNames = settings.buttonSettings[mode].arrowSet;
-var info = settings.zoomArrowsInfo;
+// arrow divs are marked with class "keep"
-$.each(['up','down','left','right'], function(i, s){
+var $arrowsDiv = $('<div class="keep arrows"/>');
-var src = info.imagePath + info[s];
+$elem.append($arrowsDiv);
-var $div = $('<div class="keep arrow arrow-' + s + '"/>');
+// create all arrow buttons
-var $img = $('<img src="' + src + '"/>');
+$.each(arrowNames, function(i, arrowName){
-$div.attr('title', s);
+createButton(data, $arrowsDiv, arrowName);
-$img.attr('alt', s);
+});
-$div.append($img);
-$elem.append($div);
-$arrows[s] = $div;
-});
-$arrows.up.bind('click.digilib', function(event) {
-//za.addPosition(delta.neg());
-// transform back
-// var newArea = data.imgTrafo.invtransform(za);
-// data.zoomArea = FULL_AREA.fit(newArea);
-redisplay(data);
-});
-$arrows.down.bind('click.digilib', function(event) {
-redisplay(data);
-});
-$arrows.left.bind('click.digilib', function(event) {
-redisplay(data);
-});
-$arrows.right.bind('click.digilib', function(event) {
-redisplay(data);
-});
 };
 // size and show arrow overlays, called after scaler img is loaded
 var renderZoomArrows = function (data) {
-if (!data.settings.zoomArrows) return;
+var settings = data.settings;
-if (isFullArea(data)) return;
+if (isFullArea(data) || !settings.showZoomArrows) return;
-var $arrows = data.$arrows;
+var $arrowsDiv = data.$elem.find('div.arrows');
-var r = FULL_AREA.copy();
+var r = geom.rectangle(data.$scaler);
-r.height = 0.05;
+// calculate arrow bar width
-data.imgTrafo.transform(r).adjustDiv($arrows.up);
+var aw = settings.zoomArrowWidth;
-r.y = 0.95;
+var minWidth = settings.zoomArrowMinWidth;
-data.imgTrafo.transform(r).adjustDiv($arrows.down);
+// arrow bar width should not exceed 10% of scaler width/height
-r = FULL_AREA.copy();
+var maxWidth = Math.min(r.width, r.height)/10;
-r.width = 0.05;
+if (aw > maxWidth) {
-data.imgTrafo.transform(r).adjustDiv($arrows.left);
+aw = maxWidth;
-r.x = 0.95;
+if (aw < minWidth) {
-data.imgTrafo.transform(r).adjustDiv($arrows.right);
+aw = minWidth;
-};
+}
+}
+$arrowsDiv.show();
+renderZoomArrow($arrowsDiv, 'up', geom.rectangle(r.x, r.y, r.width, aw));
+renderZoomArrow($arrowsDiv, 'down', geom.rectangle(r.x, r.y + r.height - aw, r.width));
+renderZoomArrow($arrowsDiv, 'left', geom.rectangle(r.x, r.y, aw, r.height));
+renderZoomArrow($arrowsDiv, 'right', geom.rectangle(r.x + r.width - aw, r.y, aw, r.height));
+};
+// render a single zoom Arrow
+var renderZoomArrow = function ($div, name, rect) {
+var $arrow = $div.find('div.button-' + name);
+rect.adjustDiv($arrow);
+};
 // creates HTML structure for the about view in elem
 var setupAboutDiv = function (data) {
 var $elem = data.$elem;
 var settings = data.settings;