Bo-story NPM | npm.io

BO Story JavaScript Project

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

Demo

Check out the Live Demo here.

Installation

Navigate to your project's root directory.
Ensure you have node and npm installed on your machine.
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 with node_modules/bo-story/bo-story-bundle.mjs or node_modules/bo-story/bo-story-bundle.js to 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);

Alternative 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);

OpenStoryManually

/* To open story manually call openStory method */
boStory.openStory(id, isVideoMuted = false);

CloseDialog

/* To close story dialog manually call closeDialog method */
boStory.closeDialog();

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;
    imgAlt?: 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;
    footerNestedActionHtml?: string;
    imgAlt?: 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 {
    seenByStoryItemOpen: boolean; // default true
    storyItemCountToRend: number, // Lazy loading story item count. By default is 50,
    svgElements: {
        arrowLeftIcon: string, // String SVG elemnt example: `<svg>...</svg>`
        arrowRightIcon: string,
        closeIcon: string,
        likeIcon: string,
        fullScreenIcon: string,
        exitFullScreenIcon: string,
        mutatedIcon: string,
        unmutatedIcon: string,
        playIcon: string,
        pauseIcon: string,
        storyImageLoaderIcon: string,
        storyItemImageLoaderIcon: string
    },
    document: document // Document
}

/* 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_is_sm_screen_scrollbar_hidden : boolean,
    bo_is_custom_scrollbar : boolean,
    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