Merge branch '2.0'

.gitignore

@@ -0,0 +1,4 @@
+.*
+node_modules
+bower_components
+coverage

CHANGELOG.md

@@ -0,0 +1,36 @@
+# 2.0.0
+
+## New features
+
+- Install with Bower: `bower install readmore`
+- Blocks can now be toggled programmatically: `$('article:nth-of-type(3)').readmore('toggle')`
+- ARIA semantics describe expanded state and relationship between blocks and their toggles
+- Blocks are now assigned an ID if they don't already have one
+- Install development dependencies with NPM
+- Gulp task to minifiy with UglifyJS 
+
+## Improvements
+
+- Height calculations on window resize are "debounced", resulting in more efficient rendering
+- Height calculation in general has been improved
+- The value of the `expanded` argument passed to the `beforeToggle` callback now correctly reflects the _pre-toggle_ state
+- Multiple instances are now fully supported: e.g. `$('article').readmore({speed: 200})` and `$('fieldset').readmore({speed: 900})` will work on the same page
+- Fully responsive, plugin now prefers max-heights set in CSS, even inside media queries
+
+## Potentially breaking changes
+
+- `maxHeight` option is now `collapsedHeight`
+- `sectionCSS` option is now `blockCSS`
+- `toggleSlider()` method is now just `toggle()`
+- Animation is now performed with CSS3 transitions, rather than `jQuery.animate()`
+- IE 8 and 9 are no longer supported, because those browsers hate kittens
+- `init()` is now called within a `window.onload` event handler, which can briefly delay collapsing content
+- `setBoxHeight()` is now a "private" method called `setBoxHeights()`
+- `resizeBoxes()` is also now private
+- Readmore.js now uses attribute selectors, rather than classes
+    - The `.readmore-js-section` and `.readmore-js-toggle` classes are gone
+    - The `expandedClass` and `collapsedClass` options are also gone
+    - Every Readmore.js block needs an ID, if one is not already present, one will be generated 
+
+
+

README.md

@@ -1,43 +1,60 @@
-Readmore.js
-========
+# Readmore.js
 
-A smooth, lightweight jQuery plugin for collapsing and expanding long blocks of text with "Read more" and "Close" links. 
+A smooth, responsive jQuery plugin for collapsing and expanding long blocks of text with "Read more" and "Close" links.
 
-The required markup for Readmore.js is also extremely lightweight and very simple. No need for complicated sets of `div`s or hardcoded class names, just call ``.readmore()`` on the element containing your block of text and Readmore.js takes care of the rest.
+The markup Readmore.js requires is so simple, you can probably use it with your existing HTML—there's no need for complicated sets of `div`'s or hardcoded classes, just call `.readmore()` on the element containing your block of text and Readmore.js takes care of the rest. Readmore.js plays well in a responsive environment, too.
 
-Readmore.js is compatible with all versions of jQuery greater than 1.7.0.
+Readmore.js is tested with—and supported on—all versions of jQuery greater than 1.9.1. All the "good" browsers are supported, as well as IE10+; IE8 & 9 _should_ work, but are not supported and the experience will not be ideal.
 
-## Example ##
 
-    $('article').readmore();
-
-Yes, it's that simple. You can change the speed of the animation, the height of the collapsed block, and the open and close elements.
+## Install
 
-    $('article').readmore({
-      speed: 75,
-      maxHeight: 500
-    });
+Install Readmore.js with Bower:
 
-## The options: ##
+```
+$ bower install readmore
+```
+
+Then include it in your HTML:
+
+```html
+<script src="/bower_components/readmore/readmore.min.js"></script>
+```
+
+
+## Use
+
+```javascript
+$('article').readmore();
+```
+
+It's that simple. You can change the speed of the animation, the height of the collapsed block, and the open and close elements.
+
+```javascript
+$('article').readmore({
+  speed: 75,
+  lessLink: '<a href="#">Read less</a>'
+});
+```
 
-* `speed: 100` (in milliseconds)
-* `maxHeight: 200`  (in pixels)
-* `heightMargin: 16` (in pixels, avoids collapsing blocks that are only slightly larger than `maxHeight`)
+### The options:
+
+* `speed: 100` in milliseconds
+* `collapsedHeight: 200` in pixels
+* `heightMargin: 16` in pixels, avoids collapsing blocks that are only slightly larger than `collapsedHeight`
 * `moreLink: '<a href="#">Read more</a>'`
 * `lessLink: '<a href="#">Close</a>'`
