Drupal 8 stable release

This commit is contained in:
Mevaser of Yehudah 2023-12-14 11:32:04 -06:00
commit 69ad5c7e2e
30 changed files with 2969 additions and 0 deletions

4
css/font-awesome.min.css vendored Normal file

File diff suppressed because one or more lines are too long

View 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;
}

Binary file not shown.

Binary file not shown.

7
freepaper.info.yml Normal file
View 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
View 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
View 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>
&#060;div class=&#034;pub__container&#034;&#062;
&#060;div class=&#034;pub__cover&#034;&#062;
&#060;img src=&#034;{{field_image}}&#034; class=&#034;pub__image&#034;&#062;
&#060;/div&#062;
&#060;h5&#062;{{title}}&#060;/h5&#062;
&#060;h6&#062;{{created}}&#060;/h6&#062;
&#060;div class=&#034;pub__middle&#034;&#062;
&#060;div class=&#034;pub__text&#034;&#062;
&#060;a class=&#034;btn btn-default&#034; href=&#034;#&#034; role=&#034;button&#034; data-action=&#034;freepaper-info&#034; data-id=&#034;pub_i{{nid}}&#034; data-title=&#034; {{ title }}&#034; data-body=&#034;{{ body }}&#034; &#062;&#060;i class=&#034;fa fa-1x fa-info-circle&#034;&#062;&#060;/i&#062; Info&#060;/a&#062;
&#060;a class=&#034;btn&#034; href=&#034;#&#034; role=&#034;button&#034; data-action=&#034;freepaper-flipbook&#034; data-id=&#034;pub_f{{nid}}&#034; data-title=&#034; {{ title_1 }}&#034; data-pdf=&#034;{{ field_pdf }}&#034;&#062;&#060;i class=&#034;fa fa-1x fa-book-open&#034;&#062;&#060;/i&#062; View&#060;/a&#062;
&#060;a class=&#034;btn&#034; href=&#034;{{ field_pdf }}&#034; target=&#034;_blank&#034;&#062;&#060;i class=&#034;fa fa-1x fa-download&#034;&#062;&#060;/i&#062; Download&#060;/a&#062;
&#060;/div&#062;
&#060;/div&#062;
&#060;div class=&#034;receiver&#034;&#062;&#060;/div&#062;
&#060;/div&#062;
</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

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

BIN
images/inverse-texture.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

BIN
images/light-loader.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

BIN
images/loading.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

BIN
images/loading_1.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

BIN
images/paper.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

BIN
images/paper.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
images/texture.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

17
js/3dflipbook.min.js vendored Normal file

File diff suppressed because one or more lines are too long

7
js/bootstrap.min.js vendored Normal file

File diff suppressed because one or more lines are too long

94
js/default-book-view.js Normal file
View 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
View 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

File diff suppressed because it is too large Load Diff

2
js/granim.min.js vendored Normal file

File diff suppressed because one or more lines are too long

8
js/html2canvas.min.js vendored Normal file

File diff suppressed because one or more lines are too long

1
js/pdf.min.js vendored Normal file

File diff suppressed because one or more lines are too long

1
js/pdf.worker.js vendored Normal file

File diff suppressed because one or more lines are too long

831
js/three.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View 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>

View 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>

View 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>

View 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
View 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>