Add context.asset for building asset filenames, use it for traffico

We were using assetMap/assetPath but only for images, and it was broken anyway
(fixes #3011)

js/id/id.js

@@ -31,32 +31,6 @@ window.iD = function () {
         }
     };
 
-    var locale, localePath;
-    context.locale = function(loc, path) {
-        locale = loc;
-        localePath = path;
-
-        // Also set iD.detect().locale (unless we detected 'en-us' and openstreetmap wants 'en')..
-        if (!(loc.toLowerCase() === 'en' && iD.detect().locale.toLowerCase() === 'en-us')) {
-            iD.detect().locale = loc;
-        }
-
-        return context;
-    };
-
-    context.loadLocale = function(cb) {
-        if (locale && locale !== 'en' && iD.data.locales.indexOf(locale) !== -1) {
-            localePath = localePath || context.assetPath() + 'locales/' + locale + '.json';
-            d3.json(localePath, function(err, result) {
-                window.locale[locale] = result;
-                window.locale.current(locale);
-                cb();
-            });
-        } else {
-            cb();
-        }
-    };
-
 
     /* Straight accessors. Avoid using these if you can. */
     var ui, connection, history;
@@ -297,9 +271,39 @@ window.iD = function () {
         return context;
     };
 
+    context.asset = function(_) {
+        var filename = assetPath + _;
+        return assetMap[filename] || filename;
+    };
+
     context.imagePath = function(_) {
-        var asset = 'img/' + _;
-        return assetMap[asset] || assetPath + asset;
+        return context.asset('img/' + _);
+    };
+
+    var locale, localePath;
+    context.locale = function(loc, path) {
+        locale = loc;
+        localePath = path;
+
+        // Also set iD.detect().locale (unless we detected 'en-us' and openstreetmap wants 'en')..
+        if (!(loc.toLowerCase() === 'en' && iD.detect().locale.toLowerCase() === 'en-us')) {
+            iD.detect().locale = loc;
+        }
+
+        return context;
+    };
+
+    context.loadLocale = function(cb) {
+        if (locale && locale !== 'en' && iD.data.locales.indexOf(locale) !== -1) {
+            localePath = localePath || context.asset('locales/' + locale + '.json');
+            d3.json(localePath, function(err, result) {
+                window.locale[locale] = result;
+                window.locale.current(locale);
+                cb();
+            });
+        } else {
+            cb();
+        }
     };
 
 

js/id/services/mapillary.js

@@ -16,14 +16,14 @@ iD.services.mapillary = function() {
             .append('link')
             .attr('id', 'traffico')
             .attr('rel', 'stylesheet')
-            .attr('href', context.assetPath() + 'traffico/stylesheets/traffico.css');
+            .attr('href', context.asset('traffico/stylesheets/traffico.css'));
     }
 
     function loadSignDefs(context) {
         if (!iD.services.mapillary.sign_defs) {
             iD.services.mapillary.sign_defs = {};
             _.each(['au', 'br', 'ca', 'de', 'us'], function(region) {
-                d3.json(context.assetPath() + 'traffico/string-maps/' + region + '-map.json', function(err, data) {
+                d3.json(context.asset('traffico/string-maps/' + region + '-map.json'), function(err, data) {
                     if (err) return;
                     if (region === 'de') region = 'eu';
                     iD.services.mapillary.sign_defs[region] = data;

test/spec/id.js

@@ -1,6 +1,58 @@
 describe('iD', function() {
-    describe("#presets", function() {
-        it("supports custom presets", function() {
+    var assets = {
+        'iD/img/loader.gif': '/assets/iD/img/loader-b66184b5c4afbccc25f.gif'
+    };
+
+    describe('#assetPath', function() {
+        it('sets and gets assetPath', function() {
+            var context = iD();
+            expect(context.assetPath()).to.eql('');
+
+            context.assetPath('iD/');
+            expect(context.assetPath()).to.eql('iD/');
+        });
+    });
+
+    describe('#assetMap', function() {
+        it('sets and gets assetMap', function() {
+            var context = iD();
+            expect(context.assetMap()).to.eql({});
+
+            context.assetMap(assets);
+            expect(context.assetMap()).to.eql(assets);
+        });
+    });
+
+    describe('#asset', function() {
+        var context;
+        beforeEach(function () {
+            context = iD().assetPath('iD/').assetMap(assets);
+        });
+
+        it('looks first in assetMap', function() {
+            expect(context.asset('img/loader.gif')).to.eql('/assets/iD/img/loader-b66184b5c4afbccc25f.gif');
+        });
+        it('falls back to prepending assetPath', function() {
+            expect(context.asset('img/spinner.gif')).to.eql('iD/img/spinner.gif');
+        });
+    });
+
+    describe('#imagePath', function() {
+        var context;
+        beforeEach(function () {
+            context = iD().assetPath('iD/').assetMap(assets);
+        });
+
+        it('looks first in assetMap', function() {
+            expect(context.imagePath('loader.gif')).to.eql('/assets/iD/img/loader-b66184b5c4afbccc25f.gif');
+        });
+        it('falls back to prepending assetPath', function() {
+            expect(context.imagePath('spinner.gif')).to.eql('iD/img/spinner.gif');
+        });
+    });
+
+    describe('#presets', function() {
+        it('supports custom presets', function() {
             var presetsCollection = {
                 presets: {
                     'mines': {