@tindtechnologies/universalviewer
Version:
The Universal Viewer is a community-developed open source project on a mission to help you share your 📚📜📰📽️📻🗿 with the 🌎
1,021 lines (1,020 loc) • 64.1 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.OpenSeadragonCenterPanel = void 0;
var $ = window.$;
var Utils_1 = require("../../Utils");
var Utils_2 = require("../../../../Utils");
var vocabulary_1 = require("@iiif/vocabulary");
var IIIFEvents_1 = require("../../IIIFEvents");
var XYWHFragment_1 = require("../uv-shared-module/XYWHFragment");
var CenterPanel_1 = require("../uv-shared-module/CenterPanel");
var Events_1 = require("../../extensions/uv-openseadragon-extension/Events");
var openseadragon_1 = __importDefault(require("openseadragon"));
require("@openseadragon-imaging/openseadragon-viewerinputhook");
var dist_commonjs_1 = require("@iiif/vocabulary/dist-commonjs");
var Events_2 = require("../../../../Events");
var OpenSeadragonCenterPanel = /** @class */ (function (_super) {
__extends(OpenSeadragonCenterPanel, _super);
function OpenSeadragonCenterPanel($element) {
var _this = _super.call(this, $element) || this;
_this.controlsVisible = false;
_this.isCreated = false;
_this.isLoaded = false;
_this.isFirstLoad = true;
_this.navigatedFromSearch = false;
_this.nextButtonEnabled = false;
// pages: IExternalResource[];
_this.prevButtonEnabled = false;
return _this;
}
OpenSeadragonCenterPanel.prototype.create = function () {
var _this = this;
this.setConfig("openSeadragonCenterPanel");
_super.prototype.create.call(this);
this.viewerId = "osd" + new Date().getTime();
this.$viewer = $('<div id="' + this.viewerId + '" class="viewer"></div>');
this.$content.prepend(this.$viewer);
this.extensionHost.subscribe(IIIFEvents_1.IIIFEvents.ANNOTATIONS, function (args) {
_this.overlayAnnotations();
});
this.extensionHost.subscribe(IIIFEvents_1.IIIFEvents.SETTINGS_CHANGE, function (args) {
_this.viewer.gestureSettingsMouse.clickToZoom = args.clickToZoomEnabled;
_this.viewer.controlsFadeLength = _this.getControlsFadeLength();
});
this.extensionHost.subscribe(IIIFEvents_1.IIIFEvents.OPEN_EXTERNAL_RESOURCE, function (resources) {
_this.whenResized(function () { return __awaiter(_this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!this.isCreated) {
// uv may have reloaded
this.createUI();
}
this.isLoaded = false;
return [4 /*yield*/, this.openMedia(resources)];
case 1:
_a.sent();
this.isLoaded = true;
this.extensionHost.publish(Events_2.Events.EXTERNAL_RESOURCE_OPENED);
this.extensionHost.publish(Events_2.Events.LOAD);
return [2 /*return*/];
}
});
}); });
});
this.extensionHost.subscribe(IIIFEvents_1.IIIFEvents.CLEAR_ANNOTATIONS, function () {
_this.whenCreated(function () {
_this.extension.currentAnnotationRect = null;
_this.clearAnnotations();
});
});
this.extensionHost.subscribe(Events_1.OpenSeadragonExtensionEvents.NEXT_SEARCH_RESULT, function () {
_this.whenCreated(function () {
_this.nextAnnotation();
});
});
this.extensionHost.subscribe(Events_1.OpenSeadragonExtensionEvents.PREV_SEARCH_RESULT, function () {
_this.whenCreated(function () {
_this.prevAnnotation();
});
});
this.extensionHost.subscribe(Events_1.OpenSeadragonExtensionEvents.ZOOM_IN, function () {
_this.whenCreated(function () {
_this.zoomIn();
});
});
this.extensionHost.subscribe(Events_1.OpenSeadragonExtensionEvents.ZOOM_OUT, function () {
_this.whenCreated(function () {
_this.zoomOut();
});
});
this.extensionHost.subscribe(Events_1.OpenSeadragonExtensionEvents.ROTATE, function () {
_this.whenCreated(function () {
_this.rotateRight();
});
});
this.extensionHost.subscribe(IIIFEvents_1.IIIFEvents.METRIC_CHANGE, function () {
_this.whenCreated(function () {
_this.updateResponsiveView();
});
});
this.extensionHost.subscribe(IIIFEvents_1.IIIFEvents.SET_TARGET, function (target) {
_this.whenLoaded(function () {
_this.fitToBounds(target, false);
});
});
this.extensionHost.subscribe(IIIFEvents_1.IIIFEvents.SET_ROTATION, function (rotation) {
_this.whenLoaded(function () {
_this.viewer.viewport.setRotation(rotation);
});
});
};
OpenSeadragonCenterPanel.prototype.whenCreated = function (cb) {
var _this = this;
Utils_1.Async.waitFor(function () {
return _this.isCreated;
}, cb);
};
OpenSeadragonCenterPanel.prototype.whenLoaded = function (cb) {
var _this = this;
Utils_1.Async.waitFor(function () {
return _this.isLoaded;
}, cb);
};
OpenSeadragonCenterPanel.prototype.zoomIn = function () {
this.viewer.viewport.zoomTo(this.viewer.viewport.getZoom(true) * 2);
};
OpenSeadragonCenterPanel.prototype.zoomOut = function () {
this.viewer.viewport.zoomTo(this.viewer.viewport.getZoom(true) * 0.5);
};
OpenSeadragonCenterPanel.prototype.rotateRight = function () {
this.viewer.viewport.setRotation(this.viewer.viewport.getRotation() + 90);
};
OpenSeadragonCenterPanel.prototype.updateResponsiveView = function () {
var _this = this;
this.setNavigatorVisible();
this.viewer.autoHideControls = this.extension.isDesktopMetric();
var enableAutoHide = function (event) {
_this.viewer.autoHideControls = true;
};
var disableAutoHide = function () {
_this.viewer.autoHideControls = false;
};
var buttons = [
this.$zoomInButton,
this.$zoomOutButton,
this.$goHomeButton,
this.$rotateButton,
this.$adjustImageButton,
];
buttons.forEach(function (button) {
button.on("focus", disableAutoHide);
button.on("focusout", enableAutoHide);
});
};
OpenSeadragonCenterPanel.prototype.createUI = function () {
return __awaiter(this, void 0, void 0, function () {
var pixel, that, debouncedDoubleClick, $oldZoomIn, $oldZoomOut, $oldGoHome, $oldRotate, settings, contrastPercent, brightnessPercent, saturationPercent;
var _this = this;
var _a;
return __generator(this, function (_b) {
this.$spinner = $('<div class="spinner"></div>');
this.$content.append(this.$spinner);
this.showAdjustImageButton = Utils_1.Bools.getBool(this.config.options.showAdjustImageControl, false);
pixel = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
this.viewer = (0, openseadragon_1.default)({
// id: this.viewerId,
element: this.$viewer[0],
// crossOriginPolicy: "Anonymous",
showNavigationControl: true,
showNavigator: true,
showRotationControl: true,
showHomeControl: Utils_1.Bools.getBool(this.config.options.showHomeControl, false),
showFullPageControl: false,
defaultZoomLevel: this.config.options.defaultZoomLevel || 0,
maxZoomPixelRatio: this.config.options.maxZoomPixelRatio || 2,
controlsFadeDelay: this.config.options.controlsFadeDelay || 250,
controlsFadeLength: this.getControlsFadeLength(),
navigatorPosition: this.extension.helper.isContinuous()
? "BOTTOM_LEFT"
: this.config.options.navigatorPosition || "BOTTOM_RIGHT",
navigatorHeight: "100px",
navigatorWidth: "100px",
navigatorMaintainSizeRatio: false,
navigatorAutoResize: false,
animationTime: this.config.options.animationTime || 1.2,
visibilityRatio: this.config.options.visibilityRatio || 0.5,
constrainDuringPan: Utils_1.Bools.getBool(this.config.options.constrainDuringPan, false),
immediateRender: Utils_1.Bools.getBool(this.config.options.immediateRender, false),
blendTime: this.config.options.blendTime || 0,
autoHideControls: Utils_1.Bools.getBool(this.config.options.autoHideControls, true),
prefixUrl: null,
gestureSettingsMouse: {
clickToZoom: Utils_1.Bools.getBool(this.extension.data.config.options.clickToZoomEnabled, true),
},
navImages: {
zoomIn: {
REST: pixel,
GROUP: pixel,
HOVER: pixel,
DOWN: pixel,
},
zoomOut: {
REST: pixel,
GROUP: pixel,
HOVER: pixel,
DOWN: pixel,
},
home: {
REST: pixel,
GROUP: pixel,
HOVER: pixel,
DOWN: pixel,
},
rotateright: {
REST: pixel,
GROUP: pixel,
HOVER: pixel,
DOWN: pixel,
},
rotateleft: {
REST: pixel,
GROUP: pixel,
HOVER: pixel,
DOWN: pixel,
},
next: {
REST: pixel,
GROUP: pixel,
HOVER: pixel,
DOWN: pixel,
},
previous: {
REST: pixel,
GROUP: pixel,
HOVER: pixel,
DOWN: pixel,
},
},
// The max number of milliseconds that an image job may take to complete.
timeout: this.config.options.tileTimeout || 30000,
});
that = this;
debouncedDoubleClick = (0, Utils_2.debounce)(function (e) {
var canvas = that.extension.helper.getCurrentCanvas();
var viewportPoint = that.viewer.viewport.pointFromPixel(e.position);
var imagePoint = that.viewer.viewport.viewportToImageCoordinates(viewportPoint.x, viewportPoint.y);
_this.extensionHost.publish(Events_1.OpenSeadragonExtensionEvents.DOUBLECLICK, {
target: "".concat(canvas.id, "#xywh=").concat(Math.round(imagePoint.x), ",").concat(Math.round(imagePoint.y), ",1,1"),
});
}, 100);
this.viewer.addViewerInputHook({
hooks: [
{
tracker: "viewer",
handler: "dblClickHandler",
hookHandler: function (e) {
var settings = _this.extension.getSettings();
var pagingAvailable = _this.extension.helper.isPagingAvailable();
if ((pagingAvailable && !settings.pagingEnabled) ||
!pagingAvailable) {
if (_this.config.options.doubleClickAnnotationEnabled) {
debouncedDoubleClick(e);
}
}
},
},
],
});
$oldZoomIn = this.$viewer.find('div[title="Zoom in"]');
this.$zoomInButton = $("<button />").append($oldZoomIn.contents());
this.$zoomInButton.insertAfter($oldZoomIn);
$oldZoomIn.remove();
this.$zoomInButton.attr("tabindex", 0);
this.$zoomInButton.attr("title", this.content.zoomIn);
this.$zoomInButton.attr("aria-label", this.content.zoomIn);
this.$zoomInButton.addClass("zoomIn viewportNavButton");
this.onAccessibleClick(this.$zoomInButton, function () {
if (_this.viewer.viewport.getZoom() < _this.viewer.viewport.getMaxZoom())
_this.zoomIn();
});
$oldZoomOut = this.$viewer.find('div[title="Zoom out"]');
this.$zoomOutButton = $("<button />").append($oldZoomOut.contents());
this.$zoomOutButton.insertAfter($oldZoomOut);
$oldZoomIn.remove();
this.$zoomOutButton.attr("tabindex", 0);
this.$zoomOutButton.attr("title", this.content.zoomOut);
this.$zoomOutButton.attr("aria-label", this.content.zoomOut);
this.$zoomOutButton.addClass("zoomOut viewportNavButton");
this.onAccessibleClick(this.$zoomOutButton, function () {
if (_this.viewer.viewport.getZoom() > _this.viewer.viewport.getMinZoom())
_this.zoomOut();
});
$oldGoHome = this.$viewer.find('div[title="Go home"]');
this.$goHomeButton = $("<button />").append($oldGoHome.contents());
this.$goHomeButton.insertAfter($oldGoHome);
$oldGoHome.remove();
this.$goHomeButton.attr("tabindex", 0);
this.$goHomeButton.attr("title", this.content.goHome);
this.$goHomeButton.attr("aria-label", this.content.goHome);
this.$goHomeButton.addClass("goHome viewportNavButton");
this.onAccessibleClick(this.$goHomeButton, function () {
_this.goHome();
});
$oldRotate = this.$viewer.find('div[title="Rotate right"]');
this.$rotateButton = $("<button />").append($oldRotate.contents());
this.$rotateButton.insertAfter($oldRotate);
$oldRotate.remove();
this.$rotateButton.attr("tabindex", 0);
this.$rotateButton.attr("title", this.content.rotateRight);
this.$rotateButton.attr("aria-label", this.content.rotateRight);
this.$rotateButton.addClass("rotate viewportNavButton");
this.onAccessibleClick(this.$rotateButton, function () {
_this.rotateRight();
});
if (this.showAdjustImageButton) {
this.$adjustImageButton = this.$rotateButton.clone();
this.$adjustImageButton.attr("title", this.content.adjustImage);
this.$adjustImageButton.attr("aria-label", this.content.adjustImage);
this.$adjustImageButton.switchClass("rotate", "adjustImage");
this.$adjustImageButton.attr("tabindex", 0);
this.$adjustImageButton.onPressed(function () {
_this.extensionHost.publish(IIIFEvents_1.IIIFEvents.SHOW_ADJUSTIMAGE_DIALOGUE);
});
this.$adjustImageButton.insertAfter(this.$rotateButton);
this.onAccessibleClick(this.$adjustImageButton, function () {
_this.extensionHost.publish(IIIFEvents_1.IIIFEvents.SHOW_ADJUSTIMAGE_DIALOGUE);
});
}
this.$zoomInButton
.add(this.$zoomOutButton)
.add(this.$goHomeButton)
.add(this.$rotateButton)
.add(this.$adjustImageButton)
.on("focus", function () {
if (_this.controlsVisible)
return;
_this.controlsVisible = true;
_this.viewer.setControlsEnabled(true);
});
this.$zoomInButton.add(this.$adjustImageButton).on("blur", function () {
if (!_this.controlsVisible)
return;
_this.controlsVisible = false;
_this.viewer.setControlsEnabled(false);
});
this.$viewportNavButtonsContainer = this.$viewer.find(".openseadragon-container > div:not(.openseadragon-canvas):first");
//this.$viewportNavButtonsContainer.addClass("viewportControls");
this.$viewportNavButtons =
this.$viewportNavButtonsContainer.find(".viewportNavButton");
this.$canvas = $(this.viewer.canvas);
this.$canvas.attr("role", "application");
this.$canvas.attr("aria-label", this.content.mediaViewer);
settings = this.extension.getSettings();
if (((_a = this.extension.data.config) === null || _a === void 0 ? void 0 : _a.options.saveUserSettings) &&
settings.rememberSettings) {
contrastPercent = settings.contrastPercent;
brightnessPercent = settings.brightnessPercent;
saturationPercent = settings.saturationPercent;
this.$canvas[0].children[0].style.filter =
"contrast(".concat(contrastPercent, "%) brightness(").concat(brightnessPercent, "%) saturate(").concat(saturationPercent, "%)");
}
// disable right click on canvas
this.$canvas.on("contextmenu", function () {
return false;
});
this.$navigator = this.$viewer.find(".navigator");
this.setNavigatorVisible();
// events
this.$element.on("mousemove", function () {
if (_this.controlsVisible)
return;
_this.controlsVisible = true;
_this.viewer.setControlsEnabled(true);
});
this.$element.on("mouseleave", function () {
if (!_this.controlsVisible)
return;
_this.controlsVisible = false;
_this.viewer.setControlsEnabled(false);
});
// when mouse move stopped
this.$element.on(
//@ts-ignore
"mousemove", function () {
// if over element, hide controls.
// When over prev/next buttons keep controls enabled
if (_this.$prevButton.ismouseover()) {
return;
}
if (_this.$nextButton.ismouseover()) {
return;
}
if (!_this.$viewer.find(".navigator").ismouseover()) {
if (!_this.controlsVisible)
return;
_this.controlsVisible = false;
_this.viewer.setControlsEnabled(false);
}
}, this.config.options.controlsFadeAfterInactive);
this.viewer.addHandler("tile-drawn", function () {
_this.$spinner.hide();
});
//this.viewer.addHandler("open-failed", () => {
//});
this.viewer.addHandler("resize", function (viewer) {
_this.extensionHost.publish(Events_1.OpenSeadragonExtensionEvents.OPENSEADRAGON_RESIZE, viewer);
_this.viewerResize(viewer);
});
this.viewer.addHandler("animation-start", function (viewer) {
_this.extensionHost.publish(Events_1.OpenSeadragonExtensionEvents.OPENSEADRAGON_ANIMATION_START, viewer);
});
this.viewer.addHandler("animation", function (viewer) {
_this.extensionHost.publish(Events_1.OpenSeadragonExtensionEvents.OPENSEADRAGON_ANIMATION, viewer);
});
this.viewer.addHandler("animation-finish", function (viewer) {
_this.currentBounds = _this.getViewportBounds();
_this.updateVisibleAnnotationRects();
_this.extensionHost.publish(Events_1.OpenSeadragonExtensionEvents.OPENSEADRAGON_ANIMATION_FINISH, viewer);
});
this.viewer.addHandler("rotate", function (args) {
// console.log("rotate");
_this.extensionHost.publish(Events_1.OpenSeadragonExtensionEvents.OPENSEADRAGON_ROTATION, args.degrees);
});
this.title = this.extension.helper.getLabel();
this.createNavigationButtons();
this.hidePrevButton();
this.hideNextButton();
this.isCreated = true;
return [2 /*return*/];
});
});
};
OpenSeadragonCenterPanel.prototype.createNavigationButtons = function () {
var _this = this;
var viewingDirection = this.extension.helper.getViewingDirection() ||
vocabulary_1.ViewingDirection.LEFT_TO_RIGHT;
this.$prevButton = $("<button class=\"btn btn-default paging prev\" title=\"".concat(this.content.previousImage, "\">\n <i class=\"uv-icon-prev\" aria-hidden=\"true\"></i>\n <span class=\"sr-only\">").concat(this.content.previousImage, "</span>\n </button>"));
if (this.extension.helper.isRightToLeft()) {
this.$prevButton
.prop("title", this.content.nextImage)
.attr("aria-label", this.content.nextImage);
}
else {
this.$prevButton
.prop("title", this.content.previousImage)
.attr("aria-label", this.content.previousImage);
}
this.$nextButton = $("<button class=\"btn btn-default paging next\" title=\"".concat(this.content.nextImage, "\">\n <i class=\"uv-icon-next\" aria-hidden=\"true\"></i>\n <span class=\"sr-only\">").concat(this.content.nextImage, "</span>\n </button>"));
if (this.extension.helper.isRightToLeft()) {
this.$nextButton
.prop("title", this.content.previousImage)
.attr("aria-label", this.content.previousImage);
}
else {
this.$nextButton
.prop("title", this.content.nextImage)
.attr("aria-label", this.content.nextImage);
}
this.viewer.addControl(this.$prevButton[0], {
anchor: openseadragon_1.default.ControlAnchor.TOP_LEFT,
});
this.viewer.addControl(this.$nextButton[0], {
anchor: openseadragon_1.default.ControlAnchor.TOP_RIGHT,
});
switch (viewingDirection) {
case vocabulary_1.ViewingDirection.BOTTOM_TO_TOP:
case vocabulary_1.ViewingDirection.TOP_TO_BOTTOM:
this.$prevButton.addClass("vertical");
this.$nextButton.addClass("vertical");
break;
}
var that = this;
this.onAccessibleClick(this.$prevButton, function (e) {
e.preventDefault();
openseadragon_1.default.cancelEvent(e);
if (!that.prevButtonEnabled)
return;
switch (viewingDirection) {
case vocabulary_1.ViewingDirection.LEFT_TO_RIGHT:
case vocabulary_1.ViewingDirection.BOTTOM_TO_TOP:
case vocabulary_1.ViewingDirection.TOP_TO_BOTTOM:
_this.extensionHost.publish(IIIFEvents_1.IIIFEvents.PREV);
break;
case vocabulary_1.ViewingDirection.RIGHT_TO_LEFT:
_this.extensionHost.publish(IIIFEvents_1.IIIFEvents.NEXT);
break;
}
});
this.onAccessibleClick(this.$nextButton, function (e) {
e.preventDefault();
openseadragon_1.default.cancelEvent(e);
if (!that.nextButtonEnabled)
return;
switch (viewingDirection) {
case vocabulary_1.ViewingDirection.LEFT_TO_RIGHT:
case vocabulary_1.ViewingDirection.BOTTOM_TO_TOP:
case vocabulary_1.ViewingDirection.TOP_TO_BOTTOM:
_this.extensionHost.publish(IIIFEvents_1.IIIFEvents.NEXT);
break;
case vocabulary_1.ViewingDirection.RIGHT_TO_LEFT:
_this.extensionHost.publish(IIIFEvents_1.IIIFEvents.PREV);
break;
}
});
// When Prev/Next buttons are focused, make sure the controls are enabled
this.$prevButton.add(this.$nextButton).on("focus", function () {
if (_this.controlsVisible)
return;
_this.controlsVisible = true;
_this.viewer.setControlsEnabled(true);
});
this.$prevButton.add(this.$nextButton).on("blur", function () {
if (!_this.controlsVisible)
return;
_this.controlsVisible = false;
_this.viewer.setControlsEnabled(false);
});
};
OpenSeadragonCenterPanel.prototype.getGirderTileSource = function () {
return __awaiter(this, void 0, void 0, function () {
var _this = this;
return __generator(this, function (_a) {
return [2 /*return*/, new Promise(function (resolve) {
var canvas = _this.extension.helper.getCurrentCanvas();
var annotations = canvas.getContent();
if (annotations.length) {
var annotation = annotations[0];
var body = annotation.getBody();
if (body.length) {
var services = body[0].getServices();
if (services.length) {
var id = services[0].id;
var tileDescriptor_1 = id;
if (!tileDescriptor_1.endsWith("/")) {
tileDescriptor_1 += "/";
}
tileDescriptor_1 += "tiles";
if (id.endsWith("/")) {
id = id.substr(0, id.length - 1);
}
fetch(tileDescriptor_1)
.then(function (response) { return response.json(); })
.then(function (info) {
var tileSource = {
height: info.sizeY,
width: info.sizeX,
tileWidth: info.tileWidth,
tileHeight: info.tileHeight,
minLevel: 0,
maxLevel: info.levels - 1,
units: "mm",
spacing: [info.mm_x, info.mm_y],
getTileUrl: function (level, x, y, query) {
var url = tileDescriptor_1 + "/zxy/" + level + "/" + x + "/" + y;
if (query) {
url += "?" + $.param(query);
}
return url;
},
};
if (!info.mm_x) {
tileSource.units = "pixels";
tileSource.spacing = [1, 1];
}
resolve(tileSource);
});
}
}
}
})];
});
});
};
OpenSeadragonCenterPanel.prototype.openMedia = function (resources) {
return __awaiter(this, void 0, void 0, function () {
var images, isGirder, i, data, tileSource, _a;
var _this = this;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
// uv may have been unloaded
if (!this.viewer) {
return [2 /*return*/];
}
this.$spinner.show();
this.items = [];
return [4 /*yield*/, this.extension.getExternalResources(resources)];
case 1:
images = _b.sent();
isGirder = this.extension.format === dist_commonjs_1.MediaType.GIRDER;
_b.label = 2;
case 2:
_b.trys.push([2, 10, , 11]);
this.viewer.close();
images = this.getPagePositions(images);
i = 0;
_b.label = 3;
case 3:
if (!(i < images.length)) return [3 /*break*/, 9];
data = images[i];
tileSource = void 0;
if (!data.hasServiceDescriptor) return [3 /*break*/, 4];
// use the info.json descriptor
tileSource = data;
return [3 /*break*/, 7];
case 4:
if (!isGirder) return [3 /*break*/, 6];
return [4 /*yield*/, this.getGirderTileSource()];
case 5:
// load girder image
tileSource = _b.sent();
return [3 /*break*/, 7];
case 6:
// load image without tiling
tileSource = {
type: "image",
url: data.id,
buildPyramid: false,
};
_b.label = 7;
case 7:
this.viewer.addTiledImage({
tileSource: tileSource,
x: data.x,
y: data.y,
width: data.width,
success: function (item) {
_this.items.push(item);
if (_this.items.length === images.length) {
_this.openPagesHandler();
}
_this.resize();
_this.goHome();
},
});
_b.label = 8;
case 8:
i++;
return [3 /*break*/, 3];
case 9: return [3 /*break*/, 11];
case 10:
_a = _b.sent();
return [3 /*break*/, 11];
case 11: return [2 /*return*/];
}
});
});
};
OpenSeadragonCenterPanel.prototype.getPagePositions = function (resources) {
var leftPage;
var rightPage;
var topPage;
var bottomPage;
var page;
var nextPage;
// if there's more than one image, determine alignment strategy
if (resources.length > 1) {
if (resources.length === 2) {
// recto verso
if (this.extension.helper.isVerticallyAligned()) {
// vertical alignment
topPage = resources[0];
topPage.y = 0;
bottomPage = resources[1];
bottomPage.y = topPage.height + this.config.options.pageGap;
}
else {
// horizontal alignment
leftPage = resources[0];
leftPage.x = 0;
rightPage = resources[1];
rightPage.x = leftPage.width + this.config.options.pageGap;
}
}
else {
// scroll
if (this.extension.helper.isVerticallyAligned()) {
// vertical alignment
if (this.extension.helper.isTopToBottom()) {
// top to bottom
for (var i = 0; i < resources.length - 1; i++) {
page = resources[i];
nextPage = resources[i + 1];
nextPage.y = (page.y || 0) + page.height;
}
}
else {
// bottom to top
for (var i = resources.length; i > 0; i--) {
page = resources[i];
nextPage = resources[i - 1];
nextPage.y = (page.y || 0) - page.height;
}
}
}
else {
// horizontal alignment
if (this.extension.helper.isLeftToRight()) {
// left to right
for (var i = 0; i < resources.length - 1; i++) {
page = resources[i];
nextPage = resources[i + 1];
nextPage.x = (page.x || 0) + page.width;
}
}
else {
// right to left
for (var i = resources.length - 1; i > 0; i--) {
page = resources[i];
nextPage = resources[i - 1];
nextPage.x = (page.x || 0) - page.width;
}
}
}
}
}
return resources;
};
OpenSeadragonCenterPanel.prototype.openPagesHandler = function () {
var _this = this;
this.extensionHost.publish(Events_1.OpenSeadragonExtensionEvents.OPENSEADRAGON_OPEN);
if (this.extension.helper.isMultiCanvas() &&
!this.extension.helper.isContinuous()) {
this.showPrevButton();
this.showNextButton();
$(".navigator").addClass("extraMargin");
var viewingDirection = this.extension.helper.getViewingDirection() ||
vocabulary_1.ViewingDirection.LEFT_TO_RIGHT;
if (viewingDirection === vocabulary_1.ViewingDirection.RIGHT_TO_LEFT) {
if (this.extension.helper.isFirstCanvas()) {
this.disableNextButton();
}
else {
this.enableNextButton();
}
if (this.extension.helper.isLastCanvas()) {
this.disablePrevButton();
}
else {
this.enablePrevButton();
}
}
else {
if (this.extension.helper.isFirstCanvas()) {
this.disablePrevButton();
}
else {
this.enablePrevButton();
}
if (this.extension.helper.isLastCanvas()) {
this.disableNextButton();
}
else {
this.enableNextButton();
}
}
}
this.setNavigatorVisible();
// resize navigator for continuous manifests
if (this.extension.helper.isContinuous()) {
setTimeout(function () {
_this.resizeNavigatorForContinuous();
}, 200);
}
this.overlayAnnotations();
this.updateBounds();
// this only happens if prev/next search result were clicked and caused a reload
if (this.navigatedFromSearch) {
this.navigatedFromSearch = false;
this.zoomToInitialAnnotation();
}
this.isFirstLoad = false;
};
OpenSeadragonCenterPanel.prototype.resizeNavigatorForContinuous = function () {
if (!this.viewer || !this.viewer.navigator)
return;
var homeBounds = this.viewer.world.getHomeBounds();
var contentAspectRatio = homeBounds.width / homeBounds.height;
var viewportWidth = this.$viewer.width();
var viewportHeight = this.$viewer.height();
var maxNavigatorWidth = 100;
var maxNavigatorHeight = 100;
var minVerticalNavigatorWidth = 60;
var minHorizontalNavigatorHeight = 40;
var navigatorWidth;
var navigatorHeight;
if (this.extension.helper.isVerticallyAligned()) {
navigatorHeight = viewportHeight - this.$zoomInButton.height() - 4;
navigatorWidth = navigatorHeight * contentAspectRatio;
// Enforce max width
if (navigatorWidth > maxNavigatorWidth) {
navigatorWidth = maxNavigatorWidth;
}
// Enforce min width
if (navigatorWidth < minVerticalNavigatorWidth) {
navigatorWidth = minVerticalNavigatorWidth;
}
}
else {
navigatorWidth = viewportWidth;
navigatorHeight = navigatorWidth / contentAspectRatio;
// Enforce max height
if (navigatorHeight > maxNavigatorHeight) {
navigatorHeight = maxNavigatorHeight;
}
// Enforce min height
if (navigatorHeight < minHorizontalNavigatorHeight) {
navigatorHeight = minHorizontalNavigatorHeight;
}
}
var navigatorElement = this.viewer.navigator.element;
navigatorElement.style.width = "".concat(navigatorWidth, "px");
navigatorElement.style.height = "".concat(navigatorHeight, "px");
this.viewer.navigator.viewport.fitBounds(homeBounds, true);
this.viewer.navigator.updateSize();
};
OpenSeadragonCenterPanel.prototype.zoomToInitialAnnotation = function () {
var annotationRect = this.getInitialAnnotationRect();
this.extension.previousAnnotationRect = null;
this.extension.currentAnnotationRect = null;
if (annotationRect && this.isZoomToSearchResultEnabled()) {
this.zoomToAnnotation(annotationRect);
}
};
OpenSeadragonCenterPanel.prototype.overlayAnnotations = function () {
var _this = this;
var annotations = this.getAnnotationsForCurrentImages();
// clear existing annotations
this.clearAnnotations();
for (var i = 0; i < annotations.length; i++) {
var annotation = annotations[i];
var rects = this.getAnnotationOverlayRects(annotation);
var _loop_1 = function (k) {
var rect = rects[k];
var div = document.createElement("DIV");
div.id = "annotation-" + rect.canvasIndex + "-" + rect.resultIndex;
div.title = (0, Utils_2.sanitize)(rect.chars);
// if it's a pin
if (rect.width === 1 && rect.height === 1) {
div.className = "annotationPin";
div.onclick = function (e) {
e.preventDefault();
_this.extensionHost.publish(IIIFEvents_1.IIIFEvents.PINPOINT_ANNOTATION_CLICKED, k);
};
var span = document.createElement("SPAN");
span.innerText = String(k + 1);
div.appendChild(span);
}
else {
// it's a rect
div.className = "annotationRect";
}
this_1.viewer.addOverlay(div, rect);
};
var this_1 = this;
for (var k = 0; k < rects.length; k++) {
_loop_1(k);
}
}
if (annotations.length && this.shouldZoomToInitialAnnotation()) {
this.zoomToInitialAnnotation();
}
};
OpenSeadragonCenterPanel.prototype.updateBounds = function () {
var settings = this.extension.getSettings();
// if this is the first load and there are initial bounds, fit to those.
if (this.isFirstLoad) {
this.initialRotation = (this.extension.data).rotation;
if (this.initialRotation) {
this.viewer.viewport.setRotation(parseInt(this.initialRotation));
}
var xywh = this.extension.data.xywh;
if (xywh) {
this.initialBounds = XYWHFragment_1.XYWHFragment.fromString(xywh);
this.currentBounds = this.initialBounds;
this.fitToBounds(this.currentBounds);
}
}
else if (settings.preserveViewport && this.currentBounds) {
// if this isn't the first load and preserveViewport is enabled, fit to the current bounds.
this.fitToBounds(this.currentBounds);
}
else {
this.goHome();
}
};
OpenSeadragonCenterPanel.prototype.goHome = function () {
this.viewer.viewport.goHome(true);
};
OpenSeadragonCenterPanel.prototype.disablePrevButton = function () {
this.prevButtonEnabled = false;
this.$prevButton.addClass("disabled");
};
OpenSeadragonCenterPanel.prototype.enablePrevButton = function () {
this.prevButtonEnabled = true;
this.$prevButton.removeClass("disabled");
};
OpenSeadragonCenterPanel.prototype.hidePrevButton = function () {
this.disablePrevButton();
this.$prevButton.hide();
};
OpenSeadragonCenterPanel.prototype.showPrevButton = function () {
this.enablePrevButton();
this.$prevButton.show();
};
OpenSeadragonCenterPanel.prototype.disableNextButton = function () {
this.nextButtonEnabled = false;
this.$nextButton.addClass("disabled");
};
OpenSeadragonCenterPanel.prototype.enableNextButton = function () {
this.nextButtonEnabled = true;
this.$nextButton.removeClass("disabled");
};
OpenSeadragonCenterPanel.prototype.hideNextButton = function () {
this.disableNextButton();
this.$nextButton.hide();
};
OpenSeadragonCenterPanel.prototype.showNextButton = function () {
this.enableNextButton();
this.$nextButton.show();
};
OpenSeadragonCenterPanel.prototype.fitToBounds = function (bounds, immediate) {
var _this = this;
if (immediate === void 0) { immediate = true; }
var rect = new openseadragon_1.default.Rect();
rect.x = Number(bounds.x);
rect.y = Number(bounds.y);
rect.width = Number(bounds.w);
rect.height = Number(bounds.h);
setTimeout(function () {
_this.viewer.viewport.fitBoundsWithConstraints(rect, immediate);
}, 100);
};
OpenSeadragonCenterPanel.prototype.getCroppedImageBounds = function () {
if (!this.viewer || !this.viewer.viewport)
return null;
var canvas = this.extension.helper.getCurrentCanvas();
var dimensions = this.extension.getCroppedImageDimensions(canvas, this.viewer);
if (dimensions) {
var bounds = new XYWHFragment_1.XYWHFragment(dimensions.regionPos.x, dimensions.regionPos.y, dimensions.region.width, dimensions.region.height);
return bounds.toString();
}
return null;
};
OpenSeadragonCenterPanel.prototype.getViewportBounds = function () {
if (!this.viewer || !this.viewer.viewport)
return null;
var b = this.viewer.viewport.getBounds(true);
var bounds = new XYWHFragment_1.XYWHFragment(Math.floor(b.x), Math.floor(b.y), Math.floor(b.width), Math.floor(b.height));
return bounds;
};
OpenSeadragonCenterPanel.prototype.viewerResize = function (viewer) {
if (!viewer.viewport)
return;
var center = viewer.viewport.getCenter(true);
if (!center)
return;
// postpone pan for a millisecond - fixes iPad image stretching/squashing issue.
setTimeout(function () {
viewer.viewport.panTo(center, true);
}, 1);
};
OpenSeadragonCenterPanel.prototype.clearAnnotations = function () {
this.viewer.clearOverlays();
};
OpenSeadragonCenterPanel.prototype.getAnnotationsForCurrentImages = function () {