Set up handler hand off + class toggling

.editorconfig

@@ -0,0 +1,4 @@
+[*.js]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true

.eslintrc

@@ -0,0 +1,31 @@
+{
+  "rules": {
+    "space-after-function-name": 2,
+    "space-before-blocks": 2,
+    "space-after-keywords": 2,
+    "space-unary-ops": 2,
+    "no-use-before-define": [2, "nofunc"],
+    "camelcase": 0,
+    "comma-style": 2,
+    "eqeqeq": 0,
+    "new-cap": 2,
+    "no-multi-spaces": 2,
+    "brace-style": 2,
+    "no-underscore-dangle": [0],
+    "no-self-compare": 2,
+    "no-void": 2,
+    "wrap-iife": 2,
+    "no-eq-null": 2,
+    "quotes": [0],
+    "curly": 0,
+    "dot-notation": [0],
+    "no-shadow": 0
+  },
+  "env": {
+    "node": true,
+    "browser": true
+  },
+  "globals": {
+    "mapboxgl": true
+  }
+}

dist/mapboxgl.draw.css

@@ -28,3 +28,6 @@
   .mapboxgl-ctrl-draw-btn.circle:before { content:'\e602'; }
   .mapboxgl-ctrl-draw-btn.square:before   { content:'\e603'; }
   .mapboxgl-ctrl-draw-btn.line:before  { content:'\e604'; }
+
+.mapboxgl-ctrl-draw-btn.active,
+.mapboxgl-ctrl-draw-btn.active:hover { background-color:rgba(0,0,0,0.10); }

index.js

@@ -4,7 +4,7 @@
  * @class mapbox.Draw
  *
  * @param {Object} options
