From 8cbca9c9c65a6024637ba22cf65c9c2b82c558db Mon Sep 17 00:00:00 2001
From: jlord <jessica.lord@github.com>
Date: Sun, 8 Dec 2013 22:43:39 -0800
Subject: [PATCH] working on readmes

---
 docs/building.md        |   4 +-
 docs/sheetsee-maps.md   |  65 ++++++++++++++-----------
 docs/sheetsee-tables.md | 104 +++++++++++++++++++++++++---------------
 3 files changed, 105 insertions(+), 68 deletions(-)

diff --git a/docs/building.md b/docs/building.md
index 690a8cac..52eff9b1 100644
--- a/docs/building.md
+++ b/docs/building.md
@@ -1,6 +1,6 @@
 You can customize your sheetsee build with just the parts you want to use. If you want to just use the full version, you can grab it here in [js/sheetsee.js]().
 
-**To build your sheetsee you'll need [Node.js]() on your computer and a commandline**
+**To build your sheetsee you'll need [Node.js]() on your computer and a command line**
 
 ## Install sheetsee from NPM
 The sheetsee module contains the basic sorting, organizing data functions and the script for building on the other modules. Create a folder for you new project and `cd` into it. Then install `sheetsee`.
@@ -17,4 +17,4 @@ Once you've decided which modules you want run this command `sheetsee ` adding:
 
 * _defaults to standardout on your console which you can `| pbcopy`
 
-So for instance, `sheetsee -m -t --save` will build you a sheetsee with the map and tables sections built in and save it as a file named sheetsee.js.
\ No newline at end of file
+So for instance, `sheetsee -m -t --save` will build you a sheetsee with the map and tables sections built in and save it as a file named sheetsee.js.
diff --git a/docs/sheetsee-maps.md b/docs/sheetsee-maps.md
index d6d3aa47..cf146bb8 100644
--- a/docs/sheetsee-maps.md
+++ b/docs/sheetsee-maps.md
@@ -1,62 +1,71 @@
 # sheetsee-maps
 
