From 413b7abcb9d20a8256b2388d42696d5586e5a64d Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Wed, 22 May 2013 11:13:54 -0700 Subject: [PATCH] Improve tag reference loading feedback (#1262) --- css/app.css | 29 ++++++----- index.html | 1 - js/id/ui/preset.js | 17 ++----- js/id/ui/preset_list.js | 5 +- js/id/ui/tag_reference.js | 84 +++++++++++++++++++------------- js/id/ui/tag_reference_button.js | 17 ------- js/id/ui/taglist.js | 9 ++-- 7 files changed, 74 insertions(+), 88 deletions(-) delete mode 100644 js/id/ui/tag_reference_button.js diff --git a/css/app.css b/css/app.css index 199ef358e..9a59bba16 100644 --- a/css/app.css +++ b/css/app.css @@ -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%; } diff --git a/index.html b/index.html index c7e5d6f40..1a67cd26f 100644 --- a/index.html +++ b/index.html @@ -83,7 +83,6 @@ - diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js index 7f84103ce..b585cffcd 100644 --- a/js/id/ui/preset.js +++ b/js/id/ui/preset.js @@ -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 diff --git a/js/id/ui/preset_list.js b/js/id/ui/preset_list.js index e3932e5af..fa587eee7 100644 --- a/js/id/ui/preset_list.js +++ b/js/id/ui/preset_list.js @@ -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() { diff --git a/js/id/ui/tag_reference.js b/js/id/ui/tag_reference.js index b7b9c60f6..880cbc7cd 100644 --- a/js/id/ui/tag_reference.js +++ b/js/id/ui/tag_reference.js @@ -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; }; \ No newline at end of file diff --git a/js/id/ui/tag_reference_button.js b/js/id/ui/tag_reference_button.js deleted file mode 100644 index bec328fa6..000000000 --- a/js/id/ui/tag_reference_button.js +++ /dev/null @@ -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') -}; diff --git a/js/id/ui/taglist.js b/js/id/ui/taglist.js index 0230382d7..f8d0433f9 100644 --- a/js/id/ui/taglist.js +++ b/js/id/ui/taglist.js @@ -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;