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.
Never mind. I figured it out. I was passing an empty string to the pdf of the options... it's working!
Great!