Input templates

Gruntfile.js

@@ -130,7 +130,7 @@ module.exports = function(grunt) {
   // JS
   grunt.registerTask('js:dev', ['jshint', 'concat', 'uglify', 'test']);
   grunt.registerTask('js:prod', ['concat', 'uglify']);
-  //CSS
+  // CSS
   grunt.registerTask('css:dev', ['sass']);
   grunt.registerTask('css:prod', ['sass']);
   // Build wrappers

README.md

@@ -4,6 +4,8 @@
 
 **You drop. We chop.**
 
+![Drop n' Chop Logo](assets/drop-n-chop-logo.png)
+
 Drop 'n Chop (DNC) is a browser-based GIS powered by [Leaflet.js](http://leafletjs.com) and [Turf.js](http://turfjs.org). DNC is currently a proof of concept and explores three hypothesis:
 
 ### 1. GIS can be data-first, not operation-first.

package.json

@@ -31,6 +31,7 @@
     "grunt-karma": "~0.10.1",
     "grunt-processhtml": "^0.3.7",
     "grunt-reload": "^0.2.0",
+    "happen": "~0.1.3",
     "jshint": "~2.3.0",
     "karma": "^0.12.31",
     "karma-chai": "~0.1.0",

src/js/controller/AppController.js

@@ -20,11 +20,28 @@ L.DNC.AppController = L.Class.extend({
             .addChild( new L.DNC.Menu( "Geoprocessing Tools", {} )
                 .addChild(new L.DNC.TurfOperation('buffer', {
                     maxFeatures: 1,
-                    additionalArgs: 0.1
+                    additionalArgs: 0.1,
+                    description: 'Calculates a buffer for input features for a given radius. Units supported are miles, kilometers, and degrees.',
+                    parameters: [
+                        {
+                            name: 'distance',
+                            description: 'Distance to draw the buffer.',
+                            type: 'number',
+                            default: 10
+                        },
+                        {
+                            name: 'unit',
+                            type: 'select',
+                            description: '',
+                            options: ['miles', 'feet', 'kilometers', 'meters', 'degrees'],
+                            default: 'miles'
+                        }
+                    ]
                 }))
                 .addChild(new L.DNC.TurfOperation('union', {
                     minFeatures: 2,
-                    maxFeatures: 2
+                    maxFeatures: 2,
+                    description: 'Takes two polygons and returns a combined polygon. If the input polygons are not contiguous, this function returns a MultiPolygon feature.'
                 }))
                 .addChild(new L.DNC.TurfOperation('erase', {
                     minFeatures: 2,
@@ -33,15 +50,24 @@ L.DNC.AppController = L.Class.extend({
             );
 
         this.notification = new L.DNC.Notifications();
-
+        this.forms = new L.DNC.Forms();
         this._addEventHandlers();
 
-    } ,
+    },
 
     _addEventHandlers: function(){
-        this.dropzone.fileReader.on( "fileparsed", this._handleParsedFile.bind( this ) );
-        this.menuBar.on( "operation-result", this._handleTurfResults.bind(this) );
-    } ,
+        this.dropzone.fileReader.on( 'fileparsed', this._handleParsedFile.bind( this ) );
+        this.menuBar.on( 'operation-result', this._handleTurfResults.bind(this) );
+        this.menuBar.on( 'operation-click', this._handleOperationClick.bind(this) );
+        this.forms.on( 'submit', this._handleFormSubmit.bind(this) );
+    },
+
+    _handleFormSubmit: function( e ) {
+        console.log(e);
+        for ( var c = 0; c < e.parent.children.length; c++ ) {
+            if ( e.parent.children[c].title == e.title ) e.parent.children[c].execute( { additionalArgs: e.paramArray } );
+        }
+    },
 
     _handleParsedFile: function( e ) {
         var mapLayer = L.mapbox.featureLayer(e.file);
@@ -53,11 +79,15 @@ L.DNC.AppController = L.Class.extend({
             type: 'success',
             time: 2500
         });
-    } ,
+    },
 
     _handleTurfResults: function( e ) {
         this.layerlist.addLayerToList(e.mapLayer, e.layerName, e.isOverlay );
-    } ,
+    },
+
+    _handleOperationClick: function ( e ) {
+        this.forms.render( e );
+    },
 
     getLayerSelection: function(){
         return this.layerlist.selection.list || [];

src/js/menu/Forms.js

@@ -0,0 +1,125 @@
+L.DNC = L.DNC || {};
+L.DNC.Forms = L.Class.extend({
+  includes: L.Mixin.Events,
+
+  options: {
+    paramArray: []
+  },
+
+  initialize: function ( options ) {
+      L.setOptions( this, options );
+  },
+
+  /*
+  **
+  ** RENDER FORM TEMPLATE
+  **
+  */
+  render: function ( operation ) {
+
+      this.initialize( operation );
+
+      var html =  '<div class="form-inner"><div class="form">'+
+                  '<button type="button" class="btn close form-close"><i class="fa fa-times"></i></button>'+
+                  '<div class="form-information"><h3 class="form-title">'+operation.title+'</h3>'+
+                  '<p class="form-description">'+operation.options.description+'</p></div>'+
+                  '<form class="form-inputs">';
+
+      if ( this.options.options.parameters ) {
+
+        for ( var i = 0; i < operation.options.parameters.length; i++ ) {
+            var parameter = operation.options.parameters[i];
+
+            var input = '<div class="parameter"><label class="parameter-name">' + parameter.name + '</label>';
+
+            // select
+            if ( parameter.type == 'select') {
+                input += this._inputTypeSelect( parameter );
+            // input
+            } else {
+                input += this._inputTypeDefault( parameter );
+            }
+
+            if (parameter.description) input += '<p class="parameter-description">' + parameter.description + '</p>';
+            html += input + '</div>';
+        }
+
+      }
+
+      // submit button 
+      html += '<button type="button" class="btn form-submit" id="operation-submit">Execute<i class="fa fa-thumbs-o-up push-left"></i></button>';
+      html += '</div></div>';
+
+      var div = document.createElement('div');
+      div.className = 'form-outer';
+      div.id = 'DNC-FORM';
+      div.innerHTML = html;
+      document.body.appendChild(div);
+
+      this._formHandlers();
+  },
+
+  closeForm: function ( event ) {
+      var child = document.getElementById('DNC-FORM');
+      child.parentElement.removeChild(child);
+  },
+
+  submitForm: function() {
+      // function that grabs all parameter information from the
+      // current open form, and publishes 'form-submitted' so the
+      // operations subscriber can execute the turf operation
+
+      // reset paramArray for new parameters
+      this.options.paramArray = [];
+
+      // get form info
+      var inputs = document.getElementsByClassName('param');
+      for ( var p = 0; p < inputs.length; p++ ) {
+          var paramValue = null;
+          if (inputs[p].nodeName == 'SELECT') {
+              paramValue = inputs[p].options[inputs[p].selectedIndex].value;
+          } else {
+              paramValue = inputs[p].value;
+              if (inputs[p].type == 'number') paramValue = parseInt(paramValue);
+          }
+          this.options.paramArray.push(paramValue);
+      }
+
+      if ( this.validateForm() ) {
+          this.fire('submit', this.options);
+          this.closeForm();
+      }
+
+
+  },
+
+  validateForm: function () {
+      // do some validation eventually
+      return true;
+  },
+
+  _formHandlers: function() {
+      var closers = document.getElementsByClassName('form-close');
+      for ( var x = 0; x < closers.length; x++ ) {
+          closers[x].addEventListener('click', this.closeForm.bind(this));
+      }
+
+      var submit = document.getElementById('operation-submit');
+      submit.addEventListener('click', this.submitForm.bind(this));
+  },
+
+  _inputTypeDefault: function ( p ) {
+      var field = '<input class="param" name="' + p.name + '" type="' + p.type + '" value="' + p.default + '">';
+      return field;
+  },
+
+  _inputTypeSelect: function( p ) {
+      var select = '<select class="param" type="select" name="' + p.name + '">';
+      for ( var o = 0; o < p.options.length; o++ ) {
+          select += '<option value="' + p.options[o] + '"';
+          if ( p.options[o] == p.default ) select += ' selected';
+          select += '>' + p.options[o] + '</option>';
+      }
+      return select + '</select>';
+  }
+});

src/js/menu/operations/Operation.js

@@ -2,21 +2,23 @@ L.DNC = L.DNC || {};
 L.DNC.Operation = L.DNC.Menu.extend({
 
     _addEventHandlers : function () {
-        this.domElement.addEventListener('click', function(){
-            this.execute.call( this );
+        this.domElement.addEventListener( 'click', function() {
+            // send event 'operation-click' to the controller for rendering a form
+            this.parent.parent.fire('operation-click', this);
         }.bind(this));
     },
 
     // Create and return dom element (note: this does not attach dom element to any parent)
     _buildDomElement: function () {
+        console.log(this);
         var div = document.createElement('div');
         div.innerHTML += '<button class="menu-button menu-button-action" id="' +
-            this.title + '">' + this.title + '</button>';
+            this.title + '" alt="' + this.options.description + '">' + this.title + '</button>';
         return div.children[0];
     },
 
     // Where the magic happens
     execute: function() {
         console.error("L.DNC.Operation object did not properly override 'execute'", this);
     },
-});
+});

src/js/menu/operations/TurfOperation.js

@@ -10,7 +10,15 @@ L.DNC.TurfOperation = L.DNC.Operation.extend({
         additionalArgs: null // Kludge to handle no dialog for input
     },
 
-    execute: function () {
+    /*
+    **
+    ** EXECUTE OPERATIONS FROM INPUT
+    **
+    */
+    execute: function ( params ) {
+
+        L.setOptions(this, params);
+
         /*
         **
         **  TODO: this is the type of referencing
@@ -54,6 +62,7 @@ L.DNC.TurfOperation = L.DNC.Operation.extend({
         this.parent.parent.fire('operation-result', eventExtras);
     },
 
+
     /*
     **  
     **  VALIDATE LAYERS
@@ -90,7 +99,7 @@ L.DNC.TurfOperation = L.DNC.Operation.extend({
         }
         var layer_objs = layers.map(function(obj) { return obj.layer._geojson; });
         if (this.options.additionalArgs) {
-            layer_objs.push(this.options.additionalArgs);
+            for ( var arg = 0; arg < this.options.additionalArgs.length; arg++ ) layer_objs.push(this.options.additionalArgs[arg]);
         }
 
         // Get layer names

src/sass/_base.scss

@@ -4,16 +4,33 @@
   -moz-box-sizing:border-box; 
   -webkit-box-sizing:border-box;
 }
-html, body, ul, ol {
+
+html,
+body,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+ol {
   margin:0;
   padding:0;
 }
+
 body {
   padding:0;
   margin:0;
-  font-family: 'Open Sans', sans-serif;
+  font-family:$ff;
   @include transition(.3s);
 }
+
 body.dragging {
   opacity:.5;
+}
+
+a {
+  text-decoration:none;
 }

src/sass/_globals.scss

@@ -1,4 +1,32 @@
 /* globals */
-a {
-  text-decoration:none;
+
+/* font-family */
+$ff: 'Open Sans', sans-serif;
+
+.btn {
+  font-size: .7em;
+  text-transform: uppercase;
+  letter-spacing: .15em;
+  padding: 1em 2em;
+  border: none;
+  cursor:pointer;
+  &.close {
+    padding:.2em .2em .3em .35em;
+    font-size:1em;
+    background:$white;
+    color:$red;
+  }
+}
+
+.fa {
+  &.push-right {
+    margin-right:.5em;
+  }
+  &.push-left {
+    margin-left:.5em;
+  }
+}
+
+.pull-right {
+  float:right;
 }