Drupal 8 stable release

css/short-black-book-view.css

@@ -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;
+}

freepaper.info.yml

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

freepaper.libraries.yml

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

freepaper.module

@@ -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;
+}

js/default-book-view.js

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

js/freepaper-actions.js

@@ -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
+    });
+  });
+});

templates/default-book-view.html

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

templates/default-book-view.safe

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

templates/flipbook-modal.html

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

templates/flipbook-modal.safe

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

templates/info-modal.html

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