adding sammy

attachments/pages/index.html

@@ -10,134 +10,26 @@
 	<script type="text/javascript" src="script/jquery-1.6.1.min.js"></script>
 	<script type="text/javascript" src="script/jquery.mustache.js"></script>
 	<script type="text/javascript" src="script/jquery.request.js"></script>
-  <script type="text/javascript">
+	<script type="text/javascript" src="script/sammy-0.6.3.min.js"></script>
-    var config, render;
+	<script type="text/javascript" src="script/util.js"></script>
-    $(function() {
+	<script type="text/javascript" src="script/removalist.js"></script>
-      
+	<script type="text/javascript" src="script/site.js"></script>
-      function inVhost() {
-        var vhost = false;
-        if ( document.location.pathname.indexOf( "_design" ) === -1 ) {
-          vhost = true;
-        }
-        return vhost;
-      }
-      
-      config = {
-          db: "api" // relative vhost links defined in rewrites.json
-        , design: "ddoc"
-        , vhost: true
-        , baseURL: "/"
-        , host: window.location.href.split( "/" )[ 2 ]
-      }
-      
-      if ( !inVhost() ) {
-        config.vhost = false
-        config.db = document.location.href.split( '/' )[ 3 ];
-        config.design = unescape( document.location.href ).split( '/' )[ 5 ];
-        config.baseURL = "/" + config.db + "/_design/" + config.design + "/_rewrite/";
-      }
-      
-      var reqOpts = {
-        uri: config.baseURL + "api",
-        method: "GET",
-        headers: {"Content-type": "application/json"},
-        cache: true
-      }
-
-      var csvUrl;
-      
-      /** uses $.mustache to render a template out to a target DOM
-       *  template == camelcase ID (minus the word Template) of the DOM object containg your mustache template
-       *  target == ID of the DOM node you wish to render the template into
-       *  data == data object to pass into the mustache template when rendering
-       */
-      render = function( template, target, data ) {
-        if ( !data ) var data = {};
-        $( "#" + target ).html( $.mustache( $( "#" + template + "Template" ).text(), data ) );        
-      }
-      
-      function formatDiskSize(bytes) {
-        return (parseFloat(bytes)/1024/1024).toString().substr(0,4) + "MB"
-      }
-      
-      function renderRows(err, resp, body) {
-        var response = JSON.parse(body);
-        var rows = [];
-        response.rows.map(function(row) {
-          var cells = [];
-          config.headers.map(function(header) {
-            var value = "";
-            if (row.value[header]) {
-              value = row.value[header];
-              if (typeof(value) == "object") value = JSON.stringify(value);
-            }
-            cells.push(value);
-          })
-          rows.push({cells: cells});
-        })
-        render('dataTable', 'dataTableContainer', {
-          rows: rows,
-          headers: config.headers
-        })
-        
-      }
-      
-      function gotDb( err, resp, body ) {
-        
-        var dbInfo = JSON.parse(body);
-        
-        $.extend(dbInfo, {
-          "host": window.location.host,
-          "disk_size": formatDiskSize(dbInfo.disk_size)
-        });
-                
-        if( config.vhost ) dbInfo.db_name = "api";
-
-        render('tableContainer', 'main', dbInfo);
-        render('title', 'project-title', dbInfo);
-        render( 'generating', 'project-controls' );
-        
-        function gotHeaders( err, resp, body ) {
-          csvUrl =  config.baseURL + 'api/csv?headers=' + escape(body);
-          render( 'actions', 'project-controls', $.extend({}, dbInfo, {url: csvUrl}) );          
-          config.headers = JSON.parse(body);
-          $.request($.extend({}, reqOpts, {uri: config.baseURL + 'api/rows?limit=10'}), renderRows);
-        }
-        
-        $.request($.extend({}, reqOpts, {uri: config.baseURL + 'api/headers'}), gotHeaders);
-        
-      }
-      
-      $.request($.extend({}, reqOpts, {uri: config.baseURL + 'api'}), gotDb);
-
-      $( '.csv' ).live('click', ( function( e ) {      
-        window.location.href = csvUrl;
-        e.preventDefault();
-      }))
-      
-    })
-  </script>
 </head> 
 <body>
 	<div class="container">
     <div id="header">
