updated app

node_modules/derby-examples/gallery/Makefile

@@ -0,0 +1,2 @@
+compile:
+	./node_modules/coffee-script/bin/coffee -bw -o ./lib -c ./src

node_modules/derby-examples/gallery/README.md

@@ -0,0 +1 @@
+# gallery

node_modules/derby-examples/gallery/lib/app/index.js

@@ -0,0 +1,163 @@
+// Generated by CoffeeScript 1.3.1
+var app, fillDimension, get, lastLoad, parseUrl, photoDimension, photoDimensionFn, photoSrc, preCache, ready, view, _ref;
+
+parseUrl = require('url').parse;
+
+_ref = app = require('derby').createApp(module), get = _ref.get, view = _ref.view, ready = _ref.ready;
+
+fillDimension = function(max, side, otherSide) {
+  if (side >= otherSide) {
+    return max;
+  } else {
+    return side * max / otherSide;
+  }
+};
+
+photoDimension = function(obj, source, size, type) {
+  var otherSide, side;
+  if (size == null) {
+    size = 's';
+  }
+  if (source === 'flickr') {
+    if (type === 'width') {
+      side = obj.o_width;
+      otherSide = obj.o_height;
+    } else {
+      side = obj.o_height;
+      otherSide = obj.o_width;
+    }
+    if (size === 's') {
+      return 75;
+    }
+    if (size === 'm') {
+      return fillDimension(240, side, otherSide);
+    }
+  }
+};
+
+photoDimensionFn = function(type) {
+  return function(obj, source, size, scale) {
+    if (scale == null) {
+      scale = 1;
+    }
+    if (!obj) {
+      return;
+    }
+    return Math.round(photoDimension(obj, source, size, type) * scale);
+  };
+};
+
+photoSrc = function(obj, source, size) {
+  if (size == null) {
+    size = 's';
+  }
+  if (!obj) {
+    return;
+  }
+  if (source === 'flickr') {
+    return ("http://farm" + obj.farm + ".staticflickr.com/") + ("" + obj.server + "/" + obj.id + "_" + obj.secret + "_" + size + ".jpg");
+  }
+};
+
+view.fn('photoWidth', photoDimensionFn('width'));
+
+view.fn('photoHeight', photoDimensionFn('height'));
+
+view.fn('photoSrc', photoSrc);
+
+preCache = function(obj, source, callback) {
+  var cancelled, count, finish, img, src, wait;
+  src = photoSrc(obj, source, 'm');
+  img = document.createElement('img');
+  img.style.display = 'none';
+  img.src = src;
+  cancelled = false;
+  callback.cancel = function() {
+    return cancelled = true;
+  };
+  finish = function() {
+    document.body.removeChild(img);
+    if (!cancelled) {
+      return callback();
+    }
+  };
+  count = 2;
+  wait = function() {
+    return --count || finish();
+  };
+  img.onload = wait;
+  setTimeout(wait, 50);
+  return document.body.appendChild(img);
+};
+
+get('/:source/:type/:id/:image?', function(page, model, params, next) {
+  var id, image, pageIndex, query, search, source, type;
+  source = params.source, type = params.type, id = params.id, image = params.image, query = params.query;
+  search = parseUrl(params.url).search;
+  if (source !== 'flickr') {
+    next();
+  }
+  pageIndex = query.page ? query.page - 1 : 0;
+  return model.fetch("" + source + "." + type + ".id_" + id + ".photos.pages." + pageIndex, function(err, photos) {
+    model.ref('_pages', photos.parent());
+    model.ref('_page', '_pages', '_selectedPage');
+    model.set('_toggle', 0);
+    model.set('_fade0', 1);
+    model.set('_fade1', 0);
+    model.ref('_image0', '_page', '_selected0');
+    model.ref('_image1', '_page', '_selected1');
+    model.set('_selectedPage', pageIndex);
+    model.set('_selected0', image);
+    return page.render({
+      source: source,
+      search: search
+    });
+  });
+});
+
+lastLoad = null;
+
+get({
+  from: '/:source/:type/:id/:image?',
+  to: '/:source/:type/:id/:image?'
+}, function(model, params, next) {
+  var id, image, pageIndex, query, source, type;
+  source = params.source, type = params.type, id = params.id, image = params.image, query = params.query;
+  if (source !== 'flickr') {
+    next();
+  }
+  pageIndex = query.page ? query.page - 1 : 0;
+  model.set('_selectedPage', pageIndex);
+  if (lastLoad) {
+    lastLoad.cancel();
+  }
+  lastLoad = function() {
+    var toggleValue;
+    lastLoad = null;
+    toggleValue = +(!model.get('_toggle'));
+    model.set('_toggle', toggleValue);
+    model.set('_selected' + toggleValue, image);
+    return model.set('_fade' + toggleValue, 1);
+  };
+  return preCache(model.get('_page.' + image), source, lastLoad);
+});
+
+ready(function(model) {
+  app.select = function(e, el) {
+    var url;
+    model.set('_fade' + model.get('_toggle'), 0);
+    url = model.at(el).leaf() + window.location.search;
+    return view.history.push(url);
+  };
+  model.set('_showReconnect', true);
+  app.connect = function() {
+    model.set('_showReconnect', false);
+    setTimeout((function() {
+      return model.set('_showReconnect', true);
+    }), 1000);
+    return model.socket.socket.connect();
+  };
+  return app.reload = function() {
+    return window.location.reload();
+  };
+});

