3D FlipBook - Integrating with Drupal CMS

t***m@bearcreek.farm
2020-10-25
2020-10-29

I'm working on a Drupal 9 wrapper to display a flipbook for a PDF that is stored in a File field. I am seen some success when I hardcode the filename in, but when I try to pass the filename, I have not yet succeeded. Here is the error message that I get in console:

3dflipbook.min.js?v=1.x:10 TypeError: Cannot read property 'bind' of undefined
    at new ClbBookPropsBuilder (3dflipbook.min.js?v=1.x:6)
    at BookView.onLoad (3dflipbook.min.js?v=1.x:4)
    at 3dflipbook.min.js?v=1.x:10

Can you help me understand what is happening? Also, it seemed like there may have been some interference with another iFrame that I had on the page? Have you seen that at all?

Here is the twig template to output the page:

<div id="freepaper-flipbook-container" style="height:90vh" src="/sites/default/files/pub/OSL.pdf">

This is hardcoded, but it's very easy to change it to:

<div id="freepaper-flipbook-container" style="height:90vh" src="{{ file_url(node.field_pdf.entity.uri.value) }}">

which also doesn't work.

This is the "custom.js" file, which I renamed:

jQuery(document).ready(function() {
  var path = drupalSettings.host + "/" + drupalSettings.modulepath;
  var template = {
    html: path + '/templates/default-book-view.html',
    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'
  };
  var ourdiv = $('div#freepaper-flipbook-container');
  var pdfpath = ourdiv.attr('src');
  jQuery('#freepaper-flipbook-container').FlipBook({
    pdf: drupalSettings.pdfpath,
    template: template
  });
});

And I attach the libraries via this Drupal hook:

function freepaper_preprocess_page(&$variables){
  global $base_url;
  $host = $base_url;
  $variables['#attached']['drupalSettings']['modulepath'] = drupal_get_path('module', 'freepaper');
  $variables['#attached']['drupalSettings']['host'] = $host;
}

I don't expect your help with the Drupal stuff, but I'm just putting it as reference.

Replies

t***m@bearcreek.farm
2020-10-25
2020-10-25

Never mind. I figured it out. I was passing an empty string to the pdf of the options... it's working!

a***r@3dflipbook.net
2020-10-29
2020-10-29

Great!

Log In to leave a comment