Merge 5b495b8 into 81967c9

components/application.jade

@@ -0,0 +1,127 @@
+dom-module#melody-application
+  style.
+    #navigation {
+      width: 100%;
+    }
+
+  template
+    maki-datastore(name="maki")
+    maki-channel(autoconnect, reconnect="true")
+
+    .ui.page.grid
+      .row
+        #navigation
+          maki-navbar
+
+      .row
+        .column.content(for="viewport")
+          melody-index
+
+      .row
+        .ui.one.column.stackable.center.aligned
+          small <a href="http://github.com/martindale/maki">Made</a> with care by <a href="http://www.ericmartindale.com/">Eric Martindale</a>.
+
+  script(src="/js/page.min.js")
+  script(src="/js/jquery.js")
+  script.
+    window.maki = Polymer({
+      is: 'melody-application',
+      properties: {
+        src: {
+          type: String
+        },
+        for: {
+          type: String
+        },
+        route: {
+          type: String
+        },
+        routes: {
+          type: Object
+        },
+        components: {
+          type: Object,
+          //observer: '_componentsChanged'
+        },
+        resources: {
+          type: Object,
+          observer: '_resourcesUpdated'
+        },
+        datastore: {
+          type: Object
+        },
+        worker: { type: Object }
+      },
+      _route: function(ctx) {
+        var self = this;
+
+        var component = 'maki-undefined';
+        for (var route in self.routes) {
+          var regex = self.routes[route];
+          if (regex.test(ctx.path)) {
+            component = self.components[route];
+            break;
+          }
+        }
+
+        var view = document.createElement(component);
+        view.setAttribute('src', ctx.path);
+
+        console.log(view);
+
+        var viewport = document.querySelectorAll('[for=viewport]')[0];
+        while (viewport.hasChildNodes()) {
+          viewport.removeChild(viewport.lastChild);
+        }
+        viewport.appendChild(view);
+      },
+      _resourcesUpdated: function(resources) {
+        var self = this;
+        var _route = self._route.bind(self);
+
+        self.routes['/'] = new RegExp(/^\/$/);
+        self.components['/'] = 'maki-index';
+
+        page('/', _route);
+
+        Object.keys(resources).forEach(function(name) {
+          var resource = resources[name];
+          ['get', 'query'].forEach(function(action) {
+            var route = resource.routes[action];
+            self.routes[route] = new RegExp(eval(resource.paths[action]));
+            self.components[route] = resource.components[action];
+            page(route, _route);
+          });
+
+          //var schema = {};
+          //self.schema[name] = Schema(resource.options.attributes); 
+          //console.log(self.schema[name]);
+        });
+
+        page();
+      },
+      _componentsChanged: function(components) {
+
+      },
+      created: function() {
+        var self = this;
+
+        self.route = window.location.pathname;
+        self.routes = {};
+        self.schema = {};
+        self.components = {};
+        //self.worker = new Worker('/worker.js');
+
+        $.ajax({
+          type: 'OPTIONS',
+          url: '/',
+          headers: {
+            'Accept': 'application/json'
+          },
+          success: function(data) {
+            self.config = data.config;
+            self.resources = data.resources;
+          }
+        });
+      }
+    });

components/index.jade

@@ -0,0 +1,13 @@
+dom-module#melody-index
+  style.
+    .melody-index {
+      width: 100%;
+    }
+
+  template
+    melody-posts(src="/posts")
+
+  script.
+    Polymer({
+      is: 'melody-index'
+    });

components/post.jade

@@ -0,0 +1,29 @@
+dom-module#melody-post
+  style.
+    .melody-post {
+      width: 100%;
+    }
+
+  template
+    .ui.fluid.card
+      //-.image
+        img(src="/img/maki-logo.png")
+      .content
+        a.header(href="{{item.href}}") name: {{item.name}}
+        p.description description: {{item.description}}
+      template(if="{{item.action}}")
+        a.ui.bottom.attached.button(if="{{item.action}}", href="{{item.action.href}}") {{item.action.text}}
+
+  script.
+    Polymer({
+      is: 'melody-post',
+      properties: {
+        src: {
+          type: String,
+          //observer: '_srcChanged'
+        }
+      },
+      _srcChanged: function() {
+        console.log('source changed for item');
+      }
+    });

components/posts.jade

@@ -0,0 +1,36 @@
+dom-module#melody-posts
+  style.
+    .melody-posts {
+      width: 100%;
+    }
+
+  template
+    .ui.cards
+      template(is="dom-repeat", items="{{items}}")
+        melody-post(src="{{item.href}}", item="{{item}}")
+
+  script.
+    Polymer({
+      is: 'melody-posts',
+      properties: {
+        src: {
+          type: String
+        },
+        items: {
+          type: Array
+        },
+        as: {
+          type: String,
+          value: 'item'
+        }
+      },
+      ready: function() {
+        var self = this;
+        $.getJSON(self.src, function(data) {
+          self.items = data;
+        });
+      },
+      _resourceProperties: function() {
+
+      }
+    });

lib/melody.js

@@ -19,6 +19,7 @@ var auth = new Auth({
   }
 });
 
+melody.use(require('maki-client-level'));
 melody.use(passport);
 melody.use(auth);
 

package.json

@@ -33,6 +33,7 @@
     "async": "^1.5.0",
     "maki": "git://github.com/martindale/maki",
     "maki-auth-simple": "0.1.1",
+    "maki-client-level": "^0.1.0",
     "maki-passport-local": "0.0.4"
   },
   "devDependencies": {

views/layouts/default.jade

@@ -12,71 +12,13 @@ html.no-js
     link(rel="stylesheet", href="/css/semantic.min.css")
     link(rel="stylesheet", href="/css/highlight/maki.css")
     link(rel="stylesheet", href="/css/maki.css")
-    link(rel="stylesheet", href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700")
 
-    script(src="/js/jquery.js")
-    script(src="/js/semantic.min.js")
-    script(src="/js/lodash.min.js")
+    link(rel="import", href="/polymer/polymer.html")
+    link(rel="import", href="/components")
 
-    script(src="/js/highlight.pack.js")
-    script(src="/js/uuid.js")
-    script(src="/js/jsonrpc.js")
-
-    script(src="/js/maki.js")
+    script(src="/js/bundle.js")
 
     base(href="/")
 
   body
-    block page
-      .ui.page.grid
-        .row
-          block navbar
-            include ../partials/navbar
-
-        .row
-          .column.content(data-for="viewport")
-            include ../partials/flash
-
-            block content
-
-        .row
-          .ui.one.column.stackable.center.aligned
-            p
-              small powered by <a href="http://github.com/martindale/melody">melody</a>.
-
-    script.
-      $(document).on('click', '*[data-intent=edit]', function(e) {
-        e.preventDefault();
-
-        var $self = $(this);
-
-        $.getJSON('/posts/'+$self.data('id'), function(post) {
-          var editFunction = _.debounce(submitEdits, 250);
-
-          var $form = $('<form class="ui form"><div class="field"><textarea rows="20"></textarea></field></form>');
-          $form.find('textarea').val(post.content).on('keyup', editFunction);
-
-          $('*[data-bind='+$self.data('target')+'][data-id='+$self.data('id')+']').replaceWith($form);
-
-          function submitEdits() {
-            var content = $form.find('textarea').val();
-
-            $.ajax({
-              type: 'patch',
-              url: '/posts/'+$self.data('id'),
-              dataType: 'json',
-              headers: {
-                Accept: 'application/json'
-              },
-              data: {
-                content: content
-              }
-            });
-          }
-        });
-
-
-        return false;
-      });
-
-    block scripts
+    melody-application