node_modules/derby-examples/gallery/lib/server/flickr.js

@@ -0,0 +1,100 @@
+// Generated by CoffeeScript 1.3.1
+var FLICKR_API, Flickr, request;
+
+request = require('request');
+
+FLICKR_API = 'http://api.flickr.com/services/rest/';
+
+exports.setup = function(store, options) {
+  var flickr;
+  flickr = new Flickr(options);
+  store.route('get', 'flickr.user.id_*.photos.pages.*', function(username, page, done) {
+    return flickr.userPublicPhotos(username, page, done);
+  });
+  return store.route('get', 'flickr.photoset.id_*.photos.pages.*', function(id, page, done) {
+    return flickr.setPhotos(id, page, done);
+  });
+};
+
+Flickr = function(options) {
+  this.key = options.key;
+  this.userIds = {};
+};
+
+Flickr.prototype = {
+  get: function(qs, callback) {
+    qs.format = 'json';
+    qs.api_key = this.key;
+    qs.per_page = 20;
+    qs.extras = 'o_dims';
+    return request({
+      url: FLICKR_API,
+      qs: qs
+    }, function(err, res, body) {
+      var data, match;
+      if (err) {
+        return callback(err);
+      }
+      if (!((match = /jsonFlickrApi\((.*)\)/.exec(body)) && (body = match[1]))) {
+        return callback(new Erorr('Unknown Flickr response'));
+      }
+      data = JSON.parse(body);
+      if (data.stat !== 'ok') {
+        return callback(new Error(data.message));
+      }
+      return callback(null, data);
+    });
+  },
+  userId: function(username, callback) {
+    var id, qs,
+      _this = this;
+    if (id = this.userIds[username]) {
+      return callback(null, id);
+    }
+    qs = {
+      method: 'flickr.people.findByUsername',
+      username: username
+    };
+    return this.get(qs, function(err, body) {
+      if (err) {
+        return callback(err);
+      }
+      id = _this.userIds[username] = body.user.id;
+      return callback(null, id);
+    });
+  },
+  userPublicPhotos: function(username, page, callback) {
+    var _this = this;
+    return this.userId(username, function(err, user_id) {
+      var qs;
+      if (err) {
+        return callback(err);
+      }
+      qs = {
+        method: 'flickr.people.getPublicPhotos',
+        user_id: user_id,
+        page: +page + 1
+      };
+      return _this.get(qs, function(err, body) {
+        if (err) {
+          return callback(err);
+        }
+        return callback(null, body.photos.photo, -1);
+      });
+    });
+  },
+  setPhotos: function(photoset_id, page, callback) {
+    var qs;
+    qs = {
+      method: 'flickr.photosets.getPhotos',
+      photoset_id: photoset_id,
+      page: +page + 1
+    };
+    return this.get(qs, function(err, body) {
+      if (err) {
+        return callback(err);
+      }
+      return callback(null, body.photoset.photo, -1);
+    });
+  }
+};

