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

Style and usability simplifications

Browse Source
This commit is contained in:
Tom MacWright
2014-09-10 12:41:02 -07:00
committed by John Firebaugh
parent 29dde3f217
commit 88bb6967d9
6 changed files with 63 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/app.css
+3 -4
View File
@@ -740,14 +740,13 @@ a:hover .icon.out-link { background-position: -500px -14px;}
background-color: black;
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
text-align: center;
padding: 2px 4px;
right: 0;
}
#mapillaryImage img {
width: 100%;
heigth: auto;
height: auto;
display: block;
}
css/map.css
+17 -31
View File
@@ -1141,43 +1141,29 @@ text.gpx {
}
/* Mapillary Sequences */
.sequence {
stroke: red;
stroke-width: 4;
fill: none;
pointer-events: visibleStroke;
g.image.point {
cursor: pointer; /* Opera */
cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */
}
g.image.point.hover {
stroke-opacity: 0.3;
}
g.image.point{
stroke: orange;
stroke-width: 2;
fill: none;
cursor: pointer; /* Opera */
cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */
}
g.image.point path{
g.image.point path,
g.image.point circle {
stroke-width: 3;
stroke: orange;
fill: orange;
/*marker-end:url(#mapillary_direction_arrow);*/
stroke: #ffc600;
fill: #ffc600;
}
g.image.point circle{
fill: orange;
fill-opacity: 0.3;
g.image.point circle {
fill-opacity: 0.3;
stroke-width: 4;
}
g.image.point.selected circle{
fill: yellow;
fill-opacity: 0.9;
}
#mapillary_direction_arrow {
fill: orange;
g.image.point.selected circle,
g.image.point.selected path,
g.image.point:hover circle,
g.image.point:hover path {
stroke: #ff9900;
fill: #ff9900;
}
/* Modes */
js/id/modes/select_image.js
+17 -29
View File
@@ -7,42 +7,35 @@ iD.modes.SelectImage = function (context) {
key: 'm'
}, imageView, currentImage;
var behaviors = [
];
function click() {
var datum = d3.event.target.__data__;
if (isImage(datum)) {
if (currentImage) {
context.surface().selectAll('.key_' + currentImage.properties.key)
.classed('selected', false);
}
if(currentImage === datum) {
context.surface().selectAll('.key_' + currentImage.properties.key)
if (currentImage === datum) {
context.surface().selectAll('.image.point')
.classed('selected', false);
currentImage = undefined;
} else {
currentImage = datum;
context.surface().selectAll('.key_' + currentImage.properties.key)
.classed('selected', true);
context.surface().selectAll('.image.point')
.classed('selected', function(d) {
return d === datum;
});
imageView.show(currentImage);
}
imageView.show(currentImage);
}
}
function isImage(datum) {
return datum !== undefined && datum && datum.properties !== undefined && datum.properties.entityType === 'image';
return datum &&
datum.properties !== undefined &&
datum.properties.entityType === 'image';
}
mode.enter = function () {
// console.log('selectImage.enter');
context.map().enableSequences(true);
context.container().select('#select_image_checkbox')
context.container()
.select('#select_image_checkbox')
.attr('checked','checked');
behaviors.forEach(function (behavior) {
context.install(behavior);
});
// Get focus on the body.
if (document.activeElement && document.activeElement.blur) {
@@ -51,9 +44,9 @@ iD.modes.SelectImage = function (context) {
imageView = context.imageView();
imageView.showEmpty();
context.surface()
.on('click.image', click);
context.surface()
.on('click.image', click)
.on('mouseover.image', function () {
var datum = d3.event.target.__data__;
if (isImage(datum)) {
@@ -63,7 +56,7 @@ iD.modes.SelectImage = function (context) {
.on('mouseout.image', function () {
var datum = d3.event.target.__data__;
if (isImage(datum)) {
if(currentImage) {
if (currentImage) {
imageView.show(currentImage);
} else {
imageView.showEmpty();
@@ -75,17 +68,13 @@ iD.modes.SelectImage = function (context) {
mode.exit = function () {
context.map().enableSequences(false);
context.container().select('#select_image_checkbox')
.attr('checked',null);
.attr('checked', null);
if(!currentImage) {
if (!currentImage) {
context.container()
.select('#mapillaryImage')
.classed('hidden', true);
}
behaviors.forEach(function (behavior) {
context.uninstall(behavior);
});
context.surface().select('defs').selectAll('marker.arrow')
.remove();
@@ -93,7 +82,6 @@ iD.modes.SelectImage = function (context) {
.remove();
context.surface().select('.layer-hit').selectAll('g.sequence')
.remove();
};
return mode;
js/id/svg/sequences.js
+8 -17
View File
@@ -1,7 +1,6 @@
iD.svg.Sequences = function (projection, context) {
var surface, enabled = false;
function drawSequences(_surface) {
surface = _surface;
@@ -19,6 +18,7 @@ iD.svg.Sequences = function (projection, context) {
hit_layer.selectAll('g.sequence').remove();
}
};
drawSequences.enable = function (enable) {
enabled = enable;
drawSequences(surface);
@@ -28,28 +28,19 @@ iD.svg.Sequences = function (projection, context) {
var imagePoints = drawSequences.images(sequences, 1000);
var images = surface.select('.layer-hit').selectAll('g.image')
.data(imagePoints);
var pointTransform = iD.svg.PointTransform(context.projection);
var image = images.enter()
.append('g')
.attr('class', function (d) {
return 'image point key_' + d.properties.key;
})
.attr('class', 'image point')
.attr('transform', function (d) {
var translate = iD.svg.PointTransform(context.projection)({loc: d.geometry.coordinates});
var translate = pointTransform({ loc: d.geometry.coordinates });
if (d.properties.ca) {
return translate + 'rotate(' + d.properties.ca + ',0,0)';
}
return translate;
})
.on('mouseover', function (d) {
surface.select('.key_' + d.properties.key).classed('hover', true);
})
.on('mouseout', function (d) {
surface.select('.key_' + d.properties.key).classed('hover', false);
});
image.append('path')
.call(drawSequences.markerPath, 'stroke');
@@ -62,14 +53,15 @@ iD.svg.Sequences = function (projection, context) {
// sets the data (point entity) on the element
images.select('.shadow');
images.select('.stroke');
};
drawSequences.reloadMapillaryImages = function () {
var extent = context.map().extent();
d3.json('https://mapillary-read-api.herokuapp.com/v1/s/search?min-lat=' + extent[0][1] + '&max-lat=' + extent[1][1] + '&min-lon=' + extent[0][0] + '&max-lon=' + extent[1][0] + '&max-results=100&geojson=true', function (error, data) {
d3.json('https://mapillary-read-api.herokuapp.com/v1/s/search?min-lat=' +
extent[0][1] + '&max-lat=' + extent[1][1] + '&min-lon=' +
extent[0][0] + '&max-lon=' + extent[1][0] +
'&max-results=100&geojson=true', function (error, data) {
drawSequences.plotSequences(context.surface(), context, data);
});
};
@@ -104,6 +96,5 @@ iD.svg.Sequences = function (projection, context) {
.attr('d', 'M 0,-10 l 0,-20 l -5,20 l 10,0 l -5,-20');
};
return drawSequences;
};
js/id/ui/background.js
+1 -5
View File
@@ -326,20 +326,17 @@ iD.ui.Background = function(context) {
.attr('type', 'checkbox')
.attr('id', 'select_image_checkbox')
.on('change', function(){
if(this.checked) {
if (this.checked) {
context.enter(iD.modes.SelectImage(context));
} else {
context.enter(iD.modes.Browse(context));
}
update();
});
mapillaryLabel.append('span')
.text(t('mapillary.title'));
var adjustments = content.append('div')
.attr('class', 'adjustments');
@@ -390,7 +387,6 @@ iD.ui.Background = function(context) {
context.enter(iD.modes.SelectImage(context));
});
d3.select(document)
.call(keybinding);
js/id/ui/image_view.js
+17 -7
View File
@@ -1,18 +1,22 @@
iD.ui.ImageView = function (context) {
function imageView() {
}
function imageView() { }
imageView.showEmpty = function () {
var imageWrapper = context.container().select('#mapillaryImage');
var imageWrapper = context.container()
.select('#mapillaryImage');
imageWrapper.html('');
var content = imageWrapper
.append('div');
content.append('div')
.on('click', function(){
imageWrapper.classed('hidden', true);
});
content.append('div').html(marked(t('mapillary.no_image_found')));
content.append('div')
.html(marked(t('mapillary.no_image_found')));
};
imageView.show = function (imageToShow) {
@@ -27,9 +31,15 @@ iD.ui.ImageView = function (context) {
.on('click', function(){
imageWrapper.classed('hidden', true);
});
content.append('div').html('<div><img src="https://d1cuyjsrcm0gby.cloudfront.net/KEY/thumb-320.jpg"></img></div><a class="link" target="_blank" href="http://mapillary.com/map/im/KEY">View on Mapillary</a>'
.replace(/KEY/g, key));
var wrap = content.append('div');
wrap.append('div')
.append('img')
.attr('src', 'https://d1cuyjsrcm0gby.cloudfront.net/KEY/thumb-320.jpg'.replace('KEY', key));
wrap.append('a')
.text(t('mapillary.view_on_mapillary'))
.attr('class', 'link')
.attr('target', '_blank')
.attr('src', 'http://mapillary.com/map/im/KEY'.replace('KEY', key));
};
return imageView;