Make uiViewOnOSM work for notes too, add it to note_editor footer

ARCHITECTURE.md

@@ -352,7 +352,7 @@ Drawing is then accomplished with
         .merge(footer);
 
     footer
-        .call(uiViewOnOSM(context).entityID(entityID));
+        .call(uiViewOnOSM(context).what(entity));
 ```
 
 Some components are reconfigurable, and some provide functionality beyond

modules/osm/note.js

@@ -51,5 +51,10 @@ _extend(osmNote.prototype, {
 
     update: function(attrs) {
         return osmNote(this, attrs, {v: 1 + (this.v || 0)});
+    },
+
+    isNew: function() {
+        return this.id < 0;
     }
+
 });

modules/services/osm.js

@@ -365,8 +365,8 @@ export default {
     },
 
 
-    changesetURL: function(changesetId) {
-        return urlroot + '/changeset/' + changesetId;
+    changesetURL: function(changesetID) {
+        return urlroot + '/changeset/' + changesetID;
     },
 
 
@@ -394,6 +394,11 @@ export default {
     },
 
 
+    noteURL: function(note) {
+        return urlroot + '/note/' + note.id;
+    },
+
+
     // Generic method to load data from the OSM API
     // Can handle either auth or unauth calls.
     loadFromAPI: function(path, callback, options) {

modules/ui/inspector.js

@@ -44,11 +44,12 @@ export function uiInspector(context) {
         var presetPane = wrap.selectAll('.preset-list-pane');
         var editorPane = wrap.selectAll('.entity-editor-pane');
 
-        var graph = context.graph(),
-            entity = context.entity(_entityID),
-            showEditor = _state === 'hover' ||
-                entity.isUsed(graph) ||
-                entity.isHighwayIntersection(graph);
+        var graph = context.graph();
+        var entity = context.entity(_entityID);
+
+        var showEditor = _state === 'hover' ||
+            entity.isUsed(graph) ||
+            entity.isHighwayIntersection(graph);
 
         if (showEditor) {
             wrap.style('right', '0%');
@@ -67,7 +68,9 @@ export function uiInspector(context) {
             .merge(footer);
 
         footer
-            .call(uiViewOnOSM(context).entityID(_entityID));
+            .call(uiViewOnOSM(context)
+                .what(context.hasEntity(_entityID))
+            );
 
 
         function showList(preset) {

modules/ui/note_editor.js

@@ -3,11 +3,15 @@ import { select as d3_select } from 'd3-selection';
 
 import { t } from '../util/locale';
 import { services } from '../services';
-
 import { modeBrowse } from '../modes';
 import { svgIcon } from '../svg';
-import { uiNoteComments } from './note_comments';
-import { uiNoteHeader } from './note_header';
+
+import {
+    uiNoteComments,
+    uiNoteHeader,
+    uiViewOnOSM
+} from './index';
+
 import {
     utilNoAuto,
     utilRebind
@@ -25,17 +29,17 @@ export function uiNoteEditor(context) {
         var header = selection.selectAll('.header')
             .data([0]);
 
-        var enter = header.enter()
+        var headerEnter = header.enter()
             .append('div')
             .attr('class', 'header fillL');
 
-        enter
+        headerEnter
             .append('button')
             .attr('class', 'fr note-editor-close')
             .on('click', function() { context.enter(modeBrowse(context)); })
             .call(svgIcon('#iD-icon-close'));
 
-        enter
+        headerEnter
             .append('h3')
             .text(t('note.title'));
 
@@ -56,6 +60,14 @@ export function uiNoteEditor(context) {
             .call(noteHeader.note(_note))
             .call(noteComments.note(_note))
             .call(noteSave);
+
+
+        selection.selectAll('.footer')
+            .data([0])
+            .enter()
+            .append('div')
+            .attr('class', 'footer')
+            .call(uiViewOnOSM(context).what(_note));
     }
 
 

modules/ui/view_on_osm.js

@@ -1,37 +1,48 @@
 import { t } from '../util/locale';
 import { svgIcon } from '../svg';
+import {
+    osmEntity,
+    osmNote
+} from '../osm';
 
 
 export function uiViewOnOSM(context) {
-    var id;
+    var _what;   // an osmEntity or osmNote
+
 
     function viewOnOSM(selection) {
-        var entity = context.entity(id);
-
-        selection.style('display', entity.isNew() ? 'none' : null);
+        var url;
+        if (_what instanceof osmEntity) {
+            url = context.connection().entityURL(_what);
+        } else if (_what instanceof osmNote) {
+            url = context.connection().noteURL(_what);
+        }
 
+        var data = ((!_what || _what.isNew()) ? [] : [_what]);
         var link = selection.selectAll('.view-on-osm')
-            .data([0]);
+            .data(data, function(d) { return d.id; });
 
-        var enter = link.enter()
+        // exit
+        link.exit()
+            .remove();
+
+        // enter
+        var linkEnter = link.enter()
             .append('a')
             .attr('class', 'view-on-osm')
             .attr('target', '_blank')
+            .attr('href', url)
             .call(svgIcon('#iD-icon-out-link', 'inline'));
 
-        enter
+        linkEnter
             .append('span')
             .text(t('inspector.view_on_osm'));
-
-        link
-            .merge(enter)
-            .attr('href', context.connection().entityURL(entity));
     }
 
 
-    viewOnOSM.entityID = function(_) {
-        if (!arguments.length) return id;
-        id = _;
+    viewOnOSM.what = function(_) {
+        if (!arguments.length) return _what;
+        _what = _;
         return viewOnOSM;
     };