full-screen mode details

[eplebel]

details of full-screen mode with side panel for viewing (supported) embeddable content: i.e., embeddable full-text PDFs, HTML articles/pages, interactive notebooks/code capsules, open peer review, supplementary materials PDF files, etc. (Live demo)

for viewports > 1900px, a full-screen icon will appear immediately to the right of a supported embeddable content's external-link icon, which when clicked, will open (w/ animation if easy to add) a side-panel (to the right) and display the content within it (pressing the "ESC key" or "X" within the panel closes the panel).
--> if viewport <1900px, full-screen icons are not visible, so user cannot enter full-screen mode
(ensuring that the right-hand article card action buttons (i.e., "EDIT", "LINK", etc.) overflow over the vertical-scrollbar of the left-hand article list panel...)

full-screen mode will be available on the homepage (recent articles component), search results page, article page, and author page (but NOT for author page external embed widget for now).

(difficult)
for contract#2, only the following embeddable content will be supported:

• full-text PDF

  • direct links to .pdf files e.g.:
    https://etiennelebel.com/documents/lbcl(2017,jpsp).pdf
    http://urisohn.com/sohn_files/wp/wordpress/wp-content/uploads/Shareable-IMA-2019-07-09.pdf
    https://ppw.kuleuven.be/okp/_pdf/Moshontz2018TPSAA.pdf
    https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5283063/pdf/sdata2016120.pdf
    https://www.nature.com/articles/sdata2016120.pdf
    https://pdfs.semanticscholar.org/fc68/d572dc1cff3554c92eea859b35f3fed2fa62.pdf
  • Meta-Psychology PDFs, eg:
    https://open.lnu.se/index.php/metapsychology/article/view/843/1835
    https://open.lnu.se/index.php/metapsychology/article/view/878/1630
  • Frontiers PDFs via readcube, eg:
    http://www.readcube.com/articles/10.3389/fpsyg.2017.01691
    http://www.readcube.com/articles/10.3389/fpsyg.2017.00908

  code logic: show full-screen icon: if (contains "open.lnu.se/index.php") or if (contains "readcube.com/articles") or if (ends w/ ".pdf", except if URL contains "github.com", "psycnet.apa.org/fulltext", or "academia.edu.documents")

• full-text HTML

  • frontiers HTML articles e.g.:
    https://www.frontiersin.org/articles/10.3389/fpsyg.2017.01004/full
    https://www.frontiersin.org/articles/10.3389/fpsyg.2017.00918/full
    https://www.frontiersin.org/articles/10.3389/fpsyg.2017.00908/full
  • independent HTML articles e.g.:
    https://rubenarslan.github.io/paternal_age_fitness/5_compare_robustness.html
    https://explorablemultiverse.github.io/examples/dataverse/
    https://explorablemultiverse.github.io/
    https://greenelab.github.io/scihub-manuscript/
    https://trang1618.github.io/tpot-fss-ms/

  code logic: show full-screen icon: if (ends w/ ".html") or if (contains "frontiersin.org/articles" and ends w/ "full") or if (contains "github.io")

• preprints

  • any direct links to .pdf files (with same exceptions as for full-text PDFs above), egs: https://www.research.ed.ac.uk/portal/files/46321079/Perceptions_of_Sexual_Advances_Main_document_Final.pdf
  • biorxiv preprints eg:
    https://www.biorxiv.org/content/biorxiv/early/2019/08/09/726505.full.pdf
    https://www.biorxiv.org/content/biorxiv/early/2019/08/20/739557.full.pdf

  code logic: show full-screen icon: if (ends w/ ".pdf", except if URL contains "github.com", "psycnet.apa.org/fulltext", or "academia.edu.documents")

• preregistration

  • any AsPredicted.org prereg URLs containing "aspredicted.org" and ending w/ .pdf, egs:
    https://aspredicted.org/h33dn.pdf
    https://aspredicted.org/963hz.pdf
    https://aspredicted.org/nfj4s.pdf

• data/code badges:

  • CodeOcean code capsule links: if user links to:
    • eg1: https://codeocean.com/capsule/1324693/ (or https://codeocean.com/capsule/1324693/tree/v1)
      display full-screen icon and display following embedded code capsule in side panel:
      <script src="https://codeocean.com/widget.js?slug=1324693" async></script>
    • eg2: https://codeocean.com/capsule/3545064/tree/v1 embedded as:
      <script src="https://codeocean.com/widget.js?slug=3545064" async></script>

• open peer review URLs:

  • Collabra open peer review PDF links, eg:
    http://s3-eu-west-1.amazonaws.com/ubiquity-partner-network/ucp/journal/collabra/collabra-pr-23-v2.pdf
    code logic: show full-screen icon: if (ends w/ ".pdf", except if URL contains "github.com", "psycnet.apa.org/fulltext", or "academia.edu.documents")