node_modules/derby-examples/gallery/lib/server/index.js

@@ -0,0 +1,42 @@
+// Generated by CoffeeScript 1.3.1
+var ONE_YEAR, app, derby, express, expressApp, flickr, gzippo, http, path, publicPath, root, server, serverError, store;
+
+http = require('http');
+
+path = require('path');
+
+express = require('express');
+
+gzippo = require('gzippo');
+
+derby = require('derby');
+
+app = require('../app');
+
+flickr = require('./flickr');
+
+serverError = require('./serverError');
+
+ONE_YEAR = 1000 * 60 * 60 * 24 * 365;
+
+root = path.dirname(path.dirname(__dirname));
+
+publicPath = path.join(root, 'public');
+
+(expressApp = express()).use(express.favicon()).use(gzippo.staticGzip(publicPath, {
+  maxAge: ONE_YEAR
+})).use(express.compress()).use(app.router()).use(expressApp.router).use(serverError(root));
+
+module.exports = server = http.createServer(expressApp);
+
+expressApp.all('*', function(req) {
+  throw "404: " + req.url;
+});
+
+store = app.createStore({
+  listen: server
+});
+
+flickr.setup(store, {
+  key: '86958e03c183fcb1b7fddfeb19f3a423'
+});

node_modules/derby-examples/gallery/lib/server/serverError.js

@@ -0,0 +1,27 @@
+// Generated by CoffeeScript 1.3.1
+var derby, isProduction;
+
+derby = require('derby');
+
+isProduction = derby.util.isProduction;
+
+module.exports = function(root) {
+  var staticPages;
+  staticPages = derby.createStatic(root);
+  return function(err, req, res, next) {
+    var message, status;
+    if (err == null) {
+      return next();
+    }
+    console.log(err.stack ? err.stack : err);
+    message = err.message || err.toString();
+    status = parseInt(message);
+    if (status === 404) {
+      return staticPages.render('404', res, {
+        url: req.url
+      }, 404);
+    } else {
+      return res.send((400 <= status && status < 600) ? status : 500);
+    }
+  };
+};

node_modules/derby-examples/gallery/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "derby-gallery-example",
+  "description": "Demo gallery application for Derby",
+  "version": "0.0.0",
+  "main": "./server.js",
+  "dependencies": {
+    "derby": "*",
+    "express": "3.x",
+    "gzippo": ">=0.1.4",
+    "request": ">=2.9.153"
+  },
+  "private": true,
+  "devDependencies": {
+    "coffee-script": ">=1.3.1"
+  }
+}

node_modules/derby-examples/gallery/server.js

@@ -0,0 +1 @@
+require('derby').run(__dirname + '/lib/server')

node_modules/derby-examples/gallery/src/app/index.coffee

