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)
+  }
+}