CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-16 05:49:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

Use d3-style API for section contents

Browse Source
This commit is contained in:
Quincy Morgan
2020-02-20 13:47:11 -08:00
parent 4fe9057eb7
commit 1f4fe57d8b
15 changed files with 101 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/ui/panes/background.js
+8 -8
View File
@@ -4,10 +4,10 @@ import { t } from '../../util/locale';
import { uiCmd } from '../cmd';
import { uiPane } from '../pane';
import { uiBackgroundDisplayOptions } from '../sections/background_display_options';
import { uiBackgroundList } from '../sections/background_list';
import { uiBackgroundOffset } from '../sections/background_offset';
import { uiOverlayList } from '../sections/overlay_list';
import { uiSectionBackgroundDisplayOptions } from '../sections/background_display_options';
import { uiSectionBackgroundList } from '../sections/background_list';
import { uiSectionBackgroundOffset } from '../sections/background_offset';
import { uiSectionOverlayList } from '../sections/overlay_list';
export function uiPaneBackground(context) {
@@ -34,10 +34,10 @@ export function uiPaneBackground(context) {
.description(t('background.description'))
.iconName('iD-icon-layers')
.sections([
uiBackgroundList(context),
uiOverlayList(context),
uiBackgroundDisplayOptions(context),
uiBackgroundOffset(context)
uiSectionBackgroundList(context),
uiSectionOverlayList(context),
uiSectionBackgroundDisplayOptions(context),
uiSectionBackgroundOffset(context)
]);
return backgroundPane;
modules/ui/section.js
+31 -17
View File
@@ -13,6 +13,8 @@ export function uiSection(id, context) {
var _title;
var _expandedByDefault = utilFunctor(true);
var _shouldDisplay;
var _content;
var _disclosureContent;
var _containerSelection = d3_select(null);
@@ -38,6 +40,18 @@ export function uiSection(id, context) {
return section;
};
section.content = function(val) {
if (!arguments.length) return _content;
_content = val;
return section;
};
section.disclosureContent = function(val) {
if (!arguments.length) return _disclosureContent;
_disclosureContent = val;
return section;
};
// may be called multiple times
section.render = function(selection) {
@@ -57,10 +71,16 @@ export function uiSection(id, context) {
.call(renderContent);
};
section.containerSelection = function() {
section.reRender = function() {
_containerSelection
.call(renderContent);
};
section.selection = function() {
return _containerSelection;
};
// may be called multiple times
function renderContent(selection) {
if (_shouldDisplay) {
var shouldDisplay = _shouldDisplay();
@@ -70,30 +90,24 @@ export function uiSection(id, context) {
return;
}
}
section.renderContent(selection);
}
// may be called multiple times
section.renderContent = function(containerSelection) {
if (section.renderDisclosureContent) {
if (_disclosureContent) {
if (!_disclosure) {
_disclosure = uiDisclosure(context, id.replace(/-/g, '_'), _expandedByDefault())
.title(_title || '')
.content(section.renderDisclosureContent);
.content(_disclosureContent);
}
containerSelection
selection
.call(_disclosure);
return;
}
};
section.rerenderContent = function() {
_containerSelection
.call(renderContent);
};
// override to enable disclosure
section.renderDisclosureContent = undefined;
if (_content) {
selection
.call(_content);
}
}
return section;
}
modules/ui/sections/background_display_options.js
+6 -9
View File
@@ -9,10 +9,11 @@ import { uiSection } from '../section';
import { utilDetect } from '../../util/detect';
export function uiBackgroundDisplayOptions(context) {
export function uiSectionBackgroundDisplayOptions(context) {
var section = uiSection('background-display-options', context)
.title(t('background.display_options'));
.title(t('background.display_options'))
.disclosureContent(renderDisclosureContent);
var _detected = utilDetect();
var _storedOpacity = context.storage('background-opacity');
@@ -30,12 +31,10 @@ export function uiBackgroundDisplayOptions(context) {
sharpness: 1
};
function clamp(x, min, max) {
return Math.max(min, Math.min(x, max));
}
function updateValue(d, val) {
if (!val && d3_event && d3_event.target) {
val = d3_event.target.value;
@@ -50,11 +49,10 @@ export function uiBackgroundDisplayOptions(context) {
context.storage('background-opacity', val);
}
section.rerenderContent();
section.reRender();
}
section.renderDisclosureContent = function(selection) {
function renderDisclosureContent(selection) {
var container = selection.selectAll('.display-options-container')
.data([0]);
@@ -126,8 +124,7 @@ export function uiBackgroundDisplayOptions(context) {
if (containerEnter.size() && _options.brightness !== 1) {
context.background().brightness(_options.brightness);
}
};
}
return section;
}
modules/ui/sections/background_list.js
+6 -5
View File
@@ -14,7 +14,7 @@ import { uiMapInMap } from '../map_in_map';
import { uiSection } from '../section';
import { uiTooltipHtml } from '../tooltipHtml';
export function uiBackgroundList(context) {
export function uiSectionBackgroundList(context) {
var _backgroundList = d3_select(null);
@@ -24,13 +24,14 @@ export function uiBackgroundList(context) {
.on('change', customChanged);
var section = uiSection('background-list', context)
.title(t('background.backgrounds'));
.title(t('background.backgrounds'))
.disclosureContent(renderDisclosureContent);
function previousBackgroundID() {
return context.storage('background-last-used-toggle');
}
section.renderDisclosureContent = function(selection) {
function renderDisclosureContent(selection) {
// the background list
var container = selection.selectAll('.layer-background-list')
@@ -111,7 +112,7 @@ export function uiBackgroundList(context) {
_backgroundList
.call(drawListItems, 'radio', chooseBackground, function(d) { return !d.isHidden() && !d.overlay; });
};
}
function setTooltips(selection) {
selection.each(function(d, i, nodes) {
@@ -260,7 +261,7 @@ export function uiBackgroundList(context) {
.on('move.background_list',
_debounce(function() {
// layers in-view may have changed due to map move
window.requestIdleCallback(section.rerenderContent);
window.requestIdleCallback(section.reRender);
}, 1000)
);
modules/ui/sections/background_offset.js
+4 -3
View File
@@ -10,10 +10,11 @@ import { svgIcon } from '../../svg/icon';
import { uiSection } from '../section';
export function uiBackgroundOffset(context) {
export function uiSectionBackgroundOffset(context) {
var section = uiSection('background-offset', context)
.title(t('background.fix_misalignment'))
.disclosureContent(renderDisclosureContent)
.expandedByDefault(false);
var _directions = [
@@ -134,7 +135,7 @@ export function uiBackgroundOffset(context) {
}
section.renderDisclosureContent = function(selection) {
function renderDisclosureContent(selection) {
var container = selection.selectAll('.nudge-container')
.data([0]);
@@ -182,7 +183,7 @@ export function uiBackgroundOffset(context) {
.call(svgIcon('#iD-icon-' + (textDirection === 'rtl' ? 'redo' : 'undo')));
updateValue();
};
}
context.background()
.on('change.backgroundOffset-update', updateValue);
modules/ui/sections/data_layers.js
+6 -5
View File
@@ -22,9 +22,10 @@ export function uiSectionDataLayers(context) {
var layers = context.layers();
var section = uiSection('data-layers', context)
.title(t('map_data.data_layers'));
.title(t('map_data.data_layers'))
.disclosureContent(renderDisclosureContent);
section.renderDisclosureContent = function(selection) {
function renderDisclosureContent(selection) {
var container = selection.selectAll('.data-layer-container')
.data([0]);
@@ -36,7 +37,7 @@ export function uiSectionDataLayers(context) {
.call(drawQAItems)
.call(drawCustomDataItems)
.call(drawVectorItems); // Beta - Detroit mapping challenge
};
}
function showsLayer(which) {
var layer = layers.layer(which);
@@ -377,13 +378,13 @@ export function uiSectionDataLayers(context) {
}
}
context.layers().on('change.uiSectionDataLayers', section.rerenderContent);
context.layers().on('change.uiSectionDataLayers', section.reRender);
context.map()
.on('move.uiSectionDataLayers',
_debounce(function() {
// Detroit layers may have moved in or out of view
window.requestIdleCallback(section.rerenderContent);
window.requestIdleCallback(section.reRender);
}, 1000)
);
modules/ui/sections/map_features.js
+4 -3
View File
@@ -9,9 +9,10 @@ export function uiSectionMapFeatures(context) {
var section = uiSection('map-features', context)
.title(t('map_data.map_features'))
.disclosureContent(renderDisclosureContent)
.expandedByDefault(false);
section.renderDisclosureContent = function(selection) {
function renderDisclosureContent(selection) {
var container = selection.selectAll('.layer-feature-list-container')
.data([0]);
@@ -52,7 +53,7 @@ export function uiSectionMapFeatures(context) {
container.selectAll('.layer-feature-list')
.call(drawListItems, _features, 'checkbox', 'feature', clickFeature, showsFeature);
};
}
function drawListItems(selection, data, type, name, change, active) {
var items = selection.selectAll('li')
@@ -121,7 +122,7 @@ export function uiSectionMapFeatures(context) {
// add listeners
context.features()
.on('change.map_features', section.rerenderContent);
.on('change.map_features', section.reRender);
return section;
}
modules/ui/sections/map_style_options.js
+4 -3
View File
@@ -11,9 +11,10 @@ export function uiSectionMapStyleOptions(context) {
var section = uiSection('fill-area', context)
.title(t('map_data.style_options'))
.disclosureContent(renderDisclosureContent)
.expandedByDefault(false);
section.renderDisclosureContent = function(selection) {
function renderDisclosureContent(selection) {
var container = selection.selectAll('.layer-fill-list')
.data([0]);
@@ -33,7 +34,7 @@ export function uiSectionMapStyleOptions(context) {
.call(drawListItems, ['highlight_edits'], 'checkbox', 'visual_diff', toggleHighlightEdited, function() {
return context.surface().classed('highlight-edited');
});
};
}
function drawListItems(selection, data, type, name, change, active) {
var items = selection.selectAll('li')
@@ -95,7 +96,7 @@ export function uiSectionMapStyleOptions(context) {
}
context.map()
.on('changeHighlighting.ui_style, changeAreaFill.ui_style', section.rerenderContent);
.on('changeHighlighting.ui_style, changeAreaFill.ui_style', section.reRender);
return section;
}
modules/ui/sections/overlay_list.js
+6 -5
View File
@@ -9,10 +9,11 @@ import { t } from '../../util/locale';
import { tooltip } from '../../util/tooltip';
import { uiSection } from '../section';
export function uiOverlayList(context) {
export function uiSectionOverlayList(context) {
var section = uiSection('overlay-list', context)
.title(t('background.overlays'));
.title(t('background.overlays'))
.disclosureContent(renderDisclosureContent);
var _overlayList = d3_select(null);
@@ -97,7 +98,7 @@ export function uiOverlayList(context) {
}
}
section.renderDisclosureContent = function(selection) {
function renderDisclosureContent(selection) {
var container = selection.selectAll('.layer-overlay-list')
.data([0]);
@@ -110,13 +111,13 @@ export function uiOverlayList(context) {
_overlayList
.call(drawListItems, 'checkbox', chooseOverlay, function(d) { return !d.isHidden() && d.overlay; });
};
}
context.map()
.on('move.overlay_list',
_debounce(function() {
// layers in-view may have changed due to map move
window.requestIdleCallback(section.rerenderContent);
window.requestIdleCallback(section.reRender);
}, 1000)
);
modules/ui/sections/photo_overlays.js
+5 -4
View File
@@ -13,9 +13,10 @@ export function uiSectionPhotoOverlays(context) {
var section = uiSection('photo-overlays', context)
.title(t('photo_overlays.title'))
.disclosureContent(renderDisclosureContent)
.expandedByDefault(false);
section.renderDisclosureContent = function(selection) {
function renderDisclosureContent(selection) {
var container = selection.selectAll('.photo-overlay-container')
.data([0]);
@@ -25,7 +26,7 @@ export function uiSectionPhotoOverlays(context) {
.merge(container)
.call(drawPhotoItems)
.call(drawPhotoTypeItems);
};
}
function drawPhotoItems(selection) {
var photoKeys = context.photos().overlayLayerIDs();
@@ -194,8 +195,8 @@ export function uiSectionPhotoOverlays(context) {
}
}
context.layers().on('change.uiSectionPhotoOverlays', section.rerenderContent);
context.photos().on('change.uiSectionPhotoOverlays', section.rerenderContent);
context.layers().on('change.uiSectionPhotoOverlays', section.reRender);
context.photos().on('change.uiSectionPhotoOverlays', section.reRender);
return section;
}
modules/ui/sections/privacy.js
+4 -3
View File
@@ -10,11 +10,12 @@ import { uiSection } from '../section';
export function uiSectionPrivacy(context) {
let section = uiSection('preferences-third-party', context)
.title(t('preferences.privacy.title'));
.title(t('preferences.privacy.title'))
.disclosureContent(renderDisclosureContent);
let _showThirdPartyIcons = context.storage('preferences.privacy.thirdpartyicons') || 'true';
section.renderDisclosureContent = function(selection) {
function renderDisclosureContent(selection) {
// enter
let privacyOptionsListEnter = selection.selectAll('.privacy-options-list')
.data([0])
@@ -68,7 +69,7 @@ export function uiSectionPrivacy(context) {
.select('input')
.property('checked', (_showThirdPartyIcons === 'true'));
}
};
}
return section;
}
modules/ui/sections/validation_issues.js
+5 -4
View File
@@ -20,6 +20,7 @@ export function uiSectionValidationIssues(id, severity, context) {
var issueCountText = _issues.length > 1000 ? '1000+' : String(_issues.length);
return t('issues.' + severity + 's.list_title', { count: issueCountText });
})
.disclosureContent(renderDisclosureContent)
.shouldDisplay(function() {
return _issues && _issues.length;
});
@@ -36,7 +37,7 @@ export function uiSectionValidationIssues(id, severity, context) {
_issues = context.validator().getIssuesBySeverity(getOptions())[severity];
}
section.renderDisclosureContent = function(selection) {
function renderDisclosureContent(selection) {
var center = context.map().center();
var graph = context.graph();
@@ -58,7 +59,7 @@ export function uiSectionValidationIssues(id, severity, context) {
selection
.call(drawIssuesList, issues);
};
}
function drawIssuesList(selection, issues) {
var list = selection.selectAll('.issues-list')
@@ -209,7 +210,7 @@ export function uiSectionValidationIssues(id, severity, context) {
context.validator().on('validated.uiSectionValidationIssues' + id, function() {
window.requestIdleCallback(function() {
reloadIssues();
section.rerenderContent();
section.reRender();
});
});
@@ -221,7 +222,7 @@ export function uiSectionValidationIssues(id, severity, context) {
reloadIssues();
}
// always reload list to re-sort-by-distance
section.rerenderContent();
section.reRender();
});
}, 1000)
);
modules/ui/sections/validation_options.js
+4 -3
View File
@@ -7,9 +7,10 @@ import { uiSection } from '../section';
export function uiSectionValidationOptions(context) {
var section = uiSection('issues-options', context);
var section = uiSection('issues-options', context)
.content(renderContent);
section.renderContent = function(selection) {
function renderContent(selection) {
var container = selection.selectAll('.issues-options-container')
.data([0]);
@@ -54,7 +55,7 @@ export function uiSectionValidationOptions(context) {
valuesEnter
.append('span')
.text(function(d) { return t('issues.options.' + d.key + '.' + d.value); });
};
}
function getOptions() {
return {
modules/ui/sections/validation_rules.js
+3 -2
View File
@@ -15,9 +15,10 @@ export function uiSectionValidationRules(context) {
var DEFAULTSQUARE = 5; // see also unsquare_way.js
var section = uiSection('issues-rules', context)
.disclosureContent(renderDisclosureContent)
.title(t('issues.rules.title'));
section.renderDisclosureContent = function(selection) {
function renderDisclosureContent(selection) {
var container = selection.selectAll('.issues-rulelist-container')
.data([0]);
@@ -61,7 +62,7 @@ export function uiSectionValidationRules(context) {
container.selectAll('.issue-rules-list')
.call(drawListItems, ruleKeys, 'checkbox', 'rule', toggleRule, isRuleEnabled);
};
}
function drawListItems(selection, data, type, name, change, active) {
var items = selection.selectAll('li')
modules/ui/sections/validation_status.js
+5 -4
View File
@@ -7,6 +7,7 @@ import { uiSection } from '../section';
export function uiSectionValidationStatus(context) {
var section = uiSection('issues-status', context)
.content(renderContent)
.shouldDisplay(function() {
var issues = context.validator().getIssues(getOptions());
return issues.length === 0;
@@ -19,7 +20,7 @@ export function uiSectionValidationStatus(context) {
};
}
section.renderContent = function(selection) {
function renderContent(selection) {
var box = selection.selectAll('.box')
.data([0]);
@@ -48,7 +49,7 @@ export function uiSectionValidationStatus(context) {
renderIgnoredIssuesReset(selection);
setNoIssuesText(selection);
};
}
function renderIgnoredIssuesReset(selection) {
@@ -161,12 +162,12 @@ export function uiSectionValidationStatus(context) {
}
context.validator().on('validated.uiSectionValidationStatus', function() {
window.requestIdleCallback(section.rerenderContent);
window.requestIdleCallback(section.reRender);
});
context.map().on('move.uiSectionValidationStatus',
_debounce(function() {
window.requestIdleCallback(section.rerenderContent);
window.requestIdleCallback(section.reRender);
}, 1000)
);