--- zogiLib/js/Attic/navigation.js 2004/03/25 18:07:37 1.1.1.1 +++ zogiLib/js/Attic/navigation.js 2004/04/16 14:07:08 1.3 @@ -1,5 +1,4 @@ /* - Copyright (C) 2003 WTWG, Uni Bern This program is free software; you can redistribute it and/or @@ -17,173 +16,551 @@ along with this program; if not, write t Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA Author: Christian Luginbuehl, 01.05.2003 , Version Alcatraz 0.4 -Changed for digiLib in Zope by DW 24.03.2004 +Changed for digiLib in Zope by DW 24.03.2004, ROC 09.04.2004 */ var ZOOMFACTOR = Math.sqrt(2); -dlParams = new Object(); - -function newParameter(name, value, defaultValue, detail) { - - if ( !dlParams[name] ) { +var dlParams = new Object(); +var dlMarks = new Array(); +var dlArea = new Rectangle(0.0, 0.0, 1.0, 1.0); +var dlMaxArea = new Rectangle(0.0, 0.0, 1.0, 1.0); +var dlFlags = new Object(); +var dlTrafo = new Transform(); + +// fixes for silly browsers +if (! Array.prototype.push) { + Array.prototype.push = function(val) { + this[this.length] = val; + } +} - dlParams[name] = new Object(); +// auxiliary function to crop senseless precision +function cropFloat(x) { + return parseInt(10000*x)/10000; +} - dlParams[name].value = value; - dlParams[name].defaultValue = defaultValue; - dlParams[name].detail = detail; +function newParameter(name, defaultValue, detail) { + // create a new parameter with a name and a default value + if ( !dlParams[name] ) { + dlParams[name] = new Object(); + dlParams[name].defaultValue = defaultValue; + dlParams[name].hasValue = false; + dlParams[name].value = defaultValue; + dlParams[name].detail = detail; + return dlParams[name]; + } else { + alert("Fatal: An object with name '" + name + "' already exists - cannot recreate!"); + return false; + } +} - return dlParams[name]; +function getParameter(name) { + // returns the named parameter value or its default value + if (dlParams[name]) { + if (dlParams[name].hasValue) { + return dlParams[name].value; + } else { + return dlParams[name].defaultValue; + } + } else { + return false; + } +} - } else { +function setParameter(name, value) { + // sets parameter value + if (dlParams[name]) { + dlParams[name].value = value; + dlParams[name].hasValue = true; + } +} - alert("Fatal: An object with name '" + name + "' already exists - cannot recreate!"); - return false; +function getAllParameters(detail) { + // returns a string of all parameters in query format + var params = new Array(); + for ( param in dlParams ) { + if ((dlParams[param].detail <= detail)&&(dlParams[param].hasValue)) { + var val = getParameter(param); + if (val != "") { + params.push(param + "=" + val); + } + } + } + return params.join("&"); +} - } +function parseParameters(query) { + // gets parameter values from query format string + var params = query.split("&"); + for (var i = 0; i < params.length; i++) { + var keyval = params[i].split("="); + if (keyval.length == 2) { + setParameter(keyval[0], keyval[1]); + } + } } -function getParameter(name) { +function parseArea() { + // returns area Rectangle from current parameters + return new Rectangle(getParameter("wx"), getParameter("wy"), getParameter("ww"), getParameter("wh")); +} + +function setParamFromRect(rect) { + // sets digilib wx etc. from rect + setParameter("wx", cropFloat(rect.x)); + setParameter("wy", cropFloat(rect.y)); + setParameter("ww", cropFloat(rect.width)); + setParameter("wh", cropFloat(rect.height)); +} + +function parseTrafo() { + // returns Transform from current dlArea and picsize + var picsize = getElementSize("scaler"); + var trafo = new Transform(); + // subtract area offset and size + trafo.concat(getTranslation(new Position(-dlArea.x, -dlArea.y))); + trafo.concat(getScale(new Size(1/dlArea.width, 1/dlArea.height))); + // scale to screen size + trafo.concat(getScale(picsize)); + // rotate + //trafo.concat(getRotation(- getParameter("rot"), new Position(0.5*picsize.width, 0.5*picsize.height))); + // mirror + //if (hasFlag("hmir")) { + //trafo.m00 = - trafo.m00; + //} + //if (hasFlag("vmir")) { + //trafo.m11 = - trafo.m11; + //} + return trafo; +} + +function parseMarks() { + // returns marks array from current parameters + var marks = new Array(); + var ma = getParameter("mk").split(";"); + for (var i = 0; i < ma.length ; i++) { + var pos = ma[i].split("/"); + if (pos.length > 1) { + marks.push(new Position(pos[0], pos[1])); + } + } + return marks; +} - if ( dlParams[name] ) { - return dlParams[name].value; - } else { - return false; - } +function getAllMarks() { + // returns a string with all marks in query format + var marks = new Array(); + for (var i = 0; i < dlMarks.length; i++) { + marks.push(cropFloat(dlMarks[i].x) + "/" + cropFloat(dlMarks[i].y)); + } + return marks.join(";"); } +function addMark(x, y) { + // add a mark + dlMarks.push(new Position(x, y)); + setParameter("mk", getAllMarks()); +} +function deleteMark() { + // delete the last mark + dlMarks.pop(); + setParameter("mk", getAllMarks()); +} -function listParametersAsString() { +function hasFlag(mode) { + // returns if mode flag is set + return (dlFlags[mode] && (dlFlags[mode] != null)); +} - var params = new Array(); +function addFlag(mode) { + // add a mode flag + dlFlags[mode] = mode; +} - for ( param in dlParams ) { - params.push(param); - } +function removeFlag(mode) { + // remove a mode flag + if (dlFlags[mode]) { + dlFlags[mode] = null; + } +} - return params.join(","); +function toggleFlag(mode) { + // change a mode flag + if (dlFlags[mode]) { + dlFlags[mode] = null; + } else { + dlFlags[mode] = mode; + } +} +function getAllFlags() { + // returns a string with all flags in query format + var fa = new Array(); + for (var f in dlFlags) { + if ((f != "")&&(dlFlags[f] != null)) { + fa.push(f); + } + } + return fa.join(","); } +function parseFlags() { + // sets dlFlags from the current parameters + var flags = new Object(); + var fa = getParameter("mo").split(","); + for (var i = 0; i < fa.length ; i++) { + var f = fa[i]; + if (f != "") { + flags[f] = f; + } + } + return flags; +} -function listParameters() { +/* + * Size class + */ +function Size(w, h) { + this.width = parseFloat(w); + this.height = parseFloat(h); +} - var params = new Array(); +/* + * Position class + */ +function Position(x, y) { + this.x = parseFloat(x); + this.y = parseFloat(y); +} - for ( param in dlParams ) { - params.push(param); - } +/* + * Rectangle class + */ +function Rectangle(x, y, w, h) { + this.x = parseFloat(x); + this.y = parseFloat(y); + this.width = parseFloat(w); + this.height = parseFloat(h); +} +Rectangle.prototype.copy = function() { + // returns a copy of this Rectangle + return new Rectangle(this.x, this.y, this.width, this.height); +} +Rectangle.prototype.containsPosition = function(pos) { + // returns if the given Position lies in this Rectangle + return ((pos.x >= this.x)&&(pos.y >= this.y)&&(pos.x <= this.x+this.width)&&(pos.y <= this.y+this.width)); +} +Rectangle.prototype.intersect = function(rect) { + // returns the intersection of the given Rectangle and this one + var sec = rect.copy(); + if (sec.x < this.x) { + sec.width = sec.width - (this.x - sec.x); + sec.x = this.x; + } + if (sec.y < this.y) { + sec.height = sec.height - (this.y - sec.y); + sec.y = this.y; + } + if (sec.x + sec.width > this.x + this.width) { + sec.width = (this.x + this.width) - sec.x; + } + if (sec.y + sec.height > this.y + this.height) { + sec.height = (this.y + this.height) - sec.y; + } + return sec; +} +Rectangle.prototype.fit = function(rect) { + // returns a Rectangle that fits into this one (by moving first) + var sec = rect.copy(); + sec.x = Math.max(sec.x, this.x); + sec.x = Math.max(sec.x, this.x); + if (sec.x + sec.width > this.x + this.width) { + sec.x = this.x + this.width - sec.width; + } + if (sec.y + sec.height > this.y + this.height) { + sec.y = this.y + this.height - sec.height; + } + return sec.intersect(this); +} - return params; +/* + * Transform class + */ +function Transform() { + this.m00 = 1.0; + this.m01 = 0.0; + this.m02 = 0.0; + this.m10 = 0.0; + this.m11 = 1.0; + this.m12 = 0.0; + this.m20 = 0.0; + this.m21 = 0.0; + this.m22 = 1.0; +} +Transform.prototype.concat = function(traf) { + for (var i = 0; i < 3; i++) { + for (var j = 0; j < 3; j++) { + var c = 0.0; + for (var k = 0; k < 3; k++) { + c += traf["m"+i+k] * this["m"+k+j]; + } + this["m"+i+j] = c; + } + } +} +Transform.prototype.transform = function(pos) { + var x = this.m00 * pos.x + this.m01 * pos.y + this.m02; + var y = this.m10 * pos.x + this.m11 * pos.y + this.m12; + return new Position(x, y); +} +Transform.prototype.invtransform = function(pos) { + var det = this.m00 * this.m11 - this.m01 * this.m10; + var x = (this.m11 * pos.x - this.m01 * pos.y - this.m11 * this.m02 + this.m01 * this.m12) / det; + var y = (- this.m10 * pos.x + this.m00 * pos.y + this.m10 * this.m02 - this.m00 * this.m12) / det; + return new Position(x, y); +} +function getRotation(angle, pos) { + var traf = new Transform(); + if (angle != 0) { + var t = 2.0 * Math.PI * parseFloat(angle) / 360.0; + traf.m00 = Math.cos(t); + traf.m01 = - Math.sin(t); + traf.m10 = Math.sin(t); + traf.m11 = Math.cos(t); + traf.m02 = pos.x - pos.x * Math.cos(t) + pos.y * Math.sin(t); + traf.m12 = pos.y - pos.x * Math.sin(t) - pos.y * Math.cos(t); + } + return traf; +} +function getTranslation(pos) { + var traf = new Transform(); + traf.m02 = pos.x; + traf.m12 = pos.y; + return traf; +} +function getScale(size) { + var traf = new Transform(); + traf.m00 = size.width; + traf.m11 = size.height; + return traf; +} + +function getElement(tagid) { + // returns the named element object + if (document.all) { + return document.all[tagid]; + } else if (document.getElementById) { + return document.getElementById(tagid); + } else { + return document[tagid]; + } +} +function getElementSize(tagid) { + // returns a Rectangle with the size and position of the named element + var x = 0; + var y = 0; + var width = 0; + var height = 0; + var elem = getElement(tagid); + if (elem.offsetWidth) { + x = parseInt(elem.offsetLeft); + y = parseInt(elem.offsetTop); + width = parseInt(elem.offsetWidth); + height = parseInt(elem.offsetHeight); + } else { + x = parseInt(elem.left); + y = parseInt(elem.top); + width = parseInt(elem.clip.width); + height = parseInt(elem.clip.height); + } + return new Rectangle(x, y, width, height); } +function moveElement(tagid, pos) { + // moves the named element to the indicated position + var elem = getElement(tagid); + if (elem.style) { + elem.style.left = pos.x; + elem.style.top = pos.y; + } else { + alert("moveelement: no style property!"); + } +} -function init() { +function showElement(tagid, show) { + // shows or hides the named element + var elem = getElement(tagid); + if (elem.style) { + if (show) { + elem.style.visibility = "visible"; + } else { + elem.style.visibility = "hidden"; + } + } else { + alert("showelement: no style property!"); + } +} - // give a name to the window containing digilib - this way one can test if there is already a - // digilib-window open and replace the contents of it (ex. digicat) - top.window.name = "digilib"; +function registerMouseDown(tagid, handler) { + // register a mouse down event handler on the indicated element + if ( document.all ) { + document.all[tagid].onmousedown = handler; + } else if (document.getElementById) { + document.getElementById(tagid).addEventListener("mousedown", handler, true); + } else { + document[tagid].captureEvents(Event.MOUSEDOWN); + document[tagid].onmousedown = handler; + } +} +function unregisterMouseDown(tagid, handler) { + // unregister the mouse down event handler + if ( document.all ) { + document.all[tagid].onmousedown = null; + } else if (document.getElementById) { + document.getElementById(tagid).removeEventListener("mousedown", handler, true); + } else { + document[tagid].releaseEvents(Event.MOUSEDOWN); + } +} - placeMarks(); - - if ( document.all ) { - this.document.onkeypress = parseKeypress; - } else if ( typeof(document.addEventListener) == "function" ) { - this.document.addEventListener('keypress', parseKeypress, true); - } else { - window.captureEvents(Event.KEYDOWN); - window.onkeydown = parseKeypress; - } - - focus(); +function registerMouseMove(tagid, handler) { + // register a mouse move event handler on the indicated element + if ( document.all ) { + document.all[tagid].onmousemove = handler; + } else if (document.getElementById) { + document.getElementById(tagid).addEventListener("mousemove", handler, true); + } else { + document[tagid].captureEvents(Event.MOUSEMOVE); + document[tagid].onmousemove = handler; + } } +function unregisterMouseMove(tagid, handler) { + // unregister the mouse move event handler + if ( document.all ) { + document.all[tagid].onmousemove = null; + } else if (document.getElementById) { + document.getElementById(tagid).removeEventListener("mousemove", handler, true); + } else { + document[tagid].releaseEvents(Event.MOUSEMOVE); + } +} -function display(detail) { +function registerKeyDown(handler) { + // register a key down handler + if ( document.all ) { + this.document.onkeypress = handler + } else if ( typeof(document.addEventListener) == "function" ) { + this.document.addEventListener('keypress', handler, true); + } else { + window.captureEvents(Event.KEYDOWN); + window.onkeydown = handler; + } +} - var queryString = ''; +function getWinSize() { + // returns a Size with the current window size (from www.quirksmode.org) + var wsize = new Size(100, 100); + if (self.innerHeight) { + // all except Explorer + wsize.width = self.innerWidth; + wsize.height = self.innerHeight; + } else if (document.documentElement && document.documentElement.clientHeight) { + // Explorer 6 Strict Mode + wsize.width = document.documentElement.clientWidth; + wsize.height = document.documentElement.clientHeight; + } else if (document.body) { + // other Explorers + wsize.width = document.body.clientWidth; + wsize.height = document.body.clientHeight; + } + return wsize; +} - for ( param in dlParams ) { +function bestPicSize(tagid) { + // returns a Size with the best image size for the given tagid + var inset = 5; + var ps = getWinSize(); + var scaler = document.getElementById(tagid); + ps.width = ps.width - scaler.offsetLeft - inset; + ps.height = ps.height - scaler.offsetTop - inset; + return ps; +} - if ( dlParams[param].defaultValue != dlParams[param].value ) { - if ( dlParams[param].detail <= detail ) { - queryString += "&" + param + "=" + dlParams[param].value; - } else { - queryString += "&" + param + "=" + dlParams[param].defaultValue; - } - } - } - // window size - var wwidth, wheight; - if (self.innerHeight) // all except Explorer - { - wwidth = self.innerWidth; - wheight = self.innerHeight; - } - else if (document.documentElement && document.documentElement.clientHeight) - // Explorer 6 Strict Mode - { - wwidth = document.documentElement.clientWidth; - wheight = document.documentElement.clientHeight; - } - else if (document.body) // other Explorers - { - wwidth = document.body.clientWidth; - wheight = document.body.clientHeight; - } - //queryString += "&dw=" + (wwidth-30) + "&dh=" + (wheight-30); # not needed DW +function init() { + // give a name to the window containing digilib - this way one can test if there is already a + // digilib-window open and replace the contents of it (ex. digicat) + top.window.name = "digilib"; + // put the query parameters (sans "&") in the parameters array + parseParameters(location.search.slice(1)); + // treat special parameters + dlMarks = parseMarks(); + dlArea = parseArea(); + dlFlags = parseFlags(); - queryString += "&lv=1"; + //registerKeyDown(parseKeypress); + + placeMarks(); - queryString = queryString.slice(1); + focus(); + return true; +} - location.href = location.protocol + "//" + location.host + location.pathname + "?" + queryString; +function display(detail) { + // redisplay the page + var queryString = getAllParameters(detail); + location.href = location.protocol + "//" + location.host + location.pathname + "?" + queryString; } -// constructor holding different values of a point -function Point(evt) { +/* + * Point class + */ +function Point() { +} +Point.prototype.setWithEvent = function(evt) { + // set point values from event - if ( document.all ) { + if ( document.all ) { - this.pageX = parseInt(document.body.scrollLeft+event.clientX); - this.pageY = parseInt(document.body.scrollLeft+event.clientY); + this.pageX = parseInt(document.body.scrollLeft+event.clientX); + this.pageY = parseInt(document.body.scrollLeft+event.clientY); - this.x = this.pageX-parseInt(document.all.scaler.offsetLeft); - this.y = this.pageY-parseInt(document.all.scaler.offsetTop); + this.x = this.pageX-parseInt(document.all.scaler.offsetLeft); + this.y = this.pageY-parseInt(document.all.scaler.offsetTop); - this.relX = cropFloat(parseFloat(dlParams.wx.value)+(dlParams.ww.value*this.x/document.all.scaler.offsetWidth)); - this.relY = cropFloat(parseFloat(dlParams.wy.value)+(dlParams.wh.value*this.y/document.all.scaler.offsetHeight)); + this.relX = cropFloat(parseFloat(dlParams.wx.value)+(dlParams.ww.value*this.x/document.all.scaler.offsetWidth)); + this.relY = cropFloat(parseFloat(dlParams.wy.value)+(dlParams.wh.value*this.y/document.all.scaler.offsetHeight)); - } else { + } else { - this.pageX = parseInt(evt.pageX); - this.pageY = parseInt(evt.pageY); + this.pageX = parseInt(evt.pageX); + this.pageY = parseInt(evt.pageY); - if ( typeof(document.getElementById) == "function" ) { + if ( typeof(document.getElementById) == "function" ) { - this.x = this.pageX-parseInt(document.getElementById("scaler").offsetLeft); - this.y = this.pageY-parseInt(document.getElementById("scaler").offsetTop); - // top("2"+"::"+this.pageX+"::"+parseInt(document.getElementById("scaler").offsetLeft)+'::'+document.getElementById("scaler").offsetLeft); - this.relX = cropFloat(parseFloat(dlParams.wx.value)+(dlParams.ww.value*this.x/document.pic.offsetWidth)); - this.relY = cropFloat(parseFloat(dlParams.wy.value)+(dlParams.wh.value*this.y/document.pic.offsetHeight)); + this.x = this.pageX-parseInt(document.getElementById("scaler").offsetLeft); + this.y = this.pageY-parseInt(document.getElementById("scaler").offsetTop); + // top("2"+"::"+this.pageX+"::"+parseInt(document.getElementById("scaler").offsetLeft)+'::'+document.getElementById("scaler").offsetLeft); + this.relX = cropFloat(parseFloat(dlParams.wx.value)+(dlParams.ww.value*this.x/document.pic.offsetWidth)); + this.relY = cropFloat(parseFloat(dlParams.wy.value)+(dlParams.wh.value*this.y/document.pic.offsetHeight)); - } else { + } else { - this.x = this.pageX-document.scaler.left; - this.y = this.pageY-document.scaler.top; + this.x = this.pageX-document.scaler.left; + this.y = this.pageY-document.scaler.top; - this.relX = cropFloat(parseFloat(dlParams.wx.value)+(dlParams.ww.value*this.x/document.scaler.clip.width)); - this.relY = cropFloat(parseFloat(dlParams.wy.value)+(dlParams.wh.value*this.y/document.scaler.clip.height)); + this.relX = cropFloat(parseFloat(dlParams.wx.value)+(dlParams.ww.value*this.x/document.scaler.clip.width)); + this.relY = cropFloat(parseFloat(dlParams.wy.value)+(dlParams.wh.value*this.y/document.scaler.clip.height)); - } + } } @@ -219,497 +596,273 @@ function page(page, details) { } -function digicat() { - - var url = baseUrl + "/digicat.jsp?" + dlParams.fn.value + "+" + dlParams.pn.value; - win = window.open(url, "digicat"); - win.focus(); - -} - function ref(select) { - - var hyperlinkRef = baseUrl + "?"; - hyperlinkRef += "fn="+dlParams.fn.value + "&pn=" + dlParams.pn.value + "&ws=" + dlParams.ws.value + "&mo="; - hyperlinkRef += dlParams.mo.value + "&mk=" + dlParams.mk.value; - - if ( (dlParams.wx.value != 0) || (dlParams.wy.value != 0) || (dlParams.ww.value != 1) || (dlParams.wh.value != 1) ) { - hyperlinkRef += "&wx=" + dlParams.wx.value + "&wy=" + dlParams.wy.value + "&ww=" + dlParams.ww.value; - hyperlinkRef += "&wh=" + dlParams.wh.value; - } - - if ( select == 0 ) { - prompt("Link for LaTeX-documents", "\\href{" + hyperlinkRef + "}{TEXT}"); - } else if ( select == 1 ) { - prompt("Link for HTML-documents", hyperlinkRef); - } + // open a dialog with a reference to the current digilib set + var hyperlinkRef = baseUrl + "?" + getAllParameters(9); + if ( select == 0 ) { + prompt("Link for LaTeX-documents", "\\href{" + hyperlinkRef + "}{TEXT}"); + } else if ( select == 1 ) { + prompt("Link for HTML-documents", hyperlinkRef); + } } function mark() { - - if ( dlParams.mk.value.split(";").length > 7 ) { - alert("Only 8 marks are possible at the moment!"); - return; - } - - function markEvent(evt) { - - var point = new Point(evt); - - if ( dlParams.mk.value != '' ) { - dlParams.mk.value += ';'; - } - - dlParams.mk.value += point.relX + '/' + point.relY; - - // stopping event capture - if ( document.all ) { - document.all.scaler.onmousedown = null; - } else if ( typeof(document.removeEventListener) == "function" ) { - document.getElementById("scaler").removeEventListener("mousedown", markEvent, true); - } else { - document.scaler.releaseEvents(Event.MOUSEDOWN); + // add a mark where clicked + if ( dlMarks.length > 7 ) { + alert("Only 8 marks are possible at the moment!"); + return; } - placeMarks(); - - } + function markEvent(evt) { + // event handler adding a new mark + unregisterMouseDown("scaler", markEvent); + var point = new Point(); + point.setWithEvent(evt); + var point2 = dlTrafo.invtransform(new Position(point.x, point.y)); + //alert("p0: "+point.x+", "+point.y); + //alert("p1: "+point.relX+", "+point.relY+" p2: "+point2.x+", "+point2.y); + var point3 = dlTrafo.transform(point2); + //alert("p3: "+point3.x+", "+point3.y); + //addMark(point.relX, point.relY); + addMark(point2.x, point2.y); + placeMarks(); + } - // starting event capture - if ( document.all ) { - document.all.scaler.onmousedown = markEvent; - } else if ( typeof(document.addEventListener) == "function" ) { - document.getElementById("scaler").addEventListener("mousedown", markEvent, true); - } else { - document.scaler.captureEvents(Event.MOUSEDOWN); - document.scaler.onmousedown = markEvent; - } + // starting event capture + registerMouseDown("scaler", markEvent); } +function unmark() { + // remove the last mark + deleteMark(); + placeMarks(); +} function placeMarks() { - - if ( dlParams.mk.value != '' ) { - - var mark = dlParams.mk.value.split(";"); - var mark_count = mark.length; - - // maximum of marks is 8 - // we do not report this error because this is already done in function 'mark' - if ( mark_count > 8 ) mark_count = 8; - - var picWidth = (document.all) ? parseInt(document.all.scaler.offsetWidth) : (typeof(document.getElementById) == "function") ? parseInt(document.pic.offsetWidth) : parseInt(document.pic.clip.width); - var picHeight = (document.all) ? parseInt(document.all.scaler.offsetHeight) : (typeof(document.getElementById) == "function") ? parseInt(document.pic.offsetHeight) : parseInt(document.pic.clip.height); - - // catch the s where the picture had not been loaded already and - // make a timeout so that the coordinates are calculated with the real dimensions - //if ( (document.pic.complete) || (picWidth > 30) ) { - if ( (picWidth > 30) ) { - - var xOffset = (document.all) ? parseInt(document.all.scaler.offsetLeft) : (typeof(document.getElementById) == "function") ? parseInt(document.getElementById('scaler').offsetLeft) : document.scaler.left; - var yOffset = (document.all) ? parseInt(document.all.scaler.offsetTop) : (typeof(document.getElementById) == "function") ? parseInt(document.getElementById('scaler').offsetTop) : document.scaler.top; - - for (var i = 0; i < mark_count; i++) { - mark[i] = mark[i].split("/"); - - if ( (mark[i][0] >= dlParams.wx.value) && (mark[i][1] >= dlParams.wy.value) && (mark[i][0] <= (parseFloat(dlParams.wx.value) + parseFloat(dlParams.ww.value))) && (mark[i][1] <= (parseFloat(dlParams.wy.value) + parseFloat(dlParams.wh.value))) ) { - - mark[i][0] = parseInt(xOffset + picWidth * (mark[i][0] - dlParams.wx.value)/dlParams.ww.value); - mark[i][1] = parseInt(yOffset + picHeight * (mark[i][1] - dlParams.wy.value)/dlParams.wh.value); - - if ( (document.all) || (typeof(document.getElementById) == "function") ) { - // suboptimal to place -5 pixels and not half size of mark-image - // should be changed in the future - document.getElementById("dot" + i).style.left = mark[i][0]-5; - document.getElementById("dot" + i).style.top = mark[i][1]-5; - document.getElementById("dot" + i).style.visibility = "visible"; - } else { - document.layers[i+1].moveTo(mark[i][0]-5, mark[i][1]-5); - document.layers[i+1].visibility = "show"; - } - } - } - - } else { - setTimeout("placeMarks()", 100); + // put the visible marks on the image + var mark_count = dlMarks.length; + var picelem = getElement("pic"); + // make shure the image is loaded so we know its size + if (picelem && picelem.complete == false) { + setTimeout("placeMarks()", 100); + } else { + var picsize = getElementSize("scaler"); + dlTrafo = parseTrafo(); + for (var i = 0; i < 8; i++) { + if (i < mark_count) { + if (dlArea.containsPosition(dlMarks[i])) { + var mpos = dlTrafo.transform(dlMarks[i]); + //alert("mark: "+mpos.x+" "+mpos.y); + // suboptimal to place -5 pixels and not half size of mark-image + mpos.x = mpos.x + picsize.x -5; + mpos.y = mpos.y + picsize.y -5; + moveElement("dot"+i, mpos); + showElement("dot"+i, true); } + } else { + // hide the other marks + showElement("dot"+i, false); + } } + } } -function zoomPoint() { - - function zoomPointEvent(evt) { - - var point = new Point(evt); - - dlParams.wx.value = cropFloat(point.relX-0.5*dlParams.ww.value*(1/ZOOMFACTOR)); - dlParams.wy.value = cropFloat(point.relY-0.5*dlParams.wh.value*(1/ZOOMFACTOR)); - - dlParams.ww.value = cropFloat(dlParams.ww.value*(1/ZOOMFACTOR)); - dlParams.wh.value = cropFloat(dlParams.wh.value*(1/ZOOMFACTOR)); - - if ( dlParams.wx.value < 0 ) { - dlParams.wx.value = 0; - } - if ( dlParams.wy.value < 0 ) { - dlParams.wy.value = 0; - } - if ( dlParams.wx.value + dlParams.ww.value > 1 ) { - dlParams.wx.value = 1 - dlParams.ww.value; - } - if ( dlParams.wy.value + dlParams.wh.value > 1 ) { - dlParams.wy.value = 1 - dlParams.wh.value; - } - - // stopping event capture - if ( document.all ) { - document.all.scaler.onmousedown = null; - } else if ( typeof(document.removeEventListener) == "function" ) { - document.getElementById("scaler").removeEventListener("mousedown", zoomPointEvent, true); - } else { - document.scaler.releaseEvents(Event.MOUSEDOWN); +function zoomPoint(inout) { + // zoom image in or out around the clicked point + window.focus(); + var zoom = ZOOMFACTOR; + if (inout < 0) { + zoom = 1/ZOOMFACTOR; } - - display(3); - } - // starting event capture - if ( document.all ) { - document.all.scaler.onmousedown = zoomPointEvent; - } else if ( typeof(document.addEventListener) == "function" ) { - document.getElementById("scaler").addEventListener("mousedown", zoomPointEvent, true); - } else { - document.scaler.captureEvents(Event.MOUSEDOWN); - document.scaler.onmousedown = zoomPointEvent; - } + function zoomPointEvent(evt) { + // take new center and set zoom parameters + var point = new Point(); + point.setWithEvent(evt); + var neww = Math.min(dlArea.width * (1/zoom), 1.0); + var newh = Math.min(dlArea.height * (1/zoom), 1.0); + var newx = point.relX - 0.5 * neww; + var newy = point.relY - 0.5 * newh; + var zoomarea = new Rectangle(newx, newy, neww, newh); + //alert("za1: "+zoomarea.x+","+zoomarea.y+" "+zoomarea.width+","+zoomarea.height); + // check bounds + zoomarea = dlMaxArea.fit(zoomarea); + //alert("za2: "+zoomarea.x+","+zoomarea.y+" "+zoomarea.width+","+zoomarea.height); + // set parameters + setParameter("wx", cropFloat(zoomarea.x)); + setParameter("wy", cropFloat(zoomarea.y)); + setParameter("ww", cropFloat(zoomarea.width)); + setParameter("wh", cropFloat(zoomarea.height)); + parseArea(); + display(3); + } + // starting event capture + registerMouseDown("scaler", zoomPointEvent); } function zoomArea() { - var state = 0; - var pt1, pt2; - - function click(evt) { - - if (state == 0) { - state = 1; - - pt1 = new Point(evt); - - pt2 = pt1; - - if ( document.all ) { - - document.all.eck1.style.left = pt1.pageX; - document.all.eck1.style.top = pt1.pageY; - document.all.eck2.style.left = pt2.pageX-12; - document.all.eck2.style.top = pt1.pageY; - document.all.eck3.style.left = pt1.pageX; - document.all.eck3.style.top = pt2.pageY-12; - document.all.eck4.style.left = pt2.pageX-12; - document.all.eck4.style.top = pt2.pageY-12; - - document.all.eck1.style.visibility="visible"; - document.all.eck2.style.visibility="visible"; - document.all.eck3.style.visibility="visible"; - document.all.eck4.style.visibility="visible"; - - document.all.scaler.onmousemove = move; - document.all.eck4.onmousemove = move; - - } else if ( typeof(document.addEventListener) == "function" ) { - - document.getElementById("eck1").style.left = pt1.pageX; - document.getElementById("eck1").style.top = pt1.pageY; - document.getElementById("eck2").style.left = pt2.pageX-12; - document.getElementById("eck2").style.top = pt1.pageY; - document.getElementById("eck3").style.left = pt1.pageX; - document.getElementById("eck3").style.top = pt2.pageY-12; - document.getElementById("eck4").style.left = pt2.pageX-12; - document.getElementById("eck4").style.top = pt2.pageY-12; - - document.getElementById("eck1").style.visibility="visible"; - document.getElementById("eck2").style.visibility="visible"; - document.getElementById("eck3").style.visibility="visible"; - document.getElementById("eck4").style.visibility="visible"; - - document.getElementById("scaler").addEventListener("mousemove", move, true); - document.getElementById("eck4").addEventListener("mousemove", move, true); - - } else { - - document.eck1.moveTo(pt1.pageX, pt1.pageY); - document.eck2.moveTo(pt2.pageX-12, pt1.pageY); - document.eck3.moveTo(pt1.pageX, pt2.pageY-12); - document.eck4.moveTo(pt2.pageX-12, pt2.pageY-12); - - document.eck1.visibility="show"; - document.eck2.visibility="show"; - document.eck3.visibility="show"; - document.eck4.visibility="show"; - - document.scaler.captureEvents(Event.MOUSEMOVE); - document.eck4.captureEvents(Event.MOUSEMOVE); - document.scaler.onmousemove = move; - document.eck4.onmousemove = move; - - } - - } else { - - pt2 = new Point(evt); - - if ( document.all ) { - - document.all.eck1.visibility="hidden"; - document.all.eck2.visibility="hidden"; - document.all.eck3.visibility="hidden"; - document.all.eck4.visibility="hidden"; - - document.all.scaler.onmousedown = null; - document.all.eck4.onmousedown = null; - document.all.scaler.onmousemove = null; - document.all.eck4.onmousemove = null; - - } else if ( typeof(document.removeEventListener) == "function" ) { - - document.getElementById("eck1").style.visibility="hidden"; - document.getElementById("eck2").style.visibility="hidden"; - document.getElementById("eck3").style.visibility="hidden"; - document.getElementById("eck4").style.visibility="hidden"; - - document.getElementById("scaler").removeEventListener("mousedown", click, true); - document.getElementById("eck4").removeEventListener("mousedown", click, true); - document.getElementById("scaler").removeEventListener("mousemove", move, true); - document.getElementById("eck4").removeEventListener("mousemove", move, true); - - } else { - - document.eck1.visibility="hide"; - document.eck2.visibility="hide"; - document.eck3.visibility="hide"; - document.eck4.visibility="hide"; - - document.scaler.releaseEvents(Event.MOUSEDOWN); - document.eck4.releaseEvents(Event.MOUSEDOWN); - document.scaler.releaseEvents(Event.MOUSEMOVE); - document.eck4.releaseEvents(Event.MOUSEMOVE); - - } - - dlParams.wx.value = cropFloat(parseFloat(Math.min(pt1.relX, pt2.relX))); - - dlParams.wy.value = cropFloat(parseFloat(Math.min(pt1.relY, pt2.relY))); - - dlParams.ww.value = cropFloat(parseFloat(Math.abs(pt1.relX-pt2.relX))); - dlParams.wh.value = cropFloat(parseFloat(Math.abs(pt1.relY-pt2.relY))); - - if ( (dlParams.ww.value != 0) && (dlParams.wh.value != 0) ) { - display(3); - } + var click = 1; + var pt1, pt2; + var eck1pos, eck2pos, eck3pos, eck4pos; + window.focus(); + + function zoomClick(evt) { + // mouse click handler + if (click == 1) { + // first click -- start moving + click = 2; + pt1 = new Point(); + pt1.setWithEvent(evt); + pt2 = pt1; + eck1pos = new Position(pt1.pageX, pt1.pageY); + eck2pos = new Position(pt1.pageX - 12, pt1.pageY); + eck3pos = new Position(pt1.pageX, pt1.pageY - 12); + eck4pos = new Position(pt1.pageX- 12, pt1.pageY - 12); + moveElement("eck1", eck1pos); + moveElement("eck2", eck2pos); + moveElement("eck3", eck3pos); + moveElement("eck4", eck4pos); + showElement("eck1", true); + showElement("eck2", true); + showElement("eck3", true); + showElement("eck4", true); + registerMouseMove("scaler", zoomMove); + registerMouseMove("eck4", zoomMove); + } else { + // second click -- end moving + pt2 = new Point(); + pt2.setWithEvent(evt); + showElement("eck1", false); + showElement("eck2", false); + showElement("eck3", false); + showElement("eck4", false); + unregisterMouseMove("scaler", zoomMove); + unregisterMouseMove("eck4", zoomMove); + unregisterMouseDown("scaler", zoomClick); + unregisterMouseDown("eck4", zoomClick); + var ww = pt2.relX-pt1.relX; + var wh = pt2.relY-pt1.relY; + if ((ww > 0)&&(wh > 0)) { + setParameter("wx", cropFloat(pt1.relX)); + setParameter("wy", cropFloat(pt1.relY)); + setParameter("ww", cropFloat(ww)); + setParameter("wh", cropFloat(wh)); + parseArea(); + display(3); + } + } } - } - - function move(evt) { - - pt2 = new Point(evt); - - var eck1_left = ((pt1.pageX < pt2.pageX) ? pt1.pageX : pt2.pageX); - var eck1_top = ((pt1.pageY < pt2.pageY) ? pt1.pageY : pt2.pageY); - var eck2_left = ((pt1.pageX < pt2.pageX) ? pt2.pageX : pt1.pageX)-12;; - var eck2_top = ((pt1.pageY < pt2.pageY) ? pt1.pageY : pt2.pageY); - var eck3_left = ((pt1.pageX < pt2.pageX) ? pt1.pageX : pt2.pageX); - var eck3_top = ((pt1.pageY < pt2.pageY) ? pt2.pageY : pt1.pageY)-12; - var eck4_left = ((pt1.pageX < pt2.pageX) ? pt2.pageX : pt1.pageX)-12; - var eck4_top = ((pt1.pageY < pt2.pageY) ? pt2.pageY : pt1.pageY)-12; - - if ( document.all ) { - - document.all.eck1.style.left = eck1_left; - document.all.eck1.style.top = eck1_top; - document.all.eck2.style.left = eck2_left; - document.all.eck2.style.top = eck2_top; - document.all.eck3.style.left = eck3_left; - document.all.eck3.style.top = eck3_top; - document.all.eck4.style.left = eck4_left; - document.all.eck4.style.top = eck4_top; - - } else if ( typeof(document.getElementById) == "function" ) { - - document.getElementById("eck1").style.left = eck1_left; - document.getElementById("eck1").style.top = eck1_top; - document.getElementById("eck2").style.left = eck2_left; - document.getElementById("eck2").style.top = eck2_top; - document.getElementById("eck3").style.left = eck3_left; - document.getElementById("eck3").style.top = eck3_top; - document.getElementById("eck4").style.left = eck4_left; - document.getElementById("eck4").style.top = eck4_top; - - } else { - - document.eck1.moveTo(eck1_left, eck1_top); - document.eck2.moveTo(eck2_left, eck2_top); - document.eck3.moveTo(eck3_left, eck3_top); - document.eck4.moveTo(eck4_left, eck4_top); + function zoomMove(evt) { + // mouse move handler + pt2 = new Point(); + pt2.setWithEvent(evt); + // restrict marks to move right and down + eck1pos = new Position(pt1.pageX, pt1.pageY); + eck2pos = new Position(Math.max(pt1.pageX, pt2.pageX)-12, pt1.pageY); + eck3pos = new Position(pt1.pageX, Math.max(pt1.pageY, pt2.pageY)-12); + eck4pos = new Position(Math.max(pt1.pageX, pt2.pageX)-12, Math.max(pt1.pageY, pt2.pageY)-12); + moveElement("eck1", eck1pos); + moveElement("eck2", eck2pos); + moveElement("eck3", eck3pos); + moveElement("eck4", eck4pos); } - } - - // starting event capture - if ( document.all ) { - document.all.scaler.onmousedown = click; - document.all.eck4.onmousedown = click; - } else if ( typeof(document.addEventListener) == "function" ) { - document.getElementById("scaler").addEventListener("mousedown", click, true); - document.getElementById("eck4").addEventListener("mousedown", click, true); - } else { - document.scaler.captureEvents(Event.MOUSEDOWN); - document.eck4.captureEvents(Event.MOUSEDOWN); - document.scaler.onmousedown = click; - document.eck4.onmousedown = click; - } + // starting event capture + registerMouseDown("scaler", zoomClick); + registerMouseDown("eck4", zoomClick); } - -function zoomExtends() { - - dlParams.wx.value = 0.0; - dlParams.wy.value = 0.0; - - dlParams.ww.value = 1.0; - dlParams.wh.value = 1.0; - - display(3); - +function zoomFullpage() { + // zooms out to show the whole image + setParameter("wx", 0.0); + setParameter("wy", 0.0); + setParameter("ww", 1.0); + setParameter("wh", 1.0); + parseArea(); + display(3); } -function zoomOut() { - - dlParams.wx.value = cropFloat(dlParams.wx.value-0.5*(dlParams.ww.value*(ZOOMFACTOR)-dlParams.ww.value)); - dlParams.wy.value = cropFloat(dlParams.wy.value-0.5*(dlParams.wh.value*(ZOOMFACTOR)-dlParams.wh.value)); - - dlParams.ww.value = cropFloat(dlParams.ww.value*(ZOOMFACTOR)); - dlParams.wh.value = cropFloat(dlParams.wh.value*(ZOOMFACTOR)); +function moveTo() { - if ( dlParams.wx.value < 0 ) { - dlParams.wx.value = 0; - } - if ( dlParams.wy.value < 0 ) { - dlParams.wy.value = 0; - } - if ( dlParams.ww.value > 1 ) { - dlParams.ww.value = 1; - } - if ( dlParams.wh.value > 1 ) { - dlParams.wh.value = 1; - } - if ( dlParams.wx.value + dlParams.ww.value > 1 ) { - dlParams.wx.value = 1 - dlParams.ww.value; - } - if ( dlParams.wy.value + dlParams.wh.value > 1 ) { - dlParams.wy.value = 1 - dlParams.wh.value; - } + if ( (parseFloat(dlParams.ww.value) == 1.0) && (parseFloat(dlParams.wh.value) == 1.0) ) { + alert("This function is only available when zoomed in!"); + return; + } + function moveToEvent(event) { + // move to handler + var point = new Point(); + point.setWithEvent(eventt); + var newarea = new Rectangle(point.relX-0.5*dlParams.ww.value, point.relY-0.5*dlParams.wh.value, dlArea.width, dlArea.height); + newarea = dlMaxArea.intersect(newarea); + // stopping event capture + unregisterMouseDown("scaler", moveToEvent); + // set parameters + setParameter("wx", cropFloat(newarea.x)); + setParameter("wy", cropFloat(newarea.y)); + setParameter("ww", cropFloat(newarea.width)); + setParameter("wh", cropFloat(newarea.height)); display(3); + } + // starting event capture + registerMouseDown("scaler", moveToEvent); } - -function moveTo() { - - if ( (parseFloat(dlParams.ww.value) == 1.0) && (parseFloat(dlParams.wh.value) == 1.0) ) { - alert("This function is only available when zoomed in!"); - return; +function setSize(factor) { + // change the size of the image + setParameter("ws", cropFloat(factor)); + display(3); +} + +function setQuality(qual) { + // set the image quality + for (var i = 0; i < 3; i++) { + removeFlag("q"+i); + if (i == qual) { + addFlag("q"+i); } - - function moveToEvent(event) { - - var point = new Point(event); - - dlParams.wx.value = cropFloat(point.relX-0.5*dlParams.ww.value); - dlParams.wy.value = cropFloat(point.relY-0.5*dlParams.wh.value); - - if ( dlParams.wx.value < 0 ) { - dlParams.wx.value = 0; - } - if ( dlParams.wy.value < 0 ) { - dlParams.wy.value = 0; - } - if ( dlParams.wx.value + dlParams.ww.value > 1 ) { - dlParams.wx.value = 1 - dlParams.ww.value; - } - if ( dlParams.wy.value + dlParams.wh.value > 1 ) { - dlParams.wy.value = 1 - dlParams.wh.value; - } - - // stopping event capture - if ( document.all ) { - document.all.scaler.onmousedown = null; - } else if ( typeof(document.removeEventListener) == "function" ) { - document.getElementById("scaler").removeEventListener("mousedown", moveToEvent, true); + } + setParameter("mo", getAllFlags()); + display(3); +} + +function mirror(dir) { + // mirror the image horizontally or vertically + if (dir == "h") { + toggleFlag("hmir"); } else { - document.scaler.releaseEvents(Event.MOUSEDOWN) + toggleFlag("vmir"); } - - display(3); - } - - // starting event capture - if ( document.all ) { - document.all.scaler.onmousedown = moveToEvent; - } else if ( typeof(document.addEventListener) == "function" ) { - document.getElementById("scaler").addEventListener("mousedown", moveToEvent, true); - } else { - document.scaler.captureEvents(Event.MOUSEDOWN); - document.scaler.onmousedown = moveToEvent; - } -} - - -function scale(factor) { - - dlParams.ws.value = cropFloat(factor); - display(3); - + setParameter("mo", getAllFlags()); + display(3); } - -// capturing keypresses for next and previous page function parseKeypress(evt) { - - if ( document.all ) { - + // capturing keypresses for next and previous page + if ( document.all ) { if ( event.keyCode == 110 ) { - page('+1'); + page('+1'); } if ( event.keyCode == 98 ) { - page('-1'); + page('-1'); } - - document.cancleBubble = true; - - } else { - + document.cancelBubble = true; + } else { if ( evt.charCode == 110 ) { - page('+1'); - } else if ( evt.charCode == 98 ) { - page('-1'); - } else if ( evt.which == 110 ) { - page('+1'); + page('+1'); + } else if ( evt.charCode == 98 ) { + page('-1'); + } else if ( evt.which == 110 ) { + page('+1'); } else if ( evt.which == 98 ) { - // does not work currentlyfor Opera, because it catches the 'b'-key on it's own - // have to change the key or find another way - luginbuehl - page('-1'); + // does not work currentlyfor Opera, because it catches the 'b'-key on it's own + // have to change the key or find another way - luginbuehl + page('-1'); } - - } -} - - -// auxiliary function to crop senseless precicsion -function cropFloat(tmp) { - return parseInt(10000*tmp)/10000; + } }