@@ -0,0 +1,105 @@
+parseUrl = require('url').parse
+{get, view, ready} = app = require('derby').createApp module
+
+fillDimension = (max, side, otherSide) ->
+  return if side >= otherSide
+    max
+  else
+    side * max / otherSide
+
+photoDimension = (obj, source, size = 's', type) ->
+  if source is 'flickr'
+    if type is 'width'
+      side = obj.o_width
+      otherSide = obj.o_height
+    else
+      side = obj.o_height
+      otherSide = obj.o_width
+    if size is 's'
+      return 75
+    if size is 'm'
+      return fillDimension 240, side, otherSide
+  return
+
+photoDimensionFn = (type) ->
+  return (obj, source, size, scale = 1) ->
+    return unless obj
+    return Math.round photoDimension(obj, source, size, type) * scale
+
+photoSrc = (obj, source, size = 's') ->
+  return unless obj
+  if source is 'flickr'
+    return "http://farm#{obj.farm}.staticflickr.com/" +
+      "#{obj.server}/#{obj.id}_#{obj.secret}_#{size}.jpg"
+  return
+
+view.fn 'photoWidth', photoDimensionFn 'width'
+view.fn 'photoHeight', photoDimensionFn 'height'
+view.fn 'photoSrc', photoSrc
+
+preCache = (obj, source, callback) ->
+  src = photoSrc obj, source, 'm'
+  img = document.createElement 'img'
+  img.style.display = 'none'
+  img.src = src
+  cancelled = false
+  callback.cancel = -> cancelled = true
+  finish = ->
+    document.body.removeChild img
+    callback() unless cancelled
+  count = 2
+  wait = -> --count || finish()
+  img.onload = wait
+  setTimeout wait, 50
+  document.body.appendChild img
+
+get '/:source/:type/:id/:image?', (page, model, params, next) ->
+  {source, type, id, image, query} = params
+  {search} = parseUrl params.url
+  next() unless source is 'flickr'
+  pageIndex = if query.page then query.page - 1 else 0
+  model.fetch "#{source}.#{type}.id_#{id}.photos.pages.#{pageIndex}", (err, photos) ->
+    model.ref '_pages', photos.parent()
+    model.ref '_page', '_pages', '_selectedPage'
+
+    model.set '_toggle', 0
+    model.set '_fade0', 1
+    model.set '_fade1', 0
+
+    model.ref '_image0', '_page', '_selected0'
+    model.ref '_image1', '_page', '_selected1'
+
+    model.set '_selectedPage', pageIndex
+    model.set '_selected0', image
+    page.render {source, search}
+
+lastLoad = null
+get from: '/:source/:type/:id/:image?', to: '/:source/:type/:id/:image?',
+  (model, params, next) ->
+    {source, type, id, image, query} = params
+    next() unless source is 'flickr'
+    pageIndex = if query.page then query.page - 1 else 0
+    model.set '_selectedPage', pageIndex
+
+    lastLoad.cancel() if lastLoad
+    lastLoad = ->
+      lastLoad = null
+      toggleValue = +!model.get('_toggle')
+      model.set '_toggle', toggleValue
+      model.set '_selected' + toggleValue, image
+      model.set '_fade' + toggleValue, 1
+    preCache model.get('_page.' + image), source, lastLoad
+
+ready (model) ->
+
+  app.select = (e, el) ->
+    model.set '_fade' + model.get('_toggle'), 0
+    url = model.at(el).leaf() + window.location.search
+    view.history.push url
+
+  model.set '_showReconnect', true
+  app.connect = ->
+    model.set '_showReconnect', false
+    setTimeout (-> model.set '_showReconnect', true), 1000
+    model.socket.socket.connect()
+  app.reload = -> window.location.reload()

node_modules/derby-examples/gallery/src/server/flickr.coffee

@@ -0,0 +1,61 @@
+request = require 'request'
+
+FLICKR_API = 'http://api.flickr.com/services/rest/'
+
+exports.setup = (store, options) ->
+  flickr = new Flickr options
+
+  # Prefacing the ids with 'id_' is needed, since photosets
+  # start with a number, and paths must only start with a
+  # letter or underscore, like JS variable names
+
+  store.route 'get', 'flickr.user.id_*.photos.pages.*', (username, page, done) ->
+    flickr.userPublicPhotos username, page, done
+
+  store.route 'get', 'flickr.photoset.id_*.photos.pages.*', (id, page, done) ->
+    flickr.setPhotos id, page, done
+
+
+Flickr = (options) ->
+  @key = options.key
+  @userIds = {}
+  return
+
+Flickr:: =
+
+  get: (qs, callback) ->
+    qs.format = 'json'
+    qs.api_key = @key
+    qs.per_page = 20
+    qs.extras = 'o_dims'
+    request {url: FLICKR_API, qs}, (err, res, body) ->
+      return callback err if err
+      unless (match = /jsonFlickrApi\((.*)\)/.exec body) && (body = match[1])
+       return callback new Erorr 'Unknown Flickr response'
+      data = JSON.parse body
+      unless data.stat == 'ok'
+        return callback new Error data.message
+      callback null, data
+
+  userId: (username, callback) ->
+    if id = @userIds[username]
+      return callback null, id
+    qs = {method: 'flickr.people.findByUsername', username}
+    @get qs, (err, body) =>
+      return callback err if err
+      id = @userIds[username] = body.user.id
+      callback null, id
+
+  userPublicPhotos: (username, page, callback) ->
+    @userId username, (err, user_id) =>
+      return callback err if err
+      qs = {method: 'flickr.people.getPublicPhotos', user_id, page: +page + 1}
+      @get qs, (err, body) ->
+        return callback err if err
+        callback null, body.photos.photo, -1
+
+  setPhotos: (photoset_id, page, callback) ->
+    qs = {method: 'flickr.photosets.getPhotos', photoset_id, page: +page + 1}
+    @get qs, (err, body) ->
+      return callback err if err
+      callback null, body.photoset.photo, -1

