https://github.com/dddddddddzzzz/open-stories-element

Open Stories feed → Story viewer
https://github.com/dddddddddzzzz/open-stories-element

custom-element

Last synced: 3 months ago
JSON representation

Open Stories feed → Story viewer

• Host: GitHub
• URL: https://github.com/dddddddddzzzz/open-stories-element
• Owner: dddddddddzzzz
• Created: 2022-07-28T14:59:42.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-11-05T23:55:48.000Z (3 months ago)
• Last Synced: 2024-11-06T00:32:49.072Z (3 months ago)
• Topics: custom-element
• Language: TypeScript
• Homepage: https://element.openstories.fyi/demo/
• Size: 19.2 MB
• Stars: 39
• Watchers: 3
• Forks: 2
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-github-repos - dddddddddzzzz/open-stories-element - Open Stories feed → Story viewer (TypeScript)

README

        
# ``

An [OpenStoriesFeed](https://github.com/dddddddddzzzz/OpenStories) viewer. See it in action on [muan.co](https://muan.co).

## WIP

Things yet to be supported: 

- `feed._open_stories.preview`

- `feed.items[]._open_stories.preview`

- `feed.items[]._open_stories.content_warning`

- `feed.items[]._open_stories.tracks`: Changing tracks for videos

## Usage

```html

```

This requires native [``](https://caniuse.com/dialog) and [Shadow DOM](https://caniuse.com/shadowdomv1) support. No polyfills included.

## Parts

Style elements with `::part` ([MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)):

### Button

`open-stories::part(button)` is the selector for the `` that opens the story modal. It would be good to style `open-stories:not(:defined)` the same way, to prevent style flashing as the script executes.

### Advanced

- `open-stories::part(dialog)`: The modal ``.

- `open-stories::part(loading-visual)`: The loading overlay.

- `open-stories::part(error-visual)`: The resource loading error overlay.

- `open-stories::part(story)`: The `` or `` element of your story. Use `::cue` to style video tracks, for example.

- `open-stories::part(metadata)`: The `` for metadata.

- `open-stories::part(metadata-summary)`: The `` for expanding metadata.

- `open-stories::part(metadata-content)`: The metadata content container.

## Button text / ``

Whatever you put inside `HERE` will replace the default button text "View Stories".  ([MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot))

## Attributes

- `src`: Required. A [OpenStoriesFeed](https://github.com/dddddddddzzzz/OpenStories) URL.

- `loading`: Optional. Values: `lazy` or `eager`. Default to `eager`. When set to `lazy`, only the first story in the feed is loaded before user interaction.

- `duration`: Optional. Number in seconds. Default to `5`.

- `show-metadata`: Optional. Display `items[]._open_stories.caption`.

- `is-highlight`: Optional. View history does not get set.

## Classes

- `.is-loading`: Present when feed is being fetched.

- `.is-empty`: Present when no stories found.

- `.is-read`: Present when stories have all been viewed. This relies on `localStroage` and does not work cross-origin/cross-devices.

- `.is-paused`: Present autoplay is paused.