0.7.1 • Published 7 years ago

typemate v0.7.1

Weekly downloads
97
License
MIT
Repository
github
Last release
7 years ago

TypeMate

TypeMate is a little JavaScript module that fixes your typesetting woes automatically. Right now it only fixes orphans, but the plan is to add more filters in the future that fix other typesetting issues such as line-length.

Getting started

Install it as a dependancy with npm:

npm install typemate

Then import it:

import TypeMate from 'typemate';

At its most basic level, we create TypeMate instance and it'll look for all of the <p> elements on your page.

const typeMateInstance = new TypeMate();

// Run it
typeMateInstance.apply();

You can also pass it a parent element to work with. This is really useful if you only want TypeMate to focus on a particular element, such as an article.

Take this markup sample:

<article id="content">
    <p>Etiam porta sem malesuada magna mollis euismod.</p>
</article>

We can target that particular article's content like so:

const articleElement = document.getElementById('content');
const typeMateInstance = new TypeMate(articleElement);

// Run it
typeMateInstance.apply();

Now, only that <p> element within article#content will be affected by TypeMate.

Settings

You can pass an object of settings as the second parameter when you construct TypeMate. Using the instantiation example from above, we'll add some settings like so:

const articleElement = document.getElementById('content');
const typeMateInstance = new TypeMate(articleElement, { selector: 'h2, p' });

// Run it
typeMateInstance.apply();

That settings object now allows <h2> elements within article#content to be processed by TypeMate.

Settings reference

PropertyTypeDescriptionDefault Value
minWordsNumberThe minimum amount of words that have to be present in an element's content before TypeMate will process it4
selectorStringThe selector string that's passed to querySelectorAll'p'
ignoreClassStringThe CSS class that can be added to an element to mark itself as ignorable to TypeMate'js-typemate__ignore'
ignoreExistingSpaceCharsBooleanDetermine if elements should be ignored if they already contain an &nbsp; characterfalse

Codepen example

Check out an example of TypeMate over at CodePen: https://codepen.io/hankchizljaw/project/full/ZgpRNy

Running tests

Tests are defined as simple test cases in tests.json.

Each test case can define:

KeyTypeDescriptionDefault Value
parentStringselector of the parent element to useundefined
settingsObjectsettings objectnull
initStringinitial HTML to test against
applyStringexpected HTML after apply() is calledthis.init
resetStringexpected HTML after reset() is calledthis.init

Using NPM

npm i
npm run test

Using Yarn

yarn
yarn test

Made with ❤️ by HankChizlJaw and friends.

0.7.1

7 years ago

0.7.0

7 years ago

0.6.1

7 years ago

0.6.0

7 years ago

0.5.0

8 years ago

0.4.2

8 years ago

0.4.1

8 years ago

0.4.0

8 years ago

0.3.1

8 years ago

0.3.0

8 years ago

0.2.2

8 years ago

0.2.1

8 years ago

0.2.0

8 years ago

0.1.0

8 years ago