mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-22 13:16:10 +03:00
Code Issues Projects Releases Wiki Activity

removed more psuedo-private methods and properties in favor of direct accessors or closure private methods. moved raiseEvent to EventHandler interface

Browse Source
This commit is contained in:
thatcher 2011-12-16 18:29:16 -05:00
parent 1395157adf
commit acfd3d0280
3 changed files with 343 additions and 389 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

373
openseadragon.js
View File

@ -226,7 +226,7 @@ OpenSeadragon = window.OpenSeadragon || (function(){
if (!evt) return; if (!evt) return;
//End Thatcher //End Thatcher
}, },
getHandler: function(id) { getHandler: function(id) {
var evt = this.events[ id ]; var evt = this.events[ id ];
if (!evt || !evt.length) return null; if (!evt || !evt.length) return null;
@ -238,6 +238,18 @@ OpenSeadragon = window.OpenSeadragon || (function(){
evt[i](source, args); evt[i](source, args);
} }
}; };
},
raiseEvent: function(eventName, eventArgs) {
var handler = this.getHandler( eventName );
if (handler) {
if (!eventArgs) {
eventArgs = new Object();
}
handler(this, eventArgs);
}
} }
}; };
@ -1653,33 +1665,33 @@ $.extend($.Viewer.prototype, $.EventHandler.prototype, {
var containerSize = $.Utils.getElementSize( this.container ); var containerSize = $.Utils.getElementSize( this.container );
if (!containerSize.equals(this._prevContainerSize)) { if ( !containerSize.equals( this._prevContainerSize ) ) {
this.viewport.resize(containerSize, true); // maintain image position this.viewport.resize( containerSize, true ); // maintain image position
this._prevContainerSize = containerSize; this._prevContainerSize = containerSize;
raiseEvent( this, "resize" ); this.raiseEvent( "resize" );
} }
var animated = this.viewport.update(); var animated = this.viewport.update();
if (!this._animating && animated) { if ( !this._animating && animated ) {
raiseEvent( this, "animationstart" ); this.raiseEvent( "animationstart" );
abortControlsAutoHide( this ); abortControlsAutoHide( this );
} }
if (animated) { if ( animated ) {
this.drawer.update(); this.drawer.update();
raiseEvent( this, "animation" ); this.raiseEvent( "animation" );
} else if (this._forceRedraw || this.drawer.needsUpdate()) { } else if ( this._forceRedraw || this.drawer.needsUpdate() ) {
this.drawer.update(); this.drawer.update();
this._forceRedraw = false; this._forceRedraw = false;
} else { } else {
this.drawer.idle(); this.drawer.idle();
} }
if (this._animating && !animated) { if ( this._animating && !animated ) {
raiseEvent( this, "animationfinish" ); this.raiseEvent( "animationfinish" );
if (!this._mouseInside) { if ( !this._mouseInside ) {
beginControlsAutoHide( this ); beginControlsAutoHide( this );
} }
} }
@ -1764,7 +1776,7 @@ $.extend($.Viewer.prototype, $.EventHandler.prototype, {
if ( this._lastOpenStartTime < viewer._lastOpenStartTime ) { if ( this._lastOpenStartTime < viewer._lastOpenStartTime ) {
$.Debug.log( "Ignoring out-of-date open." ); $.Debug.log( "Ignoring out-of-date open." );
raiseEvent( this, "ignore" ); this.raiseEvent( "ignore" );
return; return;
} }
@ -1814,7 +1826,7 @@ $.extend($.Viewer.prototype, $.EventHandler.prototype, {
); );
} }
} }
raiseEvent( this, "open" ); this.raiseEvent( "open" );
}, },
close: function () { close: function () {
@ -1950,7 +1962,7 @@ $.extend($.Viewer.prototype, $.EventHandler.prototype, {
} }
this._forceRedraw = true; this._forceRedraw = true;
raiseEvent( this, "resize", this ); this.raiseEvent( "resize", this );
this._updateOnce(); this._updateOnce();
} }
}, },
@ -2047,20 +2059,6 @@ function abortControlsAutoHide( viewer ) {
} }
}; };
///////////////////////////////////////////////////////////////////////////////
// Event engine is simple, look up event handler and call.
// TODO: add the to EventHandler and call it trigger to align with jQuery
///////////////////////////////////////////////////////////////////////////////
function raiseEvent( viewer, eventName, eventArgs) {
var handler = viewer.getHandler( eventName );
if ( handler ) {
if (!eventArgs) {
eventArgs = new Object();
}
handler( viewer, eventArgs );
}
};
/////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////
// Default view event handlers. // Default view event handlers.
@ -2771,11 +2769,11 @@ $.Button = function( options ) {
$.EventHandler.call( this ); $.EventHandler.call( this );
this._tooltip = options.tooltip; this.tooltip = options.tooltip;
this._srcRest = options.srcRest; this.srcRest = options.srcRest;
this._srcGroup = options.srcGroup; this.srcGroup = options.srcGroup;
this._srcHover = options.srcHover; this.srcHover = options.srcHover;
this._srcDown = options.srcDown; this.srcDown = options.srcDown;
//TODO: make button elements accessible by making them a-tags //TODO: make button elements accessible by making them a-tags
// maybe even consider basing them on the element and adding // maybe even consider basing them on the element and adding
// methods jquery-style. // methods jquery-style.
@ -2798,207 +2796,192 @@ $.Button = function( options ) {
this.addHandler("onExit", options.onExit ); this.addHandler("onExit", options.onExit );
} }
this._currentState = $.ButtonState.GROUP; this.currentState = $.ButtonState.GROUP;
this._tracker = new $.MouseTracker( this.tracker = new $.MouseTracker(
this.element, this.element,
this.config.clickTimeThreshold, this.config.clickTimeThreshold,
this.config.clickDistThreshold this.config.clickDistThreshold
); );
this._imgRest = $.Utils.makeTransparentImage(this._srcRest); this.imgRest = $.Utils.makeTransparentImage( this.srcRest );
this._imgGroup = $.Utils.makeTransparentImage(this._srcGroup); this.imgGroup = $.Utils.makeTransparentImage( this.srcGroup );
this._imgHover = $.Utils.makeTransparentImage(this._srcHover); this.imgHover = $.Utils.makeTransparentImage( this.srcHover );
this._imgDown = $.Utils.makeTransparentImage(this._srcDown); this.imgDown = $.Utils.makeTransparentImage( this.srcDown );
this._fadeDelay = 0; // begin fading immediately this.fadeDelay = 0; // begin fading immediately
this._fadeLength = 2000; // fade over a period of 2 seconds this.fadeLength = 2000; // fade over a period of 2 seconds
this._fadeBeginTime = null; this.fadeBeginTime = null;
this._shouldFade = false; this.shouldFade = false;
this.element.style.display = "inline-block"; this.element.style.display = "inline-block";
this.element.style.position = "relative"; this.element.style.position = "relative";
this.element.title = this._tooltip; this.element.title = this.tooltip;
this.element.appendChild(this._imgRest); this.element.appendChild( this.imgRest );
this.element.appendChild(this._imgGroup); this.element.appendChild( this.imgGroup );
this.element.appendChild(this._imgHover); this.element.appendChild( this.imgHover );
this.element.appendChild(this._imgDown); this.element.appendChild( this.imgDown );
var styleRest = this._imgRest.style; var styleRest = this.imgRest.style;
var styleGroup = this._imgGroup.style; var styleGroup = this.imgGroup.style;
var styleHover = this._imgHover.style; var styleHover = this.imgHover.style;
var styleDown = this._imgDown.style; var styleDown = this.imgDown.style;
styleGroup.position = styleHover.position = styleDown.position = "absolute"; styleGroup.position =
styleGroup.top = styleHover.top = styleDown.top = "0px"; styleHover.position =
styleGroup.left = styleHover.left = styleDown.left = "0px"; styleDown.position =
styleHover.visibility = styleDown.visibility = "hidden"; "absolute";
styleGroup.top =
styleHover.top =
styleDown.top =
"0px";
styleGroup.left =
styleHover.left =
styleDown.left =
"0px";
styleHover.visibility =
styleDown.visibility =
"hidden";
if ( $.Utils.getBrowser() == $.Browser.FIREFOX if ( $.Utils.getBrowser() == $.Browser.FIREFOX
&& $.Utils.getBrowserVersion() < 3 ){ && $.Utils.getBrowserVersion() < 3 ){
styleGroup.top = styleHover.top = styleDown.top = "";
styleGroup.top =
styleHover.top =
styleDown.top = "";
} }
this._tracker.enterHandler = $.delegate(this, this._enterHandler); this.tracker.enterHandler = $.delegate( this, this._enterHandler );
this._tracker.exitHandler = $.delegate(this, this._exitHandler); this.tracker.exitHandler = $.delegate( this, this._exitHandler );
this._tracker.pressHandler = $.delegate(this, this._pressHandler); this.tracker.pressHandler = $.delegate( this, this._pressHandler );
this._tracker.releaseHandler = $.delegate(this, this._releaseHandler); this.tracker.releaseHandler = $.delegate( this, this._releaseHandler );
this._tracker.clickHandler = $.delegate(this, this._clickHandler); this.tracker.clickHandler = $.delegate( this, this._clickHandler );
this._tracker.setTracking( true ); this.tracker.setTracking( true );
this._outTo( $.ButtonState.REST ); outTo( this, $.ButtonState.REST );
}; };
$.extend( $.Button.prototype, $.EventHandler.prototype, { $.extend( $.Button.prototype, $.EventHandler.prototype, {
_scheduleFade: function() {
window.setTimeout($.delegate(this, this._updateFade), 20);
},
_updateFade: function() {
if (this._shouldFade) {
var currentTime = new Date().getTime();
var deltaTime = currentTime - this._fadeBeginTime;
var opacity = 1.0 - deltaTime / this._fadeLength;
opacity = Math.min(1.0, opacity);
opacity = Math.max(0.0, opacity);
$.Utils.setElementOpacity(this._imgGroup, opacity, true);
if (opacity > 0) {
this._scheduleFade(); // fade again
}
}
},
_beginFading: function() {
this._shouldFade = true;
this._fadeBeginTime = new Date().getTime() + this._fadeDelay;
window.setTimeout($.delegate(this, this._scheduleFade), this._fadeDelay);
},
_stopFading: function() {
this._shouldFade = false;
$.Utils.setElementOpacity(this._imgGroup, 1.0, true);
},
_inTo: function(newState) {
if (newState >= $.ButtonState.GROUP && this._currentState == $.ButtonState.REST) {
this._stopFading();
this._currentState = $.ButtonState.GROUP;
}
if (newState >= $.ButtonState.HOVER && this._currentState == $.ButtonState.GROUP) {
this._imgHover.style.visibility = "";
this._currentState = $.ButtonState.HOVER;
}
if (newState >= $.ButtonState.DOWN && this._currentState == $.ButtonState.HOVER) {
this._imgDown.style.visibility = "";
this._currentState = $.ButtonState.DOWN;
}
},
_outTo: function(newState) {
if (newState <= $.ButtonState.HOVER && this._currentState == $.ButtonState.DOWN) {
this._imgDown.style.visibility = "hidden";
this._currentState = $.ButtonState.HOVER;
}
if (newState <= $.ButtonState.GROUP && this._currentState == $.ButtonState.HOVER) {
this._imgHover.style.visibility = "hidden";
this._currentState = $.ButtonState.GROUP;
}
if (this._newState <= $.ButtonState.REST && this._currentState == $.ButtonState.GROUP) {
this._beginFading();
this._currentState = $.ButtonState.REST;
}
},
_enterHandler: function(tracker, position, buttonDownElmt, buttonDownAny) { _enterHandler: function(tracker, position, buttonDownElmt, buttonDownAny) {
if (buttonDownElmt) { if ( buttonDownElmt ) {
this._inTo($.ButtonState.DOWN); inTo( this, $.ButtonState.DOWN );
this._raiseEvent("onEnter", this); this.raiseEvent( "onEnter", this );
} else if (!buttonDownAny) { } else if ( !buttonDownAny ) {
this._inTo($.ButtonState.HOVER); inTo( this, $.ButtonState.HOVER );
} }
}, },
_exitHandler: function(tracker, position, buttonDownElmt, buttonDownAny) { _exitHandler: function(tracker, position, buttonDownElmt, buttonDownAny) {
this._outTo($.ButtonState.GROUP); outTo( this, $.ButtonState.GROUP );
if (buttonDownElmt) { if ( buttonDownElmt ) {
this._raiseEvent("onExit", this); this.raiseEvent( "onExit", this );
} }
}, },
_pressHandler: function(tracker, position) { _pressHandler: function(tracker, position) {
this._inTo($.ButtonState.DOWN); inTo( this, $.ButtonState.DOWN );
this._raiseEvent("onPress", this); this.raiseEvent( "onPress", this );
}, },
_releaseHandler: function(tracker, position, insideElmtPress, insideElmtRelease) { _releaseHandler: function(tracker, position, insideElmtPress, insideElmtRelease) {
if (insideElmtPress && insideElmtRelease) { if ( insideElmtPress && insideElmtRelease ) {
this._outTo($.ButtonState.HOVER); outTo( this, $.ButtonState.HOVER );
this._raiseEvent("onRelease", this); this.raiseEvent( "onRelease", this );
} else if (insideElmtPress) { } else if ( insideElmtPress ) {
this._outTo($.ButtonState.GROUP); outTo( this, $.ButtonState.GROUP );
} else { } else {
this._inTo($.ButtonState.HOVER); inTo( this, $.ButtonState.HOVER );
} }
}, },
_clickHandler: function(tracker, position, quick, shift) { _clickHandler: function(tracker, position, quick, shift) {
if (quick) { if ( quick ) {
this._raiseEvent("onClick", this); this.raiseEvent("onClick", this);
} }
}, },
_raiseEvent: function(eventName, eventArgs) {
var handler = this.getHandler(eventName);
if (handler) {
if (!eventArgs) {
eventArgs = new Object(); // Sys.EventArgs.Empty;
}
handler(this, eventArgs);
}
},
get_element: function() {
return this.element;
},
get_tooltip: function() {
return this._tooltip;
},
set_tooltip: function(value) {
this._tooltip = value;
},
get_config: function() {
return this.config;
},
set_config: function(value) {
this.config = value;
},
get_srcRest: function() {
return this._srcRest;
},
set_srcRest: function(value) {
this._srcRest = value;
},
get_srcGroup: function() {
return this._srcGroup;
},
set_srcGroup: function(value) {
this._srcGroup = value;
},
get_srcHover: function() {
return this._srcHover;
},
set_srcHover: function(value) {
this._srcHover = value;
},
get_srcDown: function() {
return this._srcDown;
},
set_srcDown: function(value) {
this._srcDown = value;
},
notifyGroupEnter: function() { notifyGroupEnter: function() {
this._inTo($.ButtonState.GROUP); inTo( this, $.ButtonState.GROUP );
}, },
notifyGroupExit: function() { notifyGroupExit: function() {
this._outTo($.ButtonState.REST); outTo( this, $.ButtonState.REST );
} }
}); });
function scheduleFade( button ) {
window.setTimeout(function(){
updateFade( button );
}, 20 );
};
function updateFade( button ) {
var currentTime,
deltaTime,
opacity;
if ( button.shouldFade ) {
currentTime = +new Date();
deltaTime = currentTime - this.fadeBeginTime;
opacity = 1.0 - deltaTime / this.fadeLength;
opacity = Math.min( 1.0, opacity );
opacity = Math.max( 0.0, opacity );
$.Utils.setElementOpacity( button.imgGroup, opacity, true );
if ( opacity > 0 ) {
// fade again
scheduleFade( button );
}
}
};
function beginFading( button ) {
button.shouldFade = true;
button.fadeBeginTime = new Date().getTime() + button.fadeDelay;
window.setTimeout(function(){
scheduleFade( button );
}, button.fadeDelay );
};
function stopFading( button ) {
button.shouldFade = false;
$.Utils.setElementOpacity( button.imgGroup, 1.0, true );
};
function inTo( button, newState ) {
if ( newState >= $.ButtonState.GROUP && button.currentState == $.ButtonState.REST ) {
stopFading( button );
button.currentState = $.ButtonState.GROUP;
}
if ( newState >= $.ButtonState.HOVER && button.currentState == $.ButtonState.GROUP ) {
button.imgHover.style.visibility = "";
button.currentState = $.ButtonState.HOVER;
}
if ( newState >= $.ButtonState.DOWN && button.currentState == $.ButtonState.HOVER ) {
button.imgDown.style.visibility = "";
button.currentState = $.ButtonState.DOWN;
}
};
function outTo( button, newState ) {
if ( newState <= $.ButtonState.HOVER && button.currentState == $.ButtonState.DOWN ) {
button.imgDown.style.visibility = "hidden";
button.currentState = $.ButtonState.HOVER;
}
if ( newState <= $.ButtonState.GROUP && button.currentState == $.ButtonState.HOVER ) {
this.imgHover.style.visibility = "hidden";
this.currentState = $.ButtonState.GROUP;
}
if ( button.newState <= $.ButtonState.REST && button.currentState == $.ButtonState.GROUP ) {
button.beginFading();
button.currentState = $.ButtonState.REST;
}
};
}( OpenSeadragon )); }( OpenSeadragon ));
(function( $ ){ (function( $ ){

317
src/button.js
View File

@ -12,11 +12,11 @@ $.Button = function( options ) {
$.EventHandler.call( this ); $.EventHandler.call( this );
this._tooltip = options.tooltip; this.tooltip = options.tooltip;
this._srcRest = options.srcRest; this.srcRest = options.srcRest;
this._srcGroup = options.srcGroup; this.srcGroup = options.srcGroup;
this._srcHover = options.srcHover; this.srcHover = options.srcHover;
this._srcDown = options.srcDown; this.srcDown = options.srcDown;
//TODO: make button elements accessible by making them a-tags //TODO: make button elements accessible by making them a-tags
// maybe even consider basing them on the element and adding // maybe even consider basing them on the element and adding
// methods jquery-style. // methods jquery-style.
@ -39,205 +39,190 @@ $.Button = function( options ) {
this.addHandler("onExit", options.onExit ); this.addHandler("onExit", options.onExit );
} }
this._currentState = $.ButtonState.GROUP; this.currentState = $.ButtonState.GROUP;
this._tracker = new $.MouseTracker( this.tracker = new $.MouseTracker(
this.element, this.element,
this.config.clickTimeThreshold, this.config.clickTimeThreshold,
this.config.clickDistThreshold this.config.clickDistThreshold
); );
this._imgRest = $.Utils.makeTransparentImage(this._srcRest); this.imgRest = $.Utils.makeTransparentImage( this.srcRest );
this._imgGroup = $.Utils.makeTransparentImage(this._srcGroup); this.imgGroup = $.Utils.makeTransparentImage( this.srcGroup );
this._imgHover = $.Utils.makeTransparentImage(this._srcHover); this.imgHover = $.Utils.makeTransparentImage( this.srcHover );
this._imgDown = $.Utils.makeTransparentImage(this._srcDown); this.imgDown = $.Utils.makeTransparentImage( this.srcDown );
this._fadeDelay = 0; // begin fading immediately this.fadeDelay = 0; // begin fading immediately
this._fadeLength = 2000; // fade over a period of 2 seconds this.fadeLength = 2000; // fade over a period of 2 seconds
this._fadeBeginTime = null; this.fadeBeginTime = null;
this._shouldFade = false; this.shouldFade = false;
this.element.style.display = "inline-block"; this.element.style.display = "inline-block";
this.element.style.position = "relative"; this.element.style.position = "relative";
this.element.title = this._tooltip; this.element.title = this.tooltip;
this.element.appendChild(this._imgRest); this.element.appendChild( this.imgRest );
this.element.appendChild(this._imgGroup); this.element.appendChild( this.imgGroup );
this.element.appendChild(this._imgHover); this.element.appendChild( this.imgHover );
this.element.appendChild(this._imgDown); this.element.appendChild( this.imgDown );
var styleRest = this._imgRest.style; var styleRest = this.imgRest.style;
var styleGroup = this._imgGroup.style; var styleGroup = this.imgGroup.style;
var styleHover = this._imgHover.style; var styleHover = this.imgHover.style;
var styleDown = this._imgDown.style; var styleDown = this.imgDown.style;
styleGroup.position = styleHover.position = styleDown.position = "absolute"; styleGroup.position =
styleGroup.top = styleHover.top = styleDown.top = "0px"; styleHover.position =
styleGroup.left = styleHover.left = styleDown.left = "0px"; styleDown.position =
styleHover.visibility = styleDown.visibility = "hidden"; "absolute";
styleGroup.top =
styleHover.top =
styleDown.top =
"0px";
styleGroup.left =
styleHover.left =
styleDown.left =
"0px";
styleHover.visibility =
styleDown.visibility =
"hidden";
if ( $.Utils.getBrowser() == $.Browser.FIREFOX if ( $.Utils.getBrowser() == $.Browser.FIREFOX
&& $.Utils.getBrowserVersion() < 3 ){ && $.Utils.getBrowserVersion() < 3 ){
styleGroup.top = styleHover.top = styleDown.top = "";
styleGroup.top =
styleHover.top =
styleDown.top = "";
} }
this._tracker.enterHandler = $.delegate(this, this._enterHandler); this.tracker.enterHandler = $.delegate( this, this._enterHandler );
this._tracker.exitHandler = $.delegate(this, this._exitHandler); this.tracker.exitHandler = $.delegate( this, this._exitHandler );
this._tracker.pressHandler = $.delegate(this, this._pressHandler); this.tracker.pressHandler = $.delegate( this, this._pressHandler );
this._tracker.releaseHandler = $.delegate(this, this._releaseHandler); this.tracker.releaseHandler = $.delegate( this, this._releaseHandler );
this._tracker.clickHandler = $.delegate(this, this._clickHandler); this.tracker.clickHandler = $.delegate( this, this._clickHandler );
this._tracker.setTracking( true ); this.tracker.setTracking( true );
this._outTo( $.ButtonState.REST ); outTo( this, $.ButtonState.REST );
}; };
$.extend( $.Button.prototype, $.EventHandler.prototype, { $.extend( $.Button.prototype, $.EventHandler.prototype, {
_scheduleFade: function() {
window.setTimeout($.delegate(this, this._updateFade), 20);
},
_updateFade: function() {
if (this._shouldFade) {
var currentTime = new Date().getTime();
var deltaTime = currentTime - this._fadeBeginTime;
var opacity = 1.0 - deltaTime / this._fadeLength;
opacity = Math.min(1.0, opacity);
opacity = Math.max(0.0, opacity);
$.Utils.setElementOpacity(this._imgGroup, opacity, true);
if (opacity > 0) {
this._scheduleFade(); // fade again
}
}
},
_beginFading: function() {
this._shouldFade = true;
this._fadeBeginTime = new Date().getTime() + this._fadeDelay;
window.setTimeout($.delegate(this, this._scheduleFade), this._fadeDelay);
},
_stopFading: function() {
this._shouldFade = false;
$.Utils.setElementOpacity(this._imgGroup, 1.0, true);
},
_inTo: function(newState) {
if (newState >= $.ButtonState.GROUP && this._currentState == $.ButtonState.REST) {
this._stopFading();
this._currentState = $.ButtonState.GROUP;
}
if (newState >= $.ButtonState.HOVER && this._currentState == $.ButtonState.GROUP) {
this._imgHover.style.visibility = "";
this._currentState = $.ButtonState.HOVER;
}
if (newState >= $.ButtonState.DOWN && this._currentState == $.ButtonState.HOVER) {
this._imgDown.style.visibility = "";
this._currentState = $.ButtonState.DOWN;
}
},
_outTo: function(newState) {
if (newState <= $.ButtonState.HOVER && this._currentState == $.ButtonState.DOWN) {
this._imgDown.style.visibility = "hidden";
this._currentState = $.ButtonState.HOVER;
}
if (newState <= $.ButtonState.GROUP && this._currentState == $.ButtonState.HOVER) {
this._imgHover.style.visibility = "hidden";
this._currentState = $.ButtonState.GROUP;
}
if (this._newState <= $.ButtonState.REST && this._currentState == $.ButtonState.GROUP) {
this._beginFading();
this._currentState = $.ButtonState.REST;
}
},
_enterHandler: function(tracker, position, buttonDownElmt, buttonDownAny) { _enterHandler: function(tracker, position, buttonDownElmt, buttonDownAny) {
if (buttonDownElmt) { if ( buttonDownElmt ) {
this._inTo($.ButtonState.DOWN); inTo( this, $.ButtonState.DOWN );
this._raiseEvent("onEnter", this); this.raiseEvent( "onEnter", this );
} else if (!buttonDownAny) { } else if ( !buttonDownAny ) {
this._inTo($.ButtonState.HOVER); inTo( this, $.ButtonState.HOVER );
} }
}, },
_exitHandler: function(tracker, position, buttonDownElmt, buttonDownAny) { _exitHandler: function(tracker, position, buttonDownElmt, buttonDownAny) {
this._outTo($.ButtonState.GROUP); outTo( this, $.ButtonState.GROUP );
if (buttonDownElmt) { if ( buttonDownElmt ) {
this._raiseEvent("onExit", this); this.raiseEvent( "onExit", this );
} }
}, },
_pressHandler: function(tracker, position) { _pressHandler: function(tracker, position) {
this._inTo($.ButtonState.DOWN); inTo( this, $.ButtonState.DOWN );
this._raiseEvent("onPress", this); this.raiseEvent( "onPress", this );
}, },
_releaseHandler: function(tracker, position, insideElmtPress, insideElmtRelease) { _releaseHandler: function(tracker, position, insideElmtPress, insideElmtRelease) {
if (insideElmtPress && insideElmtRelease) { if ( insideElmtPress && insideElmtRelease ) {
this._outTo($.ButtonState.HOVER); outTo( this, $.ButtonState.HOVER );
this._raiseEvent("onRelease", this); this.raiseEvent( "onRelease", this );
} else if (insideElmtPress) { } else if ( insideElmtPress ) {
this._outTo($.ButtonState.GROUP); outTo( this, $.ButtonState.GROUP );
} else { } else {
this._inTo($.ButtonState.HOVER); inTo( this, $.ButtonState.HOVER );
} }
}, },
_clickHandler: function(tracker, position, quick, shift) { _clickHandler: function(tracker, position, quick, shift) {
if (quick) { if ( quick ) {
this._raiseEvent("onClick", this); this.raiseEvent("onClick", this);
} }
}, },
_raiseEvent: function(eventName, eventArgs) {
var handler = this.getHandler(eventName);
if (handler) {
if (!eventArgs) {
eventArgs = new Object(); // Sys.EventArgs.Empty;
}
handler(this, eventArgs);
}
},
get_element: function() {
return this.element;
},
get_tooltip: function() {
return this._tooltip;
},
set_tooltip: function(value) {
this._tooltip = value;
},
get_config: function() {
return this.config;
},
set_config: function(value) {
this.config = value;
},
get_srcRest: function() {
return this._srcRest;
},
set_srcRest: function(value) {
this._srcRest = value;
},
get_srcGroup: function() {
return this._srcGroup;
},
set_srcGroup: function(value) {
this._srcGroup = value;
},
get_srcHover: function() {
return this._srcHover;
},
set_srcHover: function(value) {
this._srcHover = value;
},
get_srcDown: function() {
return this._srcDown;
},
set_srcDown: function(value) {
this._srcDown = value;
},
notifyGroupEnter: function() { notifyGroupEnter: function() {
this._inTo($.ButtonState.GROUP); inTo( this, $.ButtonState.GROUP );
}, },
notifyGroupExit: function() { notifyGroupExit: function() {
this._outTo($.ButtonState.REST); outTo( this, $.ButtonState.REST );
} }
}); });
function scheduleFade( button ) {
window.setTimeout(function(){
updateFade( button );
}, 20 );
};
function updateFade( button ) {
var currentTime,
deltaTime,
opacity;
if ( button.shouldFade ) {
currentTime = +new Date();
deltaTime = currentTime - this.fadeBeginTime;
opacity = 1.0 - deltaTime / this.fadeLength;
opacity = Math.min( 1.0, opacity );
opacity = Math.max( 0.0, opacity );
$.Utils.setElementOpacity( button.imgGroup, opacity, true );
if ( opacity > 0 ) {
// fade again
scheduleFade( button );
}
}
};
function beginFading( button ) {
button.shouldFade = true;
button.fadeBeginTime = new Date().getTime() + button.fadeDelay;
window.setTimeout(function(){
scheduleFade( button );
}, button.fadeDelay );
};
function stopFading( button ) {
button.shouldFade = false;
$.Utils.setElementOpacity( button.imgGroup, 1.0, true );
};
function inTo( button, newState ) {
if ( newState >= $.ButtonState.GROUP && button.currentState == $.ButtonState.REST ) {
stopFading( button );
button.currentState = $.ButtonState.GROUP;
}
if ( newState >= $.ButtonState.HOVER && button.currentState == $.ButtonState.GROUP ) {
button.imgHover.style.visibility = "";
button.currentState = $.ButtonState.HOVER;
}
if ( newState >= $.ButtonState.DOWN && button.currentState == $.ButtonState.HOVER ) {
button.imgDown.style.visibility = "";
button.currentState = $.ButtonState.DOWN;
}
};
function outTo( button, newState ) {
if ( newState <= $.ButtonState.HOVER && button.currentState == $.ButtonState.DOWN ) {
button.imgDown.style.visibility = "hidden";
button.currentState = $.ButtonState.HOVER;
}
if ( newState <= $.ButtonState.GROUP && button.currentState == $.ButtonState.HOVER ) {
this.imgHover.style.visibility = "hidden";
this.currentState = $.ButtonState.GROUP;
}
if ( button.newState <= $.ButtonState.REST && button.currentState == $.ButtonState.GROUP ) {
button.beginFading();
button.currentState = $.ButtonState.REST;
}
};
}( OpenSeadragon )); }( OpenSeadragon ));

