prototyping recursive transform UI with traverse-js

2011-07-21 20:57:53 -07:00 · 2011-07-21 20:57:53 -07:00 · 1e54cc896a
commit 1e54cc896a
parent 30d320f8d9
4 changed files with 113 additions and 27 deletions
--- a/attachments/pages/index.html
+++ b/attachments/pages/index.html
@ -53,6 +53,7 @@
  
  <script type='text/mustache' class="actionsTemplate">
    <a class="button" data-action="import" href="javascript:{}"><span data-action="import" class="button-menu">Import</span></a>
+    <a class="button" data-action="edit" href="javascript:{}"><span data-action="transform" class="button-menu">Edit</span></a>
    <a class="button" data-action="export" href="javascript:{}"><span data-action="export" class="button-menu">Export</span></a>
  </script>

@ -67,6 +68,10 @@
    <li><a data-action="json" class="menuAction" href="JavaScript:void(0);">JSON</a></li>
  </script>
  
+  <script type='text/mustache' class="transformActionsTemplate">
+    <li><a data-action="transform" class="menuAction" href="JavaScript:void(0);">Global transform...</a></li>
+  </script>
+  
  <script type='text/mustache' class="columnActionsTemplate">
    <li><a data-action="bulkEdit" class="menuAction" href="JavaScript:void(0);">Transform...</a></li>
    <li><a data-action="deleteColumn" class="menuAction" href="JavaScript:void(0);">Delete this column</a></li>
@ -187,6 +192,61 @@
  	</div>
  </script>
  
+  <script type='text/mustache' class="transformTemplate">
+    <div class="dialog-header">
+  		Recursive transform on all rows
+  	</div>
+  	<div class="dialog-body">
+  		<div class="grid-layout layout-full">
+  		  <p class="info">Traverse and transform objects by visiting every node on a recursive walk using <a href="https://github.com/substack/js-traverse">js-traverse</a>.</p>
+  			<table>
+  			<tbody>
+  			<tr>
+  				<td colspan="4">
+  					<div class="grid-layout layout-tight layout-full">
+  						<table rows="4" cols="4">
+  						<tbody>
+  						<tr style="vertical-align: bottom;">
+  							<td colspan="4">
+  								Expression
+  							</td>
+  						</tr>
+  						<tr>
+  							<td colspan="3">
+  								<div class="input-container">
+  									<textarea class="expression-preview-code"></textarea>
+  								</div>
+  							</td>
+  							<td class="expression-preview-parsing-status" width="150" style="vertical-align: top;">
+  								No syntax error.
+  							</td>
+  						</tr>
+  						<tr>
+  							<td colspan="4">
+  								<div id="expression-preview-tabs" class="refine-tabs ui-tabs ui-widget ui-widget-content ui-corner-all">
+  									<span>Preview</span>
+  									<div id="expression-preview-tabs-preview" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
+  										<div class="expression-preview-container" style="width: 652px; ">
+  										</div>
+  									</div>
+  								</div>
+  							</td>
+  						</tr>
+  						</tbody>
+  						</table>
+  					</div>
+  				</td>
+  			</tr>
+  			</tbody>
+  			</table>
+  		</div>
+  	</div>
+  	<div class="dialog-footer">
+  		<button class="okButton button">&nbsp;&nbsp;Update All&nbsp;&nbsp;</button>
+  		<button class="cancelButton button">Cancel</button>
+  	</div>
+  </script>
+
  <script type='text/mustache' class="urlImportTemplate">
    <div class="dialog-header">
  		Download and import from a URL or API
