Git Product home page Git Product logo

embed-n.js's Introduction

embed-n.js

Basic proof-of-concept controlling embedded PDFs in the DOM, noting a long-term issue in Chromium

Fun little Javascript program to view PDFs "n-up" in the browser

Silly idea to view PDFs "n-up" in the browser, and tie the arrow keys to functions that page through [n at a time], but highlights a bug Chromium devs haven't addressed since 2011:

Issue 69648: Cannot dynamically change embed src

The issue was raised over Flash, which is currently dying a death, however PDFs are widely used and subject to the same restrictions. Modifying a src attribute on an <embed src="http://www.somesite.com/document.pdf"> will not reload the file, thus navigation (with the PDF #page= hash) is prevented, along with the other available PDF parameters specified with fragment identifiers:

  • nameddest=<name>
  • #zoom=<scale>,<left>,<top>
  • #view=<keyword>,<position>
  • #viewrect=<left>,<top>,<wd>,<ht>
  • #highlight=<lt>,<rt>,<top>,<btm>
  • #search=

If Chrome steps in line w/ the HTML5 spec, specifically :

Whenever an embed element that was not potentially active becomes potentially active, and whenever a potentially active embed element's src attribute is set, changed, or removed, and whenever a potentially active embed element's type attribute is set, changed, or removed, the appropriate set of steps from the following is then applied:

If the element has a src attribute set

The user agent must resolve the value of the element's src attribute, relative to the element. If that is successful, the user agent should fetch the resulting absolute URL, from the element's browsing context scope origin if it has one. The task that is queued by the networking task source once the resource has been fetched must find and instantiate an appropriate plugin based on the content's type, and hand that plugin the content of the resource, replacing any previously instantiated plugin for the element.

I'd think it could work without such disruptive 'reloading' (the <embed> element must currently be cloned/removed/reinstated). Hash navigation (e.g. #page=…) doesn't reload resources.

I'm not quite sure where Chrome's at with out-of-process PDF viewers etc [due in Chrome 45?], maybe this will make this all obsolete 👀

embed-n.js's People

Contributors

lmmx avatar

Stargazers

Rowanelizabeth avatar

Watchers

James Cloos avatar avatar avatar

embed-n.js's Issues

Cheat to avoid PDF reloading delay: fade out

Possible solution for the fundamental issue here, the way each page navigation disrupts the flow of reading by reloading the document : perhaps it would be possible to 'hide the PDFs (e.g. opacity: 0) then fade them in (doubt it's possible to actually detect when the <embed> finishes loading ?)

  • An out of process PDF viewer allowing control of the PDF parameters would definitely make this sort of awkward hack obsolete - but at least the rest would be a framework to make something N-up-like.

Prevent lag/request build-up (onkeydown timeout)

Add a small time-term to the window.onkeydown response, allowing keypresses to be grouped rather than always executed sequentially (otherwise a lag builds as reloads are performed then their content immediately thrown away)

TODO: fix backward steps (`decrementPages()`)

See decrementPages() and its code comments

allow decreasing of pages, the minimum being the start_page
i.e. if the first pdf_embed in the list decrements to below 1,
then to all pages add the difference between that first page and 1

Basically add a "backwards" but don't allow any page numbers to go below 1. I don't think it's possible to check the total number of pages in a PDF... so the opposite safeguard isn't possible 😕

Use 'zoom' and 'viewrect' to "crop" to a given size specification

As noted in the README, PDF 'open parameters' support

  • #zoom=<scale>,<left>,<top>
  • #viewrect=<left>,<top>,<wd>,<ht>

Together these could be used equivalently to editing 'BBox', the real PDF bounding box.

If so, and if a conversion could be figured out, there are sizings for a myriad of popular bioscience journal formats available in CropScience 👀

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.