-1&&n.settings.ignoreExistingSpaceChars)}}]),e}();e.exports=function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return new s(e,n)}}])});
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "typemate",
3 | "version": "0.7.1",
4 | "description": "A little JavaScript module that fixes your typesetting Edit",
5 | "main": "dist/typemate.js",
6 | "scripts": {
7 | "build": "NODE_ENV=production npx webpack",
8 | "test": "./node_modules/.bin/mocha tests.js"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git+https://github.com/hankchizljaw/typemate.git"
13 | },
14 | "author": "hankchizljaw",
15 | "license": "MIT",
16 | "bugs": {
17 | "url": "https://github.com/hankchizljaw/typemate/issues"
18 | },
19 | "homepage": "https://github.com/hankchizljaw/typemate#readme",
20 | "devDependencies": {
21 | "babel-core": "^6.26.3",
22 | "babel-loader": "^7.1.4",
23 | "babel-plugin-transform-object-rest-spread": "^6.26.0",
24 | "babel-preset-env": "^1.6.1",
25 | "jsdom": "^11.5.1",
26 | "jsdom-global": "^3.0.2",
27 | "lodash": "^4.17.4",
28 | "mocha": "^4.0.1",
29 | "webpack": "^3.10.0"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/typemate.js:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | TYPEMATE
3 |
4 | Run text filters across DOM elements
5 | to help achieve nice typesetting
6 | on dynamic content.
7 | \*------------------------------------*/
8 | class TypeMate {
9 |
10 | constructor(parent, settings = {}) {
11 | let self = this;
12 |
13 | // Set some settings, by merging defaults and passed settings
14 | self.settings = Object.assign({
15 | minWords: 4,
16 | selector: 'p',
17 | ignoreClass: 'js-typemate__ignore',
18 | ignoreExistingSpaceChars: false
19 | }, settings);
20 |
21 | // Either load from root or the passed parent element
22 | if(typeof(parent) === 'undefined') {
23 | self.elems = [...document.querySelectorAll(self.settings.selector)];
24 | }
25 | else {
26 | self.elems = [...parent.querySelectorAll(self.settings.selector)];
27 | }
28 | }
29 |
30 | /**
31 | * Apply formatting to the loaded elements
32 | * @return void
33 | */
34 | apply() {
35 | let self = this;
36 |
37 | self.elems.map(elem => {
38 |
39 | // Bail out if the ignore class is present on this element
40 | if(elem.classList.contains(self.settings.ignoreClass)) {
41 | return false;
42 | }
43 |
44 | // Run the ignore checker nd bail if required
45 | if(self.shouldElementBeIgnored(elem)) {
46 | return false;
47 | }
48 |
49 | // The result string will be tacked on to this
50 | var result = '';
51 |
52 | // Split words/tags into array
53 | let textItems = elem.innerHTML.trim().replace(/ /g, ' ').split(/ (?=[^>]*(?:<|$))/);
54 |
55 | // Check if the text warrants this module
56 | if(textItems.length < self.settings.minWords) {
57 | return;
58 | }
59 |
60 | // Run orphans filter
61 | textItems = self.preventOrphans(textItems);
62 |
63 | // Join the words back together
64 | result = textItems.join(' ');
65 |
66 | // Replace whitespace after no break spaces
67 | result = result.replace(/ /g, ' ');
68 |
69 | // Set the content of the element with our shiny string
70 | elem.innerHTML = result;
71 | });
72 | }
73 |
74 | /**
75 | * Apply the orphans filter to the passed text and return it
76 | * @param {string} textItems
77 | */
78 | preventOrphans(textItems) {
79 |
80 | // Find the second to last work
81 | var targetWord = textItems[(textItems.length - 2)];
82 |
83 | // Stick a no break space to the end of the word and replace the instance in the array
84 | textItems[(textItems.length - 2)] = targetWord + ' ';
85 |
86 | return textItems;
87 | }
88 |
89 | /**
90 | * Reset any formatting
91 | * @return void
92 | */
93 | reset() {
94 | let self = this;
95 |
96 | self.elems.map(elem => {
97 |
98 | // Run the ignore checker nd bail if required
99 | if(self.shouldElementBeIgnored(elem)) {
100 | return false;
101 | }
102 |
103 | elem.innerHTML = elem.innerHTML.replace(/ /g, ' ');
104 | });
105 | }
106 |
107 | /**
108 | * Run checks to see if the passed element should be skipped
109 | *
110 | * @param {HTMLElement} elem
111 | * @returns boolean
112 | */
113 | shouldElementBeIgnored(elem) {
114 | let self = this;
115 |
116 | // Check if the element already contains 1 or more characters and the
117 | // ignore setting is true. If so: bail.
118 | if((elem.innerHTML.indexOf(' ') > -1) && self.settings.ignoreExistingSpaceChars) {
119 | return true;
120 | }
121 |
122 | return false;
123 | }
124 | };
125 |
126 | module.exports = function(parent, settings = {}) {
127 | return new TypeMate(parent, settings);
128 | };
--------------------------------------------------------------------------------
/tests.js:
--------------------------------------------------------------------------------
1 | var jsdom = require('jsdom-global')
2 | var TypeMate = require('./src/typemate');
3 | var assert = require('assert');
4 | var _ = require('lodash');
5 | var fs = require('fs');
6 |
7 | before(function () {
8 | this.jsdom = require('jsdom-global')();
9 | })
10 |
11 | after(function () {
12 | this.jsdom();
13 | })
14 |
15 | describe('TypeMate tests', function () {
16 | var tests = JSON.parse(
17 | fs.readFileSync(__dirname + '/tests.json')
18 | );
19 |
20 | _.each(tests, function ({parent, settings, init, apply, reset}, description) {
21 | it(description, function () {
22 | document.body.innerHTML = init;
23 |
24 | if (parent) {
25 | var typeMateInstance = new TypeMate(document.querySelector(parent), settings);
26 | } else {
27 | var typeMateInstance = new TypeMate(undefined, settings);
28 | }
29 |
30 | typeMateInstance.apply();
31 | assert.equal(document.body.innerHTML, apply || init);
32 |
33 | typeMateInstance.reset();
34 | assert.equal(document.body.innerHTML, reset || init);
35 | });
36 | });
37 | })
38 |
--------------------------------------------------------------------------------
/tests.json:
--------------------------------------------------------------------------------
1 | {
2 | "Will only target the parent element if present": {
3 | "parent": "aside",
4 | "init": "Etiam porta sem malesuada.
",
5 | "apply": "Etiam porta sem malesuada.
"
6 | },
7 | "By default only selects tag": {
8 | "init": "
A heading
Etiam porta sem malesuada magna mollis euismod.
Maecenas sed diam eget risus varius blandit sit amet non magna.
",
9 | "apply": "A heading
Etiam porta sem malesuada magna mollis euismod.
Maecenas sed diam eget risus varius blandit sit amet non magna.
"
10 | },
11 | "Fewer than minWords (default 4) settings has no affect": {
12 | "init": "Etiam porta sem.
",
13 | "apply": "Etiam porta sem.
"
14 | },
15 | "Tags with the ignoreClass class will be ignored": {
16 | "init": "Etiam porta sem malesuada.
Maecenas sed diam eget risus varius blandit sit amet non magna.
",
17 | "apply": "Etiam porta sem malesuada.
Maecenas sed diam eget risus varius blandit sit amet non magna.
"
18 | },
19 | "Can override minWords setting": {
20 | "settings": {
21 | "minWords": 3
22 | },
23 | "init": "Etiam porta sem.
",
24 | "apply": "Etiam porta sem.
"
25 | },
26 | "Can override selector setting": {
27 | "settings": {
28 | "selector": "p,h1"
29 | },
30 | "init": "My silly long heading
Etiam porta sem malesuada.
",
31 | "apply": "My silly long heading
Etiam porta sem malesuada.
"
32 | },
33 | "Can override ignoreClass setting": {
34 | "settings": {
35 | "ignoreClass": "ignore"
36 | },
37 | "init": "Etiam porta sem malesuada.
",
38 | "apply": "Etiam porta sem malesuada.
"
39 | },
40 | "Will ignore element if there's 1 or more characters present": {
41 | "settings": {
42 | "ignoreExistingSpaceChars": true
43 | },
44 | "init": "Some text with an existing character
",
45 | "apply": "Some text with an existing character
"
46 | }
47 | }
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | // Define webpack stuff
2 | var isProduction = process.env.NODE_ENV === 'production';
3 | var path = require('path');
4 | var plugins = [];
5 |
6 | var settings = {
7 | libraryName: 'typemate',
8 | inputs: {
9 | js: {
10 | entryPath: '/src/typemate.js'
11 | }
12 | },
13 | outputs: {
14 | js: {
15 | fileName: 'typemate.js',
16 | path: 'dist'
17 | }
18 | }
19 | };
20 | var webpack = require('webpack');
21 |
22 | if(isProduction) {
23 | plugins.push(new webpack.optimize.UglifyJsPlugin({ minimize: true }));
24 | }
25 |
26 | module.exports = {
27 | entry: path.join(__dirname, settings.inputs.js.entryPath),
28 | devtool: 'source-map',
29 | output: {
30 | path: path.join(__dirname, settings.outputs.js.path),
31 | filename: settings.outputs.js.fileName,
32 | library: settings.libraryName,
33 | libraryTarget: 'umd',
34 | umdNamedDefine: true
35 | },
36 | module: {
37 | rules: [
38 | {
39 | test: /\.js$/,
40 | exclude: /node_modules/,
41 | use: [
42 | {
43 | loader: 'babel-loader'
44 | }
45 | ]
46 | }
47 | ]
48 | },
49 | resolve: {
50 | extensions: ['.js']
51 | },
52 | plugins: plugins
53 | };
--------------------------------------------------------------------------------