diff --git a/README.md b/README.md index 333ca1b5..8b4222c4 100644 --- a/README.md +++ b/README.md @@ -1,63 +1,62 @@ ![shave](http://imgh.us/shave.svg) -[![npm version 0.1.4](https://badge.fury.io/js/shave.svg)](https://www.npmjs.com/package/shave) -[![Bower version 0.1.4](https://badge.fury.io/bo/shave.svg)](https://github.com/dollarshaveclub/shave) +[![npm version 0.1.5](https://badge.fury.io/js/shave.svg)](https://www.npmjs.com/package/shave) +[![Bower version 0.1.5](https://badge.fury.io/bo/shave.svg)](https://github.com/dollarshaveclub/shave) [![Build Status](https://travis-ci.org/dollarshaveclub/shave.svg?branch=master)](https://travis-ci.org/dollarshaveclub/shave) [![Share](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&maxAge=2592000)](https://twitter.com/home?status=Shave%20is%20a%200%20dep%20js%20lib%20that%20truncates%20multiline%20text%20to%20fit%20within%20a%20html%20element%20%E2%9C%81https%3A%2F%2Fgithub.com%2Fdollarshaveclub%2Fshave%20%40DSCEngineering%20%23JavaScript%20%F0%9F%92%AA) # Shave -**Shave** is a zero dependency javascript plugin that truncates multi-line text to fit within a html element based on a set *max-height*. It then stores the _diff_ of the original text string in a hidden `` element following the visible text. This means the original text remains in tact! +**Shave** is a zero dependency javascript plugin that truncates multi-line text to fit within an html element based on a set *max-height*. It then stores the _diff_ of the original text string in a hidden `` element following the visible text. This means the original text remains intact! **Shave, compared to other truncation plugins:** - maintains the original text after truncation. - does not require other libraries - only requires a selector and a max height -- is very lightweight - `~1.5kb` unminified -- allows for custom ellipsis strings and class names but doesn't over complicate. -- is fast and capable of truncating text within lots of elements [quickly](http://codepen.io/pwfisher/full/ozVAyr/). +- is very lightweight; `~1.5kb` unminified +- allows for custom ellipsis strings and class names but doesn't over complicate +- is fast and capable of truncating text within lots of elements [quickly](http://codepen.io/pwfisher/full/ozVAyr/) - is additive. It will play nice with other javascript libraries and more truncation features can easily be built with it. ## Installing from a package manager npm ```sh -npm i shave --save-dev +npm install shave --save-dev ``` bower ``` -bower i shave --save-dev +bower install shave --save-dev ``` ## Usage -1. Add **dist/shave.js**. -3. `shave` text within the element you'd like to. +Add **dist/shave.js**. ## Syntax -basic setup +Basic setup ```javascript shave('selector', maxheight); ``` **Shave also provided options _only_ to overwrite what it uses.** -So, if you'd like have custom class names and not use `.js-shave`: +If you'd like have custom class names and not use `.js-shave`: ```javascript shave('selector', maxheight, {classname: 'classname'}); ``` -Or, if you'd like to have custom characters (instead of the standard ellipsis): +Or if you'd like to have custom characters (instead of the standard ellipsis): ```javascript shave('selector', maxheight, {character: '✁'}); ``` -Or, both: +Or both: ```javascript shave('selector', maxheight, {classname: 'classname', character: '✁' }); ``` -You can also use **shave** as a _jQuery_ or _Zepto_ plugin. +You can also use **shave** as a [jQuery](http://jquery.com/) or [Zepto](http://zeptojs.com/) plugin. ```javascript $('selector').shave(maxheight); ``` -And, here's a _jQuery/Zepto_ example with custom options: +And here's a _jQuery/Zepto_ example with custom options: ```javascript $('selector').shave(maxheight, { classname: 'your-css-class', character: '✁' }); ``` @@ -72,6 +71,8 @@ $('selector').shave(maxheight, { classname: 'your-css-class', character: '✁' `text-overflow: ellipsis` is the way to go when truncating text to a single line. Shave does something very similar but for _multiple lines_. - _Shave_ implements a [binary search](http://oli.me.uk/2013/06/08/searching-javascript-arrays-with-a-binary-search/) to truncate text in the most optimal way possible. +Shave implements a [binary search](http://oli.me.uk/2013/06/08/searching-javascript-arrays-with-a-binary-search/) to truncate text in the most optimal way possible. -Browser support notes will be added soon. 🍻 +Shave is meant to truncate text within a selected html element. This means it will overwrite html within an html element with just the text within the selected element. + +Shave works in all modern browsers and was tested in some not so modern browsers (like Internet Explorer 8) - it works there too. 🍻 diff --git a/dist/shave.js b/dist/shave.js index 619e3303..3d0642d5 100644 --- a/dist/shave.js +++ b/dist/shave.js @@ -24,9 +24,7 @@ function shave(target, maxHeight, opts) { // If element text has already been shaved if (span) { // Remove the ellipsis to recapture the original text - console.log(el.textContent); el.removeChild(el.querySelector('.js-shave-char')); - console.log(el.textContent); el.textContent = el.textContent; // nuke span, recombine text } @@ -69,4 +67,4 @@ if (plugin) { return shave; -}))); +}))); \ No newline at end of file diff --git a/package.json b/package.json index e2c56d79..8ceaecd9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "shave", - "version": "0.1.4", + "version": "0.1.5", "description": "Shave is a javascript plugin that truncates multi-line text within a html element based on set max height", "main": "dist/shave.js", "files": [