PDF opens in a pop-up window (works on Mac, iPad, PC, Android)

PDF opens in a pop-up window (works on Mac, iPad, PC, Android)

by Frankie Kam -
Number of replies: 4
Picture of Plugin developers

Hiya

I managed to use existing javascript libraries to produce this effect:
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.

It's not a plugin. It requires a slight modification to a core file within Moodle. Plus the necessary javascript and CSS files need to added into the theme's subfolder.  Just wondering if this kinda thing might be useful for teachers who drag and drop PDF files into the coursepage. Or is just useful to me?

Regards
Frankie Kam 
Malaysia

Average of ratings: -
In reply to Frankie Kam

Re: PDF opens in a pop-up window (works on Mac, iPad, PC, Android)

by Frankie Kam -
Picture of Plugin developers

Test Moodle 2.9 coursepage site:

http://cefl4u.org/teach/course/view.php?id=13
Username: sippycup
Password: happygolucky


Average of ratings: Useful (1)
In reply to Frankie Kam

Re: PDF opens in a pop-up window (works on Mac, iPad, PC, Android)

by Richard Price -

Hi Frankie,
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.

In reply to Richard Price

Re: PDF opens in a pop-up window (works on Mac, iPad, PC, Android)

by Frankie Kam -
Picture of Plugin developers
Hi Richard


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):
https://www.dropbox.com/s/40mfb48fjzltpjt/MiniiMoot-Nov2015-Moodle-and-PDFs-Clunky-Funky-To-MaxCoolness-FrankieKam.pdf?dl=0

My iMoot Mini 2015 Presentation (PPTX):
https://www.dropbox.com/s/odn3ul84xuln22p/MiniiMoot-Nov2015-FrankieKam.pptx?dl=0


THIS IS THE CODE I USED TO ALLOW PDFs TO POP-UP INSIDE YOUR MOODLE COURSE PAGE
=>"FancyBox PDF popup" Download link:

https://www.dropbox.com/s/6coxzlaet21y4uh/moodle-hack-fancy-box.zip?dl=0
I have also attached it below in this post.

You will also need the PDF.js zip file and contents from here:


PDF.js Library

Here is the download link to the PDF.js library that I extracted on my web-server. It will get outdated over time.
https://www.dropbox.com/s/pp6o3ahs147kh53/pdf.js-gh-pages.zip?dl=0

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!):

1. BCU
2. Evolve-D
3. Academi

I couldn't get it to work with these themes (oh snap):
1. More
2. Clean
3. Essential
I don't know why.

Please test the code on multiple platforms: Android or iPhone Smartphone, Mac, PC, iPad, iOS, Linux etc. 

Regards
Frankie Kam


Attachment loading-icon-rubik-cube-smallest.gif
Attachment loading-icon.gif