Injectables

R2D2BC

Injectables

Readium CSS

<script>

    var injectables = [
        { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-before.css', r2before: true },
        { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-default.css', r2default: true },
        { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-after.css', r2after: true },
    ]

    D2Reader.load({
        url: new URL("http....."),
        injectables: injectables
    }).then(instance => {
        console.log("D2Reader loaded ", instance);
    }).catch(error => {
        console.error("error.message ", error.message);
    });

</script>

Footnotes (this is an example)

<script>

    var injectables = [
        { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-before.css', r2before: true },
        { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-default.css', r2default: true },
        { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-after.css', r2after: true },
 
        { type: 'script', url: 'http://localhost:4444/viewer/injectables/footnotes/footnotes.js' },
        { type: 'style', url: 'http://localhost:4444/viewer/injectables/footnotes/footnotes.css' },
    ]

    D2Reader.load({
        url: new URL("http....."),
        injectables: injectables
    }).then(instance => {
        console.log("D2Reader loaded ", instance);
    }).catch(error => {
        console.error("error.message ", error.message);
    });

</script>

Glossary (this is an example)

<script>

    var injectables = [
        { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-before.css', r2before: true },
        { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-default.css', r2default: true },
        { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-after.css', r2after: true },

        // in this example the footnotes script will be injected first 
        { type: 'script', url: 'http://localhost:4444/viewer/injectables/footnotes/footnotes.js' },
        { type: 'style', url: 'http://localhost:4444/viewer/injectables/footnotes/footnotes.css' },

        // then the glossary script
        { type: 'script', url: 'http://localhost:4444/viewer/injectables/glossary/glossary.js' },
        { type: 'style', url: 'http://localhost:4444/viewer/injectables/glossary/glossary.css' },
    ]

    D2Reader.load({
        url: new URL("http....."),
        injectables: injectables
    }).then(instance => {
        console.log("D2Reader loaded ", instance);
    }).catch(error => {
        console.error("error.message ", error.message);
    });

</script>

Fonts

<script>

    var injectables = [
        { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-before.css', r2before: true },
        { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-default.css', r2default: true },
        { type: 'style', url: 'http://localhost:4444/viewer/readium-css/ReadiumCSS-after.css', r2after: true },
             
        { type: 'script', url: 'http://localhost:4444/viewer/injectables/footnotes/footnotes.js' },
        { type: 'style', url: 'http://localhost:4444/viewer/injectables/footnotes/footnotes.css' },

        { type: 'style', url: 'http://localhost:4444/viewer/fonts/opendyslexic/opendyslexic.css', fontFamily: 'opendyslexic', systemFont: false },
        { type: 'style', fontFamily: 'Courier', systemFont: true },

    ]

    D2Reader.load({
        url: new URL("http....."),
        injectables: injectables
    }).then(instance => {
        console.log("D2Reader loaded ", instance);
    }).catch(error => {
        console.error("error.message ", error.message);
    });

</script>

Appearances

<script>

    var injectables = [
        { type: 'style', url: 'http://localhost:4444/viewer/readium-css/neon-after.css', r2after: true, appearance: 'neon' },
    ]

    D2Reader.load({
        url: new URL("http....."),
        injectables: injectables
    }).then(instance => {
        console.log("D2Reader loaded ", instance);
    }).catch(error => {
        console.error("error.message ", error.message);
    });

</script>

Async flag

// Enforce synchronous behaviour of injected scripts
// unless specifically marked async, as though they 
// were inserted using <script> tags
//
// See comment on differing default behaviour of 
// dynamically inserted script loading at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#Attributes

	<script>

    var injectables = [
        { type: 'script', url: 'http://localhost:4444/....js' async: true },
    ]

    D2Reader.load({
        url: new URL("http....."),
        injectables: injectables
    }).then(instance => {
        console.log("D2Reader loaded ", instance);
    }).catch(error => {
        console.error("error.message ", error.message);
    });

</script>