-* `embedCSS: true` (insert required CSS dynamically, set this to `false` if you include the necessary CSS in a stylesheet)
-* `sectionCSS: 'display: block; width: 100%;'` (sets the styling of the blocks, ignored if `embedCSS` is `false`)
-* `startOpen: false` (do not immediately truncate, start in the fully opened position)
-* `expandedClass: 'readmore-js-expanded'` (class added to expanded blocks)
-* `collapsedClass: 'readmore-js-collapsed'` (class added to collapsed blocks)
-* `beforeToggle: function() {}` (called after a more or less link is clicked, but *before* the block is collapsed or expanded)
-* `afterToggle: function() {}` (called *after* the block is collapsed or expanded)
+* `embedCSS: true` insert required CSS dynamically, set this to `false` if you include the necessary CSS in a stylesheet
+* `blockCSS: 'display: block; width: 100%;'` sets the styling of the blocks, ignored if `embedCSS` is `false`
+* `startOpen: false` do not immediately truncate, start in the fully opened position
+* `beforeToggle: function() {}` called after a more or less link is clicked, but *before* the block is collapsed or expanded
+* `afterToggle: function() {}` called *after* the block is collapsed or expanded
 
-If the element has a `max-height` CSS property, Readmore.js will use that value rather than the value of the `maxHeight` option.
+If the element has a `max-height` CSS property, Readmore.js will use that value rather than the value of the `collapsedHeight` option.
 
 ### The callbacks:
 
-The callback functions, `beforeToggle()` and `afterToggle`, both receive the same arguments: `trigger`, `element`, and `expanded`.
+The callback functions, `beforeToggle` and `afterToggle`, both receive the same arguments: `trigger`, `element`, and `expanded`.
 
 * `trigger`: the "Read more" or "Close" element that was clicked
 * `element`: the block that is being collapsed or expanded
@@ -57,44 +74,98 @@ $('article').readmore({
 });
 ```
 
-### Recommended CSS:
+### Removing Readmore:
+
+You can remove the Readmore.js functionality like so:
+
+```javascript
+$('article').readmore('destroy');
+```
+
+Or, you can be more surgical by specifying a particular element:
+
+```javascript
+$('article:first').readmore('destroy');
+```
+
+### Toggling blocks programmatically:
+
+You can toggle a block from code:
+
+```javascript
+$('article:nth-of-type(3)').readmore('toggle');
+```
+
+
+## CSS:
 
-The intention behind Readmore.js is to use CSS for as much functionality as possible. In particular, "collapsing" is achieved by setting `overflow: hidden` on the containing block and changing the `height` property.
+Readmore.js is designed to use CSS for as much functionality as possible: collapsed height can be set in CSS with the `max-height` property; "collapsing" is achieved by setting `overflow: hidden` on the containing block and changing the `height` property; and, finally, the expanding/collapsing animation is done with CSS3 transitions.
 
-By default, Readmore.js inserts the following CSS:
+By default, Readmore.js inserts the following CSS, in addition to some transition-related rules:
 
 ```css
-.readmore-js-toggle, .readmore-js-section {
+selector + [data-readmore-toggle], selector[data-readmore] {
   display: block;
   width: 100%;
 }
-.readmore-js-section {
-  overflow: hidden;
-}
 ```
 
-You can override the the first set of rules when you set up Readmore.js like so:
+_`selector` would be the element you invoked `readmore()` on, e.g.: `$('selector').readmore()`_
+
+You can override the base rules when you set up Readmore.js like so:
 
 ```javascript
-$('article').readmore({sectionCSS: 'display: inline-block; width: 50%;'});
+$('article').readmore({blockCSS: 'display: inline-block; width: 50%;'});
 ```
 
-If you want to include the necessary styling in your site's stylesheet, you can disable the dynamic embedding by passing `embedCSS: false` in the options hash.
+If you want to include the necessary styling in your site's stylesheet, you can disable the dynamic embedding by setting `embedCSS` to `false`:
 
 ```javascript
 $('article').readmore({embedCSS: false});
 ```
 
-## Removing Readmore
+### Media queries and other CSS tricks:
 
-You can remove the Readmore functionality like so:
+If you wanted to set a `maxHeight` based on lines, you could do so in CSS with something like:
 
-```javascript
-$('article').readmore('destroy');
+```css
+body {
+  font: 16px/1.5 sans-serif;
+}
+
+/* Show only 4 lines in smaller screens */
+article {
+  max-height: 6em; /* (4 * 1.5 = 6) */
+}
 ```
 
-Or, you can be more surgical by specifying a particular element:
+Then, with a media query you could change the number of lines shown, like so:
 
-```javascript
-$('article:first').readmore('destroy');
+```css
+/* Show 8 lines on larger screens */
+@media screen and (min-width: 640px) {
+  article {
+    max-height: 12em;
+  }
+}
 ```
+
+
+## Contributing
+
+Pull requests are always welcome, but not all suggested features will get merged. Feel free to contact me if you have an idea for a feature.
+
+Pull requests should include the minified script and this readme and the demo HTML should be updated with descriptions of your new feature. 
+
+You'll need NPM:
+
+```
+$ npm install
+```
+
+Which will install the necessary development dependencies. Then, to build the minified script:
+
+```
+$ gulp compress
+```
+

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "Readmore.js",
   "main": "readmore.min.js",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "homepage": "http://jedfoster.com/Readmore.js/",
   "authors": [
     "Jed Foster <jed@jedfoster.com>"