whenever I click on a drag-and-dropped PDF resource file, the PDF opens up inside a fully-functioning pop-up window. All without leaving the Moodle page.
Figure 1. This window pops out after the user has clicked on a "previously dragged-and-dropped-into-the-coursepage" PDF resource file.
Figure 2. The pop-up window is fully-functioning.
Figure 3. An animated spinner image (rubik's cube) to indicate loading time.
Figure 4. I can begin reading the PDF document's contents even though the entire document has not finished loading.
I have tested it on multiple platforms: iPad, Mac, PC and Android. All working.
This very much takes the adding of pdf and odf files to a course into the "expected behaviour" category and shortens setup for courses with a lot of resources. odf files rendering like that is quite tempting to use.
Would appreciate details. Thanks.
As you have requested.
Please view the presentation slides first. That way the file download links will make more sense.
My iMoot Mini 2015 Presentation (PDF):
My iMoot Mini 2015 Presentation (PPTX):
THIS IS THE CODE I USED TO ALLOW PDFs TO POP-UP INSIDE YOUR MOODLE COURSE PAGE
=>"FancyBox PDF popup" Download link:
I have also attached it below in this post.
You will also need the PDF.js zip file and contents from here:
Here is the download link to the PDF.js library that I extracted on my web-server. It will get outdated over time.
That's why you should head here for the latest zip file - the PDF.js Official Website link: https://mozilla.github.io/pdf.js/getting_started/#download
Rubik's Cube spinner animated GIF image file
The Rubik's Cube spinner that I showed in the presentation is attached to this forum post. The original gif file in PDF.js is named loading-icon.gif and it is found inside the images subfolder. I.e.: pdf.js-gh-pages-can-print/web/images
To use the Rubik's Cube, just rename it (for example, loading-icon-rubik-cube-big.gif) to loading-icon.gif.
I may later organise this information it a bit better. That would warrant a blog post on http://moodurian.blogspot.com. Please remember to also download my presentation PDF and/or PPTX file so that you can see where I put the code.
I got the PDF pop-ups to work on these themes (yippee!):
I couldn't get it to work with these themes (oh snap):
I don't know why.
Please test the code on multiple platforms: Android or iPhone Smartphone, Mac, PC, iPad, iOS, Linux etc.