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

Improve tag reference loading feedback (#1262)

Browse Source
This commit is contained in:
John Firebaugh
2013-05-22 11:13:54 -07:00
parent 56a8407767
commit 413b7abcb9
7 changed files with 74 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/app.css
+14 -15
View File
@@ -1445,29 +1445,28 @@ div.combobox {
position: relative;
}
.tag-help {
.tag-reference-loading .icon {
background-image: url(img/mini-loader.gif);
background-position: 0 0;
}
.tag-reference-body {
overflow: hidden;
}
.tag-help a {
.tag-reference-body p,
.tag-reference-body img {
padding-top: 10px;
}
.tag-reference-body a {
margin-top: 5px;
margin-bottom: 5px;
display: block;
}
.grid-pane .tag-reference-wrap {
padding: 10px 0 20px 0;
}
.tag-pane .tag-reference-wrap {
padding-top: 20px;
}
.additional-tags .tag-reference-wrap {
.additional-tags .tag-reference-body {
border-bottom: 1px solid #ccc;
padding: 20px 0;
}
.additional-tags div.tag-help {
float: left;
width: 100%;
}
index.html
-1
View File
@@ -83,7 +83,6 @@
<script src='js/id/ui/spinner.js'></script>
<script src='js/id/ui/restore.js'></script>
<script src='js/id/ui/tag_reference.js'></script>
<script src='js/id/ui/tag_reference_button.js'></script>
<script src='js/id/ui/preset.js'></script>
<script src='js/id/ui/preset_icon.js'></script>
<script src='js/id/ui/lasso.js'></script>
js/id/ui/preset.js
+5 -12
View File
@@ -81,15 +81,6 @@ iD.ui.preset = function(context, entity, preset) {
event.change(t);
}
function toggleReference(field) {
d3.event.stopPropagation();
d3.event.preventDefault();
field.reference.toggle();
render();
}
function render() {
var selection = formwrap.selectAll('.form-field')
.data(shown(), fieldKey);
@@ -119,8 +110,10 @@ iD.ui.preset = function(context, entity, preset) {
.attr('for', function(field) { return 'preset-input-' + field.id; })
.text(function(field) { return field.label(); });
label.call(iD.ui.TagReferenceButton()
.on('click', toggleReference));
label.each(function(field) {
d3.select(this)
.call(field.reference.button);
});
label.append('button')
.attr('class', 'modified-icon minor')
@@ -132,7 +125,7 @@ iD.ui.preset = function(context, entity, preset) {
enter.each(function(field) {
d3.select(this)
.call(field.input)
.call(field.reference);
.call(field.reference.body);
});
selection
js/id/ui/preset_list.js
+2 -3
View File
@@ -183,13 +183,12 @@ iD.ui.PresetList = function(context, entity) {
.attr('class', 'label')
.text(preset.name());
wrap.call(iD.ui.TagReferenceButton()
.on('click', item.help));
wrap.call(item.reference.button);
selection.append('div')
.attr('class', 'preset-inspect col12')
.style('max-height', '200px')
.call(item.reference);
.call(item.reference.body);
}
item.choose = function() {
js/id/ui/tag_reference.js
+50 -34
View File
@@ -1,5 +1,9 @@
iD.ui.TagReference = function(entity, tag) {
var taginfo = iD.taginfo(), wrap, showing = false;
var tagReference = {},
taginfo = iD.taginfo(),
button, body,
loaded = false,
showing = false;
function findLocal(docs) {
var locale = iD.detect().locale.toLowerCase(),
@@ -26,53 +30,66 @@ iD.ui.TagReference = function(entity, tag) {
});
}
function tagReference(selection) {
wrap = selection.append('div')
.attr('class', 'tag-help cf');
}
tagReference.button = function(selection) {
button = selection.append('button')
.attr('tabindex', -1)
.attr('class', 'tag-reference-button minor')
.on('click', function() {
d3.event.stopPropagation();
d3.event.preventDefault();
if (showing) {
tagReference.hide();
} else {
tagReference.load();
}
});
tagReference.show = function() {
button.append('span')
.attr('class', 'icon inspect');
};
var referenceBody = wrap.selectAll('.tag-reference-wrap')
.data([this])
.enter().append('div')
.attr('class', 'tag-reference-wrap cf')
.style('opacity', 0);
tagReference.body = function(selection) {
body = selection.append('div')
.attr('class', 'tag-reference-body cf')
.style('max-height', '0')
.style('opacity', '0');
};
function show() {
referenceBody
.transition()
.style('opacity', 1);
tagReference.load = function() {
if (loaded) {
tagReference.show();
return;
}
taginfo.docs(tag, function(err, docs) {
button.classed('tag-reference-loading', true);
taginfo.docs(tag, function(err, docs) {
if (!err && docs) {
docs = findLocal(docs);
}
if (!docs || !docs.description) {
referenceBody.append('p').text(t('inspector.no_documentation_key'));
show();
body.append('p').text(t('inspector.no_documentation_key'));
tagReference.show();
return;
}
if (docs.image && docs.image.thumb_url_prefix) {
referenceBody
body
.append('img')
.attr('class', 'wiki-image')
.attr('src', docs.image.thumb_url_prefix + "100" + docs.image.thumb_url_suffix)
.on('load', function() { show(); })
.on('error', function() { d3.select(this).remove(); show(); });
.on('load', function() { tagReference.show(); })
.on('error', function() { d3.select(this).remove(); tagReference.show(); });
} else {
show();
tagReference.show();
}
referenceBody
body
.append('p')
.text(docs.description);
var wikiLink = referenceBody
var wikiLink = body
.append('a')
.attr('target', '_blank')
.attr('href', 'http://wiki.openstreetmap.org/wiki/' + docs.title);
@@ -83,12 +100,15 @@ iD.ui.TagReference = function(entity, tag) {
wikiLink.append('span')
.text(t('inspector.reference'));
});
};
wrap.style('max-height', '0px')
.style('opacity', '0')
.transition()
tagReference.show = function() {
loaded = true;
button.classed('tag-reference-loading', false);
body.transition()
.duration(200)
.delay(100)
.style('max-height', '200px')
.style('opacity', '1');
@@ -96,17 +116,13 @@ iD.ui.TagReference = function(entity, tag) {
};
tagReference.hide = function() {
wrap.transition()
body.transition()
.duration(200)
.style('max-height', '0px')
.style('max-height', '0')
.style('opacity', '0');
showing = false;
};
tagReference.toggle = function() {
showing ? tagReference.hide() : tagReference.show();
};
return tagReference;
};
js/id/ui/tag_reference_button.js
-17
View File
@@ -1,17 +0,0 @@
iD.ui.TagReferenceButton = function() {
var dispatch = d3.dispatch('click');
function button(selection) {
var button = selection.append('button')
.attr('tabindex', -1)
.attr('class', 'tag-reference-button minor')
.on('click', dispatch.click);
button.append('span')
.attr('class', 'icon inspect');
return button;
}
return d3.rebind(button, dispatch, 'on')
};
js/id/ui/taglist.js
+3 -6
View File
@@ -100,13 +100,10 @@ iD.ui.Taglist = function(context, entity) {
.append('span')
.attr('class', 'icon delete');
row.call(iD.ui.TagReferenceButton()
.on('click', function(tag) {
tag.reference.toggle();
}));
row.each(function(tag) {
d3.select(this).call(tag.reference);
d3.select(this)
.call(tag.reference.button)
.call(tag.reference.body);
});
return li;