prueba

.gitignore

@@ -1,2 +1,2 @@
 .DS_Store
-node_modules/
+node_modules/

bower.json

@@ -0,0 +1,26 @@
+{
+  "name": "sheetsee",
+  "version": "1.0.0",
+  "main": [
+    "js/sheetsee.js",
+    "css/sss.css"
+  ],
+  "ignore": [
+    "contributing.md",
+    "docs",
+    "demos",
+    "img",
+    "site"
+  ],
+  "homepage": "http://jlord.github.io/sheetsee.js",
+  "description": "Sheetsee.js is a library for easily creating tables, charts and maps from spreadsheet data.",
+  "keywords": [
+    "spreadsheet",
+    "tables",
+    "maps"
+  ],
+  "dependencies": {
+    "jquery": ">= 1.9.0",
+    "tabletop": ">= 1.3.5"
+  }
+}

buildpage.js

@@ -42,9 +42,11 @@ function applyTemplate(html, name) {
   if (name === "index") {
     content.rootstyle = "."
     content.rootdoc = "docs"
+    content.rootdemo = "."
   } else {
      content.rootstyle = ".."
      content.rootdoc = "."
+     content.rootdemo = ".."
   }
   var file = "template.hbs"
   var rawTemplate =  fs.readFileSync(file).toString()

contributing.md

@@ -0,0 +1,17 @@
+# Contributing to Sheetsee.js
+
+This repository (github/jlord/sheetsee.js) is primarily for documentation and the documentation website. It also contains a copy of a full sheetsee.js (one that includes the map, charts and table portions).
+
+### Use this repository to file issues and pull requests on documentation/documentation site.
+
+The documentation is contained in the `/docs` and `/demos` folders in the root. I build the site (on the `gh-pages` branch) from these files so **submit pull requests against the files in `/docs` and `/demos`** and not the `/site` folder or the `gh-pages` branch.
+
+### For issues and pull requests on the JavaScript, use the repository for the affected portion:
+
+- [sheetsee](http://www.github.com/jlord/sheetsee/issues/new)
+- [sheetsee-core](http://www.github.com/jlord/sheetsee-core/issues/new)
+- [sheetsee-tables](http://www.github.com/jlord/sheetsee-tables/issues/new)
+- [sheetsee-maps](http://www.github.com/jlord/sheetsee-maps/issues/new)
+- [sheetsee-charts](http://www.github.com/jlord/sheetsee-charts/issues/new)
+
+Thank you much! :heart: :octocat:

demos/demo-chart.html

@@ -5,7 +5,8 @@
     <title>Sheetsee Chart Demo</title>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
     <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
-    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js'></script>
+    <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic'>
+    <script type='text/javascript' src='../js/tabletop1.3.4.js'></script>
     <script type='text/javascript' src='../js/sheetsee.js'></script>
     <link rel='stylesheet' type='text/css' href='../assets/style.css'>
   </head>
@@ -46,9 +47,9 @@ <h4 id="ideas">Ideas</h4>
       </ul>
       <h4>Demos</h4>
       <ul>
-        <li><a href="/demos/demo-table.html">Table Demo</a></li>
-        <li><a href="/demos/demo-map.html">Map Demo</a></li>
-        <li><a href="/demos/demo-chart.html">Chart Demo</a></li>
+        <li><a href="./demo-table.html">Table Demo</a></li>
+        <li><a href="./demo-map.html">Map Demo</a></li>
+        <li><a href="./demo-chart.html">Chart Demo</a></li>
       </ul>
       <h4 id="use">Use</h4>
       <ul>
@@ -62,7 +63,7 @@ <h4 id="use">Contact</h4>
         <li><a href="http://www.twitter.com/jllord">@jllord</a></li>
         <li><a href="https://github.com/jlord/sheetsee.js/issues/new">File an issue</a></li>
       </ul>
-      <h4 id="home"><a href="/">Home</a></h4>
+      <h4><a href="http://jlord.github.io/sheetsee.js">Home Page</a></h4>
     </footer>
   </div>
 

demos/demo-map.html

@@ -5,13 +5,14 @@
     <title>Sheetsee Maps Demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
-    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js'></script>
+    <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic'>
+    <script type='text/javascript' src='../js/tabletop1.3.4.js'></script>
     <script type='text/javascript' src='../js/sheetsee.js'></script>
     <link rel='stylesheet' type='text/css' href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css'  />
     <link rel='stylesheet' type='text/css' href='../assets/style.css'>
   </head>
   <style>
-    #map {max-width: 800px; height: 500px;}
+    #map, #shapesmap {max-width: 800px; height: 500px;}
     .leaflet-popup-content li {list-style:none;}
     .leaflet-popup-content {width: 102px;}
     .leaflet-popup-content img {width: 100px;}
@@ -23,6 +24,9 @@ <h1>All Pennies  Map</h1>
       <p><em><a href="https://docs.google.com/a/github.com/spreadsheet/ccc?key=0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc&usp=drive_web#gid=0" target="_blank">spreadsheet</a></em><p>
       <div id="map"></div>
       <p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a> // <a href="../docs/sheetsee-maps.html">View Documentation</a></em></p>
+      <h2>Using linestrings, polygons and multipolygons</h2>
+      <div id="shapesmap"></div>
+      <p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a> // <a href="https://docs.google.com/spreadsheets/d/1jOz6yFY5nIDre5RYtVROYPgIbkgh9lIddsyXo0-79_0/edit?usp=drive_web" target="_blank">View Spreadsheet</a></em></p>
 
       <footer>
         <h4 id="getting-started">Getting Started</h4>
@@ -39,9 +43,9 @@ <h4 id="ideas">Ideas</h4>
         </ul>
         <h4>Demos</h4>
         <ul>
-          <li><a href="/demos/demo-table.html">Table Demo</a></li>
-          <li><a href="/demos/demo-map.html">Map Demo</a></li>
-          <li><a href="/demos/demo-chart.html">Chart Demo</a></li>
+          <li><a href="./demo-table.html">Table Demo</a></li>
+          <li><a href="./demo-map.html">Map Demo</a></li>
+          <li><a href="./demo-chart.html">Chart Demo</a></li>
         </ul>
         <h4 id="use">Use</h4>
         <ul>
@@ -55,13 +59,15 @@ <h4 id="use">Contact</h4>
           <li><a href="http://www.twitter.com/jllord">@jllord</a></li>
           <li><a href="https://github.com/jlord/sheetsee.js/issues/new">File an issue</a></li>
         </ul>
-        <h4 id="home"><a href="/">Home</a></h4>
+        <h4><a href="http://jlord.github.io/sheetsee.js">Home Page</a></h4>
       </footer>
 
     <script type="text/javascript">
       document.addEventListener('DOMContentLoaded', function() {
         var URL = "0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc"
+        var URL2 = "1jOz6yFY5nIDre5RYtVROYPgIbkgh9lIddsyXo0-79_0"
         Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
+        Tabletop.init( { key: URL2, callback: shapesMap, simpleSheet: true } )
       })
 
       function showInfo(data) {
@@ -72,8 +78,18 @@ <h4 id="home"><a href="/">Home</a></h4>
         var geoJSON = Sheetsee.createGeoJSON(data, optionsJSON)
         var map = Sheetsee.loadMap("map")
         Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
-        var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, template)
+        Sheetsee.addMarkerLayer(geoJSON, map, template)
       }
+
+      function shapesMap(data) {
+        var opts = ['description']
+        var geojson = Sheetsee.createGeoJSON(data, opts)
+        var plytemplate = "<h4>{{description}}</h4>"
+        var shapesmap = Sheetsee.loadMap("shapesmap")
+        Sheetsee.addTileLayer(shapesmap, 'examples.map-20v6611k')
+        Sheetsee.addMarkerLayer(geojson, shapesmap, plytemplate)
+      }
+
     </script>
   </body>
 </html>

demos/demo-table.html

@@ -4,9 +4,10 @@
     <meta charset='utf-8'>
     <title>Sheetsee Table Demo</title>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
-    <script type='text/javascript' src='../js/sheetsee.js'></script>
     <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
-    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js'></script>
+    <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic'>
+    <script type='text/javascript' src='../js/tabletop1.3.4.js'></script>
+    <script type='text/javascript' src='../js/sheetsee.js'></script>
     <link rel='stylesheet' type='text/css' href='../assets/style.css'>
   </head>
   <style>
@@ -47,9 +48,9 @@ <h4 id="ideas">Ideas</h4>
       </ul>
       <h4>Demos</h4>
       <ul>
-        <li><a href="/demos/demo-table.html">Table Demo</a></li>
-        <li><a href="/demos/demo-map.html">Map Demo</a></li>
-        <li><a href="/demos/demo-chart.html">Chart Demo</a></li>
+        <li><a href="./demo-table.html">Table Demo</a></li>
+        <li><a href="./demo-map.html">Map Demo</a></li>
+        <li><a href="./demo-chart.html">Chart Demo</a></li>
       </ul>
       <h4 id="use">Use</h4>
       <ul>
@@ -63,7 +64,7 @@ <h4 id="use">Contact</h4>
         <li><a href="http://www.twitter.com/jllord">@jllord</a></li>
         <li><a href="https://github.com/jlord/sheetsee.js/issues/new">File an issue</a></li>
       </ul>
-      <h4 id="home"><a href="/">Home</a></h4>
+      <h4><a href="http://jlord.github.io/sheetsee.js">Home Page</a></h4>
     </footer>
 </div>
 

docs/basics.md

@@ -30,8 +30,9 @@ Ignoring some HTML things to conserve space, you get the point. This is a basic
 ```HTML
 <html>
   <head>
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.1.0/tabletop.min.js"></script>
+    <meta charset="utf-8">
+    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
+    <script type="text/javascript" src="js/tabletop.js"></script>
     <script type="text/javascript" src='js/sheetsee.js'></script>
     <link rel="stylesheet" type="text/css" href="css/sss.css">
   </head>
@@ -90,4 +91,4 @@ You should have an address in a box at the bottom, your key is the portion betwe
 
 ### CSS
 
-Sheetsee.js comes with a bare minimum stylesheet, `sss.csss`, which contains elements you'll want to style when using the feature they correspond to.
+Sheetsee.js comes with a bare minimum stylesheet, `sss.css`, which contains elements you'll want to style when using the feature they correspond to.

docs/changelog.md

@@ -1,5 +1,25 @@
 ### Sheetsee v3
 
+## May 10, 2014
+### Better Table Template Options
+
+Updated `sheetsee-tables` to allow you to re-use a template (rather than duplicating it for each different table you wanted to create). Previously it assumed your HTML table `div` id matched your script template `id`. This means that you can pass in an extra key/value pair in your table options into `Sheetsee.maketable()`. The new pair it takes is: `"templateID" : "yourtemplateid"`. Example below, full `sheetsee-tables` documentation [here](docs/sheetsee-tables.html).
+
+```JavaScript
+var tableOptions = {
+                    "data": gData,
+                    "pagination": 10,
+                    "tableDiv": "#fullTable",
+                    "filterDiv": "#fullTableFilter",
+                    "templateID": "tableTemplte"
+                    }
+Sheetsee.makeTable(tableOptions)
+```
+
+## May 2014
+### Important Google Spreadsheets & Tabletop News
+
+Google recently updated their Google Spreadsheets and the API. For a bit this was breaking things using the old API, including Tabletop. This has been fixed and the latest version of tabletop.js works on both old and new spreadsheets. **Be sure to include at least version 1.3.4 in your project.**
 
 ## August 13, 2013
 ### Charting Intake

docs/fork-n-go.md

@@ -19,7 +19,7 @@ What all of this means is that Sheetsee.js projects, hosted on gh-pages branches
 A Fork-n-Go example from my [blog post](http://jlord.us/fork-n-go/) on the topic:
 
 ### Hack Spots Fork-n-Go
- 
+
 I made this website to collect hack spots all over the world from friends and friends of friends (the spreadsheet is wide open, so you can add some, too!). It’s using sheetsee to power the table, map and other elements of the page. Its source is in this repo, with just a gh-pages branch. To create an instance of this site for yourself all you need to do:
 
 - Create a Google spreadsheet with the same headers (just copy and paste header row from the original). Click File > Publish to Web, then Start Publishing.
@@ -29,4 +29,4 @@ Commit your change.
 
 Now you have the same site connected to a spreadsheet that you manage — it’s live and can be found at yourGitHubName.github.io/theReposName.
 
-![forkcommit](http://jlord.s3.amazonaws.com/wp-content/uploads/forkcommit1.png)
+![forkcommit](http://jlord.s3.amazonaws.com/wp-content/uploads/forkcommit1.png)

docs/sheetsee-charts.md

@@ -1,6 +1,6 @@
 # Sheetsee-charts
 
-_[View Demo](/demos/demo-chart.html)_
+_[View Demo](../demos/demo-chart.html)_
 
 Sheetsee.js provides three [D3.js](http://d3js.org/) chart options to use with your spreadsheet data: a bar chart, line graph and pie chart. You can also use a custom D3 chart with Sheetsee, read about that [here](custom-charts.md).
 

docs/sheetsee-maps.md

@@ -1,9 +1,33 @@
 # Sheetsee-maps
 
-_[View Demo](/demos/demo-map.html)_
+_[View Demo](../demos/demo-map.html)_
 
 Sheetsee.js uses [Mapbox.js](http://mapbox.com/mapbox.js) and [Leaflet.js](http://leafletjs.com/) to make maps of your **points**, **polygons**, **lines** or **multipolygons** (all coordinate based). Details on what that actually looks like [here](http://leafletjs.com/examples/geojson.html).
 
+### Maps: Polygons and Lines
+
+Sheetsee-maps now supports polygons and lines. So long as you have the correct coordinate structure in your cells, Sheetsee will add them to the geoJSON it creates for your maps. More details for coordinates of lines and polygons in geoJSON are [here](http://leafletjs.com/examples/geojson.html), but briefly:
+
+A linestring:
+
+```
+[-122.41722106933594, 37.7663045891584], [-122.40477561950684, 37.77695634643178]
+```
+
+A polygon:
+
+```
+[-122.41790771484375, 37.740381166384914], [-122.41790771484375, 37.74520008134973], [-122.40966796874999, 37.74520008134973],[-122.40966796874999, 37.740381166384914], [-122.41790771484375, 37.740381166384914]
+```
+
+A Multipolygon:
+
+```
+[[-122.431640625, 37.79106586542567], [-122.431640625, 37.797441398913286], [-122.42666244506835, 37.797441398913286],[-122.42666244506835, 37.79106586542567], [-122.431640625, 37.79106586542567]],
+[[-122.43352890014648, 37.78197638783258], [-122.43352890014648, 37.789031004883654], [-122.42443084716797, 37.789031004883654], [-122.42443084716797, 37.78197638783258], [-122.43352890014648, 37.78197638783258]]
+
+### The Parts
+
 You'll create a placeholder `<div>` in your HTML, CSS giving it a size and fire up a map from within `<script>` tags. You can also customize your popup content.
 
 ## Your HTML Placeholder `<div>`
@@ -77,7 +101,7 @@ Example template:
 var popupTemplate = "<h4>Hello {{name}}</h4>"
 ```
 
-#### Source from the [map demo](/demos/demo-map.html):
+#### Source from the [map demo](https://github.com/jlord/sheetsee.js/blob/master/demos/demo-map.html):
 
 ```JavaScript
 <script type="text/javascript">