prototyping recursive transform UI with traverse-js

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

attachments/script/costco.js

@@ -2,36 +2,28 @@
 
 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,

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();

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();
   },