From 5df56647462f5c3ac08bc6664b383450359baaec Mon Sep 17 00:00:00 2001 From: kmacshane <93541206+kmacshane@users.noreply.github.com> Date: Thu, 9 Jun 2022 10:32:19 -0500 Subject: [PATCH 01/18] add test reader --- espark_reader/reader.css | 317 + espark_reader/reader.html | 101 + examples/input.html | 99 +- package-lock.json | 20916 +----------------------------------- src/rendition.js | 114 +- 5 files changed, 550 insertions(+), 20997 deletions(-) create mode 100644 espark_reader/reader.css create mode 100644 espark_reader/reader.html diff --git a/espark_reader/reader.css b/espark_reader/reader.css new file mode 100644 index 000000000..e3af29b24 --- /dev/null +++ b/espark_reader/reader.css @@ -0,0 +1,317 @@ +body { + margin: 0; + background: #fafafa; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #333; + + /*position: absolute;*/ + height: 100%; + width: 100%; + /*min-height: 800px;*/ +} + +#title { + width: 900px; + min-height: 18px; + margin: 10px auto; + text-align: center; + font-size: 16px; + color: #E2E2E2; + font-weight: 400; +} + +#title:hover { + color: #777; +} + +#viewer { + width: 900px; + height: 600px; + box-shadow: 0 0 4px #ccc; + padding: 10px 10px 0px 10px; + margin: 5px auto; + background: white; +} + +#viewer.spreads { + width: 900px; + height: 600px; + box-shadow: 0 0 4px #ccc; + border-radius: 5px; + padding: 0; + position: relative; + margin: 10px auto; + background: white; + top: calc(50vh - 400px); +} + +/* Smartphone - Portrait */ +@media only screen and (min-width: 320px) and (max-width: 667px) and (orientation: portrait) { + #viewer { + width: 320px; + height: 667px; + } +} + +/* Smartphone - Landscape */ +@media only screen and (min-width: 320px) and (max-width: 667px) and (orientation: landscape) { + #viewer { + width: 667px; + height: 320px; + } +} + +/* Tablet - Portrait and Landscape */ +@media only screen and (min-width: 667px) and (max-width: 1024px) { + #viewer { + width: 600px; + height: 600px; + } +} + +#viewer.spreads .epub-view>iframe { + background: white; +} + +#viewer.scrolled { + overflow: hidden; + width: 800px; + margin: 0 auto; + position: relative; + background: url('ajax-loader.gif') center center no-repeat; + box-shadow: 0 0 4px #ccc; + padding: 20px; + background: white; +} + +#viewer.scrolled .epub-view>iframe { + background: white; +} + +#prev { + left: 0; +} + +#next { + right: 0; +} + +#toc { + display: block; + margin: 10px auto; +} + +@media (min-width: 1000px) { + /*#viewer.spreads:after { + position: absolute; + width: 1px; + border-right: 1px #000 solid; + height: 90%; + z-index: 1; + left: 50%; + margin-left: -1px; + top: 5%; + opacity: .15; + box-shadow: -2px 0 15px rgba(0, 0, 0, 1); + content: ""; + } + + #viewer.spreads.single:after { + display: none; + }*/ + + #prev { + left: 40px; + } + + #next { + right: 40px; + } +} + +.arrow { + position: fixed; + top: 50%; + margin-top: -32px; + font-size: 64px; + color: #E2E2E2; + font-family: arial, sans-serif; + font-weight: bold; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + text-decoration: none; +} + +.navlink { + margin: 14px; + display: block; + text-align: center; + text-decoration: none; + color: #ccc; +} + +.arrow:hover, +.navlink:hover { + color: #777; +} + +.arrow:active, +.navlink:hover { + color: #000; +} + +#book-wrapper { + width: 480px; + height: 640px; + overflow: hidden; + border: 1px solid #ccc; + margin: 28px auto; + background: #fff; + border-radius: 0 5px 5px 0; + position: absolute; +} + +#book-viewer { + width: 480px; + height: 660px; + margin: -30px auto; + -moz-box-shadow: inset 10px 0 20px rgba(0, 0, 0, .1); + -webkit-box-shadow: inset 10px 0 20px rgba(0, 0, 0, .1); + box-shadow: inset 10px 0 20px rgba(0, 0, 0, .1); +} + +#book-viewer iframe { + padding: 40px 40px; +} + +#controls { + position: absolute; + bottom: 16px; + left: 50%; + width: 400px; + margin-left: -200px; + text-align: center; + display: none; +} + +#controls>input[type=range] { + width: 400px; +} + +#navigation { + width: 400px; + height: 100vh; + position: absolute; + overflow: auto; + top: 0; + left: 0; + background: #777; + -webkit-transition: -webkit-transform .25s ease-out; + -moz-transition: -moz-transform .25s ease-out; + -ms-transition: -moz-transform .25s ease-out; + transition: transform .25s ease-out; + +} + +#navigation.fixed { + position: fixed; +} + +#navigation h1 { + width: 200px; + font-size: 16px; + font-weight: normal; + color: #fff; + margin-bottom: 10px; +} + +#navigation h2 { + font-size: 14px; + font-weight: normal; + color: #B0B0B0; + margin-bottom: 20px; +} + +#navigation ul { + padding-left: 36px; + margin-left: 0; + margin-top: 12px; + margin-bottom: 12px; + width: 340px; +} + +#navigation ul li { + list-style: decimal; + margin-bottom: 10px; + color: #cccddd; + font-size: 12px; + padding-left: 0; + margin-left: 0; +} + +#navigation ul li a { + color: #ccc; + text-decoration: none; +} + +#navigation ul li a:hover { + color: #fff; + text-decoration: underline; +} + +#navigation ul li a.active { + color: #fff; +} + +#navigation #cover { + display: block; + margin: 24px auto; +} + +#navigation #closer { + position: absolute; + top: 0; + right: 0; + padding: 12px; + color: #cccddd; + width: 24px; +} + +#navigation.closed { + -webkit-transform: translate(-400px, 0); + -moz-transform: translate(-400px, 0); + -ms-transform: translate(-400px, 0); + transform: translate(-400px, 0); +} + +svg { + display: block; +} + +.close-x { + stroke: #cccddd; + fill: transparent; + stroke-linecap: round; + stroke-width: 5; +} + +.close-x:hover { + stroke: #fff; +} + +#opener { + position: absolute; + top: 0; + left: 0; + padding: 10px; + stroke: #E2E2E2; + fill: #E2E2E2; + +} + +#opener:hover { + stroke: #777; + fill: #777; +} \ No newline at end of file diff --git a/espark_reader/reader.html b/espark_reader/reader.html new file mode 100644 index 000000000..329cdfe97 --- /dev/null +++ b/espark_reader/reader.html @@ -0,0 +1,101 @@ + + + +
+ + +