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

core ui

Browse Source
This commit is contained in:
Kushan Joshi
2016-06-25 14:09:53 +05:30
parent 8bf9c260a7
commit 94c5f43293
36 changed files with 231 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/ui/core/account.js
+2 -1
View File
@@ -1,3 +1,4 @@
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
modules/ui/core/background.js
+17 -12
View File
@@ -1,5 +1,10 @@
import { Icon } from '../../svg/index';
import { setTransform } from '../../util/index';
import { BackgroundSource } from '../../renderer';
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));
modules/ui/core/commit.js
+11 -8
View File
@@ -1,3 +1,6 @@
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));
}
}
modules/ui/core/conflicts.js
+6 -3
View File
@@ -1,3 +1,6 @@
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);
}
}
modules/ui/core/contributors.js
+2 -1
View File
@@ -1,3 +1,4 @@
import { Icon } from '../../svg/index';
export function Contributors(context) {
var debouncedUpdate = _.debounce(function() { update(); }, 1000),
limit = 4,
@@ -16,7 +17,7 @@ export function Contributors(context) {
subset = u.slice(0, u.length > limit ? limit - 1 : limit);
wrap.html('')
.call(iD.svg.Icon('#icon-nearby', 'pre-text light'));
.call(Icon('#icon-nearby', 'pre-text light'));
var userList = d3.select(document.createElement('span'));
modules/ui/core/entity_editor.js
+7 -4
View File
@@ -1,3 +1,6 @@
import { Icon } from '../../svg/index';
import { Browse } from '../../modes/index';
import { ChangeTags } from '../../actions/index';
import { preset as presetModule } from './preset';
import { PresetIcon } from './preset_icon';
import { RawTagEditor } from './raw_tag_editor';
@@ -38,7 +41,7 @@ export function EntityEditor(context) {
$enter.append('button')
.attr('class', 'fr preset-close')
.call(iD.svg.Icon(modified ? '#icon-apply' : '#icon-close'));
.call(Icon(modified ? '#icon-apply' : '#icon-close'));
$enter.append('h3');
@@ -48,7 +51,7 @@ export function EntityEditor(context) {
$header.select('.preset-close')
.on('click', function() {
context.enter(iD.modes.Browse(context));
context.enter(Browse(context));
});
var $body = selection.selectAll('.inspector-body')
@@ -198,9 +201,9 @@ export function EntityEditor(context) {
}
if (!_.isEqual(entity.tags, tags)) {
if (coalesceChanges) {
context.overwrite(iD.actions.ChangeTags(id, tags), annotation);
context.overwrite(ChangeTags(id, tags), annotation);
} else {
context.perform(iD.actions.ChangeTags(id, tags), annotation);
context.perform(ChangeTags(id, tags), annotation);
coalesceChanges = !!onInput;
}
}
modules/ui/core/feature_info.js
+2 -1
View File
@@ -1,3 +1,4 @@
import { tooltipHtml } from './tooltipHtml';
export function FeatureInfo(context) {
function update(selection) {
var features = context.features(),
@@ -17,7 +18,7 @@ export function FeatureInfo(context) {
.placement('top')
.html(true)
.title(function() {
return iD.ui.tooltipHtml(hiddenList.join('<br/>'));
return tooltipHtml(hiddenList.join('<br/>'));
});
var warning = selection.append('a')
modules/ui/core/feature_list.js
+14 -9
View File
@@ -1,3 +1,8 @@
import { Icon } from '../../svg/index';
import { Entity } from '../../core/index';
import { displayName, entityOrMemberSelector } from '../../util/index';
import { Select } from '../../modes/index';
import { Extent, chooseEdge } from '../../geo/index';
import * as sexagesimal from 'sexagesimal';
export function FeatureList(context) {
@@ -33,7 +38,7 @@ export function FeatureList(context) {
.on('input', inputevent);
searchWrap
.call(iD.svg.Icon('#icon-search', 'pre-text'));
.call(Icon('#icon-search', 'pre-text'));
var listWrap = selection.append('div')
.attr('class', 'inspector-body');
@@ -95,7 +100,7 @@ export function FeatureList(context) {
entities[entity.id] = true;
var name = iD.util.displayName(entity) || '';
var name = displayName(entity) || '';
if (name.toLowerCase().indexOf(q) >= 0) {
result.push({
id: entity.id,
@@ -120,12 +125,12 @@ export function FeatureList(context) {
// https://github.com/openstreetmap/iD/issues/1890
if (d.osm_type && d.osm_id) {
result.push({
id: iD.Entity.id.fromOSM(d.osm_type, d.osm_id),
id: Entity.id.fromOSM(d.osm_type, d.osm_id),
geometry: d.osm_type === 'relation' ? 'relation' : d.osm_type === 'way' ? 'line' : 'point',
type: d.type !== 'yes' ? (d.type.charAt(0).toUpperCase() + d.type.slice(1)).replace('_', ' ')
: (d.class.charAt(0).toUpperCase() + d.class.slice(1)).replace('_', ' '),
name: d.display_name,
extent: new iD.geo.Extent(
extent: new Extent(
[parseFloat(d.boundingbox[3]), parseFloat(d.boundingbox[0])],
[parseFloat(d.boundingbox[2]), parseFloat(d.boundingbox[1])])
});
@@ -148,7 +153,7 @@ export function FeatureList(context) {
.enter().append('button')
.property('disabled', true)
.attr('class', 'no-results-item')
.call(iD.svg.Icon('#icon-alert', 'pre-text'));
.call(Icon('#icon-alert', 'pre-text'));
resultsIndicator.append('span')
.attr('class', 'entity-name');
@@ -193,7 +198,7 @@ export function FeatureList(context) {
label.each(function(d) {
d3.select(this)
.call(iD.svg.Icon('#icon-' + d.geometry, 'pre-text'));
.call(Icon('#icon-' + d.geometry, 'pre-text'));
});
label.append('span')
@@ -217,7 +222,7 @@ export function FeatureList(context) {
function mouseover(d) {
if (d.id === -1) return;
context.surface().selectAll(iD.util.entityOrMemberSelector([d.id], context.graph()))
context.surface().selectAll(entityOrMemberSelector([d.id], context.graph()))
.classed('hover', true);
}
@@ -236,10 +241,10 @@ export function FeatureList(context) {
context.map().center(d.entity.loc);
} else if (d.entity.type === 'way') {
var center = context.projection(context.map().center()),
edge = iD.geo.chooseEdge(context.childNodes(d.entity), center, context.projection);
edge = chooseEdge(context.childNodes(d.entity), center, context.projection);
context.map().center(edge.loc);
}
context.enter(iD.modes.Select(context, [d.entity.id]).suppressMenu(true));
context.enter(Select(context, [d.entity.id]).suppressMenu(true));
} else {
context.zoomToEntity(d.id);
}
modules/ui/core/geolocate.js
+6 -3
View File
@@ -1,3 +1,6 @@
import { Icon } from '../../svg/index';
import { Browse } from '../../modes/index';
import { Extent } from '../../geo/index';
import { Loading } from './loading';
export function Geolocate(context) {
@@ -6,7 +9,7 @@ export function Geolocate(context) {
timeoutId;
function click() {
context.enter(iD.modes.Browse(context));
context.enter(Browse(context));
context.container().call(locating);
navigator.geolocation.getCurrentPosition(success, error, geoOptions);
@@ -17,7 +20,7 @@ export function Geolocate(context) {
function success(position) {
var map = context.map(),
extent = iD.geo.Extent([position.coords.longitude, position.coords.latitude])
extent = Extent([position.coords.longitude, position.coords.latitude])
.padByMeters(position.coords.accuracy);
map.centerZoom(extent.center(), Math.min(20, map.extentZoom(extent)));
@@ -41,7 +44,7 @@ export function Geolocate(context) {
.attr('tabindex', -1)
.attr('title', t('geolocate.title'))
.on('click', click)
.call(iD.svg.Icon('#icon-geolocate', 'light'))
.call(Icon('#icon-geolocate', 'light'))
.call(bootstrap.tooltip()
.placement('left'));
};
modules/ui/core/help.js
+4 -2
View File
@@ -1,4 +1,6 @@
import { Icon } from '../../svg/index';
import { intro } from './intro';
import { tooltipHtml } from './tooltipHtml';
export function Help(context) {
var key = 'H';
@@ -102,11 +104,11 @@ export function Help(context) {
tooltip = bootstrap.tooltip()
.placement('left')
.html(true)
.title(iD.ui.tooltipHtml(t('help.title'), key)),
.title(tooltipHtml(t('help.title'), key)),
button = selection.append('button')
.attr('tabindex', -1)
.on('click', toggle)
.call(iD.svg.Icon('#icon-help', 'light'))
.call(Icon('#icon-help', 'light'))
.call(tooltip),
shown = false;
modules/ui/core/index.js
+1
View File
@@ -43,6 +43,7 @@ export { Status } from './status';
export { Success } from './success';
export { TagReference } from './tag_reference';
export { Toggle } from './toggle';
export { tooltipHtml } from './tooltipHtml';
export { UndoRedo } from './undo_redo';
export { ViewOnOSM } from './view_on_osm';
export { Zoom } from './zoom';
modules/ui/core/info.js
+2 -1
View File
@@ -1,3 +1,4 @@
import { Extent } from '../../geo/index';
import { cmd } from './cmd';
export function Info(context) {
@@ -103,7 +104,7 @@ export function Info(context) {
var resolver = context.graph(),
selected = _.filter(context.selectedIDs(), function(e) { return context.hasEntity(e); }),
singular = selected.length === 1 ? selected[0] : null,
extent = iD.geo.Extent(),
extent = Extent(),
entity;
wrap.html('');
modules/ui/core/intro.js
+9 -6
View File
@@ -1,3 +1,6 @@
import { Icon } from '../../svg/index';
import { Entity, Graph } from '../../core/index';
import { Browse } from '../../modes/index';
export function intro(context) {
var step;
@@ -50,7 +53,7 @@ export function intro(context) {
return features[id] && t('intro.graph.' + features[id]);
}
context.enter(iD.modes.Browse(context));
context.enter(Browse(context));
// Save current map state
var history = context.history().toJSON(),
@@ -72,13 +75,13 @@ export function intro(context) {
introGraph = JSON.parse(iD.introGraph);
for (var key in introGraph) {
introGraph[key] = iD.Entity(introGraph[key]);
introGraph[key] = Entity(introGraph[key]);
name = localizedName(key);
if (name) {
introGraph[key].tags.name = name;
}
}
context.history().merge(d3.values(iD.Graph().load(introGraph).entities));
context.history().merge(d3.values(Graph().load(introGraph).entities));
context.background().bing();
d3.selectAll('#map .layer-background').style('opacity', 1);
@@ -93,7 +96,7 @@ export function intro(context) {
}
var steps = ['navigation', 'point', 'area', 'line', 'startEditing'].map(function(step, i) {
var s = iD.ui.intro[step](context, reveal)
var s = intro[step](context, reveal)
.on('done', function() {
entered.filter(function(d) {
return d.title === s.title;
@@ -130,7 +133,7 @@ export function intro(context) {
.on('click', enter);
entered
.call(iD.svg.Icon('#icon-apply', 'pre-text'));
.call(Icon('#icon-apply', 'pre-text'));
entered
.append('label')
@@ -141,7 +144,7 @@ export function intro(context) {
function enter (newStep) {
if (step) { step.exit(); }
context.enter(iD.modes.Browse(context));
context.enter(Browse(context));
step = newStep;
step.enter();
modules/ui/core/lasso.js
+3 -2
View File
@@ -1,3 +1,4 @@
import { Extent } from '../../geo/index';
import { Toggle } from './toggle';
export function Lasso(context) {
@@ -28,8 +29,8 @@ export function Lasso(context) {
lasso.extent = function () {
return lasso.coordinates.reduce(function(extent, point) {
return extent.extend(iD.geo.Extent(point));
}, iD.geo.Extent());
return extent.extend(Extent(point));
}, Extent());
};
lasso.p = function(_) {
modules/ui/core/map_data.js
+8 -5
View File
@@ -1,3 +1,6 @@
import { Icon } from '../../svg/index';
import { tooltipHtml } from './tooltipHtml';
export function MapData(context) {
var key = 'F',
features = context.features().keys(),
@@ -184,7 +187,7 @@ export function MapData(context) {
d3.event.stopPropagation();
gpx.fitZoom();
})
.call(iD.svg.Icon('#icon-search'));
.call(Icon('#icon-search'));
enter.append('button')
.attr('class', 'list-item-gpx-browse')
@@ -199,7 +202,7 @@ export function MapData(context) {
})
.node().click();
})
.call(iD.svg.Icon('#icon-geolocate'));
.call(Icon('#icon-geolocate'));
var labelGpx = enter.append('label')
.call(bootstrap.tooltip()
@@ -247,7 +250,7 @@ export function MapData(context) {
if (name === 'feature' && autoHiddenFeature(d)) {
tip += '<div>' + t('map_data.autohidden') + '</div>';
}
return iD.ui.tooltipHtml(tip, key);
return tooltipHtml(tip, key);
})
.placement('top')
);
@@ -340,11 +343,11 @@ export function MapData(context) {
tooltip = bootstrap.tooltip()
.placement('left')
.html(true)
.title(iD.ui.tooltipHtml(t('map_data.description'), key)),
.title(tooltipHtml(t('map_data.description'), key)),
button = selection.append('button')
.attr('tabindex', -1)
.on('click', togglePanel)
.call(iD.svg.Icon('#icon-data', 'light'))
.call(Icon('#icon-data', 'light'))
.call(tooltip),
shown = false;
modules/ui/core/map_in_map.js
+14 -9
View File
@@ -1,12 +1,17 @@
import { Gpx, Debug } from '../../svg/index';
import { setTransform } from '../../util/index';
import { RawMercator } from '../../geo/index';
import { TileLayer } from '../../renderer/index';
export function MapInMap(context) {
var key = '/';
function map_in_map(selection) {
var backgroundLayer = iD.TileLayer(context),
var backgroundLayer = TileLayer(context),
overlayLayers = {},
projection = iD.geo.RawMercator(),
gpxLayer = iD.svg.Gpx(projection, context).showLabels(false),
debugLayer = iD.svg.Debug(projection, context),
projection = RawMercator(),
gpxLayer = Gpx(projection, context).showLabels(false),
debugLayer = Debug(projection, context),
zoom = d3.behavior.zoom()
.scaleExtent([ztok(0.5), ztok(24)])
.on('zoom', zoomPan),
@@ -51,8 +56,8 @@ export function MapInMap(context) {
tX = (tCurr[0] / scale - tLast[0]) * scale,
tY = (tCurr[1] / scale - tLast[1]) * scale;
iD.util.setTransform(tiles, tX, tY, scale);
iD.util.setTransform(viewport, 0, 0, scale);
setTransform(tiles, tX, tY, scale);
setTransform(viewport, 0, 0, scale);
transformed = true;
queueRedraw();
@@ -112,8 +117,8 @@ export function MapInMap(context) {
kLast = kCurr = kMini;
if (transformed) {
iD.util.setTransform(tiles, 0, 0);
iD.util.setTransform(viewport, 0, 0);
setTransform(tiles, 0, 0);
setTransform(viewport, 0, 0);
transformed = false;
}
}
@@ -160,7 +165,7 @@ export function MapInMap(context) {
var activeOverlayLayers = [];
for (var i = 0; i < overlaySources.length; i++) {
if (overlaySources[i].validZoom(zMini)) {
if (!overlayLayers[i]) overlayLayers[i] = iD.TileLayer(context);
if (!overlayLayers[i]) overlayLayers[i] = TileLayer(context);
activeOverlayLayers.push(overlayLayers[i]
.source(overlaySources[i])
.projection(projection)
modules/ui/core/modal.js
+2 -1
View File
@@ -1,3 +1,4 @@
import { Icon } from '../../svg/index';
export function modal(selection, blocking) {
var keybinding = d3.keybinding('modal');
var previous = selection.select('div.modal');
@@ -41,7 +42,7 @@ export function modal(selection, blocking) {
modal.append('button')
.attr('class', 'close')
.on('click', shaded.close)
.call(iD.svg.Icon('#icon-close'));
.call(Icon('#icon-close'));
keybinding
.on('⌫', shaded.close)
modules/ui/core/modes.js
+10 -6
View File
@@ -1,8 +1,12 @@
import { Icon } from '../../svg/index';
import { AddPoint, AddLine, AddArea, Browse } from '../../modes/index';
import { tooltipHtml } from './tooltipHtml';
export function Modes(context) {
var modes = [
iD.modes.AddPoint(context),
iD.modes.AddLine(context),
iD.modes.AddArea(context)];
AddPoint(context),
AddLine(context),
AddArea(context)];
function editable() {
return context.editable() && context.mode().id !== 'save';
@@ -17,7 +21,7 @@ export function Modes(context) {
.attr('class', function(mode) { return mode.id + ' add-button col4'; })
.on('click.mode-buttons', function(mode) {
if (mode.id === context.mode().id) {
context.enter(iD.modes.Browse(context));
context.enter(Browse(context));
} else {
context.enter(mode);
}
@@ -26,7 +30,7 @@ export function Modes(context) {
.placement('bottom')
.html(true)
.title(function(mode) {
return iD.ui.tooltipHtml(mode.description, mode.key);
return tooltipHtml(mode.description, mode.key);
}));
context.map()
@@ -37,7 +41,7 @@ export function Modes(context) {
buttons.each(function(d) {
d3.select(this)
.call(iD.svg.Icon('#icon-' + d.button, 'pre-text'));
.call(Icon('#icon-' + d.button, 'pre-text'));
});
buttons.append('span')
modules/ui/core/notice.js
+2 -1
View File
@@ -1,3 +1,4 @@
import { Icon } from '../../svg/index';
export function Notice(context) {
return function(selection) {
var div = selection.append('div')
@@ -8,7 +9,7 @@ export function Notice(context) {
.on('click', function() { context.map().zoom(context.minEditableZoom()); });
button
.call(iD.svg.Icon('#icon-plus', 'pre-text'))
.call(Icon('#icon-plus', 'pre-text'))
.append('span')
.attr('class', 'label')
.text(t('zoom_in_edit'));
modules/ui/core/preset.js
+12 -6
View File
@@ -1,3 +1,9 @@
import { Icon } from '../../svg/index';
import { TagReference } from './tag_reference';
import { Browse } from '../../modes/index';
import { presetObj } from '../preset/index';
import { Disclosure } from './disclosure';
export function preset(context) {
var event = d3.dispatch('change'),
state,
@@ -9,7 +15,7 @@ export function preset(context) {
function UIField(field, entity, show) {
field = _.clone(field);
field.input = iD.ui.preset[field.type](field, context)
field.input = presetObj[field.type](field, context)
.on('change', event.change);
if (field.input.entity) field.input.entity(entity);
@@ -60,7 +66,7 @@ export function preset(context) {
}
function presets(selection) {
selection.call(iD.ui.Disclosure()
selection.call(Disclosure()
.title(t('inspector.all_fields'))
.expanded(context.storage('preset_fields.expanded') !== 'false')
.on('toggled', toggled)
@@ -126,12 +132,12 @@ export function preset(context) {
wrap.append('button')
.attr('class', 'remove-icon')
.attr('tabindex', -1)
.call(iD.svg.Icon('#operation-delete'));
.call(Icon('#operation-delete'));
wrap.append('button')
.attr('class', 'modified-icon')
.attr('tabindex', -1)
.call(iD.svg.Icon('#icon-undo'));
.call(Icon('#icon-undo'));
// Update
@@ -150,7 +156,7 @@ export function preset(context) {
return field.present();
})
.each(function(field) {
var reference = iD.ui.TagReference(field.reference || {key: field.key}, context);
var reference = TagReference(field.reference || {key: field.key}, context);
if (state === 'hover') {
reference.showing(false);
@@ -162,7 +168,7 @@ export function preset(context) {
.on('keydown', function() {
// if user presses enter, and combobox is not active, accept edits..
if (d3.event.keyCode === 13 && d3.select('.combobox').empty()) {
context.enter(iD.modes.Browse(context));
context.enter(Browse(context));
}
})
.call(reference.body)
modules/ui/core/preset_icon.js
+3 -2
View File
@@ -1,3 +1,4 @@
import { Icon } from '../../svg/index';
export function PresetIcon() {
var preset, geometry;
@@ -39,7 +40,7 @@ export function PresetIcon() {
$frame.enter()
.append('div')
.call(iD.svg.Icon('#preset-icon-frame'));
.call(Icon('#preset-icon-frame'));
$frame.attr('class', function() {
return 'preset-icon-frame ' + (geom === 'area' ? '' : 'hide');
@@ -52,7 +53,7 @@ export function PresetIcon() {
$icon.enter()
.append('div')
.attr('class', 'preset-icon')
.call(iD.svg.Icon(''));
.call(Icon(''));
$icon
.attr('class', 'preset-icon preset-icon-' + (maki ? '32' : (geom === 'area' ? '44' : '60')));
modules/ui/core/preset_list.js
+9 -5
View File
@@ -1,3 +1,7 @@
import { Icon } from '../../svg/index';
import { Browse } from '../../modes/index';
import { ChangePreset } from '../../actions/index';
import { Delete } from '../../operations';
import { PresetIcon } from './preset_icon';
import { TagReference } from './tag_reference';
@@ -29,9 +33,9 @@ export function PresetList(context) {
messagewrap.append('button')
.attr('class', 'close')
.on('click', function() {
context.enter(iD.modes.Browse(context));
context.enter(Browse(context));
})
.call(iD.svg.Icon('#icon-close'));
.call(Icon('#icon-close'));
}
function keydown() {
@@ -41,7 +45,7 @@ export function PresetList(context) {
d3.event.keyCode === d3.keybinding.keyCodes['⌦'])) {
d3.event.preventDefault();
d3.event.stopPropagation();
iD.operations.Delete([id], context)();
Delete([id], context)();
} else if (search.property('value').length === 0 &&
(d3.event.ctrlKey || d3.event.metaKey) &&
d3.event.keyCode === d3.keybinding.keyCodes.z) {
@@ -89,7 +93,7 @@ export function PresetList(context) {
.on('input', inputevent);
searchWrap
.call(iD.svg.Icon('#icon-search', 'pre-text'));
.call(Icon('#icon-search', 'pre-text'));
if (autofocus) {
search.node().focus();
@@ -214,7 +218,7 @@ export function PresetList(context) {
context.presets().choose(preset);
context.perform(
iD.actions.ChangePreset(id, currentPreset, preset),
ChangePreset(id, currentPreset, preset),
t('operations.change_tags.annotation'));
event.choose(preset);
modules/ui/core/radial_menu.js
+5 -2
View File
@@ -1,3 +1,6 @@
import { roundCoords } from '../../geo/index';
import { tooltipHtml } from './tooltipHtml';
export function RadialMenu(context, operations) {
var menu,
center = [0, 0],
@@ -47,7 +50,7 @@ export function RadialMenu(context, operations) {
.attr('class', function(d) { return 'radial-menu-item radial-menu-item-' + d.id; })
.classed('disabled', function(d) { return d.disabled(); })
.attr('transform', function(d, i) {
return 'translate(' + iD.geo.roundCoords([
return 'translate(' + roundCoords([
r * Math.sin(a0 + i * a),
r * Math.cos(a0 + i * a)]).join(',') + ')';
});
@@ -87,7 +90,7 @@ export function RadialMenu(context, operations) {
.style('bottom', null)
.style('right', null)
.style('display', 'block')
.html(iD.ui.tooltipHtml(d.tooltip(), d.keys[0]));
.html(tooltipHtml(d.tooltip(), d.keys[0]));
if (i === 0) {
tooltip
modules/ui/core/raw_member_editor.js
+13 -8
View File
@@ -1,3 +1,8 @@
import { Icon } from '../../svg/index';
import { Entity } from '../../core/index';
import { displayName } from '../../util/index';
import { Select, Browse } from '../../modes/index';
import { ChangeMember, DeleteMember } from '../../actions/index';
import { Disclosure } from './disclosure';
export function RawMemberEditor(context) {
@@ -5,24 +10,24 @@ export function RawMemberEditor(context) {
function selectMember(d) {
d3.event.preventDefault();
context.enter(iD.modes.Select(context, [d.id]));
context.enter(Select(context, [d.id]));
}
function changeRole(d) {
var role = d3.select(this).property('value');
var member = {id: d.id, type: d.type, role: role};
context.perform(
iD.actions.ChangeMember(d.relation.id, member, d.index),
ChangeMember(d.relation.id, member, d.index),
t('operations.change_role.annotation'));
}
function deleteMember(d) {
context.perform(
iD.actions.DeleteMember(d.relation.id, d.index),
DeleteMember(d.relation.id, d.index),
t('operations.delete_member.annotation'));
if (!context.hasEntity(d.relation.id)) {
context.enter(iD.modes.Browse(context));
context.enter(Browse(context));
}
}
@@ -62,8 +67,8 @@ export function RawMemberEditor(context) {
var $items = $list.selectAll('li')
.data(memberships, function(d) {
return iD.Entity.key(d.relation) + ',' + d.index + ',' +
(d.member ? iD.Entity.key(d.member) : 'incomplete');
return Entity.key(d.relation) + ',' + d.index + ',' +
(d.member ? Entity.key(d.member) : 'incomplete');
});
var $enter = $items.enter().append('li')
@@ -84,7 +89,7 @@ export function RawMemberEditor(context) {
$label.append('span')
.attr('class', 'member-entity-name')
.text(function(d) { return iD.util.displayName(d.member); });
.text(function(d) { return displayName(d.member); });
} else {
d3.select(this).append('label')
@@ -105,7 +110,7 @@ export function RawMemberEditor(context) {
.attr('tabindex', -1)
.attr('class', 'remove button-input-action member-delete minor')
.on('click', deleteMember)
.call(iD.svg.Icon('#operation-delete'));
.call(Icon('#operation-delete'));
$items.exit()
.remove();
modules/ui/core/raw_membership_editor.js
+20 -15
View File
@@ -1,3 +1,8 @@
import { Icon } from '../../svg/index';
import { Relation, Entity } from '../../core/index';
import { displayName } from '../../util/index';
import { Select } from '../../modes/index';
import { ChangeMember, AddMember, AddEntity, DeleteMember } from '../../actions/index';
import { Disclosure } from './disclosure';
export function RawMembershipEditor(context) {
@@ -5,13 +10,13 @@ export function RawMembershipEditor(context) {
function selectRelation(d) {
d3.event.preventDefault();
context.enter(iD.modes.Select(context, [d.relation.id]));
context.enter(Select(context, [d.relation.id]));
}
function changeRole(d) {
var role = d3.select(this).property('value');
context.perform(
iD.actions.ChangeMember(d.relation.id, _.extend({}, d.member, {role: role}), d.index),
ChangeMember(d.relation.id, _.extend({}, d.member, {role: role}), d.index),
t('operations.change_role.annotation'));
}
@@ -20,24 +25,24 @@ export function RawMembershipEditor(context) {
if (d.relation) {
context.perform(
iD.actions.AddMember(d.relation.id, {id: id, type: context.entity(id).type, role: role}),
AddMember(d.relation.id, {id: id, type: context.entity(id).type, role: role}),
t('operations.add_member.annotation'));
} else {
var relation = iD.Relation();
var relation = Relation();
context.perform(
iD.actions.AddEntity(relation),
iD.actions.AddMember(relation.id, {id: id, type: context.entity(id).type, role: role}),
AddEntity(relation),
AddMember(relation.id, {id: id, type: context.entity(id).type, role: role}),
t('operations.add.annotation.relation'));
context.enter(iD.modes.Select(context, [relation.id]));
context.enter(Select(context, [relation.id]));
}
}
function deleteMembership(d) {
context.perform(
iD.actions.DeleteMember(d.relation.id, d.index),
DeleteMember(d.relation.id, d.index),
t('operations.delete_member.annotation'));
}
@@ -54,7 +59,7 @@ export function RawMembershipEditor(context) {
return;
var presetName = context.presets().match(entity, graph).name(),
entityName = iD.util.displayName(entity) || '';
entityName = displayName(entity) || '';
var value = presetName + ' ' + entityName;
if (q && value.toLowerCase().indexOf(q.toLowerCase()) === -1)
@@ -67,7 +72,7 @@ export function RawMembershipEditor(context) {
});
result.sort(function(a, b) {
return iD.Relation.creationOrder(a.relation, b.relation);
return Relation.creationOrder(a.relation, b.relation);
});
// Dedupe identical names by appending relation id - see #2891
@@ -119,7 +124,7 @@ export function RawMembershipEditor(context) {
.attr('class', 'member-list');
var $items = $list.selectAll('li.member-row-normal')
.data(memberships, function(d) { return iD.Entity.key(d.relation) + ',' + d.index; });
.data(memberships, function(d) { return Entity.key(d.relation) + ',' + d.index; });
var $enter = $items.enter().append('li')
.attr('class', 'member-row member-row-normal form-field');
@@ -136,7 +141,7 @@ export function RawMembershipEditor(context) {
$label.append('span')
.attr('class', 'member-entity-name')
.text(function(d) { return iD.util.displayName(d.relation); });
.text(function(d) { return displayName(d.relation); });
$enter.append('input')
.attr('class', 'member-role')
@@ -150,7 +155,7 @@ export function RawMembershipEditor(context) {
.attr('tabindex', -1)
.attr('class', 'remove button-input-action member-delete minor')
.on('click', deleteMembership)
.call(iD.svg.Icon('#operation-delete'));
.call(Icon('#operation-delete'));
$items.exit()
.remove();
@@ -185,7 +190,7 @@ export function RawMembershipEditor(context) {
.attr('tabindex', -1)
.attr('class', 'remove button-input-action member-delete minor')
.on('click', deleteMembership)
.call(iD.svg.Icon('#operation-delete'));
.call(Icon('#operation-delete'));
} else {
$list.selectAll('.member-row-new')
@@ -198,7 +203,7 @@ export function RawMembershipEditor(context) {
$add.enter()
.append('button')
.attr('class', 'add-relation')
.call(iD.svg.Icon('#icon-plus', 'light'));
.call(Icon('#icon-plus', 'light'));
$wrap.selectAll('.add-relation')
.on('click', function() {
modules/ui/core/raw_tag_editor.js
+3 -2
View File
@@ -1,3 +1,4 @@
import { Icon } from '../../svg/index';
import { Disclosure } from './disclosure';
import { TagReference } from './tag_reference';
@@ -46,7 +47,7 @@ export function RawTagEditor(context) {
$newTag.enter()
.append('button')
.attr('class', 'add-tag')
.call(iD.svg.Icon('#icon-plus', 'light'));
.call(Icon('#icon-plus', 'light'));
$newTag.on('click', addTag);
@@ -75,7 +76,7 @@ export function RawTagEditor(context) {
$enter.append('button')
.attr('tabindex', -1)
.attr('class', 'remove minor')
.call(iD.svg.Icon('#operation-delete'));
.call(Icon('#operation-delete'));
if (context.taginfo()) {
$enter.each(bindTypeahead);
modules/ui/core/save.js
+5 -3
View File
@@ -1,4 +1,6 @@
import { Save as SaveMode } from '../../modes/index';
import { cmd } from './cmd';
import { tooltipHtml } from './tooltipHtml';
export function Save(context) {
var history = context.history(),
@@ -12,7 +14,7 @@ export function Save(context) {
function save() {
d3.event.preventDefault();
if (!context.inIntro() && !saving() && history.hasChanges()) {
context.enter(iD.modes.Save(context));
context.enter(SaveMode(context));
}
}
@@ -33,7 +35,7 @@ export function Save(context) {
var tooltip = bootstrap.tooltip()
.placement('bottom')
.html(true)
.title(iD.ui.tooltipHtml(t('save.no_changes'), key));
.title(tooltipHtml(t('save.no_changes'), key));
var button = selection.append('button')
.attr('class', 'save col12 disabled')
@@ -63,7 +65,7 @@ export function Save(context) {
return;
numChanges = _;
tooltip.title(iD.ui.tooltipHtml(t(numChanges > 0 ?
tooltip.title(tooltipHtml(t(numChanges > 0 ?
'save.help' : 'save.no_changes'), key));
var background = getBackground(numChanges);
modules/ui/core/scale.js
+3 -2
View File
@@ -1,3 +1,4 @@
import { lonToMeters, metersToLon } from '../../geo/index';
export function Scale(context) {
var projection = context.projection,
imperial = (iD.detect().locale.toLowerCase() === 'en-us'),
@@ -7,7 +8,7 @@ export function Scale(context) {
function scaleDefs(loc1, loc2) {
var lat = (loc2[1] + loc1[1]) / 2,
conversion = (imperial ? 3.28084 : 1),
dist = iD.geo.lonToMeters(loc2[0] - loc1[0], lat) * conversion,
dist = lonToMeters(loc2[0] - loc1[0], lat) * conversion,
scale = { dist: 0, px: 0, text: '' },
buckets, i, val, dLon;
@@ -26,7 +27,7 @@ export function Scale(context) {
}
}
dLon = iD.geo.metersToLon(scale.dist / conversion, lat);
dLon = metersToLon(scale.dist / conversion, lat);
scale.px = Math.round(projection([loc1[0] + dLon, loc1[1]])[0]);
if (imperial) {
modules/ui/core/selection_list.js
+8 -4
View File
@@ -1,7 +1,11 @@
import { Icon } from '../../svg/index';
import { Entity } from '../../core/index';
import { displayName } from '../../util/index';
import { Select } from '../../modes/index';
export function SelectionList(context, selectedIDs) {
function selectEntity(entity) {
context.enter(iD.modes.Select(context, [entity.id]).suppressMenu(true));
context.enter(Select(context, [entity.id]).suppressMenu(true));
}
@@ -29,7 +33,7 @@ export function SelectionList(context, selectedIDs) {
.filter(function(entity) { return entity; });
var items = list.selectAll('.feature-list-item')
.data(entities, iD.Entity.key);
.data(entities, Entity.key);
var enter = items.enter().append('button')
.attr('class', 'feature-list-item')
@@ -38,7 +42,7 @@ export function SelectionList(context, selectedIDs) {
// Enter
var label = enter.append('div')
.attr('class', 'label')
.call(iD.svg.Icon('', 'pre-text'));
.call(Icon('', 'pre-text'));
label.append('span')
.attr('class', 'entity-type');
@@ -57,7 +61,7 @@ export function SelectionList(context, selectedIDs) {
.text(function(entity) { return context.presets().match(entity, context.graph()).name(); });
items.selectAll('.entity-name')
.text(function(entity) { return iD.util.displayName(entity); });
.text(function(entity) { return displayName(entity); });
// Exit
items.exit()
modules/ui/core/source_switch.js
+2 -1
View File
@@ -1,3 +1,4 @@
import { Browse } from '../../modes/index';
export function SourceSwitch(context) {
var keys;
@@ -13,7 +14,7 @@ export function SourceSwitch(context) {
context.connection()
.switch(live ? keys[1] : keys[0]);
context.enter(iD.modes.Browse(context));
context.enter(Browse(context));
context.flush();
d3.select(this)
modules/ui/core/success.js
+4 -3
View File
@@ -1,3 +1,4 @@
import { Icon } from '../../svg/index';
export function Success(context) {
var dispatch = d3.dispatch('cancel'),
changeset;
@@ -12,7 +13,7 @@ export function Success(context) {
header.append('button')
.attr('class', 'fr')
.on('click', function() { dispatch.cancel(); })
.call(iD.svg.Icon('#icon-close'));
.call(Icon('#icon-close'));
header.append('h3')
.text(t('success.just_edited'));
@@ -27,7 +28,7 @@ export function Success(context) {
.attr('class', 'details')
.attr('target', '_blank')
.attr('tabindex', -1)
.call(iD.svg.Icon('#icon-out-link', 'inline'))
.call(Icon('#icon-out-link', 'inline'))
.attr('href', t('success.help_link_url'))
.append('span')
.text(t('success.help_link_text'));
@@ -56,7 +57,7 @@ export function Success(context) {
.call(bootstrap.tooltip()
.title(function(d) { return t('success.' + d.key); })
.placement('bottom'))
.each(function(d) { d3.select(this).call(iD.svg.Icon('#logo-' + d.key, 'social')); });
.each(function(d) { d3.select(this).call(Icon('#logo-' + d.key, 'social')); });
}
success.changeset = function(_) {
modules/ui/core/tag_reference.js
+3 -2
View File
@@ -1,3 +1,4 @@
import { Icon } from '../../svg/index';
export function TagReference(tag, context) {
var tagReference = {},
button,
@@ -71,7 +72,7 @@ export function TagReference(tag, context) {
.attr('target', '_blank')
.attr('tabindex', -1)
.attr('href', 'https://wiki.openstreetmap.org/wiki/' + docs.title)
.call(iD.svg.Icon('#icon-out-link', 'inline'))
.call(Icon('#icon-out-link', 'inline'))
.append('span')
.text(t('inspector.reference'));
});
@@ -108,7 +109,7 @@ export function TagReference(tag, context) {
.append('button')
.attr('class', 'tag-reference-button')
.attr('tabindex', -1)
.call(iD.svg.Icon('#icon-inspect'));
.call(Icon('#icon-inspect'));
button.on('click', function () {
d3.event.stopPropagation();
modules/ui/core/tooltipHtml.js
+9
View File
@@ -0,0 +1,9 @@
export function tooltipHtml(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;
}
modules/ui/core/undo_redo.js
+4 -2
View File
@@ -1,4 +1,6 @@
import { Icon } from '../../svg/index';
import { cmd } from './cmd';
import { tooltipHtml } from './tooltipHtml';
export function UndoRedo(context) {
var commands = [{
@@ -22,7 +24,7 @@ export function UndoRedo(context) {
.placement('bottom')
.html(true)
.title(function (d) {
return iD.ui.tooltipHtml(d.annotation() ?
return tooltipHtml(d.annotation() ?
t(d.id + '.tooltip', {action: d.annotation()}) :
t(d.id + '.nothing'), d.cmd);
});
@@ -36,7 +38,7 @@ export function UndoRedo(context) {
buttons.each(function(d) {
d3.select(this)
.call(iD.svg.Icon('#icon-' + d.id));
.call(Icon('#icon-' + d.id));
});
var keybinding = d3.keybinding('undo')
modules/ui/core/view_on_osm.js
+2 -1
View File
@@ -1,3 +1,4 @@
import { Icon } from '../../svg/index';
export function ViewOnOSM(context) {
var id;
@@ -13,7 +14,7 @@ export function ViewOnOSM(context) {
.append('a')
.attr('class', 'view-on-osm')
.attr('target', '_blank')
.call(iD.svg.Icon('#icon-out-link', 'inline'))
.call(Icon('#icon-out-link', 'inline'))
.append('span')
.text(t('inspector.view_on_osm'));
modules/ui/core/zoom.js
+4 -2
View File
@@ -1,4 +1,6 @@
import { Icon } from '../../svg/index';
import { cmd } from './cmd';
import { tooltipHtml } from './tooltipHtml';
export function Zoom(context) {
var zooms = [{
@@ -47,12 +49,12 @@ export function Zoom(context) {
.placement('left')
.html(true)
.title(function(d) {
return iD.ui.tooltipHtml(d.title, d.key);
return tooltipHtml(d.title, d.key);
}));
button.each(function(d) {
d3.select(this)
.call(iD.svg.Icon('#icon-' + d.icon, 'light'));
.call(Icon('#icon-' + d.icon, 'light'));
});
var keybinding = d3.keybinding('zoom');