Annotation of zogiLib/js/navigation.js, revision 1.3
1.1 dwinter 1: /*
2: Copyright (C) 2003 WTWG, Uni Bern
3:
4: This program is free software; you can redistribute it and/or
5: modify it under the terms of the GNU General Public License
6: as published by the Free Software Foundation; either version 2
7: of the License, or (at your option) any later version.
8:
9: This program is distributed in the hope that it will be useful,
10: but WITHOUT ANY WARRANTY; without even the implied warranty of
11: MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12: GNU General Public License for more details.
13:
14: You should have received a copy of the GNU General Public License
15: along with this program; if not, write to the Free Software
16: Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA
17:
18: Author: Christian Luginbuehl, 01.05.2003 , Version Alcatraz 0.4
1.3 ! casties 19: Changed for digiLib in Zope by DW 24.03.2004, ROC 09.04.2004
1.1 dwinter 20: */
21:
22: var ZOOMFACTOR = Math.sqrt(2);
23:
1.3 ! casties 24: var dlParams = new Object();
! 25: var dlMarks = new Array();
! 26: var dlArea = new Rectangle(0.0, 0.0, 1.0, 1.0);
! 27: var dlMaxArea = new Rectangle(0.0, 0.0, 1.0, 1.0);
! 28: var dlFlags = new Object();
! 29: var dlTrafo = new Transform();
! 30:
! 31: // fixes for silly browsers
! 32: if (! Array.prototype.push) {
! 33: Array.prototype.push = function(val) {
! 34: this[this.length] = val;
! 35: }
! 36: }
1.1 dwinter 37:
1.3 ! casties 38: // auxiliary function to crop senseless precision
! 39: function cropFloat(x) {
! 40: return parseInt(10000*x)/10000;
! 41: }
1.1 dwinter 42:
1.3 ! casties 43: function newParameter(name, defaultValue, detail) {
! 44: // create a new parameter with a name and a default value
! 45: if ( !dlParams[name] ) {
! 46: dlParams[name] = new Object();
! 47: dlParams[name].defaultValue = defaultValue;
! 48: dlParams[name].hasValue = false;
! 49: dlParams[name].value = defaultValue;
! 50: dlParams[name].detail = detail;
! 51: return dlParams[name];
! 52: } else {
! 53: alert("Fatal: An object with name '" + name + "' already exists - cannot recreate!");
! 54: return false;
! 55: }
! 56: }
1.1 dwinter 57:
1.3 ! casties 58: function getParameter(name) {
! 59: // returns the named parameter value or its default value
! 60: if (dlParams[name]) {
! 61: if (dlParams[name].hasValue) {
! 62: return dlParams[name].value;
! 63: } else {
! 64: return dlParams[name].defaultValue;
! 65: }
! 66: } else {
! 67: return false;
! 68: }
! 69: }
1.1 dwinter 70:
1.3 ! casties 71: function setParameter(name, value) {
! 72: // sets parameter value
! 73: if (dlParams[name]) {
! 74: dlParams[name].value = value;
! 75: dlParams[name].hasValue = true;
! 76: }
! 77: }
1.1 dwinter 78:
1.3 ! casties 79: function getAllParameters(detail) {
! 80: // returns a string of all parameters in query format
! 81: var params = new Array();
! 82: for ( param in dlParams ) {
! 83: if ((dlParams[param].detail <= detail)&&(dlParams[param].hasValue)) {
! 84: var val = getParameter(param);
! 85: if (val != "") {
! 86: params.push(param + "=" + val);
! 87: }
! 88: }
! 89: }
! 90: return params.join("&");
! 91: }
1.1 dwinter 92:
1.3 ! casties 93: function parseParameters(query) {
! 94: // gets parameter values from query format string
! 95: var params = query.split("&");
! 96: for (var i = 0; i < params.length; i++) {
! 97: var keyval = params[i].split("=");
! 98: if (keyval.length == 2) {
! 99: setParameter(keyval[0], keyval[1]);
! 100: }
! 101: }
! 102: }
1.1 dwinter 103:
1.3 ! casties 104: function parseArea() {
! 105: // returns area Rectangle from current parameters
! 106: return new Rectangle(getParameter("wx"), getParameter("wy"), getParameter("ww"), getParameter("wh"));
! 107: }
! 108:
! 109: function setParamFromRect(rect) {
! 110: // sets digilib wx etc. from rect
! 111: setParameter("wx", cropFloat(rect.x));
! 112: setParameter("wy", cropFloat(rect.y));
! 113: setParameter("ww", cropFloat(rect.width));
! 114: setParameter("wh", cropFloat(rect.height));
! 115: }
! 116:
! 117: function parseTrafo() {
! 118: // returns Transform from current dlArea and picsize
! 119: var picsize = getElementSize("scaler");
! 120: var trafo = new Transform();
! 121: // subtract area offset and size
! 122: trafo.concat(getTranslation(new Position(-dlArea.x, -dlArea.y)));
! 123: trafo.concat(getScale(new Size(1/dlArea.width, 1/dlArea.height)));
! 124: // scale to screen size
! 125: trafo.concat(getScale(picsize));
! 126: // rotate
! 127: //trafo.concat(getRotation(- getParameter("rot"), new Position(0.5*picsize.width, 0.5*picsize.height)));
! 128: // mirror
! 129: //if (hasFlag("hmir")) {
! 130: //trafo.m00 = - trafo.m00;
! 131: //}
! 132: //if (hasFlag("vmir")) {
! 133: //trafo.m11 = - trafo.m11;
! 134: //}
! 135: return trafo;
! 136: }
! 137:
! 138: function parseMarks() {
! 139: // returns marks array from current parameters
! 140: var marks = new Array();
! 141: var ma = getParameter("mk").split(";");
! 142: for (var i = 0; i < ma.length ; i++) {
! 143: var pos = ma[i].split("/");
! 144: if (pos.length > 1) {
! 145: marks.push(new Position(pos[0], pos[1]));
! 146: }
! 147: }
! 148: return marks;
! 149: }
1.1 dwinter 150:
1.3 ! casties 151: function getAllMarks() {
! 152: // returns a string with all marks in query format
! 153: var marks = new Array();
! 154: for (var i = 0; i < dlMarks.length; i++) {
! 155: marks.push(cropFloat(dlMarks[i].x) + "/" + cropFloat(dlMarks[i].y));
! 156: }
! 157: return marks.join(";");
1.1 dwinter 158: }
159:
1.3 ! casties 160: function addMark(x, y) {
! 161: // add a mark
! 162: dlMarks.push(new Position(x, y));
! 163: setParameter("mk", getAllMarks());
! 164: }
1.1 dwinter 165:
1.3 ! casties 166: function deleteMark() {
! 167: // delete the last mark
! 168: dlMarks.pop();
! 169: setParameter("mk", getAllMarks());
1.1 dwinter 170: }
171:
1.3 ! casties 172: function hasFlag(mode) {
! 173: // returns if mode flag is set
! 174: return (dlFlags[mode] && (dlFlags[mode] != null));
! 175: }
1.1 dwinter 176:
1.3 ! casties 177: function addFlag(mode) {
! 178: // add a mode flag
! 179: dlFlags[mode] = mode;
! 180: }
1.1 dwinter 181:
1.3 ! casties 182: function removeFlag(mode) {
! 183: // remove a mode flag
! 184: if (dlFlags[mode]) {
! 185: dlFlags[mode] = null;
! 186: }
! 187: }
1.1 dwinter 188:
1.3 ! casties 189: function toggleFlag(mode) {
! 190: // change a mode flag
! 191: if (dlFlags[mode]) {
! 192: dlFlags[mode] = null;
! 193: } else {
! 194: dlFlags[mode] = mode;
! 195: }
! 196: }
1.1 dwinter 197:
1.3 ! casties 198: function getAllFlags() {
! 199: // returns a string with all flags in query format
! 200: var fa = new Array();
! 201: for (var f in dlFlags) {
! 202: if ((f != "")&&(dlFlags[f] != null)) {
! 203: fa.push(f);
! 204: }
! 205: }
! 206: return fa.join(",");
! 207: }
1.1 dwinter 208:
1.3 ! casties 209: function parseFlags() {
! 210: // sets dlFlags from the current parameters
! 211: var flags = new Object();
! 212: var fa = getParameter("mo").split(",");
! 213: for (var i = 0; i < fa.length ; i++) {
! 214: var f = fa[i];
! 215: if (f != "") {
! 216: flags[f] = f;
! 217: }
! 218: }
! 219: return flags;
! 220: }
1.1 dwinter 221:
1.3 ! casties 222: /*
! 223: * Size class
! 224: */
! 225: function Size(w, h) {
! 226: this.width = parseFloat(w);
! 227: this.height = parseFloat(h);
! 228: }
! 229:
! 230: /*
! 231: * Position class
! 232: */
! 233: function Position(x, y) {
! 234: this.x = parseFloat(x);
! 235: this.y = parseFloat(y);
! 236: }
! 237:
! 238: /*
! 239: * Rectangle class
! 240: */
! 241: function Rectangle(x, y, w, h) {
! 242: this.x = parseFloat(x);
! 243: this.y = parseFloat(y);
! 244: this.width = parseFloat(w);
! 245: this.height = parseFloat(h);
! 246: }
! 247: Rectangle.prototype.copy = function() {
! 248: // returns a copy of this Rectangle
! 249: return new Rectangle(this.x, this.y, this.width, this.height);
! 250: }
! 251: Rectangle.prototype.containsPosition = function(pos) {
! 252: // returns if the given Position lies in this Rectangle
! 253: return ((pos.x >= this.x)&&(pos.y >= this.y)&&(pos.x <= this.x+this.width)&&(pos.y <= this.y+this.width));
! 254: }
! 255: Rectangle.prototype.intersect = function(rect) {
! 256: // returns the intersection of the given Rectangle and this one
! 257: var sec = rect.copy();
! 258: if (sec.x < this.x) {
! 259: sec.width = sec.width - (this.x - sec.x);
! 260: sec.x = this.x;
! 261: }
! 262: if (sec.y < this.y) {
! 263: sec.height = sec.height - (this.y - sec.y);
! 264: sec.y = this.y;
! 265: }
! 266: if (sec.x + sec.width > this.x + this.width) {
! 267: sec.width = (this.x + this.width) - sec.x;
! 268: }
! 269: if (sec.y + sec.height > this.y + this.height) {
! 270: sec.height = (this.y + this.height) - sec.y;
! 271: }
! 272: return sec;
! 273: }
! 274: Rectangle.prototype.fit = function(rect) {
! 275: // returns a Rectangle that fits into this one (by moving first)
! 276: var sec = rect.copy();
! 277: sec.x = Math.max(sec.x, this.x);
! 278: sec.x = Math.max(sec.x, this.x);
! 279: if (sec.x + sec.width > this.x + this.width) {
! 280: sec.x = this.x + this.width - sec.width;
! 281: }
! 282: if (sec.y + sec.height > this.y + this.height) {
! 283: sec.y = this.y + this.height - sec.height;
! 284: }
! 285: return sec.intersect(this);
1.1 dwinter 286: }
287:
1.3 ! casties 288: /*
! 289: * Transform class
! 290: */
! 291: function Transform() {
! 292: this.m00 = 1.0;
! 293: this.m01 = 0.0;
! 294: this.m02 = 0.0;
! 295: this.m10 = 0.0;
! 296: this.m11 = 1.0;
! 297: this.m12 = 0.0;
! 298: this.m20 = 0.0;
! 299: this.m21 = 0.0;
! 300: this.m22 = 1.0;
! 301: }
! 302: Transform.prototype.concat = function(traf) {
! 303: for (var i = 0; i < 3; i++) {
! 304: for (var j = 0; j < 3; j++) {
! 305: var c = 0.0;
! 306: for (var k = 0; k < 3; k++) {
! 307: c += traf["m"+i+k] * this["m"+k+j];
! 308: }
! 309: this["m"+i+j] = c;
! 310: }
! 311: }
! 312: }
! 313: Transform.prototype.transform = function(pos) {
! 314: var x = this.m00 * pos.x + this.m01 * pos.y + this.m02;
! 315: var y = this.m10 * pos.x + this.m11 * pos.y + this.m12;
! 316: return new Position(x, y);
! 317: }
! 318: Transform.prototype.invtransform = function(pos) {
! 319: var det = this.m00 * this.m11 - this.m01 * this.m10;
! 320: var x = (this.m11 * pos.x - this.m01 * pos.y - this.m11 * this.m02 + this.m01 * this.m12) / det;
! 321: var y = (- this.m10 * pos.x + this.m00 * pos.y + this.m10 * this.m02 - this.m00 * this.m12) / det;
! 322: return new Position(x, y);
! 323: }
! 324: function getRotation(angle, pos) {
! 325: var traf = new Transform();
! 326: if (angle != 0) {
! 327: var t = 2.0 * Math.PI * parseFloat(angle) / 360.0;
! 328: traf.m00 = Math.cos(t);
! 329: traf.m01 = - Math.sin(t);
! 330: traf.m10 = Math.sin(t);
! 331: traf.m11 = Math.cos(t);
! 332: traf.m02 = pos.x - pos.x * Math.cos(t) + pos.y * Math.sin(t);
! 333: traf.m12 = pos.y - pos.x * Math.sin(t) - pos.y * Math.cos(t);
! 334: }
! 335: return traf;
! 336: }
! 337: function getTranslation(pos) {
! 338: var traf = new Transform();
! 339: traf.m02 = pos.x;
! 340: traf.m12 = pos.y;
! 341: return traf;
! 342: }
! 343: function getScale(size) {
! 344: var traf = new Transform();
! 345: traf.m00 = size.width;
! 346: traf.m11 = size.height;
! 347: return traf;
! 348: }
! 349:
! 350: function getElement(tagid) {
! 351: // returns the named element object
! 352: if (document.all) {
! 353: return document.all[tagid];
! 354: } else if (document.getElementById) {
! 355: return document.getElementById(tagid);
! 356: } else {
! 357: return document[tagid];
! 358: }
! 359: }
1.1 dwinter 360:
1.3 ! casties 361: function getElementSize(tagid) {
! 362: // returns a Rectangle with the size and position of the named element
! 363: var x = 0;
! 364: var y = 0;
! 365: var width = 0;
! 366: var height = 0;
! 367: var elem = getElement(tagid);
! 368: if (elem.offsetWidth) {
! 369: x = parseInt(elem.offsetLeft);
! 370: y = parseInt(elem.offsetTop);
! 371: width = parseInt(elem.offsetWidth);
! 372: height = parseInt(elem.offsetHeight);
! 373: } else {
! 374: x = parseInt(elem.left);
! 375: y = parseInt(elem.top);
! 376: width = parseInt(elem.clip.width);
! 377: height = parseInt(elem.clip.height);
! 378: }
! 379: return new Rectangle(x, y, width, height);
! 380: }
1.1 dwinter 381:
1.3 ! casties 382: function moveElement(tagid, pos) {
! 383: // moves the named element to the indicated position
! 384: var elem = getElement(tagid);
! 385: if (elem.style) {
! 386: elem.style.left = pos.x;
! 387: elem.style.top = pos.y;
! 388: } else {
! 389: alert("moveelement: no style property!");
! 390: }
! 391: }
1.1 dwinter 392:
1.3 ! casties 393: function showElement(tagid, show) {
! 394: // shows or hides the named element
! 395: var elem = getElement(tagid);
! 396: if (elem.style) {
! 397: if (show) {
! 398: elem.style.visibility = "visible";
! 399: } else {
! 400: elem.style.visibility = "hidden";
! 401: }
! 402: } else {
! 403: alert("showelement: no style property!");
! 404: }
! 405: }
1.1 dwinter 406:
1.3 ! casties 407: function registerMouseDown(tagid, handler) {
! 408: // register a mouse down event handler on the indicated element
! 409: if ( document.all ) {
! 410: document.all[tagid].onmousedown = handler;
! 411: } else if (document.getElementById) {
! 412: document.getElementById(tagid).addEventListener("mousedown", handler, true);
! 413: } else {
! 414: document[tagid].captureEvents(Event.MOUSEDOWN);
! 415: document[tagid].onmousedown = handler;
! 416: }
! 417: }
1.1 dwinter 418:
1.3 ! casties 419: function unregisterMouseDown(tagid, handler) {
! 420: // unregister the mouse down event handler
! 421: if ( document.all ) {
! 422: document.all[tagid].onmousedown = null;
! 423: } else if (document.getElementById) {
! 424: document.getElementById(tagid).removeEventListener("mousedown", handler, true);
! 425: } else {
! 426: document[tagid].releaseEvents(Event.MOUSEDOWN);
! 427: }
1.1 dwinter 428: }
429:
1.3 ! casties 430: function registerMouseMove(tagid, handler) {
! 431: // register a mouse move event handler on the indicated element
! 432: if ( document.all ) {
! 433: document.all[tagid].onmousemove = handler;
! 434: } else if (document.getElementById) {
! 435: document.getElementById(tagid).addEventListener("mousemove", handler, true);
! 436: } else {
! 437: document[tagid].captureEvents(Event.MOUSEMOVE);
! 438: document[tagid].onmousemove = handler;
! 439: }
! 440: }
1.1 dwinter 441:
1.3 ! casties 442: function unregisterMouseMove(tagid, handler) {
! 443: // unregister the mouse move event handler
! 444: if ( document.all ) {
! 445: document.all[tagid].onmousemove = null;
! 446: } else if (document.getElementById) {
! 447: document.getElementById(tagid).removeEventListener("mousemove", handler, true);
! 448: } else {
! 449: document[tagid].releaseEvents(Event.MOUSEMOVE);
! 450: }
! 451: }
1.1 dwinter 452:
1.3 ! casties 453: function registerKeyDown(handler) {
! 454: // register a key down handler
! 455: if ( document.all ) {
! 456: this.document.onkeypress = handler
! 457: } else if ( typeof(document.addEventListener) == "function" ) {
! 458: this.document.addEventListener('keypress', handler, true);
! 459: } else {
! 460: window.captureEvents(Event.KEYDOWN);
! 461: window.onkeydown = handler;
! 462: }
! 463: }
1.1 dwinter 464:
1.3 ! casties 465: function getWinSize() {
! 466: // returns a Size with the current window size (from www.quirksmode.org)
! 467: var wsize = new Size(100, 100);
! 468: if (self.innerHeight) {
! 469: // all except Explorer
! 470: wsize.width = self.innerWidth;
! 471: wsize.height = self.innerHeight;
! 472: } else if (document.documentElement && document.documentElement.clientHeight) {
! 473: // Explorer 6 Strict Mode
! 474: wsize.width = document.documentElement.clientWidth;
! 475: wsize.height = document.documentElement.clientHeight;
! 476: } else if (document.body) {
! 477: // other Explorers
! 478: wsize.width = document.body.clientWidth;
! 479: wsize.height = document.body.clientHeight;
! 480: }
! 481: return wsize;
! 482: }
1.1 dwinter 483:
1.3 ! casties 484: function bestPicSize(tagid) {
! 485: // returns a Size with the best image size for the given tagid
! 486: var inset = 5;
! 487: var ps = getWinSize();
! 488: var scaler = document.getElementById(tagid);
! 489: ps.width = ps.width - scaler.offsetLeft - inset;
! 490: ps.height = ps.height - scaler.offsetTop - inset;
! 491: return ps;
1.1 dwinter 492: }
493:
494:
495:
1.3 ! casties 496: function init() {
! 497: // give a name to the window containing digilib - this way one can test if there is already a
! 498: // digilib-window open and replace the contents of it (ex. digicat)
! 499: top.window.name = "digilib";
! 500: // put the query parameters (sans "&") in the parameters array
! 501: parseParameters(location.search.slice(1));
! 502: // treat special parameters
! 503: dlMarks = parseMarks();
! 504: dlArea = parseArea();
! 505: dlFlags = parseFlags();
1.1 dwinter 506:
1.3 ! casties 507: //registerKeyDown(parseKeypress);
! 508:
! 509: placeMarks();
1.1 dwinter 510:
1.3 ! casties 511: focus();
! 512: return true;
! 513: }
1.1 dwinter 514:
515:
1.3 ! casties 516: function display(detail) {
! 517: // redisplay the page
! 518: var queryString = getAllParameters(detail);
! 519: location.href = location.protocol + "//" + location.host + location.pathname + "?" + queryString;
! 520: }
1.1 dwinter 521:
522:
1.3 ! casties 523: /*
! 524: * Point class
! 525: */
! 526: function Point() {
1.1 dwinter 527: }
1.3 ! casties 528: Point.prototype.setWithEvent = function(evt) {
! 529: // set point values from event
1.1 dwinter 530:
1.3 ! casties 531: if ( document.all ) {
1.1 dwinter 532:
1.3 ! casties 533: this.pageX = parseInt(document.body.scrollLeft+event.clientX);
! 534: this.pageY = parseInt(document.body.scrollLeft+event.clientY);
1.1 dwinter 535:
1.3 ! casties 536: this.x = this.pageX-parseInt(document.all.scaler.offsetLeft);
! 537: this.y = this.pageY-parseInt(document.all.scaler.offsetTop);
1.1 dwinter 538:
1.3 ! casties 539: this.relX = cropFloat(parseFloat(dlParams.wx.value)+(dlParams.ww.value*this.x/document.all.scaler.offsetWidth));
! 540: this.relY = cropFloat(parseFloat(dlParams.wy.value)+(dlParams.wh.value*this.y/document.all.scaler.offsetHeight));
1.1 dwinter 541:
1.3 ! casties 542: } else {
1.1 dwinter 543:
1.3 ! casties 544: this.pageX = parseInt(evt.pageX);
! 545: this.pageY = parseInt(evt.pageY);
1.1 dwinter 546:
1.3 ! casties 547: if ( typeof(document.getElementById) == "function" ) {
1.1 dwinter 548:
1.3 ! casties 549: this.x = this.pageX-parseInt(document.getElementById("scaler").offsetLeft);
! 550: this.y = this.pageY-parseInt(document.getElementById("scaler").offsetTop);
! 551: // top("2"+"::"+this.pageX+"::"+parseInt(document.getElementById("scaler").offsetLeft)+'::'+document.getElementById("scaler").offsetLeft);
! 552: this.relX = cropFloat(parseFloat(dlParams.wx.value)+(dlParams.ww.value*this.x/document.pic.offsetWidth));
! 553: this.relY = cropFloat(parseFloat(dlParams.wy.value)+(dlParams.wh.value*this.y/document.pic.offsetHeight));
1.1 dwinter 554:
1.3 ! casties 555: } else {
1.1 dwinter 556:
1.3 ! casties 557: this.x = this.pageX-document.scaler.left;
! 558: this.y = this.pageY-document.scaler.top;
1.1 dwinter 559:
1.3 ! casties 560: this.relX = cropFloat(parseFloat(dlParams.wx.value)+(dlParams.ww.value*this.x/document.scaler.clip.width));
! 561: this.relY = cropFloat(parseFloat(dlParams.wy.value)+(dlParams.wh.value*this.y/document.scaler.clip.height));
1.1 dwinter 562:
1.3 ! casties 563: }
1.1 dwinter 564:
565: }
566:
567: return this;
568:
569: }
570:
571:
572: function page(page, details) {
573:
574: if ( details == null ) {
575: details = 1;
576: }
577:
578: if ( page.indexOf('-') == 0 ) {
579: if ( dlParams.pn.value > 1 ) {
580: page = Math.max(parseInt(dlParams.pn.value) - parseInt(page.slice(1)), 1);
581: dlParams.pn.value = page;
582: display(details);
583: } else {
584: alert("You are already on the first page!");
585: }
586:
587: } else if ( page.indexOf('+') == 0 ) {
588: page = parseInt(dlParams.pn.value) + parseInt(page.slice(1));
589: dlParams.pn.value = page;
590: display(details);
591: } else if ( page == parseInt(page) ) {
592: dlParams.pn.value = parseInt(page);
593: display(details);
594: }
595:
596: }
597:
598:
599:
600: function ref(select) {
1.3 ! casties 601: // open a dialog with a reference to the current digilib set
! 602: var hyperlinkRef = baseUrl + "?" + getAllParameters(9);
! 603: if ( select == 0 ) {
! 604: prompt("Link for LaTeX-documents", "\\href{" + hyperlinkRef + "}{TEXT}");
! 605: } else if ( select == 1 ) {
! 606: prompt("Link for HTML-documents", hyperlinkRef);
! 607: }
1.1 dwinter 608: }
609:
610:
611: function mark() {
1.3 ! casties 612: // add a mark where clicked
! 613: if ( dlMarks.length > 7 ) {
! 614: alert("Only 8 marks are possible at the moment!");
! 615: return;
! 616: }
1.1 dwinter 617:
1.3 ! casties 618: function markEvent(evt) {
! 619: // event handler adding a new mark
! 620: unregisterMouseDown("scaler", markEvent);
! 621: var point = new Point();
! 622: point.setWithEvent(evt);
! 623: var point2 = dlTrafo.invtransform(new Position(point.x, point.y));
! 624: //alert("p0: "+point.x+", "+point.y);
! 625: //alert("p1: "+point.relX+", "+point.relY+" p2: "+point2.x+", "+point2.y);
! 626: var point3 = dlTrafo.transform(point2);
! 627: //alert("p3: "+point3.x+", "+point3.y);
! 628: //addMark(point.relX, point.relY);
! 629: addMark(point2.x, point2.y);
! 630: placeMarks();
! 631: }
1.1 dwinter 632:
1.3 ! casties 633: // starting event capture
! 634: registerMouseDown("scaler", markEvent);
! 635: }
1.1 dwinter 636:
1.3 ! casties 637: function unmark() {
! 638: // remove the last mark
! 639: deleteMark();
1.1 dwinter 640: placeMarks();
641: }
642:
643: function placeMarks() {
1.3 ! casties 644: // put the visible marks on the image
! 645: var mark_count = dlMarks.length;
! 646: var picelem = getElement("pic");
! 647: // make shure the image is loaded so we know its size
! 648: if (picelem && picelem.complete == false) {
! 649: setTimeout("placeMarks()", 100);
! 650: } else {
! 651: var picsize = getElementSize("scaler");
! 652: dlTrafo = parseTrafo();
! 653: for (var i = 0; i < 8; i++) {
! 654: if (i < mark_count) {
! 655: if (dlArea.containsPosition(dlMarks[i])) {
! 656: var mpos = dlTrafo.transform(dlMarks[i]);
! 657: //alert("mark: "+mpos.x+" "+mpos.y);
! 658: // suboptimal to place -5 pixels and not half size of mark-image
! 659: mpos.x = mpos.x + picsize.x -5;
! 660: mpos.y = mpos.y + picsize.y -5;
! 661: moveElement("dot"+i, mpos);
! 662: showElement("dot"+i, true);
1.1 dwinter 663: }
1.3 ! casties 664: } else {
! 665: // hide the other marks
! 666: showElement("dot"+i, false);
! 667: }
1.1 dwinter 668: }
1.3 ! casties 669: }
1.1 dwinter 670: }
671:
672:
1.3 ! casties 673: function zoomPoint(inout) {
! 674: // zoom image in or out around the clicked point
! 675: window.focus();
! 676: var zoom = ZOOMFACTOR;
! 677: if (inout < 0) {
! 678: zoom = 1/ZOOMFACTOR;
! 679: }
1.1 dwinter 680:
1.3 ! casties 681: function zoomPointEvent(evt) {
! 682: // take new center and set zoom parameters
! 683: var point = new Point();
! 684: point.setWithEvent(evt);
! 685: var neww = Math.min(dlArea.width * (1/zoom), 1.0);
! 686: var newh = Math.min(dlArea.height * (1/zoom), 1.0);
! 687: var newx = point.relX - 0.5 * neww;
! 688: var newy = point.relY - 0.5 * newh;
! 689: var zoomarea = new Rectangle(newx, newy, neww, newh);
! 690: //alert("za1: "+zoomarea.x+","+zoomarea.y+" "+zoomarea.width+","+zoomarea.height);
! 691: // check bounds
! 692: zoomarea = dlMaxArea.fit(zoomarea);
! 693: //alert("za2: "+zoomarea.x+","+zoomarea.y+" "+zoomarea.width+","+zoomarea.height);
! 694: // set parameters
! 695: setParameter("wx", cropFloat(zoomarea.x));
! 696: setParameter("wy", cropFloat(zoomarea.y));
! 697: setParameter("ww", cropFloat(zoomarea.width));
! 698: setParameter("wh", cropFloat(zoomarea.height));
! 699: parseArea();
! 700: display(3);
1.1 dwinter 701: }
1.3 ! casties 702: // starting event capture
! 703: registerMouseDown("scaler", zoomPointEvent);
1.1 dwinter 704: }
705:
706:
707: function zoomArea() {
1.3 ! casties 708: var click = 1;
! 709: var pt1, pt2;
! 710: var eck1pos, eck2pos, eck3pos, eck4pos;
! 711: window.focus();
! 712:
! 713: function zoomClick(evt) {
! 714: // mouse click handler
! 715: if (click == 1) {
! 716: // first click -- start moving
! 717: click = 2;
! 718: pt1 = new Point();
! 719: pt1.setWithEvent(evt);
! 720: pt2 = pt1;
! 721: eck1pos = new Position(pt1.pageX, pt1.pageY);
! 722: eck2pos = new Position(pt1.pageX - 12, pt1.pageY);
! 723: eck3pos = new Position(pt1.pageX, pt1.pageY - 12);
! 724: eck4pos = new Position(pt1.pageX- 12, pt1.pageY - 12);
! 725: moveElement("eck1", eck1pos);
! 726: moveElement("eck2", eck2pos);
! 727: moveElement("eck3", eck3pos);
! 728: moveElement("eck4", eck4pos);
! 729: showElement("eck1", true);
! 730: showElement("eck2", true);
! 731: showElement("eck3", true);
! 732: showElement("eck4", true);
! 733: registerMouseMove("scaler", zoomMove);
! 734: registerMouseMove("eck4", zoomMove);
! 735: } else {
! 736: // second click -- end moving
! 737: pt2 = new Point();
! 738: pt2.setWithEvent(evt);
! 739: showElement("eck1", false);
! 740: showElement("eck2", false);
! 741: showElement("eck3", false);
! 742: showElement("eck4", false);
! 743: unregisterMouseMove("scaler", zoomMove);
! 744: unregisterMouseMove("eck4", zoomMove);
! 745: unregisterMouseDown("scaler", zoomClick);
! 746: unregisterMouseDown("eck4", zoomClick);
! 747: var ww = pt2.relX-pt1.relX;
! 748: var wh = pt2.relY-pt1.relY;
! 749: if ((ww > 0)&&(wh > 0)) {
! 750: setParameter("wx", cropFloat(pt1.relX));
! 751: setParameter("wy", cropFloat(pt1.relY));
! 752: setParameter("ww", cropFloat(ww));
! 753: setParameter("wh", cropFloat(wh));
! 754: parseArea();
! 755: display(3);
! 756: }
! 757: }
1.1 dwinter 758: }
759:
1.3 ! casties 760: function zoomMove(evt) {
! 761: // mouse move handler
! 762: pt2 = new Point();
! 763: pt2.setWithEvent(evt);
! 764: // restrict marks to move right and down
! 765: eck1pos = new Position(pt1.pageX, pt1.pageY);
! 766: eck2pos = new Position(Math.max(pt1.pageX, pt2.pageX)-12, pt1.pageY);
! 767: eck3pos = new Position(pt1.pageX, Math.max(pt1.pageY, pt2.pageY)-12);
! 768: eck4pos = new Position(Math.max(pt1.pageX, pt2.pageX)-12, Math.max(pt1.pageY, pt2.pageY)-12);
! 769: moveElement("eck1", eck1pos);
! 770: moveElement("eck2", eck2pos);
! 771: moveElement("eck3", eck3pos);
! 772: moveElement("eck4", eck4pos);
1.1 dwinter 773: }
1.3 ! casties 774: // starting event capture
! 775: registerMouseDown("scaler", zoomClick);
! 776: registerMouseDown("eck4", zoomClick);
1.1 dwinter 777: }
778:
1.3 ! casties 779: function zoomFullpage() {
! 780: // zooms out to show the whole image
! 781: setParameter("wx", 0.0);
! 782: setParameter("wy", 0.0);
! 783: setParameter("ww", 1.0);
! 784: setParameter("wh", 1.0);
! 785: parseArea();
! 786: display(3);
1.1 dwinter 787: }
788:
789:
1.3 ! casties 790: function moveTo() {
1.1 dwinter 791:
1.3 ! casties 792: if ( (parseFloat(dlParams.ww.value) == 1.0) && (parseFloat(dlParams.wh.value) == 1.0) ) {
! 793: alert("This function is only available when zoomed in!");
! 794: return;
! 795: }
1.1 dwinter 796:
1.3 ! casties 797: function moveToEvent(event) {
! 798: // move to handler
! 799: var point = new Point();
! 800: point.setWithEvent(eventt);
! 801: var newarea = new Rectangle(point.relX-0.5*dlParams.ww.value, point.relY-0.5*dlParams.wh.value, dlArea.width, dlArea.height);
! 802: newarea = dlMaxArea.intersect(newarea);
! 803: // stopping event capture
! 804: unregisterMouseDown("scaler", moveToEvent);
! 805: // set parameters
! 806: setParameter("wx", cropFloat(newarea.x));
! 807: setParameter("wy", cropFloat(newarea.y));
! 808: setParameter("ww", cropFloat(newarea.width));
! 809: setParameter("wh", cropFloat(newarea.height));
1.1 dwinter 810: display(3);
1.3 ! casties 811: }
! 812: // starting event capture
! 813: registerMouseDown("scaler", moveToEvent);
1.1 dwinter 814: }
815:
1.3 ! casties 816: function setSize(factor) {
! 817: // change the size of the image
! 818: setParameter("ws", cropFloat(factor));
! 819: display(3);
! 820: }
! 821:
! 822: function setQuality(qual) {
! 823: // set the image quality
! 824: for (var i = 0; i < 3; i++) {
! 825: removeFlag("q"+i);
! 826: if (i == qual) {
! 827: addFlag("q"+i);
1.1 dwinter 828: }
1.3 ! casties 829: }
! 830: setParameter("mo", getAllFlags());
! 831: display(3);
! 832: }
! 833:
! 834: function mirror(dir) {
! 835: // mirror the image horizontally or vertically
! 836: if (dir == "h") {
! 837: toggleFlag("hmir");
1.1 dwinter 838: } else {
1.3 ! casties 839: toggleFlag("vmir");
1.1 dwinter 840: }
1.3 ! casties 841: setParameter("mo", getAllFlags());
! 842: display(3);
1.1 dwinter 843: }
844:
845: function parseKeypress(evt) {
1.3 ! casties 846: // capturing keypresses for next and previous page
! 847: if ( document.all ) {
1.1 dwinter 848: if ( event.keyCode == 110 ) {
1.3 ! casties 849: page('+1');
1.1 dwinter 850: }
851: if ( event.keyCode == 98 ) {
1.3 ! casties 852: page('-1');
1.1 dwinter 853: }
1.3 ! casties 854: document.cancelBubble = true;
! 855: } else {
1.1 dwinter 856: if ( evt.charCode == 110 ) {
1.3 ! casties 857: page('+1');
! 858: } else if ( evt.charCode == 98 ) {
! 859: page('-1');
! 860: } else if ( evt.which == 110 ) {
! 861: page('+1');
1.1 dwinter 862: } else if ( evt.which == 98 ) {
1.3 ! casties 863: // does not work currentlyfor Opera, because it catches the 'b'-key on it's own
! 864: // have to change the key or find another way - luginbuehl
! 865: page('-1');
1.1 dwinter 866: }
1.3 ! casties 867: }
1.1 dwinter 868: }
FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>
![[BACK]](/cvs/cvsweb/icons/back.gif){kind=icon}
Return to navigation.js CVS log ![[TXT]](/cvs/cvsweb/icons/text.gif){kind=icon}
![[DIR]](/cvs/cvsweb/icons/dir.gif){kind=icon}
Up to [Repository] / zogiLib / js