First shot at presets

This includes a first JSON scheme and a bad-looking UI currently in
inspector.

index.html

@@ -31,6 +31,7 @@
         <script src='js/id/id.js'></script>
         <script src='js/id/util.js'></script>
         <script src='js/id/oauth.js'></script>
+        <script src='js/id/presets.js'></script>
         <script src='js/id/services/taginfo.js'></script>
 
         <script src="js/id/geo.js"></script>
@@ -71,6 +72,7 @@
         <script src='js/id/ui/save.js'></script>
         <script src='js/id/ui/tag_reference.js'></script>
         <script src='js/id/ui/key_reference.js'></script>
+        <script src='js/id/ui/preset.js'></script>
 
         <script src='js/id/actions.js'></script>
         <script src='js/id/actions/add_node.js'></script>
@@ -133,10 +135,13 @@
         <div id="iD"></div><script>
             locale.current = 'en';
             d3.json('keys.json', function(err, keys) {
-                var id = iD();
-                id.connection().keys(keys)
-                    .url('http://api06.dev.openstreetmap.org');
-                d3.select("#iD").call(id);
+                d3.json('presets/presets.json', function(err, presets_data) {
+                    var id = iD();
+                    id.connection().keys(keys)
+                        .presetData(iD.presetData().data(presets_data))
+                        .url('http://api06.dev.openstreetmap.org');
+                    d3.select("#iD").call(id);
+                });
             });
         </script></body>
 </html>

js/id/connection.js

@@ -5,6 +5,7 @@ iD.Connection = function() {
         connection = {},
         user = {},
         version,
+        presetData,
         keys,
         inflight = {},
         loadedTiles = {},
@@ -314,6 +315,12 @@ iD.Connection = function() {
         return connection;
     };
 
+    connection.presetData = function(_) {
+        if (!arguments.length) return presetData;
+        presetData = _;
+        return connection;
+    };
+
     connection.authenticate = function(callback) {
         function done(err, res) {
             event.auth();

js/id/modes/select.js

@@ -24,7 +24,9 @@ iD.modes.Select = function(entity, initial) {
             history = map.history(),
             surface = mode.map.surface;
 
-        inspector.graph(graph);
+        inspector
+            .graph(graph)
+            .presetData(map.connection().presetData());
 
         behaviors = [
             iD.behavior.Hover(),

js/id/presets.js

@@ -0,0 +1,18 @@
+iD.presetData = function() {
+    var presets = {},
+        data = [];
+
+    presets.data = function(_) {
+        if (!arguments.length) return data;
+        data = _;
+        return presets;
+    };
+
+    presets.match = function(entity) {
+        return data.filter(function(d) {
+            return _.contains(d.match.type, entity.type);
+        });
+    };
+
+    return presets;
+};

js/id/ui/inspector.js

@@ -1,6 +1,7 @@
 iD.ui.inspector = function() {
     var event = d3.dispatch('changeTags', 'close'),
         taginfo = iD.taginfo(),
+        presetData,
         initial = false,
         graph,
         tagList;
@@ -8,6 +9,8 @@ iD.ui.inspector = function() {
     function inspector(selection) {
         var entity = selection.datum();
 
+        var possiblePresets = presetData.match(entity);
+
         var inspector = selection.append('div')
             .attr('class','inspector content');
 
@@ -21,6 +24,14 @@ iD.ui.inspector = function() {
         var inspectorwrap = inspectorbody.append('div')
             .attr('class', 'inspector-inner tag-wrap fillL2');
 
+        if (possiblePresets.length) {
+            var inspectorpreset = inspectorwrap.append('div')
+                .attr('class', 'inspector-preset')
+                .call(iD.ui.preset()
+                    .preset(possiblePresets[0]));
+        }
+
+
         inspectorwrap.append('h4')
             .text(t('edit_tags'));
 
@@ -275,6 +286,11 @@ iD.ui.inspector = function() {
         return inspector;
     };
 
+    inspector.presetData = function(_) {
+        presetData = _;
+        return inspector;
+    };
+
     inspector.graph = function(_) {
         graph = _;
         return inspector;

js/id/ui/preset.js

@@ -0,0 +1,63 @@
+iD.ui.preset = function() {
+    var preset;
+
+    // generate form fields for a given field.
+    function input(d) {
+        switch (d.type) {
+
+            case 'tel':
+                this.append('input')
+                    .attr('type', 'tel')
+                    .attr('placeholder', '1-555-555-5555');
+                break;
+
+            case 'email':
+                this.append('input')
+                    .attr('type', 'email')
+                    .attr('placeholder', 'email@domain.com');
+                break;
+
+            case 'url':
+                this.append('input')
+                    .attr('type', 'url')
+                    .attr('placeholder', 'http://example.com/');
+                break;
+
+            case 'select':
+                var select = this.append('select');
+                var options = d.option.slice();
+                options.unshift('');
+                select.selectAll('option')
+                    .data(options)
+                    .enter()
+                    .append('option')
+                    .text(String);
+                break;
+        }
+    }
+
+    function presets(selection) {
+        var sections = selection.selectAll('div.preset-section')
+            .data(preset.form)
+            .enter()
+            .append('div')
+            .attr('class', 'preset-section');
+
+        sections.each(function(d) {
+            var s = d3.select(this);
+
+            s.append('h4')
+                .text(d.title || d.tag);
+
+            input.call(s, d);
+        });
+    }
+
+    presets.preset = function(_) {
+        if (!arguments.length) return preset;
+        preset = _;
+        return presets;
+    };
+
+    return presets;
+};

presets/presets.json

@@ -0,0 +1,58 @@
+[
+    {
+        "name": "highway",
+        "match": {
+            "type": ["line"],
+            "tags": {
+                "highway": "*"
+            }
+        },
+        "form": [
+            {
+                "tag": "highway",
+                "title": "Highway Type",
+                "type": "select",
+                "option": ["primary", "secondary", "tertiary"]
+            }
+        ]
+    },
+    {
+        "name": "cafe",
+        "match": {
+            "type": ["node", "area"],
+            "tags": {
+                "amenity": "cafe"
+            }
+        },
+        "form": [
+            {
+                "tag": "phone",
+                "type": "tel"
+            },
+            {
+                "tag": "fax",
+                "type": "tel"
+            },
+            {
+                "tag": "website",
+                "type": "url"
+            },
+            {
+                "tag": "email",
+                "type": "email"
+            },
+            {
+                "tag": "internet_access",
+                "title": "Internet Access",
+                "type": "select",
+                "option": ["yes", "wlan","wired","terminal","no"]
+            },
+            {
+                "tag": "internet_access:fee",
+                "title": "Internet Access Fee",
+                "type": "select",
+                "option": ["yes", "no"]
+            }
+        ]
+    }
+]