bo-story

BO Story JavaScript Project

Welcome to the BO Story library. Use this library to integrate story-styled interfaces into your projects.

Table of Contents

• Demo
• Installation
• Usage
• Destroy
• Configurations

Demo

Check out the Live Demo here.

Installation

1. Navigate to your project's root directory.
2. Ensure you have node and npm installed on your machine.
3. Install the required project dependencies:

npm install bo-story

Usage

To use the BO Story library in your project, follow these steps:

Include node_modules/bo-story/bo-story-bundle.css and node_modules/bo-story/bo-story-bundle.mjsto your project.

import {BoStory} from 'bo-story/bo-story-bundle';

const options: IBoStoryOptions = {
    storyList: stories,
    storyWrapper: document.getElementById('story-list-container'),
    configs, // Optional
    styleConfigs, // Optional
    events: { // Optional
        onStorySeen: (event: IBoStory): void => {/* Code here */},
        onStoryItemSeen: (event: IBoStoryItem): void => {/* Code here */},
        onStoryItemView: (event: IBoStory): void => {/* Code here */},
        onLike: (event: IBoStoryItem): void => {/* Code here */},
        onUnlike: (event: IBoStoryItem): void => {/* Code here */},
        onNavigateProfile: (event: IBoStoryItem): void => {/* Code here */},
        onOpenDialog: (event: IBoStory): void => {/* Code here */},
        onCloseDialog: (event: IBoStory): void => {/* Code here */},
    }
};

const boStory = new BoStory(options);

Events

bo-story-seen

bo-story-item-seen

bo-story-item-like

bo-story-item-unlike

bo-navigate-profile

<div id="your-story-container-id"></div>

/* AddEventListener approch */
const storyContainer = document.getElementById('your-story-container-id');
storyContainer.addEventListener('bo-story-seen', (event: IBoStory): void => {/* Code here */});
storyContainer.addEventListener('bo-story-item-seen', (event: IBoStoryItem): void => {/* Code here */});
storyContainer.addEventListener('bo-story-item-view', (event: IBoStoryItem): void => {/* Code here */});
storyContainer.addEventListener('bo-story-item-like', (event: IBoStoryItem): void => {/* Code here */});
storyContainer.addEventListener('bo-story-item-unlike', (event: IBoStoryItem): void => {/* Code here */});
storyContainer.addEventListener('bo-navigate-profile', (event: IBoStoryItem): void => {/* Code here */});
storyContainer.addEventListener('bo-open-dialog', (event: IBoStory): void => {/* Code here */});
storyContainer.addEventListener('bo-close-dialog', (event: IBoStory): void => {/* Code here */});

const options: IBoStoryOptions = {
    storyList: stories,
    storyWrapper: document.getElementById('story-list-container')
};

const boStory = new BoStory(options);

Destroy

/* To destroy stories call onDestroy method */
boStory.onDestroy();

Configurations

interface IBoStoryOptions {
    storyWrapper: HTMLElement;
    storyList: IBoStory[];
    configs?: IBoConfigs;
    styleConfigs?: IBoStyleConfigs;
    events?: IBoEvents;
}

interface IBoStory {
    seen: boolean;
    id: number | string;
    name: string;
    imageUrl: string;
    items: IBoStoryItem[];
    titleNestedHtml?: string;
}

interface IBoStoryItem {
    id: string | number;
    mediaType: 'image' | 'video';
    mediaExt: string;
    liked: boolean;
    seen: boolean;
    likeCount: number;
    timeSince: string;
    storyUrl: string;
    isMuted?: boolean;
    description?: string;
    footerNestedHtml?: string;
    caption?: string;
}

interface IBoEvents {
    onStorySeen?: (event: IBoStory) => void,
    onStoryItemSeen?: (event: IBoStoryItem) => void,
    onStoryItemView?: (event: IBoStory) => void,
    onLike?: (event: IBoStoryItem) => void,
    onUnlike?: (event: IBoStoryItem) => void,
    onNavigateProfile?: (event: IBoStoryItem) => void,
    onOpenDialog?: (event: IBoStory) => void,
    onCloseDialog?: (event: IBoStory) => void
}

