Tamra Dugan

For what it is worth, it seems the PDF Viewer is broken on the WPDM demo site, I was trying to see if I can find answers to my question. None of the demo PDFs are working.

Thanks!
-Scott

Hi Nayeem, in addition to the errors posted above, I am also now seeing this issue that breaks closing the modal when popped up, unless a user clicks outside of the modal. This seems to be related to accessibility.

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: div
Ancestor with aria-hidden: <div class=​”modal fade modal-lg” id=​”exampleModal-37550″ tabindex=​”-1″ aria-labelledby=​”exampleModalLabel” style=​”display:​ none;​” aria-hidden=​”true”>​<!– aria-modal=”true” aria-hidden=”true” –><div class=​”modal-dialog” role=​”document” style=​”width:​ 1040px;​max-width:​ 100%;​”>​<div class=​”modal-content”>​flex<div class=​”modal-header”>​flex<h5>​NEOnet Fee Schedule​</h5>​<button type=​”button” class=​”close” data-dismiss=​”modal” aria-label=​”Close”>​<span>​×​</span>​<!– aria-hidden=”true” –></button>​</div>​<div class=​”modal-body”>​<iframe id=​”viewer-37550″ class=​”thumbnail” src=​”https:​/​/​neonet.org/​?__wpdm_pdf_viewer=37550|1726755538027″ style=​”width:​ 100%;​height:​ 700px;​margin-bottom:​ 15px;​border:​ 1px solid #dddddd;​padding:​ 0;​background:​ #f9f9fa”>​…​</iframe>​</div>​<!– div class=”modal-footer”>
<button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</button>
</div –></div>​</div>​</div>​

Hello Nayeem,

Thank you for confirming, please let me know when an update to the plugin is ready.

Kind regards,
-Scott

Hello Again,

I see in 6.7.0 you did remove bootstrap, which is fine and dandy, but the packages by category combined with the PDFviewer modal still seems to require it and is throwing errors. I don’t have anything explicitly calling for bootstrap, so how do I fix this issue?

Kind regards,
-Scott

Hi Nayeem,

I see this: Update! Enhanced System Optimization and Compatibility Assurance Update, but I’m curious what was optimized?

In my situation, to avoid loading the same styles and JS files over and over for every package on a page, I have to find a way to only call [doc_preview] when I’m actually wanting to display the PDF Viewer.

For example on this page: https://dev.neonet.org/policies/

Every time the “view Policy” button is displayed, it calls all.css, viewer.css, viewer.js, etc. etc. etc. It’s causing issues with our overall site performance and we must find a better solution. Those files only need to be present on the page one time, and they only need to be present on pages that use this feature.

They seem to be pulled into the page through the inclusion of the [doc_preview] shortcode. If I can modify my modal buttons so that they call a separate php file that does 2 simple things… passes the package ID on the URL, and loads the [doc_preview] shortcode, I should be able to resolve this issue.

Thanks!
-Scott

Hi Nayeem,

Can you clarify what it is you think I’m wishing to have embedded? Based on what I pasted above, I just want to not link to the CSS and JS resources and instead enqueue them whereby the WordPress engine will insure they only load once regardless of how many packages exist on the page.

Change these links:

<link rel=”stylesheet” href=”<?= plugins_url(‘wpdm-pdf-viewer/pdfjs/web/viewer.css’) ?>”>
<link rel=”stylesheet” href=”<?= WPDM_ASSET_URL ?>bootstrap/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”<?= WPDM_ASSET_URL ?>css/front.min.css”>
<link rel=”stylesheet” href=”<?= WPDM_FONTAWESOME_URL ?>”>

To enqueue:

wp_enqueue_script(‘pdf-js’, ‘path/to/pdf.js’, array(), ‘version’, true);
wp_enqueue_script(‘pdf-worker-js’, ‘path/to/pdf.worker.js’, array(‘pdf-js’), ‘version’, true);
wp_enqueue_script(‘viewer-js’, ‘path/to/viewer.js’, array(‘pdf-js’), ‘version’, true);

I believe once it is enqueued it won’t call it again, correct?

Thanks!
-Scott

Hi Nayeem,

The way it works, as a midday pop-up, iframe, etc is actually fine.

What I would like to see dev fix is to not directly link to the individual JS and CSS files but rather enqueue them the way WordPress expects. With this change you can enqueue them once and they went repeat for every package. They only need to be loaded once on the page regardless of the number of packages. You’ll see significant performance impact with this fix.

Does that help?

Thanks!
Scott

