Convert some element ids to classes to avoid collisions when embedding iD

This commit is contained in:
Quincy Morgan
2020-03-20 13:10:39 -07:00
parent 32600f993f
commit 152d89fa22
16 changed files with 87 additions and 87 deletions
+1 -1
View File
@@ -57,7 +57,7 @@ export function modeSave(context) {
function showConflicts(changeset, conflicts, origChanges) {
var selection = context.container()
.select('#sidebar')
.select('.sidebar')
.append('div')
.attr('class','sidebar-component');
+6 -6
View File
@@ -12,21 +12,21 @@ export function uiAccount(context) {
if (!osm) return;
if (!osm.authenticated()) {
selection.selectAll('#userLink, #logoutLink')
selection.selectAll('.userLink, .logoutLink')
.classed('hide', true);
return;
}
osm.userDetails(function(err, details) {
var userLink = selection.select('#userLink'),
logoutLink = selection.select('#logoutLink');
var userLink = selection.select('.userLink'),
logoutLink = selection.select('.logoutLink');
userLink.html('');
logoutLink.html('');
if (err || !details) return;
selection.selectAll('#userLink, #logoutLink')
selection.selectAll('.userLink, .logoutLink')
.classed('hide', false);
// Link
@@ -63,11 +63,11 @@ export function uiAccount(context) {
return function(selection) {
selection.append('li')
.attr('id', 'logoutLink')
.attr('class', 'logoutLink')
.classed('hide', true);
selection.append('li')
.attr('id', 'userLink')
.attr('class', 'userLink')
.classed('hide', true);
if (osm) {
+1 -1
View File
@@ -181,7 +181,7 @@ export function uiFieldHelp(context, fieldName) {
if (_wrap.empty()) return;
// absolute position relative to the inspector, so it "floats" above the fields
_inspector = d3_select('#sidebar .entity-editor-pane .inspector-body');
_inspector = d3_select('.sidebar .entity-editor-pane .inspector-body');
if (_inspector.empty()) return;
_body = _inspector.selectAll('.field-help-body')
+3 -3
View File
@@ -205,11 +205,11 @@ export function uiFieldRestrictions(field, context) {
// Reflow warning: `utilGetDimensions` calls `getBoundingClientRect`
// Instead of asking the restriction-container for its dimensions,
// we can ask the #sidebar, which can have its dimensions cached.
// we can ask the .sidebar, which can have its dimensions cached.
// width: calc as sidebar - padding
// height: hardcoded (from `80_app.css`)
// var d = utilGetDimensions(selection);
var sdims = utilGetDimensions(d3_select('#sidebar'));
var sdims = utilGetDimensions(d3_select('.sidebar'));
var d = [ sdims[0] - 50, 370 ];
var c = geoVecScale(d, 0.5);
var z = 22;
@@ -407,7 +407,7 @@ export function uiFieldRestrictions(field, context) {
var xPos = -1;
if (minChange) {
xPos = utilGetDimensions(d3_select('#sidebar'))[0];
xPos = utilGetDimensions(d3_select('.sidebar'))[0];
}
if (!minChange || (minChange && Math.abs(xPos - _lastXPos) >= minChange)) {
+13 -9
View File
@@ -17,12 +17,14 @@ export function uiFlash() {
_flashTimer.stop();
}
d3_select('#footer-wrap')
.attr('class', 'footer-hide');
d3_select('#flash-wrap')
.attr('class', 'footer-show');
d3_select('.map-footer-wrap')
.classed('footer-hide', true)
.classed('footer-show', false);
d3_select('.flash-wrap')
.classed('footer-hide', false)
.classed('footer-show', true);
var content = d3_select('#flash-wrap').selectAll('.flash-content')
var content = d3_select('.flash-wrap').selectAll('.flash-content')
.data([0]);
// Enter
@@ -71,10 +73,12 @@ export function uiFlash() {
_flashTimer = d3_timeout(function() {
_flashTimer = null;
d3_select('#footer-wrap')
.attr('class', 'footer-show');
d3_select('#flash-wrap')
.attr('class', 'footer-hide');
d3_select('.map-footer-wrap')
.classed('footer-hide', false)
.classed('footer-show', true);
d3_select('.flash-wrap')
.classed('footer-hide', true)
.classed('footer-show', false);
}, _duration);
return content;
+9 -13
View File
@@ -97,7 +97,7 @@ export function uiInit(context) {
container
.append('div')
.attr('id', 'sidebar')
.attr('class', 'sidebar')
.call(ui.sidebar);
var content = container
@@ -108,10 +108,9 @@ export function uiInit(context) {
// Top toolbar
content
.append('div')
.attr('id', 'bar-wrap')
.attr('class', 'top-toolbar-wrap')
.append('div')
.attr('id', 'bar')
.attr('class', 'fillD')
.attr('class', 'top-toolbar fillD')
.call(uiTopToolbar(context));
content
@@ -180,18 +179,15 @@ export function uiInit(context) {
var footer = about
.append('div')
.attr('id', 'footer')
.attr('class', 'fillD');
.attr('class', 'map-footer fillD');
footer
.append('div')
.attr('id', 'flash-wrap')
.attr('class', 'footer-hide');
.attr('class', 'flash-wrap footer-hide');
var footerWrap = footer
.append('div')
.attr('id', 'footer-wrap')
.attr('class', 'footer-show');
.attr('class', 'map-footer-wrap footer-show');
footerWrap
.append('div')
@@ -428,7 +424,7 @@ export function uiInit(context) {
// This will call `getBoundingClientRect` and trigger reflow,
// but the values will be cached for later use.
var mapDimensions = utilGetDimensions(d3_select('#content'), true);
utilGetDimensions(d3_select('#sidebar'), true);
utilGetDimensions(d3_select('.sidebar'), true);
if (withPan !== undefined) {
map.redrawEnable(false);
@@ -440,8 +436,8 @@ export function uiInit(context) {
ui.photoviewer.onMapResize();
// check if header or footer have overflowed
ui.checkOverflow('#bar');
ui.checkOverflow('#footer');
ui.checkOverflow('.top-toolbar');
ui.checkOverflow('.map-footer');
// Use outdated code so it works on Explorer
var resizeWindowEvent = document.createEvent('Event');
+1 -1
View File
@@ -463,7 +463,7 @@ export function uiIntroPoint(context, reveal) {
});
var iconName = '#iD-icon-' + (textDirection === 'rtl' ? 'redo' : 'undo');
reveal('#bar button.undo-button',
reveal('.top-toolbar button.undo-button',
t('intro.points.undo', { button: icon(iconName, 'pre-text') })
);
+1 -1
View File
@@ -39,7 +39,7 @@ export function uiIntroStartEditing(context, reveal) {
function showSave() {
d3_selectAll('.shaded').remove(); // in case user opened keyboard shortcuts
reveal('#bar button.save',
reveal('.top-toolbar button.save',
t('intro.startediting.save'), {
buttonText: t('intro.ok'),
buttonCallback: function() { showStart(); }
+1 -1
View File
@@ -43,7 +43,7 @@ export function uiSidebar(context) {
var resizer = selection
.append('div')
.attr('id', 'sidebar-resizer');
.attr('class', 'sidebar-resizer');
// Set the initial width constraints
selection
+2 -2
View File
@@ -130,7 +130,7 @@ export function uiToolOldDrawModes(context) {
.placement('bottom')
.html(true)
.title(function(d) { return uiTooltipHtml(d.description, d.key); })
.scrollContainer(d3_select('#bar'))
.scrollContainer(d3_select('.top-toolbar'))
);
buttonsEnter
@@ -146,7 +146,7 @@ export function uiToolOldDrawModes(context) {
// if we are adding/removing the buttons, check if toolbar has overflowed
if (buttons.enter().size() || buttons.exit().size()) {
context.ui().checkOverflow('#bar', true);
context.ui().checkOverflow('.top-toolbar', true);
}
// update
+2 -2
View File
@@ -107,7 +107,7 @@ export function uiToolNotes(context) {
.placement('bottom')
.html(true)
.title(function(d) { return uiTooltipHtml(d.description, d.key); })
.scrollContainer(d3_select('#bar'))
.scrollContainer(d3_select('.top-toolbar'))
);
buttonsEnter
@@ -118,7 +118,7 @@ export function uiToolNotes(context) {
// if we are adding/removing the buttons, check if toolbar has overflowed
if (buttons.enter().size() || buttons.exit().size()) {
context.ui().checkOverflow('#bar', true);
context.ui().checkOverflow('.top-toolbar', true);
}
// update
+1 -1
View File
@@ -80,7 +80,7 @@ export function uiToolSave(context) {
.placement('bottom')
.html(true)
.title(uiTooltipHtml(t('save.no_changes'), key))
.scrollContainer(d3_select('#bar'));
.scrollContainer(d3_select('.top-toolbar'));
button = selection
.append('button')
+1 -1
View File
@@ -22,7 +22,7 @@ export function uiToolSidebarToggle(context) {
.placement('bottom')
.html(true)
.title(uiTooltipHtml(t('sidebar.tooltip'), t('sidebar.key')))
.scrollContainer(d3_select('#bar'))
.scrollContainer(d3_select('.top-toolbar'))
)
.call(svgIcon('#iD-icon-sidebar-' + (textDirection === 'rtl' ? 'right' : 'left')));
};
+1 -1
View File
@@ -46,7 +46,7 @@ export function uiToolUndoRedo(context) {
t(d.id + '.tooltip', {action: d.annotation()}) :
t(d.id + '.nothing'), d.cmd);
})
.scrollContainer(d3_select('#bar'));
.scrollContainer(d3_select('.top-toolbar'));
var buttons = selection.selectAll('button')
.data(commands)