digilib-old: client/digitallibrary/greyskin/dllib.js comparison

comparison client/digitallibrary/greyskin/dllib.js @ 452:6edd60cfa47f

ongoing experimental intermediary release - more cleanup on object stuff - new mark image - menu is now fixed and tries to work in IE

author	robcast
date	Tue, 24 Jan 2006 21:17:44 +0100
parents	a6c83fa262b2
children	9c16290e6f44

comparison

equal deleted inserted replaced

-:a6c83fa262b2
+:6edd60cfa47f
 */
 digilibVersion = "Digilib NG";
 dllibVersion = "2.040";
-MAX_AREA = new Rectangle(0.0, 0.0, 1.0, 1.0);
-// default inset (for scalerImg relativ to scalerDiv
-INSET = 40; // because of scrollbars of main window and scaler [Firefox bug?]
-// mouse drag area that counts as one click
-MIN_AREA_SIZE = 3 * 3 + 1;
-// standard zoom factor
-ZOOMFACTOR = Math.sqrt(2);
-// bird's eye view dimensions
-BIRD_MAXX = 100;
-BIRD_MAXY = 100;
-// with of arrow bars
-ARROW_WIDTH = 32;
-// with of calibration bar
-CALIBRATION_WIDTH = 64;
 function identify() {
 // used for identifying a digilib instance
 // Relato uses that function - lugi
 return digilibVersion;
 }
 	this.PARAM_IMAGE = 8;
 	this.PARAM_DPI = 16;
 	this.PARAM_SIZE = 32;
 	this.PARAM_MARK = 64;
 	this.PARAM_PAGES = 128;