Hi Nayeem,

I’m using [doc_preview] in the templates, thanks!

-Scott

Hi Nayeem,

Is the full URL that was attached captured and identified by a variable I could pull into my template so I can embed that YouTube link? Right now I am using the title and so my users have to fix the title with the full URL for this to work. If the URL exists in another field and I can use that, that would suffice.

Thanks!
-Scott

Hi Nayeem,

Here are two screenshots:

This is the page where we’ve used multiple packages by category:

https://liveneonet-my.sharepoint.com/:i:/g/personal/skarlo_neonet_org/EXeBdQHZkCdFsiRKUQ_f4-kBc0ZV7IE6pBWJCkXcUDvGnQ?e=4jyBBh

This is the dev-tools output (a sample) where there are 700+ server requests and you can see all of the repeating resources:

https://liveneonet-my.sharepoint.com/:i:/g/personal/skarlo_neonet_org/ERw3KCPgrzpFl7o1jgnu2CIBaduuhmio9EI6f6XpI20mbw?e=rDa1TF

Here is the header of /wp-content/plugins/wpdm-pdf-viewer/tpls/pdf-viewer.php showing resource links as opposed to enqueuing the scripts just once. With the links used, they are getting repeated:

<?php
/**
 * User: shahnuralam
 * Date: 9/17/17
 * Time: 2:14 AM
 */
if(!defined('ABSPATH')) die();
$pdf = isset($_GET['__wpdm_pdf_viewer'])?esc_attr($_GET['__wpdm_pdf_viewer']):'';
$_GET['file'] = $pdf;
?>
<!DOCTYPE html>

<html dir="ltr" mozdisallowselectionprint moznomarginboxes>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="google" content="notranslate">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>PDF Viewer</title>

    <link rel="stylesheet" href="<?php echo plugins_url('wpdm-pdf-viewer/assets/css/viewer.css'); ?>">
    <link rel="stylesheet" href="<?php echo WPDM_BASE_URL; ?>assets/bootstrap3/css/bootstrap.css">
    <link rel="stylesheet" href="<?php echo WPDM_BASE_URL; ?>assets/css/front3.css">

    <script src="<?php echo plugins_url('wpdm-pdf-viewer/assets/pdfjs/pdf.js'); ?>"></script>

    <script src="<?php echo plugins_url('wpdm-pdf-viewer/assets/js/viewer.js'); ?>"></script>
<style>

Here’s the header of viewer.php – wp-content/plugins/wpdm-pdf-viewer/tpls/viewer.php

<?php

$file_info = explode("|", $_GET['__wpdm_pdf_viewer']);
$pid = wpdm_valueof($file_info, 0);
$fileid = wpdm_valueof($file_info, 1, '');

do_action("wpdm_before_render_pdf_viewer", $pid, $fileid);

?><!DOCTYPE html>
<!--
Copyright 2012 Mozilla Foundation

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Adobe CMap resources are covered by their own copyright but the same license:

    Copyright 1990-2015 Adobe Systems Incorporated.

See https://github.com/adobe-type-tools/cmap-resources
-->
<html dir="ltr" mozdisallowselectionprint>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="google" content="notranslate">
    <meta name="robots" content="noindex">
    <meta name="robots" content="nofollow">
    <title>PDF.js viewer</title>
    <?php \WPDM\__\Apply::uiColors(); ?>
    <link rel="stylesheet" href="<?= plugins_url('wpdm-pdf-viewer/pdfjs/web/viewer.css') ?>">
    <link rel="stylesheet" href="<?= WPDM_ASSET_URL ?>bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="<?= WPDM_ASSET_URL ?>css/front.min.css">
    <link rel="stylesheet" href="<?= WPDM_FONTAWESOME_URL ?>">

    <script>

Does that help? You can see this here: https://dev.neonet.org/policies/

Thanks!
-Scott

One option might be to enqueue the scripts and CSS so they only load once?

function my_custom_enqueue_scripts() {
    wp_enqueue_script('pdf-js', 'path/to/pdf.js', array(), 'version', true);
    wp_enqueue_script('pdf-worker-js', 'path/to/pdf.worker.js', array('pdf-js'), 'version', true);
    wp_enqueue_script('viewer-js', 'path/to/viewer.js', array('pdf-js'), 'version', true);
}
add_action('wp_enqueue_scripts', 'my_custom_enqueue_scripts');

Hello, I’m trying to post a support request and it’s not making it into the forum. It has to do with this thread and the PDF Viewer Add on.