Mercurial > hg > digilib
diff client/digitallibrary/jquery/jquery.digilib.js @ 855:34b20eec036b jquery
second step towards zoom arrows
author | hertzhaft |
---|---|
date | Wed, 09 Mar 2011 00:39:17 +0100 |
parents | 2b7143c331c3 |
children | a135f590275d |
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery.digilib.js Tue Mar 08 09:07:07 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.js Wed Mar 09 00:39:17 2011 +0100 @@ -231,7 +231,7 @@ // arrow overlays for moving the zoomed area 'zoomArrows' : true, // zoom arrow image info - 'zoomArrowImg' : { + 'zoomArrowsInfo' : { // path to arrow images (must end with a slash) 'imagePath' : 'img/', // minimal width of the arrow bar (pixel) @@ -928,6 +928,7 @@ updateImgTrafo(data); renderMarks(data); setupZoomDrag(data); + renderZoomArrows(data); // send event $(data).trigger('update'); }; @@ -1078,8 +1079,53 @@ var show = settings.zoomArrows; console.log('zoom arrows:', show); if (!show) return; + data.$arrows = {}; + var $arrows = data.$arrows; + var info = settings.zoomArrowsInfo; + $.each(['up','down','left','right'], function(i, s){ + var src = info.imagePath + info[s]; + var $div = $('<div class="keep arrow arrow-' + s + '"/>'); + var $img = $('<img src="' + src + '"/>'); + $div.attr('title', s); + $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) { + var $arrows = data.$arrows; + var r = FULL_AREA.copy(); + r.height = 0.05; + data.imgTrafo.transform(r).adjustDiv($arrows.up); + r.y = 0.95; + data.imgTrafo.transform(r).adjustDiv($arrows.down); + r = FULL_AREA.copy(); + r.width = 0.05; + data.imgTrafo.transform(r).adjustDiv($arrows.left); + r.x = 0.95; + data.imgTrafo.transform(r).adjustDiv($arrows.right); + }; + + // creates HTML structure for the about view in elem var setupAboutDiv = function (data) { var $elem = data.$elem;