Instantiate uiFlash only once as a property of the UI and remove global selection (re: #7445)

modules/behavior/operation.js

@@ -1,5 +1,4 @@
 import { event as d3_event } from 'd3-selection';
-import { uiFlash } from '../ui/flash';
 
 
 /* Creates a keybinding behavior for an operation */
@@ -15,7 +14,7 @@ export function behaviorOperation(context) {
         var flash;
 
         if (disabled) {
-            flash = uiFlash()
+            flash = context.ui().flash
                 .duration(4000)
                 .iconName('#iD-operation-' + _operation.id)
                 .iconClass('operation disabled')
@@ -24,7 +23,7 @@ export function behaviorOperation(context) {
             flash();
 
         } else {
-            flash = uiFlash()
+            flash = context.ui().flash
                 .duration(2000)
                 .iconName('#iD-operation-' + _operation.id)
                 .iconClass('operation')

modules/modes/drag_node.js

@@ -25,7 +25,6 @@ import {
 import { modeBrowse } from './browse';
 import { modeSelect } from './select';
 import { osmJoinWays, osmNode } from '../osm';
-import { uiFlash } from '../ui/flash';
 import { utilArrayIntersection, utilKeybinding } from '../util';
 
 
@@ -136,7 +135,7 @@ export function modeDragNode(context) {
 
         if (_isCancelled) {
             if (hasHidden) {
-                uiFlash()
+                context.ui().flash
                     .duration(4000)
                     .text(t('modes.drag_node.connected_to_hidden'))();
             }
@@ -235,7 +234,7 @@ export function modeDragNode(context) {
         var nope = context.surface().classed('nope');
         if (isInvalid === 'relation' || isInvalid === 'restriction') {
             if (!nope) {   // about to nope - show hint
-                uiFlash()
+                context.ui().flash
                     .duration(4000)
                     .text(t('operations.connect.' + isInvalid,
                         { relation: context.presets().item('type/restriction').name() }
@@ -243,12 +242,12 @@ export function modeDragNode(context) {
             }
         } else if (isInvalid) {
             var errorID = isInvalid === 'line' ? 'lines' : 'areas';
-            uiFlash()
+            context.ui().flash
                 .duration(3000)
                 .text(t('self_intersection.error.' + errorID))();
         } else {
             if (nope) {   // about to un-nope, remove hint
-                uiFlash()
+                context.ui().flash
                     .duration(1)
                     .text('')();
             }

modules/modes/draw_area.js

@@ -1,6 +1,5 @@
 import { t } from '../util/locale';
 import { behaviorDrawWay } from '../behavior/draw_way';
-import { uiFlash } from '../ui/flash';
 
 
 export function modeDrawArea(context, wayID, startGraph, button) {
@@ -19,7 +18,7 @@ export function modeDrawArea(context, wayID, startGraph, button) {
         behavior = behaviorDrawWay(context, wayID, undefined, mode, startGraph)
             .tail(t('modes.draw_area.tail'))
             .on('rejectedSelfIntersection.modeDrawArea', function() {
-                uiFlash()
+                context.ui().flash
                     .text(t('self_intersection.error.areas'))();
             });
 

modules/modes/draw_line.js

@@ -1,6 +1,5 @@
 import { t } from '../util/locale';
 import { behaviorDrawWay } from '../behavior/draw_way';
-import { uiFlash } from '../ui/flash';
 
 
 export function modeDrawLine(context, wayID, startGraph, button, affix, continuing) {
@@ -23,7 +22,7 @@ export function modeDrawLine(context, wayID, startGraph, button, affix, continui
         behavior = behaviorDrawWay(context, wayID, index, mode, startGraph)
             .tail(t('modes.draw_line.tail'))
             .on('rejectedSelfIntersection.modeDrawLine', function() {
-                uiFlash()
+                context.ui().flash
                     .text(t('self_intersection.error.lines'))();
             });
 

modules/ui/flash.js

@@ -1,30 +1,27 @@
-import { select as d3_select } from 'd3-selection';
 import { timeout as d3_timeout } from 'd3-timer';
 
-var _flashTimer;
+export function uiFlash(context) {
+    var _flashTimer;
 
-
-export function uiFlash() {
     var _duration = 2000;
     var _iconName = '#iD-icon-no';
     var _iconClass = 'disabled';
     var _text = '';
-    var _textClass;
-
+    var _textClass;    
 
     function flash() {
         if (_flashTimer) {
             _flashTimer.stop();
         }
 
-        d3_select('.main-footer-wrap')
+        context.container().select('.main-footer-wrap')
             .classed('footer-hide', true)
             .classed('footer-show', false);
-        d3_select('.flash-wrap')
+        context.container().select('.flash-wrap')
             .classed('footer-hide', false)
             .classed('footer-show', true);
 
-        var content = d3_select('.flash-wrap').selectAll('.flash-content')
+        var content = context.container().select('.flash-wrap').selectAll('.flash-content')
             .data([0]);
 
         // Enter
@@ -73,10 +70,10 @@ export function uiFlash() {
 
         _flashTimer = d3_timeout(function() {
             _flashTimer = null;
-            d3_select('.main-footer-wrap')
+            context.container().select('.main-footer-wrap')
                 .classed('footer-hide', false)
                 .classed('footer-show', true);
-            d3_select('.flash-wrap')
+            context.container().select('.flash-wrap')
                 .classed('footer-hide', true)
                 .classed('footer-show', false);
         }, _duration);

modules/ui/geolocate.js

@@ -5,7 +5,6 @@ import { uiTooltip } from './tooltip';
 import { geoExtent } from '../geo';
 import { modeBrowse } from '../modes/browse';
 import { svgIcon } from '../svg/icon';
-import { uiFlash } from './flash';
 import { uiLoading } from './loading';
 
 export function uiGeolocate(context) {
@@ -61,7 +60,7 @@ export function uiGeolocate(context) {
             // use the position from a previous call if we have one
             zoomTo();
         } else {
-            uiFlash()
+            context.ui().flash
                 .text(t('geolocate.location_unavailable'))
                 .iconName('#iD-icon-geolocate')();
         }

modules/ui/init.js

@@ -84,8 +84,7 @@ export function uiInit(context) {
 
         map
             .on('hitMinZoom.ui', function() {
-                uiFlash()
-                    .text(t('cannot_zoom'))();
+                ui.flash.text(t('cannot_zoom'))();
             });
 
         container
@@ -448,6 +447,8 @@ export function uiInit(context) {
             });
     };
 
+    ui.flash = uiFlash(context);
+
     ui.sidebar = uiSidebar(context);
 
     ui.photoviewer = uiPhotoviewer(context);

test/spec/ui/flash.js

@@ -1,6 +1,8 @@
 describe('iD.uiFlash', function () {
+    var context;
 
     beforeEach(function() {
+        context = iD.coreContext().init();
         d3.select('body')
             .append('div')
             .attr('class', 'flash-wrap')
@@ -14,7 +16,7 @@ describe('iD.uiFlash', function () {
     });
 
     it('flash is shown', function() {
-        iD.uiFlash().duration(200)();
+        iD.uiFlash(context).duration(200)();
         var flashWrap = d3.selectAll('.flash-wrap');
         var footerWrap = d3.selectAll('.main-footer-wrap');
         expect(flashWrap.classed('footer-show')).to.be.ok;
@@ -22,7 +24,7 @@ describe('iD.uiFlash', function () {
     });
 
     it('flash goes away', function(done) {
-        iD.uiFlash().duration(200)();
+        iD.uiFlash(context).duration(200)();
         window.setTimeout(function() {
             d3.timerFlush();
             var flashWrap = d3.selectAll('.flash-wrap');