--- a/attachments/script/costco.js
+++ b/attachments/script/costco.js
@ -1,37 +1,29 @@
 // adapted from https://github.com/harthur/costco. heather rules

 var costco = function() {
-
-  function handleEditorChange(e) {
-    var editFunc = evalFunction(e.target.value);
-    var errors = $('.expression-preview-parsing-status');
-    if (_.isFunction(editFunc)) {
-      errors.text('No syntax error.');
-    } else {
-      errors.text(editFunc);
-      return;
-    }
-    previewTransform(app.cache, editFunc);
-  }
  
  function evalFunction(funcString) {
    try {
      eval("var editFunc = " + funcString);
-      return editFunc;
    } catch(e) {
-      return e+"";
+      return {errorMessage: e+""};
    }
+    return editFunc;
  }
  
-  function previewTransform(docs, editFunc) {
+  function previewTransform(docs, editFunc, currentColumn) {
    var preview = [];
-    var updated = mapDocs(docs, editFunc);
+    var updated = mapDocs($.extend(true, {}, docs), editFunc);
    for (var i = 0; i < updated.docs.length; i++) {      
      var before = docs[i]
        , after = updated.docs[i]
        ;
      if (!after) after = {};
-      preview.push({before: JSON.stringify(before[app.currentColumn]), after: JSON.stringify(after[app.currentColumn])});      
+      if (currentColumn) {
+        preview.push({before: JSON.stringify(before[currentColumn]), after: JSON.stringify(after[currentColumn])});      
+      } else {
+        preview.push({before: JSON.stringify(before), after: JSON.stringify(after)});      
+      }
    }
    util.render('editPreview', 'expression-preview-container', {rows: preview});
  }
@ -108,7 +100,6 @@ var costco = function() {
  }

  return {
-    handleEditorChange: handleEditorChange,
    evalFunction: evalFunction,
    previewTransform: previewTransform,
    mapDocs: mapDocs,
--- a/attachments/script/recline.js
+++ b/attachments/script/recline.js
@ -8,7 +8,6 @@ var recline = function() {
    if (!data) data = {};
    util.show('dialog');
    util.render(template, 'dialog-content', data);
-    util.hide('menu');
    util.observeExit($('.dialog-content'), function() {
      util.hide('dialog');
    })
@ -19,6 +18,7 @@ var recline = function() {
    $( '.menu li' ).click(function(e) {
      var actions = {
        bulkEdit: function() { showDialog('bulkEdit', {name: app.currentColumn}) },
+        transform: function() { showDialog('transform') },
        csv: function() { window.location.href = app.csvUrl },
        json: function() { window.location.href = "_rewrite/api/json" },
        urlImport: function() { showDialog('urlImport') },
@ -27,10 +27,10 @@ var recline = function() {
        deleteColumn: function() {
          var msg = "Are you sure? This will delete '" + app.currentColumn + "' from all documents.";
          if (confirm(msg)) costco.deleteColumn(app.currentColumn);
-          util.hide('menu');
        }
      }
      
+      util.hide('menu');
      actions[$(e.target).attr('data-action')]();
      
      e.preventDefault();
--- a/attachments/script/site.js
+++ b/attachments/script/site.js
@ -65,6 +65,7 @@ app.after = {
      var action = $(e.target).attr('data-action');
      util.position('menu', e, {left: -60, top: 5});
      util.render(action + 'Actions', 'menu');
+      recline.handleMenuClick();
    });
  },
  controls: function() {
@ -80,9 +81,6 @@ app.after = {
      }
    });
  },
-  exportActions: recline.handleMenuClick,
-  importActions: recline.handleMenuClick,
-  columnActions: recline.handleMenuClick,
  signIn: function() {
    
    $('.dialog-content #username-input').focus();
@ -110,12 +108,12 @@ app.after = {
    
  },
  bulkEdit: function() {
-    
    $('.dialog-content .okButton').click(function(e) {
      var funcText = $('.expression-preview-code').val();
      var editFunc = costco.evalFunction(funcText);
-      if (!_.isFunction(editFunc)) {
-        util.notify("Error with function! " + editFunc);
+      ;
+      if (editFunc.errorMessage) {
+        util.notify("Error with function! " + editFunc.errorMessage);
        return;
      }
      util.hide('dialog');
@ -127,7 +125,44 @@ app.after = {
    editor.focus().get(0).setSelectionRange(18, 18);
    editor.keydown(function(e) {
      // if you don't setTimeout it won't grab the latest character if you call e.target.value
-      window.setTimeout(function(){costco.handleEditorChange(e)}, 1, true);
+      window.setTimeout( function() {
+        var errors = $('.expression-preview-parsing-status');
+        var editFunc = costco.evalFunction(e.target.value);
+        if (!editFunc.errorMessage) {
+          errors.text('No syntax error.');
+          costco.previewTransform(app.cache, editFunc, app.currentColumn);
+        } else {
+          errors.text(editFunc.errorMessage);
+        }
+      }, 1, true);
+    });
+    editor.keydown();
+  },
+  transform: function() {
+    $('.dialog-content .okButton').click(function(e) {
+      util.notify("Not implemented yet, sorry! :D");
+      util.hide('dialog');
+    })
+    
+    var editor = $('.expression-preview-code');
+    editor.val("function(val) {\n  if(_.isString(val)) this.update(\"pizza\")\n}");
+    editor.focus().get(0).setSelectionRange(62,62);
+    editor.keydown(function(e) {
+      // if you don't setTimeout it won't grab the latest character if you call e.target.value
+      window.setTimeout( function() {
+        var errors = $('.expression-preview-parsing-status');
+        var editFunc = costco.evalFunction(e.target.value);
+        if (!editFunc.errorMessage) {
+          errors.text('No syntax error.');
+          var traverseFunc = function(doc) {
+            util.traverse(doc).forEach(editFunc);
+            return doc;
+          }
+          costco.previewTransform(app.cache, traverseFunc);
+        } else {
+          errors.text(editFunc.errorMessage);
+        }
+      }, 1, true);
    });
    editor.keydown();
  },