upload files from local, #170

src/js/form.dropchop.js

@@ -39,13 +39,11 @@ var dropchop = (function(dc) {
     $html.on('submit', function(event) {
       event.preventDefault();
       // get the parameters from the form
-      console.log('operation:' + trigger, name);
       var parameters = [];
       var data = $(this).serializeArray();
       $(data).each(function(i) {
         parameters.push(data[i].value);
       });
-      console.log(data, parameters);
       $(dc.ops).trigger('operation:' + trigger, [name, parameters]);
       dc.form.remove();
       return false;

src/js/ops.dropchop.js

@@ -29,12 +29,17 @@ var dropchop = (function(dc) {
     // setup ops file
     var leftMenu = $('<div>').addClass('dropchop-menu-left');
     for (var fileOp in dc.ops.file) {
-      var fileBtn = $('<button>').addClass('menu-action')
-        .html(dc.ops.file[fileOp].icon || 'A')
-        .attr('data-operation', fileOp)
-        .attr('data-tooltip', dc.ops.file[fileOp].description);
-      fileBtn.on('click', _fileBtnClick);
-      leftMenu.append(fileBtn);
+      if(dc.ops.file[fileOp].type !== 'break') {
+        var fileBtn = $('<button>').addClass('menu-action')
+          .html(dc.ops.file[fileOp].icon || 'A')
+          .attr('data-operation', fileOp)
+          .attr('data-tooltip', dc.ops.file[fileOp].description);
+        fileBtn.on('click', _fileBtnClick);
+        leftMenu.append(fileBtn);
+      } else {
+        var $breakSpace = $('<div>').addClass('menu-action-break');
+        leftMenu.append($breakSpace);
+      }
     }
     dc.$elem.append(leftMenu);
   };

src/js/ops.file.dropchop.js

@@ -6,6 +6,57 @@ var dropchop = (function(dc) {
   dc.ops = dc.ops || {};
 
   dc.ops.file = {
+    upload: {
+      description: 'Upload from your computer',
+      icon: '<i class="fa fa-upload"></i>',
+      execute: function() {
+        // inspired from geojson.io
+        // https://github.com/mapbox/geojson.io/blob/gh-pages/src/ui/file_bar.js#L390
+        var $blindInput = $('<input>')
+          .attr('type', 'file')
+          .attr('multiple', 'true')
+          .css('visibility', 'hidden')
+          .css('position', 'absolute')
+          .css('height', '0')
+          .on('change', function() {
+            var files = this.files;
+            $(files).each(function(i) {
+              dc.dropzone.read(files[i]);
+            });
+            $blindInput.remove();
+          });
+        $('body').append($blindInput);
+        $blindInput.click();
+      }
+    },
+
+    'load-url': {
+        description: 'Import file from a URL',
+        icon: '<i class="fa fa-link"></i>',
+        parameters: [
+            {
+                name: 'url',
+                description :'URL',
+                type: 'text',
+                default: 'http://',
+            },
+        ],
+    },
+
+    'load-gist': {
+        description: 'Import files from Gist',
+        icon: '<i class="fa fa-github"></i>',
+        parameters: [
+            {
+                name: 'gist',
+                description :'Gist ID or URL',
+                type: 'text',
+            },
+        ],
+    },
+
+    'break1': { type: 'break' },
+
     'save-geojson': {
       minFeatures: 1,
       description: 'Save as GeoJSON',
@@ -55,6 +106,8 @@ var dropchop = (function(dc) {
       createsLayer: false
     },
 
+    'break2': { type: 'break' },
+
     remove: {
       minFeatures: 1,
       description: 'Remove selected layers',
@@ -66,42 +119,6 @@ var dropchop = (function(dc) {
         dc.selection.clear();
       },
       disableForm: true,
-    },
-    upload: {
-        description: 'Upload from your computer',
-        icon: '<i class="fa fa-upload"></i>',
-        parameters: [
-            {
-                description: 'File to upload.',
-                type: 'file',
-                extra: 'multiple',
-            }
-        ]
-    },
-
-    'load-url': {
-        description: 'Import file from a URL',
-        icon: '<i class="fa fa-link"></i>',
-        parameters: [
-            {
-                name: 'url',
-                description :'URL',
-                type: 'text',
-                default: 'http://',
-            },
-        ],
-    },
-
-    'load-gist': {
-        description: 'Import files from Gist',
-        icon: '<i class="fa fa-github"></i>',
-        parameters: [
-            {
-                name: 'gist',
-                description :'Gist ID or URL',
-                type: 'text',
-            },
-        ],
     }
   };
 

src/scss/_general.scss

@@ -1,8 +1,3 @@
-$grey: #c0c0c0;
-$green: lighten(#2ECC40, 15);
-$red: lighten(#ff4136, 15);
-$blue: lighten(#0074D9, 15);
-
 body {
   padding: 0;
   margin: 0;
@@ -68,6 +63,7 @@ label,
 
 $left-menu-width: 41px;
 $width: 280px;
+$geo-button-width: 100px;
 
 .layerlist {
   position: absolute;
@@ -198,7 +194,7 @@ $width: 280px;
   z-index: 10;
   top: 1px;
   width: 400px;
-  left: 381px;
+  left: $left-menu-width + $width + $geo-button-width + 1px;
   margin-left: 1px;
   background: white;
   padding: 10px;
@@ -216,6 +212,7 @@ $width: 280px;
     margin-left: 10px;
   }
 }
+
 .dropchop-form-parameter {
   margin-bottom: 1em;
   label {

src/scss/_left.menu.scss

@@ -5,6 +5,10 @@
   bottom: 0;
   width: 41px;
   background: #f6f6f6;
+  .menu-action-break {
+    height: 15px;
+    background: transparent;
+  }
   .menu-action {
     position:relative;
     padding: 13px 0;
@@ -18,7 +22,8 @@
     box-sizing: content-box;
 
     &:hover {
-      background: #f6f6f6;
+      background: $fuscia;
+      color: white;
       cursor: pointer;
       &:after,
       &:before {

src/scss/_variables.scss

@@ -0,0 +1,5 @@
+$grey: #c0c0c0;
+$green: lighten(#2ECC40, 15);
+$red: lighten(#ff4136, 15);
+$blue: lighten(#0074D9, 15);
+$fuscia: lighten(#F012BE, 15);

src/scss/dropchop.scss

@@ -1,4 +1,5 @@
 @import
+  "variables",
   "left.menu",
   "general"
 ;