@deltork/readalong v0.0.7

Read-Along Web Component

This is a web component for embedding read-along, audio/text aligned content in your website or hybrid app.

Installation

For now, just clone the repo, make sure you have node 6+, and run npm install from the project root. Then you can run npm start and a minimal website containing only the webcomponent will be served at localhost:3333. Any changes you make to /src will be automatically shown in the browser.

Properties

Test with your site

You can either modify the /src/index.html or after running npm start you can copy out the www/build folder and add the following script import in your own index.html page:

<script src="/build/read-along.js"></script>

Then, you can add as many read-along components to your page as you like simply by adding <read-along></read-along> elements with arguments for where to find your text, alignments and audio file. These files can be generated using _ service located here: ____.

<read-along text="assets/s2.xml" alignment="assets/s2.smil" audio="assets/s2.wav"></read-along>

Theming

There are two themes out-of-the-box: light and dark. You set them as a property on the <read-along></read-along> web component. If you want to add your own theme, it's as easy as adding your colour palette to the $ui-themes variable in src/components/read-along-component/scss/utilities/_colors.scss. Note you will have to rebuild the web component from source to do this, or submit your theme as a pull-request!

$ui-themes: (
    light: (
        primary:             $white,
        secondary:           darken($white, 50%),
        accent:              darken($white, 60%),
        text:                $black,
        text--secondary:     $white,
        text--accent:        $white,
    ),
    dark: (
        primary:             lighten($black, 30%),
        secondary:           darken($white, 35%),
        accent:              $white,
        text:                $white,
        text--secondary:     $white,
        text--accent:        $black
    )
);

Slots

Slots allow you to add custom html into specific "slots" within the web component. For example, to add an optional header to the <read-along></read-along component, you would write:

<read-along>
  <span slot="read-along-header">Hello World!</span>
</read-along>