From eae14bb93f0b34ef2b1c3a63ee7bf56dc29d0d55 Mon Sep 17 00:00:00 2001
From: BoHung Chiu <bohung@rulingcom.com>
Date: Fri, 21 Jul 2023 10:11:40 +0800
Subject: [PATCH] Add rwd preview pdf feature.

---
 app/views/publications/_viewer.html.erb | 1139 +++++++++++++++++++++--
 1 file changed, 1061 insertions(+), 78 deletions(-)

diff --git a/app/views/publications/_viewer.html.erb b/app/views/publications/_viewer.html.erb
index b76646d..f4f31d3 100644
--- a/app/views/publications/_viewer.html.erb
+++ b/app/views/publications/_viewer.html.erb
@@ -1,92 +1,1005 @@
-<div class="publication">
-    <div id="magazine">
+<style type="text/css">
+    .flip-book {
+        position: relative;
+        height: 100%;
+    }
+
+    .flip-book .view {
+        text-align: center;
+        height: 100%;
+    }
+
+    .flip-book .view .fnav {
+    }
+
+    .flip-book .view .prev, .flip-book .view .next {
+        position: absolute;
+        top: 50%;
+        transform: translate(0, -50%);
+        z-index: 100;
+    }
+
+    .flip-book .view .prev {
+        left: 20px;
+    }
+
+    .flip-book .view .next {
+        right: 20px;
+    }
+
+
+    .flip-book .view .fnav a {
+        font-size: 6em;
+        color: #666;
+    }
+    @media screen and (max-width:768px) {
+        .flip-book .view .fnav a {
+            font-size: 3em;
+        }
+    }
+    .flip-book .view .fnav a:hover , .flip-book .view .fnav a.hover-class {
+        cursor: pointer;
+        text-shadow: 0 0 7px #000;
+    }
+
+    .flip-book .view .fnav a:active {
+        font-size: 5.83em;
+    }
+
+    .flip-book .view .fnav .hidden {
+        display: none;
+    }
+
+    .flip-book .view .fnav .active {
+        color: #555;
+    }
+
+    .flip-book .view .fnav .disabled {
+        color: #aaa;
+    }
+
+    .flip-book .view .fnav .disabled:hover , .flip-book .view .fnav .disabled.hover-class {
+        cursor: not-allowed;
+        text-shadow: none;
+    }
+
+    .flip-book .view .loading-progress {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .flip-book .view .loading-progress.hidden {
+        display: none;
+    }
+
+    .flip-book .loading-progress .progress {
+        background-color: #555;
+        background-image: none;
+        width: 50px;
+        height: 50px;
+        margin: 0 auto;
+        border-radius: 30px;
+        behavior: url(/assets/ie_support/PIE2/PIE.htc);
+        padding: 5px;
+        box-shadow: 0px 0px 3px #000;
+        margin-bottom: 10px;
+    }
+
+    .flip-book .loading-progress .progress::after {
+        content: ' ';
+        display: block;
+        width: 100%;
+        height: 100%;
+        background-size: contain;
+        background-image: url(/assets/flipbook/light-loader.gif);
+    }
+
+    .flip-book .page-loading {
+        width: 50px;
+        height: 50px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 1;
+    }
+
+    .flip-book .page-loading.hidden {
+        display: none;
+    }
+
+    .flip-book .page-loading::after {
+        content: ' ';
+        display: block;
+        width: 100%;
+        height: 100%;
+        background-size: contain;
+        background-image: url(/assets/flipbook/light-loader.gif);
+    }
+
+    .flip-book .loading-progress .caption {
+        background-color: #555;
+        border: 1px solid #333;
+        padding: 7px 10px;
+        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+        font-size: 0.83em;
+        border-radius: 5px;
+        behavior: url(/assets/ie_support/PIE2/PIE.htc);
+        font-style: italic;
+        color: #eee;
+    }
+
+    .flip-book .controls .fnavbar {
+        margin: 0 auto;
+        opacity: 0.3;
+        transition: opacity 2s ease-in-out 3s;
+    }
+
+    .flip-book .controls .fnavbar:hover , .flip-book .controls .fnavbar.hover-class {
+        opacity: 1;
+        transition: opacity 1s ease;
+    }
+
+
+
+    .ctrl {
+        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    }
+    .ctrl ul {
+        margin: 0;
+        padding: 0;
+    }
+    .ctrl .fnavbar {
+        text-align: center;
+        background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%);
+        -pie-background: linear-gradient(to bottom,#3c3c3c 0,#222 100%);
+        behavior: url(/assets/ie_support/PIE2/PIE.htc);
+        background-repeat: repeat-x;
+        padding: 3px;
+        overflow: visible;
+        background-color: #3c3c3c;
+    }
+    .ctrl .fnavbar a {
+        text-decoration: none;
+        font-size: 0.875em;
+    }
+    .ctrl .fnavbar .fnav {
+        display: inline-block;
+        text-align: left;
+    }
+    .ctrl .fnavbar .fnav li{
+        font-size: 0.75em;
+        margin: 0;
+        width: auto;
+    }
+    .ctrl .fnavbar .fnav .fnav-item {
+        display: inline-block;
+    }
+    .ctrl .fnavbar .fnav .hidden {
+        display: none;
+    }
+    .ctrl .fnavbar .fnav .fnav-item>a {
+        padding: 10px;
+        display: inline-block;
+        color: #ccc;
+    }
+    .ctrl .fnavbar .fnav>.active>a {
+        color: #fff;
+    }
+    .ctrl .fnavbar .fnav .fnav-item>a:hover , .ctrl .fnavbar .fnav .fnav-item>a.hover-class {
+        color: #fff;
+        cursor: pointer;
+    }
+    .ctrl .fnavbar .fnav .fnav-item>a:active {
+        text-shadow: 0 0 2px #fff;
+    }
+    .ctrl .fnavbar .fnav>.disabled>a {
+        color: #888;
+    }
+    .ctrl .fnavbar .fnav>.disabled>a:hover , .ctrl .fnavbar .fnav>.disabled>a.hover-class {
+        color: #888;
+        cursor: not-allowed;
+    }
+    .ctrl .fnavbar .fnav>.active {
+        background: #222;
+    }
+
+    .ctrl .fnavbar .fnav .dropdown, .ctrl .fnavbar .fnav .dropup {
+        position: relative;
+    }
+    .ctrl .fnavbar .fnav .dropdown .menu {
+        top: 100%;
+        box-shadow: 3px 0 3px #222;
+    }
+    .ctrl .fnavbar .fnav .dropdown .caret {
+        display: inline-block;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-top: 5px solid #ccc;
+    }
+    .ctrl .fnavbar .fnav .dropup .menu {
+        bottom: 100%;
+        box-shadow: 3px 0 3px #222;
+    }
+    .ctrl .fnavbar .fnav .dropup .caret {
+        display: inline-block;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-bottom: 5px solid #ccc;
+    }
+    .ctrl .fnavbar .menu {
+        position: absolute;
+        border: 1px solid #444;
+        background-color: #222;
+        z-index: 10;
+        min-width: 160px;
+    }
+    .ctrl .fnavbar .menu li {
+        display: block;
+        padding: 5px 10px;
+    }
+    .ctrl .fnavbar .menu .divider {
+        height: 1px;
+        background-color: #444;
+        padding: 0;
+        margin: 5px 0;
+    }
+    .ctrl .fnavbar .menu .active {
+        background-color: #444;
+    }
+    .ctrl .fnavbar .menu .active:hover , .ctrl .fnavbar .menu .active.hover-class {
+        /*background-color: #444;*/
+    }
+    .ctrl .fnavbar .menu li:hover , .ctrl .fnavbar .menu li.hover-class {
+        background-color: #333;
+        cursor: pointer;
+    }
+    .ctrl .fnavbar .menu li a {
+        color: #fff;
+    }
+    .ctrl .fnavbar .menu .disabled a {
+        color: #aaa;
+        cursor: not-allowed;
+    }
+
+    .ctrl .fnavbar .menu .icon {
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        text-align: center;
+    }
+
+    .ctrl .pages {
+        padding: 0 10px;
+        display: inline-block;
+    }
+
+    .ctrl .pages .number, .ctrl .pages .amount {
+        width: 50px;
+        height: 20px;
+        text-align: center;
+        display: inline-block;
+        font-size: 0.92em;
+        border: 0;
+        color: #000;
+        background-color: #ccc;
+        font-weight: bold;
+        border-radius: 0;
+        margin: 0;
+        padding: 2px;
+    }
+
+    .ctrl .pages .number {
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+        background-color: #ddd;
+    }
+
+    .ctrl .pages .amount {
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+    }
+
+    /* floating window */
+
+    .flip-book .float-wnd {
+        position: absolute;
+        bottom: 50px;
+        left: 10px;
+        border-radius: 5px 5px 0 0;
+        behavior: url(/assets/ie_support/PIE2/PIE.htc);
+        background-color: #1a1a1a;
+        width: 300px;
+        z-index: 100;
+        box-shadow: 3px 0 3px #222;
+    }
+
+    .flip-book .float-wnd.hidden {
+        display: none;
+    }
+
+    .flip-book .float-wnd .header {
+        border-radius: 4px 4px 0 0;
+        behavior: url(/assets/ie_support/PIE2/PIE.htc);
+        background-color: #3c3c3c;
+        background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%);
+        -pie-background: linear-gradient(to bottom,#3c3c3c 0,#222 100%);
+        behavior: url(/assets/ie_support/PIE2/PIE.htc);
+        background-repeat: repeat-x;
+        padding: 7px 10px;
+        border: 1px solid #444;
+        border-bottom: none;
+        color: #fff;
+        font-weight: bold;
+        cursor: move;
+    }
+
+    .flip-book .float-wnd .header .close {
+        top: 5px;
+        right: 8px;
+        font-size: 0.875em;
+        position: absolute;
+        color: #ccc;
+    }
+
+    .flip-book .float-wnd .header .close:hover , .flip-book .float-wnd .header .close.hover-class {
+        color: #fff;
+    }
+    .flip-book .float-wnd .header .close:active {
+        font-size: 0.75em;
+        padding-top: 1px;
+        padding-right: 1px;
+    }
+
+    .flip-book .float-wnd .body {
+        border: 1px solid #444;
+        border-top: none;
+    }
+
+    /* toc */
+
+    .ctrl .toc {
+        font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
+    }
+
+    .ctrl .toc a {
+        text-decoration: none;
+    }
+
+    .ctrl .toc .hidden {
+        display: none;
+    }
+
+    .ctrl .toc .toc-menu {
+        padding: 5px 10px;
+    }
+
+    .ctrl .toc .toc-menu ul {
+        list-style: none;
+        padding: 0;
+    }
+    .ctrl .toc .toc-menu li {
+        display: inline-block;
+        padding-right: 5px;
+    }
+    .ctrl .toc .toc-menu a {
+        color: #ccc;
+        font-size: 0.875em;
+    }
+    .ctrl .toc .toc-menu a:hover , .ctrl .toc .toc-menu a.hover-class {
+        color: #fff;
+    }
+    .ctrl .toc .toc-menu a:active {
+        text-shadow: 0 0 2px #fff;
+    }
+    .ctrl .toc .toc-menu .active a {
+        color: #fff;
+    }
+
+
+    .ctrl .toc .toc-view {
+        padding: 10px 0;
+        max-height: 80vh;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    .ctrl .toc .toc-view::-webkit-scrollbar {
+        width: 7px;
+        height: 7px;
+    }
+    .ctrl .toc .toc-view::-webkit-scrollbar-button {
+        width: 0;
+        height: 0;
+    }
+    .ctrl .toc .toc-view::-webkit-scrollbar-thumb {
+        background: #4a4a4a;
+        border-radius: 2px;
+        behavior: url(/assets/ie_support/PIE2/PIE.htc);
+
+    }
+    .ctrl .toc .toc-view::-webkit-scrollbar-thumb:hover , .ctrl .toc .toc-view::-webkit-scrollbar-thumb.hover-class {
+        background: #3a3a3a;
+    }
+    .ctrl .toc .toc-view::-webkit-scrollbar-thumb:active {
+        background: #5a5a5a;
+    }
+    .ctrl .toc .toc-view::-webkit-scrollbar-track {
+        background: #2a2a2a;
+        border-left: 2px solid #1a1a1a;
+        border-right: 2px solid #1a1a1a;
+    }
+
+    .ctrl .bookmarks .white-space, .ctrl .bookmarks .togle, .ctrl .bookmarks .togle i {
+        width: 18px;
+        height: 18px;
+    }
+
+    .ctrl .bookmarks .white-space {
+        display: inline-block;
+    }
+
+    .ctrl .bookmarks li {
+        width: 10000px;
+    }
+
+    .ctrl .bookmarks .item .area {
+        padding: 2px 0;
+    }
+
+    .ctrl .bookmarks .level-0 .area {
+        padding-left: 5px;
+    }
+    .ctrl .bookmarks .level-1 .area {
+        padding-left: 10px;
+    }
+    .ctrl .bookmarks .level-2 .area {
+        padding-left: 15px;
+    }
+    .ctrl .bookmarks .level-3 .area {
+        padding-left: 20px;
+    }
+    .ctrl .bookmarks .level-4 .area {
+        padding-left: 25px;
+    }
+
+    .ctrl .bookmarks .item .area:hover , .ctrl .bookmarks .item .area.hover-class {
+        background-color: #444;
+    }
+
+    .ctrl .bookmarks .item .area:active {
+        background-color: #333;
+    }
+
+    .ctrl .bookmarks .item a {
+        color: #fff;
+        font-size: 0.875em;
+    }
+
+    .ctrl .bookmarks ul {
+        list-style: none;
+        padding: 0;
+    }
+
+    .ctrl .bookmarks .togle {
+        display: inline-block;
+        text-align: center;
+        position: relative;
+    }
+
+    .ctrl .bookmarks .togle::before {
+        content: ' ';
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: 50%;
+        behavior: url(/assets/ie_support/PIE2/PIE.htc);
+        border: 0px solid #222;
+        transition: border 0.2s;
+    }
+
+    .ctrl .bookmarks .togle:active::before {
+        border: 12px solid #222;
+        transition: border 0.05s;
+    }
+
+    .ctrl .bookmarks .togle i {
+        transform: rotateZ(0deg);
+        transition: transform 0.2s;
+    }
+
+    .ctrl .bookmarks .togle.minimized i {
+        transform: rotateZ(90deg);
+        transition: transform 0.2s;
+    }
+
+
+    .ctrl .thumbnails .item a {
+        color: #fff;
+        font-size: 0.875em;
+    }
+
+    .ctrl .thumbnails {
+        padding: 10px 0;
+        text-align: center;
+    }
+    .ctrl .thumbnails .thumbnail {
+        height: 170px;
+        margin-bottom: 5px;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+    .ctrl .thumbnails .loading {
+        position: relative;
+    }
+    .ctrl .thumbnails .loading::after {
+        content: ' ';
+        position: absolute;
+        width: 40px;
+        height: 40px;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        background-size: contain;
+        background-image: url(/assets/flipbook/light-loader.gif);
+    }
+    .ctrl .thumbnails .item {
+        display: inline-block;
+        width: 128px;
+        padding: 5px 5px;
+        border: 1px solid transparent;
+        border-radius: 3px;
+        behavior: url(/assets/ie_support/PIE2/PIE.htc);
+
+    }
+    .ctrl .thumbnails .item:hover , .ctrl .thumbnails .item.hover-class {
+        border: 1px solid #555;
+        background-color: #444;
+    }
+    .ctrl .thumbnails .heading {
+        overflow: hidden;
+        height: 20px;
+    }
+
+
+    .ctrl .search .result {
+        padding: 7px 10px;
+        cursor: pointer;
+    }
+
+    .ctrl .search .result:hover , .ctrl .search .result.hover-class {
+        background-color: #444;
+    }
+
+    .ctrl .search .results a {
+        color: #fff;
+        font-size: 0.875em;
+    }
+
+    .ctrl .search .query {
+        padding: 0 10px;
+        padding-bottom: 10px;
+    }
+
+    .ctrl .search .query input {
+        width: 100%;
+    }
+
+    .ctrl .search .status {
+        text-align: center;
+        color: #ccc;
+        font-size: 0.75em;
+    }
+    .fnav .prev {
+        left: 20px;
+    }
+    .fnav .next {
+        right: 20px;
+    }
+    .fnav a {
+        font-size: 6em;
+        color: #666;
+    }
+    .fnav .prev, .fnav .next {
+        position: absolute;
+        top: 50%;
+        transform: translate(0, -50%);
+        z-index: 100;
+    }
+    #magazine_block li [class^="icon"], #magazine_block li [class*=" icon"]{
+        width: auto;
+    }
+</style>
+<div id="magazine_block" class="flip-book">
+    <div id="magazine_container"> 
+        <div id="magazine">
+        </div>
+        <div class="view">
+            <div class="fnav">
+              <div class="prev">
+                <a class="cmdBackward disabled" href="javascript:;" title="Previous page"><span class="icon"><i class="fa fa-angle-left" title="Previous page"></i></span></a>
+              </div>
+              <div class="next">
+                <a class="cmdForward" href="javascript:;" title="Next page"><span class="icon"><i class="fa fa-angle-right" title="Next page"></i></span></a>
+              </div>
+            </div>
+        </div>
+    </div>
+    <div class="controls">
+        <div class="ctrl js-center" style="left: 0px;">
+          <nav class="fnavbar">
+            <ul class="fnav">
+              <li class="fnav-item cmdZoomIn"><a href="javascript:;" title="Zoom in"><span class="icon"><i class="fa fa-search-plus" title="Zoom in"></i></span></a></li>
+              <li class="fnav-item cmdZoomOut disabled"><a href="javascript:;" title="Zoom out"><span class="icon"><i class="fa fa-search-minus" title="Zoom out"></i></span></a></li>
+              <li class="fnav-item cmdDefaultZoom active"><a href="javascript:;" title="Fit view"><span class="icon"><i class="fa fa-compress" title="Fit view"></i></span></a></li>
+              <li class="fnav-item cmdToc"><a href="javascript:;" title="Table of contents"><span class="icon"><i class="fa fa-bookmark" title="Table of contents"></i></span></a></li>
+              <li class="fnav-item cmdBackward disabled"><a href="javascript:;" title="Previous page"><span class="icon"><i class="fa fa-backward" title="Previous page"></i></span></a></li>
+              <li class="fnav-item">
+                <div class="pages">
+                  <input type="text" class="number inpPage" maxlength="4" placeholder="1">
+                  <input type="text" class="amount inpPages" readonly="" maxlength="4" placeholder="1">
+                </div>
+              </li>
+              <li class="fnav-item cmdForward"><a href="javascript:;" title="Next page"><span class="icon"><i class="fa fa-forward" title="Next page"></i></span></a></li>
+              <li class="fnav-item cmdSave"><a href="<%= url %>" title="Download" download="<%= URI.decode(File.basename(url)) %>"><span class="icon"><i class="fa fa-download" title="Download"></i></span></a></li>
+              <li class="fnav-item cmdFullScreen"><a href="javascript:;" title="Full screen"><span class="icon"><i class="fa fa-arrows-alt" title="Full screen"></i></span></a></li>
+              <li class="dropup fnav-item toggle widSettings">
+                <a href="javascript:;" title="Settings"><div class="icon-caret"><span class="icon"><i class="fa fa-cog" title="Settings"></i> <i class="caret"></i></span></div></a>
+                <ul class="menu hidden">
+                  <li class="cmdSinglePage"><a href="javascript:;" title="Single page"><span class="icon"><i class="fa fa-file-o"></i></span> Single page</a></li>
+                </ul>
+              </li>
+            </ul>
+          </nav>
+        </div>
+    </div>
+    <div class="float-wnd hidden">
+        <div class="body">
+            <div class="ctrl">
+                <div class="toc">
+                    <div class="widThumbnails toc-view">
+                      <div class="thumbnails"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-    <ul class="button-mid">
-        <i class="fa fa-angle-left prev-button" aria-label="上一張"></i>
-        <i class="fa fa-angle-right next-button" aria-label="下一張"></i>
-    </ul>
 </div>
 <%= stylesheet_link_tag "publications/pdf-turn.css" %>
 <%= javascript_include_tag "publications/pdf/pdf.worker.js" %>
 <%= javascript_include_tag "publications/pdf/pdf.js" %>
 <%= javascript_include_tag "publications/turn.min.js" %>
 <%= javascript_include_tag "publications/pdf-turn.js" %>
-
 <style type="text/css">
-div.flip-control {
-  width: 400px;
-  text-align: center;
-}
+    #magazine_container {
+        overflow: hidden;
+    }
+    #magazine {
+      margin: auto;
+      width: 100%;
+    }
 
