comparison client/digitallibrary/jquery/jquery.digilib.js @ 670:11d96bc0ac09 jquery

birdview: nice animation for embedded mode, none for fullscreen
author hertzhaft
date Mon, 24 Jan 2011 23:07:57 +0100
parents b93241aa017c
children a53c3e12995a
comparison
equal deleted inserted replaced
669:b93241aa017c 670:11d96bc0ac09
609 window.location = url; 609 window.location = url;
610 } else { 610 } else {
611 // embedded mode -- just change img src 611 // embedded mode -- just change img src
612 var url = getScalerUrl(data); 612 var url = getScalerUrl(data);
613 data.$img.attr('src', url); 613 data.$img.attr('src', url);
614 var $birdImg = data.$birdImg; 614 };
615 if ($birdImg) {
616 $birdImg.triggerHandler('load');
617 };
618 }
619 }; 615 };
620 616
621 // returns maximum size for scaler img in fullscreen mode 617 // returns maximum size for scaler img in fullscreen mode
622 var getFullscreenImgSize = function($elem) { 618 var getFullscreenImgSize = function($elem) {
623 var $win = $(window); 619 var $win = $(window);
729 var birdSettings = $.extend({}, settings, settings.birdDivOptions); 725 var birdSettings = $.extend({}, settings, settings.birdDivOptions);
730 var birdUrl = settings.scalerBaseUrl + '?' + getParamString(birdSettings, keys); 726 var birdUrl = settings.scalerBaseUrl + '?' + getParamString(birdSettings, keys);
731 // the bird's eye div 727 // the bird's eye div
732 var $birdDiv = $('<div class="birdview" style="display:none"/>'); 728 var $birdDiv = $('<div class="birdview" style="display:none"/>');
733 // the detail indicator frame 729 // the detail indicator frame
734 var $birdzoomDiv = $('<div class="birdzoom" style="position: absolute; background-color: transparent;"/>'); 730 var $birdzoomDiv = $('<div class="birdzoom" style="display:none; position:absolute; background-color:transparent;"/>');
735 // the small image 731 // the small image
736 var $birdImg = $('<img class="birdimg"/>'); 732 var $birdImg = $('<img class="birdimg"/>');
737 $elem.append($birdDiv); 733 $elem.append($birdDiv);
738 $birdDiv.append($birdzoomDiv); 734 $birdDiv.append($birdzoomDiv);
739 $birdDiv.append($birdImg); 735 $birdDiv.append($birdImg);
736 $birdzoomDiv.css(data.settings.birdIndicatorStyle);
737 // $birdzoomDiv.offset($birdDiv.offset());
738 // $birdzoomDiv.width($birdDiv.width());
739 // $birdzoomDiv.height($birdDiv.height());
740 data.$birdDiv = $birdDiv; 740 data.$birdDiv = $birdDiv;
741 data.$birdImg = $birdImg; 741 data.$birdImg = $birdImg;
742 $birdImg.load(birdImgLoadedHandler(data)); 742 $birdImg.load(birdImgLoadedHandler(data));
743 $birdImg.attr('src', birdUrl); 743 $birdImg.attr('src', birdUrl);
744 if (data.settings.isBirdDivVisible) { 744 if (data.settings.isBirdDivVisible) {
826 // create Transform from current area and picsize 826 // create Transform from current area and picsize
827 data.imgTrafo = getImgTrafo($img, data.zoomArea, data); 827 data.imgTrafo = getImgTrafo($img, data.zoomArea, data);
828 // display marks 828 // display marks
829 renderMarks(data); 829 renderMarks(data);
830 //digilib.showArrows(); // show arrow overlays for zoom navigation 830 //digilib.showArrows(); // show arrow overlays for zoom navigation
831 var $birdImg = data.$birdImg;
832 if ($birdImg) {
833 $birdImg.triggerHandler('load');
834 };
831 }; 835 };
832 }; 836 };
833 837
834 // returns function for load event of bird's eye view img 838 // returns function for load event of bird's eye view img
835 var birdImgLoadedHandler = function (data) { 839 var birdImgLoadedHandler = function (data) {
836 var $img = data.$birdImg; 840 var $img = data.$birdImg;
837 return function () { 841 return function () {
838 if (!$img) return; 842 if (!$img) return;
839 console.debug("birdimg loaded! this=", this, " data=", data); 843 // console.debug("birdimg loaded! this=", this, " data=", data);
840 // create Transform from current area and picsize 844 // create Transform from current area and picsize
841 data.birdTrafo = getImgTrafo($img, MAX_ZOOMAREA); 845 data.birdTrafo = getImgTrafo($img, MAX_ZOOMAREA);
842 // display red indicator around zoomarea 846 // display red indicator around zoomarea
843 renderBirdArea(data); 847 renderBirdArea(data);
844 }; 848 };
865 869
866 var renderBirdArea = function (data) { 870 var renderBirdArea = function (data) {
867 var $ind = data.$birdDiv.find('div.birdzoom'); 871 var $ind = data.$birdDiv.find('div.birdzoom');
868 var zoomArea = data.zoomArea; 872 var zoomArea = data.zoomArea;
869 var indRect = data.birdTrafo.transform(zoomArea); 873 var indRect = data.birdTrafo.transform(zoomArea);
870 if (isFullArea(zoomArea)) return $ind.hide(); 874 var coords = {
871 // TODO: set the coordinates all in one call? 875 left : indRect.x-2, // acount for frame width
872 $ind.width(indRect.width); 876 top : indRect.y-2,
873 $ind.height(indRect.height); 877 width : indRect.width,
874 // offset minus frame width 878 height: indRect.height
875 $ind.offset({ left : indRect.x-2, top : indRect.y-2 }); 879 };
876 $ind.css(data.settings.birdIndicatorStyle); 880 var normalSize = isFullArea(zoomArea);
881 if (data.settings.interactionMode === 'fullscreen') {
882 // no animation for fullscreen
883 if (normalSize) return $ind.hide();
884 $ind.width(coords.width);
885 $ind.height(coords.height);
886 $ind.offset(coords);
887 $ind.show();
888 return;
889 };
890 // nice animation for embedded mode :-)
891 var makeCompleteFunction = function($ind, normalSize) {
892 return function() {
893 if (normalSize) $ind.hide(); }
894 };
895 var opts = {
896 'complete' : makeCompleteFunction($ind, normalSize)
897 };
898 if (!normalSize && $ind.css('display') === 'none') $ind.show();
899 $ind.animate(coords, opts);
877 }; 900 };
878 901
879 // zooms by the given factor 902 // zooms by the given factor
880 var zoomBy = function(data, factor) { 903 var zoomBy = function(data, factor) {
881 var area = data.zoomArea; 904 var area = data.zoomArea;