Darker unintrusive flash.. WIP flash operations on keypress

css/app.css

@@ -564,6 +564,17 @@ button.save.has-count .count::before {
     min-width: 768px;
 }
 
+#flash {
+    position: absolute;
+    left: 300px;
+    top: 65px;
+    z-index: 1;
+}
+
+#flash .content {
+    padding: 10px;
+}
+
 /* Header for modals / panes
 ------------------------------------------------------- */
 

modules/behavior/operation.js

@@ -1,5 +1,6 @@
 import * as d3 from 'd3';
 import { d3keybinding } from '../lib/d3.keybinding.js';
+import { uiFlash } from '../ui/index';
 
 
 /* Creates a keybinding behavior for an operation */
@@ -15,6 +16,7 @@ export function behaviorOperation(context) {
                 if (which.available() && !which.disabled() && !context.inIntro()) {
                     which();
                 }
+                uiFlash().text('you did ' + which.title);
             });
             d3.select(document).call(keybinding);
         }

modules/renderer/map.js

@@ -285,9 +285,7 @@ export function rendererMap(context) {
 
         if (ktoz(eventTransform.k * 2 * Math.PI) < minzoom) {
             surface.interrupt();
-            uiFlash(context.container())
-                .select('.content')
-                .text(t('cannot_zoom'));
+            uiFlash().text(t('cannot_zoom'));
             setZoom(context.minEditableZoom(), true);
             queueRedraw();
             dispatch.call('move', this, map);
@@ -569,9 +567,7 @@ export function rendererMap(context) {
 
         if (z2 < minzoom) {
             surface.interrupt();
-            uiFlash(context.container())
-                .select('.content')
-                .text(t('cannot_zoom'));
+            uiFlash().text(t('cannot_zoom'));
             z2 = context.minEditableZoom();
         }
 

modules/ui/flash.js

@@ -1,26 +1,36 @@
+import * as d3 from 'd3';
 import { uiModal } from './modal';
 
+var timeout;
 
-export function uiFlash(selection) {
-    var modalSelection = uiModal(selection);
 
-    modalSelection.select('.modal')
-        .classed('modal-flash', true);
+export function uiFlash() {
+    var content = d3.select('#flash').selectAll('.content')
+        .data([0]);
 
-    modalSelection.select('.content')
-        .classed('modal-section', true)
+    content = content.enter()
         .append('div')
-        .attr('class', 'description');
+        .attr('class', 'content')
+        .merge(content);
 
-    modalSelection.on('click.flash', function() {
-        modalSelection.remove();
-    });
+    if (timeout) {
+        window.clearTimeout(timeout);
+    }
+
+    timeout = window.setTimeout(function() {
+        content
+            .transition()
+            .duration(250)
+            .style('opacity', 0)
+            .style('transform', 'scaleY(.25)')
+            .on('end', function() {
+                content.remove();
+                timeout = null;
+            });
 
-    setTimeout(function() {
-        modalSelection.remove();
         return true;
     }, 1500);
 
 
-    return modalSelection;
+    return content;
 }

modules/ui/init.js

@@ -71,6 +71,11 @@ export function uiInit(context) {
             .attr('id', 'bar')
             .attr('class', 'fillD');
 
+        content
+            .append('div')
+            .attr('id', 'flash')
+            .attr('class', 'fillD');
+
         content
             .append('div')
             .attr('id', 'map')