Ketan joshi blogger : Books html 7

Text Editor with Copy Button

<!DOCTYPE html>
<html>
<head>
<style>
/*! CSS Used from: https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css */
*,
::after,
::before {
box-sizing: border-box;
}
h2 {
margin-top: 0;
margin-bottom: 0.5rem;
}
button {
border-radius: 0;
}
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
button {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button {
overflow: visible;
}
button {
text-transform: none;
}
[type="button"],
button {
-webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
padding: 0;
border-style: none;
}
h2 {
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
}
h2 {
font-size: 2rem;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.btn {
transition: none;
}
}
.btn:hover {
color: #212529;
text-decoration: none;
}
.btn:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.btn:disabled {
opacity: 0.65;
}
.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}
.btn-primary:focus {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
.btn-primary:disabled {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.btn-secondary {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
.btn-secondary:hover {
color: #fff;
background-color: #5a6268;
border-color: #545b62;
}
.btn-secondary:focus {
color: #fff;
background-color: #5a6268;
border-color: #545b62;
box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}
.btn-secondary:disabled {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
.btn-info {
color: #fff;
background-color: #17a2b8;
border-color: #17a2b8;
}
.btn-info:hover {
color: #fff;
background-color: #138496;
border-color: #117a8b;
}
.btn-info:focus {
color: #fff;
background-color: #138496;
border-color: #117a8b;
box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}
.btn-info:disabled {
color: #fff;
background-color: #17a2b8;
border-color: #17a2b8;
}
.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0.2rem;
}
.btn-group {
position: relative;
display: -ms-inline-flexbox;
display: inline-flex;
vertical-align: middle;
}
.btn-group > .btn {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.btn-group > .btn:hover {
z-index: 1;
}
.btn-group > .btn:active,
.btn-group > .btn:focus {
z-index: 1;
}
.btn-group > .btn:not(:first-child) {
margin-left: -1px;
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.bg-light {
background-color: #f8f9fa !important;
}
.overflow-hidden {
overflow: hidden !important;
}
.mb-2 {
margin-bottom: 0.5rem !important;
}
.mt-3 {
margin-top: 1rem !important;
}
.mb-3 {
margin-bottom: 1rem !important;
}
.pt-3 {
padding-top: 1rem !important;
}
.pb-3 {
padding-bottom: 1rem !important;
}
.text-center {
text-align: center !important;
}
@media print {
*,
::after,
::before {
text-shadow: none !important;
box-shadow: none !important;
}
h2 {
orphans: 3;
widows: 3;
}
h2 {
page-break-after: avoid;
}
.container {
min-width: 992px !important;
}
}
/*! CSS Used from: https://nodlik.github.io/StPageFlip/static/style.css */
.demo-block {
border-top: solid 1px #dcdcdc;
border-bottom: solid 1px #dcdcdc;
}
.flip-book {
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
margin: 0 auto;
display: none;
}
.page {
padding: 20px;
background-color: #fdfaf7;
color: #785e3a;
border: solid 1px #c2b5a3;
overflow: hidden;
}
.page .page-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
}
.page .page-content .page-header {
height: 30px;
font-size: 100%;
text-transform: uppercase;
text-align: center;
}
.page .page-content .page-image {
height: 100%;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
.page .page-content .page-text {
height: 100%;
flex-grow: 1;
font-size: 80%;
text-align: justify;
margin-top: 10px;
padding-top: 10px;
box-sizing: border-box;
border-top: solid 1px #f4e8d7;
}
.page .page-content .page-footer {
height: 30px;
border-top: solid 1px #f4e8d7;
font-size: 80%;
color: #998466;
}
.page.--left {
border-right: 0;
box-shadow: inset -7px 0 30px -7px rgba(0, 0, 0, 0.4);
}
.page.--right {
border-left: 0;
box-shadow: inset 7px 0 30px -7px rgba(0, 0, 0, 0.4);
}
.page.--right .page-footer {
text-align: right;
}
/*! CSS Used from: Embedded */
.stf__wrapper {
position: relative;
display: block;
box-sizing: border-box;
transform: translateZ(0);
}
.stf__wrapper canvas {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.stf__block {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.stf__item {
display: none;
position: absolute;
}
</style>
</head>
<body>
<div class="demo-block bg-light pt-3 pb-3 overflow-hidden">
<div class="container mb-3 text-center" id="buttonDemoSelection">
<div class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-primary" data-dest="html">HTML</button>
<button type="button" class="btn btn-secondary" data-dest="canvas">CANVAS</button>
</div>
</div>
<div class="container">
<div id="htmlBook">
<div class="flip-book html-book stf__wrapper --landscape" id="htmlBookExample" style="min-width: 350px; min-height: 467px; width: 100%; max-width: 1400px; display: block; padding-bottom: 66.6364%;">
<div class="stf__block">
<div class="page stf__item" style="display: none; z-index: 1;">
<div class="page-content">
<h2 class="page-header">Page header - 1</h2>
<div class="page-image" style="background-image: url(https://cdn.pixabay.com/photo/2013/04/03/21/25/cereals-100263__340.jpg)"></div>
<div class="page-text"><p> 1.pegs<p></div>
<div class="page-footer">1</div>
</div>
</div>
<div class="page stf__item" style="display: none; z-index: 1;">
<div class="page-content">
<h2 class="page-header">Page header - 2</h2>
<div class="page-image" style="background-image: url(https://cdn.pixabay.com/photo/2016/01/08/17/06/poppy-1128683__340.jpg)"></div>
<div class="page-text"><p> 1.pegs<p></div>
<div class="page-footer">2</div>
</div>
</div>
<div class="page stf__item --left --simple" style="display: none;">
<div class="page-content">
<h2 class="page-header">Page header - 3</h2>
<div class="page-image" style="background-image: url(https://cdn.pixabay.com/photo/2013/01/27/18/41/meadow-76358__340.jpg)"></div>
<div class="page-text"><p> 1.pegs<p></div>
<div class="page-footer">3</div>
</div>
</div>
<div class="page stf__item --right --simple" style="display: none;">
<div class="page-content">
<h2 class="page-header">Page header - 4</h2>
<div class="page-image" style="background-image: url(https://cdn.pixabay.com/photo/2018/05/04/15/23/poppies-3374193__340.jpg)"></div>
<div class="page-text"><p> 1.pegs<p></div>
<div class="page-footer">4</div>
</div>
</div>
<div class="page stf__item" style="position: absolute; left: 0px; top: 0px; box-sizing: border-box; display: none; z-index: 1;">
<div class="page-content">
<h2 class="page-header">Page header - 5</h2>
<div class="page-image" style="background-image: url(https://cdn.pixabay.com/photo/2018/06/01/16/45/red-3446714__340.jpg)"></div>
<div class="page-text"><p> 1.pegs<p></div>
<div class="page-footer">5</div>
</div>
</div>
<div class="page stf__item" style="position: absolute; left: 0px; top: 0px; box-sizing: border-box; display: none; z-index: 1;">
<div class="page-content">
<h2 class="page-header">Page header - 6</h2>
<div class="page-image" style="background-image: url(https://cdn.pixabay.com/photo/2018/08/03/11/40/poppy-3581709__340.jpg)"></div>
<div class="page-text"><p> 1.pegs<p></div>
<div class="page-footer">6</div>
</div>
</div>
<div class="page stf__item" style="position: absolute; left: 0px; top: 0px; box-sizing: border-box; display: none; z-index: 1;">
<div class="page-content">
<h2 class="page-header">Page header - 7</h2>
<div class="page-image" style="background-image: url(https://cdn.pixabay.com/photo/2019/06/02/11/22/poppy-flower-4246241__340.jpg)"></div>
<div class="page-text"><p> 1.pegs<p></div>
<div class="page-footer">7</div>
</div>
</div>
<div class="page stf__item" style="position: absolute; left: 0px; top: 0px; box-sizing: border-box; display: none; z-index: 1;">
<div class="page-content">
<h2 class="page-header">Page header - 8</h2>
<div class="page-image" style="background-image: url(https://cdn.pixabay.com/photo/2019/06/02/21/18/red-poppy-4247574__340.jpg)"></div>
<div class="page-text"><p> 1.pegs<p></div>
<div class="page-footer">8</div>
</div>
</div>
<div class="page stf__item --left" style="position: absolute; display: block; height: 739.664px; left: 0px; top: 0.168182px; width: 555px; z-index: 1;">
<div class="page-content">
<h2 class="page-header">Page header - 9</h2>
<div class="page-image" style="background-image: url(https://cdn.pixabay.com/photo/2017/03/15/18/41/poppies-2147082__340.jpg)"></div>
<div class="page-text"><p> 1.pegs<p></div>
<div class="page-footer">9</div>
</div>
</div>
<div class="page stf__item --right" style="position: absolute; display: block; height: 739.664px; left: 555px; top: 0.168182px; width: 555px; z-index: 1;">
<div class="page-content">
<h2 class="page-header">Page header - 10</h2>
<div class="page-image" style="background-image: url(https://cdn.pixabay.com/photo/2017/08/03/22/16/poppy-2578514__340.jpg)"></div>
<div class="page-text"><p> 1.pegs<p></div>
<div class="page-footer">10</div>
</div>
</div>
</div>
</div>
</div>
<div id="canvasBook" style="display: none">
<div class="flip-book canvas-book stf__wrapper --portrait" id="canvasBookExample" style="min-width: 350px; min-height: 467px; width: 100%; max-width: 1400px; display: block; padding-bottom: 133.273%;"><canvas class="stf__canvas" width="100" height="100"></canvas></div>
</div>
</div>
<div class="container">
<div class="text-center mt-3 mb-2">
<button type="button" class="btn btn-info btn-sm btn-book-prev">Previous page</button>
[<span class="page-count">10</span> of <span class="page-total">10</span>]
<button type="button" class="btn btn-info btn-sm btn-book-next">Next page</button>
</div>
</div>
</div>
<script>
!(function (t) {
var e = {};
function i(s) {
if (e[s]) return e[s].exports;
var n = (e[s] = { i: s, l: !1, exports: {} });
return t[s].call(n.exports, n, n.exports, i), (n.l = !0), n.exports;
}
(i.m = t),
(i.c = e),
(i.d = function (t, e, s) {
i.o(t, e) || Object.defineProperty(t, e, { enumerable: !0, get: s });
}),
(i.r = function (t) {
"undefined" != typeof Symbol &&
Symbol.toStringTag &&
Object.defineProperty(t, Symbol.toStringTag, { value: "Module" }),
Object.defineProperty(t, "__esModule", { value: !0 });
}),
(i.t = function (t, e) {
if ((1 & e && (t = i(t)), 8 & e)) return t;
if (4 & e && "object" == typeof t && t && t.__esModule) return t;
var s = Object.create(null);
if (
(i.r(s),
Object.defineProperty(s, "default", { enumerable: !0, value: t }),
2 & e && "string" != typeof t)
)
for (var n in t)
i.d(
s,
n,
function (e) {
return t[e];
}.bind(null, n)
);
return s;
}),
(i.n = function (t) {
var e =
t && t.__esModule
? function () {
return t.default;
}
: function () {
return t;
};
return i.d(e, "a", e), e;
}),
(i.o = function (t, e) {
return Object.prototype.hasOwnProperty.call(t, e);
}),
(i.p = ""),
i((i.s = 1));
})([
function (t, e, i) {
var s = i(2),
n = i(3);
"string" == typeof (n = n.__esModule ? n.default : n) && (n = [[t.i, n, ""]]);
var o = { insert: "head", singleton: !1 };
s(n, o);
t.exports = n.locals || {};
},
function (t, e, i) {
i(6), (t.exports = i(5));
},
function (t, e, i) {
"use strict";
var s,
n = function () {
return (
void 0 === s &&
(s = Boolean(window && document && document.all && !window.atob)),
s
);
},
o = (function () {
var t = {};
return function (e) {
if (void 0 === t[e]) {
var i = document.querySelector(e);
if (window.HTMLIFrameElement && i instanceof window.HTMLIFrameElement)
try {
i = i.contentDocument.head;
} catch (t) {
i = null;
}
t[e] = i;
}
return t[e];
};
})(),
h = [];
function a(t) {
for (var e = -1, i = 0; i < h.length; i++)
if (h[i].identifier === t) {
e = i;
break;
}
return e;
}
function r(t, e) {
for (var i = {}, s = [], n = 0; n < t.length; n++) {
var o = t[n],
r = e.base ? o[0] + e.base : o[0],
l = i[r] || 0,
g = "".concat(r, " ").concat(l);
i[r] = l + 1;
var c = a(g),
d = { css: o[1], media: o[2], sourceMap: o[3] };
-1 !== c
? (h[c].references++, h[c].updater(d))
: h.push({ identifier: g, updater: f(d, e), references: 1 }),
s.push(g);
}
return s;
}
function l(t) {
var e = document.createElement("style"),
s = t.attributes || {};
if (void 0 === s.nonce) {
var n = i.nc;
n && (s.nonce = n);
}
if (
(Object.keys(s).forEach(function (t) {
e.setAttribute(t, s[t]);
}),
"function" == typeof t.insert)
)
t.insert(e);
else {
var h = o(t.insert || "head");
if (!h)
throw new Error(
"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid."
);
h.appendChild(e);
}
return e;
}
var g,
c =
((g = []),
function (t, e) {
return (g[t] = e), g.filter(Boolean).join("\n");
});
function d(t, e, i, s) {
var n = i
? ""
: s.media
? "@media ".concat(s.media, " {").concat(s.css, "}")
: s.css;
if (t.styleSheet) t.styleSheet.cssText = c(e, n);
else {
var o = document.createTextNode(n),
h = t.childNodes;
h[e] && t.removeChild(h[e]),
h.length ? t.insertBefore(o, h[e]) : t.appendChild(o);
}
}
function p(t, e, i) {
var s = i.css,
n = i.media,
o = i.sourceMap;
if (
(n ? t.setAttribute("media", n) : t.removeAttribute("media"),
o &&
btoa &&
(s += "\n/*# sourceMappingURL=data:application/json;base64,".concat(
btoa(unescape(encodeURIComponent(JSON.stringify(o)))),
" */"
)),
t.styleSheet)
)
t.styleSheet.cssText = s;
else {
for (; t.firstChild; ) t.removeChild(t.firstChild);
t.appendChild(document.createTextNode(s));
}
}
var u = null,
m = 0;
function f(t, e) {
var i, s, n;
if (e.singleton) {
var o = m++;
(i = u || (u = l(e))),
(s = d.bind(null, i, o, !1)),
(n = d.bind(null, i, o, !0));
} else
(i = l(e)),
(s = p.bind(null, i, e)),
(n = function () {
!(function (t) {
if (null === t.parentNode) return !1;
t.parentNode.removeChild(t);
})(i);
});
return (
s(t),
function (e) {
if (e) {
if (e.css === t.css && e.media === t.media && e.sourceMap === t.sourceMap)
return;
s((t = e));
} else n();
}
);
}
t.exports = function (t, e) {
(e = e || {}).singleton ||
"boolean" == typeof e.singleton ||
(e.singleton = n());
var i = r((t = t || []), e);
return function (t) {
if (
((t = t || []), "[object Array]" === Object.prototype.toString.call(t))
) {
for (var s = 0; s < i.length; s++) {
var n = a(i[s]);
h[n].references--;
}
for (var o = r(t, e), l = 0; l < i.length; l++) {
var g = a(i[l]);
0 === h[g].references && (h[g].updater(), h.splice(g, 1));
}
i = o;
}
};
};
},
function (t, e, i) {
(e = i(4)(!1)).push([
t.i,
".stf__wrapper {\n position: relative;\n display: block;\n box-sizing: border-box;\n transform: translateZ(0);\n}\n\n.stf__wrapper canvas {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n}\n\n.stf__block {\n position: absolute;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n}\n\n.stf__item {\n display: none;\n position: absolute;\n}\n\n.stf__outerShadow {\n position: absolute;\n}\n\n.stf__innerShadow {\n position: absolute;\n}",
""
]),
(t.exports = e);
},
function (t, e, i) {
"use strict";
t.exports = function (t) {
var e = [];
return (
(e.toString = function () {
return this.map(function (e) {
var i = (function (t, e) {
var i = t[1] || "",
s = t[3];
if (!s) return i;
if (e && "function" == typeof btoa) {
var n =
((h = s),
(a = btoa(unescape(encodeURIComponent(JSON.stringify(h))))),
(r = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(
a
)),
"/*# ".concat(r, " */")),
o = s.sources.map(function (t) {
return "/*# sourceURL=".concat(s.sourceRoot || "").concat(t, " */");
});
return [i].concat(o).concat([n]).join("\n");
}
var h, a, r;
return [i].join("\n");
})(e, t);
return e[2] ? "@media ".concat(e[2], " {").concat(i, "}") : i;
}).join("");
}),
(e.i = function (t, i, s) {
"string" == typeof t && (t = [[null, t, ""]]);
var n = {};
if (s)
for (var o = 0; o < this.length; o++) {
var h = this[o][0];
null != h && (n[h] = !0);
}
for (var a = 0; a < t.length; a++) {
var r = [].concat(t[a]);
(s && n[r[0]]) ||
(i && (r[2] ? (r[2] = "".concat(i, " and ").concat(r[2])) : (r[2] = i)),
e.push(r));
}
}),
e
);
};
},
function (t, e, i) {},
function (t, e, i) {
"use strict";
i.r(e);
class s {
constructor(t) {
(this.state = {
angle: 0,
area: [],
corners: null,
position: { x: 0, y: 0 }
}),
(this.render = t);
}
setPosition(t) {
this.state.position = t;
}
setAngle(t) {
this.state.angle = t;
}
setArea(t) {
this.state.area = t;
}
setCorners(t) {
this.state.corners = t;
}
getAngle() {
return this.state.angle;
}
}
class n extends s {
constructor(t, e) {
super(t),
(this.image = null),
(this.isLoad = !1),
(this.loadingAngle = 0),
(this.image = new Image()),
(this.image.src = e);
}
draw() {
const t = this.render.getContext(),
e = this.render.convertToGlobal(this.state.position),
i = this.render.getRect().pageWidth,
s = this.render.getRect().height;
t.save(), t.translate(e.x, e.y), t.beginPath();
for (let i of this.state.area)
null !== i &&
((i = this.render.convertToGlobal(i)), t.lineTo(i.x - e.x, i.y - e.y));
if ((t.rotate(this.state.angle), t.clip(), this.isLoad))
t.drawImage(this.image, 0, 0, i, s);
else {
t.beginPath(),
(t.strokeStyle = "rgb(200, 200, 200)"),
(t.fillStyle = "rgb(255, 255, 255)"),
(t.lineWidth = 1),
t.rect(1, 1, i - 1, s - 1),
t.stroke(),
t.fill();
const e = { x: i / 2, y: s / 2 };
t.beginPath(),
(t.lineWidth = 10),
t.arc(
e.x,
e.y,
20,
this.loadingAngle,
(3 * Math.PI) / 2 + this.loadingAngle
),
t.stroke(),
t.closePath(),
(this.loadingAngle += 0.07),
this.loadingAngle >= 2 * Math.PI && (this.loadingAngle = 0);
}
t.restore();
}
simpleDraw(t) {
const e = this.render.getRect(),
i = this.render.getContext(),
s = e.pageWidth,
n = e.height,
o = 1 === t ? e.left + e.pageWidth : e.left,
h = e.top;
if (this.isLoad) i.drawImage(this.image, o, h, s, n);
else {
i.beginPath(),
(i.strokeStyle = "rgb(200, 200, 200)"),
(i.fillStyle = "rgb(255, 255, 255)"),
(i.lineWidth = 1),
i.rect(o + 1, h + 1, s - 1, n - 1),
i.stroke(),
i.fill();
const t = { x: o + s / 2, y: h + n / 2 };
i.beginPath(),
(i.lineWidth = 10),
i.arc(
t.x,
t.y,
20,
this.loadingAngle,
(3 * Math.PI) / 2 + this.loadingAngle
),
i.stroke(),
i.closePath(),
(this.loadingAngle += 0.07),
this.loadingAngle >= 2 * Math.PI && (this.loadingAngle = 0);
}
}
load() {
this.isLoad ||
(this.image.onload = () => {
this.isLoad = !0;
});
}
}
class o {
constructor(t, e) {
(this.pages = []), (this.render = e), (this.app = t);
}
getPageCount() {
return this.pages.length;
}
getPages() {
return this.pages;
}
getPage(t) {
if (t >= 0 && t < this.pages.length) return this.pages[t];
throw new Error("Invalid page number");
}
show(t) {
t < 0 ||
t >= this.pages.length ||
(this.app.updatePage(t),
"portrait" === this.render.getOrientation()
? (this.render.setLeftPage(null), this.render.setRightPage(this.pages[t]))
: (t === this.pages.length - 1 && t--,
this.render.setLeftPage(this.pages[t]),
this.render.setRightPage(this.pages[t + 1])));
}
}
class h extends o {
constructor(t, e, i) {
super(t, e), (this.imagesHref = i);
}
load() {
for (const t of this.imagesHref) {
const e = new n(this.render, t);
e.load(), this.pages.push(e);
}
}
}
class a {
static GetDestinationFromTwoPoint(t, e) {
return null === t || null === e
? 1 / 0
: Math.sqrt(Math.pow(e.x - t.x, 2) + Math.pow(e.y - t.y, 2));
}
static GetSegmentLength(t) {
return a.GetDestinationFromTwoPoint(t[0], t[1]);
}
static GetAngleFromTwoLine(t, e) {
const i = t[0].y - t[1].y,
s = e[0].y - e[1].y,
n = t[1].x - t[0].x,
o = e[1].x - e[0].x;
return Math.acos(
(i * s + n * o) / (Math.sqrt(i * i + n * n) * Math.sqrt(s * s + o * o))
);
}
static PointInRect(t, e) {
return null === e
? null
: e.x >= t.left &&
e.x <= t.width + t.left &&
e.y >= t.top &&
e.y <= t.top + t.height
? e
: null;
}
static GetRotatedPoint(t, e, i) {
return {
x: t.x * Math.cos(i) + t.y * Math.sin(i) + e.x,
y: t.y * Math.cos(i) - t.x * Math.sin(i) + e.y
};
}
static GetIntersectByLineAndCircle(t, e, i) {
if (a.GetDestinationFromTwoPoint(t, i) <= e) return i;
const s = t.x,
n = t.y,
o = i.x,
h = i.y;
let r =
Math.sqrt(
(Math.pow(e, 2) * Math.pow(s - o, 2)) /
(Math.pow(s - o, 2) + Math.pow(n - h, 2))
) + s;
i.x < 0 && (r *= -1);
let l = ((r - s) * (n - h)) / (s - o) + n;
return s - o + n === 0 && (l = e), { x: r, y: l };
}
static GetIntersectByTwoSegment(t, e, i) {
return a.PointInRect(t, a.GetIntersectByTwoLine(e, i));
}
static GetIntersectByTwoLine(t, e) {
const i = t[0].y - t[1].y,
s = e[0].y - e[1].y,
n = t[1].x - t[0].x,
o = e[1].x - e[0].x,
h = t[0].x * t[1].y - t[1].x * t[0].y,
a = e[0].x * e[1].y - e[1].x * e[0].y,
r = i * a - s * h,
l = n * a - o * h,
g = -(h * o - a * n) / (i * o - s * n),
c = -(i * a - s * h) / (i * o - s * n);
if (isFinite(g) && isFinite(c)) return { x: g, y: c };
if (Math.abs(r - l) < 0.1) throw new Error("Segment included");
return null;
}
static GetCordsFromTwoPoint(t, e) {
const i = Math.abs(t.x - e.x),
s = Math.abs(t.y - e.y),
n = Math.max(i, s),
o = [t];
function h(t, e, i, s, n) {
return e > t ? t + n * (i / s) : e < t ? t - n * (i / s) : t;
}
for (let a = 1; a <= n; a++)
o.push({ x: h(t.x, e.x, i, n, a), y: h(t.y, e.y, s, n, a) });
return o;
}
}
class r extends s {
constructor(t, e) {
super(t),
(this.copiedElement = null),
(this.isLoad = !1),
(this.element = e),
this.element.classList.add("stf__item"),
(this.element.style.position = "absolute"),
(this.element.style.left = "0"),
(this.element.style.top = "0"),
(this.element.style.boxSizing = "border-box");
}
draw() {
const t = this.render.convertToGlobal(this.state.position),
e = this.render.getRect().pageWidth,
i = this.render.getRect().height;
this.element.classList.remove("--simple"),
(this.element.style.display = "block"),
(this.element.style.left = "0"),
(this.element.style.top = "0"),
(this.element.style.transformOrigin = "0 0"),
(this.element.style.width = e + "px"),
(this.element.style.height = i + "px");
let s = "polygon( ";
for (const t of this.state.area)
if (null !== t) {
let e =
1 === this.render.getDirection()
? { x: -t.x + this.state.position.x, y: t.y - this.state.position.y }
: { x: t.x - this.state.position.x, y: t.y - this.state.position.y };
(e = a.GetRotatedPoint(e, { x: 0, y: 0 }, this.state.angle)),
(s += e.x + "px " + e.y + "px, ");
}
(s = s.slice(0, -2)),
(s += ")"),
(this.element.style.clipPath = s),
this.element.style.setProperty("-webkit-clip-path", s),
(this.element.style.transform =
"translate3d(" +
t.x +
"px, " +
t.y +
"px, 0) rotate(" +
this.state.angle +
"rad)");
}
simpleDraw(t) {
if (this.element.classList.contains("--simple")) return;
null === this.copiedElement &&
((this.copiedElement = this.element.cloneNode(!0)),
this.element.parentElement.appendChild(this.copiedElement));
const e = this.render.getRect(),
i = e.pageWidth,
s = e.height,
n = 1 === t ? e.left + e.pageWidth : e.left,
o = e.top;
this.element.classList.add("--simple"),
(this.copiedElement.style.cssText =
"position: absolute; display: block; height: " +
s +
"px; left: " +
n +
"px; top: " +
o +
"px; width: " +
i +
"px; z-index: " +
(this.render.getSettings().startZIndex + 1) +
";"),
(this.element.style.cssText = "display: none");
}
clearSaved() {
this.element.classList.remove("--simple"),
null !== this.copiedElement &&
(this.copiedElement.remove(), (this.copiedElement = null));
}
getElement() {
return this.element;
}
load() {
this.isLoad = !0;
}
}
class l extends o {
constructor(t, e, i, s) {
super(t, e), (this.element = i), (this.pagesElement = s);
}
load() {
for (const t of this.pagesElement) {
const e = new r(this.render, t);
e.load(), this.pages.push(e);
}
}
}
class g {
constructor(t, e, i, s) {
(this.direction = t),
(this.corner = e),
(this.pageWidth = i),
(this.pageHeight = s),
(this.topIntersectPoint = null),
(this.sideIntersectPoint = null),
(this.bottomIntersectPoint = null);
}
calc(t) {
try {
(this.position = this.preparePosition(t)),
this.calculateIntersectPoint(this.position);
} catch (t) {}
}
getPageRect(t) {
return "top" === this.corner
? this.getRectFromBasePoint(
[
{ x: 0, y: 0 },
{ x: this.pageWidth, y: 0 },
{ x: 0, y: this.pageHeight },
{ x: this.pageWidth, y: this.pageHeight }
],
t
)
: this.getRectFromBasePoint(
[
{ x: 0, y: -this.pageHeight },
{ x: this.pageWidth, y: -this.pageHeight },
{ x: 0, y: 0 },
{ x: this.pageWidth, y: 0 }
],
t
);
}
getRectFromBasePoint(t, e) {
return {
topLeft: this.getRotatedPoint(t[0], e),
topRight: this.getRotatedPoint(t[1], e),
bottomLeft: this.getRotatedPoint(t[2], e),
bottomRight: this.getRotatedPoint(t[3], e)
};
}
getRotatedPoint(t, e) {
return {
x: t.x * Math.cos(this.angle) + t.y * Math.sin(this.angle) + e.x,
y: t.y * Math.cos(this.angle) - t.x * Math.sin(this.angle) + e.y
};
}
updateAngleAndGeometry(t) {
(this.angle = this.calculateAngle(t)), (this.rect = this.getPageRect(t));
}
calculateIntersectPoint(t) {
const e = {
left: -1,
top: -1,
width: this.pageWidth + 2,
height: this.pageHeight + 2
};
"top" === this.corner
? ((this.topIntersectPoint = a.GetIntersectByTwoSegment(
e,
[t, this.rect.topRight],
[
{ x: 0, y: 0 },
{ x: this.pageWidth, y: 0 }
]
)),
(this.sideIntersectPoint = a.GetIntersectByTwoSegment(
e,
[t, this.rect.bottomLeft],
[
{ x: this.pageWidth, y: 0 },
{ x: this.pageWidth, y: this.pageHeight }
]
)),
(this.bottomIntersectPoint = a.GetIntersectByTwoSegment(
e,
[this.rect.bottomLeft, this.rect.bottomRight],
[
{ x: 0, y: this.pageHeight },
{ x: this.pageWidth, y: this.pageHeight }
]
)))
: ((this.topIntersectPoint = a.GetIntersectByTwoSegment(
e,
[this.rect.topLeft, this.rect.topRight],
[
{ x: 0, y: 0 },
{ x: this.pageWidth, y: 0 }
]
)),
(this.sideIntersectPoint = a.GetIntersectByTwoSegment(
e,
[t, this.rect.topLeft],
[
{ x: this.pageWidth, y: 0 },
{ x: this.pageWidth, y: this.pageHeight }
]
)),
(this.bottomIntersectPoint = a.GetIntersectByTwoSegment(
e,
[this.rect.bottomLeft, this.rect.bottomRight],
[
{ x: 0, y: this.pageHeight },
{ x: this.pageWidth, y: this.pageHeight }
]
)));
}
checkPositionAtCenterLine(t, e, i) {
let s = t;
const n = a.GetIntersectByLineAndCircle(e, this.pageWidth, s);
s !== n && ((s = n), this.updateAngleAndGeometry(s));
const o = Math.sqrt(
Math.pow(this.pageWidth, 2) + Math.pow(this.pageHeight, 2)
);
let h = this.rect.bottomRight,
r = this.rect.topLeft;
if (
("bottom" === this.corner &&
((h = this.rect.topRight), (r = this.rect.bottomLeft)),
h.x <= 0)
) {
const t = a.GetIntersectByLineAndCircle(i, o, r);
t !== s && ((s = t), this.updateAngleAndGeometry(s));
}
return s;
}
preparePosition(t) {
let e = t;
if (
(this.updateAngleAndGeometry(e),
(e =
"top" === this.corner
? this.checkPositionAtCenterLine(
e,
{ x: 0, y: 0 },
{ x: 0, y: this.pageHeight }
)
: this.checkPositionAtCenterLine(
e,
{ x: 0, y: this.pageHeight },
{ x: 0, y: 0 }
)),
Math.abs(e.x - this.pageWidth) < 1 && Math.abs(e.y) < 1)
)
throw new Error("Point is too small");
return e;
}
calculateAngle(t) {
const e = this.pageWidth - t.x,
i = "bottom" === this.corner ? this.pageHeight - t.y : t.y;
let s = 2 * Math.acos(e / Math.sqrt(i * i + e * e));
i < 0 && (s = -s);
const n = Math.PI - s;
if (!isFinite(s) || (n >= 0 && n < 0.003))
throw new Error("The G point is too small");
return "bottom" === this.corner && (s = -s), s;
}
getAngle() {
return 0 === this.direction ? -this.angle : this.angle;
}
getRect() {
return this.rect;
}
getPosition() {
return this.position;
}
getActiveCorner() {
return 0 === this.direction ? this.rect.topLeft : this.rect.topRight;
}
getDirection() {
return this.direction;
}
getIntersectPoint() {
return {
top: this.topIntersectPoint,
bottom: this.bottomIntersectPoint,
side: this.sideIntersectPoint
};
}
getSegmentToShadowLine() {
const t = this.getShadowStartPoint();
return [
t,
t !== this.sideIntersectPoint && null !== this.sideIntersectPoint
? this.sideIntersectPoint
: this.bottomIntersectPoint
];
}
getShadowStartPoint() {
return "top" === this.corner
? this.topIntersectPoint
: null !== this.sideIntersectPoint
? this.sideIntersectPoint
: this.topIntersectPoint;
}
getShadowAngle() {
const t = a.GetAngleFromTwoLine(this.getSegmentToShadowLine(), [
{ x: 0, y: 0 },
{ x: this.pageWidth, y: 0 }
]);
return 0 === this.direction ? t : Math.PI - t;
}
getShadowLength() {
return a.GetSegmentLength(this.getSegmentToShadowLine());
}
getFlippingProgress() {
return Math.abs(
((this.position.x - this.pageWidth) / (2 * this.pageWidth)) * 100
);
}
getFlippingClipArea() {
const t = [];
let e = !1;
return (
t.push(this.rect.topLeft),
t.push(this.topIntersectPoint),
null === this.sideIntersectPoint
? (e = !0)
: (t.push(this.sideIntersectPoint),
null === this.bottomIntersectPoint && (e = !1)),
t.push(this.bottomIntersectPoint),
(e || "bottom" === this.corner) && t.push(this.rect.bottomLeft),
t
);
}
getCorner() {
return this.corner;
}
getBottomClipArea() {
const t = [];
return (
t.push(this.topIntersectPoint),
"top" === this.corner
? t.push({ x: this.pageWidth, y: 0 })
: (null !== this.topIntersectPoint && t.push({ x: this.pageWidth, y: 0 }),
t.push({ x: this.pageWidth, y: this.pageHeight })),
null !== this.sideIntersectPoint
? a.GetDestinationFromTwoPoint(
this.sideIntersectPoint,
this.topIntersectPoint
) >= 10 && t.push(this.sideIntersectPoint)
: "top" === this.corner &&
t.push({ x: this.pageWidth, y: this.pageHeight }),
t.push(this.bottomIntersectPoint),
t.push(this.topIntersectPoint),
t
);
}
getBottomPagePosition() {
return 1 === this.direction ? { x: this.pageWidth, y: 0 } : { x: 0, y: 0 };
}
}
class c {
constructor(t, e) {
(this.flippingPage = null),
(this.bottomPage = null),
(this.calc = null),
(this.state = "read"),
(this.render = t),
(this.app = e);
}
getCalculation() {
return this.calc;
}
start(t) {
this.reset();
const e = this.render.convertToBook(t),
i = this.getBoundsRect();
let s = 0;
"portrait" === this.render.getOrientation()
? e.x - i.pageWidth <= i.width / 5 && (s = 1)
: e.x < i.width / 2 && (s = 1);
const n = e.y >= i.height / 2 ? "bottom" : "top";
if (!this.checkDirection(s)) return !1;
try {
return (
(this.flippingPage = this.getFlippingPage(s)),
(this.bottomPage = this.getBottomPage(s)),
this.flippingPage && this.bottomPage
? (this.render.setDirection(s),
(this.calc = new g(s, n, i.pageWidth, i.height)),
!0)
: !1
);
} catch (t) {
return !1;
}
}
showCorner(t) {
if (!this.checkState("read", "fold_corner")) return;
const e = this.getBoundsRect(),
i = e.pageWidth,
s = Math.sqrt(Math.pow(i, 2) + Math.pow(e.height, 2)) / 5,
n = this.render.convertToBook(t);
if (
n.x > 0 &&
n.y > 0 &&
n.x < e.width &&
n.y < e.height &&
(n.x < s || n.x > e.width - s) &&
(n.y < s || n.y > e.height - s)
)
if (null === this.calc) {
if (!this.start(t)) return;
this.setState("fold_corner"), this.calc.calc({ x: i - 1, y: 1 });
const s = 50,
n = "bottom" === this.calc.getCorner() ? e.height - 1 : 1,
o = "bottom" === this.calc.getCorner() ? e.height - s : s;
this.animateFlippingTo({ x: i - 1, y: n }, { x: i - s, y: o }, !1, !1);
} else this.do(this.render.convertToPage(t));
else this.setState("read"), this.render.finishAnimation(), this.stopMove();
}
fold(t) {
this.setState("user_fold"),
null === this.calc && this.start(t),
this.do(this.render.convertToPage(t));
}
flip(t) {
if ((null !== this.calc && this.render.finishAnimation(), !this.start(t)))
return;
const e = this.getBoundsRect();
this.setState("flipping");
const i = e.height / 10,
s = "bottom" === this.calc.getCorner() ? e.height - i : i,
n = "bottom" === this.calc.getCorner() ? e.height : 0;
this.calc.calc({ x: e.pageWidth - i, y: s }),
this.animateFlippingTo(
{ x: e.pageWidth - i, y: s },
{ x: -e.pageWidth, y: n },
!0
);
}
flipNext(t) {
this.flip({
x: this.render.getRect().left + 2 * this.render.getRect().pageWidth,
y: "top" === t ? 1 : this.render.getRect().height - 2
});
}
flipPrev(t) {
this.flip({ x: 10, y: "top" === t ? 1 : this.render.getRect().height - 2 });
}
stopMove() {
if (null === this.calc) return;
const t = this.calc.getPosition(),
e = this.getBoundsRect(),
i = "bottom" === this.calc.getCorner() ? e.height : 0;
t.x <= 0
? this.animateFlippingTo(t, { x: -e.pageWidth, y: i }, !0)
: this.animateFlippingTo(t, { x: e.pageWidth, y: i }, !1);
}
do(t) {
null !== this.calc &&
(this.calc.calc(t),
this.flippingPage.setArea(this.calc.getFlippingClipArea()),
this.flippingPage.setPosition(this.calc.getActiveCorner()),
this.flippingPage.setAngle(this.calc.getAngle()),
this.bottomPage.setArea(this.calc.getBottomClipArea()),
this.bottomPage.setPosition(this.calc.getBottomPagePosition()),
this.bottomPage.setAngle(0),
this.render.setPageRect(this.calc.getRect()),
this.render.setBottomPage(this.bottomPage),
this.render.setFlippingPage(this.flippingPage),
this.render.drawShadow(
this.calc.getShadowStartPoint(),
this.calc.getShadowAngle(),
this.calc.getFlippingProgress(),
this.calc.getDirection(),
this.calc.getShadowLength()
));
}
animateFlippingTo(t, e, i, s = !0) {
const n = a.GetCordsFromTwoPoint(t, e),
o = [];
for (const t of n) o.push(() => this.do(t));
const h = this.getAnimationDuration(n.length);
this.render.startAnimation(o, h, () => {
this.calc &&
(i &&
(1 === this.calc.getDirection()
? this.app.turnToPrevPage()
: this.app.turnToNextPage()),
s &&
(this.render.setBottomPage(null),
this.render.setFlippingPage(null),
this.render.clearShadow(),
(this.state = "read"),
this.reset()));
});
}
getAnimationDuration(t) {
const e = this.app.getSettings().flippingTime;
return t >= 1e3 ? e : (t / 1e3) * e;
}
getFlippingPage(t) {
const e = this.app.getCurrentPageIndex();
return "portrait" === this.render.getOrientation()
? 0 === t
? this.app.getPage(e)
: this.app.getPage(e - 1)
: e < this.app.getPageCount() - 1 && e >= 0
? 0 === t
? this.app.getPage(e + 2)
: this.app.getPage(e - 1)
: null;
}
getNextPage() {
const t = this.app.getCurrentPageIndex(),
e = "portrait" === this.render.getOrientation() ? 0 : 2;
return t < this.app.getPageCount() - e ? this.app.getPage(t + e + 1) : null;
}
getPrevPage() {
const t = this.app.getCurrentPageIndex(),
e = "portrait" === this.render.getOrientation() ? 0 : 2;
return t - e >= 0 ? this.app.getPage(t - e) : null;
}
getBottomPage(t) {
return 0 === t ? this.getNextPage() : this.getPrevPage();
}
checkDirection(t) {
return 0 === t
? this.app.getCurrentPageIndex() <= this.app.getPageCount() - 1
: this.app.getCurrentPageIndex() >= 1;
}
reset() {
(this.calc = null), (this.flippingPage = null), (this.bottomPage = null);
}
getBoundsRect() {
return this.render.getRect();
}
getPageWidth() {
return this.getBoundsRect().width / 2;
}
getPageHeight() {
return this.getBoundsRect().height;
}
setState(t) {
this.app.updateState(t), (this.state = t);
}
checkState(...t) {
for (const e of t) if (this.state === e) return !0;
return !1;
}
}
class d {
constructor(t, e) {
(this.leftPage = null),
(this.rightPage = null),
(this.flippingPage = null),
(this.bottomPage = null),
(this.shadow = null),
(this.pageRect = null),
(this.animation = null),
(this.timer = 0),
(this.direction = null),
(this.orientation = null),
(this.boundsRect = null),
(this.setting = e),
(this.app = t);
}
drawShadow(t, e, i, s, n) {
if (!this.app.getSettings().drawShadow) return;
const o = 100 * this.getSettings().maxShadowOpacity;
this.shadow = {
pos: t,
angle: e,
width: (((3 * this.getRect().pageWidth) / 4) * i) / 100,
opacity: ((100 - i) * o) / 100 / 100,
direction: s,
length: n
};
}
clearShadow() {
this.shadow = null;
}
setPageRect(t) {
this.pageRect = t;
}
getOrientation() {
return this.orientation;
}
startAnimation(t, e, i) {
this.finishAnimation(),
(this.animation = {
frames: t,
duration: e,
durationFrame: e / t.length,
onAnimateEnd: i,
startedAt: this.timer
});
}
finishAnimation() {
null !== this.animation &&
(this.animation.frames[this.animation.frames.length - 1](),
null !== this.animation.onAnimateEnd && this.animation.onAnimateEnd()),
(this.animation = null);
}
render(t) {
if (null !== this.animation) {
const e = Math.round(
(t - this.animation.startedAt) / this.animation.durationFrame
);
e < this.animation.frames.length
? this.animation.frames[e]()
: (this.animation.onAnimateEnd(), (this.animation = null));
}
(this.timer = t), this.drawFrame(t);
}
getRect() {
return (
null === this.boundsRect && this.calculateBoundsRect(), this.boundsRect
);
}
calculateBoundsRect() {
let t = "landscape";
const e = this.getBlockWidth(),
i = e / 2,
s = this.getBlockHeight() / 2,
n = this.setting.width / this.setting.height;
let o = this.setting.width,
h = this.setting.height,
a = i - o;
return (
"stretch" === this.setting.size
? (e < 2 * this.setting.minWidth &&
this.app.getSettings().usePortrait &&
(t = "portrait"),
(o =
"landscape" === t ? this.getBlockWidth() / 2 : this.getBlockWidth()),
o > this.setting.maxWidth && (o = this.setting.maxWidth),
(h = o / n),
h > this.getBlockHeight() && ((h = this.getBlockHeight()), (o = h * n)),
(a = "landscape" === t ? i - o : i - o / 2 - o))
: e < 2 * o &&
this.app.getSettings().usePortrait &&
((t = "portrait"), (a = i - o / 2 - o)),
(this.boundsRect = {
left: a,
top: s - h / 2,
width: 2 * o,
height: h,
pageWidth: o
}),
t
);
}
update() {
this.boundsRect = null;
const t = this.calculateBoundsRect();
this.orientation !== t &&
((this.orientation = t), this.app.updateOrientation(t));
}
convertToBook(t) {
const e = this.getRect();
return { x: t.x - e.left, y: t.y - e.top };
}
convertToPage(t, e) {
e || (e = this.direction);
const i = this.getRect();
return {
x: 0 === e ? t.x - i.left - i.width / 2 : i.width / 2 - t.x + i.left,
y: t.y - i.top
};
}
convertToGlobal(t, e) {
if ((e || (e = this.direction), null == t)) return null;
const i = this.getRect();
return {
x: 0 === e ? t.x + i.left + i.width / 2 : i.width / 2 - t.x + i.left,
y: t.y + i.top
};
}
convertRectToGlobal(t, e) {
return (
e || (e = this.direction),
{
topLeft: this.convertToGlobal(t.topLeft, e),
topRight: this.convertToGlobal(t.topRight, e),
bottomLeft: this.convertToGlobal(t.bottomLeft, e),
bottomRight: this.convertToGlobal(t.bottomRight, e)
}
);
}
start() {
this.update();
const t = (e) => {
this.render(e), requestAnimationFrame(t);
};
requestAnimationFrame(t);
}
setDirection(t) {
this.direction = t;
}
getDirection() {
return this.direction;
}
setFlippingPage(t) {
this.flippingPage = t;
}
setBottomPage(t) {
this.bottomPage = t;
}
setRightPage(t) {
this.rightPage = t;
}
setLeftPage(t) {
this.leftPage = t;
}
getSettings() {
return this.app.getSettings();
}
}
class p extends d {
constructor(t, e, i) {
super(t, e), (this.canvas = i), (this.ctx = i.getContext("2d"));
}
getBlockWidth() {
return this.canvas.offsetWidth;
}
getBlockHeight() {
return this.canvas.offsetHeight;
}
getContext() {
return this.ctx;
}
drawFrame(t) {
this.clear(),
"portrait" !== this.orientation &&
null != this.leftPage &&
this.leftPage.simpleDraw(0),
null != this.rightPage && this.rightPage.simpleDraw(1),
null != this.bottomPage && this.bottomPage.draw(),
this.drawBookShadow(),
null != this.flippingPage && this.flippingPage.draw(),
null != this.shadow && (this.drawOuterShadow(), this.drawInnerShadow());
const e = this.getRect();
"portrait" === this.orientation &&
(this.ctx.beginPath(),
this.ctx.rect(e.left + e.pageWidth, e.top, e.width, e.height),
this.ctx.clip());
}
drawBookShadow() {
const t = this.getRect();
this.ctx.save(), this.ctx.beginPath();
const e = t.width / 20;
this.ctx.rect(t.left, t.top, t.width, t.height);
const i = { x: t.left + t.width / 2 - e / 2, y: 0 };
this.ctx.translate(i.x, i.y);
const s = this.ctx.createLinearGradient(0, 0, e, 0);
s.addColorStop(0, "rgba(0, 0, 0, 0)"),
s.addColorStop(0.4, "rgba(0, 0, 0, 0.2)"),
s.addColorStop(0.49, "rgba(0, 0, 0, 0.1)"),
s.addColorStop(0.5, "rgba(0, 0, 0, 0.5)"),
s.addColorStop(0.51, "rgba(0, 0, 0, 0.4)"),
s.addColorStop(1, "rgba(0, 0, 0, 0)"),
this.ctx.clip(),
(this.ctx.fillStyle = s),
this.ctx.fillRect(0, 0, e, 2 * t.height),
this.ctx.restore();
}
drawOuterShadow() {
const t = this.getRect();
this.ctx.save(),
this.ctx.beginPath(),
this.ctx.rect(t.left, t.top, t.width, t.height);
const e = this.convertToGlobal({
x: this.shadow.pos.x,
y: this.shadow.pos.y
});
this.ctx.translate(e.x, e.y),
this.ctx.rotate(Math.PI + this.shadow.angle + Math.PI / 2);
const i = this.ctx.createLinearGradient(0, 0, this.shadow.width, 0);
0 === this.shadow.direction
? (this.ctx.translate(0, -100),
i.addColorStop(0, "rgba(0, 0, 0, " + this.shadow.opacity + ")"),
i.addColorStop(1, "rgba(0, 0, 0, 0)"))
: (this.ctx.translate(-this.shadow.width, -100),
i.addColorStop(0, "rgba(0, 0, 0, 0)"),
i.addColorStop(1, "rgba(0, 0, 0, " + this.shadow.opacity + ")")),
this.ctx.clip(),
(this.ctx.fillStyle = i),
this.ctx.fillRect(0, 0, this.shadow.width, 2 * t.height),
this.ctx.restore();
}
drawInnerShadow() {
const t = this.getRect();
this.ctx.save(), this.ctx.beginPath();
const e = this.convertToGlobal({
x: this.shadow.pos.x,
y: this.shadow.pos.y
}),
i = this.convertRectToGlobal(this.pageRect);
this.ctx.moveTo(i.topLeft.x, i.topLeft.y),
this.ctx.lineTo(i.topRight.x, i.topRight.y),
this.ctx.lineTo(i.bottomRight.x, i.bottomRight.y),
this.ctx.lineTo(i.bottomLeft.x, i.bottomLeft.y),
this.ctx.translate(e.x, e.y),
this.ctx.rotate(Math.PI + this.shadow.angle + Math.PI / 2);
const s = (3 * this.shadow.width) / 4,
n = this.ctx.createLinearGradient(0, 0, s, 0);
0 === this.shadow.direction
? (this.ctx.translate(-s, -100),
n.addColorStop(1, "rgba(0, 0, 0, " + this.shadow.opacity + ")"),
n.addColorStop(0.9, "rgba(0, 0, 0, 0.05)"),
n.addColorStop(0.7, "rgba(0, 0, 0, " + this.shadow.opacity + ")"),
n.addColorStop(0, "rgba(0, 0, 0, 0)"))
: (this.ctx.translate(0, -100),
n.addColorStop(0, "rgba(0, 0, 0, " + this.shadow.opacity + ")"),
n.addColorStop(0.1, "rgba(0, 0, 0, 0.05)"),
n.addColorStop(0.3, "rgba(0, 0, 0, " + this.shadow.opacity + ")"),
n.addColorStop(1, "rgba(0, 0, 0, 0)")),
this.ctx.clip(),
(this.ctx.fillStyle = n),
this.ctx.fillRect(0, 0, s, 2 * t.height),
this.ctx.restore();
}
clear() {
(this.ctx.fillStyle = "white"),
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
}
}
class u {
constructor(t, e, i) {
(this.touchPoint = null),
(this.swipeTimeout = 250),
(this.swipeDistance = 80),
(this.wrapper = t),
this.wrapper.classList.add("stf__wrapper"),
(this.app = e);
const s = this.app.getSettings().usePortrait ? 1 : 2;
(this.wrapper.style.minWidth = i.minWidth * s + "px"),
(this.wrapper.style.minHeight = i.minHeight * s + "px"),
"fixed" === i.size &&
((this.wrapper.style.minWidth = i.width * s + "px"),
(this.wrapper.style.minHeight = i.height * s + "px")),
i.autoSize &&
((this.wrapper.style.width = "100%"),
(this.wrapper.style.maxWidth = 2 * i.maxWidth + "px")),
(this.wrapper.style.display = "block");
}
getDistElement() {
return this.distElement;
}
getWrapper() {
return this.wrapper;
}
setOrientationStyle(t) {
this.wrapper.classList.remove("--portrait", "--landscape"),
"portrait" === t
? (this.app.getSettings().autoSize &&
(this.wrapper.style.paddingBottom =
(this.app.getSettings().height / this.app.getSettings().width) * 100 +
"%"),
this.wrapper.classList.add("--portrait"))
: (this.app.getSettings().autoSize &&
(this.wrapper.style.paddingBottom =
(this.app.getSettings().height / (2 * this.app.getSettings().width)) *
100 +
"%"),
this.wrapper.classList.add("--landscape")),
this.update();
}
setHandlers() {
this.distElement.addEventListener("mousedown", (t) => {
const e = this.getMousePos(t.clientX, t.clientY);
this.app.startUserTouch(e), t.preventDefault();
}),
this.distElement.addEventListener("touchstart", (t) => {
if (t.changedTouches.length > 0) {
const e = t.changedTouches[0],
i = this.getMousePos(e.clientX, e.clientY);
(this.touchPoint = { point: i, time: Date.now() }),
setTimeout(() => {
null !== this.touchPoint && this.app.startUserTouch(i);
}, this.swipeTimeout),
t.preventDefault();
}
}),
window.addEventListener("mousemove", (t) => {
const e = this.getMousePos(t.clientX, t.clientY);
this.app.userMove(e, !1);
}),
window.addEventListener("touchmove", (t) => {
if (t.changedTouches.length > 0) {
const e = t.changedTouches[0];
this.app.userMove(this.getMousePos(e.clientX, e.clientY), !0);
}
}),
window.addEventListener("mouseup", (t) => {
const e = this.getMousePos(t.clientX, t.clientY);
this.app.userStop(e);
}),
window.addEventListener("touchend", (t) => {
if (t.changedTouches.length > 0) {
const e = t.changedTouches[0],
i = this.getMousePos(e.clientX, e.clientY);
let s = !1;
if (null !== this.touchPoint) {
const t = i.x - this.touchPoint.point.x,
e = Math.abs(i.y - this.touchPoint.point.y);
Math.abs(t) > this.swipeDistance &&
e < 2 * this.swipeDistance &&
Date.now() - this.touchPoint.time < this.swipeTimeout &&
(t > 0
? this.app.flipPrev(
this.touchPoint.point.y < this.app.getRender().getRect().height / 2
? "top"
: "bottom"
)
: this.app.flipNext(
this.touchPoint.point.y < this.app.getRender().getRect().height / 2
? "top"
: "bottom"
),
(s = !0)),
(this.touchPoint = null);
}
this.app.userStop(i, s);
}
});
}
getMousePos(t, e) {
const i = this.distElement.getBoundingClientRect();
return { x: t - i.left, y: e - i.top };
}
}
class m extends u {
constructor(t, e, i, s) {
super(t, e, i),
t.insertAdjacentHTML("afterbegin", '<div class="stf__block"></div>'),
(this.distElement = t.querySelector(".stf__block"));
for (const t of s) this.distElement.appendChild(t);
window.addEventListener(
"resize",
() => {
this.update();
},
!1
),
this.setHandlers();
}
update() {
this.app.getRender().update();
}
}
class f extends u {
constructor(t, e, i) {
super(t, e, i),
(t.innerHTML = '<canvas class="stf__canvas"></canvas>'),
(this.canvas = t.querySelectorAll("canvas")[0]),
window.addEventListener(
"resize",
() => {
this.update();
},
!1
),
(this.distElement = this.canvas),
this.resizeCanvas(),
this.setHandlers();
}
resizeCanvas() {
const t = getComputedStyle(this.canvas),
e = parseInt(t.getPropertyValue("width"), 10),
i = parseInt(t.getPropertyValue("height"), 10);
(this.canvas.width = e), (this.canvas.height = i);
}
getCanvas() {
return this.canvas;
}
update() {
this.resizeCanvas(), this.app.getRender().update();
}
}
class y extends d {
constructor(t, e, i, s) {
super(t, e),
(this.outerShadow = null),
(this.innerShadow = null),
(this.element = i),
(this.items = s);
}
getBlockWidth() {
return this.element.offsetWidth;
}
getBlockHeight() {
return this.element.offsetHeight;
}
clearShadow() {
super.clearShadow(),
this.outerShadow.remove(),
this.innerShadow.remove(),
(this.outerShadow = null),
(this.innerShadow = null);
}
drawShadow(t, e, i, s, n) {
super.drawShadow(t, e, i, s, n),
null === this.outerShadow &&
(this.element.insertAdjacentHTML(
"beforeend",
'<div class="stf__outerShadow"></div>'
),
(this.outerShadow = this.element.querySelector(".stf__outerShadow")),
(this.outerShadow.style.zIndex = (
this.getSettings().startZIndex + 10
).toString(10)),
(this.outerShadow.style.left = "0px"),
(this.outerShadow.style.top = "0px")),
null === this.innerShadow &&
(this.element.insertAdjacentHTML(
"beforeend",
'<div class="stf__innerShadow"></div>'
),
(this.innerShadow = this.element.querySelector(".stf__innerShadow")),
(this.innerShadow.style.zIndex = (
this.getSettings().startZIndex + 10
).toString(10)),
(this.innerShadow.style.left = "0px"),
(this.innerShadow.style.top = "0px"));
}
drawInnerShadow() {
const t = this.getRect(),
e = (3 * this.shadow.width) / 4,
i = 0 === this.getDirection() ? e : 0,
s = 0 === this.getDirection() ? "to left" : "to right",
n = this.convertToGlobal(this.shadow.pos),
o = this.shadow.angle + (3 * Math.PI) / 2;
(this.innerShadow.style.width = e + "px"),
(this.innerShadow.style.height = 2 * t.height + "px"),
(this.innerShadow.style.background =
"linear-gradient(" +
s +
", rgba(0, 0, 0, " +
this.shadow.opacity +
") 5%, rgba(0, 0, 0, 0.05) 15%,rgba(0, 0, 0, " +
this.shadow.opacity +
") 35%, rgba(0, 0, 0, 0) 100% )"),
(this.innerShadow.style.transformOrigin = i + "px 100px"),
(this.innerShadow.style.transform =
"translate3d(" +
(n.x - i) +
"px, " +
(n.y - 100) +
"px, 0) rotate(" +
o +
"rad)");
const h = [
this.pageRect.topLeft,
this.pageRect.topRight,
this.pageRect.bottomRight,
this.pageRect.bottomLeft
];
let r = "polygon( ";
for (const t of h) {
let e =
1 === this.getDirection()
? { x: -t.x + this.shadow.pos.x, y: t.y - this.shadow.pos.y }
: { x: t.x - this.shadow.pos.x, y: t.y - this.shadow.pos.y };
(e = a.GetRotatedPoint(e, { x: i, y: 100 }, o)),
(r += e.x + "px " + e.y + "px, ");
}
(r = r.slice(0, -2)),
(r += ")"),
(this.innerShadow.style.clipPath = r),
this.innerShadow.style.setProperty("-webkit-clip-path", r);
}
drawOuterShadow() {
const t = this.getRect(),
e = this.convertToGlobal({ x: this.shadow.pos.x, y: this.shadow.pos.y }),
i = this.shadow.angle + (3 * Math.PI) / 2,
s = 1 === this.getDirection() ? this.shadow.width : 0,
n = 0 === this.getDirection() ? "to right" : "to left";
(this.outerShadow.style.width = this.shadow.width + "px"),
(this.outerShadow.style.height = 2 * t.height + "px"),
(this.outerShadow.style.background =
"linear-gradient(" +
n +
", rgba(0, 0, 0, " +
this.shadow.opacity +
"), rgba(0, 0, 0, 0))"),
(this.outerShadow.style.transformOrigin = s + "px 100px"),
(this.outerShadow.style.transform =
"translate3d(" +
(e.x - s) +
"px, " +
(e.y - 100) +
"px, 0) rotate(" +
i +
"rad)");
const o = [];
o.push(
{ x: 0, y: 0 },
{ x: t.pageWidth, y: 0 },
{ x: t.pageWidth, y: t.height },
{ x: 0, y: t.height }
);
let h = "polygon( ";
for (const t of o)
if (null !== t) {
let e =
1 === this.getDirection()
? { x: -t.x + this.shadow.pos.x, y: t.y - this.shadow.pos.y }
: { x: t.x - this.shadow.pos.x, y: t.y - this.shadow.pos.y };
(e = a.GetRotatedPoint(e, { x: s, y: 100 }, i)),
(h += e.x + "px " + e.y + "px, ");
}
(h = h.slice(0, -2)),
(h += ")"),
(this.outerShadow.style.clipPath = h),
this.outerShadow.style.setProperty("-webkit-clip-path", h);
}
drawFrame(t) {
this.clear(),
"portrait" !== this.orientation
? null != this.leftPage && this.leftPage.simpleDraw(0)
: null != this.leftPage && this.leftPage.clearSaved(),
null != this.rightPage && this.rightPage.simpleDraw(1),
null != this.bottomPage &&
(("portrait" === this.orientation && 1 === this.direction) ||
((this.bottomPage.getElement().style.zIndex = (
this.getSettings().startZIndex + 3
).toString(10)),
this.bottomPage.draw())),
null != this.flippingPage &&
((this.flippingPage.getElement().style.zIndex = (
this.getSettings().startZIndex + 4
).toString(10)),
this.flippingPage.draw()),
null != this.shadow && (this.drawOuterShadow(), this.drawInnerShadow());
}
clear() {
const t = [];
this.leftPage && t.push(this.leftPage.getElement()),
this.rightPage && t.push(this.rightPage.getElement()),
this.flippingPage && t.push(this.flippingPage.getElement()),
this.bottomPage && t.push(this.bottomPage.getElement());
for (const e of this.items)
t.includes(e) ||
((e.style.display = "none"),
(e.style.zIndex = (this.getSettings().startZIndex + 1).toString(10)),
(e.style.transform = ""));
}
clearClass(t) {
null !== t && t.getElement().classList.remove("--left", "--right");
}
setRightPage(t) {
this.clearClass(this.rightPage),
null !== this.rightPage &&
t !== this.rightPage &&
this.rightPage.clearSaved(),
null !== t && t.getElement().classList.add("--right"),
super.setRightPage(t);
}
setLeftPage(t) {
this.clearClass(this.leftPage),
null !== this.leftPage &&
t !== this.rightPage &&
this.leftPage.clearSaved(),
null !== t && t.getElement().classList.add("--left"),
super.setLeftPage(t);
}
setBottomPage(t) {
null !== t &&
t.getElement().classList.add(1 === this.direction ? "--left" : "--right"),
super.setBottomPage(t);
}
setFlippingPage(t) {
null !== t &&
t.getElement().classList.add(1 === this.direction ? "--right" : "--left"),
super.setFlippingPage(t);
}
update() {
super.update(),
null !== this.rightPage &&
(this.rightPage.getElement().classList.add("--right"),
this.rightPage.clearSaved()),
null !== this.leftPage &&
(this.leftPage.getElement().classList.add("--left"),
this.leftPage.clearSaved());
}
}
let x = (() => {
class t {
static GetSettings(t) {
const e = this._default;
if ((Object.assign(e, t), "stretch" !== e.size && "fixed" !== e.size))
throw new Error(
'Invalid size type. Available only "fixed" and "stretch" value'
);
if (e.width <= 0 || e.height <= 0)
throw new Error("Invalid width or height");
if (e.flippingTime <= 0) throw new Error("Invalid flipping time");
return (
e.minWidth <= 0 && (e.minWidth = e.width),
e.maxWidth < e.minWidth && (e.maxWidth = e.minWidth),
e.minHeight <= 0 && (e.minHeight = e.height),
e.maxHeight < e.minHeight && (e.maxHeight = e.minHeight),
e
);
}
}
return (
(t._default = {
startPage: 0,
size: "fixed",
width: 0,
height: 0,
minWidth: 0,
maxWidth: 0,
minHeight: 0,
maxHeight: 0,
drawShadow: !0,
flippingTime: 1e3,
usePortrait: !0,
startZIndex: 0,
autoSize: !0,
maxShadowOpacity: 1
}),
t
);
})();
i(0);
class w extends class {
constructor() {
this.events = {};
}
on(t, e) {
return (
t in this.events ? this.events[t].push(e) : (this.events[t] = [e]), this
);
}
off(t) {
delete this.events[t];
}
trigger(t, e, i = null) {
t in this.events &&
this.events[t].forEach((t) => {
t({ data: i, object: e });
});
}
} {
constructor(t, e) {
super(),
(this.isUserTouch = !1),
(this.isUserMove = !1),
(this.pages = null),
(this.currentPage = 0),
(this.setting = null);
try {
(this.setting = x.GetSettings(e)), (this.block = t);
} catch (t) {}
}
update() {
this.render.update(), this.pages.show(this.currentPage);
}
turnToPrevPage() {
const t = "portrait" === this.render.getOrientation() ? 1 : 2;
this.currentPage < t ||
((this.currentPage -= t), this.pages.show(this.currentPage));
}
turnToNextPage() {
const t = "portrait" === this.render.getOrientation() ? 1 : 2;
this.currentPage > this.pages.getPageCount() - t ||
((this.currentPage += t), this.pages.show(this.currentPage));
}
turnToPage(t) {
this.checkPage(t) &&
((this.currentPage = t), this.pages.show(this.currentPage));
}
flipNext(t = "top") {
this.flip.flipNext(t);
}
flipPrev(t = "top") {
this.flip.flipPrev(t);
}
loadFromImages(t) {
this.ui = new f(this.block, this, this.setting);
const e = this.ui.getCanvas();
(this.render = new p(this, this.setting, e)),
(this.flip = new c(this.render, this)),
(this.pages = new h(this, this.render, t)),
this.pages.load(),
this.render.start(),
(this.currentPage = this.setting.startPage),
this.pages.show(this.setting.startPage);
}
loadFromHTML(t) {
(this.ui = new m(this.block, this, this.setting, t)),
(this.render = new y(this, this.setting, this.ui.getDistElement(), t)),
(this.flip = new c(this.render, this)),
(this.pages = new l(this, this.render, this.ui.getDistElement(), t)),
this.pages.load(),
this.render.start(),
(this.currentPage = this.setting.startPage),
this.pages.show(this.setting.startPage);
}
updateState(t) {
this.trigger("changeState", this, t);
}
updatePage(t) {
this.trigger("flip", this, t);
}
updateOrientation(t) {
"landscape" === t
? (this.currentPage % 2 != 0 && this.currentPage--, this.update())
: (this.currentPage++, this.update()),
this.ui.setOrientationStyle(t),
this.trigger("changeOrientation", this, t);
}
getPageCount() {
return this.pages.getPageCount();
}
getCurrentPageIndex() {
return this.currentPage;
}
getCurrentPage() {
return this.pages.getPage(this.currentPage);
}
getPage(t) {
return this.pages.getPage(t);
}
getRender() {
return this.render;
}
getFlipObject() {
return this.flip;
}
getOrientation() {
return this.render.getOrientation();
}
getBoundsRect() {
return this.render.getRect();
}
getSettings() {
return this.setting;
}
getUI() {
return this.ui;
}
startUserTouch(t) {
(this.mousePosition = t), (this.isUserTouch = !0), (this.isUserMove = !1);
}
userMove(t, e) {
this.isUserTouch || e
? this.isUserTouch &&
a.GetDestinationFromTwoPoint(this.mousePosition, t) > 5 &&
((this.isUserMove = !0), this.flip.fold(t))
: this.flip.showCorner(t);
}
userStop(t, e = !1) {
this.isUserTouch &&
((this.isUserTouch = !1),
e || (this.isUserMove ? this.flip.stopMove() : this.flip.flip(t)));
}
checkPage(t) {
return t >= 0 && t < this.pages.getPageCount();
}
}
document.addEventListener("DOMContentLoaded", function () {
const t = new w(document.getElementById("canvasBookExample"), {
width: 550,
height: 733,
size: "stretch",
minWidth: 350,
maxWidth: 700,
minHeight: 467,
maxHeight: 933
});
t.loadFromImages([
"https://cdn.pixabay.com/photo/2015/05/03/14/40/woman-751236__340.jpg",
"https://cdn.pixabay.com/photo/2015/03/04/12/59/bells-flower-658751__340.jpg",
"https://cdn.pixabay.com/photo/2014/04/10/11/27/flower-320874__340.jpg",
"https://cdn.pixabay.com/photo/2017/04/12/23/23/wild-flower-2226095__340.jpg",
"https://cdn.pixabay.com/photo/2015/05/15/14/47/woman-768702__340.jpg",
"https://cdn.pixabay.com/photo/2015/02/23/20/49/flowers-646637__340.jpg",
"https://cdn.pixabay.com/photo/2016/07/12/17/30/flower-1512646__340.jpg",
"https://cdn.pixabay.com/photo/2020/03/10/15/54/dandelion-4919334__340.jpg",
"https://cdn.pixabay.com/photo/2020/04/29/16/10/vase-5109481__340.jpg",
"https://cdn.pixabay.com/photo/2014/02/10/00/32/rose-263234__340.jpg",
"https://cdn.pixabay.com/photo/2020/03/10/15/54/dandelion-4919334__340.jpg",
"https://cdn.pixabay.com/photo/2016/03/09/09/30/flowers-1245828__340.jpg",
"https://cdn.pixabay.com/photo/2012/03/03/23/59/flowers-21708__340.jpg",
"https://cdn.pixabay.com/photo/2015/01/07/10/24/aster-591311__340.jpg"
]);
const e = new w(document.getElementById("htmlBookExample"), {
width: 550,
height: 733,
size: "stretch",
minWidth: 350,
maxWidth: 700,
minHeight: 467,
maxHeight: 933,
autoSize: !0,
maxShadowOpacity: 0.5
}),
i = document.getElementById("htmlBook"),
s = document.getElementById("canvasBook"),
n = document.getElementById("buttonDemoSelection"),
o = n.querySelectorAll("button");
let h = e;
for (const a of o)
a.addEventListener("click", (o) => {
const a = n.querySelector(".btn-primary");
a.classList.remove("btn-primary"), a.classList.add("btn-secondary");
const r = o.target;
r.classList.add("btn-primary"), r.classList.remove("btn-secondary");
"html" === r.dataset.dest
? ((h = e),
(s.style.display = "none"),
(i.style.display = "block"),
e.getUI().update(),
e.update())
: ((h = t),
(s.style.display = "block"),
(i.style.display = "none"),
t.getUI().update(),
t.update());
});
document.querySelector(".btn-book-next").addEventListener("click", () => {
h.flipNext();
}),
document.querySelector(".btn-book-prev").addEventListener("click", () => {
h.flipPrev();
}),
t.on("flip", (e) => {
const i = parseInt(e.data.toString(), 10) + 1;
(document.querySelector(".page-count").innerHTML = i.toString(10)),
(document.querySelector(
".page-total"
).innerHTML = t.getPageCount().toString(10));
}),
e.on("flip", (t) => {
const i = parseInt(t.data.toString(), 10) + 1;
(document.querySelector(".page-count").innerHTML = i.toString(10)),
(document.querySelector(
".page-total"
).innerHTML = e.getPageCount().toString(10));
}),
e.loadFromHTML(document.querySelectorAll(".page"));
});
}
]);
</script>
</body>
</html>

Ketan joshi blogger

Books html 7

No comments:

Post a Comment