CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-04-21 19:26:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
css/80_app.css
+37 -37
View File
@@ -443,14 +443,14 @@ button[disabled].action:hover {
/* Toolbar / Persistent UI Elements
------------------------------------------------------- */
#bar-wrap {
.top-toolbar-wrap {
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: 101;
}
#bar {
.top-toolbar {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
@@ -464,16 +464,16 @@ button[disabled].action:hover {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE, Edge */
}
#bar::-webkit-scrollbar {
.top-toolbar::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
#bar .toolbar-item {
.top-toolbar .toolbar-item {
display: flex;
flex: 0 1 auto;
flex-flow: column wrap;
justify-content: center;
}
#bar .toolbar-item .item-content {
.top-toolbar .toolbar-item .item-content {
display: flex;
flex: 0 1 auto;
flex-flow: row nowrap;
@@ -482,31 +482,31 @@ button[disabled].action:hover {
width: auto;
margin: 0 5px;
}
[dir='ltr'] #bar .toolbar-item:last-child .item-content,
[dir='rtl'] #bar .toolbar-item:first-child .item-content {
[dir='ltr'] .top-toolbar .toolbar-item:last-child .item-content,
[dir='rtl'] .top-toolbar .toolbar-item:first-child .item-content {
margin-right: 10px;
}
[dir='ltr'] #bar .toolbar-item:first-child .item-content,
[dir='rtl'] #bar .toolbar-item:last-child .item-content {
[dir='ltr'] .top-toolbar .toolbar-item:first-child .item-content,
[dir='rtl'] .top-toolbar .toolbar-item:last-child .item-content {
margin-left: 10px;
}
#bar .toolbar-item .item-label {
.top-toolbar .toolbar-item .item-label {
text-align: center;
font-size: 11px;
white-space: nowrap;
margin: 1px 2px 2px 2px;
}
#bar .toolbar-item.spacer {
.top-toolbar .toolbar-item.spacer {
width: 100%;
flex-grow: 2;
}
#bar .toolbar-item:first-child {
.top-toolbar .toolbar-item:first-child {
justify-content: flex-start;
}
#bar .toolbar-item:last-child {
.top-toolbar .toolbar-item:last-child {
justify-content: flex-end;
}
#bar .toolbar-item:empty:not(.spacer) {
.top-toolbar .toolbar-item:empty:not(.spacer) {
display: none;
}
button.bar-button {
@@ -587,11 +587,11 @@ button.add-note svg.icon {
}
#bar.narrow .spinner,
#bar.narrow button.bar-button .label {
.top-toolbar.narrow .spinner,
.top-toolbar.narrow button.bar-button .label {
display: none;
}
#bar.narrow button .count {
.top-toolbar.narrow button .count {
border-left-width: 0;
border-right-width: 0;
}
@@ -738,7 +738,7 @@ a.hide-toggle {
/* Sidebar / Inspector
------------------------------------------------------- */
#sidebar {
.sidebar {
position: relative;
float: left;
height: 100%;
@@ -748,13 +748,13 @@ a.hide-toggle {
border: 0px solid #ccc;
border-right-width: 1px;
}
[dir='rtl'] #sidebar {
[dir='rtl'] .sidebar {
float: right;
border-right-width: 0px;
border-left-width: 1px;
}
#sidebar-resizer {
.sidebar-resizer {
position: absolute;
top: 0;
right: -6px;
@@ -762,17 +762,17 @@ a.hide-toggle {
width: 6px;
cursor: col-resize;
}
[dir='rtl'] #sidebar-resizer {
[dir='rtl'] .sidebar-resizer {
right: auto;
left: -6px;
}
#sidebar.collapsed #sidebar-resizer {
.sidebar.collapsed .sidebar-resizer {
/* make target wider to avoid the user accidentally resizing window */
width: 10px;
right: -10px;
}
[dir='rtl'] #sidebar.collapsed #sidebar-resizer {
[dir='rtl'] .sidebar.collapsed .sidebar-resizer {
left: -10px;
}
@@ -849,19 +849,19 @@ a.hide-toggle {
margin-bottom: 150px;
}
#sidebar .search-header .icon {
.sidebar .search-header .icon {
display: block;
position: absolute;
left: 10px;
top: 80px;
pointer-events: none;
}
[dir='rtl'] #sidebar .search-header .icon {
[dir='rtl'] .sidebar .search-header .icon {
left: auto;
right: 10px;
}
#sidebar .search-header input {
.sidebar .search-header input {
position: absolute;
top: 60px;
height: 60px;
@@ -4215,7 +4215,7 @@ img.tile-debug {
margin: 0 3px;
}
#footer {
.map-footer {
pointer-events: all;
display: block;
height: 30px;
@@ -4224,7 +4224,7 @@ img.tile-debug {
/* Footer - Flash messages
------------------------------------------------------- */
#flash-wrap {
.flash-wrap {
display: flex;
flex: 0 0 100%;
flex-flow: row nowrap;
@@ -4279,7 +4279,7 @@ img.tile-debug {
flex: 1 1 auto;
}
#footer-wrap {
.map-footer-wrap {
display: flex;
flex: 0 0 100%;
flex-flow: row nowrap;
@@ -5212,22 +5212,22 @@ svg.mouseclick use.right {
/* dark tooltips for sidebar / panels */
.tooltip.dark.top .popover-arrow,
.map-pane .tooltip.top .popover-arrow,
#sidebar .tooltip.top .popover-arrow {
.sidebar .tooltip.top .popover-arrow {
border-top-color: #000;
}
.tooltip.dark.bottom .popover-arrow,
.map-pane .tooltip.bottom .popover-arrow,
#sidebar .tooltip.bottom .popover-arrow {
.sidebar .tooltip.bottom .popover-arrow {
border-bottom-color: #000;
}
.tooltip.dark.left .popover-arrow,
.map-pane .tooltip.left .popover-arrow,
#sidebar .tooltip.left .popover-arrow {
.sidebar .tooltip.left .popover-arrow {
border-left-color: #000;
}
.tooltip.dark.right .popover-arrow,
.map-pane .tooltip.right .popover-arrow,
#sidebar .tooltip.right .popover-arrow {
.sidebar .tooltip.right .popover-arrow {
border-right-color: #000;
}
.tooltip.dark .popover-inner,
@@ -5236,15 +5236,15 @@ svg.mouseclick use.right {
.map-pane .popover-inner,
.map-pane .tooltip-heading,
.map-pane .keyhint-wrap,
#sidebar .popover-inner,
#sidebar .tooltip-heading,
#sidebar .keyhint-wrap {
.sidebar .popover-inner,
.sidebar .tooltip-heading,
.sidebar .keyhint-wrap {
background: #000;
color: #ccc;
}
.tooltip.dark kbd,
.map-pane .tooltip kbd,
#sidebar .tooltip kbd {
.sidebar .tooltip kbd {
background-color: #666;
border: solid 1px #444;
border-bottom-color: #333;
modules/modes/save.js
+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');
modules/ui/account.js
+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) {
modules/ui/field_help.js
+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')
modules/ui/fields/restrictions.js
+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)) {
modules/ui/flash.js
+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;
modules/ui/init.js
+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');
modules/ui/intro/point.js
+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') })
);
modules/ui/intro/start_editing.js
+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(); }
modules/ui/sidebar.js
+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
modules/ui/tools/modes.js
+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
modules/ui/tools/notes.js
+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
modules/ui/tools/save.js
+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')
modules/ui/tools/sidebar_toggle.js
+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')));
};
modules/ui/tools/undo_redo.js
+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)
test/spec/ui/flash.js
+7 -7
View File
@@ -3,20 +3,20 @@ describe('iD.uiFlash', function () {
beforeEach(function() {
d3.select('body')
.append('div')
.attr('id', 'flash-wrap')
.attr('class', 'flash-wrap')
.append('div')
.attr('id', 'footer-wrap');
.attr('class', 'map-footer-wrap');
});
afterEach(function() {
d3.select('#flash-wrap')
d3.select('.flash-wrap')
.remove();
});
it('flash is shown', function() {
iD.uiFlash().duration(200)();
var flashWrap = d3.selectAll('#flash-wrap');
var footerWrap = d3.selectAll('#footer-wrap');
var flashWrap = d3.selectAll('.flash-wrap');
var footerWrap = d3.selectAll('.map-footer-wrap');
expect(flashWrap.classed('footer-show')).to.be.ok;
expect(footerWrap.classed('footer-hide')).to.be.ok;
});
@@ -25,8 +25,8 @@ describe('iD.uiFlash', function () {
iD.uiFlash().duration(200)();
window.setTimeout(function() {
d3.timerFlush();
var flashWrap = d3.selectAll('#flash-wrap');
var footerWrap = d3.selectAll('#footer-wrap');
var flashWrap = d3.selectAll('.flash-wrap');
var footerWrap = d3.selectAll('.map-footer-wrap');
expect(flashWrap.classed('footer-hide')).to.be.ok;
expect(footerWrap.classed('footer-show')).to.be.ok;
done();