Mercurial > hg > digilib

comparison client/digitallibrary/jquery/jquery.digilib.js @ 651:2d85d820501d jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
split bird's view code in two more parts, analog to scaler-img code. setupBirdDiv sets onload handler on bird img, onload handler calls renderBirdArea. both handlers use common transform setup code.
author robcast
date Fri, 21 Jan 2011 14:53:37 +0100
parents e328273b7ef4
children 9ec8f039e942
comparison
equal deleted inserted replaced
650:b6fdd915c7e8 651:2d85d820501d
645 // use only the relevant parameters 645 // use only the relevant parameters
646 var keys = ['fn','pn','dw','dh']; 646 var keys = ['fn','pn','dw','dh'];
647 var birdSettings = $.extend({}, settings, settings.birdDivOptions); 647 var birdSettings = $.extend({}, settings, settings.birdDivOptions);
648 var birdUrl = settings.scalerBaseUrl + '?' + getParamString(birdSettings, keys); 648 var birdUrl = settings.scalerBaseUrl + '?' + getParamString(birdSettings, keys);
649 // the bird's eye div 649 // the bird's eye div
650 var $birdviewDiv = $('<div class="birdview" style="display:none"/>'); 650 var $birdDiv = $('<div class="birdview" style="display:none"/>');
651 // the detail indicator frame 651 // the detail indicator frame
652 var $birdzoomDiv = $('<div class="birdzoom" style="position: absolute; background-color: transparent;"/>'); 652 var $birdzoomDiv = $('<div class="birdzoom" style="position: absolute; background-color: transparent;"/>');
653 // the small image 653 // the small image
654 var $birdImg = $('<img class="birdimg"/>'); 654 var $birdImg = $('<img class="birdimg"/>');
655 $elem.append($birdviewDiv); 655 $elem.append($birdDiv);
656 $birdviewDiv.append($birdzoomDiv); 656 $birdDiv.append($birdzoomDiv);
657 $birdviewDiv.append($birdImg); 657 $birdDiv.append($birdImg);
658 data.$birdDiv = $birdDiv;
659 data.$birdImg = $birdImg;
660 $birdImg.load(birdImgLoadedHandler(data));
658 $birdImg.attr('src', birdUrl); 661 $birdImg.attr('src', birdUrl);
659 if (data.settings.isBirdDivVisible) { 662 if (data.settings.isBirdDivVisible) {
660 $birdviewDiv.fadeIn(); 663 $birdDiv.fadeIn();
661 } 664 }
662 data.$birdDiv = $birdviewDiv;
663 }; 665 };
664 666
665 // creates HTML structure for the about view in elem 667 // creates HTML structure for the about view in elem
666 var setupAboutDiv = function (data) { 668 var setupAboutDiv = function (data) {
667 var $elem = data.$elem; 669 var $elem = data.$elem;
702 $div.fadeOut(); 704 $div.fadeOut();
703 } 705 }
704 return isVisible; 706 return isVisible;
705 }; 707 };
706 708
707 // shows bird view indicator 709 // create Transform from area and $img
708 var showBirdIndicator = function (data) { 710 var getImgTrafo = function ($img, area) {
709 if (!data.settings.isBirdDivVisible || isFullArea(data)) return; 711 var picrect = geom.rectangle($img);
710 // TODO: more conditions: original size, pixel by pixel? 712 var trafo = geom.transform();
711 var $birdDiv = data.$birdDiv; 713 // subtract area offset and size
712 var $birdImg = $birdDiv.find('img.birdimg'); 714 trafo.concat(trafo.getTranslation(geom.position(-area.x, -area.y)));
713 var pos = $birdImg.offset(); 715 trafo.concat(trafo.getScale(geom.size(1/area.width, 1/area.height)));
714 var birdRect = geom.rectangle(pos.left, pos.top, $birdImg.width(), $birdImg.height()); 716 // scale to screen size
715 var area = data.zoomArea; 717 trafo.concat(trafo.getScale(picrect));
716 // TODO: couldn't we do a trafo here? :-) 718 trafo.concat(trafo.getTranslation(picrect));
717 var indRect = geom.rectangle( 719 return trafo;
718 birdRect.x + birdRect.width * area.x, 720 };
719 birdRect.y + birdRect.height * area.y, 721
720 birdRect.width * area.width,
721 birdRect.height * area.height
722 );
723 var $ind = $birdDiv.find('div.birdzoom');
724 // TODO: set the coordinates all in one call?
725 $ind.width(indRect.width);
726 $ind.height(indRect.height);
727 $ind.offset({ left : indRect.x, top : indRect.y });
728 // TODO: how to override this style with a CSS stylesheet?
729 if (!$ind.css('border')) $ind.css('border', '2px solid #ff0000');
730 return;
731 };
732
733 // returns function for load event of scaler img 722 // returns function for load event of scaler img
734 var scalerImgLoadedHandler = function (data) { 723 var scalerImgLoadedHandler = function (data) {
735 var settings = data.settings;
736 var $elem = data.$elem;
737 var $img = data.$img; 724 var $img = data.$img;
738
739 return function () { 725 return function () {
740 console.debug("img loaded! this=", this, " data=", data); 726 console.debug("img loaded! this=", this, " data=", data);
741 var area = data.zoomArea;
742 // create Transform from current area and picsize 727 // create Transform from current area and picsize
743 var picrect = geom.rectangle($img); 728 data.imgTrafo = getImgTrafo($img, data.zoomArea);
744 var trafo = geom.transform();
745 // subtract area offset and size
746 trafo.concat(trafo.getTranslation(geom.position(- area.x, - area.y)));
747 trafo.concat(trafo.getScale(geom.size(1/area.width, 1/area.height)));
748 // scale to screen size
749 trafo.concat(trafo.getScale(picrect));
750 trafo.concat(trafo.getTranslation(picrect));
751 data.imgTrafo = trafo;
752 // display marks 729 // display marks
753 renderMarks(data); 730 renderMarks(data);
754 //digilib.showArrows(); // show arrow overlays for zoom navigation 731 //digilib.showArrows(); // show arrow overlays for zoom navigation
755 // done -- hide about div --- 732 };
756 // --- why? This only leads to suprise effects when displayed programmatically 733 };
757 // settings.isAboutDivVisible = showDiv(null, data.$aboutDiv, 0); 734
758 showBirdIndicator(data); 735 // returns function for load event of bird's eye view img
736 var birdImgLoadedHandler = function (data) {
737 var $img = data.$birdImg;
738 return function () {
739 console.debug("birdimg loaded! this=", this, " data=", data);
740 // create Transform from current area and picsize
741 data.birdTrafo = getImgTrafo($img, MAX_ZOOMAREA);
742 // display marks
743 renderBirdArea(data);
759 }; 744 };
760 }; 745 };
761 746
762 // place marks on the image 747 // place marks on the image
763 var renderMarks = function (data) { 748 var renderMarks = function (data) {
775 $mark.offset({left : mpos.x, top : mpos.y}); 760 $mark.offset({left : mpos.x, top : mpos.y});
776 } 761 }
777 } 762 }
778 }; 763 };
779 764
765 var renderBirdArea = function (data) {
766 var $ind = data.$birdDiv.find('div.birdzoom');
767 var indRect = data.birdTrafo.transform(data.zoomArea);
768 // TODO: set the coordinates all in one call?
769 $ind.width(indRect.width);
770 $ind.height(indRect.height);
771 $ind.offset({ left : indRect.x, top : indRect.y });
772 // TODO: how to override this style with a CSS stylesheet?
773 if (!$ind.css('border')) $ind.css('border', '2px solid #ff0000');
774 }
775
780 // zooms by the given factor 776 // zooms by the given factor
781 var zoomBy = function(data, factor) { 777 var zoomBy = function(data, factor) {
782 var area = data.zoomArea; 778 var area = data.zoomArea;
783 var newarea = area.copy(); 779 var newarea = area.copy();
784 // scale 780 // scale