-      <div id="project-title" style="display: block; ">
+      <div id="project-title" style="display: block; "></div>
-        
+      <div id="project-controls" style="display: block; "></div>
-      </div>
-      <div id="project-controls" style="display: block; ">
-
-      </div>
     </div>
-		
+		<div id="main_content"></div>
-		<div id="main">
-			
-		</div>
-		
 		<footer>
 			<a href='https://github.com/maxogden/removalist'>Fork this project on Github</a>. The <a href="http://github.com/michenriksen/css3buttons">pretty CSS3 Buttons</a> were created by <a href="http://michaelhenriksen.dk" title="Website of Michael Henriksen">Michael Henriksen</a>
 		</footer>
 	</div>
 
+  <script type='text/mustache' id="homeTemplate">
+  </script>
+  
   <script type='text/mustache' id="dbTemplate">
     <div id="database" class="single_database">
       <div class="group" id="current-head-database">

attachments/script/removalist.js

@@ -0,0 +1,61 @@
+var removalist = function() {
+  
+  function formatDiskSize(bytes) {
+    return (parseFloat(bytes)/1024/1024).toString().substr(0,4) + "MB"
+  }
+  
+  function renderRows(err, resp, body) {
+    var response = JSON.parse(body);
+    var rows = [];
+    response.rows.map(function(row) {
+      var cells = [];
+      app.headers.map(function(header) {
+        var value = "";
+        if (row.value[header]) {
+          value = row.value[header];
+          if (typeof(value) == "object") value = JSON.stringify(value);
+        }
+        cells.push(value);
+      })
+      rows.push({cells: cells});
+    })
+    util.render('dataTable', 'dataTableContainer', {
+      rows: rows,
+      headers: app.headers
+    })
+    
+  }
+  
+  function gotHeaders( err, resp, body ) {
+    app.csvUrl = app.baseURL + 'api/csv?headers=' + escape(body);
+    util.render( 'actions', 'project-controls', $.extend({}, app.dbInfo, {url: app.csvUrl}) );          
+    app.headers = JSON.parse(body);
+    $.request($.extend({}, app.reqOpts, {uri: app.baseURL + 'api/rows?limit=10'}), renderRows);
+  }
+  
+  function gotDb( err, resp, body ) {
+    
+    app.dbInfo = JSON.parse(body);
+    
+    $.extend(app.dbInfo, {
+      "host": window.location.host,
+      "disk_size": formatDiskSize(app.dbInfo.disk_size)
+    });
+            
+    if( util.inURL("_rewrite", app.baseURL) ) app.dbInfo.db_name = "api";
+    
+    util.render('tableContainer', app.container, app.dbInfo);
+    util.render('title', 'project-title', app.dbInfo);
+    util.render( 'generating', 'project-controls' );
+    
+    $.request($.extend({}, app.reqOpts, {uri: app.baseURL + 'api/headers'}), gotHeaders);
+    
+  }
+  
+  return {
+    formatDiskSize: formatDiskSize,
+    renderRows: renderRows,
+    gotHeaders: gotHeaders,
+    gotDb: gotDb
+  };
+}();

attachments/script/site.js

@@ -0,0 +1,40 @@
+var app = {
+	baseURL: util.getBaseURL(document.location.pathname),
+	container: 'main_content'
+};
+
+app.reqOpts = {
+  uri: app.baseURL + "api",
+  method: "GET",
+  headers: {"Content-type": "application/json"},
+  cache: true
+}
+
+app.handler = function(route) {
+  route = route.path.slice(1, route.path.length);
+  if (route.length < 1) route = "home";
+  util.render( route, app.container);
+  window.scrollTo(0, 0);
+};
+
+app.after = {
+  home: function() {
+
+    $.request(app.reqOpts, removalist.gotDb);
+
+    $( '.csv' ).live('click', ( function( e ) {      
+      window.location.href = app.csvUrl;
+      e.preventDefault();
+    }))
+  }
+}
+
+app.s = $.sammy(function () {
+  this.get('', app.handler);
+  this.get("#/", app.handler);
+  this.get("#:route", app.handler);
+});
+
+$(function() {
+  app.s.run();  
+})

