Convert all modes to module pattern

js/id/id.js

@@ -26,7 +26,7 @@ window.iD = function(container) {
             .attr('id', 'bar');
 
         var buttons = bar.selectAll('button.add-button')
-            .data([iD.modes.AddPlace, iD.modes.AddRoad, iD.modes.AddArea])
+            .data([iD.modes.AddPlace(), iD.modes.AddRoad(), iD.modes.AddArea()])
             .enter().append('button')
                 .attr('class', 'add-button')
             .text(function (mode) { return mode.title; })
@@ -140,13 +140,13 @@ window.iD = function(container) {
 
         var keybinding = d3.keybinding()
             .on('a', function(evt, mods) {
-                controller.enter(iD.modes.AddArea);
+                controller.enter(iD.modes.AddArea());
             })
             .on('p', function(evt, mods) {
-                controller.enter(iD.modes.AddPlace);
+                controller.enter(iD.modes.AddPlace());
             })
             .on('r', function(evt, mods) {
-                controller.enter(iD.modes.AddRoad);
+                controller.enter(iD.modes.AddRoad());
             })
             .on('z', function(evt, mods) {
                 if (mods === '⇧⌘') history.redo();

js/id/modes/add_area.js

@@ -1,47 +1,51 @@
-iD.modes.AddArea = {
-    id: 'add-area',
-    title: '+ Area',
+iD.modes.AddArea = function() {
+    var mode = {
+        id: 'add-area',
+        title: '+ Area'
+    };
 
-    way: function() {
+    function way() {
         return iD.Way({
             tags: { building: 'yes', area: 'yes', elastic: 'true' }
         });
-    },
+    }
 
-    enter: function() {
-        this.map.dblclickEnable(false);
+    mode.enter = function() {
+        mode.map.dblclickEnable(false);
 
-        var surface = this.map.surface;
+        var surface = mode.map.surface;
 
         function click() {
             var datum = d3.select(d3.event.target).datum() || {},
-                node, way = this.way();
+                node, way = way();
 
             // connect a way to an existing way
             if (datum.type === 'node') {
                 node = datum;
             } else {
-                node = iD.Node({loc: this.map.mouseCoordinates()});
+                node = iD.Node({loc: mode.map.mouseCoordinates()});
             }
 
-            this.history.perform(iD.actions.startWay(way));
-            this.history.perform(iD.actions.addWayNode(way, node));
+            mode.history.perform(iD.actions.startWay(way));
+            mode.history.perform(iD.actions.addWayNode(way, node));
 
-            this.controller.enter(iD.modes.DrawArea(way.id));
+            mode.controller.enter(iD.modes.DrawArea(way.id));
         }
 
-        surface.on('click.addarea', click.bind(this));
+        surface.on('click.addarea', click);
 
-        this.map.keybinding().on('⎋.exit', function() {
-            this.controller.exit();
-        }.bind(this));
-    },
+        mode.map.keybinding().on('⎋.exit', function() {
+            mode.controller.exit();
+        });
+    };
 
-    exit: function() {
+    mode.exit = function() {
         window.setTimeout(function() {
-            this.map.dblclickEnable(true);
-        }.bind(this), 1000);
-        this.map.surface.on('click.addarea', null);
-        this.map.keybinding().on('⎋.exit', null);
-    }
+            mode.map.dblclickEnable(true);
+        }, 1000);
+        mode.map.surface.on('click.addarea', null);
+        mode.map.keybinding().on('⎋.exit', null);
+    };
+
+    return mode;
 };

js/id/modes/add_place.js

@@ -1,26 +1,30 @@
-iD.modes.AddPlace = {
-    id: 'add-place',
-    title: '+ Place',
+iD.modes.AddPlace = function() {
+    var mode = {
+        id: 'add-place',
+        title: '+ Place'
+    };
 
-    enter: function() {
-        var surface = this.map.surface;
+    mode.enter = function() {
+        var surface = mode.map.surface;
 
         function click() {
-            var node = iD.Node({loc: this.map.mouseCoordinates(), _poi: true});
-            this.history.perform(iD.actions.addNode(node));
-            this.controller.enter(iD.modes.Select(node));
+            var node = iD.Node({loc: mode.map.mouseCoordinates(), _poi: true});
+            mode.history.perform(iD.actions.addNode(node));
+            mode.controller.enter(iD.modes.Select(node));
         }
 
-        surface.on('click.addplace', click.bind(this));
+        surface.on('click.addplace', click);
 
-        this.map.keybinding().on('⎋.exit', function() {
-            this.controller.exit();
-        }.bind(this));
-    },
+        mode.map.keybinding().on('⎋.exit', function() {
+            mode.controller.exit();
+        });
+    };
 
-    exit: function() {
-        this.map.surface
+    mode.exit = function() {
+        mode.map.surface
             .on('click.addplace', null);
-        this.map.keybinding().on('⎋.exit', null);
-    }
+        mode.map.keybinding().on('⎋.exit', null);
+    };
+
+    return mode;
 };

js/id/modes/add_road.js

@@ -1,10 +1,12 @@
-iD.modes.AddRoad = {
-    id: 'add-road',
-    title: '+ Road',
+iD.modes.AddRoad = function() {
+    var mode = {
+        id: 'add-road',
+        title: '+ Road'
+    };
 
-    enter: function() {
-        this.map.dblclickEnable(false);
-        var surface = this.map.surface;
+    mode.enter = function() {
+        mode.map.dblclickEnable(false);
+        var surface = mode.map.surface;
 
         // http://bit.ly/SwUwIL
         // http://bit.ly/WxqGng
@@ -20,7 +22,7 @@ iD.modes.AddRoad = {
                 node = datum;
 
                 var id = datum.id;
-                var parents = this.history.graph().parents(id);
+                var parents = mode.history.graph().parents(id);
                 if (parents.length) {
                     if (parents[0].nodes[0] === id) {
                         way = parents[0];
@@ -33,34 +35,37 @@ iD.modes.AddRoad = {
                 }
             } else if (datum.type === 'way') {
                 // begin a new way starting from an existing way
-                node = iD.Node({loc: this.map.mouseCoordinates()});
+                node = iD.Node({loc: mode.map.mouseCoordinates()});
 
-                var index = iD.util.geo.chooseIndex(datum, d3.mouse(surface.node()), this.map);
-                var connectedWay = this.history.graph().entity(datum.id);
-                this.history.perform(iD.actions.addWayNode(connectedWay, node, index));
+                var index = iD.util.geo.chooseIndex(datum, d3.mouse(surface.node()), mode.map);
+                var connectedWay = mode.history.graph().entity(datum.id);
+                mode.history.perform(iD.actions.addWayNode(connectedWay, node, index));
             } else {
                 // begin a new way
-                node = iD.Node({loc: this.map.mouseCoordinates()});
+                node = iD.Node({loc: mode.map.mouseCoordinates()});
             }
 
             if (start) {
-                this.history.perform(iD.actions.startWay(way));
-                this.history.perform(iD.actions.addWayNode(way, node));
+                mode.history.perform(iD.actions.startWay(way));
+                mode.history.perform(iD.actions.addWayNode(way, node));
             }
 
-            this.controller.enter(iD.modes.DrawRoad(way.id, direction));
+            mode.controller.enter(iD.modes.DrawRoad(way.id, direction));
         }
 
-        surface.on('click.addroad', click.bind(this));
+        surface.on('click.addroad', click);
 
-        this.map.keybinding().on('⎋.exit', function() {
-            this.controller.exit();
-        }.bind(this));
-    },
-    exit: function() {
-        this.map.dblclickEnable(true);
-        this.map.surface.on('click.addroad', null);
-        this.map.keybinding().on('⎋.exit', null);
+        mode.map.keybinding().on('⎋.exit', function() {
+            mode.controller.exit();
+        });
+    };
+
+    mode.exit = function() {
+        mode.map.dblclickEnable(true);
+        mode.map.surface.on('click.addroad', null);
+        mode.map.keybinding().on('⎋.exit', null);
         d3.selectAll('#addroad').remove();
-    }
+    };
+
+    return mode;
 };

js/id/modes/draw_area.js

@@ -1,61 +1,63 @@
 iD.modes.DrawArea = function(way_id) {
-    return {
-        enter: function() {
-            this.map.dblclickEnable(false);
+    var mode = {};
 
-            var surface = this.map.surface,
-                way = this.history.graph().entity(way_id),
-                firstnode_id = _.first(way.nodes),
-                node = iD.Node({loc: this.map.mouseCoordinates()});
+    mode.enter = function() {
+        mode.map.dblclickEnable(false);
 
-            this.history.perform(iD.actions.addWayNode(way, node));
+        var surface = mode.map.surface,
+            way = mode.history.graph().entity(way_id),
+            firstnode_id = _.first(way.nodes),
+            node = iD.Node({loc: mode.map.mouseCoordinates()});
 
-            function mousemove() {
-                this.history.replace(iD.actions.addWayNode(way, node.update({loc: this.map.mouseCoordinates()})));
-            }
+        mode.history.perform(iD.actions.addWayNode(way, node));
 
-            function click() {
-                d3.event.stopPropagation();
-
-                var datum = d3.select(d3.event.target).datum();
-
-                if (datum.type === 'node') {
-                    if (datum.id == firstnode_id) {
-                        this.history.replace(iD.actions.addWayNode(way,
-                            this.history.graph().entity(way.nodes[0])));
-
-                        delete way.tags.elastic;
-                        this.history.perform(iD.actions.changeTags(way, way.tags));
-
-                        // End by clicking on own tail
-                        return this.controller.enter(iD.modes.Select(way));
-                    } else {
-                        // connect a way to an existing way
-                        this.history.replace(iD.actions.addWayNode(way, datum));
-                    }
-                } else {
-                    node = node.update({loc: this.map.mouseCoordinates()});
-                    this.history.replace(iD.actions.addWayNode(way, node));
-                }
-
-                this.controller.enter(iD.modes.DrawArea(way_id));
-            }
-
-            this.map.keybinding().on('⎋.exit', function() {
-                this.controller.exit();
-            }.bind(this));
-
-            surface.on('click.drawarea', click.bind(this))
-                .on('mousemove.drawarea', mousemove.bind(this));
-        },
-
-        exit: function() {
-            this.map.surface.on('mousemove.drawarea', null)
-                .on('click.drawarea', null);
-            this.map.keybinding().on('⎋.exit', null);
-            window.setTimeout(function() {
-                this.map.dblclickEnable(true);
-            }.bind(this), 1000);
+        function mousemove() {
+            mode.history.replace(iD.actions.addWayNode(way, node.update({loc: mode.map.mouseCoordinates()})));
         }
+
+        function click() {
+            d3.event.stopPropagation();
+
+            var datum = d3.select(d3.event.target).datum();
+
+            if (datum.type === 'node') {
+                if (datum.id == firstnode_id) {
+                    mode.history.replace(iD.actions.addWayNode(way,
+                        mode.history.graph().entity(way.nodes[0])));
+
+                    delete way.tags.elastic;
+                    mode.history.perform(iD.actions.changeTags(way, way.tags));
+
+                    // End by clicking on own tail
+                    return mode.controller.enter(iD.modes.Select(way));
+                } else {
+                    // connect a way to an existing way
+                    mode.history.replace(iD.actions.addWayNode(way, datum));
+                }
+            } else {
+                node = node.update({loc: mode.map.mouseCoordinates()});
+                mode.history.replace(iD.actions.addWayNode(way, node));
+            }
+
+            mode.controller.enter(iD.modes.DrawArea(way_id));
+        }
+
+        mode.map.keybinding().on('⎋.exit', function() {
+            mode.controller.exit();
+        });
+
+        surface.on('click.drawarea', click)
+            .on('mousemove.drawarea', mousemove);
     };
+
+    mode.exit = function() {
+        mode.map.surface.on('mousemove.drawarea', null)
+            .on('click.drawarea', null);
+        mode.map.keybinding().on('⎋.exit', null);
+        window.setTimeout(function() {
+            mode.map.dblclickEnable(true);
+        }, 1000);
+    };
+
+    return mode;
 };

js/id/modes/draw_road.js

@@ -1,79 +1,81 @@
 iD.modes.DrawRoad = function(way_id, direction) {
-    return {
-        enter: function() {
-            this.map.dblclickEnable(false);
-            this.map.dragEnable(false);
+    var mode = {};
 
-            var index = (direction === 'forward') ? undefined : -1,
-                surface = this.map.surface,
-                node = iD.Node({loc: this.map.mouseCoordinates()}),
-                way = this.history.graph().entity(way_id),
-                firstNode = way.nodes[0],
-                lastNode = _.last(way.nodes);
+    mode.enter = function() {
+        mode.map.dblclickEnable(false);
+        mode.map.dragEnable(false);
 
-            this.history.perform(iD.actions.addWayNode(way, node, index));
+        var index = (direction === 'forward') ? undefined : -1,
+            surface = mode.map.surface,
+            node = iD.Node({loc: mode.map.mouseCoordinates()}),
+            way = mode.history.graph().entity(way_id),
+            firstNode = way.nodes[0],
+            lastNode = _.last(way.nodes);
 
-            function mousemove() {
-                this.history.replace(iD.actions.addWayNode(way, node.update({loc: this.map.mouseCoordinates()}), index));
-            }
+        mode.history.perform(iD.actions.addWayNode(way, node, index));
 
-            function click() {
-                d3.event.stopPropagation();
-
-                var datum = d3.select(d3.event.target).datum() || {};
-
-                if (datum.type === 'node') {
-                    if (datum.id == firstNode || datum.id == lastNode) {
-                        // If this is drawing a loop and this is not the drawing
-                        // end of the stick, finish the circle
-                        if (direction === 'forward' && datum.id == firstNode) {
-                            this.history.replace(iD.actions.addWayNode(way,
-                                this.history.graph().entity(firstNode), index));
-                        } else if (direction === 'backward' && datum.id == lastNode) {
-                            this.history.replace(iD.actions.addWayNode(way,
-                                this.history.graph().entity(lastNode), index));
-                        }
-
-                        delete way.tags.elastic;
-                        this.history.perform(iD.actions.changeTags(way, way.tags));
-
-                        // End by clicking on own tail
-                        return this.controller.enter(iD.modes.Select(way));
-                    } else {
-                        // connect a way to an existing way
-                        this.history.replace(iD.actions.addWayNode(way, datum, index));
-                    }
-                } else if (datum.type === 'way') {
-                    node = node.update({loc: this.map.mouseCoordinates()});
-                    this.history.replace(iD.actions.addWayNode(way, node, index));
-
-                    var connectedWay = this.history.graph().entity(datum.id);
-                    var connectedIndex = iD.modes.chooseIndex(datum, d3.mouse(surface.node()), this.map);
-                    this.history.perform(iD.actions.addWayNode(connectedWay, node, connectedIndex));
-                } else {
-                    node = node.update({loc: this.map.mouseCoordinates()});
-                    this.history.replace(iD.actions.addWayNode(way, node, index));
-                }
-
-                this.controller.enter(iD.modes.DrawRoad(way_id, direction));
-            }
-
-            surface.on('mousemove.drawroad', mousemove.bind(this))
-                .on('click.drawroad', click.bind(this));
-
-            this.map.keybinding().on('⎋.exit', function() {
-                this.controller.exit();
-            }.bind(this));
-        },
-
-        exit: function() {
-            this.map.surface.on('mousemove.drawroad', null)
-                .on('click.drawroad', null);
-            this.map.keybinding().on('⎋.exit', null);
-            window.setTimeout(function() {
-                this.map.dblclickEnable(true);
-                this.map.dragEnable(true);
-            }.bind(this), 1000);
+        function mousemove() {
+            mode.history.replace(iD.actions.addWayNode(way, node.update({loc: mode.map.mouseCoordinates()}), index));
         }
+
+        function click() {
+            d3.event.stopPropagation();
+
+            var datum = d3.select(d3.event.target).datum() || {};
+
+            if (datum.type === 'node') {
+                if (datum.id == firstNode || datum.id == lastNode) {
+                    // If mode is drawing a loop and mode is not the drawing
+                    // end of the stick, finish the circle
+                    if (direction === 'forward' && datum.id == firstNode) {
+                        mode.history.replace(iD.actions.addWayNode(way,
+                            mode.history.graph().entity(firstNode), index));
+                    } else if (direction === 'backward' && datum.id == lastNode) {
+                        mode.history.replace(iD.actions.addWayNode(way,
+                            mode.history.graph().entity(lastNode), index));
+                    }
+
+                    delete way.tags.elastic;
+                    mode.history.perform(iD.actions.changeTags(way, way.tags));
+
+                    // End by clicking on own tail
+                    return mode.controller.enter(iD.modes.Select(way));
+                } else {
+                    // connect a way to an existing way
+                    mode.history.replace(iD.actions.addWayNode(way, datum, index));
+                }
+            } else if (datum.type === 'way') {
+                node = node.update({loc: mode.map.mouseCoordinates()});
+                mode.history.replace(iD.actions.addWayNode(way, node, index));
+
+                var connectedWay = mode.history.graph().entity(datum.id);
+                var connectedIndex = iD.modes.chooseIndex(datum, d3.mouse(surface.node()), mode.map);
+                mode.history.perform(iD.actions.addWayNode(connectedWay, node, connectedIndex));
+            } else {
+                node = node.update({loc: mode.map.mouseCoordinates()});
+                mode.history.replace(iD.actions.addWayNode(way, node, index));
+            }
+
+            mode.controller.enter(iD.modes.DrawRoad(way_id, direction));
+        }
+
+        surface.on('mousemove.drawroad', mousemove)
+            .on('click.drawroad', click);
+
+        mode.map.keybinding().on('⎋.exit', function() {
+            mode.controller.exit();
+        });
     };
+
+    mode.exit = function() {
+        mode.map.surface.on('mousemove.drawroad', null)
+            .on('click.drawroad', null);
+        mode.map.keybinding().on('⎋.exit', null);
+        window.setTimeout(function() {
+            mode.map.dblclickEnable(true);
+            mode.map.dragEnable(true);
+        }, 1000);
+    };
+
+    return mode;
 };