Drupal 8 stable release
4
css/font-awesome.min.css
vendored
Normal file
566
css/short-black-book-view.css
Normal file
@ -0,0 +1,566 @@
|
||||
.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: 1;
|
||||
}
|
||||
|
||||
.flip-book .view .prev {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.flip-book .view .next {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
|
||||
.flip-book .view .fnav a {
|
||||
font-size: 72pt;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.flip-book .view .fnav a:hover {
|
||||
cursor: pointer;
|
||||
text-shadow: 0 0 7px #000;
|
||||
}
|
||||
|
||||
.flip-book .view .fnav a:active {
|
||||
font-size: 70pt;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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;
|
||||
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('../images/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: 10pt;
|
||||
border-radius: 5px;
|
||||
font-style: italic;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.flip-book .controls {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flip-book .controls .fnavbar {
|
||||
margin: 0 auto;
|
||||
opacity: 0.3;
|
||||
transition: opacity 2s ease-in-out 3s;
|
||||
}
|
||||
|
||||
.flip-book .controls .fnavbar:hover {
|
||||
opacity: 1;
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
|
||||
.flip-book .controls .ctrl {
|
||||
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
.ctrl ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.ctrl .fnavbar {
|
||||
text-align: center;
|
||||
background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%);
|
||||
background-repeat: repeat-x;
|
||||
padding: 3px;
|
||||
overflow: visible;
|
||||
background-color: #3c3c3c;
|
||||
|
||||
border-radius: 4px;
|
||||
}
|
||||
.ctrl .fnavbar a {
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
.ctrl .fnavbar .fnav {
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
}
|
||||
.ctrl .fnavbar .fnav li{
|
||||
font-size: 12pt;
|
||||
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 {
|
||||
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 {
|
||||
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 .icon-caret {
|
||||
width: 26px;
|
||||
display: inline-block;
|
||||
}
|
||||
.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 {
|
||||
/*background-color: #444;*/
|
||||
}
|
||||
.ctrl .fnavbar .menu li:hover {
|
||||
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: 8px 10px;
|
||||
display: flex;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.ctrl .pages .number, .ctrl .pages .amount {
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-size: 11pt;
|
||||
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;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
border-radius: 5px 5px 0 0;
|
||||
background-color: #1a1a1a;
|
||||
width: 300px;
|
||||
z-index: 1;
|
||||
box-shadow: 3px 0 3px #222;
|
||||
}
|
||||
|
||||
.flip-book .float-wnd.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flip-book .float-wnd .header {
|
||||
border-radius: 4px 4px 0 0;
|
||||
background-color: #3c3c3c;
|
||||
background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%);
|
||||
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: 14px;
|
||||
position: absolute;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.flip-book .float-wnd .header .close:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.flip-book .float-wnd .header .close:active {
|
||||
font-size: 12px;
|
||||
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: 14px;
|
||||
}
|
||||
.ctrl .toc .toc-menu a:hover {
|
||||
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;
|
||||
}
|
||||
.ctrl .toc .toc-view::-webkit-scrollbar-thumb:hover {
|
||||
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 {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.ctrl .bookmarks .item .area:active {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.ctrl .bookmarks .item a {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.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%;
|
||||
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: 14px;
|
||||
}
|
||||
|
||||
.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('../images/light-loader.gif');
|
||||
}
|
||||
.ctrl .thumbnails .item {
|
||||
display: inline-block;
|
||||
width: 128px;
|
||||
padding: 5px 5px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.ctrl .thumbnails .item:hover {
|
||||
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 {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.ctrl .search .results a {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.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: 12px;
|
||||
}
|
BIN
fonts/fontawesome-webfont.woff
Normal file
BIN
fonts/fontawesome-webfont.woff2
Normal file
7
freepaper.info.yml
Normal file
@ -0,0 +1,7 @@
|
||||
name: Above All - Freepaper Flipbook Formatter
|
||||
type: module
|
||||
description: 'Freepaper Flipbook formatter'
|
||||
package: Above All - Twelve Tribes
|
||||
core_version_requirement: ^9 || ^10
|
||||
dependencies:
|
||||
- field
|
12
freepaper.libraries.yml
Normal file
@ -0,0 +1,12 @@
|
||||
flipbook:
|
||||
version: 1.x
|
||||
js:
|
||||
js/html2canvas.min.js: {}
|
||||
js/three.min.js: {}
|
||||
js/pdf.min.js: {}
|
||||
js/3dflipbook.min.js: {}
|
||||
js/freepaper-actions.js: {}
|
||||
js/granim.min.js: {}
|
||||
dependencies:
|
||||
- core/jquery
|
||||
- core/drupalSettings
|
95
freepaper.module
Normal file
@ -0,0 +1,95 @@
|
||||
<?php
|
||||
|
||||
use Drupal\Core\Routing\RouteMatchInterface;
|
||||
use Drupal\freepaper\Entity\Flipbook;
|
||||
use Drupal\Core\Url;
|
||||
/** ADDED FOR D10 */
|
||||
use Drupal\Core\Extension\ExtensionPathResolver;
|
||||
|
||||
/**
|
||||
* Implements hook_help().
|
||||
*/
|
||||
function freepaper_help($route_name, RouteMatchInterface $route_match) {
|
||||
switch ($route_name) {
|
||||
case 'help.page.freepaper':
|
||||
return t('
|
||||
<h2>Freepaper Info and Flipbook</h2>
|
||||
<h3>Description</h3>
|
||||
<p>This is a custom module which works with the Above All template for the twelvetribes.org website.
|
||||
The module displays two different modals (popups): Info and Flipbook. Info displays the body text of the
|
||||
Publication, along with its image and title. The Flipbook displays a browsable 3D view of the PDF.
|
||||
<h3>Requirements</h3>
|
||||
The 3dflipbook plugin is found at: <a href="https://3dflipbook.net">https://3dflipbook.net</a>. We have a license.</p>
|
||||
<h3>Configuration</h3>
|
||||
The module works best by creating a view of Publications. Add fields to the views, and exclude them (make them hidden).
|
||||
Then, create a visible "Global: Custom Text" and put this in the text:
|
||||
<pre><code>
|
||||
<div class="pub__container">
|
||||
<div class="pub__cover">
|
||||
<img src="{{field_image}}" class="pub__image">
|
||||
</div>
|
||||
<h5>{{title}}</h5>
|
||||
<h6>{{created}}</h6>
|
||||
<div class="pub__middle">
|
||||
<div class="pub__text">
|
||||
<a class="btn btn-default" href="#" role="button" data-action="freepaper-info" data-id="pub_i{{nid}}" data-title=" {{ title }}" data-body="{{ body }}" ><i class="fa fa-1x fa-info-circle"></i> Info</a>
|
||||
<a class="btn" href="#" role="button" data-action="freepaper-flipbook" data-id="pub_f{{nid}}" data-title=" {{ title_1 }}" data-pdf="{{ field_pdf }}"><i class="fa fa-1x fa-book-open"></i> View</a>
|
||||
<a class="btn" href="{{ field_pdf }}" target="_blank"><i class="fa fa-1x fa-download"></i> Download</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="receiver"></div>
|
||||
</div>
|
||||
</code></pre>
|
||||
The classes and structure are important. They work together with the other files to load new text into the <b>receiver</b> element.
|
||||
<h4>Fields</h4>
|
||||
<ul>
|
||||
<li><b>field_image</b> is a thumbnail of the Publication.</li>
|
||||
<li><b>title</b> is the title of the publication.</li>
|
||||
<li><b>created</b> is the date of publication.</li>
|
||||
<li><b>body</b> is the body of the publication containing text about the publication.</li>
|
||||
<li><b>field_pdf</b> is a FileField that contains the URL to File of the publication.</li>
|
||||
</ul>
|
||||
<h4>Data Attributes</h4>
|
||||
Within the <b>Button</b> tags are several data attributes, which are used to pass data to the javascript functions.
|
||||
<ul>
|
||||
<li><b>data-action</b>
|
||||
<ol>
|
||||
<li><b>freepaper-info</b> : Tells this button to open the Info modal.</li>
|
||||
<li><b>freepaper-flipbook</b> : Tells this button to open the Flipbook modal.</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li><b>data-body</b> : For Info modals, this contains the body of the Publication node to display.</li>
|
||||
<li><b>data-pdf</b> : For Flipbook modals, this contains the filename of the PDF.</li>
|
||||
</ul>
|
||||
<h4>Receiver</h4>
|
||||
Within each <b>div.pub__container</b>, outside of all other elements but within the DIV, you must have a <b>div.receiver</b>. The module trader_will
|
||||
fill that DIV tag with new content to create the modal.
|
||||
<pre><code><div class="receiver"></div></code></pre>
|
||||
|
||||
<h3>Files</h3>
|
||||
<ul>
|
||||
<li><b>info-modal.html</b> : template for the info modal that gets loaded into the receiver.</li>
|
||||
<li><b>flipbook-modal.html</b> : template for the flipbook modal that gets loaded into the receiver.</li>
|
||||
<li><b>modules/custom/freepaper/js/freepaper-actions.js</b> : scripts to load the receiver</li>
|
||||
<li><b>modules/custom/freepaper</b> : the location of the modules, its dependencies, and the module.</li>
|
||||
</ul>
|
||||
<p>- Mevaser</p>
|
||||
');
|
||||
}
|
||||
}
|
||||
|
||||
function freepaper_preprocess_page(&$variables){
|
||||
// Drupal 8-9
|
||||
// global $base_url;
|
||||
// $host = $base_url;
|
||||
// $variables['#attached']['drupalSettings']['modulepath'] = drupal_get_path('module', 'freepaper');
|
||||
// $variables['#attached']['drupalSettings']['host'] = $host;
|
||||
// // $variables['#attached']['library'][] = 'freepaper/flipbook'; We will attach it in the twig template
|
||||
|
||||
// DRUPAL 10
|
||||
$host = Url::fromRoute('<front>', [], ['absolute' => TRUE])->toString();
|
||||
$extension_path_resolver = Drupal::service('extension.path.resolver');
|
||||
$module_path = $extension_path_resolver->getPath('module', 'freepaper');
|
||||
$variables['#attached']['drupalSettings']['modulepath'] = $module_path;
|
||||
$variables['#attached']['drupalSettings']['host'] = $host;
|
||||
}
|
BIN
images/dark-loader.gif
Normal file
After Width: | Height: | Size: 19 KiB |
BIN
images/inverse-texture.jpg
Normal file
After Width: | Height: | Size: 29 KiB |
BIN
images/light-loader.gif
Normal file
After Width: | Height: | Size: 58 KiB |
BIN
images/loading.gif
Normal file
After Width: | Height: | Size: 45 KiB |
BIN
images/loading_1.gif
Normal file
After Width: | Height: | Size: 51 KiB |
BIN
images/paper.jpg
Normal file
After Width: | Height: | Size: 42 KiB |
BIN
images/paper.png
Normal file
After Width: | Height: | Size: 1.0 MiB |
BIN
images/texture.jpg
Normal file
After Width: | Height: | Size: 25 KiB |
17
js/3dflipbook.min.js
vendored
Normal file
7
js/bootstrap.min.js
vendored
Normal file
94
js/default-book-view.js
Normal file
@ -0,0 +1,94 @@
|
||||
function init(container) {
|
||||
var instance;
|
||||
if(window.jQuery) {
|
||||
var $ = window.jQuery;
|
||||
instance = {
|
||||
floatWnd: container.find('.float-wnd'),
|
||||
binds: {
|
||||
showDropMenu: function(e) {
|
||||
e.preventDefault();
|
||||
var el = $(e.target);
|
||||
while(!el.hasClass('toggle')) {
|
||||
el = $(el[0].parentNode);
|
||||
}
|
||||
var menu = el.find('.menu');
|
||||
if(menu.hasClass('hidden')) {
|
||||
container.find('.ctrl .fnavbar .menu').addClass('hidden');
|
||||
menu.removeClass('hidden');
|
||||
e.stopPropagation();
|
||||
}
|
||||
},
|
||||
hideDropMenu: function() {
|
||||
container.find('.ctrl .fnavbar .menu').addClass('hidden');
|
||||
},
|
||||
pickFloatWnd: function(e) {
|
||||
if(instance.pos) {
|
||||
instance.binds.dropFloatWnd();
|
||||
}
|
||||
else {
|
||||
instance.pos = {
|
||||
x: e.pageX,
|
||||
y: e.pageY
|
||||
};
|
||||
}
|
||||
},
|
||||
moveFloatWnd: function(e) {
|
||||
if(instance.pos) {
|
||||
var dv = {
|
||||
x: e.pageX-instance.pos.x,
|
||||
y: e.pageY-instance.pos.y
|
||||
}, old = {
|
||||
x: parseInt(instance.floatWnd.css('left')),
|
||||
y: parseInt(instance.floatWnd.css('top'))
|
||||
};
|
||||
instance.floatWnd.css('left', old.x+dv.x+'px').css('top', old.y+dv.y+'px');
|
||||
instance.pos = {
|
||||
x: e.pageX,
|
||||
y: e.pageY
|
||||
};
|
||||
}
|
||||
},
|
||||
dropFloatWnd: function() {
|
||||
delete instance.pos;
|
||||
},
|
||||
jsCenter: function() {
|
||||
var ns = container.find('.js-center');
|
||||
for(var i=0; i<ns.length; ++i) {
|
||||
var n = $(ns[i]), parentWidth = $(ns[i].parentNode).width(), width = n.width();
|
||||
n.css('left', 0.5*(parentWidth-width)+'px');
|
||||
}
|
||||
}
|
||||
},
|
||||
appLoaded: function() {
|
||||
instance.binds.jsCenter();
|
||||
},
|
||||
dispose: function() {
|
||||
container.find('.ctrl .fnavbar .fnav .toggle').off('click', instance.binds.showDropMenu);
|
||||
$(container[0].ownerDocument).off('click', instance.binds.hideDropMenu);
|
||||
|
||||
$(container[0].ownerDocument).off('mousemove', instance.binds.moveFloatWnd);
|
||||
$(container[0].ownerDocument).off('mouseup', instance.binds.dropFloatWnd);
|
||||
instance.floatWnd.find('.header').off('mousedown', instance.binds.pickFloatWnd);
|
||||
|
||||
$(container[0].ownerDocument.defaultView).off('resize', instance.binds.jsCenter);
|
||||
}
|
||||
};
|
||||
container.find('.ctrl .fnavbar .fnav .toggle').on('click', instance.binds.showDropMenu);
|
||||
$(container[0].ownerDocument).on('click', instance.binds.hideDropMenu);
|
||||
|
||||
$(container[0].ownerDocument).on('mousemove', instance.binds.moveFloatWnd);
|
||||
$(container[0].ownerDocument).on('mouseup', instance.binds.dropFloatWnd);
|
||||
instance.floatWnd.find('.header').on('mousedown', instance.binds.pickFloatWnd);
|
||||
|
||||
$(container[0].ownerDocument.defaultView).on('resize', instance.binds.jsCenter);
|
||||
instance.binds.jsCenter();
|
||||
}
|
||||
else {
|
||||
instance = {
|
||||
dispose: function() {
|
||||
}
|
||||
};
|
||||
console.error('jQuery is not found');
|
||||
}
|
||||
return instance;
|
||||
} init
|
47
js/freepaper-actions.js
Normal file
@ -0,0 +1,47 @@
|
||||
$('[data-action="freepaper-flipbook"]').on('click',function(){
|
||||
var button = $(this);
|
||||
|
||||
// Try to load the related receiver and title. If we are from the view, it will find a container
|
||||
var container = button.parents(".pub__container"); // freepaper container
|
||||
if (container.length!=0) {
|
||||
var receiver = container.children(".receiver");
|
||||
var title = container.children("h4").text();
|
||||
} else {
|
||||
// Otherwise, we are in the publication page and there's only one receiver.
|
||||
var receiver = $('#receiver');
|
||||
var title = $('.pub-title').text();
|
||||
}
|
||||
|
||||
var path = drupalSettings.host + "/" + drupalSettings.modulepath;
|
||||
var pdf=button.data('pdf');
|
||||
|
||||
var template = {
|
||||
html: path + '/templates/default-book-view.html',
|
||||
pdf: pdf,
|
||||
controlsProps: {
|
||||
downloadURL: pdf,
|
||||
},
|
||||
links: [{
|
||||
rel: 'stylesheet',
|
||||
href: path + '/css/font-awesome.min.css'
|
||||
}],
|
||||
styles: [
|
||||
path + '/css/short-black-book-view.css'
|
||||
],
|
||||
script: path + '/js/default-book-view.js',
|
||||
};
|
||||
|
||||
receiver.load(path + '/templates/flipbook-modal.html', function () {
|
||||
$('#flipbookModalLabel').text(title);
|
||||
|
||||
$('#flipbook-modal').on('hidden.bs.modal', function() {
|
||||
book.dispose();
|
||||
receiver.text("");
|
||||
});
|
||||
$('#flipbook-modal').modal('show');
|
||||
var book = $('#flipbook').FlipBook({
|
||||
pdf: pdf,
|
||||
template: template
|
||||
});
|
||||
});
|
||||
});
|
1053
js/granim.js
Normal file
2
js/granim.min.js
vendored
Normal file
8
js/html2canvas.min.js
vendored
Normal file
1
js/pdf.min.js
vendored
Normal file
1
js/pdf.worker.js
vendored
Normal file
831
js/three.min.js
vendored
Normal file
90
templates/default-book-view.html
Normal file
@ -0,0 +1,90 @@
|
||||
<div id="fb3d-ctx" class="flip-book">
|
||||
<div class="view">
|
||||
<div class="fnav">
|
||||
<div class="prev">
|
||||
<a class="cmdBackward" href="#"><span class="icon"><i class="fa fa-angle-left" title="Previous page"></i></span></a>
|
||||
</div>
|
||||
<div class="next">
|
||||
<a class="cmdForward" href="#"><span class="icon"><i class="fa fa-angle-right" title="Next page"></i></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widLoadingProgress loading-progress hidden">
|
||||
<div class="progress">
|
||||
</div>
|
||||
<div class="txtLoadingProgress caption">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="widFloatWnd float-wnd hidden">
|
||||
<div class="header">
|
||||
Table of contents
|
||||
<a href="#" title="Close" class="close cmdCloseToc">
|
||||
<span class="icon"><i class="fa fa-times"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="ctrl">
|
||||
<div class="toc">
|
||||
<div class="toc-menu widTocMenu">
|
||||
<ul>
|
||||
<li class="cmdBookmarks"><a href="#">Bookmarks</a></li>
|
||||
<li class="cmdThumbnails"><a href="#">Thumbnails</a></li>
|
||||
<li class="cmdSearch"><a href="#">Search</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="widBookmarks toc-view">
|
||||
|
||||
</div>
|
||||
<div class="widThumbnails toc-view">
|
||||
|
||||
</div>
|
||||
<div class="widSearch toc-view">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
|
||||
<div class="ctrl js-center">
|
||||
<nav class="fnavbar">
|
||||
<ul class="fnav">
|
||||
|
||||
<li class="fnav-item cmdZoomIn"><a href="#"><span class="icon"><i class="fa fa-search-plus" title="Zoom in"></i></span></a></li>
|
||||
<li class="fnav-item cmdZoomOut"><a href="#"><span class="icon"><i class="fa fa-search-minus" title="Zoom out"></i></span></a></li>
|
||||
<li class="fnav-item cmdDefaultZoom"><a href="#"><span class="icon"><i class="fa fa-compress" title="Fit view"></i></span></a></li>
|
||||
<li class="fnav-item cmdToc"><a href="#"><span class="icon"><i class="fa fa-bookmark" title="Table of contents"></i></span></a></li>
|
||||
<li class="fnav-item cmdFastBackward"><a href="#"><span class="icon"><i class="fa fa-fast-backward" title="10 pages backward"></i></span></a></li>
|
||||
<li class="fnav-item cmdBackward"><a href="#"><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="#"><span class="icon"><i class="fa fa-forward" title="Next page"></i></span></a></li>
|
||||
<li class="fnav-item cmdFastForward"><a href="#"><span class="icon"><i class="fa fa-fast-forward" title="10 pages forward"></i></span></a></li>
|
||||
<li class="fnav-item cmdSave"><a href="#"><span class="icon"><i class="fa fa-download" title="Download"></i></span></a></li>
|
||||
<li class="fnav-item cmdPrint"><a href="#"><span class="icon"><i class="fa fa-print" title="Print"></i></span></a></li>
|
||||
<li class="fnav-item cmdFullScreen"><a href="#"><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="#"><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="cmdSmartPan"><a href="#"><span class="icon"><i class="fa fa-eye"></i></span> Smart pan</a></li>
|
||||
<li class="cmdSinglePage"><a href="#"><span class="icon"><i class="fa fa-file-o"></i></span> Single page</a></li>
|
||||
<li class="cmdSounds"><a href="#"><span class="icon"><i class="fa fa-volume-up"></i></span> Sounds</a></li>
|
||||
<li class="cmdStats"><a href="#"><span class="icon"><i class="fa fa-line-chart"></i></span> Stats</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="cmdLightingUp"><a href="#"><span class="icon"><i class="fa fa-chevron-up"></i></span> Increase lighting</a></li>
|
||||
<li class="cmdLightingDown"><a href="#"><span class="icon"><i class="fa fa-chevron-down"></i></span> Reduce lighting</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
90
templates/default-book-view.safe
Normal file
@ -0,0 +1,90 @@
|
||||
<div id="fb3d-ctx" class="flip-book">
|
||||
<div class="view">
|
||||
<div class="fnav">
|
||||
<div class="prev">
|
||||
<a class="cmdBackward" href="#"><span class="icon"><i class="fa fa-angle-left" title="Previous page"></i></span></a>
|
||||
</div>
|
||||
<div class="next">
|
||||
<a class="cmdForward" href="#"><span class="icon"><i class="fa fa-angle-right" title="Next page"></i></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widLoadingProgress loading-progress hidden">
|
||||
<div class="progress">
|
||||
</div>
|
||||
<div class="txtLoadingProgress caption">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="widFloatWnd float-wnd hidden">
|
||||
<div class="header">
|
||||
Table of contents
|
||||
<a href="#" title="Close" class="close cmdCloseToc">
|
||||
<span class="icon"><i class="fa fa-times"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="ctrl">
|
||||
<div class="toc">
|
||||
<div class="toc-menu widTocMenu">
|
||||
<ul>
|
||||
<li class="cmdBookmarks"><a href="#">Bookmarks</a></li>
|
||||
<li class="cmdThumbnails"><a href="#">Thumbnails</a></li>
|
||||
<li class="cmdSearch"><a href="#">Search</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="widBookmarks toc-view">
|
||||
|
||||
</div>
|
||||
<div class="widThumbnails toc-view">
|
||||
|
||||
</div>
|
||||
<div class="widSearch toc-view">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
|
||||
<div class="ctrl js-center">
|
||||
<nav class="fnavbar">
|
||||
<ul class="fnav">
|
||||
|
||||
<li class="fnav-item cmdZoomIn"><a href="#"><span class="icon"><i class="fa fa-search-plus" title="Zoom in"></i></span></a></li>
|
||||
<li class="fnav-item cmdZoomOut"><a href="#"><span class="icon"><i class="fa fa-search-minus" title="Zoom out"></i></span></a></li>
|
||||
<li class="fnav-item cmdDefaultZoom"><a href="#"><span class="icon"><i class="fa fa-compress" title="Fit view"></i></span></a></li>
|
||||
<li class="fnav-item cmdToc"><a href="#"><span class="icon"><i class="fa fa-bookmark" title="Table of contents"></i></span></a></li>
|
||||
<li class="fnav-item cmdFastBackward"><a href="#"><span class="icon"><i class="fa fa-fast-backward" title="10 pages backward"></i></span></a></li>
|
||||
<li class="fnav-item cmdBackward"><a href="#"><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="#"><span class="icon"><i class="fa fa-forward" title="Next page"></i></span></a></li>
|
||||
<li class="fnav-item cmdFastForward"><a href="#"><span class="icon"><i class="fa fa-fast-forward" title="10 pages forward"></i></span></a></li>
|
||||
<li class="fnav-item cmdSave"><a href="#"><span class="icon"><i class="fa fa-download" title="Download"></i></span></a></li>
|
||||
<li class="fnav-item cmdPrint"><a href="#"><span class="icon"><i class="fa fa-print" title="Print"></i></span></a></li>
|
||||
<li class="fnav-item cmdFullScreen"><a href="#"><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="#"><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="cmdSmartPan"><a href="#"><span class="icon"><i class="fa fa-eye"></i></span> Smart pan</a></li>
|
||||
<li class="cmdSinglePage"><a href="#"><span class="icon"><i class="fa fa-file-o"></i></span> Single page</a></li>
|
||||
<li class="cmdSounds"><a href="#"><span class="icon"><i class="fa fa-volume-up"></i></span> Sounds</a></li>
|
||||
<li class="cmdStats"><a href="#"><span class="icon"><i class="fa fa-line-chart"></i></span> Stats</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="cmdLightingUp"><a href="#"><span class="icon"><i class="fa fa-chevron-up"></i></span> Increase lighting</a></li>
|
||||
<li class="cmdLightingDown"><a href="#"><span class="icon"><i class="fa fa-chevron-down"></i></span> Reduce lighting</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
13
templates/flipbook-modal.html
Normal file
@ -0,0 +1,13 @@
|
||||
<div class="modal fade" id="flipbook-modal" tabindex="-1" role="dialog" aria-labelledby="flipbookModalLabel" aria-hidden="true" style="padding-right:0px !important;">
|
||||
<div class="modal-dialog modal-dialog-fullscreen" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="flipbookModalLabel">PUT-TITLE-HERE</h5>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Close</button>
|
||||
</div>
|
||||
<div class="modal-body paper-gradient">
|
||||
<div id="flipbook" style="height:86vh"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
13
templates/flipbook-modal.safe
Normal file
@ -0,0 +1,13 @@
|
||||
<div class="modal fade" id="flipbook-modal" tabindex="-1" role="dialog" aria-labelledby="flipbookModalLabel" aria-hidden="true" style="padding-right:0px !important;">
|
||||
<div class="modal-dialog modal-dialog-fullscreen" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="flipbookModalLabel">PUT-TITLE-HERE</h5>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Close</button>
|
||||
</div>
|
||||
<div class="modal-body paper-gradient">
|
||||
<div id="flipbook" style="height:86vh"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
18
templates/info-modal.html
Normal file
@ -0,0 +1,18 @@
|
||||
<div class="modal fade" id="info-modal" tabindex="-1" role="dialog" aria-labelledby="infoModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="infoModalLabel">PUT-TITLE-HERE</h5>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Close</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-6"><img class="pub-shadow" id="infoModalImage" src="PUT-IMAGE-HERE"></div>
|
||||
<div class="col-md-6" id="infoModalBody">PUT-INFO-HERE</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|