-![sheetsee](https://raw.github.com/jllord/sheetsee-cache/master/img/sheetsee-03.png)
+Sheetsee.js uses [Mapbox.js](http://mapbox.com/mapbox.js), a [Leaflet.js](http://leafletjs.com/) plugin, to make maps of your points, polygons, lines or multipolygons (all coordinate based).
 
-Module for creating maps with [sheetsee.js](http://jlord.github.io/sheetsee.js). It turns your spreadsheet data into geoJSON to use with mapbox.js. Below is the portion of the sheetsee.js documentation relevant to mapping. For all the documentation, go [here](http://jlord.github.io/sheetsee.js)!
+You'll create a placeholder `<div>` in your HTML and fire up a map from within `<script>` tags.
 
----
+#### Your HTML Placeholder `<div>`
 
-## Make a Map
+Create an empty `<div>` in your HTML, with an id (name).
 
-Sheetsee.js uses [Mapbox.js](http://mapbox.com/mapbox.js), a [Leaflet.js](http://leafletjs.com/) plugin, to make maps.
+```HTML
+<div id="map"></div>
+```
 
-Create an empty `<div>` in your HTML, with an id.
-
-    <div id="map"></div>
+#### Your `<script>` Functions
 
 Next you'll need to create geoJSON out of your data so that it can be mapped.
 
 ### Sheetsee.createGeoJSON(data, optionsJSON)
 
-This takes in your **data** and the parts of your data, **optionsJSON**,  that you plan in your map's popups. If you're not going to have popups on your markers, don't worry about it then and just pass in your data. 
+This takes in your **data** and the parts of your data, **optionsJSON**,  that you plan on including in your map's popups. If you're not going to have popups on your markers, don't worry about it then and just pass in your data (by default it will use all the row's information). 
 
-    var optionsJSON = ["name", "breed", "cuddlability"]
-    var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)
+```javascript
+var optionsJSON = ["name", "breed", "cuddlability"]
+var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)
+```
 
 It will return an _array_ in the special geoJSON format that map making things love. 
 
-    [{
-      "geometry": {"type": "Point", "coordinates": [long, lat]},
-      "properties": {
-        "marker-size": "small",
-        "marker-color": lineItem.hexcolor
-      },
-      "opts": {the options you pass in},
-    }}
-
+```javascript
+[{
+  "geometry": {"type": "Point", "coordinates": [long, lat]},
+  "properties": {
+    "marker-size": "small",
+    "marker-color": lineItem.hexcolor
+  },
+  "opts": {the options you pass in},
+}}
+```
 
 ### Sheetsee.loadMap(mapDiv)
 
 To create a simple map, with no data, you simply call `.loadMap() and pass in a _string_ of the **mapDiv** (with no #) from your HTML.
 
-    var map = Sheetsee.loadMap("map")
+```javascript
+var map = Sheetsee.loadMap("map")
+```
 
 ### Sheetsee.addTileLayer(map, tileLayer)
 
 To add a tile layer, aka a custom map scheme/design/background, you'll use this function which takes in your **map** and the source of the **tileLayer**. This source can be a Mapbox id, a URL to a TileJSON or your own generated TileJSON. See [Mapbox's Documentation](http://mapbox.com/mapbox.js/api/v1.0.2/#L.mapbox.tileLayer) for more information.
 
-    Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
+```javascript
+Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
+```
 
 You can add tiles from awesome mapmakers like [Stamen](examples.map-20v6611k) or create your own in Mapbox's [Tilemill](http://www.mapbox.com/tilemill) or [online](https://tiles.mapbox.com/newmap#3.00/0.00/0.00).
 
 ### Sheetsee.addMarkerLayer(geoJSON, map)
 
-To add makers to your map, use this function and pass in your **geoJSON** so that it can get the coordinates and your **map** so that it places the markers there.
-
-    var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map)
+To add makers, lines or shapes to your map, use this function and pass in your **geoJSON** so that it can get the coordinates and your **map** so that it places the markers there. You can customize what the content in your marker's popup looks like with a **popupTemplate**, which is HTML and can reference the column headers you included in your optionsJSON. 
 
-### Sheetsee.addPopups(map, markerLayer)
+```javascript
+var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, popupTemplate)
+```
 
-To customize the marker popup content in your map use this function and pass in your **map** and **markerLayer**.
+Example template:
 
-     Sheetsee.addPopups(map, markerLayer)
+```javascript
+var template = "<h4>Hello {{world}}</h4>"
+```
\ No newline at end of file
diff --git a/docs/sheetsee-tables.md b/docs/sheetsee-tables.md
index ee3f0074..468a2c50 100644
--- a/docs/sheetsee-tables.md
+++ b/docs/sheetsee-tables.md
@@ -1,71 +1,99 @@
 # sheetsee-tables
 
-![sheetsee](https://raw.github.com/jllord/sheetsee-cache/master/img/sheetsee-03.png)
+With this module you can create tables of your data that are sortable, searchable and paginate-able.
 
-Module for creating tables with sheetsee.js. You should also (for now) require the [sheetsee-core](http://www.npmjs.org/sheetsee-core) module since it includes the templating library that this module uses. 
+You'll need a `<div>` in your html, a `<script>` mustache template and a `<script>` that intitiates the table.
 
-Below is the portion of the full sheetsee documentation that is relevant to making tables. See the full [documentation](http://jlord.github.io/sheetsee.js) here.
-
----
+#### Your HTML Placeholder `<div>`
 
-## Make a Table
+This is as simple as an empty `<div>` with an id. This id should match the script template id in the next section.
 
-Sheetsee.js supports making multiple tables or templates with IcanHas.js. It currently supports sorting, filtering and pagination. For each of these you'll need a `<div>` in your html, a `<script>` template and a `<script>` that calls table making functions.
+```HTML
+<div id="siteTable"></div>
+```
 
-#### Your HTML Placeholder `<div>`
+#### Your `<script>` Template
 
-This is as simple as an empty `<div>` with an id. This id should match the script tempate id in the next section.
+Your template is the mockup of what you'd like your table to look like and what content it should show. The style is up to you!
 
-     <div id="siteTable"></div>
+##### Sorting
 
-#### Your `<script>` Template
+If you want users to be able to click on headers and sort that column, your template must include table headers with the class _tHeader_.
 
-Your template is the mockup of what you'd like your table to look like and what content it should show. Most of this is up to you but if you want users to be able to click on headers and sort that column you must make a table row with table headers with the class _tHeader_.
+*Example*
 
-The variables inside the {{}} must match the column headers in your spreadsheet. Lowercase and remember spaces are ommited, so "Place Name" will become "placename".
+_The variables inside the {{}} must match the column headers in your spreadsheet. Lowercase and remember spaces are omitted, so "Place Name" will become "placename"._
 
-    <script id="siteTable" type="text/html">
-        <table>
-        <tr><th class="tHeader">City</th><th class="tHeader">Place Name</th><th class="tHeader">Year</th><th class="tHeader">Image</th></tr>
-          {{#rows}}
-            <tr><td>{{city}}</td><td>{{placename}}</td><td>{{year}}</td><td>{{image}}</td></tr>
-          {{/rows}}
-      </table>
-    </script>
+```HTML
+<script id="siteTable" type="text/html">
+    <table>
+    <tr><th class="tHeader">City</th><th class="tHeader">Place Name</th><th class="tHeader">Year</th><th class="tHeader">Image</th></tr>
+      {{#rows}}
+        <tr><td>{{city}}</td><td>{{placename}}</td><td>{{year}}</td><td>{{image}}</td></tr>
+      {{/rows}}
+  </table>
+</script>
+```
 
 #### Your `<script>` Execution
 
-    <script type="text/javascript">
-        document.addEventListener('DOMContentLoaded', function() { // IE6 doesn't do DOMContentLoaded
-            Sheetsee.makeTable(gData, "#siteTable", 10)
-            Sheetsee.initiateTableFilter(gData, "#tableFilter", "#siteTable")
-        })
-    </script>
+```javascript
+<script type="text/javascript">
+    document.addEventListener('DOMContentLoaded', function() { // IE6 doesn't do DOMContentLoaded
+        Sheetsee.makeTable(gData, "#siteTable", 10)
+        Sheetsee.initiateTableFilter(gData, "#tableFilter", "#siteTable")
+    })
+</script>
+```
 
 To create another table, simply repeat the steps except for `initiateTableFilter()`
 
-    <div id="secondTable"></div>
-    <script id="secondTable"> // your table template here </script>
-    <script>Sheetsee.makeTable(otherData, "#secondTable", 10)</script>
+```HTML
+<div id="secondTable"></div>
+<script id="secondTable"> // your table template here </script>
+<script>Sheetsee.makeTable(otherData, "#secondTable", 10)</script>
+```
 
- Learn more about the things you can do with [mustache.js](http://mustache.github.io/).
+Learn more about the things you can do with [mustache.js](http://mustache.github.io/).
 
-### Sheetsee.makeTable(data, targetDiv)
+### Sheetsee.makeTable(data, targetDiv, pagination)
 
 You'll call this to make a table out of a **data** and tell it what **targetDiv** in the html to render it in (this should also be the same id as your script template id) and how many **rows** you want it to show per "page" of the table. If you don't include the pagination number, it will default to showing all rows on one page.
 
-    Sheetsee.makeTable(gData, "#siteTable", 10)
+```javascript
+Sheetsee.makeTable(gData, "#siteTable", 10)
+```
+
+#### Pagination
+
+If you do not put in a number for pagination, by default it will show all of the data at once. With pagination, at the bottom of your table it will add this for naviagtion, which you can style in your CSS:
+
+```HTML
+<div id='Pagination' currentPage class='table-pagination'>
+  Showing page currentPage of totalPages
+  <a class='pagination-pre'>Previous</a><a class='pagination-next'>Next</a>
+</div>
+```
 
 ## Table Filter/Search
 
-If you want to have an input to allow users to search/filter the data in the table, you'll add this to your html:
+If you want to have an input to allow users to search/filter the data in the table, you'll add an input to your HTML. Give it an ide and if you want, placeholder text:
 
-    <input id="tableFilter" type="text" placeholder="filter by.."></input>
-    <span class="clear button">Clear</span>
-    <span class="noMatches">no matches</span>
+```javascript
+<input id="tableFilter" type="text" placeholder="filter by.."></input>
+```
 
 ### Sheetsee.initiateTableFilter(data, filterDiv, tableDiv)
 
 You will then call this function to make that input live:
 
-    Sheetsee.initiateTableFilter(gData, "#TableFilter", "#siteTable")
+```javascript
+Sheetsee.initiateTableFilter(gData, "#TableFilter", "#siteTable")
+```
+
+It will connect that input to your data as well as inject this HTML for a button, which you can style yourself in your CSS:
+
+```HTML
+<span class="clear button">Clear</span>
+<span class="noMatches">no matches</span>
+```