remove layer from existence, and some delete button styles

gulpfile.js

@@ -16,7 +16,8 @@ gulp.task('sass', function(){
 });
 
 var vendorCSS = [
-  './node_modules/mapbox.js/dist/mapbox.css'
+  './node_modules/mapbox.js/dist/mapbox.css',
+  './node_modules/font-awesome/css/font-awesome.css'
 ];
 
 gulp.task('css_vendor', function() {
@@ -76,6 +77,11 @@ gulp.task('assets', function() {
     .pipe(gulp.dest('./dist/assets'));
 });
 
+gulp.task('fa-fonts', function() {
+  return gulp.src('./node_modules/font-awesome/fonts/**.*')
+    .pipe(gulp.dest('./dist/static/fonts'));
+});
+
 gulp.task('watch', function() {
   gulp.watch('./src/js/**/*.js', ['js']);
   gulp.watch('./src/scss/**/*.scss', ['sass']);
@@ -100,7 +106,7 @@ gulp.task('test', function() {
     });
 });
 
-gulp.task('vendor', ['js_vendor', 'css_vendor', 'mapbox_assets']);
+gulp.task('vendor', ['js_vendor', 'css_vendor', 'mapbox_assets', 'fa-fonts']);
 gulp.task('js', ['lint', 'js_dropchop']);
 gulp.task('build', ['js', 'html', 'sass', 'assets']);
 gulp.task('default', ['build', 'connect', 'watch']);

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "browser-filesaver": "^1.0.0",
+    "font-awesome": "^4.4.0",
     "geoglyphs": "0.0.10",
     "jquery": "^2.1.4",
     "mapbox.js": "^2.1.9",

src/html/index.html

@@ -14,12 +14,6 @@
     <meta name="msapplication-TileColor" content="#FFFFFF" />
     <meta name="msapplication-TileImage" content="/assets/favicon/mstile-144x144.png" />
 
-    <!-- <link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
-    <link href='http://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
-    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
-    <link href="//api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css" rel="stylesheet" />
-    <link href="css/app.css" rel="stylesheet"> -->
-
     <link href="/static/css/vendor.css" rel="stylesheet">
     <link href="/static/css/dropchop.css" rel="stylesheet">
 

src/js/layerlist.dropchop.js

@@ -16,13 +16,21 @@ var dropchop = (function(dc) {
     dc.layerlist.$elem.append(liHelper);
 
     $(dc.layerlist).on('layer:added', dc.layerlist.addLayerListItem);
+    $(dc.layerlist).on('layer:removed', dc.layerlist.removeLayerListItem);
   };
 
   // triggered in dropchop.js
   dc.layerlist.addLayerListItem = function(event, layer) {
     var layerlistItem = $('<li>').addClass('layer-element').attr('data-stamp', layer.stamp);
     var layerDiv = $('<div>').addClass('layer-name').text(layer.name);
     var checkbox = $('<input>').addClass('layer-toggle').prop({'type': 'checkbox', 'checked': true});
+    var remove = $('<button>').addClass('layer-remove').html('<i class="fa fa-times"></i>');
+
+    remove.on('click', function(event) {
+      event.preventDefault();
+      $(dc.layers).trigger('layer:removed', [$(this).parent().attr('data-stamp')]);
+      return false;
+    });
 
     checkbox.on('change', function(e) {
       if (this.checked) {
@@ -39,6 +47,7 @@ var dropchop = (function(dc) {
 
     layerlistItem.append(layerDiv);
     layerlistItem.append(checkbox);
+    layerlistItem.append(remove);
     dc.layerlist.$elem.append(layerlistItem);
 
     dc.layerlist.elems[layer.stamp] = layerlistItem;
@@ -60,6 +69,12 @@ var dropchop = (function(dc) {
     dc.form.remove();
   }
 
+  dc.layerlist.removeLayerListItem = function(event, stamp) {
+    $('[data-stamp='+stamp+']').fadeOut(300, function() {
+      $(this).remove();
+    });
+  };
+
   return dc;
 
 })(dropchop || {});

src/js/layers.dropchop.js

@@ -8,6 +8,7 @@ var dropchop = (function(dc) {
 
   dc.layers.prepare = function() {
     $(dc.layers).on('file:added', dc.layers.add);
+    $(dc.layers).on('layer:removed', dc.layers.remove);
   };
 
 /**
@@ -28,12 +29,16 @@ var dropchop = (function(dc) {
   };
 
 /**
- * Remove a layer, which triggers layer:removed
- * @param {string} layer ID
+ * Remove a layer, which triggers layer:removed for the rest of the app
+ * @param {string} layer stamp
  */
-  dc.layers.remove = function(layerID) {
+  dc.layers.remove = function(event, stamp) {
     // trigger layer:removed
-    delete dc.layers.list[layerID];
+    console.log(stamp);
+    $(dc.map).trigger('layer:removed', [stamp]);
+    $(dc.layerlist).trigger('layer:removed', [stamp]);
+    $(dc.selection).trigger('layer:removed', [stamp]);
+    delete dc.layers.list[stamp];
   };
 
   function _makeLayer(f, b) {

src/js/map.dropchop.js

@@ -9,6 +9,8 @@ var dropchop = (function(dc) {
     dc.map.$elem = $('<div>').prop('id', 'dropchop-map').addClass('map');
     dc.$elem.append(dc.map.$elem);
 
+    $(dc.map).on('layer:removed', dc.map.removeLayer);
+
     _makeMap();
   };
 
@@ -26,6 +28,7 @@ var dropchop = (function(dc) {
       "Mapbox Dark": L.mapbox.tileLayer('mapbox.dark'),
       "Mapbox Satellite": L.mapbox.tileLayer('mapbox.satellite')
     };
+
     baseLayers['Mapbox Streets'].addTo(dc.map.m);
     // sets location of base layer control to the bottom right
     L.control.layers(baseLayers, {}, {
@@ -57,6 +60,10 @@ var dropchop = (function(dc) {
     dc.map.layergroup.addLayer(layer.featurelayer);
   };
 
+  dc.map.removeLayer = function(event, stamp) {
+    dc.map.layergroup.removeLayer(dc.layers.list[stamp].featurelayer);
+  };
+
   return dc;
 
 })(dropchop || {});

src/js/selection.dropchop.js

@@ -10,6 +10,7 @@ var dropchop = (function(dc) {
   dc.selection.init = function() {
     $(dc.selection).on('layer:selected', dc.selection.add);
     $(dc.selection).on('layer:unselected', dc.selection.remove);
+    $(dc.selection).on('layer:removed', _layerRemoved);
   };
 
   dc.selection.add = function(event, layer) {
@@ -28,9 +29,16 @@ var dropchop = (function(dc) {
 
   dc.selection.clear = function() {
     $('.layer-name.selected').removeClass('selected');
+    $('.operation-geo').addClass('operation-inactive');
+    $('.operation-geo').prop('disabled', true);
     dc.selection.list = [];
   };
 
+  function _layerRemoved(event, stamp) {
+    dc.selection.remove({}, {stamp: stamp});
+    dc.selection.clear();
+  }
+
   return dc;
 
 

src/scss/dropchop.scss

@@ -113,6 +113,28 @@ $width: 280px;
       }
     }
   }
+  .layer-remove {
+    border: none;
+    background: #f6f6f6;
+    position: absolute;
+    top: 6px;
+    padding: 5px 6px;
+    right: 9px;
+    text-align: center;
+    display: none;
+    color: #ff7a72;
+    cursor: pointer;
+    border-radius: 50%;
+    &:hover {
+      background: $red;
+      color: white;
+    }
+  }
+  &:hover {
+    .layer-remove {
+      display: block;
+    }
+  }
 }
 
 .map {