mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 01:02:58 +00:00
f247bd1e66
Previously it was up to the caller to draw whatever they want into the footer flash. With this change, uiFlash creates an icon and a text, so the caller doesn't need to do as much work.
116 lines
2.7 KiB
JavaScript
116 lines
2.7 KiB
JavaScript
import { select as d3_select } from 'd3-selection';
|
|
import { timeout as d3_timeout } from 'd3-timer';
|
|
|
|
var _flashTimer;
|
|
|
|
|
|
export function uiFlash() {
|
|
var _duration = 2000;
|
|
var _iconName = '#icon-no';
|
|
var _iconClass = 'disabled';
|
|
var _text = '';
|
|
var _textClass;
|
|
|
|
|
|
function flash() {
|
|
if (_flashTimer) {
|
|
_flashTimer.stop();
|
|
}
|
|
|
|
d3_select('#footer-wrap')
|
|
.attr('class', 'footer-hide');
|
|
d3_select('#flash-wrap')
|
|
.attr('class', 'footer-show');
|
|
|
|
var content = d3_select('#flash-wrap').selectAll('.flash-content')
|
|
.data([0]);
|
|
|
|
// Enter
|
|
var contentEnter = content.enter()
|
|
.append('div')
|
|
.attr('class', 'flash-content');
|
|
|
|
var iconEnter = contentEnter
|
|
.append('svg')
|
|
.attr('class', 'flash-icon')
|
|
.append('g')
|
|
.attr('transform', 'translate(10,10)');
|
|
|
|
iconEnter
|
|
.append('circle')
|
|
.attr('r', 9);
|
|
|
|
iconEnter
|
|
.append('use')
|
|
.attr('transform', 'translate(-7,-7)')
|
|
.attr('width', '14')
|
|
.attr('height', '14');
|
|
|
|
contentEnter
|
|
.append('div')
|
|
.attr('class', 'flash-text');
|
|
|
|
|
|
// Update
|
|
content = content
|
|
.merge(contentEnter);
|
|
|
|
content
|
|
.selectAll('.flash-icon')
|
|
.attr('class', 'flash-icon ' + (_iconClass || ''));
|
|
|
|
content
|
|
.selectAll('.flash-icon use')
|
|
.attr('xlink:href', _iconName);
|
|
|
|
content
|
|
.selectAll('.flash-text')
|
|
.attr('class', 'flash-text ' + (_textClass || ''))
|
|
.text(_text);
|
|
|
|
|
|
_flashTimer = d3_timeout(function() {
|
|
_flashTimer = null;
|
|
d3_select('#footer-wrap')
|
|
.attr('class', 'footer-show');
|
|
d3_select('#flash-wrap')
|
|
.attr('class', 'footer-hide');
|
|
}, _duration);
|
|
|
|
return content;
|
|
}
|
|
|
|
|
|
flash.duration = function(_) {
|
|
if (!arguments.length) return _duration;
|
|
_duration = _;
|
|
return flash;
|
|
};
|
|
|
|
flash.text = function(_) {
|
|
if (!arguments.length) return _text;
|
|
_text = _;
|
|
return flash;
|
|
};
|
|
|
|
flash.textClass = function(_) {
|
|
if (!arguments.length) return _textClass;
|
|
_textClass = _;
|
|
return flash;
|
|
};
|
|
|
|
flash.iconName = function(_) {
|
|
if (!arguments.length) return _iconName;
|
|
_iconName = _;
|
|
return flash;
|
|
};
|
|
|
|
flash.iconClass = function(_) {
|
|
if (!arguments.length) return _iconClass;
|
|
_iconClass = _;
|
|
return flash;
|
|
};
|
|
|
|
return flash;
|
|
}
|