cferdinandi/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Vanilla Lettering.js

A vanilla JS fork of Lettering.js. Follow along in the tutorial video at https://gomakethings.com/converting-a-jquery-plugin-to-vanilla-js-lettering.js/.
Usage

1. Instantiate the plugin

Pass in a selector for the elements you want to run Vanilla Lettering.js on.
<h1 class="letters">Hello there, friend!</h1>

var lettering = new Lettering('.letters');
2. Run your lettering method

Next, run the lettering method you want on the instance.
// Each letter
lettering.letters();

// Each word
lettering.words();

// Each line
lettering.lines();

  
## demo.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Lettering.js Examples</title>
  <meta name="description" content="A jQuery Plugin that allows you to style each individual letter and more.">
  <meta name="author" content="Dave Rupert">

	<style type="text/css" media="screen">
		 body {
			margin: 0 auto;
			max-width: 80em;
			width: 88%;
		 }

		 .demo {
		 	color: red;
		 	margin-bottom: 1.5em;
		 	text-transform: uppercase;
		 }

		.char2,
		#demo2 .word2,
		.line2 {
			color: orange;
		}

		.char3,
		.word3,
		.line3 {
			color: yellow;
		}

		.char4,
		.line4 {
			color: blue;
		}

		.char5 {
			color: green;
		}

		.char6 {
			color: indigo;
		}

		.char7 {
			color: violet;
		}

		[class*="line"] {
			display: block;
			width: 100%;
		}
	</style>

</head>

<body>

  <div id="container">
		<div id="demo1" class="demo">
			<h1>Hello there, friend!</h1>
		</div>

		<div id="demo2" class="demo">
			<h1>Hello there, friend!</h1>
		</div>

		<div id="demo3" class="demo">
			<h1>Hello there,<br>friend!<br>How are you today?</h1>
		</div>
  </div>


	<script src="../lettering.js"></script>
	<script>
		new Lettering('#demo1 h1').letters();
		new Lettering('#demo2 h1').words();
		new Lettering('#demo3 h1').lines();
	</script>

</body>
</html>

## lettering.js
/*!
 * Vanilla JS Lettering.js
 * A vanilla JS fork of http://letteringjs.com/ by Dave Rupert
 * (c) 2019 Chris Ferdinandi, MIT License, https://gomakethings.com
 */