/* Available configs. Configs object and it's all properties are optional */
interface IBoConfigs {
    isSmScreenScrollbarHidden?: boolean; // true by default
    seenByStoryItemOpen?: boolean;
    isCustomScrollbar?: boolean;
    document?: Document; // In case of SRR is need to pass Document object
}

/* Available style configs. Style configs object and it's all properties are optional */
interface IBoStyleConfigs {
    /* Story variables */
    bo_story_height?: string,
    bo_story_width?: string,
    bo_story_border_radius?: string,
    bo_story_padding?: string,
    bo_story_border_color?: string,
    bo_story_seen_border_color?: string,
    bo_story_border_width?: string,
    bo_story_border_type?: string,
    bo_story_gap?: string,

    /* Story image variables */
    bo_story_img_height?: string,
    bo_story_img_width?: string,
    bo_story_img_border_radius?: string,

    /* Story badge */
    bo_story_badge_height?: string,
    bo_story_badge_width?: string,
    bo_story_badge_font_size?: string,
    bo_story_badge_font_weight?: string,
    bo_story_badge_font_line_height?: string,
    bo_story_badge_font_style?: string,
    bo_story_badge_bg_color?: string,
    bo_story_badge_color?: string,

    /* Pop_up */
    bo_pop_up_bg_color?: string,
    bo_popup_body_height?: string,
    bo_popup_body_wrapper_width?: string,
    bo_popup_body_wrapper_fullscreen_width?: string,
    bo_popup_body_max_height?: string,
    bo_popup_z_index?: string,

    /*  Custom Scrollbar  */
    bo_custom_scrollbar_width?: string,
    bo_custom_scrollbar_height?: string,
    bo_scrollbar_distance?: string,
    bo_custom_scrollbar_border_radius?: string,
    bo_custom_scrollbar_thumb_bg_color?: string,
    bo_custom_scrollbar_thumb_bg_outline?: string,
    bo_custom_scrollbar_thumb_bg_color_hover?: string,
    bo_custom_scrollbar_thumb_bg_outline_hover?: string,
    bo_custom_scrollbar_track_shadow?: string,
    bo_custom_scrollbar_track_thumb_bg_color?: string,
    bo_custom_scrollbar_track_thumb_bg_outline?: string
}

/* As alternative can be overwritten css variables */
    /* Story variables */
    --bo-story-height
    --bo-story-width
    --bo-story-border-radius
    --bo-story-padding
    --bo-story-border-color
    --bo-story-seen-border-color
    --bo-story-border-width
    --bo-story-border-type
    --bo-story-gap

    /* Story image variables */
    --bo-story-img-height
    --bo-story-img-width
    --bo-story-img-border-radius

    /* Story badge */
    --bo-story-badge-height
    --bo-story-badge-width
    --bo-story-badge-font-size
    --bo-story-badge-font-weight
    --bo-story-badge-font-line-height
    --bo-story-badge-font-style
    --bo-story-badge-bg-color
    --bo-story-badge-color

    /* Pop-up */
    --bo-pop-up-bg-color
    --bo-popup-body-height
    --bo-popup-body-wrapper-width
    --bo-popup-body-wrapper-fullscreen-width
    --bo-popup-body-max-height
    --bo-popup-z-index

    /*  Custom Scrollbar  */
    --bo-custom-scrollbar-width
    --bo-custom-scrollbar-height
    --bo-scrollbar-distance
    --bo-custom-scrollbar-border-radius
    --bo-custom-scrollbar-thumb-bg-color
    --bo-custom-scrollbar-thumb-bg-outline
    --bo-custom-scrollbar-thumb-bg-color-hover
    --bo-custom-scrollbar-thumb-bg-outline-hover
    --bo-custom-scrollbar-track-shadow
    --bo-custom-scrollbar-track-thumb-bg-color
    --bo-custom-scrollbar-track-thumb-bg-outline