(function( $ ){ /** * OpenSeadragon Viewer * * The main point of entry into creating a zoomable image on the page. * * We have provided an idiomatic javascript constructor which takes * a single object, but still support the legacy positional arguments. * * The options below are given in order that they appeared in the constructor * as arguments and we translate a positional call into an idiomatic call. * * options:{ * element: String id of Element to attach to, * xmlPath: String xpath ( TODO: not sure! ), * prefixUrl: String url used to prepend to paths, eg button images, * controls: Array of Seadragon.Controls, * overlays: Array of Seadragon.Overlays, * overlayControls: An Array of ( TODO: not sure! ) * } * * **/ $.Viewer = function( options ) { var args = arguments; if( typeof( options ) != 'object' ){ options = { id: args[ 0 ], xmlPath: args.length > 1 ? args[ 1 ] : undefined, prefixUrl: args.length > 2 ? args[ 2 ] : undefined, controls: args.length > 3 ? args[ 3 ] : undefined, overlays: args.length > 4 ? args[ 4 ] : undefined, overlayControls: args.length > 5 ? args[ 5 ] : undefined, config: {} }; } //Allow the options object to override global defaults $.extend( true, this, { id: options.id, xmlPath: options.xmlPath || undefined, prefixUrl: options.prefixUrl || '', controls: options.controls || [], overlays: options.overlays || [], overlayControls: options.overlayControls || [], config: { debugMode: true, animationTime: 1.5, blendTime: 0.5, alwaysBlend: false, autoHideControls: true, immediateRender: false, wrapHorizontal: false, wrapVertical: false, minZoomImageRatio: 0.8, maxZoomPixelRatio: 2, visibilityRatio: 0.5, springStiffness: 5.0, imageLoaderLimit: 2, clickTimeThreshold: 200, clickDistThreshold: 5, zoomPerClick: 2.0, zoomPerScroll: 1.2, zoomPerSecond: 2.0, showNavigationControl: true, maxImageCacheCount: 100, minPixelRatio: 0.5, mouseNavEnabled: true, navImages: { zoomIn: { REST: '/images/zoomin_rest.png', GROUP: '/images/zoomin_grouphover.png', HOVER: '/images/zoomin_hover.png', DOWN: '/images/zoomin_pressed.png' }, zoomOut: { REST: '/images/zoomout_rest.png', GROUP: '/images/zoomout_grouphover.png', HOVER: '/images/zoomout_hover.png', DOWN: '/images/zoomout_pressed.png' }, home: { REST: '/images/home_rest.png', GROUP: '/images/home_grouphover.png', HOVER: '/images/home_hover.png', DOWN: '/images/home_pressed.png' }, fullpage: { REST: '/images/fullpage_rest.png', GROUP: '/images/fullpage_grouphover.png', HOVER: '/images/fullpage_hover.png', DOWN: '/images/fullpage_pressed.png' } } } }, options ); this._element = document.getElementById( options.id ); this._customControls = []; this._container = null; this._canvas = null; this._controlsTL = null; this._controlsTR = null; this._controlsBR = null; this._controlsBL = null; this._bodyWidth = null; this._bodyHeight = null; this._bodyOverflow = null; this._docOverflow = null; this._fsBoundsDelta = null; this._prevContainerSize = null; this._lastOpenStartTime = 0; this._lastOpenEndTime = 0; this._animating = false; this._forceRedraw = false; this._mouseInside = false; this.source = null; this.drawer = null; this.viewport = null; this.profiler = null; this._events = new $.EventHandlerList(); this._container = $.Utils.makeNeutralElement("div"); this._canvas = $.Utils.makeNeutralElement("div"); this._controlsTL = $.Utils.makeNeutralElement("div"); this._controlsTR = $.Utils.makeNeutralElement("div"); this._controlsBR = $.Utils.makeNeutralElement("div"); this._controlsBL = $.Utils.makeNeutralElement("div"); var innerTracker = new $.MouseTracker(this._canvas, this.config.clickTimeThreshold, this.config.clickDistThreshold); var outerTracker = new $.MouseTracker(this._container, this.config.clickTimeThreshold, this.config.clickDistThreshold); this._bodyWidth = document.body.style.width; this._bodyHeight = document.body.style.height; this._bodyOverflow = document.body.style.overflow; this._docOverflow = document.documentElement.style.overflow; this._fsBoundsDelta = new $.Point(1, 1); var canvasStyle = this._canvas.style; var containerStyle = this._container.style; var controlsTLStyle = this._controlsTL.style; var controlsTRStyle = this._controlsTR.style; var controlsBRStyle = this._controlsBR.style; var controlsBLStyle = this._controlsBL.style; containerStyle.width = "100%"; containerStyle.height = "100%"; containerStyle.position = "relative"; containerStyle.left = "0px"; containerStyle.top = "0px"; containerStyle.textAlign = "left"; // needed to protect against canvasStyle.width = "100%"; canvasStyle.height = "100%"; canvasStyle.overflow = "hidden"; canvasStyle.position = "absolute"; canvasStyle.top = "0px"; canvasStyle.left = "0px"; controlsTLStyle.position = controlsTRStyle.position = controlsBRStyle.position = controlsBLStyle.position = "absolute"; controlsTLStyle.top = controlsTRStyle.top = "0px"; controlsTLStyle.left = controlsBLStyle.left = "0px"; controlsTRStyle.right = controlsBRStyle.right = "0px"; controlsBLStyle.bottom = controlsBRStyle.bottom = "0px"; innerTracker.clickHandler = $.delegate(this, this._onCanvasClick); innerTracker.dragHandler = $.delegate(this, this._onCanvasDrag); innerTracker.releaseHandler = $.delegate(this, this._onCanvasRelease); innerTracker.scrollHandler = $.delegate(this, this._onCanvasScroll); innerTracker.setTracking(true); // default state if (this.get_showNavigationControl()) { navControl = (new $.NavControl(this)).elmt; navControl.style.marginRight = "4px"; navControl.style.marginBottom = "4px"; this.addControl(navControl, $.ControlAnchor.BOTTOM_RIGHT); } for (var i = 0; i < this._customControls.length; i++) { this.addControl(this._customControls[i].id, this._customControls[i].anchor); } outerTracker.enterHandler = $.delegate(this, this._onContainerEnter); outerTracker.exitHandler = $.delegate(this, this._onContainerExit); outerTracker.releaseHandler = $.delegate(this, this._onContainerRelease); outerTracker.setTracking(true); // always tracking window.setTimeout($.delegate(this, this._beginControlsAutoHide), 1); // initial fade out this._container.appendChild(this._canvas); this._container.appendChild(this._controlsTL); this._container.appendChild(this._controlsTR); this._container.appendChild(this._controlsBR); this._container.appendChild(this._controlsBL); this.get_element().appendChild(this._container); if (this.xmlPath){ this.openDzi( this.xmlPath ); } }; $.Viewer.prototype = { get_events: function get_events() { return this._events; }, _raiseEvent: function (eventName, eventArgs) { var handler = this.get_events().getHandler(eventName); if (handler) { if (!eventArgs) { eventArgs = new Object(); // Sys.EventArgs.Empty; } handler(this, eventArgs); } }, _beginControlsAutoHide: function () { if (!this.config.autoHideControls) { return; } this._controlsShouldFade = true; this._controlsFadeBeginTime = new Date().getTime() + this._controlsFadeDelay; window.setTimeout($.delegate(this, this._scheduleControlsFade), this._controlsFadeDelay); }, _scheduleControlsFade: function () { window.setTimeout($.delegate(this, this._updateControlsFade), 20); }, _updateControlsFade: function () { if (this._controlsShouldFade) { var currentTime = new Date().getTime(); var deltaTime = currentTime - this._controlsFadeBeginTime; var opacity = 1.0 - deltaTime / this._controlsFadeLength; opacity = Math.min(1.0, opacity); opacity = Math.max(0.0, opacity); for (var i = this.controls.length - 1; i >= 0; i--) { this.controls[ i ].setOpacity(opacity); } if (opacity > 0) { this._scheduleControlsFade(); // fade again } } }, _onCanvasClick: function (tracker, position, quick, shift) { if (this.viewport && quick) { // ignore clicks where mouse moved var zoomPerClick = this.config.zoomPerClick; var factor = shift ? 1.0 / zoomPerClick : zoomPerClick; this.viewport.zoomBy(factor, this.viewport.pointFromPixel(position, true)); this.viewport.applyConstraints(); } }, _onCanvasDrag: function (tracker, position, delta, shift) { if (this.viewport) { this.viewport.panBy(this.viewport.deltaPointsFromPixels(delta.negate())); } }, _onCanvasRelease: function (tracker, position, insideElmtPress, insideElmtRelease) { if (insideElmtPress && this.viewport) { this.viewport.applyConstraints(); } }, _onCanvasScroll: function (tracker, position, scroll, shift) { if (this.viewport) { var factor = Math.pow(this.config.zoomPerScroll,scroll); this.viewport.zoomBy(factor, this.viewport.pointFromPixel(position, true)); this.viewport.applyConstraints(); } }, _onContainerExit: function (tracker, position, buttonDownElmt, buttonDownAny) { if (!buttonDownElmt) { this._mouseInside = false; if (!this._animating) { this._beginControlsAutoHide(); } } }, _onContainerRelease: function (tracker, position, insideElmtPress, insideElmtRelease) { if (!insideElmtRelease) { this._mouseInside = false; if (!this._animating) { this._beginControlsAutoHide(); } } }, _getControlIndex: function (elmt) { for (var i = this.controls.length - 1; i >= 0; i--) { if (this.controls[ i ].elmt == elmt) { return i; } } return -1; }, _abortControlsAutoHide: function () { this._controlsShouldFade = false; for (var i = this.controls.length - 1; i >= 0; i--) { this.controls[ i ].setOpacity(1.0); } }, _onContainerEnter: function (tracker, position, buttonDownElmt, buttonDownAny) { this._mouseInside = true; this._abortControlsAutoHide(); }, _updateOnce: function () { if (!this.source) { return; } this.profiler.beginUpdate(); var containerSize = $.Utils.getElementSize(this._container); if (!containerSize.equals(this._prevContainerSize)) { this.viewport.resize(containerSize, true); // maintain image position this._prevContainerSize = containerSize; this._raiseEvent("resize", this); } var animated = this.viewport.update(); if (!this._animating && animated) { this._raiseEvent("animationstart", self); this._abortControlsAutoHide(); } if (animated) { this.drawer.update(); this._raiseEvent("animation", self); } else if (this._forceRedraw || this.drawer.needsUpdate()) { this.drawer.update(); this._forceRedraw = false; } else { this.drawer.idle(); } if (this._animating && !animated) { this._raiseEvent("animationfinish", this); if (!this._mouseInside) { this._beginControlsAutoHide(); } } this._animating = animated; this.profiler.endUpdate(); }, _onClose: function () { this.source = null; this.viewport = null; this.drawer = null; this.profiler = null; this._canvas.innerHTML = ""; }, _beforeOpen: function () { if (this.source) { this._onClose(); } this._lastOpenStartTime = new Date().getTime(); // to ignore earlier opens window.setTimeout($.delegate(this, function () { if (this._lastOpenStartTime > this._lastOpenEndTime) { this._setMessage($.Strings.getString("Messages.Loading")); } }), 2000); return this._lastOpenStartTime; }, _setMessage: function (message) { var textNode = document.createTextNode(message); this._canvas.innerHTML = ""; this._canvas.appendChild($.Utils.makeCenteredNode(textNode)); var textStyle = textNode.parentNode.style; textStyle.color = "white"; textStyle.fontFamily = "verdana"; textStyle.fontSize = "13px"; textStyle.fontSizeAdjust = "none"; textStyle.fontStyle = "normal"; textStyle.fontStretch = "normal"; textStyle.fontVariant = "normal"; textStyle.fontWeight = "normal"; textStyle.lineHeight = "1em"; textStyle.textAlign = "center"; textStyle.textDecoration = "none"; }, _onOpen: function (time, _source, error) { this._lastOpenEndTime = new Date().getTime(); if (time < this._lastOpenStartTime) { $.Debug.log("Ignoring out-of-date open."); this._raiseEvent("ignore"); return; } else if (!_source) { this._setMessage(error); this._raiseEvent("error"); return; } this._canvas.innerHTML = ""; this._prevContainerSize = $.Utils.getElementSize(this._container); this.source = _source; this.viewport = new $.Viewport(this._prevContainerSize, this.source.dimensions, this.config); this.drawer = new $.Drawer(this.source, this.viewport, this._canvas); this.profiler = new $.Profiler(); this._animating = false; this._forceRedraw = true; this._scheduleUpdate(this._updateMulti); for (var i = 0; i < this.overlayControls.length; i++) { var overlay = this.overlayControls[ i ]; if (overlay.point != null) { this.drawer.addOverlay(overlay.id, new $.Point(overlay.point.X, overlay.point.Y), $.OverlayPlacement.TOP_LEFT); } else { this.drawer.addOverlay(overlay.id, new $.Rect(overlay.rect.Point.X, overlay.rect.Point.Y, overlay.rect.Width, overlay.rect.Height), overlay.placement); } } this._raiseEvent("open"); }, _scheduleUpdate: function (updateFunc, prevUpdateTime) { if (this._animating) { return window.setTimeout($.delegate(this, updateFunc), 1); } var currentTime = new Date().getTime(); var prevUpdateTime = prevUpdateTime ? prevUpdateTime : currentTime; var targetTime = prevUpdateTime + 1000 / 60; // 60 fps ideal var deltaTime = Math.max(1, targetTime - currentTime); return window.setTimeout($.delegate(this, updateFunc), deltaTime); }, _updateMulti: function () { if (!this.source) { return; } var beginTime = new Date().getTime(); this._updateOnce(); this._scheduleUpdate(arguments.callee, beginTime); }, _updateOnce: function () { if (!this.source) { return; } this.profiler.beginUpdate(); var containerSize = $.Utils.getElementSize(this._container); if (!containerSize.equals(this._prevContainerSize)) { this.viewport.resize(containerSize, true); // maintain image position this._prevContainerSize = containerSize; this._raiseEvent("resize"); } var animated = this.viewport.update(); if (!this._animating && animated) { this._raiseEvent("animationstart"); this._abortControlsAutoHide(); } if (animated) { this.drawer.update(); this._raiseEvent("animation"); } else if (this._forceRedraw || this.drawer.needsUpdate()) { this.drawer.update(); this._forceRedraw = false; } else { this.drawer.idle(); } if (this._animating && !animated) { this._raiseEvent("animationfinish"); if (!this._mouseInside) { this._beginControlsAutoHide(); } } this._animating = animated; this.profiler.endUpdate(); }, getNavControl: function () { return this._navControl; }, get_element: function () { return this._element; }, get_debugMode: function () { return this.config.debugMode; }, set_debugMode: function (value) { this.config.debugMode = value; }, get_animationTime: function () { return this.config.animationTime; }, set_animationTime: function (value) { this.config.animationTime = value; }, get_blendTime: function () { return this.config.blendTime; }, set_blendTime: function (value) { this.config.blendTime = value; }, get_alwaysBlend: function () { return this.config.alwaysBlend; }, set_alwaysBlend: function (value) { this.config.alwaysBlend = value; }, get_autoHideControls: function () { return this.config.autoHideControls; }, set_autoHideControls: function (value) { this.config.autoHideControls = value; }, get_immediateRender: function () { return this.config.immediateRender; }, set_immediateRender: function (value) { this.config.immediateRender = value; }, get_wrapHorizontal: function () { return this.config.wrapHorizontal; }, set_wrapHorizontal: function (value) { this.config.wrapHorizontal = value; }, get_wrapVertical: function () { return this.config.wrapVertical; }, set_wrapVertical: function (value) { this.config.wrapVertical = value; }, get_minZoomImageRatio: function () { return this.config.minZoomImageRatio; }, set_minZoomImageRatio: function (value) { this.config.minZoomImageRatio = value; }, get_maxZoomPixelRatio: function () { return this.config.maxZoomPixelRatio; }, set_maxZoomPixelRatio: function (value) { this.config.maxZoomPixelRatio = value; }, get_visibilityRatio: function () { return this.config.visibilityRatio; }, set_visibilityRatio: function (value) { this.config.visibilityRatio = value; }, get_springStiffness: function () { return this.config.springStiffness; }, set_springStiffness: function (value) { this.config.springStiffness = value; }, get_imageLoaderLimit: function () { return this.config.imageLoaderLimit; }, set_imageLoaderLimit: function (value) { this.config.imageLoaderLimit = value; }, get_clickTimeThreshold: function () { return this.config.clickTimeThreshold; }, set_clickTimeThreshold: function (value) { this.config.clickTimeThreshold = value; }, get_clickDistThreshold: function () { return this.config.clickDistThreshold; }, set_clickDistThreshold: function (value) { this.config.clickDistThreshold = value; }, get_zoomPerClick: function () { return this.config.zoomPerClick; }, set_zoomPerClick: function (value) { this.config.zoomPerClick = value; }, get_zoomPerSecond: function () { return this.config.zoomPerSecond; }, set_zoomPerSecond: function (value) { this.config.zoomPerSecond = value; }, get_zoomPerScroll: function () { return this.config.zoomPerScroll; }, set_zoomPerScroll: function (value) { this.config.zoomPerScroll = value; }, get_maxImageCacheCount: function () { return this.config.maxImageCacheCount; }, set_maxImageCacheCount: function (value) { this.config.maxImageCacheCount = value; }, get_showNavigationControl: function () { return this.config.showNavigationControl; }, set_showNavigationControl: function (value) { this.config.showNavigationControl = value; }, get_minPixelRatio: function () { return this.config.minPixelRatio; }, set_minPixelRatio: function (value) { this.config.minPixelRatio = value; }, get_mouseNavEnabled: function () { return this.config.mouseNavEnabled; }, set_mouseNavEnabled: function (value) { this.config.mouseNavEnabled = value; }, get_controls: function () { return this._customControls; }, set_controls: function (value) { this._customControls = value; }, add_open: function (handler) { this.get_events().addHandler("open", handler); }, remove_open: function (handler) { this.get_events().removeHandler("open", handler); }, add_error: function (handler) { this.get_events().addHandler("error", handler); }, remove_error: function (handler) { this.get_events().removeHandler("error", handler); }, add_ignore: function (handler) { this.get_events().addHandler("ignore", handler); }, remove_ignore: function (handler) { this.get_events().removeHandler("ignore", handler); }, add_resize: function (handler) { this.get_events().addHandler("resize", handler); }, remove_resize: function (handler) { this.get_events().removeHandler("resize", handler); }, add_animationstart: function (handler) { this.get_events().addHandler("animationstart", handler); }, remove_animationstart: function (handler) { this.get_events().removeHandler("animationstart", handler); }, add_animation: function (handler) { this.get_events().addHandler("animation", handler); }, remove_animation: function (handler) { this.get_events().removeHandler("animation", handler); }, add_animationfinish: function (handler) { this.get_events().addHandler("animationfinish", handler); }, remove_animationfinish: function (handler) { this.get_events().removeHandler("animationfinish", handler); }, addControl: function (elmt, anchor) { var elmt = $.Utils.getElement(elmt); if (this._getControlIndex(elmt) >= 0) { return; // they're trying to add a duplicate control } var div = null; switch (anchor) { case $.ControlAnchor.TOP_RIGHT: div = this._controlsTR; elmt.style.position = "relative"; break; case $.ControlAnchor.BOTTOM_RIGHT: div = this._controlsBR; elmt.style.position = "relative"; break; case $.ControlAnchor.BOTTOM_LEFT: div = this._controlsBL; elmt.style.position = "relative"; break; case $.ControlAnchor.TOP_LEFT: div = this._controlsTL; elmt.style.position = "relative"; break; case $.ControlAnchor.NONE: default: div = this._container; elmt.style.position = "absolute"; break; } this.controls.push(new $.Control(elmt, anchor, div)); elmt.style.display = "inline-block"; }, isOpen: function () { return !!this.source; }, openDzi: function (xmlUrl, xmlString) { var currentTime = this._beforeOpen(); $.DziTileSourceHelper.createFromXml(xmlUrl, xmlString, $.Utils.createCallback(null, $.delegate(this, this._onOpen), currentTime)); }, openTileSource: function (tileSource) { var currentTime = beforeOpen(); window.setTimeout($.delegate(this, function () { onOpen(currentTime, tileSource); }), 1); }, close: function () { if (!this.source) { return; } this._onClose(); }, removeControl: function (elmt) { var elmt = $.Utils.getElement(elmt); var i = this._getControlIndex(elmt); if (i >= 0) { this.controls[ i ].destroy(); this.controls.splice( i, 1 ); } }, clearControls: function () { while ( this.controls.length > 0 ) { this.controls.pop().destroy(); } }, isDashboardEnabled: function () { for ( var i = this.controls.length - 1; i >= 0; i-- ) { if (this.controls[ i ].isVisible()) { return true; } } return false; }, isFullPage: function () { return this._container.parentNode == document.body; }, isMouseNavEnabled: function () { return this._innerTracker.isTracking(); }, isVisible: function () { return this._container.style.visibility != "hidden"; }, setDashboardEnabled: function (enabled) { for ( var i = this.controls.length - 1; i >= 0; i-- ) { this.controls[ i ].setVisible( enabled ); } }, setFullPage: function (fullPage) { if (fullPage == this.isFullPage()) { return; } var body = document.body; var bodyStyle = body.style; var docStyle = document.documentElement.style; var containerStyle = this._container.style; var canvasStyle = this._canvas.style; if (fullPage) { bodyOverflow = bodyStyle.overflow; docOverflow = docStyle.overflow; bodyStyle.overflow = "hidden"; docStyle.overflow = "hidden"; bodyWidth = bodyStyle.width; bodyHeight = bodyStyle.height; bodyStyle.width = "100%"; bodyStyle.height = "100%"; canvasStyle.backgroundColor = "black"; canvasStyle.color = "white"; containerStyle.position = "fixed"; containerStyle.zIndex = "99999999"; body.appendChild(this._container); this._prevContainerSize = $.Utils.getWindowSize(); this._onContainerEnter(); // mouse will be inside container now } else { bodyStyle.overflow = bodyOverflow; docStyle.overflow = docOverflow; bodyStyle.width = bodyWidth; bodyStyle.height = bodyHeight; canvasStyle.backgroundColor = ""; canvasStyle.color = ""; containerStyle.position = "relative"; containerStyle.zIndex = ""; this.get_element().appendChild(this._container); this._prevContainerSize = $.Utils.getElementSize(this.get_element()); this._onContainerExit(); // mouse will likely be outside now } if (this.viewport) { var oldBounds = this.viewport.getBounds(); this.viewport.resize(this._prevContainerSize); var newBounds = this.viewport.getBounds(); if (fullPage) { this._fsBoundsDelta = new $.Point(newBounds.width / oldBounds.width, newBounds.height / oldBounds.height); } else { this.viewport.update(); this.viewport.zoomBy(Math.max(this._fsBoundsDelta.x, this._fsBoundsDelta.y), null, true); } this._forceRedraw = true; this._raiseEvent("resize", this); this._updateOnce(); } }, setMouseNavEnabled: function (enabled) { this._innerTracker.setTracking(enabled); }, setVisible: function (visible) { this._container.style.visibility = visible ? "" : "hidden"; } }; }( OpenSeadragon ));