@tindtechnologies/universalviewer
Version:
The Universal Viewer is a community-developed open source project on a mission to help you share your 📚📜📰📽️📻🗿 with the 🌎
270 lines • 12.5 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 __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.ShareDialogue = void 0;
var $ = window.$;
var Utils_1 = require("../../Utils");
var IIIFEvents_1 = require("../../IIIFEvents");
var Dialogue_1 = require("../uv-shared-module/Dialogue");
var ShareDialogue = /** @class */ (function (_super) {
__extends(ShareDialogue, _super);
function ShareDialogue($element) {
var _this = _super.call(this, $element) || this;
_this.copyToClipboardEnabled = true;
_this.isShareViewVisible = false;
_this.shareManifestsEnabled = false;
_this.isEmbedViewVisible = false;
_this.aspectRatio = 0.75;
_this.maxWidth = 8000;
_this.maxHeight = _this.maxWidth * _this.aspectRatio;
_this.minWidth = 200;
_this.minHeight = _this.minWidth * _this.aspectRatio;
return _this;
}
ShareDialogue.prototype.create = function () {
var _this = this;
var _a;
this.setConfig("shareDialogue");
_super.prototype.create.call(this);
// Accessibility.
this.$element.attr("role", "region");
this.$element.attr("aria-label", this.content.share);
this.openCommand = IIIFEvents_1.IIIFEvents.SHOW_SHARE_DIALOGUE;
this.closeCommand = IIIFEvents_1.IIIFEvents.HIDE_SHARE_DIALOGUE;
this.shareManifestsEnabled = this.options.shareManifestsEnabled || false;
var lastElement;
this.extensionHost.subscribe(this.openCommand, function (triggerButton) {
lastElement = triggerButton;
_this.open(triggerButton);
});
this.extensionHost.subscribe(this.closeCommand, function () {
if (lastElement) {
lastElement.focus();
}
_this.close();
});
this.extensionHost.subscribe(IIIFEvents_1.IIIFEvents.SHOW_EMBED_DIALOGUE, function (triggerButton) {
_this.open(triggerButton);
if (triggerButton && $(triggerButton).is(".embed.btn")) {
// after setTimeout in Dialogue super class
setTimeout(function () {
_this.$embedCode.focus();
}, 2);
}
});
// Title
var $title = $("<div role=\"heading\" class=\"heading\">".concat(this.content.share, "</div>"));
this.$content.append($title);
// Share URL
this.$urlSection = $("<div class=\"share__section\"><label class=\"share__label\" for=\"embedCode\">".concat(this.content.shareLink, "</label></div>"));
var shareUrl = this.getShareUrl();
this.$urlInput = $("<input class=\"copy-input\" id=\"urlInput\" type=\"text\" value=\"".concat(shareUrl, "\" readonly/>"));
this.$urlInput.focus(function () {
$(this).select();
});
this.$urlSection.append(this.$urlInput);
this.$content.append(this.$urlSection);
// Manifest URL
this.$manifestSection = $("<div class=\"share__section\"><label class=\"share__label\" for=\"manifestCode\">".concat(this.content.iiif, "</label></div>"));
var iiifUrl = this.extension.getIIIFShareUrl(this.shareManifestsEnabled);
this.$manifestInput = $("<input class=\"copy-input\" id=\"manifestInput\" type=\"text\" value=\"".concat(iiifUrl, "\" readonly/>"));
this.$manifestInput.focus(function () {
$(this).select();
});
this.$manifestSection.append(this.$manifestInput);
this.$content.append(this.$manifestSection);
// Embed IFRAME code
this.$embedSection = $("<div class=\"share__section\"><label class=\"share__label\" for=\"embedCode\">".concat(this.content.embed, "</label></div>"));
this.$embedCode = $("<input class=\"copy-input\" id=\"embedCode\" type=\"text\" readonly/>");
this.$embedCode.focus(function () {
$(this).select();
});
this.$embedSection.append(this.$embedCode);
this.$content.append(this.$embedSection);
// Embed size customization
this.$customSize = $('<div class="customSize"></div>');
this.$size = $("<label for=\"size\" class=\"size\">".concat(this.content.size, "</label>"));
this.$customSize.append(this.$size);
this.$customSizeDropDown = $("<select class=\"embed-size-select\" id=\"size\" aria-label=\"".concat(this.content.size, "\"></select>"));
this.$customSizeDropDown.append('<option value="small" data-width="560" data-height="420">560 x 420</option>');
this.$customSizeDropDown.append('<option value="medium" data-width="640" data-height="480">640 x 480</option>');
this.$customSizeDropDown.append('<option value="large" data-width="800" data-height="600">800 x 600</option>');
this.$customSizeDropDown.append("<option value=\"custom\">".concat(this.content.customSize, "</option>"));
this.$customSizeDropDown.change(function () {
_this.update();
});
this.$customSize.append(this.$customSizeDropDown);
this.$widthInput = $("<input class=\"width\" type=\"text\" maxlength=\"10\" aria-label=\"".concat(this.content.width, "\"/>"));
this.$widthInput.on("keydown", function (e) {
return Utils_1.Numbers.numericalInput(e);
});
this.$widthInput.change(function () {
_this.updateHeightRatio();
_this.update();
});
this.$customSize.append(this.$widthInput);
this.$embedSection.append(this.$customSize);
// WIDTH x HEIGHT
this.$x = $('<span class="x">x</span>');
this.$customSize.append(this.$x);
this.$heightInput = $("<input class=\"height\" type=\"text\" maxlength=\"10\" aria-label=\"".concat(this.content.height, "\"/>"));
this.$heightInput.on("keydown", function (e) {
return Utils_1.Numbers.numericalInput(e);
});
this.$heightInput.change(function () {
_this.updateWidthRatio();
_this.update();
});
this.$customSize.append(this.$heightInput);
// IIIF Drag and Drop
var $iiifSection = $('<div class="iiif-section"></div>');
this.$iiifButton = $("<a class=\"imageBtn iiif\" href=\"".concat(iiifUrl, "\" title=\"").concat(this.content.iiif, "\" target=\"_blank\"></a>"));
$iiifSection.append(this.$iiifButton);
this.$content.append($iiifSection);
// Terms of Use Link
this.$termsOfUseButton = $("<a href=\"#\">".concat((_a = this.extension.data.config) === null || _a === void 0 ? void 0 : _a.content.termsOfUse, "</a>"));
$iiifSection.append(this.$termsOfUseButton);
// Options
if (this.shareManifestsEnabled) {
this.$manifestSection.show();
}
else {
this.$manifestSection.hide();
}
if (Utils_1.Bools.getBool(this.config.options.embedEnabled, false)) {
this.$embedSection.show();
}
else {
this.$embedSection.hide();
}
// Click Events
this.onAccessibleClick(this.$termsOfUseButton, function () {
_this.extensionHost.publish(IIIFEvents_1.IIIFEvents.SHOW_TERMS_OF_USE);
});
// Copy buttons
if (Utils_1.Bools.getBool(this.config.options.copyToClipboardEnabled, true)) {
this.addCopyButton(this.$urlInput);
this.addCopyButton(this.$embedCode);
this.addCopyButton(this.$manifestInput);
}
this.$element.hide();
this.update();
};
ShareDialogue.prototype.open = function (triggerButton) {
_super.prototype.open.call(this, triggerButton);
this.update();
};
ShareDialogue.prototype.getShareUrl = function () {
return this.extension.getShareUrl();
};
ShareDialogue.prototype.isShareAvailable = function () {
return !!this.getShareUrl();
};
ShareDialogue.prototype.addCopyButton = function ($input) {
var $btn = $("<button class=\"copyBtn\" aria-label=\"".concat(this.content.copyToClipboard, "\">").concat(this.content.copyBtn, "</button>"));
this.onAccessibleClick($btn, function () {
Utils_1.Clipboard.copy($input.val());
$input.focus();
}, true, true);
// sleight of hand
var $copyBtnGroup = $('<div class="copy-group"></div>');
$copyBtnGroup.append($btn);
$copyBtnGroup.insertBefore($input);
$input.insertBefore($btn);
};
ShareDialogue.prototype.update = function () {
if (this.isShareAvailable()) {
this.$urlSection.show();
}
else {
this.$urlSection.hide();
}
var $selected = this.getSelectedSize();
if ($selected.val() === "custom") {
this.$widthInput.show();
this.$x.show();
this.$heightInput.show();
}
else {
this.$widthInput.hide();
this.$x.hide();
this.$heightInput.hide();
this.currentWidth = Number($selected.data("width"));
this.currentHeight = Number($selected.data("height"));
this.$widthInput.val(String(this.currentWidth));
this.$heightInput.val(String(this.currentHeight));
}
this.updateShareOptions();
this.updateTermsOfUseButton();
};
ShareDialogue.prototype.updateShareOptions = function () {
var shareUrl = this.getShareUrl();
if (shareUrl) {
this.$urlInput.val(shareUrl);
}
};
ShareDialogue.prototype.getSelectedSize = function () {
return this.$customSizeDropDown.find(":selected");
};
ShareDialogue.prototype.updateWidthRatio = function () {
this.currentHeight = Number(this.$heightInput.val());
if (this.currentHeight < this.minHeight) {
this.currentHeight = this.minHeight;
this.$heightInput.val(String(this.currentHeight));
}
else if (this.currentHeight > this.maxHeight) {
this.currentHeight = this.maxHeight;
this.$heightInput.val(String(this.currentHeight));
}
this.currentWidth = Math.floor(this.currentHeight / this.aspectRatio);
this.$widthInput.val(String(this.currentWidth));
};
ShareDialogue.prototype.updateHeightRatio = function () {
this.currentWidth = Number(this.$widthInput.val());
if (this.currentWidth < this.minWidth) {
this.currentWidth = this.minWidth;
this.$widthInput.val(String(this.currentWidth));
}
else if (this.currentWidth > this.maxWidth) {
this.currentWidth = this.maxWidth;
this.$widthInput.val(String(this.currentWidth));
}
this.currentHeight = Math.floor(this.currentWidth * this.aspectRatio);
this.$heightInput.val(String(this.currentHeight));
};
ShareDialogue.prototype.updateTermsOfUseButton = function () {
var _a;
var requiredStatement = this.extension.helper.getRequiredStatement();
if (Utils_1.Bools.getBool((_a = this.extension.data.config) === null || _a === void 0 ? void 0 : _a.options.termsOfUseEnabled, true) &&
requiredStatement &&
requiredStatement.value) {
this.$termsOfUseButton.show();
}
else {
this.$termsOfUseButton.hide();
}
};
ShareDialogue.prototype.close = function () {
_super.prototype.close.call(this);
};
ShareDialogue.prototype.resize = function () {
this.setDockedPosition();
};
return ShareDialogue;
}(Dialogue_1.Dialogue));
exports.ShareDialogue = ShareDialogue;
//# sourceMappingURL=ShareDialogue.js.map