• supplementary materials URLs, egs:
  http://p-curve.com/Supplement/Supplement_pcurve1.pdf
  http://urisohn.com/sohn_files/papers/jeea_appendix.pdf
  code logic: show full-screen icon: if (ends w/ ".pdf", except if URL contains "github.com", "psycnet.apa.org/fulltext", or "academia.edu.documents")

(NOTE: in the future, we should "validate" each full-screenable links, and only display a full-screen icon if link doesn't return a 404)

• key figures/videos within article card will open full-screen via much better FancyBox media viewer (as implemented on my alpha page), rather than currently limited/suboptimal React Image Lightbox viewer that we're currently using.
  • NOTE: some folks have reported an issue trying to port fancyBox into a React app (possible due to dependency issue w/ jQuery, see here), however, others have successfully been able to import it, so hopefully it's possible and/or there's now a fix/workaround for this.
  • if fancyBox works, or if a better media viewer is implemented that supports image captions (because current React Image Lightbox doesn't support captions, one of its many limitations), please add the following image caption text: "Figure/table is reproduced based on an open license or under Fair Use for educational/scientific purposes."

Content that will NOT (yet) be supported:

• any direct links to .pdf files for:

  • supplementary materials:
    • OSF project PDF or .docx files are embedabble, but i'm not sure there's a way of knowing the file type from an OSF project URL alone, eg:
      • https://osf.io/gpu3a/ is an embeddable PDF file (https://mfr.osf.io/render?url=https://osf.io/gpu3a/?action=download%26mode=render)
      • https://osf.io/aetd9/ is an embeddable .docx file (https://mfr.osf.io/render?url=https://osf.io/aetd9/?action=download%26mode=render)
      • but https://osf.io/96ucr isn't because it just points to a project directory, and "https://mfr.osf.io/render?url=https://osf.io/96ucr?action=download%26mode=render" returns "OK" (but they may have an API endpoint that does yield the file type, e.g., "entity type" or "entity attribute" see https://developer.osf.io/#tag/Entities-and-Entity-Collections and https://developer.osf.io/#tag/Embedding )
    • shinyApps: these are embeddable (eg: http://shinyapps.org/apps/N-per-discovery/), but there doesn't seem to be an a priori/systematic way to validate these URLs
  • original study target article for replication or commentary article types: yes, but a combination of code logic (and exceptions) for full-text PDF, full-text HTML, and pre-print from above (given these could be any of these 3 possibilities)

• Full-text PDF:

  • PLOS ONE (doesn't seem to allow -- for either PDF or HTML -- also due to cross-origin blocking [aka 'X-Frame-Options' = 'sameorigin'?], but should probably reach out to them; eg: https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0202075)
  • F1000 (same issue; eg: https://f1000research.com/articles/8-1563)

• Preprints:

  • OSF preprints (does not appear to be embeddable, but perhaps could open a GitHub issue and ask them...)
  • preprints.org (also don't seem to allow embedding due to cross-origin blocking

• Data:

  • embedded OSF data (.csv, .sav, .txt, etc.) except doesn't render correctly (probably their bug, so just ignore these for now)
  • Figshare data has embed functionality, but very ugly/suboptimal, so will ignore for now
  • Harvard dataverse: terrible UI/UX and doesn't seem to offer embed capabilities
  • Zenodo: nope (but maybe the most promising data repository, other than google dataset search/public data explorer)
  • DataDryad: nope

****various reasons why content cannot be embedded:

• "frame-ancestors 'none'" (e.g., https://github.com/eplebel/science-commons/blob/master/curated/dijkstra-et-al%5B2015%5D.pdf)
• 'X-Frame-Options' to 'deny' (e.g., https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0202075 )

**SEVERAL techniques exist to work around sameorigin restrictions, however, not sure how effective and/or legal these are.... (as listed here: https://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy)

[eplebel]

your first pass at this @mickaobrien (ead2fd8...74114fd) is looking pretty good, I quite like it overall!

a few minor tweaks:

• revert back max-width=650px for article lists (&/or entire MuiGrid-root container), see screenshot below
• right-align full-text links (as they previously were)

and plug in the fancyBox media viewer for all article key figures.

hopefully you can push these minor tweaks by friday, thanks so much!!

[eplebel]

and plug in the fancyBox media viewer for all article key figures.

any chance for this?

[mickaobrien]

🤞 Haven't had a chance to look at it yet, but I will. Hopefully it'll be a quick fix and I'll get it done today or tomorrow. I'll let you know either way.

[eplebel]

thx so much!

[mickaobrien]

Just push it in the latest comit (b123971). I think everything is working but have a look around and let me know if there are any issues.

[eplebel]

that's so awesome!!, thanks for squeezing this in. looks really delicious, i'm really happy with it (only noticed a tiny issue , but it can wait).

ok so you could you please "hot fix" these into production, i.e., fancyBox commit (b123971), and the max-width commit (639ff70), and 3 other minor ones i pushed, typo (ead2fd8), and 2 adding Mathijs as technical advisor (42d3d6c , dc0273f). thanks a million!

[mickaobrien]

👍 Just pushed it there, looks good to me. Let me know if there are any issues.