Skip to content
Browse files

docs, package.json etc

  • Loading branch information...
1 parent 9d0fe60 commit 9b177d1308f9fb87eccb677a0e5b356d11d57902 @substack committed Dec 27, 2012
Showing with 163 additions and 3 deletions.
  1. +18 −0 LICENSE
  2. +3 −3 example/main.js
  3. +26 −0 package.json
  4. +116 −0 readme.markdown
View
18 LICENSE
@@ -0,0 +1,18 @@
+This software is released under the MIT license:
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
View
6 example/main.js
@@ -1,7 +1,7 @@
var divs = {
- foo : document.querySelector('#foo'),
- bar : document.querySelector('#bar'),
- baz : document.querySelector('#baz')
+ foo: document.querySelector('#foo'),
+ bar: document.querySelector('#bar'),
+ baz: document.querySelector('#baz')
};
var singlePage = require('../');
View
26 package.json
@@ -0,0 +1,26 @@
+{
+ "name" : "single-page",
+ "version" : "0.0.0",
+ "description" : "pushState callback with a #hash fallback",
+ "main" : "index.js",
+ "scripts" : {
+ "test" : "tap test/*.js"
+ },
+ "repository" : {
+ "type" : "git",
+ "url" : "git://github.com/substack/single-page.git"
+ },
+ "homepage" : "https://github.com/substack/single-page",
+ "keywords" : [
+ "pushState",
+ "single-page",
+ "client-side",
+ "browser"
+ ],
+ "author" : {
+ "name" : "James Halliday",
+ "email" : "mail@substack.net",
+ "url" : "http://substack.net"
+ },
+ "license" : "MIT"
+}
View
116 readme.markdown
@@ -0,0 +1,116 @@
+# single-page
+
+pushState callback with a #hash fallback
+
+# example
+
+Given some html with elements `#foo`, `#bar`, and `#baz`:
+
+``` html
+<html>
+ <style>
+ </style>
+ <body>
+ <div id="foo">
+ foo foO fOo fOO Foo FoO FOo FOO
+ <div><a href="/bar">bar</a></div>
+ </div>
+
+ <div id="bar">
+ bar baR bAr bAR Bar BaR BAr BAR
+ <div><a href="/baz">baz</a></div>
+ </div>
+
+ <div id="baz">
+ baz baZ bAz bAZ Baz BaZ BAz BAZ
+ <div><a href="/foo">foo</a></div>
+ </div>
+
+ <script src="bundle.js"></script>
+ </body>
+</html>
+```
+
+Now turn each of the divs into pages with their own routes.
+Note that this module doesn't update the link callbacks for you. You'll need to
+handle that for yourself.
+
+``` js
+var divs = {
+ foo: document.querySelector('#foo'),
+ bar: document.querySelector('#bar'),
+ baz: document.querySelector('#baz')
+};
+
+var singlePage = require('single-page');
+var showPage = singlePage(function (href) {
+ Object.keys(divs).forEach(function (key) {
+ hide(divs[key]);
+ });
+
+ var div = divs[href.replace(/^\//, '')];
+ if (div) show(div)
+ else show(divs.foo)
+
+ function hide (e) { e.style.display = 'none' }
+ function show (e) { e.style.display = 'block' }
+});
+
+var links = document.querySelectorAll('a[href]');
+for (var i = 0; i < links.length; i++) {
+ links[i].addEventListener('click', function (ev) {
+ ev.preventDefault();
+ showPage(this.getAttribute('href'));
+ });
+}
+```
+
+You'll need to have a server that will serve up the same static content for each
+of the pushState routes. Something like this will work:
+
+``` js
+var http = require('http');
+var ecstatic = require('ecstatic')(__dirname);
+
+var server = http.createServer(function (req, res) {
+ if (/^\/[^\/.]+$/.test(req.url)) {
+ req.url = '/';
+ }
+ ecstatic(req, res);
+});
+server.listen(5000);
+```
+
+Now when you go to `http://localhost:5000` and click around, you'll see `/foo`,
+`/bar` and `/baz` in the address bar when you click links, even though you're
+not reloading the page.
+
+# methods
+
+``` js
+var singlePage = require('single-page')
+```
+
+## var showPage = singlePage(cb)
+
+Fire `cb(href)` at the start and whenever the page navigation changes so you can
+update the page contents accordingly.
+
+## showPage(href)
+
+Navigate to `href`, firing the callback passed to singlePage.
+
+# install
+
+With `npm` do:
+
+```
+npm install single-page
+```
+
+Use [browserify](http://browserify.org) do bundle this module into your
+application.
+
+# license
+
+MIT

0 comments on commit 9b177d1

Please sign in to comment.
Something went wrong with that request. Please try again.