updated app

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

@@ -0,0 +1,23 @@
+var derby = require('derby')
+  , app = derby.createApp(module)
+  , get = app.get
+
+// TODO: Figure out how to make browserify allow components to be in root directory
+derby.use(require('./ui'))
+
+get('/', function(page, model) {
+  model.subscribe('test', function(err, test) {
+    test.setNull('options', [
+      {text: 'First'}
+    , {text: 'Second'}
+    , {text: 'Third'}
+    ])
+    page.render()
+  })
+})
+
+app.ready(function(model) {
+  app.showModal = function() {
+    model.set('_showModal', true)
+  }
+})

node_modules/derby-examples/widgets/lib/app/ui/connectionAlert/index.html

@@ -0,0 +1,15 @@
+<connectionAlert:>
+  <div class="connection">
+    {#unless connected}
+      <p class="alert">
+        {#if canConnect}
+          Offline 
+          {#unless :self.hideReconnect}
+            &ndash; <a x-bind="click:connect">Reconnect</a>
+          {/}
+        {else}
+          Unable to reconnect &ndash; <a x-bind="click:reload">Reload</a>
+        {/}
+      </p>
+    {/}
+  </div>

node_modules/derby-examples/widgets/lib/app/ui/connectionAlert/index.js

@@ -0,0 +1,15 @@
+exports.create = function(model, self) {
+
+  exports.connect = function() {
+    // Hide the reconnect link for a second after clicking it
+    self.set('hideReconnect', true)
+    setTimeout(function() {
+      self.set('hideReconnect', false)
+    }, 1000)
+    model.socket.socket.connect()
+  }
+
+  exports.reload = function() {
+    window.location.reload()
+  }
+}

node_modules/derby-examples/widgets/lib/app/ui/dropdown/index.html

@@ -0,0 +1,17 @@
+<dropdown:>
+  <!-- a :self path alias is automatically created per component -->
+  <div class="btn-group {#if :self.open}open{/}">
+    <!-- x-as can be used to pass a reference to an element to the script -->
+    <a x-as="toggle" x-bind="click: clickToggle" class="btn dropdown-toggle">
+      {{{value}}} <span class="caret"></span>
+    </a>
+    <menu x-as="menu" x-bind="click: clickMenu" class="dropdown-menu">
+      {{{#each items}}}
+        {{#if divider}}
+          <li class="divider"></li>
+        {{else}}
+          <li><a>{{text}}</a></li>
+        {{/}}
+      {{{/}}}
+    </menu>
+  </div>

node_modules/derby-examples/widgets/lib/app/ui/dropdown/index.js

@@ -0,0 +1,35 @@
+// self is a scoped model underneath _$component.{uid}
+
+// Components must export a create function, which only runs
+// in the browser
+exports.create = function(model, self, dom, elements) {
+  var toggle = elements.toggle
+    , menu = elements.menu
+    , open = self.at('open')
+
+  // Listeners added inside of a component are removed when the
+  // page is re-rendered client side
+  dom.addListener(document.documentElement, 'click', function(e) {
+    if (e.target === toggle || menu.contains(e.target)) return
+    open.set(false)
+  })
+
+  exports.clickToggle = function() {
+    open.set(!open.get())
+  }
+
+  exports.clickMenu = function(e) {
+    var item = model.at(e.target)
+      , value = item.get().text
+    open.set(false)
+    if (value != null) {
+      self.set('value', value)
+    }
+  }
+}
+
+// Components may export an init function, which runs on both
+// the server and browser before rendering
+exports.init = function(model, self) {
+  self.setNull('value', self.get('items.0.text'))
+}

node_modules/derby-examples/widgets/lib/app/ui/index.js

@@ -0,0 +1,12 @@
+var scripts = {
+  connectionAlert: require('./connectionAlert')
+, dropdown: require('./dropdown')
+, modal: require('./modal')
+}
+
+module.exports = ui
+ui.decorate = 'derby'
+
+function ui(derby, options) {
+  derby.createLibrary(__filename, scripts, options)
+}

node_modules/derby-examples/widgets/lib/app/ui/modal/index.html

@@ -0,0 +1,21 @@
+<modal: nonvoid>
+  <div x-bind="click: click" style="{{{#unless show}}}display:none{{{/}}}">
+    <div data-button="backdrop" class="modal-backdrop"></div>
+    <div class="modal">
+      <div class="modal-header">
+        <button data-button="close" class="close">×</button>
+        <h3>{{{title}}}</h3>
+      </div>
+      <div class="modal-body">
+        {{{content}}}
+      </div>
+      <div class="modal-footer">
+        {{{#if close}}}
+          <a data-button="close" class="btn">{{{close}}}</a>
+        {{{/}}}
+        {{{#if primary}}}
+          <a data-button="primary" class="btn btn-primary">{{{primary}}}</a>
+        {{{/}}}
+      </div>
+    </div>
+  </div>

node_modules/derby-examples/widgets/lib/app/ui/modal/index.js

@@ -0,0 +1,11 @@
+exports.create = function(model, self) {
+
+  exports.click = function(e) {
+    var button = e.target.getAttribute('data-button')
+      , cancelled
+    if (!button) return
+    cancelled = self.trigger('close', button)
+    if (cancelled) return
+    self.set('show', false)
+  }
+}

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

@@ -0,0 +1,53 @@
+var http = require('http')
+  , path = require('path')
+  , express = require('express')
+  , gzippo = require('gzippo')
+  , derby = require('derby')
+  , app = require('../app')
+  , serverError = require('./serverError')
+
+
+// SERVER CONFIGURATION //
+
+var ONE_YEAR = 1000 * 60 * 60 * 24 * 365
+  , root = path.dirname(path.dirname(__dirname))
+  , publicPath = path.join(root, 'public')
+  , expressApp, server, store
+
+;(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())
+
+  // 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('*', function(req) {
+  throw '404: ' + req.url
+})
+
+
+// STORE SETUP //
+
+store = app.createStore({listen: server})

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

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