diff --git a/openseadragon.js b/openseadragon.js index 18d5369a..97e84cbb 100644 --- a/openseadragon.js +++ b/openseadragon.js @@ -512,7 +512,7 @@ OpenSeadragon = window.OpenSeadragon || (function(){ */ getPageScroll: function() { var result = new $.Point(), - docElmt = document.documentElement || {}, + docElement = document.documentElement || {}, body = document.body || {}; if ( typeof( window.pageXOffset ) == "number" ) { @@ -521,9 +521,9 @@ OpenSeadragon = window.OpenSeadragon || (function(){ } else if ( body.scrollLeft || body.scrollTop ) { result.x = body.scrollLeft; result.y = body.scrollTop; - } else if ( docElmt.scrollLeft || docElmt.scrollTop ) { - result.x = docElmt.scrollLeft; - result.y = docElmt.scrollTop; + } else if ( docElement.scrollLeft || docElement.scrollTop ) { + result.x = docElement.scrollLeft; + result.y = docElement.scrollTop; } return result; @@ -537,15 +537,15 @@ OpenSeadragon = window.OpenSeadragon || (function(){ */ getWindowSize: function() { var result = new $.Point(), - docElmt = document.documentElement || {}, + docElement = document.documentElement || {}, body = document.body || {}; if ( typeof( window.innerWidth ) == 'number' ) { result.x = window.innerWidth; result.y = window.innerHeight; - } else if ( docElmt.clientWidth || docElmt.clientHeight ) { - result.x = docElmt.clientWidth; - result.y = docElmt.clientHeight; + } else if ( docElement.clientWidth || docElement.clientHeight ) { + result.x = docElement.clientWidth; + result.y = docElement.clientHeight; } else if ( body.clientWidth || body.clientHeight ) { result.x = body.clientWidth; result.y = body.clientHeight; @@ -1274,12 +1274,11 @@ $.EventHandler.prototype = { //enough to load openseadragon.js onto the page twice. I don't know how //useful this pattern is, but if we decide to use it we should use it //everywhere - if ($.MouseTracker) { + if ( $.MouseTracker ) { return; } - var isIE = $.Browser.vendor == $.BROWSERS.IE, - buttonDownAny = false, + var buttonDownAny = false, ieCapturingAny = false, ieTrackersActive = {}, // dictionary from hash to MouseTracker ieTrackersCapturing = []; // list of trackers interested in capture @@ -1287,417 +1286,514 @@ $.EventHandler.prototype = { /** * @class */ - $.MouseTracker = function (elmt, clickTimeThreshold, clickDistThreshold) { + $.MouseTracker = function ( element, clickTimeThreshold, clickDistThreshold ) { //Start Thatcher - TODO: remove local function definitions in favor of // - a global closure for MouseTracker so the number // - of Viewers has less memory impact. Also use // - prototype pattern instead of Singleton pattern. //End Thatcher - var self = this, - ieSelf = null, - hash = Math.random(), // a unique hash for this tracker - elmt = $.getElement(elmt), + this.hash = Math.random(); // a unique hash for this tracker + this.element = $.getElement( element ); - tracking = false, - capturing = false, - buttonDownElmt = false, - insideElmt = false, + this.tracking = false; + this.capturing = false; + this.buttonDownElement = false; + this.insideElement = false; - lastPoint = null, // position of last mouse down/move - lastMouseDownTime = null, // time of last mouse down - lastMouseDownPoint = null, // position of last mouse down - clickTimeThreshold = clickTimeThreshold, - clickDistThreshold = clickDistThreshold; + this.lastPoint = null; // position of last mouse down/move + this.lastMouseDownTime = null; // time of last mouse down + this.lastMouseDownPoint = null; // position of last mouse down + this.clickTimeThreshold = clickTimeThreshold; + this.clickDistThreshold = clickDistThreshold; - this.target = elmt; - this.enterHandler = null; // function(tracker, position, buttonDownElmt, buttonDownAny) - this.exitHandler = null; // function(tracker, position, buttonDownElmt, buttonDownAny) + this.target = element; + this.enterHandler = null; // function(tracker, position, buttonDownElement, buttonDownAny) + this.exitHandler = null; // function(tracker, position, buttonDownElement, buttonDownAny) this.pressHandler = null; // function(tracker, position) - this.releaseHandler = null; // function(tracker, position, insideElmtPress, insideElmtRelease) + this.releaseHandler = null; // function(tracker, position, insideElementPress, insideElementRelease) this.scrollHandler = null; // function(tracker, position, scroll, shift) this.clickHandler = null; // function(tracker, position, quick, shift) this.dragHandler = null; // function(tracker, position, delta, shift) - (function () { - ieSelf = { - hasMouse: hasMouse, - onMouseOver: onMouseOver, - onMouseOut: onMouseOut, - onMouseUp: onMouseUp, - onMouseMove: onMouseMove - }; - })(); - - - this.isTracking = function () { - return tracking; + this.delegates = { + "mouseover": $.delegate(this, this.onMouseOver), + "mouseout": $.delegate(this, this.onMouseOut), + "mousedown": $.delegate(this, this.onMouseDown), + "mouseup": $.delegate(this, this.onMouseUp), + "click": $.delegate(this, this.onMouseClick), + "DOMMouseScroll": $.delegate(this, this.onMouseWheelSpin), + "mousewheel": $.delegate(this, this.onMouseWheelSpin), + "mouseupie": $.delegate(this, this.onMouseUpIE), + "mousemoveie": $.delegate(this, this.onMouseMoveIE), + "mouseupwindow": $.delegate(this, this.onMouseUpWindow), + "mousemove": $.delegate(this, this.onMouseMove) }; - this.setTracking = function (track) { - if (track) { - startTracking(); + }; + + $.MouseTracker.prototype = { + + + /** + * @method + */ + isTracking: function () { + return this.tracking; + }, + + /** + * @method + */ + setTracking: function ( track ) { + if ( track ) { + this.startTracking(); } else { - stopTracking(); + this.stopTracking(); } - }; - - function startTracking() { - if (!tracking) { - $.addEvent(elmt, "mouseover", onMouseOver, false); - $.addEvent(elmt, "mouseout", onMouseOut, false); - $.addEvent(elmt, "mousedown", onMouseDown, false); - $.addEvent(elmt, "mouseup", onMouseUp, false); - $.addEvent(elmt, "click", onMouseClick, false); - $.addEvent(elmt, "DOMMouseScroll", onMouseWheelSpin, false); - $.addEvent(elmt, "mousewheel", onMouseWheelSpin, false); // Firefox - - tracking = true; - ieTrackersActive[hash] = ieSelf; - } - } - - function stopTracking() { - if (tracking) { - $.removeEvent(elmt, "mouseover", onMouseOver, false); - $.removeEvent(elmt, "mouseout", onMouseOut, false); - $.removeEvent(elmt, "mousedown", onMouseDown, false); - $.removeEvent(elmt, "mouseup", onMouseUp, false); - $.removeEvent(elmt, "click", onMouseClick, false); - $.removeEvent(elmt, "DOMMouseScroll", onMouseWheelSpin, false); - $.removeEvent(elmt, "mousewheel", onMouseWheelSpin, false); - - releaseMouse(); - tracking = false; - delete ieTrackersActive[hash]; - } - } - - function captureMouse() { - if (!capturing) { - if (isIE) { - $.removeEvent(elmt, "mouseup", onMouseUp, false); - $.addEvent(elmt, "mouseup", onMouseUpIE, true); - $.addEvent(elmt, "mousemove", onMouseMoveIE, true); - } else { - $.addEvent(window, "mouseup", onMouseUpWindow, true); - $.addEvent(window, "mousemove", onMouseMove, true); - } - - capturing = true; - } - } - - function releaseMouse() { - if (capturing) { - if (isIE) { - $.removeEvent(elmt, "mousemove", onMouseMoveIE, true); - $.removeEvent(elmt, "mouseup", onMouseUpIE, true); - $.addEvent(elmt, "mouseup", onMouseUp, false); - } else { - $.removeEvent(window, "mousemove", onMouseMove, true); - $.removeEvent(window, "mouseup", onMouseUpWindow, true); - } - - capturing = false; - } - } - - - function triggerOthers(eventName, event) { - var trackers = ieTrackersActive; - for (var otherHash in trackers) { - if (trackers.hasOwnProperty(otherHash) && hash != otherHash) { - trackers[otherHash][eventName](event); - } - } - } - - function hasMouse() { - return insideElmt; - } - - - function onMouseOver(event) { - var event = $.getEvent(event); - - if (isIE && capturing && !isChild(event.srcElement, elmt)) { - triggerOthers("onMouseOver", event); - } - - var to = event.target ? event.target : event.srcElement; - var from = event.relatedTarget ? event.relatedTarget : event.fromElement; - if (!isChild(elmt, to) || isChild(elmt, from)) { - return; - } - - insideElmt = true; - - if (typeof (self.enterHandler) == "function") { - try { - self.enterHandler(self, getMouseRelative(event, elmt), - buttonDownElmt, buttonDownAny); - } catch (e) { - $.console.error(e.name + - " while executing enter handler: " + e.message, e); - } - } - } - - function onMouseOut(event) { - var event = $.getEvent(event); - - if (isIE && capturing && !isChild(event.srcElement, elmt)) { - triggerOthers("onMouseOut", event); - } - - var from = event.target ? event.target : event.srcElement; - var to = event.relatedTarget ? event.relatedTarget : event.toElement; - if (!isChild(elmt, from) || isChild(elmt, to)) { - return; - } - - insideElmt = false; - - if (typeof (self.exitHandler) == "function") { - try { - self.exitHandler(self, getMouseRelative(event, elmt), - buttonDownElmt, buttonDownAny); - } catch (e) { - $.console.error(e.name + - " while executing exit handler: " + e.message, e); - } - } - } - - function onMouseDown(event) { - var event = $.getEvent(event); - - if (event.button == 2) { - return; - } - - buttonDownElmt = true; - - lastPoint = getMouseAbsolute(event); - lastMouseDownPoint = lastPoint; - lastMouseDownTime = new Date().getTime(); - - if (typeof (self.pressHandler) == "function") { - try { - self.pressHandler(self, getMouseRelative(event, elmt)); - } catch (e) { - $.console.error(e.name + - " while executing press handler: " + e.message, e); - } - } - - if (self.pressHandler || self.dragHandler) { - $.cancelEvent(event); - } - - if (!isIE || !ieCapturingAny) { - captureMouse(); - ieCapturingAny = true; - ieTrackersCapturing = [ieSelf]; // reset to empty & add us - } else if (isIE) { - ieTrackersCapturing.push(ieSelf); // add us to the list - } - } - - function onMouseUp(event) { - var event = $.getEvent(event); - var insideElmtPress = buttonDownElmt; - var insideElmtRelease = insideElmt; - - if (event.button == 2) { - return; - } - - buttonDownElmt = false; - - if (typeof (self.releaseHandler) == "function") { - try { - self.releaseHandler(self, getMouseRelative(event, elmt), - insideElmtPress, insideElmtRelease); - } catch (e) { - $.console.error(e.name + - " while executing release handler: " + e.message, e); - } - } - - if (insideElmtPress && insideElmtRelease) { - handleMouseClick(event); - } - } + }, /** - * Only triggered once by the deepest element that initially received - * the mouse down event. We want to make sure THIS event doesn't bubble. - * Instead, we want to trigger the elements that initially received the - * mouse down event (including this one) only if the mouse is no longer - * inside them. Then, we want to release capture, and emulate a regular - * mouseup on the event that this event was meant for. - */ - function onMouseUpIE(event) { - var event = $.getEvent(event); + * @method + */ + startTracking: function() { + if ( !this.tracking ) { + $.addEvent( this.element, "mouseover", this.delegates["mouseover"], false); + $.addEvent( this.element, "mouseout", this.delegates["mouseout"], false); + $.addEvent( this.element, "mousedown", this.delegates["mousedown"], false); + $.addEvent( this.element, "mouseup", this.delegates["mouseup"], false); + $.addEvent( this.element, "click", this.delegates["click"], false); + $.addEvent( this.element, "DOMMouseScroll", this.delegates["DOMMouseScroll"], false); + $.addEvent( this.element, "mousewheel", this.delegates["mousewheel"], false); // Firefox - if (event.button == 2) { + this.tracking = true; + ieTrackersActive[ this.hash ] = this; + } + }, + + /** + * @method + */ + stopTracking: function() { + if ( this.tracking ) { + $.removeEvent( this.element, "mouseover", this.delegates["mouseover"], false); + $.removeEvent( this.element, "mouseout", this.delegates["mouseout"], false); + $.removeEvent( this.element, "mousedown", this.delegates["mousedown"], false); + $.removeEvent( this.element, "mouseup", this.delegates["mouseup"], false); + $.removeEvent( this.element, "click", this.delegates["click"], false); + $.removeEvent( this.element, "DOMMouseScroll", this.delegates["DOMMouseScroll"], false); + $.removeEvent( this.element, "mousewheel", this.delegates["mousewheel"], false); + + this.releaseMouse(); + this.tracking = false; + delete ieTrackersActive[ this.hash ]; + } + }, + + /** + * @method + */ + captureMouse: function() { + if ( !this.capturing ) { + if ( $.Browser.vendor == $.BROWSERS.IE ) { + $.removeEvent( this.element, "mouseup", this.delegates["mouseup"], false ); + $.addEvent( this.element, "mouseup", this.delegates["mouseupie"], true ); + $.addEvent( this.element, "mousemove", this.delegates["mousemoveie"], true ); + } else { + $.addEvent( window, "mouseup", this.delegates["mouseupwindow"], true ); + $.addEvent( window, "mousemove", this.delegates["mousemove"], true ); + } + + this.capturing = true; + } + }, + + + /** + * @method + */ + releaseMouse: function() { + if ( this.capturing ) { + if ( $.Browser.vendor == $.BROWSERS.IE ) { + $.removeEvent( this.element, "mousemove", this.delegates["mousemoveie"], true ); + $.removeEvent( this.element, "mouseup", this.delegates["mouseupie"], true ); + $.addEvent( this.element, "mouseup", this.delegates["mouseup"], false ); + } else { + $.removeEvent( window, "mousemove", this.delegates["mousemove"], true ); + $.removeEvent( window, "mouseup", this.delegates["mouseupwindow"], true ); + } + + this.capturing = false; + } + }, + + + /** + * @method + */ + triggerOthers: function( eventName, event ) { + var trackers = ieTrackersActive, + otherHash; + for ( otherHash in trackers ) { + if ( trackers.hasOwnProperty( otherHash ) && this.hash != otherHash ) { + trackers[ otherHash ][ eventName ]( event ); + } + } + }, + + /** + * @method + */ + hasMouse: function() { + return this.insideElement; + }, + + + /** + * @method + */ + onMouseOver: function( event ) { + var event = $.getEvent( event ); + + if ( $.Browser.vendor == $.BROWSERS.IE && + this.capturing && + !isChild( event.srcElement, this.element ) ) { + this.triggerOthers( "onMouseOver", event ); + } + + var to = event.target ? + event.target : + event.srcElement, + from = event.relatedTarget ? + event.relatedTarget : + event.fromElement; + + if ( !isChild( this.element, to ) || isChild( this.element, from ) ) { return; } - for (var i = 0; i < ieTrackersCapturing.length; i++) { - var tracker = ieTrackersCapturing[i]; - if (!tracker.hasMouse()) { - tracker.onMouseUp(event); + this.insideElement = true; + + if ( typeof( this.enterHandler ) == "function") { + try { + this.enterHandler( + this, + getMouseRelative( event, this.element ), + this.buttonDownElement, + buttonDownAny + ); + } catch ( e ) { + $.console.error( + e.name + " while executing enter handler: " + e.message, + e + ); } } - - releaseMouse(); - ieCapturingAny = false; - event.srcElement.fireEvent("on" + event.type, - document.createEventObject(event)); - - $.stopEvent(event); - } + }, /** - * @private + * @method + */ + onMouseOut: function( event ) { + var event = $.getEvent( event ); + + if ( $.Browser.vendor == $.BROWSERS.IE && + this.capturing && + !isChild( event.srcElement, this.element ) ) { + this.triggerOthers( "onMouseOut", event ); + } + + var from = event.target ? + event.target : + event.srcElement, + to = event.relatedTarget ? + event.relatedTarget : + event.toElement; + + if ( !isChild( this.element, from ) || isChild( this.element, to ) ) { + return; + } + + this.insideElement = false; + + if ( typeof( this.exitHandler ) == "function" ) { + try { + this.exitHandler( + this, + getMouseRelative( event, this.element ), + this.buttonDownElement, + buttonDownAny + ); + } catch ( e ) { + $.console.error( + e.name + " while executing exit handler: " + e.message, + e + ); + } + } + }, + + /** + * @method * @inner + */ + onMouseDown: function( event ) { + var event = $.getEvent( event ); + + if ( event.button == 2 ) { + return; + } + + this.buttonDownElement = true; + + this.lastPoint = getMouseAbsolute( event ); + this.lastMouseDownPoint = this.lastPoint; + this.lastMouseDownTime = new Date().getTime(); + + if ( typeof( this.pressHandler ) == "function" ) { + try { + this.pressHandler( + this, + getMouseRelative( event, this.element ) + ); + } catch (e) { + $.console.error( + e.name + " while executing press handler: " + e.message, + e + ); + } + } + + if ( this.pressHandler || this.dragHandler ) { + $.cancelEvent( event ); + } + + if ( !( $.Browser.vendor == $.BROWSERS.IE ) || !ieCapturingAny ) { + this.captureMouse(); + ieCapturingAny = true; + ieTrackersCapturing = [ this ]; // reset to empty & add us + } else if ( $.Browser.vendor == $.BROWSERS.IE ) { + ieTrackersCapturing.push( this ); // add us to the list + } + }, + + /** + * @method + */ + onMouseUp: function( event ) { + var event = $.getEvent( event ), + insideElementPress = this.buttonDownElement, + insideElementRelease = this.insideElement; + + if ( event.button == 2 ) { + return; + } + + this.buttonDownElement = false; + + if ( typeof( this.releaseHandler ) == "function" ) { + try { + this.releaseHandler( + this, + getMouseRelative( event, this.element ), + insideElementPress, + insideElementRelease + ); + } catch (e) { + $.console.error( + e.name + " while executing release handler: " + e.message, + e + ); + } + } + + if ( insideElementPress && insideElementRelease ) { + this.handleMouseClick( event ); + } + }, + + /** + * @method + * Only triggered once by the deepest element that initially received + * the mouse down event. We want to make sure THIS event doesn't bubble. + * Instead, we want to trigger the elements that initially received the + * mouse down event (including this one) only if the mouse is no longer + * inside them. Then, we want to release capture, and emulate a regular + * mouseup on the event that this event was meant for. + */ + onMouseUpIE: function( event ) { + var event = $.getEvent( event ), + tracker, + i; + + if ( event.button == 2 ) { + return; + } + + for ( i = 0; i < ieTrackersCapturing.length; i++ ) { + tracker = ieTrackersCapturing[ i ]; + if ( !tracker.hasMouse() ) { + tracker.onMouseUp( event ); + } + } + + this.releaseMouse(); + ieCapturingAny = false; + event.srcElement.fireEvent( + "on" + event.type, + document.createEventObject( event ) + ); + + $.stopEvent( event ); + }, + + /** + * @method * Only triggered in W3C browsers by elements within which the mouse was * initially pressed, since they are now listening to the window for * mouseup during the capture phase. We shouldn't handle the mouseup * here if the mouse is still inside this element, since the regular * mouseup handler will still fire. */ - function onMouseUpWindow(event) { - if (!insideElmt) { - onMouseUp(event); + onMouseUpWindow: function( event ) { + if ( !this.insideElement ) { + this.onMouseUp( event ); } - releaseMouse(); - } + this.releaseMouse(); + }, /** - * @private - * @inner + * @method */ - function onMouseClick(event) { + onMouseClick: function( event ) { - if (self.clickHandler) { - $.cancelEvent(event); + if ( this.clickHandler ) { + $.cancelEvent( event ); } - } + }, /** - * @private - * @inner + * @method */ - function onMouseWheelSpin(event) { + onMouseWheelSpin: function( event ) { var nDelta = 0; - if (!event) { // For IE, access the global (window) event object + + if ( !event ) { // For IE, access the global (window) event object event = window.event; } - if (event.wheelDelta) { // IE and Opera + + if ( event.wheelDelta ) { // IE and Opera nDelta = event.wheelDelta; - if (window.opera) { // Opera has the values reversed + if ( window.opera ) { // Opera has the values reversed nDelta = -nDelta; } - } - else if (event.detail) { // Mozilla FireFox + } else if (event.detail) { // Mozilla FireFox nDelta = -event.detail; } nDelta = nDelta > 0 ? 1 : -1; - if (typeof (self.scrollHandler) == "function") { + if ( typeof( this.scrollHandler ) == "function" ) { try { - self.scrollHandler(self, getMouseRelative(event, elmt), nDelta, event.shiftKey); + this.scrollHandler( + this, + getMouseRelative( event, this.element ), + nDelta, + event.shiftKey + ); } catch (e) { - $.console.error(e.name + - " while executing scroll handler: " + e.message, e); + $.console.error( + e.name + " while executing scroll handler: " + e.message, + e + ); } - $.cancelEvent(event); + $.cancelEvent( event ); } - } + }, /** - * @private - * @inner + * @method */ - function handleMouseClick(event) { - var event = $.getEvent(event); + handleMouseClick: function( event ) { + var event = $.getEvent( event ); - if (event.button == 2) { + if ( event.button == 2 ) { return; } - var time = new Date().getTime() - lastMouseDownTime; - var point = getMouseAbsolute(event); - var distance = lastMouseDownPoint.distanceTo(point); - var quick = time <= clickTimeThreshold && - distance <= clickDistThreshold; + var time = new Date().getTime() - this.lastMouseDownTime; + var point = getMouseAbsolute( event ); + var distance = this.lastMouseDownPoint.distanceTo( point ); + var quick = ( + time <= this.clickTimeThreshold + ) && ( + distance <= this.clickDistThreshold + ); - if (typeof (self.clickHandler) == "function") { + if ( typeof( this.clickHandler ) == "function" ) { try { - self.clickHandler(self, getMouseRelative(event, elmt), - quick, event.shiftKey); - } catch (e) { - $.console.error(e.name + - " while executing click handler: " + e.message, e); + this.clickHandler( + this, + getMouseRelative( event, this.element ), + quick, + event.shiftKey + ); + } catch ( e ) { + $.console.error( + e.name + " while executing click handler: " + e.message, + e + ); } } - } + }, /** - * @private - * @inner + * @method */ - function onMouseMove(event) { - var event = $.getEvent(event); - var point = getMouseAbsolute(event); - var delta = point.minus(lastPoint); + onMouseMove: function( event ) { + var event = $.getEvent( event ); + var point = getMouseAbsolute( event ); + var delta = point.minus( this.lastPoint ); - lastPoint = point; + this.lastPoint = point; - if (typeof (self.dragHandler) == "function") { + if ( typeof( this.dragHandler ) == "function" ) { try { - self.dragHandler( - self, - getMouseRelative( event, elmt ), + this.dragHandler( + this, + getMouseRelative( event, this.element ), delta, event.shiftKey ); } catch (e) { $.console.error( - e.name + - " while executing drag handler: " - + e.message, + e.name + " while executing drag handler: " + e.message, e ); } - $.cancelEvent(event); + $.cancelEvent( event ); } - }; + }, /** - * @private - * @inner * Only triggered once by the deepest element that initially received * the mouse down event. Since no other element has captured the mouse, * we want to trigger the elements that initially received the mouse * down event (including this one). + * @method */ - function onMouseMoveIE(event) { - for (var i = 0; i < ieTrackersCapturing.length; i++) { - ieTrackersCapturing[i].onMouseMove(event); + onMouseMoveIE: function( event ) { + var i; + for ( i = 0; i < ieTrackersCapturing.length; i++ ) { + ieTrackersCapturing[ i ].onMouseMove( event ); } - $.stopEvent(event); - }; + $.stopEvent( event ); + } }; @@ -1706,36 +1802,36 @@ $.EventHandler.prototype = { * @inner */ function getMouseAbsolute( event ) { - return $.getMousePosition(event); - } + return $.getMousePosition( event ); + }; /** * @private * @inner */ - function getMouseRelative( event, elmt ) { - var mouse = $.getMousePosition(event); - var offset = $.getElementPosition(elmt); + function getMouseRelative( event, element ) { + var mouse = $.getMousePosition( event ), + offset = $.getElementPosition( element ); - return mouse.minus(offset); - } + return mouse.minus( offset ); + }; /** * @private * @inner - * Returns true if elmtB is a child node of elmtA, or if they're equal. + * Returns true if elementB is a child node of elementA, or if they're equal. */ - function isChild( elmtA, elmtB ) { + function isChild( elementA, elementB ) { var body = document.body; - while (elmtB && elmtA != elmtB && body != elmtB) { + while ( elementB && elementA != elementB && body != elementB ) { try { - elmtB = elmtB.parentNode; + elementB = elementB.parentNode; } catch (e) { return false; } } - return elmtA == elmtB; - } + return elementA == elementB; + }; /** * @private @@ -1743,7 +1839,7 @@ $.EventHandler.prototype = { */ function onGlobalMouseDown() { buttonDownAny = true; - } + }; /** * @private @@ -1751,16 +1847,16 @@ $.EventHandler.prototype = { */ function onGlobalMouseUp() { buttonDownAny = false; - } + }; (function () { - if (isIE) { - $.addEvent(document, "mousedown", onGlobalMouseDown, false); - $.addEvent(document, "mouseup", onGlobalMouseUp, false); + if ( $.Browser.vendor == $.BROWSERS.IE ) { + $.addEvent( document, "mousedown", onGlobalMouseDown, false ); + $.addEvent( document, "mouseup", onGlobalMouseUp, false ); } else { - $.addEvent(window, "mousedown", onGlobalMouseDown, true); - $.addEvent(window, "mouseup", onGlobalMouseUp, true); + $.addEvent( window, "mousedown", onGlobalMouseDown, true ); + $.addEvent( window, "mouseup", onGlobalMouseUp, true ); } })(); @@ -3962,9 +4058,9 @@ function transform( stiffness, x ) { * @property {String} url The URL of this tile's image. * @property {Boolean} loaded Is this tile loaded? * @property {Boolean} loading Is this tile loading - * @property {Element} elmt The HTML element for this tile + * @property {Element} element The HTML element for this tile * @property {Image} image The Image object for this tile - * @property {String} style The alias of this.elmt.style. + * @property {String} style The alias of this.element.style. * @property {String} position This tile's position on screen, in pixels. * @property {String} size This tile's size on screen, in pixels * @property {String} blendStart The start time of this tile's blending @@ -3984,7 +4080,7 @@ $.Tile = function(level, x, y, bounds, exists, url) { this.loaded = false; this.loading = false; - this.elmt = null; + this.element = null; this.image = null; this.style = null; @@ -4029,26 +4125,26 @@ $.Tile.prototype = { return; } - if ( !this.elmt ) { - this.elmt = $.makeNeutralElement("img"); - this.elmt.src = this.url; - this.style = this.elmt.style; + if ( !this.element ) { + this.element = $.makeNeutralElement("img"); + this.element.src = this.url; + this.style = this.element.style; this.style.position = "absolute"; this.style.msInterpolationMode = "nearest-neighbor"; } - if ( this.elmt.parentNode != container ) { - container.appendChild( this.elmt ); + if ( this.element.parentNode != container ) { + container.appendChild( this.element ); } - this.elmt.style.left = position.x + "px"; - this.elmt.style.top = position.y + "px"; - this.elmt.style.width = size.x + "px"; - this.elmt.style.height = size.y + "px"; + this.element.style.left = position.x + "px"; + this.element.style.top = position.y + "px"; + this.element.style.width = size.x + "px"; + this.element.style.height = size.y + "px"; - $.setElementOpacity( this.elmt, this.opacity ); + $.setElementOpacity( this.element, this.opacity ); }, @@ -4079,11 +4175,11 @@ $.Tile.prototype = { * @function */ unload: function() { - if ( this.elmt && this.elmt.parentNode ) { - this.elmt.parentNode.removeChild( this.elmt ); + if ( this.element && this.element.parentNode ) { + this.element.parentNode.removeChild( this.element ); } - this.elmt = null; + this.element = null; this.image = null; this.loaded = false; this.loading = false; @@ -4116,8 +4212,8 @@ $.Tile.prototype = { * An Overlay provides a * @class */ - $.Overlay = function( elmt, location, placement ) { - this.elmt = elmt; + $.Overlay = function( element, location, placement ) { + this.element = element; this.scales = location instanceof $.Rect; this.bounds = new $.Rect( location.x, @@ -4133,7 +4229,7 @@ $.Tile.prototype = { location.width, location.height ); - this.style = elmt.style; + this.style = element.style; // rects are always top-left this.placement = location instanceof $.Point ? placement : @@ -4179,7 +4275,7 @@ $.Tile.prototype = { }, destroy: function() { - var element = this.elmt, + var element = this.element, style = this.style; if ( element.parentNode ) { @@ -4197,7 +4293,7 @@ $.Tile.prototype = { }, drawHTML: function( container ) { - var element = this.elmt, + var element = this.element, style = this.style, scales = this.scales, position, @@ -4290,7 +4386,7 @@ var QUOTA = 100, * @property {Number} lastResetTime - Last time for which the drawer was reset. * @property {Boolean} midUpdate - Is the drawer currently updating the viewport? * @property {Boolean} updateAgain - Does the drawer need to update the viewort again? - * @property {Element} elmt - DEPRECATED Alias for container. + * @property {Element} element - DEPRECATED Alias for container. */ $.Drawer = function( source, viewport, element ) { @@ -4311,7 +4407,7 @@ $.Drawer = function( source, viewport, element ) { this.lastResetTime = 0; this.midUpdate = false; this.updateAgain = true; - this.elmt = this.container; + this.element = this.container; this.canvas.style.width = "100%"; this.canvas.style.height = "100%"; @@ -5049,7 +5145,7 @@ function resetCoverage( coverage, level ) { function getOverlayIndex( overlays, element ) { var i; for ( i = overlays.length - 1; i >= 0; i-- ) { - if ( overlays[ i ].elmt == element ) { + if ( overlays[ i ].element == element ) { return i; } } diff --git a/src/drawer.js b/src/drawer.js index 8710cdae..05df99e9 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -42,7 +42,7 @@ var QUOTA = 100, * @property {Number} lastResetTime - Last time for which the drawer was reset. * @property {Boolean} midUpdate - Is the drawer currently updating the viewport? * @property {Boolean} updateAgain - Does the drawer need to update the viewort again? - * @property {Element} elmt - DEPRECATED Alias for container. + * @property {Element} element - DEPRECATED Alias for container. */ $.Drawer = function( source, viewport, element ) { @@ -63,7 +63,7 @@ $.Drawer = function( source, viewport, element ) { this.lastResetTime = 0; this.midUpdate = false; this.updateAgain = true; - this.elmt = this.container; + this.element = this.container; this.canvas.style.width = "100%"; this.canvas.style.height = "100%"; @@ -801,7 +801,7 @@ function resetCoverage( coverage, level ) { function getOverlayIndex( overlays, element ) { var i; for ( i = overlays.length - 1; i >= 0; i-- ) { - if ( overlays[ i ].elmt == element ) { + if ( overlays[ i ].element == element ) { return i; } } diff --git a/src/mousetracker.js b/src/mousetracker.js index aff06acd..d9dac735 100644 --- a/src/mousetracker.js +++ b/src/mousetracker.js @@ -5,12 +5,11 @@ //enough to load openseadragon.js onto the page twice. I don't know how //useful this pattern is, but if we decide to use it we should use it //everywhere - if ($.MouseTracker) { + if ( $.MouseTracker ) { return; } - var isIE = $.Browser.vendor == $.BROWSERS.IE, - buttonDownAny = false, + var buttonDownAny = false, ieCapturingAny = false, ieTrackersActive = {}, // dictionary from hash to MouseTracker ieTrackersCapturing = []; // list of trackers interested in capture @@ -18,417 +17,514 @@ /** * @class */ - $.MouseTracker = function (elmt, clickTimeThreshold, clickDistThreshold) { + $.MouseTracker = function ( element, clickTimeThreshold, clickDistThreshold ) { //Start Thatcher - TODO: remove local function definitions in favor of // - a global closure for MouseTracker so the number // - of Viewers has less memory impact. Also use // - prototype pattern instead of Singleton pattern. //End Thatcher - var self = this, - ieSelf = null, - hash = Math.random(), // a unique hash for this tracker - elmt = $.getElement(elmt), + this.hash = Math.random(); // a unique hash for this tracker + this.element = $.getElement( element ); - tracking = false, - capturing = false, - buttonDownElmt = false, - insideElmt = false, + this.tracking = false; + this.capturing = false; + this.buttonDownElement = false; + this.insideElement = false; - lastPoint = null, // position of last mouse down/move - lastMouseDownTime = null, // time of last mouse down - lastMouseDownPoint = null, // position of last mouse down - clickTimeThreshold = clickTimeThreshold, - clickDistThreshold = clickDistThreshold; + this.lastPoint = null; // position of last mouse down/move + this.lastMouseDownTime = null; // time of last mouse down + this.lastMouseDownPoint = null; // position of last mouse down + this.clickTimeThreshold = clickTimeThreshold; + this.clickDistThreshold = clickDistThreshold; - this.target = elmt; - this.enterHandler = null; // function(tracker, position, buttonDownElmt, buttonDownAny) - this.exitHandler = null; // function(tracker, position, buttonDownElmt, buttonDownAny) + this.target = element; + this.enterHandler = null; // function(tracker, position, buttonDownElement, buttonDownAny) + this.exitHandler = null; // function(tracker, position, buttonDownElement, buttonDownAny) this.pressHandler = null; // function(tracker, position) - this.releaseHandler = null; // function(tracker, position, insideElmtPress, insideElmtRelease) + this.releaseHandler = null; // function(tracker, position, insideElementPress, insideElementRelease) this.scrollHandler = null; // function(tracker, position, scroll, shift) this.clickHandler = null; // function(tracker, position, quick, shift) this.dragHandler = null; // function(tracker, position, delta, shift) - (function () { - ieSelf = { - hasMouse: hasMouse, - onMouseOver: onMouseOver, - onMouseOut: onMouseOut, - onMouseUp: onMouseUp, - onMouseMove: onMouseMove - }; - })(); - - - this.isTracking = function () { - return tracking; + this.delegates = { + "mouseover": $.delegate(this, this.onMouseOver), + "mouseout": $.delegate(this, this.onMouseOut), + "mousedown": $.delegate(this, this.onMouseDown), + "mouseup": $.delegate(this, this.onMouseUp), + "click": $.delegate(this, this.onMouseClick), + "DOMMouseScroll": $.delegate(this, this.onMouseWheelSpin), + "mousewheel": $.delegate(this, this.onMouseWheelSpin), + "mouseupie": $.delegate(this, this.onMouseUpIE), + "mousemoveie": $.delegate(this, this.onMouseMoveIE), + "mouseupwindow": $.delegate(this, this.onMouseUpWindow), + "mousemove": $.delegate(this, this.onMouseMove) }; - this.setTracking = function (track) { - if (track) { - startTracking(); + }; + + $.MouseTracker.prototype = { + + + /** + * @method + */ + isTracking: function () { + return this.tracking; + }, + + /** + * @method + */ + setTracking: function ( track ) { + if ( track ) { + this.startTracking(); } else { - stopTracking(); + this.stopTracking(); } - }; - - function startTracking() { - if (!tracking) { - $.addEvent(elmt, "mouseover", onMouseOver, false); - $.addEvent(elmt, "mouseout", onMouseOut, false); - $.addEvent(elmt, "mousedown", onMouseDown, false); - $.addEvent(elmt, "mouseup", onMouseUp, false); - $.addEvent(elmt, "click", onMouseClick, false); - $.addEvent(elmt, "DOMMouseScroll", onMouseWheelSpin, false); - $.addEvent(elmt, "mousewheel", onMouseWheelSpin, false); // Firefox - - tracking = true; - ieTrackersActive[hash] = ieSelf; - } - } - - function stopTracking() { - if (tracking) { - $.removeEvent(elmt, "mouseover", onMouseOver, false); - $.removeEvent(elmt, "mouseout", onMouseOut, false); - $.removeEvent(elmt, "mousedown", onMouseDown, false); - $.removeEvent(elmt, "mouseup", onMouseUp, false); - $.removeEvent(elmt, "click", onMouseClick, false); - $.removeEvent(elmt, "DOMMouseScroll", onMouseWheelSpin, false); - $.removeEvent(elmt, "mousewheel", onMouseWheelSpin, false); - - releaseMouse(); - tracking = false; - delete ieTrackersActive[hash]; - } - } - - function captureMouse() { - if (!capturing) { - if (isIE) { - $.removeEvent(elmt, "mouseup", onMouseUp, false); - $.addEvent(elmt, "mouseup", onMouseUpIE, true); - $.addEvent(elmt, "mousemove", onMouseMoveIE, true); - } else { - $.addEvent(window, "mouseup", onMouseUpWindow, true); - $.addEvent(window, "mousemove", onMouseMove, true); - } - - capturing = true; - } - } - - function releaseMouse() { - if (capturing) { - if (isIE) { - $.removeEvent(elmt, "mousemove", onMouseMoveIE, true); - $.removeEvent(elmt, "mouseup", onMouseUpIE, true); - $.addEvent(elmt, "mouseup", onMouseUp, false); - } else { - $.removeEvent(window, "mousemove", onMouseMove, true); - $.removeEvent(window, "mouseup", onMouseUpWindow, true); - } - - capturing = false; - } - } - - - function triggerOthers(eventName, event) { - var trackers = ieTrackersActive; - for (var otherHash in trackers) { - if (trackers.hasOwnProperty(otherHash) && hash != otherHash) { - trackers[otherHash][eventName](event); - } - } - } - - function hasMouse() { - return insideElmt; - } - - - function onMouseOver(event) { - var event = $.getEvent(event); - - if (isIE && capturing && !isChild(event.srcElement, elmt)) { - triggerOthers("onMouseOver", event); - } - - var to = event.target ? event.target : event.srcElement; - var from = event.relatedTarget ? event.relatedTarget : event.fromElement; - if (!isChild(elmt, to) || isChild(elmt, from)) { - return; - } - - insideElmt = true; - - if (typeof (self.enterHandler) == "function") { - try { - self.enterHandler(self, getMouseRelative(event, elmt), - buttonDownElmt, buttonDownAny); - } catch (e) { - $.console.error(e.name + - " while executing enter handler: " + e.message, e); - } - } - } - - function onMouseOut(event) { - var event = $.getEvent(event); - - if (isIE && capturing && !isChild(event.srcElement, elmt)) { - triggerOthers("onMouseOut", event); - } - - var from = event.target ? event.target : event.srcElement; - var to = event.relatedTarget ? event.relatedTarget : event.toElement; - if (!isChild(elmt, from) || isChild(elmt, to)) { - return; - } - - insideElmt = false; - - if (typeof (self.exitHandler) == "function") { - try { - self.exitHandler(self, getMouseRelative(event, elmt), - buttonDownElmt, buttonDownAny); - } catch (e) { - $.console.error(e.name + - " while executing exit handler: " + e.message, e); - } - } - } - - function onMouseDown(event) { - var event = $.getEvent(event); - - if (event.button == 2) { - return; - } - - buttonDownElmt = true; - - lastPoint = getMouseAbsolute(event); - lastMouseDownPoint = lastPoint; - lastMouseDownTime = new Date().getTime(); - - if (typeof (self.pressHandler) == "function") { - try { - self.pressHandler(self, getMouseRelative(event, elmt)); - } catch (e) { - $.console.error(e.name + - " while executing press handler: " + e.message, e); - } - } - - if (self.pressHandler || self.dragHandler) { - $.cancelEvent(event); - } - - if (!isIE || !ieCapturingAny) { - captureMouse(); - ieCapturingAny = true; - ieTrackersCapturing = [ieSelf]; // reset to empty & add us - } else if (isIE) { - ieTrackersCapturing.push(ieSelf); // add us to the list - } - } - - function onMouseUp(event) { - var event = $.getEvent(event); - var insideElmtPress = buttonDownElmt; - var insideElmtRelease = insideElmt; - - if (event.button == 2) { - return; - } - - buttonDownElmt = false; - - if (typeof (self.releaseHandler) == "function") { - try { - self.releaseHandler(self, getMouseRelative(event, elmt), - insideElmtPress, insideElmtRelease); - } catch (e) { - $.console.error(e.name + - " while executing release handler: " + e.message, e); - } - } - - if (insideElmtPress && insideElmtRelease) { - handleMouseClick(event); - } - } + }, /** - * Only triggered once by the deepest element that initially received - * the mouse down event. We want to make sure THIS event doesn't bubble. - * Instead, we want to trigger the elements that initially received the - * mouse down event (including this one) only if the mouse is no longer - * inside them. Then, we want to release capture, and emulate a regular - * mouseup on the event that this event was meant for. - */ - function onMouseUpIE(event) { - var event = $.getEvent(event); + * @method + */ + startTracking: function() { + if ( !this.tracking ) { + $.addEvent( this.element, "mouseover", this.delegates["mouseover"], false); + $.addEvent( this.element, "mouseout", this.delegates["mouseout"], false); + $.addEvent( this.element, "mousedown", this.delegates["mousedown"], false); + $.addEvent( this.element, "mouseup", this.delegates["mouseup"], false); + $.addEvent( this.element, "click", this.delegates["click"], false); + $.addEvent( this.element, "DOMMouseScroll", this.delegates["DOMMouseScroll"], false); + $.addEvent( this.element, "mousewheel", this.delegates["mousewheel"], false); // Firefox - if (event.button == 2) { + this.tracking = true; + ieTrackersActive[ this.hash ] = this; + } + }, + + /** + * @method + */ + stopTracking: function() { + if ( this.tracking ) { + $.removeEvent( this.element, "mouseover", this.delegates["mouseover"], false); + $.removeEvent( this.element, "mouseout", this.delegates["mouseout"], false); + $.removeEvent( this.element, "mousedown", this.delegates["mousedown"], false); + $.removeEvent( this.element, "mouseup", this.delegates["mouseup"], false); + $.removeEvent( this.element, "click", this.delegates["click"], false); + $.removeEvent( this.element, "DOMMouseScroll", this.delegates["DOMMouseScroll"], false); + $.removeEvent( this.element, "mousewheel", this.delegates["mousewheel"], false); + + this.releaseMouse(); + this.tracking = false; + delete ieTrackersActive[ this.hash ]; + } + }, + + /** + * @method + */ + captureMouse: function() { + if ( !this.capturing ) { + if ( $.Browser.vendor == $.BROWSERS.IE ) { + $.removeEvent( this.element, "mouseup", this.delegates["mouseup"], false ); + $.addEvent( this.element, "mouseup", this.delegates["mouseupie"], true ); + $.addEvent( this.element, "mousemove", this.delegates["mousemoveie"], true ); + } else { + $.addEvent( window, "mouseup", this.delegates["mouseupwindow"], true ); + $.addEvent( window, "mousemove", this.delegates["mousemove"], true ); + } + + this.capturing = true; + } + }, + + + /** + * @method + */ + releaseMouse: function() { + if ( this.capturing ) { + if ( $.Browser.vendor == $.BROWSERS.IE ) { + $.removeEvent( this.element, "mousemove", this.delegates["mousemoveie"], true ); + $.removeEvent( this.element, "mouseup", this.delegates["mouseupie"], true ); + $.addEvent( this.element, "mouseup", this.delegates["mouseup"], false ); + } else { + $.removeEvent( window, "mousemove", this.delegates["mousemove"], true ); + $.removeEvent( window, "mouseup", this.delegates["mouseupwindow"], true ); + } + + this.capturing = false; + } + }, + + + /** + * @method + */ + triggerOthers: function( eventName, event ) { + var trackers = ieTrackersActive, + otherHash; + for ( otherHash in trackers ) { + if ( trackers.hasOwnProperty( otherHash ) && this.hash != otherHash ) { + trackers[ otherHash ][ eventName ]( event ); + } + } + }, + + /** + * @method + */ + hasMouse: function() { + return this.insideElement; + }, + + + /** + * @method + */ + onMouseOver: function( event ) { + var event = $.getEvent( event ); + + if ( $.Browser.vendor == $.BROWSERS.IE && + this.capturing && + !isChild( event.srcElement, this.element ) ) { + this.triggerOthers( "onMouseOver", event ); + } + + var to = event.target ? + event.target : + event.srcElement, + from = event.relatedTarget ? + event.relatedTarget : + event.fromElement; + + if ( !isChild( this.element, to ) || isChild( this.element, from ) ) { return; } - for (var i = 0; i < ieTrackersCapturing.length; i++) { - var tracker = ieTrackersCapturing[i]; - if (!tracker.hasMouse()) { - tracker.onMouseUp(event); + this.insideElement = true; + + if ( typeof( this.enterHandler ) == "function") { + try { + this.enterHandler( + this, + getMouseRelative( event, this.element ), + this.buttonDownElement, + buttonDownAny + ); + } catch ( e ) { + $.console.error( + e.name + " while executing enter handler: " + e.message, + e + ); } } - - releaseMouse(); - ieCapturingAny = false; - event.srcElement.fireEvent("on" + event.type, - document.createEventObject(event)); - - $.stopEvent(event); - } + }, /** - * @private + * @method + */ + onMouseOut: function( event ) { + var event = $.getEvent( event ); + + if ( $.Browser.vendor == $.BROWSERS.IE && + this.capturing && + !isChild( event.srcElement, this.element ) ) { + this.triggerOthers( "onMouseOut", event ); + } + + var from = event.target ? + event.target : + event.srcElement, + to = event.relatedTarget ? + event.relatedTarget : + event.toElement; + + if ( !isChild( this.element, from ) || isChild( this.element, to ) ) { + return; + } + + this.insideElement = false; + + if ( typeof( this.exitHandler ) == "function" ) { + try { + this.exitHandler( + this, + getMouseRelative( event, this.element ), + this.buttonDownElement, + buttonDownAny + ); + } catch ( e ) { + $.console.error( + e.name + " while executing exit handler: " + e.message, + e + ); + } + } + }, + + /** + * @method * @inner + */ + onMouseDown: function( event ) { + var event = $.getEvent( event ); + + if ( event.button == 2 ) { + return; + } + + this.buttonDownElement = true; + + this.lastPoint = getMouseAbsolute( event ); + this.lastMouseDownPoint = this.lastPoint; + this.lastMouseDownTime = new Date().getTime(); + + if ( typeof( this.pressHandler ) == "function" ) { + try { + this.pressHandler( + this, + getMouseRelative( event, this.element ) + ); + } catch (e) { + $.console.error( + e.name + " while executing press handler: " + e.message, + e + ); + } + } + + if ( this.pressHandler || this.dragHandler ) { + $.cancelEvent( event ); + } + + if ( !( $.Browser.vendor == $.BROWSERS.IE ) || !ieCapturingAny ) { + this.captureMouse(); + ieCapturingAny = true; + ieTrackersCapturing = [ this ]; // reset to empty & add us + } else if ( $.Browser.vendor == $.BROWSERS.IE ) { + ieTrackersCapturing.push( this ); // add us to the list + } + }, + + /** + * @method + */ + onMouseUp: function( event ) { + var event = $.getEvent( event ), + insideElementPress = this.buttonDownElement, + insideElementRelease = this.insideElement; + + if ( event.button == 2 ) { + return; + } + + this.buttonDownElement = false; + + if ( typeof( this.releaseHandler ) == "function" ) { + try { + this.releaseHandler( + this, + getMouseRelative( event, this.element ), + insideElementPress, + insideElementRelease + ); + } catch (e) { + $.console.error( + e.name + " while executing release handler: " + e.message, + e + ); + } + } + + if ( insideElementPress && insideElementRelease ) { + this.handleMouseClick( event ); + } + }, + + /** + * @method + * Only triggered once by the deepest element that initially received + * the mouse down event. We want to make sure THIS event doesn't bubble. + * Instead, we want to trigger the elements that initially received the + * mouse down event (including this one) only if the mouse is no longer + * inside them. Then, we want to release capture, and emulate a regular + * mouseup on the event that this event was meant for. + */ + onMouseUpIE: function( event ) { + var event = $.getEvent( event ), + tracker, + i; + + if ( event.button == 2 ) { + return; + } + + for ( i = 0; i < ieTrackersCapturing.length; i++ ) { + tracker = ieTrackersCapturing[ i ]; + if ( !tracker.hasMouse() ) { + tracker.onMouseUp( event ); + } + } + + this.releaseMouse(); + ieCapturingAny = false; + event.srcElement.fireEvent( + "on" + event.type, + document.createEventObject( event ) + ); + + $.stopEvent( event ); + }, + + /** + * @method * Only triggered in W3C browsers by elements within which the mouse was * initially pressed, since they are now listening to the window for * mouseup during the capture phase. We shouldn't handle the mouseup * here if the mouse is still inside this element, since the regular * mouseup handler will still fire. */ - function onMouseUpWindow(event) { - if (!insideElmt) { - onMouseUp(event); + onMouseUpWindow: function( event ) { + if ( !this.insideElement ) { + this.onMouseUp( event ); } - releaseMouse(); - } + this.releaseMouse(); + }, /** - * @private - * @inner + * @method */ - function onMouseClick(event) { + onMouseClick: function( event ) { - if (self.clickHandler) { - $.cancelEvent(event); + if ( this.clickHandler ) { + $.cancelEvent( event ); } - } + }, /** - * @private - * @inner + * @method */ - function onMouseWheelSpin(event) { + onMouseWheelSpin: function( event ) { var nDelta = 0; - if (!event) { // For IE, access the global (window) event object + + if ( !event ) { // For IE, access the global (window) event object event = window.event; } - if (event.wheelDelta) { // IE and Opera + + if ( event.wheelDelta ) { // IE and Opera nDelta = event.wheelDelta; - if (window.opera) { // Opera has the values reversed + if ( window.opera ) { // Opera has the values reversed nDelta = -nDelta; } - } - else if (event.detail) { // Mozilla FireFox + } else if (event.detail) { // Mozilla FireFox nDelta = -event.detail; } nDelta = nDelta > 0 ? 1 : -1; - if (typeof (self.scrollHandler) == "function") { + if ( typeof( this.scrollHandler ) == "function" ) { try { - self.scrollHandler(self, getMouseRelative(event, elmt), nDelta, event.shiftKey); + this.scrollHandler( + this, + getMouseRelative( event, this.element ), + nDelta, + event.shiftKey + ); } catch (e) { - $.console.error(e.name + - " while executing scroll handler: " + e.message, e); + $.console.error( + e.name + " while executing scroll handler: " + e.message, + e + ); } - $.cancelEvent(event); + $.cancelEvent( event ); } - } + }, /** - * @private - * @inner + * @method */ - function handleMouseClick(event) { - var event = $.getEvent(event); + handleMouseClick: function( event ) { + var event = $.getEvent( event ); - if (event.button == 2) { + if ( event.button == 2 ) { return; } - var time = new Date().getTime() - lastMouseDownTime; - var point = getMouseAbsolute(event); - var distance = lastMouseDownPoint.distanceTo(point); - var quick = time <= clickTimeThreshold && - distance <= clickDistThreshold; + var time = new Date().getTime() - this.lastMouseDownTime; + var point = getMouseAbsolute( event ); + var distance = this.lastMouseDownPoint.distanceTo( point ); + var quick = ( + time <= this.clickTimeThreshold + ) && ( + distance <= this.clickDistThreshold + ); - if (typeof (self.clickHandler) == "function") { + if ( typeof( this.clickHandler ) == "function" ) { try { - self.clickHandler(self, getMouseRelative(event, elmt), - quick, event.shiftKey); - } catch (e) { - $.console.error(e.name + - " while executing click handler: " + e.message, e); + this.clickHandler( + this, + getMouseRelative( event, this.element ), + quick, + event.shiftKey + ); + } catch ( e ) { + $.console.error( + e.name + " while executing click handler: " + e.message, + e + ); } } - } + }, /** - * @private - * @inner + * @method */ - function onMouseMove(event) { - var event = $.getEvent(event); - var point = getMouseAbsolute(event); - var delta = point.minus(lastPoint); + onMouseMove: function( event ) { + var event = $.getEvent( event ); + var point = getMouseAbsolute( event ); + var delta = point.minus( this.lastPoint ); - lastPoint = point; + this.lastPoint = point; - if (typeof (self.dragHandler) == "function") { + if ( typeof( this.dragHandler ) == "function" ) { try { - self.dragHandler( - self, - getMouseRelative( event, elmt ), + this.dragHandler( + this, + getMouseRelative( event, this.element ), delta, event.shiftKey ); } catch (e) { $.console.error( - e.name + - " while executing drag handler: " - + e.message, + e.name + " while executing drag handler: " + e.message, e ); } - $.cancelEvent(event); + $.cancelEvent( event ); } - }; + }, /** - * @private - * @inner * Only triggered once by the deepest element that initially received * the mouse down event. Since no other element has captured the mouse, * we want to trigger the elements that initially received the mouse * down event (including this one). + * @method */ - function onMouseMoveIE(event) { - for (var i = 0; i < ieTrackersCapturing.length; i++) { - ieTrackersCapturing[i].onMouseMove(event); + onMouseMoveIE: function( event ) { + var i; + for ( i = 0; i < ieTrackersCapturing.length; i++ ) { + ieTrackersCapturing[ i ].onMouseMove( event ); } - $.stopEvent(event); - }; + $.stopEvent( event ); + } }; @@ -437,36 +533,36 @@ * @inner */ function getMouseAbsolute( event ) { - return $.getMousePosition(event); - } + return $.getMousePosition( event ); + }; /** * @private * @inner */ - function getMouseRelative( event, elmt ) { - var mouse = $.getMousePosition(event); - var offset = $.getElementPosition(elmt); + function getMouseRelative( event, element ) { + var mouse = $.getMousePosition( event ), + offset = $.getElementPosition( element ); - return mouse.minus(offset); - } + return mouse.minus( offset ); + }; /** * @private * @inner - * Returns true if elmtB is a child node of elmtA, or if they're equal. + * Returns true if elementB is a child node of elementA, or if they're equal. */ - function isChild( elmtA, elmtB ) { + function isChild( elementA, elementB ) { var body = document.body; - while (elmtB && elmtA != elmtB && body != elmtB) { + while ( elementB && elementA != elementB && body != elementB ) { try { - elmtB = elmtB.parentNode; + elementB = elementB.parentNode; } catch (e) { return false; } } - return elmtA == elmtB; - } + return elementA == elementB; + }; /** * @private @@ -474,7 +570,7 @@ */ function onGlobalMouseDown() { buttonDownAny = true; - } + }; /** * @private @@ -482,16 +578,16 @@ */ function onGlobalMouseUp() { buttonDownAny = false; - } + }; (function () { - if (isIE) { - $.addEvent(document, "mousedown", onGlobalMouseDown, false); - $.addEvent(document, "mouseup", onGlobalMouseUp, false); + if ( $.Browser.vendor == $.BROWSERS.IE ) { + $.addEvent( document, "mousedown", onGlobalMouseDown, false ); + $.addEvent( document, "mouseup", onGlobalMouseUp, false ); } else { - $.addEvent(window, "mousedown", onGlobalMouseDown, true); - $.addEvent(window, "mouseup", onGlobalMouseUp, true); + $.addEvent( window, "mousedown", onGlobalMouseDown, true ); + $.addEvent( window, "mouseup", onGlobalMouseUp, true ); } })(); diff --git a/src/openseadragon.js b/src/openseadragon.js index b24124e2..33faae46 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -512,7 +512,7 @@ OpenSeadragon = window.OpenSeadragon || (function(){ */ getPageScroll: function() { var result = new $.Point(), - docElmt = document.documentElement || {}, + docElement = document.documentElement || {}, body = document.body || {}; if ( typeof( window.pageXOffset ) == "number" ) { @@ -521,9 +521,9 @@ OpenSeadragon = window.OpenSeadragon || (function(){ } else if ( body.scrollLeft || body.scrollTop ) { result.x = body.scrollLeft; result.y = body.scrollTop; - } else if ( docElmt.scrollLeft || docElmt.scrollTop ) { - result.x = docElmt.scrollLeft; - result.y = docElmt.scrollTop; + } else if ( docElement.scrollLeft || docElement.scrollTop ) { + result.x = docElement.scrollLeft; + result.y = docElement.scrollTop; } return result; @@ -537,15 +537,15 @@ OpenSeadragon = window.OpenSeadragon || (function(){ */ getWindowSize: function() { var result = new $.Point(), - docElmt = document.documentElement || {}, + docElement = document.documentElement || {}, body = document.body || {}; if ( typeof( window.innerWidth ) == 'number' ) { result.x = window.innerWidth; result.y = window.innerHeight; - } else if ( docElmt.clientWidth || docElmt.clientHeight ) { - result.x = docElmt.clientWidth; - result.y = docElmt.clientHeight; + } else if ( docElement.clientWidth || docElement.clientHeight ) { + result.x = docElement.clientWidth; + result.y = docElement.clientHeight; } else if ( body.clientWidth || body.clientHeight ) { result.x = body.clientWidth; result.y = body.clientHeight; diff --git a/src/overlay.js b/src/overlay.js index c980975a..516b93dd 100644 --- a/src/overlay.js +++ b/src/overlay.js @@ -23,8 +23,8 @@ * An Overlay provides a * @class */ - $.Overlay = function( elmt, location, placement ) { - this.elmt = elmt; + $.Overlay = function( element, location, placement ) { + this.element = element; this.scales = location instanceof $.Rect; this.bounds = new $.Rect( location.x, @@ -40,7 +40,7 @@ location.width, location.height ); - this.style = elmt.style; + this.style = element.style; // rects are always top-left this.placement = location instanceof $.Point ? placement : @@ -86,7 +86,7 @@ }, destroy: function() { - var element = this.elmt, + var element = this.element, style = this.style; if ( element.parentNode ) { @@ -104,7 +104,7 @@ }, drawHTML: function( container ) { - var element = this.elmt, + var element = this.element, style = this.style, scales = this.scales, position, diff --git a/src/tile.js b/src/tile.js index c7a75442..c82d04ff 100644 --- a/src/tile.js +++ b/src/tile.js @@ -22,9 +22,9 @@ * @property {String} url The URL of this tile's image. * @property {Boolean} loaded Is this tile loaded? * @property {Boolean} loading Is this tile loading - * @property {Element} elmt The HTML element for this tile + * @property {Element} element The HTML element for this tile * @property {Image} image The Image object for this tile - * @property {String} style The alias of this.elmt.style. + * @property {String} style The alias of this.element.style. * @property {String} position This tile's position on screen, in pixels. * @property {String} size This tile's size on screen, in pixels * @property {String} blendStart The start time of this tile's blending @@ -44,7 +44,7 @@ $.Tile = function(level, x, y, bounds, exists, url) { this.loaded = false; this.loading = false; - this.elmt = null; + this.element = null; this.image = null; this.style = null; @@ -89,26 +89,26 @@ $.Tile.prototype = { return; } - if ( !this.elmt ) { - this.elmt = $.makeNeutralElement("img"); - this.elmt.src = this.url; - this.style = this.elmt.style; + if ( !this.element ) { + this.element = $.makeNeutralElement("img"); + this.element.src = this.url; + this.style = this.element.style; this.style.position = "absolute"; this.style.msInterpolationMode = "nearest-neighbor"; } - if ( this.elmt.parentNode != container ) { - container.appendChild( this.elmt ); + if ( this.element.parentNode != container ) { + container.appendChild( this.element ); } - this.elmt.style.left = position.x + "px"; - this.elmt.style.top = position.y + "px"; - this.elmt.style.width = size.x + "px"; - this.elmt.style.height = size.y + "px"; + this.element.style.left = position.x + "px"; + this.element.style.top = position.y + "px"; + this.element.style.width = size.x + "px"; + this.element.style.height = size.y + "px"; - $.setElementOpacity( this.elmt, this.opacity ); + $.setElementOpacity( this.element, this.opacity ); }, @@ -139,11 +139,11 @@ $.Tile.prototype = { * @function */ unload: function() { - if ( this.elmt && this.elmt.parentNode ) { - this.elmt.parentNode.removeChild( this.elmt ); + if ( this.element && this.element.parentNode ) { + this.element.parentNode.removeChild( this.element ); } - this.elmt = null; + this.element = null; this.image = null; this.loaded = false; this.loading = false;