Skip to content

Commit

Permalink
updates readme text & fixes spelling/grammer errors
Browse files Browse the repository at this point in the history
  • Loading branch information
yowainwright committed Oct 26, 2016
1 parent 00a2ed9 commit 89dbe87
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 22 deletions.
37 changes: 19 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
@@ -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 `<span>` 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 `<span>` 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: '' });
```
Expand All @@ -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. 🍻
4 changes: 1 addition & 3 deletions dist/shave.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand Down Expand Up @@ -69,4 +67,4 @@ if (plugin) {

return shave;

})));
})));
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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": [
Expand Down

0 comments on commit 89dbe87

Please sign in to comment.