Mercurial > hg > digilib-old
comparison client/digitallibrary/jquery/jquery.digilib.js @ 741:ee620bcf4ab0 jquery
image-drag now with full background image :-)
if your browser supports background-size.
and some cleanups.
author | robcast |
---|---|
date | Wed, 02 Feb 2011 20:03:36 +0100 |
parents | 95987594a1b0 |
children | 2b6d3ef57d68 |
comparison
equal
deleted
inserted
replaced
740:95987594a1b0 | 741:ee620bcf4ab0 |
---|---|
243 // style of the zoom area indicator in the bird's eye div | 243 // style of the zoom area indicator in the bird's eye div |
244 'birdIndicatorStyle' : {'border' : '2px solid #ff0000' }, | 244 'birdIndicatorStyle' : {'border' : '2px solid #ff0000' }, |
245 // style of zoom area "rubber band" | 245 // style of zoom area "rubber band" |
246 'zoomrectStyle' : {'border' : '2px solid #ff0000' }, | 246 'zoomrectStyle' : {'border' : '2px solid #ff0000' }, |
247 // is the "about" window shown? | 247 // is the "about" window shown? |
248 'isAboutDivVisible' : false | 248 'isAboutDivVisible' : false, |
249 // maximum width of background image for drag-scroll | |
250 'maxBgSize' : 10000 | |
249 | 251 |
250 }; | 252 }; |
251 | 253 |
252 // affine geometry classes | 254 // affine geometry classes |
253 var geom = dlGeometry(); | 255 var geom = dlGeometry(); |
311 }; | 313 }; |
312 // store in data element | 314 // store in data element |
313 $elem.data('digilib', data); | 315 $elem.data('digilib', data); |
314 } | 316 } |
315 unpackParams(data); | 317 unpackParams(data); |
318 // check if browser knows background-size | |
319 for (var bs in {'':1, '-moz-':1, '-webkit-':1, '-o-':1}) { | |
320 if ($elem.css(bs+'background-size')) { | |
321 data.hasBgSize = true; | |
322 data.bgSizeName = bs+'background-size'; | |
323 break; | |
324 } | |
325 } | |
316 // create HTML structure for scaler | 326 // create HTML structure for scaler |
317 setupScalerDiv(data); | 327 setupScalerDiv(data); |
318 // add buttons | 328 // add buttons |
319 for (var i = 0; i < elemSettings.visibleButtonSets; ++i) { | 329 for (var i = 0; i < elemSettings.visibleButtonSets; ++i) { |
320 showButtons(data, true, i); | 330 showButtons(data, true, i); |
616 return paramString; | 626 return paramString; |
617 }; | 627 }; |
618 | 628 |
619 // returns URL and query string for Scaler | 629 // returns URL and query string for Scaler |
620 var getScalerUrl = function (data) { | 630 var getScalerUrl = function (data) { |
631 packParams(data); | |
621 var settings = data.settings; | 632 var settings = data.settings; |
622 if (settings.scalerBaseUrl == null) { | 633 if (settings.scalerBaseUrl == null) { |
623 alert("ERROR: URL of digilib Scaler servlet missing!"); | 634 alert("ERROR: URL of digilib Scaler servlet missing!"); |
624 } | 635 } |
625 packParams(data); | |
626 var keys = settings.scalerParamNames; | 636 var keys = settings.scalerParamNames; |
627 var queryString = getParamString(settings, keys, defaults); | 637 var queryString = getParamString(settings, keys, defaults); |
628 var url = settings.scalerBaseUrl + '?' + queryString; | 638 var url = settings.scalerBaseUrl + '?' + queryString; |
629 return url; | 639 return url; |
630 }; | 640 }; |
631 | 641 |
642 // returns URL for bird's eye view image | |
643 var getBirdImgUrl = function (data) { | |
644 var settings = data.settings; | |
645 var birdDivOptions = { | |
646 dw : settings.birdDivWidth, | |
647 dh : settings.birdDivHeight | |
648 }; | |
649 var birdSettings = $.extend({}, settings, birdDivOptions); | |
650 // use only the relevant parameters | |
651 var url = settings.scalerBaseUrl + '?' + | |
652 getParamString(birdSettings, settings.birdDivParams); | |
653 return url; | |
654 }; | |
655 | |
632 // returns URL and query string for current digilib | 656 // returns URL and query string for current digilib |
633 var getDigilibUrl = function (data) { | 657 var getDigilibUrl = function (data) { |
634 packParams(data); | 658 packParams(data); |
635 var settings = data.settings; | 659 var settings = data.settings; |
636 var queryString = getParamString(settings, settings.digilibParamNames, defaults); | 660 var queryString = getParamString(settings, settings.digilibParamNames, defaults); |
925 data.$buttonSets[buttonSetIdx] = $buttonsDiv; | 949 data.$buttonSets[buttonSetIdx] = $buttonsDiv; |
926 } | 950 } |
927 return $buttonsDiv; | 951 return $buttonsDiv; |
928 }; | 952 }; |
929 | 953 |
930 // returns URL for bird's eye view image | |
931 var getBirdImgUrl = function (data) { | |
932 var settings = data.settings; | |
933 var birdDivOptions = { | |
934 dw : settings.birdDivWidth, | |
935 dh : settings.birdDivHeight | |
936 }; | |
937 var birdSettings = $.extend({}, settings, birdDivOptions); | |
938 // use only the relevant parameters | |
939 var birdUrl = settings.scalerBaseUrl + '?' + | |
940 getParamString(birdSettings, settings.birdDivParams); | |
941 return birdUrl; | |
942 }; | |
943 | |
944 // creates HTML structure for the bird's eye view in elem | 954 // creates HTML structure for the bird's eye view in elem |
945 var setupBirdDiv = function (data) { | 955 var setupBirdDiv = function (data) { |
946 var $elem = data.$elem; | 956 var $elem = data.$elem; |
947 // the bird's eye div | 957 // the bird's eye div |
948 var $birdDiv = $('<div class="birdview" style="display:none"/>'); | 958 var $birdDiv = $('<div class="birdview" style="display:none"/>'); |
1103 var imgRect = geom.rectangle($img); | 1113 var imgRect = geom.rectangle($img); |
1104 console.debug("imgrect=", imgRect); | 1114 console.debug("imgrect=", imgRect); |
1105 imgRect.adjustDiv($scaler); | 1115 imgRect.adjustDiv($scaler); |
1106 // show image in case it was hidden (for example in zoomDrag) | 1116 // show image in case it was hidden (for example in zoomDrag) |
1107 $img.css('visibility', 'visible'); | 1117 $img.css('visibility', 'visible'); |
1108 $scaler.css('opacity', '1'); | 1118 $scaler.css({'opacity' : '1', 'background-image' : 'none'}); |
1109 // display marks | 1119 // display marks |
1110 renderMarks(data); | 1120 renderMarks(data); |
1111 // TODO: digilib.showArrows(); // show arrow overlays for zoom navigation | 1121 // TODO: digilib.showArrows(); // show arrow overlays for zoom navigation |
1112 }; | 1122 }; |
1113 }; | 1123 }; |
1157 $birdZoom.show(); | 1167 $birdZoom.show(); |
1158 } | 1168 } |
1159 // position may have changed | 1169 // position may have changed |
1160 data.birdTrafo = getImgTrafo(data.$birdImg, FULL_AREA); | 1170 data.birdTrafo = getImgTrafo(data.$birdImg, FULL_AREA); |
1161 var zoomRect = data.birdTrafo.transform(zoomArea); | 1171 var zoomRect = data.birdTrafo.transform(zoomArea); |
1162 // TODO: acount for frame width | 1172 // acount for border width |
1173 zoomRect.addPosition({x : -2, y : -2}); | |
1163 if (data.settings.interactionMode === 'fullscreen') { | 1174 if (data.settings.interactionMode === 'fullscreen') { |
1164 // no animation for fullscreen | 1175 // no animation for fullscreen |
1165 zoomRect.adjustDiv($birdZoom); | 1176 zoomRect.adjustDiv($birdZoom); |
1166 } else { | 1177 } else { |
1167 // nice animation for embedded mode :-) | 1178 // nice animation for embedded mode :-) |
1168 // correct offsetParent because animate is relative | 1179 // correct offsetParent because animate doesn't use offset |
1169 var ppos = $birdZoom.offsetParent().offset(); | 1180 var ppos = $birdZoom.offsetParent().offset(); |
1170 var dest = { | 1181 var dest = { |
1171 left : (zoomRect.x - ppos.left) + 'px', | 1182 left : (zoomRect.x - ppos.left) + 'px', |
1172 top : (zoomRect.y - ppos.top) + 'px', | 1183 top : (zoomRect.y - ppos.top) + 'px', |
1173 width : zoomRect.width, | 1184 width : zoomRect.width, |
1228 $elem.bind("mousemove.dlZoomArea", zoomMove); | 1239 $elem.bind("mousemove.dlZoomArea", zoomMove); |
1229 $elem.bind("mouseup.dlZoomArea", zoomEnd); | 1240 $elem.bind("mouseup.dlZoomArea", zoomEnd); |
1230 return false; | 1241 return false; |
1231 }; | 1242 }; |
1232 | 1243 |
1244 // mouse move handler | |
1245 var zoomMove = function (evt) { | |
1246 pt2 = geom.position(evt); | |
1247 var rect = geom.rectangle(pt1, pt2); | |
1248 rect.clipTo(picRect); | |
1249 // update zoom div | |
1250 rect.adjustDiv($zoomDiv); | |
1251 return false; | |
1252 }; | |
1253 | |
1233 // mouseup handler: end moving | 1254 // mouseup handler: end moving |
1234 var zoomEnd = function (evt) { | 1255 var zoomEnd = function (evt) { |
1235 pt2 = geom.position(evt); | 1256 pt2 = geom.position(evt); |
1236 // assume a click and continue if the area is too small | 1257 // assume a click and continue if the area is too small |
1237 var clickRect = geom.rectangle(pt1, pt2); | 1258 var clickRect = geom.rectangle(pt1, pt2); |
1251 delete data.dlOpts.fitheight; | 1272 delete data.dlOpts.fitheight; |
1252 redisplay(data); | 1273 redisplay(data); |
1253 return false; | 1274 return false; |
1254 }; | 1275 }; |
1255 | 1276 |
1256 // mouse move handler | |
1257 var zoomMove = function (evt) { | |
1258 pt2 = geom.position(evt); | |
1259 var rect = geom.rectangle(pt1, pt2); | |
1260 rect.clipTo(picRect); | |
1261 // update zoom div | |
1262 rect.adjustDiv($zoomDiv); | |
1263 return false; | |
1264 }; | |
1265 | |
1266 // clear old handler | 1277 // clear old handler |
1267 $scaler.unbind('.dlZoomArea'); | 1278 $scaler.unbind('.dlZoomArea'); |
1268 $elem.unbind('.dlZoomArea'); | 1279 $elem.unbind('.dlZoomArea'); |
1269 // bind start zoom handler | 1280 // bind start zoom handler |
1270 $scaler.one('mousedown.dlZoomArea', zoomStart); | 1281 $scaler.one('mousedown.dlZoomArea', zoomStart); |
1274 var setupBirdDrag = function(data) { | 1285 var setupBirdDrag = function(data) { |
1275 var $birdImg = data.$birdImg; | 1286 var $birdImg = data.$birdImg; |
1276 var $birdZoom = data.$birdZoom; | 1287 var $birdZoom = data.$birdZoom; |
1277 var $document = $(document); | 1288 var $document = $(document); |
1278 var startPos, newRect, birdImgRect, birdZoomRect; | 1289 var startPos, newRect, birdImgRect, birdZoomRect; |
1290 | |
1291 // mousedown handler: start dragging bird zoom to a new position | |
1292 var birdZoomStartDrag = function(evt) { | |
1293 startPos = geom.position(evt); | |
1294 // position may have changed | |
1295 data.birdTrafo = getImgTrafo($birdImg, FULL_AREA); | |
1296 birdImgRect = geom.rectangle($birdImg); | |
1297 birdZoomRect = geom.rectangle($birdZoom); | |
1298 newRect = null; | |
1299 $document.bind("mousemove.dlBirdMove", birdZoomMove); | |
1300 $document.bind("mouseup.dlBirdMove", birdZoomEndDrag); | |
1301 $birdZoom.bind("mousemove.dlBirdMove", birdZoomMove); | |
1302 $birdZoom.bind("mouseup.dlBirdMove", birdZoomEndDrag); | |
1303 return false; | |
1304 }; | |
1279 | 1305 |
1280 // mousemove handler: drag | 1306 // mousemove handler: drag |
1281 var birdZoomMove = function(evt) { | 1307 var birdZoomMove = function(evt) { |
1282 var pos = geom.position(evt); | 1308 var pos = geom.position(evt); |
1283 var delta = startPos.delta(pos); | 1309 var delta = startPos.delta(pos); |
1306 data.zoomArea = newArea; | 1332 data.zoomArea = newArea; |
1307 redisplay(data); | 1333 redisplay(data); |
1308 return false; | 1334 return false; |
1309 }; | 1335 }; |
1310 | 1336 |
1311 // mousedown handler: start dragging bird zoom to a new position | |
1312 var birdZoomStartDrag = function(evt) { | |
1313 startPos = geom.position(evt); | |
1314 // position may have changed | |
1315 data.birdTrafo = getImgTrafo($birdImg, FULL_AREA); | |
1316 birdImgRect = geom.rectangle($birdImg); | |
1317 birdZoomRect = geom.rectangle($birdZoom); | |
1318 $document.bind("mousemove.dlBirdMove", birdZoomMove); | |
1319 $document.bind("mouseup.dlBirdMove", birdZoomEndDrag); | |
1320 $birdZoom.bind("mousemove.dlBirdMove", birdZoomMove); | |
1321 $birdZoom.bind("mouseup.dlBirdMove", birdZoomEndDrag); | |
1322 return false; | |
1323 }; | |
1324 | |
1325 // clear old handler | 1337 // clear old handler |
1326 $document.unbind(".dlBirdMove"); | 1338 $document.unbind(".dlBirdMove"); |
1327 $birdImg.unbind(".dlBirdMove"); | 1339 $birdImg.unbind(".dlBirdMove"); |
1328 $birdZoom.unbind(".dlBirdMove"); | 1340 $birdZoom.unbind(".dlBirdMove"); |
1329 if (! isFullArea(data.zoomArea)) { | 1341 if (! isFullArea(data.zoomArea)) { |
1333 } | 1345 } |
1334 }; | 1346 }; |
1335 | 1347 |
1336 // setup handlers for dragging the zoomed image | 1348 // setup handlers for dragging the zoomed image |
1337 var setupZoomDrag = function(data) { | 1349 var setupZoomDrag = function(data) { |
1338 var startPos, delta; | 1350 var startPos, delta, fullRect; |
1339 var $document = $(document); | 1351 var $document = $(document); |
1340 var $elem = data.$elem; | 1352 var $elem = data.$elem; |
1341 var $scaler = data.$scaler; | 1353 var $scaler = data.$scaler; |
1342 var $img = data.$img; | 1354 var $img = data.$img; |
1343 | 1355 |
1344 // drag the image and load a new detail on mouse up | 1356 // drag the image and load a new detail on mouse up |
1345 var dragStart = function (evt) { | 1357 var dragStart = function (evt) { |
1346 // don't start dragging if not zoomed | 1358 // don't start dragging if not zoomed |
1347 if (isFullArea(data.zoomArea)) return false; | 1359 if (isFullArea(data.zoomArea)) return false; |
1348 startPos = geom.position(evt); | 1360 startPos = geom.position(evt); |
1349 $imgRect = geom.rectangle($img); | 1361 fullRect = null; |
1350 // hide the scaler img, show it as background of div instead | 1362 delta = null; |
1363 // hide the scaler img, show background of div instead | |
1351 $img.css('visibility', 'hidden'); | 1364 $img.css('visibility', 'hidden'); |
1352 $scaler.css({ | 1365 var scalerCss = { |
1353 'background-image' : 'url(' + $img.attr('src') + ')', | 1366 'background-image' : 'url(' + $img.attr('src') + ')', |
1354 'background-repeat' : 'no-repeat', | 1367 'background-repeat' : 'no-repeat', |
1355 'background-position' : 'top left', | 1368 'background-position' : 'left top', |
1356 'opacity' : '0.5', | 1369 'opacity' : '0.5', |
1357 'cursor' : 'move' | 1370 'cursor' : 'move' |
1358 }); | 1371 }; |
1372 if (data.hasBgSize) { | |
1373 // full-size background using CSS3-background-size | |
1374 fullRect = data.imgTrafo.transform(FULL_AREA); | |
1375 if (fullRect.height < data.settings.maxBgSize && fullRect.width < data.settings.maxBgSize) { | |
1376 // correct offset because background is relative | |
1377 var scalePos = geom.position($scaler); | |
1378 fullRect.addPosition(scalePos.neg()); | |
1379 scalerCss['background-image'] = 'url(' + getBirdImgUrl(data) + ')'; | |
1380 scalerCss[data.bgSizeName] = fullRect.width + 'px ' + fullRect.height + 'px'; | |
1381 scalerCss['background-position'] = fullRect.x + 'px '+ fullRect.y + 'px'; | |
1382 } else { | |
1383 // too big | |
1384 fullRect = null; | |
1385 } | |
1386 } | |
1387 $scaler.css(scalerCss); | |
1359 $document.bind("mousemove.dlZoomDrag", dragMove); | 1388 $document.bind("mousemove.dlZoomDrag", dragMove); |
1360 $document.bind("mouseup.dlZoomDrag", dragEnd); | 1389 $document.bind("mouseup.dlZoomDrag", dragEnd); |
1361 return false; | 1390 return false; |
1362 }; | 1391 }; |
1363 | 1392 |
1364 // mousemove handler: drag zoomed image | 1393 // mousemove handler: drag zoomed image |
1365 var dragMove = function (evt) { | 1394 var dragMove = function (evt) { |
1366 var pos = geom.position(evt); | 1395 var pos = geom.position(evt); |
1367 delta = pos.delta(startPos); | 1396 delta = startPos.delta(pos); |
1397 if (fullRect) { | |
1398 var bgPos = fullRect.getPosition().add(delta); | |
1399 } else { | |
1400 var bgPos = delta; | |
1401 } | |
1368 // move the background image to the new position | 1402 // move the background image to the new position |
1369 $scaler.css({ | 1403 $scaler.css({ |
1370 'background-position' : (-delta.x) + "px " + (-delta.y) + "px" | 1404 'background-position' : bgPos.x + "px " + bgPos.y + "px" |
1371 }); | 1405 }); |
1372 return false; | 1406 return false; |
1373 }; | 1407 }; |
1374 | 1408 |
1375 // mouseup handler: reload zoomed image in new position | 1409 // mouseup handler: reload zoomed image in new position |
1378 $document.unbind("mousemove.dlZoomDrag", dragMove); | 1412 $document.unbind("mousemove.dlZoomDrag", dragMove); |
1379 $document.unbind("mouseup.dlZoomDrag", dragEnd); | 1413 $document.unbind("mouseup.dlZoomDrag", dragEnd); |
1380 if (delta == null || delta.distance() < 2) { | 1414 if (delta == null || delta.distance() < 2) { |
1381 // no movement | 1415 // no movement |
1382 $img.css('visibility', 'visible'); | 1416 $img.css('visibility', 'visible'); |
1417 $scaler.css({'opacity' : '1', 'background-image' : 'none'}); | |
1383 return false; | 1418 return false; |
1384 } | 1419 } |
1385 // get old zoom area (screen coordinates) | 1420 // get old zoom area (screen coordinates) |
1386 var za = data.imgTrafo.transform(data.zoomArea); | 1421 var za = geom.rectangle($img); |
1387 // move | 1422 // move |
1388 za.addPosition(delta); | 1423 za.addPosition(delta.neg()); |
1389 // transform back | 1424 // transform back |
1390 var newArea = data.imgTrafo.invtransform(za); | 1425 var newArea = data.imgTrafo.invtransform(za); |
1391 data.zoomArea = FULL_AREA.fit(newArea); | 1426 data.zoomArea = FULL_AREA.fit(newArea); |
1392 redisplay(data); | 1427 redisplay(data); |
1393 return false; | 1428 return false; |
1394 }; | 1429 }; |
1395 | 1430 |
1396 // clear old handler | 1431 // clear old handler |
1397 $document.unbind(".dlZoomDrag"); | 1432 $document.unbind(".dlZoomDrag"); |
1398 $scaler.unbind(".dlBirdMove"); | 1433 $scaler.unbind(".dlZoomDrag"); |
1434 // set handler | |
1399 $scaler.bind("mousedown.dlZoomDrag", dragStart); | 1435 $scaler.bind("mousedown.dlZoomDrag", dragStart); |
1400 }; | 1436 }; |
1401 | 1437 |
1402 // get image quality as a number (0..2) | 1438 // get image quality as a number (0..2) |
1403 var getQuality = function (data) { | 1439 var getQuality = function (data) { |