1170 lines
37 KiB
Plaintext
1170 lines
37 KiB
Plaintext
<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>
|
|
</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">
|
|
#magazine_container {
|
|
overflow: hidden;
|
|
}
|
|
#magazine {
|
|
margin: auto;
|
|
width: 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 .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%);
|
|
}
|
|
</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;
|
|
var loadingTask = pdfjsLib.getDocument({
|
|
url,
|
|
cMapPacked: CMAP_PACKED,
|
|
enableXfa: ENABLE_XFA,
|
|
disableFontFace: true
|
|
});
|
|
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的高度。
|
|
const height = container.clientWidth / 2 * canvas.height / canvas.width;
|
|
container.style.height = height + 'px';
|
|
|
|
const cover2 = document.createElement('div');
|
|
cover2.className = 'hard cover';
|
|
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: numPages,
|
|
display: 'double',
|
|
acceleration: true,
|
|
autoCenter: true,
|
|
gradients: !$.isTouch,
|
|
elevation: 50,
|
|
when: {
|
|
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);
|
|
const start = range[0], end = range[1];
|
|
for (page = start; page <= end; page++) {
|
|
addPage(page, $(this));
|
|
}
|
|
},
|
|
}
|
|
});
|
|
|
|
// 如果要從右往左翻書，則取消註解
|
|
// $('#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
|
|
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; // 從右往左翻書
|
|
pdfDoc.getPage(realPage).then(function (page) {
|
|
var viewport = page.getViewport({ scale: scale });
|
|
// Support HiDPI-screens.
|
|
var outputScale = window.devicePixelRatio || 1;
|
|
|
|
canvas.width = Math.floor(viewport.width * outputScale);
|
|
canvas.height = Math.floor(viewport.height * outputScale);
|
|
canvas.style.width = "100%";
|
|
current_height_ratio = viewport.height / viewport.width;
|
|
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,
|
|
};
|
|
|
|
page.render(renderContext).promise.then(() => {
|
|
resolve(canvas);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function addPage(page, book) {
|
|
if (!book.turn('hasPage', page)) {
|
|
const element = document.createElement('div');
|
|
element.innerHTML = '<i class="loader"></i>';
|
|
book.turn('addPage', element, page);
|
|
renderPage(page).then(canvas => { element.innerHTML = ''; element.appendChild(canvas); });
|
|
}
|
|
}
|
|
|
|
$(window).bind('keydown', function (e) {
|
|
if (e.keyCode == 37)
|
|
flipbook.turn('previous');
|
|
else if (e.keyCode == 39)
|
|
flipbook.turn('next');
|
|
});
|
|
flipbook_container.find('.cmdBackward').click(function(){
|
|
flipbook.turn('previous');
|
|
});
|
|
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> |