UI touches, reworking presets

css/app.css

@@ -147,6 +147,8 @@ polyline {
     width:300px;
     background:#fff;
     box-shadow:1px 1px 3px #111;
+    max-height:300px;
+    overflow:auto;
 }
 
 .edit-pane h2 {
@@ -191,3 +193,24 @@ polyline {
 .edit-pane table td input {
     width:140px;
 }
+
+.presets h3 {
+    padding: 5px;
+    font: normal 13px/15px Helvetica, Arial, sans-serif;
+    text-align:center;
+    margin: 0;
+}
+
+.presets a.preset-option {
+    text-decoration:none;
+    display:block;
+    background:#eee;
+    padding:5px;
+    border-top:1px solid #ccc;
+}
+
+.presets a.preset-option span {
+    display:block;
+    color: #888;
+    font: normal 11px/15px Helvetica, Arial, sans-serif;
+}

index.html

@@ -71,10 +71,6 @@ require(["dojo/dom-geometry","dojo/dom-class","dojo/on","dojo/dom","dojo/Evented
 		// Set initial controllerState
 		controller.setState(new iD.controller.edit.NoSelection());
 
-		// Load presets
-		controller.setTagPresets('way', 'presets/ways.json');
-		controller.setTagPresets('node', 'presets/nodes.json');
-
 		// Load data
 		map.download();
 	}
@@ -155,14 +151,7 @@ require(["dojo/dom-geometry","dojo/dom-class","dojo/on","dojo/dom","dojo/Evented
         <a class='tab' href='#presets'>Presets</a>
         <a class='tab' href='#tags'>Tags</a>
     </div>
-    <div class='hud presets'>
-        <ul>
-            <li>Primary
-            <li>Secondary
-            <li>Residential
-            <li>Service
-        </ul>
-    </div>
+    <div class='hud presets'></div>
     <div class='hud tags'>
         <table>
             <thead>

js/iD/Controller.js

@@ -9,14 +9,12 @@ declare("iD.Controller", [Evented], {
 	map: null,				// current Map
 	stepper: null,			// current StepPane
 	undoStack: null,		// main undoStack
-	presets: null,			// tag presets
 	editorCache: null,		// cache of tag editor objects, means we don't have to repeatedly load them
 	
 	constructor:function(map) {
 		// summary:		The Controller marshalls ControllerStates and passes events to them.
 		this.map = map;
 		this.undoStack = new iD.actions.UndoStack();
-		this.presets = {};
 		this.editorCache = {};
 	},
 
@@ -25,11 +23,6 @@ declare("iD.Controller", [Evented], {
 		this.stepper = stepper;
 	},
 
-	setTagPresets:function(type, url) {
-		// summary:		Load and store a JSON tag preset file.
-		this.presets[type] = new iD.tags.PresetList(type,url);
-	},
-	
 	setState:function(newState) {
 		// summary:		Enter a new ControllerState, firing exitState on the old one, and enterState on the new one.
 		if (newState === this.state) { return; }

js/iD/Util.js

@@ -26,3 +26,21 @@ iD.Util.friendlyName = function(entity) {
 
     return n.length === 0 ? 'unknown' : n.join('; ');
 };
+
+iD.Util._presets = {};
+
+iD.Util.presets = function(type, callback) {
+    if (iD.Util._presets[type]) return callback(iD.Util._presets[type]);
+    $.ajax({
+        url: 'presets/' + type + '.json',
+        dataType: "json",
+        error: function() {
+            if (typeof console !== 'undefined') console.error(arguments);
+        },
+        success: function(resp) {
+            console.log(resp);
+            iD.Util._presets[type] = resp;
+            return callback(resp);
+        }
+    });
+};

js/iD/controller/edit/EditBaseState.js

@@ -35,6 +35,32 @@ declare("iD.controller.edit.EditBaseState", [iD.controller.ControllerState], {
             return e.preventDefault();
         });
         $('.edit-pane a.tab:first').click();
+
+        var $presets = $('.edit-pane .presets');
+        // Build presets panel
+        iD.Util.presets(entity.entityType, function(presets) {
+            $presets.empty();
+            console.log(presets);
+            _.each(presets, function(pre, category) {
+                $('<h3></h3>')
+                    .text(category)
+                    .appendTo($presets);
+                _.each(pre, function(set) {
+                    var a = $('<a></a>')
+                        .text(set.name)
+                        .attr({
+                            'class': 'preset-option',
+                            'href': '#'
+                        })
+                        .appendTo($presets);
+                    $('<span></span>')
+                        .text(set.description)
+                        .appendTo(a);
+                });
+            });
+        });
+
+        // Build tag panel
         $('.edit-pane .tags tbody').empty();
         _.each(entity.tags, function(value, key) {
             var tr = $('<tr></tr>').appendTo(
@@ -52,6 +78,7 @@ declare("iD.controller.edit.EditBaseState", [iD.controller.ControllerState], {
             $('<td></td>').append(keyfield).appendTo(tr);
             $('<td></td>').append(valuefield).appendTo(tr);
         });
+
         $('.edit-pane a[href=#close]').click(this.closeEditorTooltip);
     },
 

presets/way.json

@@ -1,6 +1,8 @@
 {
-    "Roads": {
-        "Motorway": {
+    "Roads": [
+        {
+            "name": "Motorway",
+            "description": "a large highway, linking states or provinces",
             "tags": {
                 "highway": "motorway"
             },
@@ -15,7 +17,9 @@
                 "road"
             ]
         },
-        "Trunk road": {
+        {
+            "name": "Trunk road",
+            "description": "a highway, linking states or provinces",
             "tags": {
                 "highway": "secondary"
             },
@@ -26,7 +30,9 @@
                 "bus"
             ]
         },
-        "Primary road": {
+        {
+            "name": "Primary road",
+            "description": "a highway linking large towns",
             "tags": {
                 "highway": "primary"
             },
@@ -37,7 +43,9 @@
                 "bus"
             ]
         },
-        "Secondary road": {
+        {
+            "name": "Secondary road",
+            "description": "Multi-lane roads that lead to residential roads. Usually they have stop lights and feed in to larger streets.",
             "tags": {
                 "highway": "secondary"
             },
@@ -48,7 +56,9 @@
                 "bus"
             ]
         },
-        "Tertiary road": {
+        {
+            "name": "Tertiary road",
+            "description": "Roads that connect to residential roads. Typically feature stop lights and connect to larger streets.",
             "tags": {
                 "highway": "tertiary"
             },
@@ -59,7 +69,22 @@
                 "bus"
             ]
         },
-        "Minor road": {
+        {
+            "name": "Residential",
+            "description": "a typically paved road that connects other roads to housing, and usually to driveways",
+            "tags": {
+                "highway": "residential"
+            },
+            "icon": "ways/highway__unclassified.png",
+            "editors": [
+                "road",
+                "cycling",
+                "bus"
+            ]
+        },
+        {
+            "name": "Minor road",
+            "description": "Minor connecting roads",
             "tags": {
                 "highway": "unclassified"
             },
@@ -70,9 +95,10 @@
                 "bus"
             ]
         }
-    },
-    "Railways": {
-        "Railway": {
+    ],
+    "Railways": [
+        {
+            "name": "Railway",
             "tags": {
                 "railway": "rail"
             },
@@ -81,7 +107,8 @@
                 "rail"
             ]
         },
-        "Disused tracks": {
+        {
+            "name": "Disused tracks",
             "tags": {
                 "railway": "disused"
             },
@@ -90,7 +117,8 @@
                 "rail"
             ]
         },
-        "Abandoned trackbed": {
+        {
+            "name": "Abandoned trackbed",
             "tags": {
                 "railway": "abandoned"
             },
@@ -99,5 +127,5 @@
                 "rail"
             ]
         }
-    }
+    ]
 }