-	this.PARAM_ALL = 255;
+	this.PARAM_CLIENT = 256;
 	/* request parameters */
 	with (this) {
 	// file
 	    define('fn', '',    PARAM_FILE);
 	    define('pn', '1',   PARAM_FILE);
 	    define('mk', '', PARAM_MARK);
 	// pages total
 	    define('pt', '0', PARAM_PAGES);
 	// size
 	    define('ws', '1.0', PARAM_SIZE);
+	    // client side options
+	    define('clop', '', PARAM_CLIENT);
 	}
 	return this;
 }
 DLParameters.prototype = new Parameters();
 // move the inherited getAll because we need it later
 DLParameters.prototype._getAll = Parameters.prototype.getAll;
 DLParameters.prototype.getAll = function(paDetail, moDetail, digilib) {
+	if (!digilib) digilib = dl;
 	// get Flags and Marks first
-	if (!digilib) digilib = dl;
 var mo = digilib.flags.getAll(moDetail);
 this.set("mo", mo);
+var clop = digilib.opts.getAll();
+this.set("clop", clop);
 var mk = digilib.marks.getAll();
 this.set("mk", mk);
 var ret = this._getAll(paDetail);
 	return ret;
 }
 /*
 * Digilib -- digilib base class
 */
 function Digilib() {
 if (!baseLibVersion) alert("ERROR: baselib.js not loaded!");
+/* constants */
+this.MAX_AREA = new Rectangle(0.0, 0.0, 1.0, 1.0);
+	// default inset (for scalerImg relativ to scalerDiv
+	this.INSET = 40; // because of scrollbars of main window and scaler [Firefox bug?]
+	// mouse drag area that counts as one click
+	this.MIN_AREA_SIZE = 3 * 3 + 1;
+	// standard zoom factor
+	this.ZOOMFACTOR = Math.sqrt(2);
+	// bird's eye view dimensions
+	this.BIRD_MAXX = 100;
+	this.BIRD_MAXY = 100;
+	// witdh of arrow bars
+	this.ARROW_WIDTH = 32;
+	// width of calibration bar
+	this.CALIBRATION_WIDTH = 64;
+/* variables */
+this.fitOnlyWidth = false;
+this.fitOnlyHeight = false;
 this.trafo = null;
 	// page elements
 this.scalerDiv = null;
 this.scalerImg = null;
+this.buttons1Div = null;
+this.buttons2Div = null;
 /* parse parameters */
 // put the query parameters (sans "?") in the parameters array
 this.params = new DLParameters();
 this.params.parse(location.search.slice(1));
 // treat special parameters
 this.area = this.parseArea();
 this.marks = new Marks();
 this.marks.parse(this.params.get("mk"));
 this.flags = new DLFlags();
 this.flags.parse(this.params.get("mo"));
+	this.opts = new Flags();
+	this.opts.parse(this.params.get("clop"));
 	return this;
+}
+Digilib.prototype.setDLParam = function(e, s, relative) {
+// sets parameter based on HTML event
+var nam;
+var val;
+if (s.type && (s.type == "select-one")) {
+nam = s.name;
+val = s.options[s.selectedIndex].value;
+} else if (s.name && s.value) {
+nam = s.name;
+val = s.value;
+}
+if (nam && val) {
+dl.params.set(nam, val, relative);
+display();
+} else {
+alert("ERROR: unable to process event!");
+}
+return true;
 }
 Digilib.prototype.parseArea = function() {
 // returns area Rectangle from current parameters
 return new Rectangle(
 this.params.get("wx"),
 this.params.set("wy", cropFloat(rect.y));
 this.params.set("ww", cropFloat(rect.width));
 this.params.set("wh", cropFloat(rect.height));
 return true;
 }
 Digilib.prototype.parseTrafo = function(elem) {
 // returns Transform from current dlArea and picsize
 var picsize = getElementRect(elem);
 var trafo = new Transform();
 // subtract area offset and size
 // mirror
 //if (hasFlag("hmir")) trafo.m00 = - trafo.m00; // ??
 //if (hasFlag("vmir")) trafo.m11 = - trafo.m11; // ??
 return trafo;
 }
-Digilib.prototype.setDLParam = function(e, s, relative) {
-// sets parameter based on HTML event
-var nam;
-var val;
-if (s.type && (s.type == "select-one")) {
-nam = s.name;
-val = s.options[s.selectedIndex].value;
-} else if (s.name && s.value) {
-nam = s.name;
-val = s.value;
-}
-if (nam && val) {
-dl.params.set(nam, val, relative);
-display();
-} else {
-alert("ERROR: unable to process event!");
-}
-return true;
-}
 Digilib.prototype.onLoad = function() {
 	// initialize digilib; called by body.onload
 	this.scalerDiv = getElement("scaler", true);
 this.scalerImg = getElement("pic", true);
-if (this.scalerImg == null && this.scalerDiv) {
+this.buttons1Div = getElement("buttons", true);
+this.buttons2Div = getElement("options", true);
+/* if (this.scalerImg == null && this.scalerDiv) {
 // in N4 pic is in the scaler layer
 this.scalerImg = this.scalerDiv.document.images[0];
-}
+} */
 if ((!this.scalerImg)||(!this.scalerDiv)) {
 alert("Sorry, digilib doesn't work here!");
 return false;
 }
+// fix fixed menus
+var ms1 = getElementSize(this.buttons1Div);
+var ms2 = getElementSize(this.buttons2Div);
+var maxh = (ms1.height > ms2.height) ? ms1.height : ms2.height;
+var wins = getWinSize();
+if ((wins.height <= maxh) || browserType.isIE) {
+		// unlock fixed menus to absolute
+		this.buttons1Div.style.position = "absolute";
+		this.buttons2Div.style.position = "absolute";
+	}
 	this.setScalerImage();	// setzt auch onImgLoad
-	this.loadBirdImage();	// l?dt das Bird's Eye Bild
+	this.setBirdImage();	// l?dt das Bird's Eye Bild
 }
-Digilib.prototype.setScalerImage = function(detail) {
+Digilib.prototype.setScalerImage = function() {
 	// set the scaler image source (needs the browser size)
-var picsize = bestPicSize(this.scalerDiv, 50);
+var picsize = bestPicSize(this.scalerDiv);
+var menusize = getElementSize(this.buttons1Div);
+// subtract menu width
+picsize.width -= menusize.width;
+picsize.height -= this.INSET;
+// compose Scaler URL
 var src = "../servlet/Scaler?"
-+ this.params.getAll(this.params.PARAM_ALL & ~(this.params.PARAM_MARK | this.params.PARAM_PAGES))
++ this.params.getAll(this.params.PARAM_ALL & ~(this.params.PARAM_MARK | this.params.PARAM_PAGES));
-+ "&dw=" + picsize.width
+if (this.opts.get('fitwidth')) {
-+ "&dh=" + picsize.height;
+		src += "&dw=" + picsize.width;
+} else if (this.opts.get('fitheight')) {
+		src += "&dh=" + picsize.height;
+	} else {
+		src += "&dw=" + picsize.width + "&dh=" + picsize.height;
+	}
 // debug(src);
 this.scalerImg.onload = onImgLoad;
 this.scalerImg.src = src;
 	var digilib = this;
 	// this is a local callback function that can use the current scope
 function onImgLoad() {
 		// make sure the image is loaded so we know its size
-	    if (defined(digilib.scalerImg.complete) && !digilib.scalerImg.complete && !digilib.browserType.isN4 ) {
+		/* this test seems to have problems sometimes :-(
-			alert("ERROR: the image seems not to be complete!?");
+	    if (defined(digilib.scalerImg.complete) && !digilib.scalerImg.complete) {
-		}
+			alert("ERROR: the image seems not to be complete in onImgLoad!?");
+		} */
 	    digilib.trafo = digilib.parseTrafo(digilib.scalerImg);
 	    // display marks
 	    digilib.renderMarks();
 		digilib.showBirdDiv(isBirdDivVisible);
 		digilib.showArrows();		// show arrow overlays for zoom navigation
 		digilib.moveCenter(true);	// click to move point to center
 		// new Slider("sizes", 1, 5, 2);
 	    focus();
 	}
 }
+Digilib.prototype.renderMarks = function() {
+// make sure the image is loaded so we know its size
+if (!this.trafo) {
+		alert("ERROR: trafo missing, cannot render marks!");
+		return;
+	}
+// debugProps(dlArea, "dlArea");
+for (var i = 0; i < this.marks.length; i++) {
+	    	var div = getElement("mark" + i, true) || createMarkDiv(i);
+	    	var mark = this.marks[i];
+	    	// debugProps(mark, "mark");
+	    	if (this.area.containsPosition(mark)) {
+	        	var mpos = this.trafo.transform(mark);
+	        	// debugProps(mark, "mpos");
+	       	// better not hide the marked spot (MR)
+	       	// suboptimal to place -5 pixels and not half size of mark-image
+	       	// mpos.x = mpos.x -5;
+	       	// mpos.y = mpos.y -5;
+	       	moveElement(div, mpos);
+	        showElement(div, true);
+	    } else {
+	        // hide the other marks
+	        showElement(div, false);
+	    }
+}
+}
 Digilib.prototype.display = function(detail, moDetail) {
 // redisplay the page
 var queryString = this.params.getAll(detail, moDetail);
 	location.href
 = location.protocol + "//"
 	    + location.host
 	    + location.pathname
 + "?" + queryString;
 }
-Digilib.prototype.renderMarks = function() {
-// make sure the image is loaded so we know its size
-if (!this.trafo) {
-		alert("ERROR: cannot render marks!");
-		return;
-	}
-// debugProps(dlArea, "dlArea");
-for (var i = 0; i < this.marks.length; i++) {
-	    	var div = getElement("mark" + i, true) || createMarkDiv(i);
-	    	var mark = this.marks[i];
-	    	// debugProps(mark, "mark");
-	    	if (this.area.containsPosition(mark)) {
-	        	var mpos = this.trafo.transform(mark);
-	        	// debugProps(mark, "mpos");
-	       	// suboptimal to place -5 pixels and not half size of mark-image
-	       	// better not hide the marked spot (MR)
-	       	// mpos.x = mpos.x -5;
-	       	// mpos.y = mpos.y -5;
-	       	moveElement(div, mpos);
-	        showElement(div, true);
-	    } else {
-	        // hide the other marks
-	        showElement(div, false);
-	    }
-}
-}
 /* **********************************************
 *     interactive digilib functions
 * ******************************************** */
-Digilib.prototype.setMark = function(reload) {
+Digilib.prototype.setMark = function() {
 // add a mark where clicked
 window.focus();
 this.moveCenter(false);
 // start event capturing
 registerEvent("mousedown", this.scalerDiv, markEvent);
 function markEvent(evt) {
 // event handler adding a new mark
 unregisterEvent("mousedown", digilib.scalerDiv, markEvent);
 digilib.marks.addEvent(evt);
-if ( defined(reload) && !reload ) {
-// don't redisplay
-digilib.renderMarks();
-return stopEvent(evt);
-}
 digilib.display();
 return stopEvent(evt);
 }
 }
-Digilib.prototype.removeMark = function(reload) {
+Digilib.prototype.removeMark = function() {
 // remove the last mark
 this.marks.pop();
-if (defined(reload)&&(!reload)) {
-// don't redisplay
-this.renderMarks();
-return;
-}
 this.display();
 }
 Digilib.prototype.zoomArea = function() {
 var pt1, pt2;
 window.focus();
 	// our own reference to this for the local function
 	var digilib = this;
-// mousedown handler: start moving
+	// mousedown handler: start moving
 function zoomStart(evt) {
 pt1 = evtPosition(evt);
 unregisterEvent("mousedown", overlay, zoomStart);
 unregisterEvent("mousedown", digilib.scalerImg, zoomStart);
 // setup and show zoom div
 registerEvent("mousemove", document, zoomMove);
 registerEvent("mouseup", document, zoomEnd);
 return stopEvent(evt);
 }
-// mouseup handler: end moving
+	// mouseup handler: end moving
 function zoomEnd(evt) {
 pt2 = evtPosition(evt);
 // assume a click if the area is too small (up to 3 x 3 pixel)
 var clickRect = new Rectangle(pt1, pt2);
 clickRect.normalize();
-if (clickRect.getArea() <= MIN_AREA_SIZE) return stopEvent(evt);
+if (clickRect.getArea() <= this.MIN_AREA_SIZE) return stopEvent(evt);
 // hide zoom div
 showElement(zoomdiv, false);
 showElement(overlay, false);
 // unregister events
 unregisterEvent("mousemove", document, zoomMove);
 digilib.params.set("ws", 1);
 digilib.display();
 return stopEvent(evt);
 }
-// mouse move handler
+	// mouse move handler
 function zoomMove(evt) {
 pt2 = evtPosition(evt);
 var rect = new Rectangle(pt1, pt2);
 rect.normalize();
 rect.clipTo(picRect);
 var newarea = this.area.copy();
 newarea.width /= factor;
 newarea.height /= factor;
 newarea.x -= 0.5 * (newarea.width - this.area.width);
 newarea.y -= 0.5 * (newarea.height - this.area.height);
-newarea = MAX_AREA.fit(newarea);
+newarea = this.MAX_AREA.fit(newarea);
 this.setParamFromArea(newarea);
 this.display();
 }
-Digilib.prototype.zoomFullpage = function() {
+Digilib.prototype.zoomFullpage = function(fit) {
 // zooms out to show the whole image
 this.params.set("wx", 0.0);
 this.params.set("wy", 0.0);
 this.params.set("ww", 1.0);
 this.params.set("wh", 1.0);
+if (fit == "width") {
+		this.opts.set('fitwidth');
+	} else if (fit == "height") {
+		this.opts.set('fitheight');
+	} else {
+		this.opts.reset('fitwidth');
+		this.opts.reset('fitheight');
+	}
 this.display();
 }
 Digilib.prototype.moveCenter = function(on) {
 	function moveCenterEvent(evt) {
 	    // move to handler
 	    var pt = digilib.trafo.invtransform(evtPosition(evt));
 	    var newarea = digilib.area.copy();
 		newarea.setCenter(pt);
-	    newarea.stayInside(MAX_AREA);
+	    newarea.stayInside(this.MAX_AREA);
 	    // newarea = dlMaxArea.fit(newarea);
 	    // debugProps(newarea, "newarea");
 	    // debugProps(dlArea, "dlArea");
 	    if (newarea.equals(digilib.area)) return; // keep event handler
 	    unregisterEvent("mousedown", digilib.scalerImg, moveCenterEvent);
 }
 Digilib.prototype.isFullArea = function(area) {
 if (!area) area = this.area;
 // pixel by pixel is not always full area
-return (area.width == 1.0) && (area.height == 1.0) && ! hasFlag("clip");
+return (area.width == 1.0) && (area.height == 1.0) && ! this.flags.get("clip");
 }
 Digilib.prototype.canMove = function(movx, movy) {
 if (this.isFullArea()) return false;
 var x2 = this.area.x + this.area.width;
 // move visible area by movx and movy (in units of ww, wh)
 if (!this.canMove(movx, movy)) return; // nothing to do
 var newarea = this.area.copy();
 newarea.x += parseFloat(movx)*this.area.width;
 newarea.y += parseFloat(movy)*this.area.height;
-newarea = MAX_AREA.fit(newarea);
+newarea = this.MAX_AREA.fit(newarea);
 // set parameters
 this.setParamFromArea(newarea);
 this.display();
 }
 + "//"
 + location.host
 + location.pathname;
 var hyperlinkRef = baseUrl;
 with (this.params) {
-		var ps = getAll(PARAM_ALL & ~(PARAM_DPI | PARAM_PAGES)); // all without ddpi, pt
+		// all without ddpi, pt
+		var ps = getAll(PARAM_ALL & ~(PARAM_DPI | PARAM_PAGES | PARAM_CLIENT));
 	}
 if (ps.length > 0) hyperlinkRef += "?" + ps;
 return hyperlinkRef;
 }
 moveElement(elem, aboutRect);
 }
 showElement(elem, show);
 }
-Digilib.prototype.loadBirdImage = function() {
+Digilib.prototype.setBirdImage = function() {
 var img = getElement("bird-image");
 var src = "../servlet/Scaler?"
 + this.params.getAll(this.params.PARAM_FILE)
-+ "&dw=" + BIRD_MAXX
++ "&dw=" + this.BIRD_MAXX
-+ "&dh=" + BIRD_MAXY;
++ "&dh=" + this.BIRD_MAXY;
 img.src = src;
 }
 Digilib.prototype.showBirdDiv = function(show) {
 // show or hide "bird's eye" div
 	showElement(arrow, show);
 	}
 Digilib.prototype.showArrows = function() {
 // show the 4 arrow bars on top of scaler img according to current dlArea
-if (defined(this.scalerImg.complete) && !this.scalerImg.complete && !browserType.isN4 ) {
-alert("ERROR: scaler img not complete in showArrows!");
-}
 	var r = getElementRect(this.scalerImg);
 this.showArrow('up',
-new Rectangle(r.x, r.y, r.width, ARROW_WIDTH),
+new Rectangle(r.x, r.y, r.width, this.ARROW_WIDTH),
 this.canMove(0, -1)
 );
 this.showArrow('down',
-new Rectangle(r.x, r.y + r.height - ARROW_WIDTH, r.width, ARROW_WIDTH),
+new Rectangle(r.x, r.y + r.height - this.ARROW_WIDTH, r.width, this.ARROW_WIDTH),
 this.canMove(0, 1)
 );
 this.showArrow('left',
-new Rectangle(r.x, r.y, ARROW_WIDTH, r.height),
+new Rectangle(r.x, r.y, this.ARROW_WIDTH, r.height),
 this.canMove(-1, 0)
 );
 this.showArrow('right',
-new Rectangle(r.x + r.width - ARROW_WIDTH, r.y, ARROW_WIDTH, r.height),
+new Rectangle(r.x + r.width - this.ARROW_WIDTH, r.y, this.ARROW_WIDTH, r.height),
 this.canMove(1, 0)
 );
 	}
 Digilib.prototype.calibrate = function(direction) {
 }
 else this.flags.reset("clip");
 }
 Digilib.prototype.pageWidth = function() {
-var divSize = getElementSize(this.scalerDiv);
+	this.zoomFullpage('width');
-divSize.width -= INSET; // allow for scrollbars [Firefox bug?]
-var imgSize = getElementSize(this.scalerImg);
-if (imgSize.width < divSize.width) {
-this.params.set("ws", cropFloat(divSize.width / imgSize.width));
-this.display(this.params.PARAM_ALL & ~this.params.PARAM_DIM); // no zoom
-};
-// TODO: how to calculate correct width if zoom is on? (plus size?)
 }
 Digilib.prototype.resize = function(factor) {
 this.params.set("ws", factor);
 this.showSizeMenu(false);