Mercurial > hg > digilib-old

comparison webapp/src/main/webapp/jquery/jquery.digilib.js @ 918:f7869186ccb2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
use current size background as well as scaled full-size background when dragging
author robcast
date Tue, 06 Dec 2011 18:19:46 +0100
parents 104fc89ef68b
children 95d8184995ab
comparison
equal deleted inserted replaced
917:104fc89ef68b 918:f7869186ccb2
1594 var $scaler = data.$scaler; 1594 var $scaler = data.$scaler;
1595 var $img = data.$img; 1595 var $img = data.$img;
1596 var fullRect = null; 1596 var fullRect = null;
1597 // hide the scaler img, show background of div instead 1597 // hide the scaler img, show background of div instead
1598 $img.css('visibility', 'hidden'); 1598 $img.css('visibility', 'hidden');
1599 // use current image as first background
1599 var scalerCss = { 1600 var scalerCss = {
1600 'background-image' : 'url(' + $img.attr('src') + ')', 1601 'background-image' : 'url(' + $img.attr('src') + ')',
1601 'background-repeat' : 'no-repeat', 1602 'background-repeat' : 'no-repeat',
1602 'background-position' : 'left top', 1603 'background-position' : 'left top',
1603 'opacity' : '0.5', 1604 'opacity' : '0.7',
1604 'cursor' : 'move' 1605 'cursor' : 'move'
1605 }; 1606 };
1606 if (data.hasBgSize) { 1607 if (data.hasBgSize) {
1607 // full-size background using CSS3-background-size 1608 // additional full-size background using CSS3-background-size
1608 fullRect = data.imgTrafo.transform(FULL_AREA); 1609 fullRect = data.imgTrafo.transform(FULL_AREA);
1609 if (fullRect.height < data.settings.maxBgSize && fullRect.width < data.settings.maxBgSize) { 1610 if (fullRect.height < data.settings.maxBgSize && fullRect.width < data.settings.maxBgSize) {
1610 // correct offset because background is relative 1611 // correct offset because background is relative
1611 var scalerPos = geom.position($scaler); 1612 var scalerPos = geom.position($scaler);
1612 fullRect.addPosition(scalerPos.neg()); 1613 fullRect.addPosition(scalerPos.neg());
1613 var url = getBgImgUrl(data); 1614 var url = getBgImgUrl(data);
1614 scalerCss['background-image'] = 'url(' + url + ')'; 1615 // add background url, size and position
1615 scalerCss[data.bgSizeName] = fullRect.width + 'px ' + fullRect.height + 'px'; 1616 scalerCss['background-image'] += ', url(' + url + ')';
1616 scalerCss['background-position'] = fullRect.x + 'px '+ fullRect.y + 'px'; 1617 scalerCss[data.bgSizeName] = 'auto, ' + fullRect.width + 'px ' + fullRect.height + 'px';
1618 scalerCss['background-position'] += ', ' + fullRect.x + 'px '+ fullRect.y + 'px';
1617 } else { 1619 } else {
1618 // too big 1620 // scaled full-size background image too big
1619 fullRect = null; 1621 fullRect = null;
1620 } 1622 }
1621 } 1623 }
1622 $scaler.css(scalerCss); 1624 $scaler.css(scalerCss);
1623 // isBgReady = true;
1624 return fullRect; 1625 return fullRect;
1625 }; 1626 };
1626 1627
1627 // setup handlers for dragging the zoomed image 1628 // setup handlers for dragging the zoomed image
1628 var setupZoomDrag = function(data) { 1629 var setupZoomDrag = function(data) {
1650 1651
1651 // mousemove handler: drag zoomed image 1652 // mousemove handler: drag zoomed image
1652 var dragMove = function (evt) { 1653 var dragMove = function (evt) {
1653 var pos = geom.position(evt); 1654 var pos = geom.position(evt);
1654 delta = startPos.delta(pos); 1655 delta = startPos.delta(pos);
1656 // background position
1657 var bgPos = delta.x + "px " + delta.y + "px";
1655 if (fullRect) { 1658 if (fullRect) {
1656 var bgPos = fullRect.getPosition().add(delta); 1659 // add full-size background position
1657 } else { 1660 var bp = fullRect.getPosition().add(delta);
1658 var bgPos = delta; 1661 bgPos += ', ' + bp.x + "px " + bp.y + "px";
1659 } 1662 }
1660 // move the background image to the new position 1663 // move the background image to the new position
1661 $scaler.css({ 1664 $scaler.css('background-position', bgPos);
1662 'background-position' : bgPos.x + "px " + bgPos.y + "px"
1663 });
1664 // send message event with current zoom position 1665 // send message event with current zoom position
1665 var za = geom.rectangle($img); 1666 var za = geom.rectangle($img);
1666 za.addPosition(delta.neg()); 1667 za.addPosition(delta.neg());
1667 $data.trigger('dragZoom', [za]); 1668 $data.trigger('dragZoom', [za]);
1668 //TODO: setBirdZoom(data, za);
1669 return false; 1669 return false;
1670 }; 1670 };
1671 1671
1672 // mouseup handler: reload zoomed image in new position 1672 // mouseup handler: reload zoomed image in new position
1673 var dragEnd = function (evt) { 1673 var dragEnd = function (evt) {