Commit f7e49e79 authored by Tom MacWright's avatar Tom MacWright Committed by GitHub

Merge pull request #3222 from openstreetmap/ui-2

Continuation of work from #3194
parents e4ccf116 a8295e97
......@@ -45,11 +45,7 @@ $(BUILDJS_TARGETS): $(BUILDJS_SOURCES) build.js
MODULE_TARGETS = \
js/lib/id/index.js \
js/lib/id/services.js \
js/lib/id/ui/index.js \
js/lib/id/svg.js \
js/lib/id/ui/core.js \
js/lib/id/ui/intro.js \
js/lib/id/ui/preset.js
js/lib/id/svg.js
js/lib/id/index.js: $(shell find modules -type f)
@rm -f $@
......@@ -63,22 +59,6 @@ js/lib/id/svg.js: $(shell find modules/svg -type f)
@rm -f $@
node_modules/.bin/rollup -c rollup.config.js -f umd -n iD.svg modules/svg/index.js --no-strict -o $@
js/lib/id/ui/index.js: $(shell find modules/ui -type f)
@rm -f $@
node_modules/.bin/rollup -c rollup.config.js -f umd -n iD modules/ui/ui.js --no-strict -o $@
js/lib/id/ui/core.js: $(shell find modules/ui/core -type f)
@rm -f $@
node_modules/.bin/rollup -c rollup.config.js -f umd -n iD.ui modules/ui/core/index.js --no-strict -o $@
js/lib/id/ui/intro.js: $(shell find modules/ui/intro -type f)
@rm -f $@
node_modules/.bin/rollup -c rollup.config.js -f umd -n iD.ui.intro modules/ui/intro/index.js --no-strict -o $@
js/lib/id/ui/preset.js: $(shell find modules/ui/preset -type f)
@rm -f $@
node_modules/.bin/rollup -c rollup.config.js -f umd -n iD.ui.preset modules/ui/preset/index.js --no-strict -o $@
dist/iD.js: \
js/lib/bootstrap-tooltip.js \
js/lib/d3.v3.js \
......
......@@ -38,11 +38,6 @@
<script src='js/lib/id/svg.js'></script>
<script src='js/lib/id/services.js'></script>
<script src='js/lib/id/ui/index.js'></script>
<script src='js/lib/id/ui/core.js'></script>
<script src='js/lib/id/ui/intro.js'></script>
<script src='js/lib/id/ui/preset.js'></script>
<script src='data/data_dev.js'></script>
<script src='js/lib/locale.js'></script>
......
......@@ -362,7 +362,7 @@ window.iD = function () {
context.undo = withDebouncedSave(history.undo);
context.redo = withDebouncedSave(history.redo);
ui = iD.ui(context);
ui = iD.ui.init(context);
connection = iD.Connection();
......
This diff is collapsed.
This diff is collapsed.
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.iD = global.iD || {})));
}(this, function (exports) { 'use strict';
function ui(context) {
function render(container) {
var map = context.map();
if (iD.detect().opera) container.classed('opera', true);
var hash = iD.behavior.Hash(context);
hash();
if (!hash.hadHash) {
map.centerZoom([0, 0], 2);
}
container.append('svg')
.attr('id', 'defs')
.call(iD.svg.Defs(context));
container.append('div')
.attr('id', 'sidebar')
.attr('class', 'col4')
.call(ui.sidebar);
var content = container.append('div')
.attr('id', 'content');
var bar = content.append('div')
.attr('id', 'bar')
.attr('class', 'fillD');
content.append('div')
.attr('id', 'map')
.call(map);
content
.call(iD.ui.MapInMap(context));
content.append('div')
.call(iD.ui.Info(context));
bar.append('div')
.attr('class', 'spacer col4');
var limiter = bar.append('div')
.attr('class', 'limiter');
limiter.append('div')
.attr('class', 'button-wrap joined col3')
.call(iD.ui.Modes(context), limiter);
limiter.append('div')
.attr('class', 'button-wrap joined col1')
.call(iD.ui.UndoRedo(context));
limiter.append('div')
.attr('class', 'button-wrap col1')
.call(iD.ui.Save(context));
bar.append('div')
.attr('class', 'full-screen')
.call(iD.ui.FullScreen(context));
bar.append('div')
.attr('class', 'spinner')
.call(iD.ui.Spinner(context));
var controls = bar.append('div')
.attr('class', 'map-controls');
controls.append('div')
.attr('class', 'map-control zoombuttons')
.call(iD.ui.Zoom(context));
controls.append('div')
.attr('class', 'map-control geolocate-control')
.call(iD.ui.Geolocate(context));
controls.append('div')
.attr('class', 'map-control background-control')
.call(iD.ui.Background(context));
controls.append('div')
.attr('class', 'map-control map-data-control')
.call(iD.ui.MapData(context));
controls.append('div')
.attr('class', 'map-control help-control')
.call(iD.ui.Help(context));
var about = content.append('div')
.attr('id', 'about');
about.append('div')
.attr('id', 'attrib')
.call(iD.ui.Attribution(context));
var footer = about.append('div')
.attr('id', 'footer')
.attr('class', 'fillD');
footer.append('div')
.attr('class', 'api-status')
.call(iD.ui.Status(context));
footer.append('div')
.attr('id', 'scale-block')
.call(iD.ui.Scale(context));
var aboutList = footer.append('div')
.attr('id', 'info-block')
.append('ul')
.attr('id', 'about-list');
if (!context.embed()) {
aboutList.call(iD.ui.Account(context));
}
aboutList.append('li')
.append('a')
.attr('target', '_blank')
.attr('tabindex', -1)
.attr('href', 'https://github.com/openstreetmap/iD')
.text(iD.version);
var issueLinks = aboutList.append('li');
issueLinks.append('a')
.attr('target', '_blank')
.attr('tabindex', -1)
.attr('href', 'https://github.com/openstreetmap/iD/issues')
.call(iD.svg.Icon('#icon-bug', 'light'))
.call(bootstrap.tooltip()
.title(t('report_a_bug'))
.placement('top')
);
issueLinks.append('a')
.attr('target', '_blank')
.attr('tabindex', -1)
.attr('href', 'https://github.com/openstreetmap/iD/blob/master/CONTRIBUTING.md#translating')
.call(iD.svg.Icon('#icon-translate', 'light'))
.call(bootstrap.tooltip()
.title(t('help_translate'))
.placement('top')
);
aboutList.append('li')
.attr('class', 'feature-warning')
.attr('tabindex', -1)
.call(iD.ui.FeatureInfo(context));
aboutList.append('li')
.attr('class', 'user-list')
.attr('tabindex', -1)
.call(iD.ui.Contributors(context));
window.onbeforeunload = function() {
return context.save();
};
window.onunload = function() {
context.history().unlock();
};
var mapDimensions = map.dimensions();
d3.select(window).on('resize.editor', function() {
mapDimensions = content.dimensions(null);
map.dimensions(mapDimensions);
});
function pan(d) {
return function() {
d3.event.preventDefault();
if (!context.inIntro()) context.pan(d);
};
}
// pan amount
var pa = 10;
var keybinding = d3.keybinding('main')
.on('⌫', function() { d3.event.preventDefault(); })
.on('←', pan([pa, 0]))
.on('↑', pan([0, pa]))
.on('→', pan([-pa, 0]))
.on('↓', pan([0, -pa]))
.on('⇧←', pan([mapDimensions[0], 0]))
.on('⇧↑', pan([0, mapDimensions[1]]))
.on('⇧→', pan([-mapDimensions[0], 0]))
.on('⇧↓', pan([0, -mapDimensions[1]]))
.on(iD.ui.cmd('⌘←'), pan([mapDimensions[0], 0]))
.on(iD.ui.cmd('⌘↑'), pan([0, mapDimensions[1]]))
.on(iD.ui.cmd('⌘→'), pan([-mapDimensions[0], 0]))
.on(iD.ui.cmd('⌘↓'), pan([0, -mapDimensions[1]]));
d3.select(document)
.call(keybinding);
context.enter(iD.modes.Browse(context));
context.container()
.call(iD.ui.Splash(context))
.call(iD.ui.Restore(context));
var authenticating = iD.ui.Loading(context)
.message(t('loading_auth'));
context.connection()
.on('authenticating.ui', function() {
context.container()
.call(authenticating);
})
.on('authenticated.ui', function() {
authenticating.close();
});
}
function ui(container) {
context.container(container);
context.loadLocale(function() {
render(container);
});
}
ui.sidebar = iD.ui.Sidebar(context);
return ui;
}
ui.tooltipHtml = function(text, key) {
var s = '<span>' + text + '</span>';
if (key) {
s += '<div class="keyhint-wrap">' +
'<span> ' + (t('tooltip_keyhint')) + ' </span>' +
'<span class="keyhint"> ' + key + '</span></div>';
}
return s;
};
exports.ui = ui;
Object.defineProperty(exports, '__esModule', { value: true });
}));
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
import { cmd } from '../ui/core/index';
import { cmd } from '../ui/index';
export function Copy(context) {
var keybinding = d3.keybinding('copy');
......
import { Select } from '../modes/index';
import { Extent, pointInPolygon } from '../geo/index';
import { Lasso as uiLasso } from '../ui/core/index';
import { Lasso as uiLasso } from '../ui/index';
export function Lasso(context) {
......
import { Move as MoveMode } from '../modes/index';
import { Extent, pointInPolygon } from '../geo/index';
import { CopyEntities, ChangeTags, Move as MoveAction} from '../actions/index';
import { cmd } from '../ui/core/index';
import { cmd } from '../ui/index';
export function Paste(context) {
var keybinding = d3.keybinding('paste');
......
......@@ -3,7 +3,7 @@ import { Graph } from './graph';
import { Difference } from './difference';
import { Tree } from './tree';
import { SessionMutex } from '../util/index';
import { Loading } from '../ui/core/index';
import { Loading } from '../ui/index';
export function History(context) {
var stack, index, tree,
......
......@@ -6,6 +6,7 @@ import * as util from './util/index';
import * as operations from './operations/index';
import * as presets from './presets/index';
import * as validations from './validations/index';
import * as ui from './ui/index';
// core
export { Connection } from './core/connection';
......@@ -34,5 +35,6 @@ export {
operations,
presets,
util,
ui,
validations
};
......@@ -2,7 +2,7 @@ import { Graph } from '../core/index';
import { displayName, displayType } from '../util/index';
import { Browse } from './index';
import { DiscardTags, Noop, MergeRemoteChanges, Revert } from '../actions/index';
import { Commit, Loading, Success, Conflicts } from '../ui/core/index';
import { Commit, Loading, Success, Conflicts } from '../ui/index';
export function Save(context) {
var ui = Commit(context)
......
......@@ -5,7 +5,7 @@ import { DragNode, Browse } from './index';
import { Extent, pointInPolygon, chooseEdge } from '../geo/index';
import { AddMidpoint } from '../actions/index';
import * as Operations from '../operations/index';
import { RadialMenu, SelectionList } from '../ui/core/index';
import { RadialMenu, SelectionList } from '../ui/index';
export function Select(context, selectedIDs) {
var mode = {
......
import { Select, Browse } from '../modes/index';
import { sphericalDistance } from '../geo/index';
import { DeleteMultiple } from '../actions/index';
import { cmd } from '../ui/index';
export function Delete(selectedIDs, context) {
var action = DeleteMultiple(selectedIDs);
......@@ -70,7 +72,7 @@ export function Delete(selectedIDs, context) {
};
operation.id = 'delete';
operation.keys = [iD.ui.cmd('⌘⌫'), iD.ui.cmd('⌘⌦')];
operation.keys = [cmd('⌘⌫'), cmd('⌘⌦')];
operation.title = t('operations.delete.title');
return operation;
......
import { setTransform, fastMouse } from '../util/index';
import { interp, Extent } from '../geo/index';
import { Layers, Areas, Midpoints, Points, Vertices, Lines, Labels } from '../svg/index';
import { flash } from '../ui/core/index';
import { flash } from '../ui/index';
export function Map(context) {
var dimensions = [1, 1],
......
import { Icon } from '../svg/index';
export function Account(context) {
var connection = context.connection();
......@@ -32,7 +33,7 @@ export function Account(context) {
.attr('src', details.image_url);
} else {
userLink
.call(iD.svg.Icon('#icon-avatar', 'pre-text light'));
.call(Icon('#icon-avatar', 'pre-text light'));
}
// Add user name
......
import { Icon } from '../svg/index';
import { setTransform } from '../util/index';
import { BackgroundSource } from '../renderer/index';
import { offsetToMeters, metersToOffset } from '../geo/index';
import { cmd } from './cmd';
import { MapInMap } from './map_in_map';
import { tooltipHtml } from './tooltipHtml';
export function Background(context) {
var key = 'B',
......@@ -33,7 +38,7 @@ export function Background(context) {
.attr('data-opacity', d);
if (!iD.detect().opera) {
iD.util.setTransform(bg, 0, 0);
setTransform(bg, 0, 0);
}
opacityList.selectAll('li')
......@@ -50,7 +55,7 @@ export function Background(context) {
.html(true)
.title(function() {
var tip = '<div>' + t('background.switch') + '</div>';
return iD.ui.tooltipHtml(tip, iD.ui.cmd('⌘B'));
return tooltipHtml(tip, cmd('⌘B'));
})
.placement('top')
);
......@@ -100,7 +105,7 @@ export function Background(context) {
}
function setCustom(template) {
context.background().baseLayerSource(iD.BackgroundSource.Custom(template));
context.background().baseLayerSource(BackgroundSource.Custom(template));
selectLayer();
context.storage('background-custom-template', template);
}
......@@ -168,7 +173,7 @@ export function Background(context) {
}
function updateOffsetVal() {
var meters = iD.geo.offsetToMeters(context.background().offset()),
var meters = offsetToMeters(context.background().offset()),
x = +meters[0].toFixed(2),
y = +meters[1].toFixed(2);
......@@ -224,7 +229,7 @@ export function Background(context) {
return;
}
context.background().offset(iD.geo.metersToOffset(d));
context.background().offset(metersToOffset(d));
updateOffsetVal();
}
......@@ -308,11 +313,11 @@ export function Background(context) {
tooltip = bootstrap.tooltip()
.placement('left')
.html(true)
.title(iD.ui.tooltipHtml(t('background.description'), key)),
.title(tooltipHtml(t('background.description'), key)),
button = selection.append('button')
.attr('tabindex', -1)
.on('click', toggle)
.call(iD.svg.Icon('#icon-layers', 'light'))
.call(Icon('#icon-layers', 'light'))
.call(tooltip),
shown = false;
......@@ -351,7 +356,7 @@ export function Background(context) {
var custom = backgroundList.append('li')
.attr('class', 'custom_layer')
.datum(iD.BackgroundSource.Custom());
.datum(BackgroundSource.Custom());
custom.append('button')
.attr('class', 'layer-browse')
......@@ -359,7 +364,7 @@ export function Background(context) {
.title(t('background.custom_button'))
.placement('left'))
.on('click', editCustom)
.call(iD.svg.Icon('#icon-search'));
.call(Icon('#icon-search'));
var label = custom.append('label');
......@@ -382,7 +387,7 @@ export function Background(context) {
.append('a')
.attr('target', '_blank')
.attr('tabindex', -1)
.call(iD.svg.Icon('#icon-out-link', 'inline'))
.call(Icon('#icon-out-link', 'inline'))
.attr('href', 'https://github.com/openstreetmap/iD/blob/master/FAQ.md#how-can-i-report-an-issue-with-background-imagery')
.append('span')
.text(t('background.imagery_source_faq'));
......@@ -400,7 +405,7 @@ export function Background(context) {
.append('label')
.call(bootstrap.tooltip()
.html(true)
.title(iD.ui.tooltipHtml(t('background.minimap.tooltip'), '/'))
.title(tooltipHtml(t('background.minimap.tooltip'), '/'))
.placement('top')
);
......@@ -466,7 +471,7 @@ export function Background(context) {
.attr('title', t('background.reset'))
.attr('class', 'nudge-reset disabled')
.on('click', resetOffset)
.call(iD.svg.Icon('#icon-undo'));
.call(Icon('#icon-undo'));
context.map()
.on('move.background-update', _.debounce(update, 1000));
......
import { Icon } from '../svg/index';
import { entityOrMemberSelector, displayName } from '../util/index';
import { Select } from '../modes/index';
export function Commit(context) {
var dispatch = d3.dispatch('cancel', 'save');
......@@ -11,7 +14,7 @@ export function Commit(context) {
context.graph().entity(entity.id).geometry(context.graph()) !== 'vertex') {
context.map().zoomTo(entity);
context.surface().selectAll(
iD.util.entityOrMemberSelector([entity.id], context.graph()))
entityOrMemberSelector([entity.id], context.graph()))
.classed('hover', true);
}
}
......@@ -59,7 +62,7 @@ export function Commit(context) {
.append('a')
.attr('target', '_blank')
.attr('tabindex', -1)
.call(iD.svg.Icon('#icon-alert', 'inline'))
.call(Icon('#icon-alert', 'inline'))
.attr('href', t('commit.google_warning_link'))
.append('span')
.text(t('commit.google_warning'));
......@@ -94,7 +97,7 @@ export function Commit(context) {
changeSetInfo.append('a')
.attr('target', '_blank')
.attr('tabindex', -1)
.call(iD.svg.Icon('#icon-out-link', 'inline'))
.call(Icon('#icon-out-link', 'inline'))
.attr('href', t('commit.about_changeset_comments_link'))
.append('span')
.text(t('commit.about_changeset_comments'));
......@@ -123,7 +126,7 @@ export function Commit(context) {
.on('click', warningClick);
warningLi
.call(iD.svg.Icon('#icon-alert', 'pre-text'));
.call(Icon('#icon-alert', 'pre-text'));
warningLi
.append('strong').text(function(d) {
......@@ -218,7 +221,7 @@ export function Commit(context) {
li.each(function(d) {
d3.select(this)
.call(iD.svg.Icon('#icon-' + d.entity.geometry(d.graph), 'pre-text ' + d.changeType));
.call(Icon('#icon-' + d.entity.geometry(d.graph), 'pre-text ' + d.changeType));
});
li.append('span')
......@@ -236,7 +239,7 @@ export function Commit(context) {
li.append('span')
.attr('class', 'entity-name')
.text(function(d) {
var name = iD.util.displayName(d.entity) || '',
var name = displayName(d.entity) || '',
string = '';
if (name !== '') string += ':';
return string += ' ' + name;
......@@ -250,7 +253,7 @@ export function Commit(context) {
function mouseover(d) {
if (d.entity) {
context.surface().selectAll(
iD.util.entityOrMemberSelector([d.entity.id], context.graph())
entityOrMemberSelector([d.entity.id], context.graph())
).classed('hover', true);
}
}
......@@ -264,7 +267,7 @@ export function Commit(context) {
if (d.entity) {
context.map().zoomTo(d.entity);
context.enter(
iD.modes.Select(context, [d.entity.id])
Select(context, [d.entity.id])
.suppressMenu(true));
}
}
......
import { modal as modalModule } from './modal';
import { modal } from './modal';
export function confirm(selection) {
var modal = modalModule(selection);
var modalSelection = modal(selection);
modal.select('.modal')
modalSelection.select('.modal')
.classed('modal-alert', true);
var section = modal.select('.content');
var section = modalSelection.select('.content');
section.append('div')
.attr('class', 'modal-section header');
......@@ -17,17 +17,17 @@ export function confirm(selection) {
var buttons = section.append('div')
.attr('class', 'modal-section buttons cf');
modal.okButton = function() {
modalSelection.okButton = function() {
buttons
.append('button')
.attr('class', 'action col4')
.on('click.confirm', function() {
modal.remove();
modalSelection.remove();
})
.text(t('confirm.okay'));
return modal;
return modalSelection;
};
return modal;
return modalSelection;
}
import { Icon } from '../svg/index';
import { entityOrMemberSelector } from '../util/index';
import { Extent } from '../geo/index';
export function Conflicts(context) {
var dispatch = d3.dispatch('download', 'cancel', 'save'),
list;
......@@ -11,7 +14,7 @@ export function Conflicts(context) {
.append('button')
.attr('class', 'fr')
.on('click', function() { dispatch.cancel(); })
.call(iD.svg.Icon('#icon-close'));
.call(Icon('#icon-close'));
header
.append('h3')
......@@ -197,7 +200,7 @@ export function Conflicts(context) {
.selectAll('input')
.property('checked', function(d) { return d === datum; });
var extent = iD.geo.Extent(),
var extent = Extent(),
entity;
entity = context.graph().hasEntity(datum.id);
......@@ -223,7 +226,7 @@ export function Conflicts(context) {
context.map().zoomTo(entity);
}
context.surface().selectAll(
iD.util.entityOrMemberSelector([entity.id], context.graph()))
entityOrMemberSelector([entity.id], context.graph()))
.classed('hover', true);
}