node_modules/derby-examples/gallery/src/server/index.coffee

@@ -0,0 +1,53 @@
+http = require 'http'
+path = require 'path'
+express = require 'express'
+gzippo = require 'gzippo'
+derby = require 'derby'
+app = require '../app'
+flickr = require './flickr'
+serverError = require './serverError'
+
+
+## SERVER CONFIGURATION ##
+
+ONE_YEAR = 1000 * 60 * 60 * 24 * 365
+root = path.dirname path.dirname __dirname
+publicPath = path.join root, 'public'
+
+(expressApp = express())
+  .use(express.favicon())
+  # Gzip static files and serve from memory
+  .use(gzippo.staticGzip publicPath, maxAge: ONE_YEAR)
+
+  # Gzip dynamically rendered content
+  .use(express.compress())
+
+  # Uncomment to add form data parsing support
+  # .use(express.bodyParser())
+  # .use(express.methodOverride())
+
+  # Uncomment and supply secret to add Derby session handling
+  # Derby session middleware creates req.model and subscribes to _session
+  # .use(express.cookieParser 'secret_sauce')
+  # .use(express.session cookie: {maxAge: ONE_YEAR})
+  # .use(app.session())
+
+  # The router method creates an express middleware from the app's routes
+  .use(app.router())
+  .use(expressApp.router)
+  .use(serverError root)
+
+module.exports = server = http.createServer expressApp
+
+
+## SERVER ONLY ROUTES ##
+
+expressApp.all '*', (req) ->
+  throw "404: #{req.url}"
+
+
+## STORE SETUP ##
+
+store = app.createStore listen: server
+
+flickr.setup store, key: '86958e03c183fcb1b7fddfeb19f3a423'

node_modules/derby-examples/gallery/src/server/serverError.coffee

@@ -0,0 +1,18 @@
+derby = require 'derby'
+{isProduction} = derby.util
+
+module.exports = (root) ->
+  staticPages = derby.createStatic root
+
+  return (err, req, res, next) ->
+    return next() unless err?
+
+    console.log(if err.stack then err.stack else err)
+
+    ## Customize error handling here ##
+    message = err.message || err.toString()
+    status = parseInt message
+    if status is 404
+      staticPages.render '404', res, {url: req.url}, 404
+    else
+      res.send if 400 <= status < 600 then status else 500

node_modules/derby-examples/gallery/styles/404.styl

@@ -0,0 +1 @@
+@import "./base";

node_modules/derby-examples/gallery/styles/app/index.styl

