Read-Smore

(cause read-more was already taken 😉)

A customizable, lightweight vanilla JS plugin for truncating content with a Read more / Read less move, whilst preserving the original markup. Able to truncate by max word or character count.

Docs / Demo

Contents

1. 📌 Features
2. 🎯 Quickstart
3. 🧬 Options
4. 🤖 Commands
5. 🕹️ Usage
6. 📓 Notes
7. 📅 To Dos

📌 Features

• Super lightweight, no dependencies, vanilla js, es6.
• Supports truncating content by max word or character count.
• Define max word or characters via data attribute or option
• Adds ellipse after truncated content.
• Preserves existing markup (nice).
• Read more / Read less text is customizable, via option or data-attribute.
• Block level class name is customizable.
• Read More link can be inlined with truncated content, or as block level element below.
• No CSS deps, lib is 100% js.
• Hybrid NPM Module, supporting import and require

🎯 Quickstart

1. Install from NPM

npm i read-smore

2. Create markup with defined max words

<div
  class="js-read-smore"
  data-read-smore-words="70"
>
  <p>Stuff and words and stuff and words.</p>
  <p>Words and stuff and words and stuff.</p>
  <!-- more HTML content -->
</div>

3. Add JS and init

import ReadSmore from 'read-smore'

// target all read more elements
const readMores = document.querySelectorAll('.js-read-smore')

// Init
ReadSmore(readMores).init()

Or, by require

const ReadSmore = require("read-smore");
const readMores = document.querySelectorAll(".js-read-smore");
ReadSmore(readMores).init();

Or, by CDN

To include via CDN, find the latest UMD version at https://unpkg.com/read-smore and inlcude via script tag, like so:

<script src="https://unpkg.com/[email protected]/dist/index.umd.js"></script>

Then, initialize

const ReadSmore = window.readSmore

// target all read more elements
const readMoreEls = document.querySelectorAll('.js-read-smore')

// Init
ReadSmore(readMoreEls).init()

🧬 Options

ReadSmore() accepts a single options param, which supports the following properties:

Option	Type	Description	Default
blockClassName	String	BEM style block name for injected link template	read-smore
lessText	String	'Read Less' closer link text (if no data attribute)	Read more
moreText	String	'Read More' expander link text (if no data attribute)	Read less
wordsCount	Number	Default max words (if no data attribute)	30
charsCount	Number	Default max characters (if no data attribute)	null
isInline	Boolean	Styles link text inline with content	false
linkElement	String	Change expander element	a

🤖 Project Commands

Install Project Deps

npm i

Build

npm run build

Builds src with microbundle to the various common js patterns.

Run Dev

npm run dev

Dev has microbundle begin watching / building the files, while also running the demo project via Parcel, which imports from the local src directory.

Run Demo

npm run demo:start

Lint

npm run lint

🕹️ Usage

Init JS

import ReadSmore from 'read-smore'

// target all read more elements with `js-read-smore` class
const readMores = document.querySelectorAll('.js-read-smore')

// Init
ReadSmore(readMores).init()

Example by max word count

To truncate content by max word count, use the data attribute data-read-smore-words="" with desired value.

<div
  class="js-read-smore"
  data-read-smore-words="70"
>
  <p>Stuff and words and stuff and words.</p>
  <p>Words and stuff and words and stuff.</p>
  <!-- more HTML content -->
</div>

Example by max character count

To truncate content by max character count, use the data attribute data-read-smore-chars="" with desired value.

<div
  class="js-read-smore"
  data-read-smore-chars="150"
>
  <p>Stuff and words and stuff and words.</p>
  <p>Words and stuff and words and stuff.</p>
  <!-- more HTML content -->
</div>

Example defining read more/less text via data attribute

To truncate content by max character count, use the data attribute data-read-smore-chars="" with desired value.

<div
  class="js-read-smore"
  data-read-smore-chars="150"
  data-read-smore-more-text="Read Schmore"
  data-read-smore-less-text="Read Schless"
>
  <p>Stuff and words and stuff and words.</p>
  <p>Words and stuff and words and stuff.</p>
  <!-- more HTML content -->
</div>

Provide Options

ReadSmore supports a few options, such as editing the more/less text. See Options table below for more.

import ReadSmore from 'read-smore'

const readMores = document.querySelectorAll('.js-read-smore')

const options = {
  blockClassName: 'read-more',
  moreText: 'Peep more',
  lessText: 'Peep less'
}

// Pass in options param
ReadSmore(readMores, options).init()

Inline Read More link

You can have the Read More link appear inline with the ellipsed content, as opposed to below it.

Note: As of v2.2.0, required css dep was removed in favor of a pure js approach that simply applied inline styles.

1: Via data-read-smore-inline

<div
  class="js-read-smore"
  data-read-smore-chars="150"
  data-read-smore-inline="true"
>
  <p>Stuff and words and stuff and words.</p>
  <p>Words and stuff and words and stuff.</p>
  <!-- more HTML content -->
</div>

2: Via Option (effects all readSmore instances

const readMores = document.querySelectorAll('.js-read-smore')

const options = {
  isInline: true
}

const RMs = ReadSmore(readMores, options)

📓 Notes

• Need to figure out how to handle ReadMore instances with ajaxed/Fetched in content, since the word count on existing instances will be already truncated.
• Thinking the solution is to destroy and rebuild via a click event. Or, at least open all and rebuild on click.

📅 To Dos

• Overhaul and simplfiy API to be more plugin / module like
• Rename everything to 'ReadSmore'
• Add docs / demo pages via gh-pages
• Bundle as Hybrid NPM Module to support import and require
• Remove CSS needed for inline option
• Provide callbacks on open/close
• Provide a destroy method
• Provide a solution for content injected after page load
• Add some tests