42
src/viewer.js
View File

@ -248,33 +248,33 @@ $.extend($.Viewer.prototype, $.EventHandler.prototype, {
var containerSize = $.Utils.getElementSize( this.container ); var containerSize = $.Utils.getElementSize( this.container );
if (!containerSize.equals(this._prevContainerSize)) { if ( !containerSize.equals( this._prevContainerSize ) ) {
this.viewport.resize(containerSize, true); // maintain image position this.viewport.resize( containerSize, true ); // maintain image position
this._prevContainerSize = containerSize; this._prevContainerSize = containerSize;
raiseEvent( this, "resize" ); this.raiseEvent( "resize" );
} }
var animated = this.viewport.update(); var animated = this.viewport.update();
if (!this._animating && animated) { if ( !this._animating && animated ) {
raiseEvent( this, "animationstart" ); this.raiseEvent( "animationstart" );
abortControlsAutoHide( this ); abortControlsAutoHide( this );
} }
if (animated) { if ( animated ) {
this.drawer.update(); this.drawer.update();
raiseEvent( this, "animation" ); this.raiseEvent( "animation" );
} else if (this._forceRedraw || this.drawer.needsUpdate()) { } else if ( this._forceRedraw || this.drawer.needsUpdate() ) {
this.drawer.update(); this.drawer.update();
this._forceRedraw = false; this._forceRedraw = false;
} else { } else {
this.drawer.idle(); this.drawer.idle();
} }
if (this._animating && !animated) { if ( this._animating && !animated ) {
raiseEvent( this, "animationfinish" ); this.raiseEvent( "animationfinish" );
if (!this._mouseInside) { if ( !this._mouseInside ) {
beginControlsAutoHide( this ); beginControlsAutoHide( this );
} }
} }
@ -359,7 +359,7 @@ $.extend($.Viewer.prototype, $.EventHandler.prototype, {
if ( this._lastOpenStartTime < viewer._lastOpenStartTime ) { if ( this._lastOpenStartTime < viewer._lastOpenStartTime ) {
$.Debug.log( "Ignoring out-of-date open." ); $.Debug.log( "Ignoring out-of-date open." );
raiseEvent( this, "ignore" ); this.raiseEvent( "ignore" );
return; return;
} }
@ -409,7 +409,7 @@ $.extend($.Viewer.prototype, $.EventHandler.prototype, {
); );
} }
} }
raiseEvent( this, "open" ); this.raiseEvent( "open" );
}, },
close: function () { close: function () {
@ -545,7 +545,7 @@ $.extend($.Viewer.prototype, $.EventHandler.prototype, {
} }
this._forceRedraw = true; this._forceRedraw = true;
raiseEvent( this, "resize", this ); this.raiseEvent( "resize", this );
this._updateOnce(); this._updateOnce();
} }
}, },
@ -642,20 +642,6 @@ function abortControlsAutoHide( viewer ) {
} }
}; };
///////////////////////////////////////////////////////////////////////////////
// Event engine is simple, look up event handler and call.
// TODO: add the to EventHandler and call it trigger to align with jQuery
///////////////////////////////////////////////////////////////////////////////
function raiseEvent( viewer, eventName, eventArgs) {
var handler = viewer.getHandler( eventName );
if ( handler ) {
if (!eventArgs) {
eventArgs = new Object();
}
handler( viewer, eventArgs );
}
};
/////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////
// Default view event handlers. // Default view event handlers.