Summarize

Summarize content with the ability to toggle visibility, the vanilla way.

Install

Install with Yarn:

$ yarn add @powerkraut/summarize

Import module:

import summarize from '@powerkraut/summarize';

Summarize with defaults:

summarize();

Settings

Summarize with settings:

Option | Type | Default ------ | ---- | ------- debug | boolean | false defaultStyles | boolean | true parentSelector | String | '.js-summarize' contentSelector | String | '[data-summarize-height], [data-summarize-overlap]' toggleSelector | String | '[data-summarize-more], [data-summarize-less]' toggleTextSelector | String | '[data-summarize-more], [data-summarize-less]'

summarize({
    debug: false,
    defaultStyles: true,
    parentSelector: '.js-summarize',
    contentSelector: 'div',
    toggleSelector: 'button',
    toggleTextSelector: 'button span'
});

Usage

Setup the correct markup with data attributes:

Attribute | Type | Description --------- | ---- | ----------- height | Number | Maximum height for the summary. overlap | Number | Minimum overlap before the content gets summarized. more | String | Button text for when content is hidden. less | String | Button text for when content is visible.

Use the following code example to get you started:

<article class="js-summarize">
    <div data-summarize-height="200" data-summarize-overlap="80">
         <p>Lorem ipsum...</p>
    </div>
    <button data-summarize-more="Show more" data-summarize-less="Show less">
         <span>Show more</span>
         <i class="fa fa-angle-down"></i>
    </button>
</article>