i-slide

The <i-slide> Web component

This repository hosts a Web component that may be used to inline individual HTML/PDF slides of a slide set in an HTML page.

Warning: This component is at early stages of development and only supports a minimal set of features!

Usage

<!DOCTYPE html>
<html>
  <body>
    <h1>A slideset</h1>

    <p>This is slide 1:</p>
    <p><i-slide src="https://example.org/myslides.html#1"></i-slide></p>
    <p>Followed by slide 2:</p>
    <p><i-slide src="https://example.org/myslides.html#2"></i-slide></p>

    <p>PDF slides work too:</p>
    <p><i-slide src="https://example.org/myslides.pdf#page=1"></i-slide></p>

    <p>PDF slides loaded via a data: URL work as well:</p>
    <p><a href="data:application/pdf;base64,..." id="datapdf">download slides</a><i-slide srcref="datapdf#page=1"></i-slide></p>


    <p>Fallback content can be specified:</p>
    <p><i-slide src="https://example.org/notfound#4">[Slide 4 of my slide set]</i-slide></p>

    <p>Content width can be set (300px by default):</p>
    <p><i-slide src="https://example.org/myslides.html#5" width="800"></i-slide></p>
    <p>Note: the height is set automatically based on the slide's aspect ratio.</p>

    <!-- Web component must be loaded as a module -->
    <script src="https://w3c.github.io/i-slide/i-slide.js" type="module"></script>
  </body>
</html>

See it in action in the demo page.

Important: If the slide set is served from an origin different from the one where the component is used, CORS must be enabled for the slide set, meaning that the HTTP server that hosts the slide set needs to return an Access-Control-Allow-Origin: * HTTP header. This may already be the case (for instance, CORS is already enabled for all pages under *.github.io).

Modules with and without side-effect

ISlide.js contains the class of the Web Component, without any side effect, allowing to associate the feature with a Web Component tag name of your choice:

import ISlide from 'ISlide';
customElements.define('my-slide', ISlide);

i-slide.js automatically registers the ISlide component and associates it with the i-slide tagname; you do not need any additional script to start making use of i-slideelements.

The i-slide.js module can also be imported with a query string to automatically replace elements matching a selector set in a selector parameter with i-slide elements - in that case, the src attribute of the i-slide element will be copied from either an href, src or data-islide-src attribute present in the original element; and the srcref attribute from a matching data-islide-srcref attribute. This mode allows to use i-slide on regular markup. For instance:

<script src="i-slide.js?selector=a.islide" type="module"></script>
<body>
<a class="islide" href="slides.html#intro">Intro Slide</a>

will use i-slide to render the slide “intro” from the linked slideset in lieu of the link.

Constraints

Supported slide formats

The Web element supports:

Targeting individual slides

For HTML slides, the Web component supports numeric fragments that reference the slide number, starting at slide one, such as #1, #2, etc.

For PDF slides, the Web component supports page fragment references such as #page=1, #page=2, etc.

Motivation

The <i-slide> Web component was created to ease creation of pages that interleave the transcript of a presentation with the slides that were presented, such as Web Platform: a 30,000 feet view (that particular page does not use this component, it just illustrates a possible context in which it could be useful).

There are a variety of tools that may be used to create slides. Most of the time, slide sets may be embedded as a whole in a Web page, e.g. through an <iframe> element. It is also generally possible to target a specific slide within a slide set through some fragment convention (à la #page=3). The problem that this Web component attempts to solve arises when you want to reference all slides of a slide set one by one, as in the talk page mentioned above. If you take the <iframe> approach with a slide set that has n slides, you will need to download and render the slide set n times. This is particularly costly when the slide set embeds images or is in a format such as PDF that requires lots of processing to render in an HTML page.

This Web component includes logic to retrieve and render the slide set only once and distill rendered slides one by one throughout an HTML page.

Development notes

Contributing

Authors so far are François Daoust and Dominique Hazaël-Massieux.

Additional ideas, bugs and/or code contributions are most welcome. Create issues on GitHub as needed!

Licensing

The code is available under an MIT license.

This site is open source. Improve this page.