updated app

node_modules/derby-examples/sink/src/app/live-css.coffee

@@ -0,0 +1,40 @@
+{get, ready, view} = app = require './index'
+{render} = require './shared'
+
+view.fn 'cssProperty', cssProperty = (style) ->
+  if style.active then "#{style.prop || ''}: #{style.value || ''};" else ''
+
+get '/live-css', (page, model) ->
+  model.subscribe 'liveCss', (err, liveCss) ->
+    liveCss.setNull
+      styles: [
+        {prop: 'color', value: '#c00', active: true}
+        {prop: 'font-weight', value: 'bold', active: true}
+        {prop: 'font-size', value: '18px', active: false}
+      ]
+      outputText: 'Edit this text...'
+    model.fn '_hasActiveStyles', 'liveCss.styles', (styles) ->
+      for style in styles
+        return true if style.active
+      return false
+    model.del '_poppedOut'
+    render page, 'liveCss'
+
+# This is a transition route, which defines how to apply an update
+# without re-rendering the entire page. Note that going directly to
+# '/live-css/popout' will first call the route above and then call
+# the forward route below before rendering
+get from: '/live-css', to: '/live-css/popout',
+  forward: (model) ->
+    model.set '_poppedOut', true
+  back: (model) ->
+    model.del '_poppedOut'
+
+
+ready (model) ->
+
+  app.liveCss =
+    addStyle: ->
+      model.push 'liveCss.styles', {}
+    deleteStyle: (e, el) ->
+      model.at(el).remove()