mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 05:06:09 +03:00
removed more psuedo-private methods and properties in favor of direct accessors or closure private methods. moved raiseEvent to EventHandler interface
This commit is contained in:
thatcher
parent
1395157adf
commit
acfd3d0280
373
openseadragon.js
373
openseadragon.js
@ -226,7 +226,7 @@ OpenSeadragon = window.OpenSeadragon || (function(){
|
||||
if (!evt) return;
|
||||
//End Thatcher
|
||||
},
|
||||
|
||||
|
||||
getHandler: function(id) {
|
||||
var evt = this.events[ id ];
|
||||
if (!evt || !evt.length) return null;
|
||||
@ -238,6 +238,18 @@ OpenSeadragon = window.OpenSeadragon || (function(){
|
||||
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 );
|
||||
|
||||
if (!containerSize.equals(this._prevContainerSize)) {
|
||||
this.viewport.resize(containerSize, true); // maintain image position
|
||||
if ( !containerSize.equals( this._prevContainerSize ) ) {
|
||||
this.viewport.resize( containerSize, true ); // maintain image position
|
||||
this._prevContainerSize = containerSize;
|
||||
raiseEvent( this, "resize" );
|
||||
this.raiseEvent( "resize" );
|
||||
}
|
||||
|
||||
var animated = this.viewport.update();
|
||||
|
||||
if (!this._animating && animated) {
|
||||
raiseEvent( this, "animationstart" );
|
||||
if ( !this._animating && animated ) {
|
||||
this.raiseEvent( "animationstart" );
|
||||
abortControlsAutoHide( this );
|
||||
}
|
||||
|
||||
if (animated) {
|
||||
if ( animated ) {
|
||||
this.drawer.update();
|
||||
raiseEvent( this, "animation" );
|
||||
} else if (this._forceRedraw || this.drawer.needsUpdate()) {
|
||||
this.raiseEvent( "animation" );
|
||||
} else if ( this._forceRedraw || this.drawer.needsUpdate() ) {
|
||||
this.drawer.update();
|
||||
this._forceRedraw = false;
|
||||
} else {
|
||||
this.drawer.idle();
|
||||
}
|
||||
|
||||
if (this._animating && !animated) {
|
||||
raiseEvent( this, "animationfinish" );
|
||||
if ( this._animating && !animated ) {
|
||||
this.raiseEvent( "animationfinish" );
|
||||
|
||||
if (!this._mouseInside) {
|
||||
if ( !this._mouseInside ) {
|
||||
beginControlsAutoHide( this );
|
||||
}
|
||||
}
|
||||
@ -1764,7 +1776,7 @@ $.extend($.Viewer.prototype, $.EventHandler.prototype, {
|
||||
|
||||
if ( this._lastOpenStartTime < viewer._lastOpenStartTime ) {
|
||||
$.Debug.log( "Ignoring out-of-date open." );
|
||||
raiseEvent( this, "ignore" );
|
||||
this.raiseEvent( "ignore" );
|
||||
return;
|
||||
}
|
||||
|
||||
@ -1814,7 +1826,7 @@ $.extend($.Viewer.prototype, $.EventHandler.prototype, {
|
||||
);
|
||||
}
|
||||
}
|
||||
raiseEvent( this, "open" );
|
||||
this.raiseEvent( "open" );
|
||||
},
|
||||
close: function () {
|
||||
|
||||
@ -1950,7 +1962,7 @@ $.extend($.Viewer.prototype, $.EventHandler.prototype, {
|
||||
}
|
||||
|
||||
this._forceRedraw = true;
|
||||
raiseEvent( this, "resize", this );
|
||||
this.raiseEvent( "resize", this );
|
||||
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.
|
||||
@ -2771,11 +2769,11 @@ $.Button = function( options ) {
|
||||
|
||||
$.EventHandler.call( this );
|
||||
|
||||
this._tooltip = options.tooltip;
|
||||
this._srcRest = options.srcRest;
|
||||
this._srcGroup = options.srcGroup;
|
||||
this._srcHover = options.srcHover;
|
||||
this._srcDown = options.srcDown;
|
||||
this.tooltip = options.tooltip;
|
||||
this.srcRest = options.srcRest;
|
||||
this.srcGroup = options.srcGroup;
|
||||
this.srcHover = options.srcHover;
|
||||
this.srcDown = options.srcDown;
|
||||
//TODO: make button elements accessible by making them a-tags
|
||||
// maybe even consider basing them on the element and adding
|
||||
// methods jquery-style.
|
||||
@ -2798,207 +2796,192 @@ $.Button = function( options ) {
|
||||
this.addHandler("onExit", options.onExit );
|
||||
}
|
||||
|
||||
this._currentState = $.ButtonState.GROUP;
|
||||
this._tracker = new $.MouseTracker(
|
||||
this.currentState = $.ButtonState.GROUP;
|
||||
this.tracker = new $.MouseTracker(
|
||||
this.element,
|
||||
this.config.clickTimeThreshold,
|
||||
this.config.clickDistThreshold
|
||||
);
|
||||
this._imgRest = $.Utils.makeTransparentImage(this._srcRest);
|
||||
this._imgGroup = $.Utils.makeTransparentImage(this._srcGroup);
|
||||
this._imgHover = $.Utils.makeTransparentImage(this._srcHover);
|
||||
this._imgDown = $.Utils.makeTransparentImage(this._srcDown);
|
||||
this.imgRest = $.Utils.makeTransparentImage( this.srcRest );
|
||||
this.imgGroup = $.Utils.makeTransparentImage( this.srcGroup );
|
||||
this.imgHover = $.Utils.makeTransparentImage( this.srcHover );
|
||||
this.imgDown = $.Utils.makeTransparentImage( this.srcDown );
|
||||
|
||||
this._fadeDelay = 0; // begin fading immediately
|
||||
this._fadeLength = 2000; // fade over a period of 2 seconds
|
||||
this._fadeBeginTime = null;
|
||||
this._shouldFade = false;
|
||||
this.fadeDelay = 0; // begin fading immediately
|
||||
this.fadeLength = 2000; // fade over a period of 2 seconds
|
||||
this.fadeBeginTime = null;
|
||||
this.shouldFade = false;
|
||||
|
||||
this.element.style.display = "inline-block";
|
||||
this.element.style.display = "inline-block";
|
||||
this.element.style.position = "relative";
|
||||
this.element.title = this._tooltip;
|
||||
this.element.title = this.tooltip;
|
||||
|
||||
this.element.appendChild(this._imgRest);
|
||||
this.element.appendChild(this._imgGroup);
|
||||
this.element.appendChild(this._imgHover);
|
||||
this.element.appendChild(this._imgDown);
|
||||
this.element.appendChild( this.imgRest );
|
||||
this.element.appendChild( this.imgGroup );
|
||||
this.element.appendChild( this.imgHover );
|
||||
this.element.appendChild( this.imgDown );
|
||||
|
||||
var styleRest = this._imgRest.style;
|
||||
var styleGroup = this._imgGroup.style;
|
||||
var styleHover = this._imgHover.style;
|
||||
var styleDown = this._imgDown.style;
|
||||
var styleRest = this.imgRest.style;
|
||||
var styleGroup = this.imgGroup.style;
|
||||
var styleHover = this.imgHover.style;
|
||||
var styleDown = this.imgDown.style;
|
||||
|
||||
styleGroup.position = styleHover.position = styleDown.position = "absolute";
|
||||
styleGroup.top = styleHover.top = styleDown.top = "0px";
|
||||
styleGroup.left = styleHover.left = styleDown.left = "0px";
|
||||
styleHover.visibility = styleDown.visibility = "hidden";
|
||||
styleGroup.position =
|
||||
styleHover.position =
|
||||
styleDown.position =
|
||||
"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
|
||||
&& $.Utils.getBrowserVersion() < 3 ){
|
||||
styleGroup.top = styleHover.top = styleDown.top = "";
|
||||
|
||||
styleGroup.top =
|
||||
styleHover.top =
|
||||
styleDown.top = "";
|
||||
}
|
||||
|
||||
this._tracker.enterHandler = $.delegate(this, this._enterHandler);
|
||||
this._tracker.exitHandler = $.delegate(this, this._exitHandler);
|
||||
this._tracker.pressHandler = $.delegate(this, this._pressHandler);
|
||||
this._tracker.releaseHandler = $.delegate(this, this._releaseHandler);
|
||||
this._tracker.clickHandler = $.delegate(this, this._clickHandler);
|
||||
this.tracker.enterHandler = $.delegate( this, this._enterHandler );
|
||||
this.tracker.exitHandler = $.delegate( this, this._exitHandler );
|
||||
this.tracker.pressHandler = $.delegate( this, this._pressHandler );
|
||||
this.tracker.releaseHandler = $.delegate( this, this._releaseHandler );
|
||||
this.tracker.clickHandler = $.delegate( this, this._clickHandler );
|
||||
|
||||
this._tracker.setTracking( true );
|
||||
this._outTo( $.ButtonState.REST );
|
||||
this.tracker.setTracking( true );
|
||||
outTo( this, $.ButtonState.REST );
|
||||
};
|
||||
|
||||
$.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) {
|
||||
if (buttonDownElmt) {
|
||||
this._inTo($.ButtonState.DOWN);
|
||||
this._raiseEvent("onEnter", this);
|
||||
} else if (!buttonDownAny) {
|
||||
this._inTo($.ButtonState.HOVER);
|
||||
if ( buttonDownElmt ) {
|
||||
inTo( this, $.ButtonState.DOWN );
|
||||
this.raiseEvent( "onEnter", this );
|
||||
} else if ( !buttonDownAny ) {
|
||||
inTo( this, $.ButtonState.HOVER );
|
||||
}
|
||||
},
|
||||
_exitHandler: function(tracker, position, buttonDownElmt, buttonDownAny) {
|
||||
this._outTo($.ButtonState.GROUP);
|
||||
if (buttonDownElmt) {
|
||||
this._raiseEvent("onExit", this);
|
||||
outTo( this, $.ButtonState.GROUP );
|
||||
if ( buttonDownElmt ) {
|
||||
this.raiseEvent( "onExit", this );
|
||||
}
|
||||
},
|
||||
_pressHandler: function(tracker, position) {
|
||||
this._inTo($.ButtonState.DOWN);
|
||||
this._raiseEvent("onPress", this);
|
||||
inTo( this, $.ButtonState.DOWN );
|
||||
this.raiseEvent( "onPress", this );
|
||||
},
|
||||
_releaseHandler: function(tracker, position, insideElmtPress, insideElmtRelease) {
|
||||
if (insideElmtPress && insideElmtRelease) {
|
||||
this._outTo($.ButtonState.HOVER);
|
||||
this._raiseEvent("onRelease", this);
|
||||
} else if (insideElmtPress) {
|
||||
this._outTo($.ButtonState.GROUP);
|
||||
if ( insideElmtPress && insideElmtRelease ) {
|
||||
outTo( this, $.ButtonState.HOVER );
|
||||
this.raiseEvent( "onRelease", this );
|
||||
} else if ( insideElmtPress ) {
|
||||
outTo( this, $.ButtonState.GROUP );
|
||||
} else {
|
||||
this._inTo($.ButtonState.HOVER);
|
||||
inTo( this, $.ButtonState.HOVER );
|
||||
}
|
||||
},
|
||||
_clickHandler: function(tracker, position, quick, shift) {
|
||||
if (quick) {
|
||||
this._raiseEvent("onClick", this);
|
||||
if ( quick ) {
|
||||
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() {
|
||||
this._inTo($.ButtonState.GROUP);
|
||||
inTo( this, $.ButtonState.GROUP );
|
||||
},
|
||||
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 ));
|
||||
|
||||
(function( $ ){
|
||||
|
||||
317
src/button.js
317
src/button.js
@ -12,11 +12,11 @@ $.Button = function( options ) {
|
||||
|
||||
$.EventHandler.call( this );
|
||||
|
||||
this._tooltip = options.tooltip;
|
||||
this._srcRest = options.srcRest;
|
||||
this._srcGroup = options.srcGroup;
|
||||
this._srcHover = options.srcHover;
|
||||
this._srcDown = options.srcDown;
|
||||
this.tooltip = options.tooltip;
|
||||
this.srcRest = options.srcRest;
|
||||
this.srcGroup = options.srcGroup;
|
||||
this.srcHover = options.srcHover;
|
||||
this.srcDown = options.srcDown;
|
||||
//TODO: make button elements accessible by making them a-tags
|
||||
// maybe even consider basing them on the element and adding
|
||||
// methods jquery-style.
|
||||
@ -39,205 +39,190 @@ $.Button = function( options ) {
|
||||
this.addHandler("onExit", options.onExit );
|
||||
}
|
||||
|
||||
this._currentState = $.ButtonState.GROUP;
|
||||
this._tracker = new $.MouseTracker(
|
||||
this.currentState = $.ButtonState.GROUP;
|
||||
this.tracker = new $.MouseTracker(
|
||||
this.element,
|
||||
this.config.clickTimeThreshold,
|
||||
this.config.clickDistThreshold
|
||||
);
|
||||
this._imgRest = $.Utils.makeTransparentImage(this._srcRest);
|
||||
this._imgGroup = $.Utils.makeTransparentImage(this._srcGroup);
|
||||
this._imgHover = $.Utils.makeTransparentImage(this._srcHover);
|
||||
this._imgDown = $.Utils.makeTransparentImage(this._srcDown);
|
||||
this.imgRest = $.Utils.makeTransparentImage( this.srcRest );
|
||||
this.imgGroup = $.Utils.makeTransparentImage( this.srcGroup );
|
||||
this.imgHover = $.Utils.makeTransparentImage( this.srcHover );
|
||||
this.imgDown = $.Utils.makeTransparentImage( this.srcDown );
|
||||
|
||||
this._fadeDelay = 0; // begin fading immediately
|
||||
this._fadeLength = 2000; // fade over a period of 2 seconds
|
||||
this._fadeBeginTime = null;
|
||||
this._shouldFade = false;
|
||||
this.fadeDelay = 0; // begin fading immediately
|
||||
this.fadeLength = 2000; // fade over a period of 2 seconds
|
||||
this.fadeBeginTime = null;
|
||||
this.shouldFade = false;
|
||||
|
||||
this.element.style.display = "inline-block";
|
||||
this.element.style.display = "inline-block";
|
||||
this.element.style.position = "relative";
|
||||
this.element.title = this._tooltip;
|
||||
this.element.title = this.tooltip;
|
||||
|
||||
this.element.appendChild(this._imgRest);
|
||||
this.element.appendChild(this._imgGroup);
|
||||
this.element.appendChild(this._imgHover);
|
||||
this.element.appendChild(this._imgDown);
|
||||
this.element.appendChild( this.imgRest );
|
||||
this.element.appendChild( this.imgGroup );
|
||||
this.element.appendChild( this.imgHover );
|
||||
this.element.appendChild( this.imgDown );
|
||||
|
||||
var styleRest = this._imgRest.style;
|
||||
var styleGroup = this._imgGroup.style;
|
||||
var styleHover = this._imgHover.style;
|
||||
var styleDown = this._imgDown.style;
|
||||
var styleRest = this.imgRest.style;
|
||||
var styleGroup = this.imgGroup.style;
|
||||
var styleHover = this.imgHover.style;
|
||||
var styleDown = this.imgDown.style;
|
||||
|
||||
styleGroup.position = styleHover.position = styleDown.position = "absolute";
|
||||
styleGroup.top = styleHover.top = styleDown.top = "0px";
|
||||
styleGroup.left = styleHover.left = styleDown.left = "0px";
|
||||
styleHover.visibility = styleDown.visibility = "hidden";
|
||||
styleGroup.position =
|
||||
styleHover.position =
|
||||
styleDown.position =
|
||||
"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
|
||||
&& $.Utils.getBrowserVersion() < 3 ){
|
||||
styleGroup.top = styleHover.top = styleDown.top = "";
|
||||
|
||||
styleGroup.top =
|
||||
styleHover.top =
|
||||
styleDown.top = "";
|
||||
}
|
||||
|
||||
this._tracker.enterHandler = $.delegate(this, this._enterHandler);
|
||||
this._tracker.exitHandler = $.delegate(this, this._exitHandler);
|
||||
this._tracker.pressHandler = $.delegate(this, this._pressHandler);
|
||||
this._tracker.releaseHandler = $.delegate(this, this._releaseHandler);
|
||||
this._tracker.clickHandler = $.delegate(this, this._clickHandler);
|
||||
this.tracker.enterHandler = $.delegate( this, this._enterHandler );
|
||||
this.tracker.exitHandler = $.delegate( this, this._exitHandler );
|
||||
this.tracker.pressHandler = $.delegate( this, this._pressHandler );
|
||||
this.tracker.releaseHandler = $.delegate( this, this._releaseHandler );
|
||||
this.tracker.clickHandler = $.delegate( this, this._clickHandler );
|
||||
|
||||
this._tracker.setTracking( true );
|
||||
this._outTo( $.ButtonState.REST );
|
||||
this.tracker.setTracking( true );
|
||||
outTo( this, $.ButtonState.REST );
|
||||
};
|
||||
|
||||
$.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) {
|
||||
if (buttonDownElmt) {
|
||||
this._inTo($.ButtonState.DOWN);
|
||||
this._raiseEvent("onEnter", this);
|
||||
} else if (!buttonDownAny) {
|
||||
this._inTo($.ButtonState.HOVER);
|
||||
if ( buttonDownElmt ) {
|
||||
inTo( this, $.ButtonState.DOWN );
|
||||
this.raiseEvent( "onEnter", this );
|
||||
} else if ( !buttonDownAny ) {
|
||||
inTo( this, $.ButtonState.HOVER );
|
||||
}
|
||||
},
|
||||
_exitHandler: function(tracker, position, buttonDownElmt, buttonDownAny) {
|
||||
this._outTo($.ButtonState.GROUP);
|
||||
if (buttonDownElmt) {
|
||||
this._raiseEvent("onExit", this);
|
||||
outTo( this, $.ButtonState.GROUP );
|
||||
if ( buttonDownElmt ) {
|
||||
this.raiseEvent( "onExit", this );
|
||||
}
|
||||
},
|
||||
_pressHandler: function(tracker, position) {
|
||||
this._inTo($.ButtonState.DOWN);
|
||||
this._raiseEvent("onPress", this);
|
||||
inTo( this, $.ButtonState.DOWN );
|
||||
this.raiseEvent( "onPress", this );
|
||||
},
|
||||
_releaseHandler: function(tracker, position, insideElmtPress, insideElmtRelease) {
|
||||
if (insideElmtPress && insideElmtRelease) {
|
||||
this._outTo($.ButtonState.HOVER);
|
||||
this._raiseEvent("onRelease", this);
|
||||
} else if (insideElmtPress) {
|
||||
this._outTo($.ButtonState.GROUP);
|
||||
if ( insideElmtPress && insideElmtRelease ) {
|
||||
outTo( this, $.ButtonState.HOVER );
|
||||
this.raiseEvent( "onRelease", this );
|
||||
} else if ( insideElmtPress ) {
|
||||
outTo( this, $.ButtonState.GROUP );
|
||||
} else {
|
||||
this._inTo($.ButtonState.HOVER);
|
||||
inTo( this, $.ButtonState.HOVER );
|
||||
}
|
||||
},
|
||||
_clickHandler: function(tracker, position, quick, shift) {
|
||||
if (quick) {
|
||||
this._raiseEvent("onClick", this);
|
||||
if ( quick ) {
|
||||
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() {
|
||||
this._inTo($.ButtonState.GROUP);
|
||||
inTo( this, $.ButtonState.GROUP );
|
||||
},
|
||||
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 ));
|
||||
|
||||
@ -248,33 +248,33 @@ $.extend($.Viewer.prototype, $.EventHandler.prototype, {
|
||||
|
||||
var containerSize = $.Utils.getElementSize( this.container );
|
||||
|
||||
if (!containerSize.equals(this._prevContainerSize)) {
|
||||
this.viewport.resize(containerSize, true); // maintain image position
|
||||
if ( !containerSize.equals( this._prevContainerSize ) ) {
|
||||
this.viewport.resize( containerSize, true ); // maintain image position
|
||||
this._prevContainerSize = containerSize;
|
||||
raiseEvent( this, "resize" );
|
||||
this.raiseEvent( "resize" );
|
||||
}
|
||||
|
||||
var animated = this.viewport.update();
|
||||
|
||||
if (!this._animating && animated) {
|
||||
raiseEvent( this, "animationstart" );
|
||||
if ( !this._animating && animated ) {
|
||||
this.raiseEvent( "animationstart" );
|
||||
abortControlsAutoHide( this );
|
||||
}
|
||||
|
||||
if (animated) {
|
||||
if ( animated ) {
|
||||
this.drawer.update();
|
||||
raiseEvent( this, "animation" );
|
||||
} else if (this._forceRedraw || this.drawer.needsUpdate()) {
|
||||
this.raiseEvent( "animation" );
|
||||
} else if ( this._forceRedraw || this.drawer.needsUpdate() ) {
|
||||
this.drawer.update();
|
||||
this._forceRedraw = false;
|
||||
} else {
|
||||
this.drawer.idle();
|
||||
}
|
||||
|
||||
if (this._animating && !animated) {
|
||||
raiseEvent( this, "animationfinish" );
|
||||
if ( this._animating && !animated ) {
|
||||
this.raiseEvent( "animationfinish" );
|
||||
|
||||
if (!this._mouseInside) {
|
||||
if ( !this._mouseInside ) {
|
||||
beginControlsAutoHide( this );
|
||||
}
|
||||
}
|
||||
@ -359,7 +359,7 @@ $.extend($.Viewer.prototype, $.EventHandler.prototype, {
|
||||
|
||||
if ( this._lastOpenStartTime < viewer._lastOpenStartTime ) {
|
||||
$.Debug.log( "Ignoring out-of-date open." );
|
||||
raiseEvent( this, "ignore" );
|
||||
this.raiseEvent( "ignore" );
|
||||
return;
|
||||
}
|
||||
|
||||
@ -409,7 +409,7 @@ $.extend($.Viewer.prototype, $.EventHandler.prototype, {
|
||||
);
|
||||
}
|
||||
}
|
||||
raiseEvent( this, "open" );
|
||||
this.raiseEvent( "open" );
|
||||
},
|
||||
close: function () {
|
||||
|
||||
@ -545,7 +545,7 @@ $.extend($.Viewer.prototype, $.EventHandler.prototype, {
|
||||
}
|
||||
|
||||
this._forceRedraw = true;
|
||||
raiseEvent( this, "resize", this );
|
||||
this.raiseEvent( "resize", this );
|
||||
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.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user