From ba3f82314168f5d95c2b2162cc1be9d1e45cf70a Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Tue, 15 Aug 2017 01:50:52 -0400 Subject: [PATCH] Split out commitWarnings and commitChanges sections into smaller modules --- modules/ui/commit.js | 160 ++-------------------------------- modules/ui/commit_changes.js | 116 ++++++++++++++++++++++++ modules/ui/commit_warnings.js | 95 ++++++++++++++++++++ modules/ui/index.js | 2 + 4 files changed, 222 insertions(+), 151 deletions(-) create mode 100644 modules/ui/commit_changes.js create mode 100644 modules/ui/commit_warnings.js diff --git a/modules/ui/commit.js b/modules/ui/commit.js index 7e57519e6..db773a2bb 100644 --- a/modules/ui/commit.js +++ b/modules/ui/commit.js @@ -2,18 +2,12 @@ import * as d3 from 'd3'; import _ from 'lodash'; import { t } from '../util/locale'; import { osmChangeset } from '../osm'; -import { modeSelect } from '../modes'; -import { svgIcon } from '../svg'; -import { tooltip } from '../util/tooltip'; import { uiChangesetEditor } from './changeset_editor'; +import { uiCommitChanges } from './commit_changes'; +import { uiCommitWarnings } from './commit_warnings'; import { uiRawTagEditor } from './raw_tag_editor'; import { utilDetect } from '../util/detect'; -import { - utilDisplayName, - utilDisplayType, - utilEntityOrMemberSelector, - utilRebind -} from '../util'; +import { utilRebind } from '../util'; var changeset; @@ -28,6 +22,8 @@ export function uiCommit(context) { .on('change', changeTags); var rawTagEditor = uiRawTagEditor(context) .on('change', changeTags); + var commitChanges = uiCommitChanges(context); + var commitWarnings = uiCommitWarnings(context); function commit(selection) { @@ -36,9 +32,7 @@ export function uiCommit(context) { var osm = context.connection(); if (!osm) return; - var changes = context.history().changes(), - summary = context.history().difference().summary(), - comment = context.storage('comment') || '', + var comment = context.storage('comment') || '', commentDate = +context.storage('commentDate') || 0, currDate = Date.now(), cutoff = 2 * 86400 * 1000; // 2 days @@ -99,54 +93,7 @@ export function uiCommit(context) { // Warnings - var warnings = context.history().validate(changes); - var warningSection = body.selectAll('div.warning-section') - .data(warnings.length ? [0] : []); - - warningSection.exit() - .remove(); - - var warningEnter = warningSection.enter() - .append('div') - .attr('class', 'modal-section warning-section fillL2'); - - warningEnter - .append('h3') - .text(t('commit.warnings')); - - warningEnter - .append('ul') - .attr('class', 'changeset-list'); - - warningSection = warningEnter - .merge(warningSection); - - - var warningItems = warningSection.select('ul').selectAll('li') - .data(warnings); - - warningItems.exit() - .remove(); - - warningItems = warningItems.enter() - .append('li') - .on('mouseover', mouseover) - .on('mouseout', mouseout) - .on('click', warningClick) - .merge(warningItems); - - warningItems - .call(svgIcon('#icon-alert', 'pre-text')); - - warningItems - .append('strong') - .text(function(d) { return d.message; }); - - warningItems.filter(function(d) { return d.tooltip; }) - .call(tooltip() - .title(function(d) { return d.tooltip; }) - .placement('top') - ); + body.call(commitWarnings); // Upload Explanation @@ -274,95 +221,8 @@ export function uiCommit(context) { ); -// TODO check this below (maybe refactor to own module)... - - // Changes - var changeSection = body.selectAll('.modal-section.commit-section') - .data([0]); - - var changeEnter = changeSection.enter() - .append('div') - .attr('class', 'commit-section modal-section fillL2'); - - changeEnter - .append('h3') - .text(t('commit.changes', { count: summary.length })); - - var li = changeEnter - .append('ul') - .attr('class', 'changeset-list') - .selectAll('li') - .data(summary); - - li = li.enter() - .append('li') - .on('mouseover', mouseover) - .on('mouseout', mouseout) - .on('click', zoomToEntity) - .merge(li); - - li.each(function(d) { - d3.select(this) - .call(svgIcon('#icon-' + d.entity.geometry(d.graph), 'pre-text ' + d.changeType)); - }); - - li.append('span') - .attr('class', 'change-type') - .text(function(d) { return t('commit.' + d.changeType) + ' '; }); - - li.append('strong') - .attr('class', 'entity-type') - .text(function(d) { - var matched = context.presets().match(d.entity, d.graph); - return (matched && matched.name()) || utilDisplayType(d.entity.id); - }); - - li.append('span') - .attr('class', 'entity-name') - .text(function(d) { - var name = utilDisplayName(d.entity) || '', - string = ''; - if (name !== '') string += ':'; - return string += ' ' + name; - }); - - li.style('opacity', 0) - .transition() - .style('opacity', 1); - - - function mouseover(d) { - if (d.entity) { - context.surface().selectAll( - utilEntityOrMemberSelector([d.entity.id], context.graph()) - ).classed('hover', true); - } - } - - - function mouseout() { - context.surface().selectAll('.hover') - .classed('hover', false); - } - - - function warningClick(d) { - if (d.entity) { - context.map().zoomTo(d.entity); - context.enter(modeSelect(context, [d.entity.id])); - } - } - - - function zoomToEntity(change) { - var entity = change.entity; - if (change.changeType !== 'deleted' && - context.graph().entity(entity.id).geometry(context.graph()) !== 'vertex') { - context.map().zoomTo(entity); - context.surface().selectAll(utilEntityOrMemberSelector([entity.id], context.graph())) - .classed('hover', true); - } - } + // Change summary + body.call(commitChanges); function toggleRequestReview() { @@ -378,7 +238,6 @@ export function uiCommit(context) { .tags(_.clone(changeset.tags)) ); } - } @@ -433,7 +292,6 @@ export function uiCommit(context) { } - commit.reset = function() { changeset = null; }; diff --git a/modules/ui/commit_changes.js b/modules/ui/commit_changes.js new file mode 100644 index 000000000..e47fd81b2 --- /dev/null +++ b/modules/ui/commit_changes.js @@ -0,0 +1,116 @@ +import * as d3 from 'd3'; +import { t } from '../util/locale'; +import { svgIcon } from '../svg'; +import { + utilDisplayName, + utilDisplayType, + utilEntityOrMemberSelector +} from '../util'; + + +export function uiCommitChanges(context) { + + function commitChanges(selection) { + + var summary = context.history().difference().summary(); + + var container = selection.selectAll('.modal-section.commit-section') + .data([0]); + + var containerEnter = container.enter() + .append('div') + .attr('class', 'commit-section modal-section fillL2'); + + containerEnter + .append('h3') + .text(t('commit.changes', { count: summary.length })); + + containerEnter + .append('ul') + .attr('class', 'changeset-list'); + + container = containerEnter + .merge(container); + + + var items = container.select('ul').selectAll('li') + .data(summary); + + var itemsEnter = items.enter() + .append('li') + .attr('class', 'change-item'); + + itemsEnter + .each(function(d) { + d3.select(this) + .call(svgIcon('#icon-' + d.entity.geometry(d.graph), 'pre-text ' + d.changeType)); + }); + + itemsEnter + .append('span') + .attr('class', 'change-type') + .text(function(d) { return t('commit.' + d.changeType) + ' '; }); + + itemsEnter + .append('strong') + .attr('class', 'entity-type') + .text(function(d) { + var matched = context.presets().match(d.entity, d.graph); + return (matched && matched.name()) || utilDisplayType(d.entity.id); + }); + + itemsEnter + .append('span') + .attr('class', 'entity-name') + .text(function(d) { + var name = utilDisplayName(d.entity) || '', + string = ''; + if (name !== '') { + string += ':'; + } + return string += ' ' + name; + }); + + itemsEnter + .style('opacity', 0) + .transition() + .style('opacity', 1); + + items = itemsEnter + .merge(items); + + items + .on('mouseover', mouseover) + .on('mouseout', mouseout) + .on('click', zoomToEntity); + + + function mouseover(d) { + if (d.entity) { + context.surface().selectAll( + utilEntityOrMemberSelector([d.entity.id], context.graph()) + ).classed('hover', true); + } + } + + + function mouseout() { + context.surface().selectAll('.hover') + .classed('hover', false); + } + + + function zoomToEntity(change) { + var entity = change.entity; + if (change.changeType !== 'deleted' && + context.graph().entity(entity.id).geometry(context.graph()) !== 'vertex') { + context.map().zoomTo(entity); + context.surface().selectAll(utilEntityOrMemberSelector([entity.id], context.graph())) + .classed('hover', true); + } + } + } + + + return commitChanges; +} diff --git a/modules/ui/commit_warnings.js b/modules/ui/commit_warnings.js new file mode 100644 index 000000000..1dfba52cb --- /dev/null +++ b/modules/ui/commit_warnings.js @@ -0,0 +1,95 @@ +import { t } from '../util/locale'; +import { modeSelect } from '../modes'; +import { svgIcon } from '../svg'; +import { tooltip } from '../util/tooltip'; +import { utilEntityOrMemberSelector } from '../util'; + + +export function uiCommitWarnings(context) { + + function commitWarnings(selection) { + + var changes = context.history().changes(); + var warnings = context.history().validate(changes); + + var container = selection.selectAll('.warning-section') + .data(warnings.length ? [0] : []); + + container.exit() + .remove(); + + var containerEnter = container.enter() + .append('div') + .attr('class', 'modal-section warning-section fillL2'); + + containerEnter + .append('h3') + .text(t('commit.warnings')); + + containerEnter + .append('ul') + .attr('class', 'changeset-list'); + + container = containerEnter + .merge(container); + + + var items = container.select('ul').selectAll('li') + .data(warnings); + + items.exit() + .remove(); + + var itemsEnter = items.enter() + .append('li') + .attr('class', 'warning-item'); + + itemsEnter + .call(svgIcon('#icon-alert', 'pre-text')); + + itemsEnter + .append('strong') + .text(function(d) { return d.message; }); + + itemsEnter.filter(function(d) { return d.tooltip; }) + .call(tooltip() + .title(function(d) { return d.tooltip; }) + .placement('top') + ); + + items = itemsEnter + .merge(items); + + items + .on('mouseover', mouseover) + .on('mouseout', mouseout) + .on('click', warningClick); + + + function mouseover(d) { + if (d.entity) { + context.surface().selectAll( + utilEntityOrMemberSelector([d.entity.id], context.graph()) + ).classed('hover', true); + } + } + + + function mouseout() { + context.surface().selectAll('.hover') + .classed('hover', false); + } + + + function warningClick(d) { + if (d.entity) { + context.map().zoomTo(d.entity); + context.enter(modeSelect(context, [d.entity.id])); + } + } + + } + + + return commitWarnings; +} diff --git a/modules/ui/index.js b/modules/ui/index.js index 874e0354d..6eaef95d5 100644 --- a/modules/ui/index.js +++ b/modules/ui/index.js @@ -5,6 +5,8 @@ export { uiBackground } from './background'; export { uiChangesetEditor } from './changeset_editor'; export { uiCmd } from './cmd'; export { uiCommit } from './commit'; +export { uiCommitChanges } from './commit_changes'; +export { uiCommitWarnings } from './commit_warnings'; export { uiConfirm } from './confirm'; export { uiConflicts } from './conflicts'; export { uiContributors } from './contributors';