var Lettering = (function () {

	'use strict';


	/**
	 * Create the Constructor object
	 */
	var Constructor = function (selector) {

		//
		// Error Checks
		//

		// Make sure a selector is provided
		if (!selector) {
			throw new Error('Please provide a valid selector');
		}


		//
		// Variables
		//

		// Get all of the elements for this instantiation
		var elems = Array.prototype.slice.call(document.querySelectorAll(selector));

		// Hashed string to replace line breaks with
		var str = 'eefec303079ad17405c889e092e105b0';

		// Public APIs object
		var publicAPIs = {};


		//
		// Methods
		//

		/**
		 * Replace line breaks in a string
		 * @param  {Node} elem The element to replace line breaks on
		 */
		var replaceBreaks = function (elem) {
			var r = document.createTextNode(str);
			Array.prototype.slice.call(elem.querySelectorAll('br')).forEach(function (br) {
				elem.replaceChild(r.cloneNode(), br);
			});
		};

		/**

		 * @return {[type]} [description]
		 */

		/**
		 * Wrap each letter, word, or line in a span and add attributes
		 * @param  {Array} elems       The elements to wrap content in
		 * @param  {String}  splitStr  The string to use as the delimiter
		 * @param  {String}  className The class prefix to use for wrapped content
		 * @param  {String}  after     String to add after each item
		 * @param  {Boolean} breaks    If true, replace line breaks
		 * @return {Array}             The elements that were wrapped
		 */
		var wrap = function (elems, splitStr, className, after, breaks) {
			elems.forEach(function (elem) {
				var original = elem.textContent;
				if (breaks) {
					replaceBreaks(elem);
				}
				var text = elem.textContent.split(splitStr).map(function (item, index) {
					return '<span class="' + className + (index + 1) + '" aria-hidden="true">' + item + '</span>' + after;
				}).join('');
				elem.setAttribute('aria-label', original);
				elem.innerHTML = text;
			});
			return elems;
		};

		/**
		 * Wrap each letter in a span and class
		 * @return {Array} The elements that were wrapped
		 */
		publicAPIs.letters = function () {
			return wrap(elems, '', 'char', '');
		};

		/**
		 * Wrap each word in a span and class
		 * @return {Array} The elements that were wrapped
		 */
		publicAPIs.words = function () {
			return wrap(elems, ' ', 'word', ' ');
		};

		/**
		 * Wrap each line in a span and class
		 * @return {Array} The elements that were wrapped
		 */
		publicAPIs.lines = function () {
			return wrap(elems, str, 'line', '', true);
		};


		//
		// Return the Public APIs
		//

		return publicAPIs;

	};


	//
	// Return the Constructor
	//

	return Constructor;

})();
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Lettering.js Examples</title>
	<meta name="description" content="A jQuery Plugin that allows you to style each individual letter and more.">
	<meta name="author" content="Dave Rupert">

	<style type="text/css" media="screen">
	body {
	margin: 0 auto;
	max-width: 80em;
	width: 88%;
	}

	.demo {
	color: red;
	margin-bottom: 1.5em;
	text-transform: uppercase;
	}

	.char2,
	#demo2 .word2,
	.line2 {
	color: orange;
	}

	.char3,
	.word3,
	.line3 {
	color: yellow;
	}

	.char4,
	.line4 {
	color: blue;
	}

	.char5 {
	color: green;
	}

	.char6 {
	color: indigo;
	}

	.char7 {
	color: violet;
	}

	[class*="line"] {
	display: block;
	width: 100%;
	}
	</style>

	</head>

	<body>

	<div id="container">
	<div id="demo1" class="demo">
	<h1>Hello there, friend!</h1>
	</div>

	<div id="demo2" class="demo">
	<h1>Hello there, friend!</h1>
	</div>

	<div id="demo3" class="demo">
	<h1>Hello there,<br>friend!<br>How are you today?</h1>
	</div>
	</div>


	<script src="../lettering.js"></script>
	<script>
	new Lettering('#demo1 h1').letters();
	new Lettering('#demo2 h1').words();
	new Lettering('#demo3 h1').lines();
	</script>

	</body>
	</html>
	/*!
	* Vanilla JS Lettering.js
	* A vanilla JS fork of http://letteringjs.com/ by Dave Rupert
	* (c) 2019 Chris Ferdinandi, MIT License, https://gomakethings.com
	*/
	var Lettering = (function () {

	'use strict';


	/**
	* Create the Constructor object
	*/
	var Constructor = function (selector) {

	//
	// Error Checks
	//

	// Make sure a selector is provided
	if (!selector) {
	throw new Error('Please provide a valid selector');
	}


	//
	// Variables
	//

	// Get all of the elements for this instantiation
	var elems = Array.prototype.slice.call(document.querySelectorAll(selector));

	// Hashed string to replace line breaks with
	var str = 'eefec303079ad17405c889e092e105b0';

	// Public APIs object
	var publicAPIs = {};


	//
	// Methods
	//

	/**
	* Replace line breaks in a string
	* @param {Node} elem The element to replace line breaks on
	*/
	var replaceBreaks = function (elem) {
	var r = document.createTextNode(str);
	Array.prototype.slice.call(elem.querySelectorAll('br')).forEach(function (br) {
	elem.replaceChild(r.cloneNode(), br);
	});
	};

	/**

	* @return {[type]} [description]
	*/

	/**
	* Wrap each letter, word, or line in a span and add attributes
	* @param {Array} elems The elements to wrap content in
	* @param {String} splitStr The string to use as the delimiter
	* @param {String} className The class prefix to use for wrapped content
	* @param {String} after String to add after each item
	* @param {Boolean} breaks If true, replace line breaks
	* @return {Array} The elements that were wrapped
	*/
	var wrap = function (elems, splitStr, className, after, breaks) {
	elems.forEach(function (elem) {
	var original = elem.textContent;
	if (breaks) {
	replaceBreaks(elem);
	}
	var text = elem.textContent.split(splitStr).map(function (item, index) {
	return '<span class="' + className + (index + 1) + '" aria-hidden="true">' + item + '</span>' + after;
	}).join('');
	elem.setAttribute('aria-label', original);
	elem.innerHTML = text;
	});
	return elems;
	};

	/**
	* Wrap each letter in a span and class
	* @return {Array} The elements that were wrapped
	*/
	publicAPIs.letters = function () {
	return wrap(elems, '', 'char', '');
	};

	/**
	* Wrap each word in a span and class
	* @return {Array} The elements that were wrapped
	*/
	publicAPIs.words = function () {
	return wrap(elems, ' ', 'word', ' ');
	};

	/**
	* Wrap each line in a span and class
	* @return {Array} The elements that were wrapped
	*/
	publicAPIs.lines = function () {
	return wrap(elems, str, 'line', '', true);
	};


	//
	// Return the Public APIs
	//

	return publicAPIs;

	};


	//
	// Return the Constructor
	//

	return Constructor;

	})();