-div.flip-control a {
-  margin-left: 10px;
-}
-#magazine {
-  margin: auto;
-  width: 100%;
-}
+    #magazine .turn-page {
+      background-color: #ccc;
+      background-size: 100% 100%;
+    }
 
-#magazine .turn-page {
-  background-color: #ccc;
-  background-size: 100% 100%;
-}
+    #magazine .loader {
+      background-image: url(https://cdn.jsdelivr.net/gh/Qiu-Weidong/blog/resources/images/loader.gif);
+      width: 24px;
+      height: 24px;
+      display: block;
+      position: absolute;
+      top: 238px;
+      left: 188px;
+    }
 
-#magazine .loader {
-  background-image: url(https://cdn.jsdelivr.net/gh/Qiu-Weidong/blog/resources/images/loader.gif);
-  width: 24px;
-  height: 24px;
-  display: block;
-  position: absolute;
-  top: 238px;
-  left: 188px;
-}
+    #magazine .odd {
+      background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
+      background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
+      background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
+      background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
 
-#magazine .odd {
-  background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
-  background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
-  background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
-  background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
+    }
 
-}
-
-#magazine .even {
-  background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
-  background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
-  background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
-  background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
-}
-.publication .button-mid {
-  display: block;
-}
+    #magazine .even {
+      background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
+      background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
+      background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
+      background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
+    }
 </style>
 <script type="text/javascript">
   $(document).ready(function(){
+    function ScrollZoom(container,max_scale,factor){
+        var target = container.children().first();
+        var size = {w:target.width(),h:target.height()};
+        var pos = {x:0,y:0};
+        var scale = 1;
+        var zoom_target = {x:0,y:0};
+        var zoom_point = {x:0,y:0};
+        var curr_tranform = target.css('transition');
+        var last_mouse_position = { x:0, y:0 };
+        var drag_started = 0;
+     
+        target.css('transform-origin','0 0')
+        target.on("mousewheel DOMMouseScroll",scrolled)
+        target.on('mousemove', moved)
+        target.on('mousedown', function() {
+            drag_started = 1;
+            target.css({'cursor':'move', 'transition': 'transform 0s'});
+            /* Save mouse position */
+            last_mouse_position = { x: event.pageX, y: event.pageY};
+        });
+     
+        target.on('mouseup mouseout', function() {
+            drag_started = 0;
+            target.css({'cursor':'default', 'transition': curr_tranform});
+        });
+     
+        function scrolled(e){
+            var offset = container.offset()
+            zoom_point.x = e.pageX - offset.left;
+            zoom_point.y = e.pageY - offset.top;
+            e.preventDefault();
+            var delta = e.delta || e.originalEvent.wheelDelta;
+            if (delta === undefined) {
+              //we are on firefox
+              delta = e.originalEvent.detail;
+            }
+            delta = Math.max(-1,Math.min(1,delta)) // cap the delta to [-1,1] for cross browser consistency
+     
+            // determine the point on where the slide is zoomed in
+            zoom_target.x = (zoom_point.x - pos.x)/scale;
+            zoom_target.y = (zoom_point.y - pos.y)/scale;
+     
+            // apply zoom
+            scale += delta * factor * scale;
+            scale = Math.max(1,Math.min(max_scale,scale));
+     
+            // calculate x and y based on zoom
+            pos.x = -zoom_target.x * scale + zoom_point.x;
+            pos.y = -zoom_target.y * scale + zoom_point.y;
+     
+            update();
+        }
+
+        target.bind('zoom', function(event, delta){
+            if(scale == 1){
+                zoom_point.x = size.w / 2 - parseFloat(flipbook.css('margin-left')) / 2;
+                zoom_point.y = size.h / 2;
+            }
+
+            // determine the point on where the slide is zoomed in
+            zoom_target.x = (zoom_point.x - pos.x)/scale;
+            zoom_target.y = (zoom_point.y - pos.y)/scale;
+     
+            // apply zoom
+            scale += delta * factor * scale
+            scale = Math.max(1,Math.min(max_scale,scale))
+     
+            // calculate x and y based on zoom
+            pos.x = -zoom_target.x * scale + zoom_point.x
+            pos.y = -zoom_target.y * scale + zoom_point.y
+     
+            update();
+        });
+     
+        function moved(event){
+            if(drag_started == 1) {
+                var current_mouse_position = { x: event.pageX, y: event.pageY};
+                var change_x = current_mouse_position.x - last_mouse_position.x;
+                var change_y = current_mouse_position.y - last_mouse_position.y;
+     
+                /* Save mouse position */
+                last_mouse_position = current_mouse_position;
+                //Add the position change
+                pos.x += change_x;
+                pos.y += change_y;
+     
+            update()
+            }
+        }
+     
+        function update(){
+            // Make sure the slide stays in its container area when zooming out
+            if(pos.x>0)
+                pos.x = 0;
+            if(pos.x+size.w*scale<size.w)
+                pos.x = -size.w*(scale-1);
+            if(pos.y>0)
+                pos.y = 0;
+            if(pos.y+size.h*scale<size.h)
+                pos.y = -size.h*(scale-1);
+            target.css('transform','translate('+(pos.x)+'px,'+(pos.y)+'px) scale('+scale+','+scale+')');
+            if(scale == 1){
+                target.trigger('zoom-min');
+            }else if(scale == max_scale){
+                target.trigger('zoom-max');
+            }else{
+                target.trigger('zoom-callback');
+            }
+        }
+    }
+    var flipbook = $('#magazine');
+    window.flipbook = flipbook
+    var flipbook_container = $('#magazine_block');
+    flipbook_container.find('.widSettings > a').on('click', function(){
+        $(this).siblings('ul.menu').toggleClass('hidden');
+    })
+    flipbook_container.find('.widSettings ul.menu li').on('click', function(){
+        $(this).parent().addClass('hidden');
+    })
+    var current_height_ratio = null;
+    var init_thumbnail = false;
+    var single_page = false;
+    var isInFullScreen = false;
     var url = '<%= url %>';
     
     const CMAP_PACKED = true;
     const ENABLE_XFA = true;
-    let loadingTask = pdfjsLib.getDocument({
+    var loadingTask = pdfjsLib.getDocument({
         url,
         cMapPacked: CMAP_PACKED,
         enableXfa: ENABLE_XFA,
         disableFontFace: true
     });
-    let pdfDoc = null, scale = 2.5;
-    const container = document.getElementById('magazine');
+    var pdfDoc = null, scale = 2.5;
+    const container = flipbook[0];
+    flipbook.bind('zoom-min', function(){
+        flipbook_container.find('.cmdZoomOut').addClass('disabled');
+        flipbook_container.find('.cmdDefaultZoom').addClass('active');
+    })
+    flipbook.bind('zoom-max', function(){
+        flipbook_container.find('.cmdZoomIn').addClass('disabled');
+    })
+    flipbook.bind('zoom-callback', function(){
+        flipbook_container.find('.cmdZoomOut').removeClass('disabled');
+        flipbook_container.find('.cmdZoomIn').removeClass('disabled');
+        flipbook_container.find('.cmdDefaultZoom').removeClass('active');
+    })
+    flipbook_container.find('.cmdZoomIn a').on('click', function(){
+        var _this = $(this);
+        if(_this.hasClass('disabled')){
+            return;
+        }
+        flipbook.trigger('zoom', 1);
+    })
+    flipbook_container.find('.cmdZoomOut a').on('click', function(){
+        var _this = $(this);
+        if(_this.hasClass('disabled')){
+            return;
+        }
+        flipbook.trigger('zoom', -1);
+    })
+    flipbook_container.find('.cmdDefaultZoom a').on('click', function(){
+        var _this = $(this);
+        if(_this.hasClass('disabled')){
+            return;
+        }
+        flipbook.trigger('zoom', -5);
+        flipbook_container.find('.cmdZoomIn').removeClass('disabled');
+    })
+    function makeThumb(page) {
+        var canvas = document.createElement("canvas");
+        const ctx = canvas.getContext('2d');
+        var viewport = page.getViewport({ scale: scale });
+        // Support HiDPI-screens.
+        var outputScale = (window.devicePixelRatio || 1) / 4;
+        canvas.width = Math.floor(viewport.width * outputScale);
+        canvas.height = Math.floor(viewport.height * outputScale);
+        canvas.style.width = "100%";
+        var transform = outputScale !== 1
+            ? [outputScale, 0, 0, outputScale, 0, 0]
+            : null;
 
+        // Render PDF page into canvas context
+        var renderContext = {
+            canvasContext: ctx,
+            transform: transform,
+            viewport: viewport,
+        };
 
+        return page.render(renderContext).promise.then(function () {
+            return canvas;
+        });
+    }
+    function get_thumbnail(){
+        var pages = []; while (pages.length < pdfDoc.numPages) pages.push(pages.length + 1);
+        return Promise.all(pages.map(function (num) {
+            // create a div for each page and build a small canvas for it
+            var div = flipbook_container.find('.thumbnails');
+            var item_div = $('<div class="item" data-page="'+num+'"><a href="javascript:;"><div class="thumbnail loading"></div></a><div class="heading"><a href="javascript:;" title="'+num+'">'+num+'</a></div></div>');
+            div.append(item_div);
+            item_div.on('click', function(){
+                flipbook.turn('page', $(this).data('page'));
+            })
+            return pdfDoc.getPage(num).then(makeThumb).then(function (canvas) {
+                item_div.find('.thumbnail').append(canvas).removeClass('loading');
+            });
+        }));
+    }
+    flipbook_container.find('.cmdToc').on('click', function(){
+        var _this = $(this);
+        var toc_active = _this.hasClass('active');
+        if(!init_thumbnail){
+            get_thumbnail();
+        }
+        if(toc_active){
+            _this.removeClass('active');
+            flipbook_container.find('.float-wnd').addClass('hidden');
+        }else{
+            flipbook_container.find('.float-wnd').css('bottom', flipbook_container.find('.controls').height() + 10 + 'px');
+            _this.addClass('active');
+            flipbook_container.find('.float-wnd').removeClass('hidden');
+        }
+    })
+    function toggleFullscreen(docElm) {   
+        if (!isInFullScreen) {
+            if (docElm.requestFullscreen) {
+                docElm.requestFullscreen();
+            } else if (docElm.mozRequestFullScreen) {
+                docElm.mozRequestFullScreen();
+            } else if (docElm.webkitRequestFullScreen) {
+                docElm.webkitRequestFullScreen();
+            } else if (docElm.msRequestFullscreen) {
+                docElm.msRequestFullscreen();
+            }
+            isInFullScreen = true;
+        } else {
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            } else if (document.webkitExitFullscreen) {
+                document.webkitExitFullscreen();
+            } else if (document.mozCancelFullScreen) {
+                document.mozCancelFullScreen();
+            } else if (document.msExitFullscreen) {
+                document.msExitFullscreen();
+            }
+            isInFullScreen = false;
+        }
+    }
+    function exitHandler()
+    {
+        if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement)
+        {
+            var fullscreen_btn = flipbook_container.find('.cmdFullScreen');
+            if(fullscreen_btn.hasClass('active')){
+                fullscreen_btn.removeClass('active');
+                flipbook_container.removeClass('fullscreen');
+                isInFullScreen = false;
+                flipbook.trigger('resize_func');
+            }
+        }
+    }
+    if (document.addEventListener){
+        document.addEventListener('fullscreenchange', exitHandler, false);
+        document.addEventListener('mozfullscreenchange', exitHandler, false);
+        document.addEventListener('MSFullscreenChange', exitHandler, false);
+        document.addEventListener('webkitfullscreenchange', exitHandler, false);
+    }
+    flipbook_container.find('.cmdFullScreen').on('click', function(){
+        var _this = $(this);
+        _this.toggleClass('active');
+        flipbook_container.toggleClass('fullscreen');
+        toggleFullscreen(flipbook_container[0]);
+        flipbook.trigger('resize_func');
+    })
     loadingTask.promise.then(function (pdfDoc_) {
         pdfDoc = pdfDoc_;
-
-        // 首先来个封面
+        window.pdfDoc = pdfDoc;
+        // 封面
         const cover = document.createElement('div');
         cover.className = 'hard cover';
         container.appendChild(cover);
         renderPage(1).then(canvas => {
             cover.appendChild(canvas);
             
-            // 这里设置一下 #magazine 的长宽
-            // 按照 pdf的长宽比例来设置#magazine的高度。
+            // 設置 #magazine 的長寬
+            // 按照 pdf的長寬比例來設定#magazine的高度。
             const height = container.clientWidth / 2 * canvas.height / canvas.width;
             container.style.height = height + 'px';
 
@@ -95,16 +1008,33 @@ div.flip-control a {
             container.appendChild(cover2);
             renderPage(2).then(canvas => {
                 cover2.appendChild(canvas);
-
+                var numPages = pdfDoc.numPages; // 總頁數
+                flipbook_container.find('.inpPages').attr('placeholder', numPages.toString());
                 $('#magazine').turn({
-                    pages: pdfDoc.numPages,
+                    pages: numPages,
                     display: 'double',
                     acceleration: true,
+                    autoCenter: true,
                     gradients: !$.isTouch,
                     elevation: 50,
                     when: {
-                        // turned: function (e, page) {
-                        // },
+                        turned: function (e, page) {
+                            if(!single_page && page != 1){
+                                page -= page % 2;
+                            }
+                            flipbook_container.find('.inpPage').attr('placeholder', page).val(page);
+                            if(page == 1){
+                                flipbook_container.find('.cmdBackward').addClass('disabled'); 
+                               
+                            }else{
+                                flipbook_container.find('.cmdBackward').removeClass('disabled');
+                            }
+                            if((single_page && page == numPages) || (!single_page && page == (numPages - 1))){
+                                flipbook_container.find('.cmdForward').addClass('disabled');
+                            }else{
+                                flipbook_container.find('.cmdForward').removeClass('disabled');
+                            }
+                        },
 
                         turning: function (e, page, view) {
                             const range = $(this).turn('range', page);
@@ -116,36 +1046,53 @@ div.flip-control a {
                     }
                 });
 
-                // 如果要从右往左翻书，则取消注释
+                // 如果要從右往左翻書，則取消註解
                 // $('#magazine').turn('page', pdfDoc.numPages);
+                var scroll_zoom = new ScrollZoom($('#magazine_container'),5,0.5);
+                flipbook_container.find('.inpPage').on('input', function(){
+                    var _this = $(this);
+                    var page = parseInt(_this.val());
+                    page = Math.max(1, Math.min(page, numPages));
+                    flipbook.turn('page', page);
+                })
+                flipbook_container.find('.cmdSinglePage').on('click', function(){
+                    single_page = !single_page;
+                    $(this).toggleClass('active');
+                    if(single_page){
+                        flipbook.turn('display', 'single');
+                    }else{
+                        flipbook.turn('display', 'double');
+                    }
+                    flipbook.trigger('resize_func');
+                });
+                flipbook.trigger('resize');
             });
         });
     });
-
-    // 返回一个渲染好的canvas
+    // 回傳一個渲染好的canvas
     function renderPage(num) {
         return new Promise(function (resolve, _reject) {
 
             const canvas = document.createElement('canvas');
             const ctx = canvas.getContext('2d');
 
-            const realPage = num   ; // 从左往右翻书
-            // const realPage = pdfDoc.numPages - num + 1; // 從右邊往左翻書
+            const realPage = num; // 從左往右翻書
+            // const realPage = pdfDoc.numPages - num + 1; // 從右往左翻書
             pdfDoc.getPage(realPage).then(function (page) {
-                let viewport = page.getViewport({ scale: scale, });
+                var viewport = page.getViewport({ scale: scale });
                 // Support HiDPI-screens.
-                let outputScale = window.devicePixelRatio || 1;
+                var outputScale = window.devicePixelRatio || 1;
 
                 canvas.width = Math.floor(viewport.width * outputScale);
                 canvas.height = Math.floor(viewport.height * outputScale);
                 canvas.style.width = "100%";
-
-                let transform = outputScale !== 1
+                current_height_ratio = viewport.height / viewport.width;
+                var transform = outputScale !== 1
                     ? [outputScale, 0, 0, outputScale, 0, 0]
                     : null;
 
                 // Render PDF page into canvas context
-                let renderContext = {
+                var renderContext = {
                     canvasContext: ctx,
                     transform: transform,
                     viewport: viewport,
@@ -168,20 +1115,56 @@ div.flip-control a {
     }
 
     $(window).bind('keydown', function (e) {
-
         if (e.keyCode == 37)
-            $('#magazine').turn('previous');
+            flipbook.turn('previous');
         else if (e.keyCode == 39)
-            $('#magazine').turn('next');
-
+            flipbook.turn('next');
     });
-    $('.publication .prev-button').click(function(){
-        $('#magazine').turn('previous');
-        return false;
+    flipbook_container.find('.cmdBackward').click(function(){
+        flipbook.turn('previous');
     });
-    $('.publication .next-button').click(function(){
-        $('#magazine').turn('next');
-        return false;
+    flipbook_container.find('.cmdForward').click(function(){
+        flipbook.turn('next');
     });
+    flipbook.bind('resize_func', function(event){
+        if(isInFullScreen){
+            flipbook.css({"width": "", "height": ""});
+            var flipbook_height = $(window).height() - flipbook_container.find('.controls').height();
+            if(current_height_ratio != null){
+                if(single_page){
+                    flipbook.turn("size", flipbook_height / current_height_ratio, flipbook_height);
+                }else{
+                    flipbook.turn("size", flipbook_height / current_height_ratio * 2, flipbook_height);
+                }
+            }
+        }else{
+            flipbook.css({"width": "", "height": ""});
+            var width = $('#main-content').width();
+            if(current_height_ratio != null){
+                if(single_page){
+                    flipbook.turn("size", width, width * current_height_ratio);
+                }else{
+                    flipbook.turn("size", width, width * current_height_ratio / 2);
+                }
+            }
+        }
+    })
+    $(window).resize(function(){
+        var single_page_btn = flipbook_container.find('.cmdSinglePage');
+        if($(window).width() > 1200){
+            if(single_page){
+                single_page = false;
+                single_page_btn.removeClass('active');
+                flipbook.turn('display', 'double');
+            }
+        }else{
+            if(!single_page){
+                single_page = true;
+                single_page_btn.addClass('active');
+                flipbook.turn('display', 'single');
+            }
+        }
+        flipbook.trigger('resize_func');
+    })
   });
 </script>
\ No newline at end of file