@triabin/vue-book-reader
Version:
Forked from jinhuan138/vue-book-reader, add some features
431 lines (430 loc) • 15.6 kB
JavaScript
(function() {
if (typeof document > "u" || "adoptedStyleSheets" in document)
return;
var m = "ShadyCSS" in window && !ShadyCSS.nativeShadow, n = document.implementation.createHTMLDocument(""), r = /* @__PURE__ */ new WeakMap(), i = typeof DOMException == "object" ? Error : DOMException, o = Object.defineProperty, h = Array.prototype.forEach, c = /.+?;?$/gm;
function l(t) {
var e = t.replace(c, "");
return e !== t && console.warn("@import rules are not allowed here. See https://github.com/WICG/construct-stylesheets/issues/119#issuecomment-588352418"), e.trim();
}
function a(t) {
return "isConnected" in t ? t.isConnected : document.contains(t);
}
function u(t) {
return t.filter(function(e, s) {
return t.indexOf(e) === s;
});
}
function f(t, e) {
return t.filter(function(s) {
return e.indexOf(s) === -1;
});
}
function d(t) {
t.parentNode.removeChild(t);
}
function w(t) {
return t.shadowRoot || r.get(t);
}
var C = [
"addRule",
"deleteRule",
"insertRule",
"removeRule"
], A = CSSStyleSheet, v = A.prototype;
v.replace = function() {
return Promise.reject(new i("Can't call replace on non-constructed CSSStyleSheets."));
}, v.replaceSync = function() {
throw new i("Failed to execute 'replaceSync' on 'CSSStyleSheet': Can't call replaceSync on non-constructed CSSStyleSheets.");
};
function E(t) {
return typeof t == "object" ? k.isPrototypeOf(t) || v.isPrototypeOf(t) : !1;
}
function D(t) {
return typeof t == "object" ? v.isPrototypeOf(t) : !1;
}
var S = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap();
function J(t, e) {
var s = document.createElement("style");
return T.get(t).set(e, s), b.get(t).push(e), s;
}
function x(t, e) {
return T.get(t).get(e);
}
function U(t, e) {
T.get(t).delete(e), b.set(t, b.get(t).filter(function(s) {
return s !== e;
}));
}
function q(t, e) {
requestAnimationFrame(function() {
e.textContent = S.get(t).textContent, F.get(t).forEach(function(s) {
return e.sheet[s.method].apply(e.sheet, s.args);
});
});
}
function O(t) {
if (!S.has(t))
throw new TypeError("Illegal invocation");
}
function P() {
var t = this, e = document.createElement("style");
n.body.appendChild(e), S.set(t, e), b.set(t, []), T.set(t, /* @__PURE__ */ new WeakMap()), F.set(t, []);
}
var k = P.prototype;
k.replace = function(e) {
try {
return this.replaceSync(e), Promise.resolve(this);
} catch (s) {
return Promise.reject(s);
}
}, k.replaceSync = function(e) {
if (O(this), typeof e == "string") {
var s = this;
S.get(s).textContent = l(e), F.set(s, []), b.get(s).forEach(function(g) {
g.isConnected() && q(s, x(s, g));
});
}
}, o(k, "cssRules", {
configurable: !0,
enumerable: !0,
get: function() {
return O(this), S.get(this).sheet.cssRules;
}
}), o(k, "media", {
configurable: !0,
enumerable: !0,
get: function() {
return O(this), S.get(this).sheet.media;
}
}), C.forEach(function(t) {
k[t] = function() {
var e = this;
O(e);
var s = arguments;
F.get(e).push({ method: t, args: s }), b.get(e).forEach(function(y) {
if (y.isConnected()) {
var p = x(e, y).sheet;
p[t].apply(p, s);
}
});
var g = S.get(e).sheet;
return g[t].apply(g, s);
};
}), o(P, Symbol.hasInstance, {
configurable: !0,
value: E
});
var B = {
childList: !0,
subtree: !0
}, H = /* @__PURE__ */ new WeakMap();
function M(t) {
var e = H.get(t);
return e || (e = new Z(t), H.set(t, e)), e;
}
function z(t) {
o(t.prototype, "adoptedStyleSheets", {
configurable: !0,
enumerable: !0,
get: function() {
return M(this).sheets;
},
set: function(e) {
M(this).update(e);
}
});
}
function j(t, e) {
for (var s = document.createNodeIterator(
t,
NodeFilter.SHOW_ELEMENT,
function(y) {
return w(y) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
},
null,
!1
), g = void 0; g = s.nextNode(); )
e(w(g));
}
var N = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap();
function K(t, e) {
return e instanceof HTMLStyleElement && L.get(t).some(function(s) {
return x(s, t);
});
}
function V(t) {
var e = N.get(t);
return e instanceof Document ? e.body : e;
}
function I(t) {
var e = document.createDocumentFragment(), s = L.get(t), g = W.get(t), y = V(t);
g.disconnect(), s.forEach(function(p) {
e.appendChild(x(p, t) || J(p, t));
}), y.insertBefore(e, null), g.observe(y, B), s.forEach(function(p) {
q(p, x(p, t));
});
}
function Z(t) {
var e = this;
e.sheets = [], N.set(e, t), L.set(e, []), W.set(e, new MutationObserver(function(s, g) {
if (!document) {
g.disconnect();
return;
}
s.forEach(function(y) {
m || h.call(y.addedNodes, function(p) {
p instanceof Element && j(p, function(R) {
M(R).connect();
});
}), h.call(y.removedNodes, function(p) {
p instanceof Element && (K(e, p) && I(e), m || j(p, function(R) {
M(R).disconnect();
}));
});
});
}));
}
if (Z.prototype = {
isConnected: function() {
var t = N.get(this);
return t instanceof Document ? t.readyState !== "loading" : a(t.host);
},
connect: function() {
var t = V(this);
W.get(this).observe(t, B), L.get(this).length > 0 && I(this), j(t, function(e) {
M(e).connect();
});
},
disconnect: function() {
W.get(this).disconnect();
},
update: function(t) {
var e = this, s = N.get(e) === document ? "Document" : "ShadowRoot";
if (!Array.isArray(t))
throw new TypeError("Failed to set the 'adoptedStyleSheets' property on " + s + ": Iterator getter is not callable.");
if (!t.every(E))
throw new TypeError("Failed to set the 'adoptedStyleSheets' property on " + s + ": Failed to convert value to 'CSSStyleSheet'");
if (t.some(D))
throw new TypeError("Failed to set the 'adoptedStyleSheets' property on " + s + ": Can't adopt non-constructed stylesheets");
e.sheets = t;
var g = L.get(e), y = u(t), p = f(g, y);
p.forEach(function(R) {
d(x(R, e)), U(R, e);
}), L.set(e, y), e.isConnected() && y.length > 0 && I(e);
}
}, window.CSSStyleSheet = P, z(Document), "ShadowRoot" in window) {
z(ShadowRoot);
var _ = Element.prototype, Q = _.attachShadow;
_.attachShadow = function(e) {
var s = Q.call(this, e);
return e.mode === "closed" && r.set(this, s), s;
};
}
var $ = M(document);
$.isConnected() ? $.connect() : document.addEventListener("DOMContentLoaded", $.connect.bind($));
})();
const G = (m) => {
var n, r;
return (r = (n = m == null ? void 0 : m.split(/[,;\s]/)) == null ? void 0 : n.filter((i) => i)) == null ? void 0 : r.map((i) => i.split("=").map((o) => o.trim()));
}, X = (m, n) => {
var o, h;
if (m.documentElement.localName === "svg") {
const [, , c, l] = ((o = m.documentElement.getAttribute("viewBox")) == null ? void 0 : o.split(/\s/)) ?? [];
return { width: c, height: l };
}
const r = G((h = m.querySelector('meta[name="viewport"]')) == null ? void 0 : h.getAttribute("content"));
if (r) return Object.fromEntries(r);
if (typeof n == "string") return G(n);
if (n) return n;
const i = m.querySelector("img");
return i ? { width: i.naturalWidth, height: i.naturalHeight } : (console.warn(new Error("Missing viewport properties")), { width: 1e3, height: 2e3 });
};
class Y extends HTMLElement {
static observedAttributes = ["zoom"];
#c = this.attachShadow({ mode: "closed" });
#u = new ResizeObserver(() => this.#a());
#r;
#i = -1;
defaultViewport;
spread;
#h = !1;
#e;
#n;
#t;
#o;
#s;
constructor() {
super();
const n = new CSSStyleSheet();
this.#c.adoptedStyleSheets = [n], n.replaceSync(`:host {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
}`), this.#u.observe(this);
}
attributeChangedCallback(n, r, i) {
switch (n) {
case "zoom":
this.#s = i !== "fit-width" && i !== "fit-page" ? parseFloat(i) : i, this.#a();
break;
}
}
async #l({ index: n, src: r }) {
const i = typeof r == "string", o = i ? r : r == null ? void 0 : r.src, h = i ? null : r == null ? void 0 : r.onZoom, c = document.createElement("div"), l = document.createElement("iframe");
return c.append(l), Object.assign(l.style, {
border: "0",
display: "none",
overflow: "hidden"
}), l.setAttribute("sandbox", "allow-same-origin allow-scripts"), l.setAttribute("scrolling", "no"), l.setAttribute("part", "filter"), this.#c.append(c), o ? new Promise((a) => {
l.addEventListener("load", () => {
const u = l.contentDocument;
this.dispatchEvent(new CustomEvent("load", { detail: { doc: u, index: n } }));
const { width: f, height: d } = X(u, this.defaultViewport);
a({
element: c,
iframe: l,
width: parseFloat(f),
height: parseFloat(d),
onZoom: h
});
}, { once: !0 }), l.src = o;
}) : { blank: !0, element: c, iframe: l };
}
#a(n = this.#o) {
if (!n) return;
const r = this.#e ?? {}, i = this.#t ?? this.#n, o = n === "left" ? r : i, { width: h, height: c } = this.getBoundingClientRect(), l = this.spread !== "both" && this.spread !== "portrait" && c > h;
this.#h = l;
const a = r.width ?? i.width, u = r.height ?? i.height, f = typeof this.#s == "number" && !isNaN(this.#s) ? this.#s : this.#s === "fit-width" ? l || this.#t ? h / (o.width ?? a) : h / ((r.width ?? a) + (i.width ?? a)) : l || this.#t ? Math.min(
h / (o.width ?? a),
c / (o.height ?? u)
) : Math.min(
h / ((r.width ?? a) + (i.width ?? a)),
c / Math.max(
r.height ?? u,
i.height ?? u
)
), d = (w) => {
let { element: C, iframe: A, width: v, height: E, blank: D, onZoom: S } = w;
S && S({ doc: w.iframe.contentDocument, scale: f });
const b = S ? f : 1;
Object.assign(A.style, {
width: `${v * b}px`,
height: `${E * b}px`,
transform: S ? "none" : `scale(${f})`,
transformOrigin: "top left",
display: D ? "none" : "block"
}), Object.assign(C.style, {
width: `${(v ?? a) * f}px`,
height: `${(E ?? u) * f}px`,
overflow: "hidden",
display: "block",
flexShrink: "0",
marginBlock: "auto"
}), l && w !== o && (C.style.display = "none");
};
this.#t ? d(this.#t) : (d(r), d(i));
}
async #f({ left: n, right: r, center: i, side: o }) {
this.#c.replaceChildren(), this.#e = null, this.#n = null, this.#t = null, i ? (this.#t = await this.#l(i), this.#o = "center", this.#a()) : (this.#e = await this.#l(n), this.#n = await this.#l(r), this.#o = this.#e.blank ? "right" : this.#n.blank ? "left" : o, this.#a());
}
#p() {
var n, r, i, o;
if (!(this.#t || (n = this.#e) != null && n.blank) && this.#h && ((o = (i = (r = this.#e) == null ? void 0 : r.element) == null ? void 0 : i.style) == null ? void 0 : o.display) === "none")
return this.#n.element.style.display = "none", this.#e.element.style.display = "block", this.#o = "left", !0;
}
#g() {
var n, r, i, o;
if (!(this.#t || (n = this.#n) != null && n.blank) && this.#h && ((o = (i = (r = this.#n) == null ? void 0 : r.element) == null ? void 0 : i.style) == null ? void 0 : o.display) === "none")
return this.#e.element.style.display = "none", this.#n.element.style.display = "block", this.#o = "right", !0;
}
open(n) {
this.book = n;
const { rendition: r } = n;
this.spread = r == null ? void 0 : r.spread, this.defaultViewport = r == null ? void 0 : r.viewport;
const i = n.dir === "rtl", o = !i;
this.rtl = i, (r == null ? void 0 : r.spread) === "none" ? this.#r = n.sections.map((h) => ({ center: h })) : this.#r = n.sections.reduce((h, c, l) => {
const a = h[h.length - 1], { pageSpread: u } = c, f = () => {
const d = {};
return h.push(d), d;
};
if (u === "center") {
const d = a.left || a.right ? f() : a;
d.center = c;
} else if (u === "left") {
const d = a.center || a.left || o && l ? f() : a;
d.left = c;
} else if (u === "right") {
const d = a.center || a.right || i && l ? f() : a;
d.right = c;
} else o ? a.center || a.right ? f().left = c : a.left || !l ? a.right = c : a.left = c : a.center || a.left ? f().right = c : a.right || !l ? a.left = c : a.right = c;
return h;
}, [{}]);
}
get index() {
const n = this.#r[this.#i], r = (n == null ? void 0 : n.center) ?? (this.side === "left" ? n.left ?? n.right : n.right ?? n.left);
return this.book.sections.indexOf(r);
}
#d(n) {
this.dispatchEvent(new CustomEvent("relocate", { detail: { reason: n, range: null, index: this.index, fraction: 0, size: 1 } }));
}
getSpreadOf(n) {
const r = this.#r;
for (let i = 0; i < r.length; i++) {
const { left: o, right: h, center: c } = r[i];
if (o === n) return { index: i, side: "left" };
if (h === n) return { index: i, side: "right" };
if (c === n) return { index: i, side: "center" };
}
}
async goToSpread(n, r, i) {
var h, c, l, a, u, f;
if (n < 0 || n > this.#r.length - 1) return;
if (n === this.#i) {
this.#a(r);
return;
}
this.#i = n;
const o = this.#r[n];
if (o.center) {
const d = this.book.sections.indexOf(o.center), w = await ((c = (h = o.center) == null ? void 0 : h.load) == null ? void 0 : c.call(h));
await this.#f({ center: { index: d, src: w } });
} else {
const d = this.book.sections.indexOf(o.left), w = this.book.sections.indexOf(o.right), C = await ((a = (l = o.left) == null ? void 0 : l.load) == null ? void 0 : a.call(l)), A = await ((f = (u = o.right) == null ? void 0 : u.load) == null ? void 0 : f.call(u)), v = { index: d, src: C }, E = { index: w, src: A };
await this.#f({ left: v, right: E, side: r });
}
this.#d(i);
}
async select(n) {
await this.goTo(n);
}
async goTo(n) {
const { book: r } = this, i = await n, o = r.sections[i.index];
if (!o) return;
const { index: h, side: c } = this.getSpreadOf(o);
await this.goToSpread(h, c);
}
async next() {
if (this.rtl ? this.#p() : this.#g()) this.#d("page");
else return this.goToSpread(this.#i + 1, this.rtl ? "right" : "left", "page");
}
async prev() {
if (this.rtl ? this.#g() : this.#p()) this.#d("page");
else return this.goToSpread(this.#i - 1, this.rtl ? "left" : "right", "page");
}
getContents() {
return Array.from(this.#c.querySelectorAll("iframe"), (n) => ({
doc: n.contentDocument
// TODO: index, overlayer
}));
}
destroy() {
this.#u.unobserve(this);
}
}
customElements.define("foliate-fxl", Y);
export {
Y as FixedLayout
};