WIP: Single Page App

lib/Service/http.js

@@ -251,12 +251,13 @@ HTTP.prototype.attach = function( maki ) {
   self.map = map;
   self.invertedMap = _.invert(map);
 
-  /*var jademin = require('jade-browser');
-  maki.app.use( jademin('/js/templates.js', maki.app.set('views'), {
+  var jademin = require('jade-browser');
+  maki.app.use( jademin('/js/templates.js', '**', {
+    root: 'views/',
     beforeCompile: function( input ) {
       return input.replace(/extends (.*)\n/, '');
     }
-  }) );*/
+  }) );
 
   var lessmin = require('less-middleware');
   maki.app.use( lessmin({
@@ -352,6 +353,7 @@ HTTP.prototype.attach = function( maki ) {
       json: function() {
         res.send({
           config: {
+            service: maki.config.service,
             views: {
               client: maki.config.views.client
             }

package.json

@@ -43,7 +43,7 @@
     "fs-extra": "^0.24.0",
     "gridfs-stream": "^0.5.3",
     "jade": "git://github.com/martindale/jade#extends-expressions",
-    "jade-browser": "0.0.14",
+    "jade-browser": "git://github.com/martindale/jade-browser#maki",
     "json-patch": "^0.4.3",
     "jsonpath-object-transform": "git://github.com/dvdln/jsonpath-object-transform",
     "less-middleware": "git://github.com/martindale/less.js-middleware#maki",

public/js/maki.js

@@ -10,11 +10,15 @@ if (loc.protocol === 'https:') {
 var retryTimes = [ 50, 250, 1000, 2500, 5000, 10000, 30000, 60000, 120000, 300000, 600000, 86400000 ]; //in ms
 var retryIndex = 0;
 
+// Jade hacks
+// TODO: automate creation of these
+var markdown = marked;
+
 // stub for a proper class
 var maki = {
     config: null
   , templates: {}
-  , routes: []
+  , routes: {}
   , socket: null // only one connected socket at a time (for now)
   , sockets: {
       subscriptions: [],
@@ -89,6 +93,9 @@ var maki = {
               case 'patch':
                 // TODO: update in-memory data (two-way binding);
                 console.log( data );
+
+                // jade.render('index', {});
+
               break;
               default:
                 console.log('unhandled jsonrpc method ' , data.method);
@@ -162,8 +169,14 @@ $(window).on('ready', function() {
 
   $.ajax({
     type: 'OPTIONS',
-    url: '/'
+    url: '/',
+    headers: {
+      Accept: 'application/json'
+    }
   }).done(function(data) {
+
+    console.log('OPTIONS request fulfilled.  data:', data);
+
     if (!data || !data.resources) return console.log('failed to acquire resource list; disabling fancy stuff.');
     if (!data.config) return console.log('failed to acquire server config; disabling fancy stuff.');
 
@@ -174,54 +187,105 @@ $(window).on('ready', function() {
     maki.sockets.connect();
 
     // exit instead of binding client view handler
-    if (!maki.config.views || !maki.config.views.client || maki.config.views.client !== true) return console.log('client view rendering disabled.');
+    //if (!maki.config.views || !maki.config.views.client || maki.config.views.client !== true) return console.log('client view rendering disabled.');
 
     maki.resources = data.resources;
     maki.resources.forEach(function(resource) {
       // only support routing for lists and singles
       [ 'query', 'get' ].forEach(function(m) {
         var path = resource.paths[ m ];
-        if (path) maki.templates[ path ] = resource.templates[ m ];
+        if (path) {
+          maki.routes[path] = resource;
+          maki.templates[ path ] = resource.templates[ m ];
+        }
       });
     });
 
     // bind pushState stuff
+    // note that we expect all hyperlinks to be proper <a> tags!
     $( document ).on('click', 'a', function(e) {
       e.preventDefault();
       var $a = $(this);
       var href = $a.attr('href');
 
       var template;
+      var resource;
       Object.keys(maki.templates).forEach(function(route) {
+
         // HACK: don't bother matching routes of almost-zero length
         // TODO: fix this
-        if (href.length <= 1) return template = 'index';
+        if (href.length <= 1 || href === '/') return template = 'index';
 
         var string = route;
         var regex = new RegExp( eval( string ) );
         // TODO: do not match '/' –- see bugfix at top of this loop
-        if (regex.test( href )) template = maki.templates[ route ];
+        if (regex.test(href)) {
+          resource = maki.routes[route];
+          template = maki.templates[route];
+        }
       });
 
+      if (!jade.templates[template + '.jade']) {
+        console.log('no known template!');
+        template = 'resource';
+      }
+
       // TODO: use local factory / caching mechanism
       $.ajax({
           url: href
         , async: false
-      }).always(function( results ) {
+        , headers: {
+            Accept: 'application/json'
+          }
+      }).always(function(results) {
         if (!results) template = '500';
 
-        maki.sockets.unsubscribe( window.location.pathname );
+        maki.sockets.unsubscribe(window.location.pathname);
         maki.sockets.subscribe( href );
 
         var obj = {};
-        obj[ template ] = results;
+        if (resource) {
+          obj[ resource.names.query ] = results;
+          obj.resource = resource;
+
+          if (results instanceof Array) {
+            obj.collection = results;
+          } else {
+            obj.item = results;
+          }
+
+        }
+
+        var locals = _.extend(obj, {
+          config: maki.config
+        });
+
+        // hacks abound!
+        jade.attr = function(key, val, escaped, terse) {
+          if ('boolean' == typeof val || null == val) {
+            if (val) {
+              return ' ' + (terse ? key : key + '="' + key + '"');
+            } else {
+              return '';
+            }
+          } else if (0 == key.indexOf('data') && 'string' != typeof val) {
+            return ' ' + key + "='" + JSON.stringify(val).replace(/'/g, '&apos;') + "'";
+          } else if (escaped) {
+            return ' ' + key + '="' + jade.escape(val) + '"';
+          } else {
+            return ' ' + key + '="' + val + '"';
+          }
+        };
+        jade.cls = function() { return ' F$%@'; }
+
+        var html = jade.render(template, locals);
 
-        maki.$viewport.html( Templates[ template ]( obj ) );
+        maki.$viewport.html(html);
 
         $('a.active').removeClass('active');
         $a.addClass('active');
 
-        history.pushState({}, '', href );
+        history.pushState({}, '', href);
       });
 
       return false;