attachments/script/util.js

@@ -0,0 +1,132 @@
+var util = function() {
+
+  $.fn.serializeObject = function() {
+    var o = {};
+    var a = this.serializeArray();
+    $.each(a, function() {
+      if (o[this.name]) {
+        if (!o[this.name].push) {
+          o[this.name] = [o[this.name]];
+        }
+        o[this.name].push(this.value || '');
+      } else {
+        o[this.name] = this.value || '';
+      }
+    });
+    return o;
+  };
+
+  function inURL(url, str) {
+    var exists = false;
+    if ( url.indexOf( str ) > -1 ) {
+      exists = true;
+    }
+    return exists;
+  }
+
+  function render( template, target, options ) {
+    if ( !options ) options = {data: {}};
+    if ( !options.data ) options = {data: options};
+    var html = $.mustache( $( "#" + template + "Template" ).html(), options.data ),
+        targetDom = $( "#" + target );
+    if( options.append ) {
+      targetDom.append( html );
+    } else {
+      targetDom.html( html );
+    }
+    if (template in app.after) app.after[template]();
+  }
+
+  function formatMetadata(data) {
+    out = '<dl>';
+    $.each(data, function(key, val) {
+      if (typeof(val) == 'string' && key[0] != '_') {
+        out = out + '<dt>' + key + '<dd>' + val;
+      } else if (typeof(val) == 'object' && key != "geometry" && val != null) {
+        if (key == 'properties') {
+          $.each(val, function(attr, value){
+            out = out + '<dt>' + attr + '<dd>' + value;
+          })
+        } else {
+          out = out + '<dt>' + key + '<dd>' + val.join(', ');
+        }
+      }
+    });
+    out = out + '</dl>';
+    return out;
+  }
+
+  function getBaseURL(url) {
+    var baseURL = "";
+    if ( inURL(url, '_design') ) {
+      if (inURL(url, '_rewrite')) {
+        var path = url.split("#")[0];
+        if (path[path.length - 1] === "/") {
+          baseURL = "";
+        } else {
+          baseURL = '_rewrite/';
+        }
+      } else {
+        baseURL = '_rewrite/';
+      }
+    }
+    return baseURL;
+  }
+  
+  var persist = {
+    restore: function() {
+      $('.persist').each(function(i, el) {
+        var inputId = $(el).attr('id');
+        if(localStorage.getItem(inputId)) $('#' + inputId).val(localStorage.getItem(inputId));
+      })
+    },
+    save: function(id) {
+      localStorage.setItem(id, $('#' + id).val());
+    },
+    clear: function() {
+      $('.persist').each(function(i, el) {
+        localStorage.removeItem($(el).attr('id'));
+      })
+    },
+    init: function() {
+      if (Modernizr.localstorage) {
+        util.persist.restore();
+
+        $('.persist').keyup(function(e) {
+          var inputId = $(e.target).attr('id');
+          util.persist.save(inputId);
+        })
+      }
+    }
+  }
+  
+  // simple debounce adapted from underscore.js
+  function delay(func, wait) {
+    return function() {
+      var context = this, args = arguments;
+      var throttler = function() {
+        delete app.timeout;
+        func.apply(context, args);
+      };
+      if (!app.timeout) app.timeout = setTimeout(throttler, wait);      
+    };
+  };
+  
+  function resetForm(form) {
+    $(':input', form)
+     .not(':button, :submit, :reset, :hidden')
+     .val('')
+     .removeAttr('checked')
+     .removeAttr('selected');
+  }
+  
+  return {
+    inURL: inURL,
+    render: render,
+    formatMetadata:formatMetadata,
+    getBaseURL:getBaseURL,
+    resetForm: resetForm,
+    delay: delay,
+    persist: persist
+  };
+}();