Added cloning of layers, actions shown on mouseover/out in layer panel

README.md

@@ -15,6 +15,8 @@ Changes from upstream are cherry-picked, last time on Apr 22, 2016.
 - Support for Node 4, thanks to patches and updated dependencies of @paulovieira
 - Added layer selection to map panel for fast comparisons with OSM and to save render time for low zoom levels
 - Added search field to layer panel
+- Added cloning of layers to layer panel
+- Layer actions only shown on hover, ideal for long layer names and reduces visual noise
 - Increased size of layer panel
 - Updated carto and node-mapnik dependencies, new CartoCSS commands available
 - Remember last selected folder in new layer dialog
@@ -56,7 +58,7 @@ Installation instructions, development docs and other information are available
 # Depends
 
 - Mapnik v2.3.0
-- Node.js v4.x, v0.10.x or v0.8.x
+- Node.js v6.x, v4.x, v0.10.x or v0.8.x
 - Protobuf: libprotobuf-lite and protoc
 
 However, node-mapnik (which depends on Mapnik and protobuf) is now packaged as a binary. So, you do not need an external Mapnik. See [Installation](#installation)

assets/css/style.css

@@ -683,6 +683,11 @@ ul.layers {
 .layers li .actions .icon { opacity:0.5; }
 .layers li .actions .icon:hover { opacity:1; }
 
+.layers li .actions {
+  display: none;
+}
+
+
 .palette {
   position:fixed;
   left:20px;

templates/ProjectLayer._

@@ -10,6 +10,7 @@
     <a title='Zoom to extent (<%= id %>)' class='icon extent' href='#<%= id%>'>Zoom to <%= id %></a>
     <a title='Toggle visibility of <%= id %>' class='icon visibility' href='#<%= id %>'>Hide <%= id %></a>
     <a title='Edit <%= id %>' class='icon edit popup' href='#<%= id %>'>Edit <%= id %></a>
+    <a title='Copy <%= id %>' class='icon layers' href='#<%= id %>'>Copy <%= id %></a>
     <a title='Delete <%= id %>' class='icon delete' href='#<%= id %>'>Delete <%= id %></a>
   </span>
 </li>

views/Layers.bones

@@ -5,10 +5,13 @@ view.prototype.events = {
     'click a.add-layer': 'layerAdd',
     'click a.edit': 'layerEdit',
     'click a.inspect': 'layerInspect',
+    'click a.layers' : 'layerClone',
     'click a.delete': 'layerDelete',
     'click a.visibility': 'layerToggleStatus',
     'click a.extent': 'layerExtent',
-    'keyup input.search' : 'searchLayers'
+    'keyup input.search' : 'searchLayers',
+    'mouseenter ul.layers li' : 'showLayerActions',
+    'mouseleave ul.layers li' : 'hideLayerActions'
 };
 
 view.prototype.initialize = function(options) {
@@ -17,12 +20,15 @@ view.prototype.initialize = function(options) {
         'layerAdd',
         'layerInspect',
         'layerEdit',
+        'layerClone',
         'layerDelete',
         'layerToggleStatus',
         'layerExtent',
         'makeLayer',
         'sortLayers',
-        'searchLayers'
+        'searchLayers',
+        'showLayerActions',
+        'hideLayerActions'
     );
     this.model.bind('poll', this.render);
     this.render();
@@ -85,6 +91,31 @@ view.prototype.layerEdit = function(ev) {
     (new models.Favorites).fetch({success:cb,error:cb});
 };
 
+view.prototype.layerClone = function(ev) {
+    var id = $(ev.currentTarget).attr('href').split('#').pop();
+
+    new views.Modal({
+        content: 'Are you sure you want to clone layer "'+ id +'"?',
+        callback: _(function() {
+            var original = this.model.get('Layer').get(id);
+
+            var rnd = Math.round(Math.random() * 10000);    
+            var attributes = jQuery.extend({}, original.attributes);
+            attributes.name += "_clone_" + rnd;
+            attributes.id += "_clone_" + rnd;
+            var clone = new models.Layer(attributes, {
+                collection: this.model.get('Layer')
+            });
+
+            this.model.get("Layer").add(clone);
+            this.makeLayer(clone);
+        }).bind(this),
+        affirmative: 'Clone'
+    });
+
+    return false;
+};
+
 view.prototype.layerDelete = function(ev) {
     var id = $(ev.currentTarget).attr('href').split('#').pop();
     new views.Modal({
@@ -214,3 +245,11 @@ view.prototype.searchLayers = function(ev) {
     });
 };
 
+view.prototype.showLayerActions = function(ev) {
+    this.$shownActions = this.$(ev.target).find("span.actions");
+    this.$shownActions.show();
+};
+
+view.prototype.hideLayerActions = function(ev) {
+    this.$shownActions.hide();
+};