- * @param {String} [options.position=topright] A string indicating the control's position on the map. Options are `topright`, `topleft`, `bottomright`, `bottomleft`
+ * @param {String} [options.position=top-right] A string indicating the control's position on the map. Options are `topright`, `topleft`, `bottomright`, `bottomleft`
  * @returns {Draw} `this`
  * @example
  * var map = new mapboxgl.Map({

package.json

@@ -12,8 +12,7 @@
     "url": "git://github.com/mapbox/gl-draw.git"
   },
   "keywords": [
-    "gl",
-    "draw",
+    "webgl",
     "mapbox",
     "draw",
     "drawing"

src/dom.js

@@ -1,21 +0,0 @@
-'use strict';
-
-/* Builds DOM elements
- * @param {String} tag Element name
- * @param {String} [className]
- * @param {Object} [container] DOM element to append to
- * @param {Object} [attrbutes] Object containing attributes to apply to an
- * element. Attribute name corresponds to the key.
- * @returns {el} The dom element
- */
-module.exports.create = function(tag, className, container, attributes) {
-  var el = document.createElement(tag);
-  if (className) el.className = className;
-  if (attributes) {
-    for (var key in attributes) {
-      el.setAttribute(key, attributes[key]);
-    }
-  }
-  if (container) container.appendChild(el);
-  return el;
-};

src/draw.js

@@ -2,8 +2,15 @@
 
 var extend = require('xtend');
 var Control = require('./control');
-var DOM = require('./dom');
 var util = require('./util');
+var DOM = util.DOM;
+
+// Control handlers
+var Shape = require('./handlers/shape');
+var Line = require('./handlers/line');
+var Circle = require('./handlers/circle');
+var Square = require('./handlers/square');
+var Marker = require('./handlers/marker');
 
 module.exports = Draw;
 
@@ -13,29 +20,65 @@ function Draw(options) {
 
 Draw.prototype = extend(Control, {
   options: {
-    position: 'top-left'
+    position: 'top-left',
+    controls: {
+      marker: true,
+      line: true,
+      shape: true,
+      square: true,
+      circle: true
+    }
   },
 
   onAdd: function(map) {
-    var className = 'mapboxgl-ctrl';
-    var container = this._container = DOM.create('div', className + '-group', map.getContainer());
-    this._shapeButton = this._createButton('mapboxgl-ctrl-draw-btn shape', 'Shape tool', this._drawShape.bind(map));
-    this._lineButton = this._createButton('mapboxgl-ctrl-draw-btn line', 'Line tool', this._drawLine.bind(map));
-    this._circleButton = this._createButton('mapboxgl-ctrl-draw-btn circle', 'Circle tool', this._drawCircle.bind(map));
-    this._squareButton = this._createButton('mapboxgl-ctrl-draw-btn square', 'Rectangle tool', this._drawSquare.bind(map));
-    this._markerButton = this._createButton('mapboxgl-ctrl-draw-btn marker', 'Marker tool', this._drawMarker.bind(map));
+    var controlClass = this._controlClass = 'mapboxgl-ctrl-draw-btn';
+    var container = this._container = DOM.create('div', 'mapboxgl-ctrl-group', map.getContainer());
+    var controls = this.options.controls;
+
+    if (controls.shape) this._createButton(controlClass + ' shape', 'Shape tool', this._drawShape.bind(map));
+    if (controls.line) this._createButton(controlClass + ' line', 'Line tool', this._drawLine.bind(map));
+    if (controls.circle) this._createButton(controlClass + ' circle', 'Circle tool', this._drawCircle.bind(map));
+    if (controls.square) this._createButton(controlClass + ' square', 'Rectangle tool', this._drawSquare.bind(map));
+    if (controls.marker) this._createButton(controlClass + ' marker', 'Marker tool', this._drawMarker.bind(map));
     return container;
   },
 
-  _drawShape: function(map) {},
-  _drawLine: function(map) {},
-  _drawCircle: function(map) {},
-  _drawSquare: function(map) {},
-  _drawMarker: function(map) {},
+  _drawShape: function() {
+    new Shape(this);
+  },
+
+  _drawLine: function() {
+    new Line(this);
+  },
+
+  _drawCircle: function() {
+    new Circle(this);
+  },
+
+  _drawSquare: function() {
+    new Square(this);
+  },
+
+  _drawMarker: function() {
+    new Marker(this);
+  },
 
   _createButton: function(className, title, fn) {
-    var a = DOM.create('button', className, this._container, {title: title});
-    a.addEventListener('click', function() { fn(); });
+    var a = DOM.create('button', className, this._container, {
+      title: title
+    });
+
+    var controlClass = this._controlClass;
+    a.addEventListener('click', function(e) {
+      e.preventDefault();
+
+      if (!this.classList.contains('active')) {
+        DOM.removeClass(document.querySelectorAll('.' + controlClass), 'active');
+        this.classList.add('active');
+        fn();
+      }
+    });
+
     return a;
   }
 });

src/handlers/circle.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = Circle;
+
+function Circle(map) {
+  console.log(map);
+}

src/handlers/line.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = Line;
+
+function Line(map) {
+  console.log(map);
+}

src/handlers/marker.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = Marker;
+
+function Marker(map) {
+  console.log(map);
+}

src/handlers/shape.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = Shape;
+
+function Shape(map) {
+  console.log(map);
+}

src/handlers/square.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = Square;
+
+function Square(map) {
+  console.log(map);
+}

src/util.js

@@ -16,5 +16,39 @@ module.exports = {
           obj.options[i] = options[i];
       }
       return obj.options;
+  },
+
+  DOM: {
+    /* Builds DOM elements
+     *
+     * @param {String} tag Element name
+     * @param {String} [className]
+     * @param {Object} [container] DOM element to append to
+     * @param {Object} [attrbutes] Object containing attributes to apply to an
+     * element. Attribute name corresponds to the key.
+     * @returns {el} The dom element
+     */
+    create: function(tag, className, container, attributes) {
+      var el = document.createElement(tag);
+      if (className) el.className = className;
+      if (attributes) {
+        for (var key in attributes) {
+          el.setAttribute(key, attributes[key]);
+        }
+      }
+      if (container) container.appendChild(el);
+      return el;
+    },
+
+    /* Removes classes from an array of DOM elements
+     *
+     * @param {HTMLElement} elements
+     * @param {String} klass
+     */
+    removeClass: function(elements, klass) {
+      Array.prototype.forEach.call(elements, function(el) {
+        el.classList.remove(klass);
+      });
+    }
   }
 };