@@ -0,0 +1,74 @@
+@import "../base";
+
+body {
+  padding-top: 0;
+  background: #333;
+}
+
+.lightbox {
+  position: relative;
+  height: 300px;
+  width: 500px;
+  margin: 0 auto;
+}
+.photobox {
+  transition: opacity .5s ease-in-out;
+  display: table-row;
+  > .photo {
+    position: absolute;
+    height: 300px;
+    width: 300px;
+    top: 0;
+    left: 0;
+  }
+  .photoOffset {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    > img {
+      display: block;
+      border-radius: 12px;
+      box-shadow: 0 1px 1px #222, 0 2px 16px #222;
+    }
+  }
+  > .caption {
+    position: absolute;
+    width: 200px;
+    left: 300px;
+    top: 0;
+    padding-left: 24px;
+    padding-top: 72px;
+    > h3 {
+      color: #ddd;
+      font: 200 20px/1.2 'Helvetica Neue';
+    }
+  }
+}
+
+.thumb {
+  margin: 2px;
+  float: left;
+  border: 0;
+}
+.thumb > img {
+  display: block;
+}
+
+#alert {
+  position: absolute;
+  text-align: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 0;
+  z-index: 99;
+}
+#alert > p {
+  background: #fff1a8;
+  border: 1px solid #999;
+  border-top: 0;
+  border-radius: 0 0 3px 3px;
+  display: inline-block;
+  line-height: 21px;
+  padding: 0 12px;
+}

node_modules/derby-examples/gallery/styles/base.styl

@@ -0,0 +1,13 @@
+@import "./reset";
+@import "nib/vendor";
+
+body {
+  padding: 2em;
+}
+h1 {
+  font-size: 2em;
+  margin-bottom: .5em;
+}
+p {
+  line-height: 2em;
+}

node_modules/derby-examples/gallery/styles/reset.styl

@@ -0,0 +1,21 @@
+body,h1,h2,h3,h4,th {
+  font: 13px/normal Arial,sans-serif;
+}
+body {
+  background: #fff;
+  color: #000;
+}
+body,fieldset,form,h1,h2,h3,h4,li,ol,p,td,th,ul {
+  margin: 0;
+  padding: 0;
+}
+ul {
+  margin: 0 normal;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+fieldset,img {
+  border: 0;
+}

node_modules/derby-examples/gallery/views/404.html

@@ -0,0 +1,7 @@
+<Title:>
+  Not found
+
+<Body:>
+  <h1>404</h1>
+  <p>Sorry, we can't find anything at <b>{{url}}</b>.
+  <p>Try heading back to the <a href="/">home page</a>.

node_modules/derby-examples/gallery/views/app/index.html

@@ -0,0 +1,60 @@
+<Title:>
+  Gallery
+
+<Header:>
+  <app:alert>
+
+<Body:>
+  <div class=lightbox>
+    <app:photoBox source="{{source}}" size="m" data="{_image0}" opacity="{_fade0}">
+    <app:photoBox source="{{source}}" size="m" data="{_image1}" opacity="{_fade1}">
+  </div>
+  <div>
+  {#each _pages}
+    <div>
+    {#each this}
+      <a x-bind="mouseover: select" href="{{$indices.0}}{{search}}" class="thumb">
+        <app:photo source="{{source}}" data="{{this}}">
+      </a>
+    {/}
+    </div>
+  {/}
+  </div>
+
+<photoBox:>
+  <div class=photobox style="opacity:{{{opacity}}}">
+    <div class=photo>
+      <div
+        class=photoOffset
+        style="margin-left:{{{photoWidth(data, source, size, -0.5)}}}px;
+               margin-top:{{{photoHeight(data, source, size, -0.5)}}}px"
+      >
+        <app:photo>
+      </div>
+    </div>
+    <div class=caption>
+      <h3>{{{data.title}}}</h3>
+    </div>
+  </div>
+
+<photo:>
+  <img
+    alt="{{{data.title}}}"
+    src="{{{photoSrc(data, source, size)}}}"
+    width="{{{photoWidth(data, source, size)}}}"
+    height="{{{photoHeight(data, source, size)}}}"
+  >
+
+<alert:>
+  <div id="alert">
+    {#unless connected}
+      <p>
+        {#if canConnect}
+          Offline 
+          {#if _showReconnect}&ndash; <a x-bind="click: connect">Reconnect</a>{/}
+        {else}
+          Unable to reconnect &ndash; <a x-bind="click: reload">Reload</a>
+        {/}
+      </p>
+    {/}
+  </div>