Freepaper Info and Flipbook

Description

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.

Requirements

The 3dflipbook plugin is found at: https://3dflipbook.net. We have a license.

Configuration

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:


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

The classes and structure are important. They work together with the other files to load new text into the receiver element.

Fields

field_image is a thumbnail of the Publication.
title is the title of the publication.
created is the date of publication.
body is the body of the publication containing text about the publication.
field_pdf is a FileField that contains the URL to File of the publication.

Data Attributes

Within the Button tags are several data attributes, which are used to pass data to the javascript functions.

data-action
1. freepaper-info : Tells this button to open the Info modal.
2. freepaper-flipbook : Tells this button to open the Flipbook modal.
data-body : For Info modals, this contains the body of the Publication node to display.
data-pdf : For Flipbook modals, this contains the filename of the PDF.

Receiver

Within each div.pub__container, outside of all other elements but within the DIV, you must have a div.receiver. The module trader_will fill that DIV tag with new content to create the modal.

Files

info-modal.html : template for the info modal that gets loaded into the receiver.
flipbook-modal.html : template for the flipbook modal that gets loaded into the receiver.
modules/custom/freepaper/js/freepaper-actions.js : scripts to load the receiver
modules/custom/freepaper : the location of the modules, its dependencies, and the module.

- Mevaser

'); } } 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('', [], ['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; }