From d5910dc97d75c5d0e20d1c1a41f49d58b260e56c Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Mon, 3 Jun 2013 11:09:08 -0700 Subject: [PATCH] Hide tag reference in hover state (fixes #1561) --- js/id/ui/entity_editor.js | 4 +- js/id/ui/preset.js | 25 ++++++--- js/id/ui/raw_tag_editor.js | 12 ++++ js/id/ui/tag_reference.js | 111 ++++++++++++++++++++----------------- 4 files changed, 91 insertions(+), 61 deletions(-) diff --git a/js/id/ui/entity_editor.js b/js/id/ui/entity_editor.js index 9d5c67d88..35067c29f 100644 --- a/js/id/ui/entity_editor.js +++ b/js/id/ui/entity_editor.js @@ -86,13 +86,15 @@ iD.ui.EntityEditor = function(context) { .preset(preset) .entityID(id) .tags(tags) + .state(state) .on('change', changeTags)); $body.select('.raw-tag-editor') .call(rawTagEditor .preset(preset) .entityID(id) - .tags(tags)); + .tags(tags) + .state(state)); if (entity.type === 'relation') { $body.select('.raw-member-editor') diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js index f75e20be7..b2980100f 100644 --- a/js/id/ui/preset.js +++ b/js/id/ui/preset.js @@ -1,5 +1,6 @@ iD.ui.preset = function(context) { var event = d3.dispatch('change'), + state, fields, preset, tags, @@ -11,8 +12,6 @@ iD.ui.preset = function(context) { field.input = iD.ui.preset[field.type](field, context) .on('change', event.change); - field.reference = iD.ui.TagReference({key: field.key}); - if (field.type === 'address' || field.type === 'wikipedia' || field.type === 'maxspeed') { @@ -106,20 +105,22 @@ iD.ui.preset = function(context) { $fields.select('.modified-icon') .on('click', revert); - $fields.select('.form-label') - .each(function(field) { - d3.select(this) - .call(field.reference.button); - }); - $fields .classed('modified', function(field) { return field.modified(); }) .each(function(field) { + var reference = iD.ui.TagReference({key: field.key}); + + if (state === 'hover') { + reference.showing(false); + } + d3.select(this) .call(field.input) - .call(field.reference.body); + .call(reference.body) + .select('.form-label') + .call(reference.button); field.input.tags(tags); }); @@ -170,6 +171,12 @@ iD.ui.preset = function(context) { return presets; }; + presets.state = function(_) { + if (!arguments.length) return state; + state = _; + return presets; + }; + presets.tags = function(_) { if (!arguments.length) return tags; tags = _; diff --git a/js/id/ui/raw_tag_editor.js b/js/id/ui/raw_tag_editor.js index 982fdb6b4..50edccb0d 100644 --- a/js/id/ui/raw_tag_editor.js +++ b/js/id/ui/raw_tag_editor.js @@ -2,6 +2,7 @@ iD.ui.RawTagEditor = function(context) { var event = d3.dispatch('change'), taginfo = iD.taginfo(), showBlank = false, + state, preset, tags, id; @@ -86,6 +87,11 @@ iD.ui.RawTagEditor = function(context) { $items.each(function(tag) { var reference = iD.ui.TagReference({key: tag.key}); + + if (state === 'hover') { + reference.showing(false); + } + d3.select(this) .each(bindTypeahead) .call(reference.button) @@ -191,6 +197,12 @@ iD.ui.RawTagEditor = function(context) { } } + rawTagEditor.state = function(_) { + if (!arguments.length) return state; + state = _; + return rawTagEditor; + }; + rawTagEditor.preset = function(_) { if (!arguments.length) return preset; preset = _; diff --git a/js/id/ui/tag_reference.js b/js/id/ui/tag_reference.js index f7d9f3903..a17152b56 100644 --- a/js/id/ui/tag_reference.js +++ b/js/id/ui/tag_reference.js @@ -1,9 +1,10 @@ iD.ui.TagReference = function(tag) { var tagReference = {}, taginfo = iD.taginfo(), - button, body, - loaded = false, - showing = false; + button, + body, + loaded, + showing; function findLocal(docs) { var locale = iD.detect().locale.toLowerCase(), @@ -30,44 +31,7 @@ iD.ui.TagReference = function(tag) { }); } - tagReference.button = function(selection) { - button = selection.selectAll('.tag-reference-button') - .data([0]); - - var enter = button.enter().append('button') - .attr('tabindex', -1) - .attr('class', 'tag-reference-button minor'); - - enter.append('span') - .attr('class', 'icon inspect'); - - button.on('click', function () { - d3.event.stopPropagation(); - d3.event.preventDefault(); - if (showing) { - tagReference.hide(); - } else { - tagReference.load(); - } - }); - }; - - tagReference.body = function(selection) { - body = selection.selectAll('.tag-reference-body') - .data([0]); - - body.enter().append('div') - .attr('class', 'tag-reference-body cf') - .style('max-height', '0') - .style('opacity', '0'); - }; - - tagReference.load = function() { - if (loaded) { - tagReference.show(); - return; - } - + function load() { button.classed('tag-reference-loading', true); taginfo.docs(tag, function(err, docs) { @@ -79,7 +43,7 @@ iD.ui.TagReference = function(tag) { if (!docs || !docs.description) { body.append('p').text(t('inspector.no_documentation_key')); - tagReference.show(); + show(); return; } @@ -88,10 +52,10 @@ iD.ui.TagReference = function(tag) { .append('img') .attr('class', 'wiki-image') .attr('src', docs.image.thumb_url_prefix + "100" + docs.image.thumb_url_suffix) - .on('load', function() { tagReference.show(); }) - .on('error', function() { d3.select(this).remove(); tagReference.show(); }); + .on('load', function() { show(); }) + .on('error', function() { d3.select(this).remove(); show(); }); } else { - tagReference.show(); + show(); } body @@ -109,9 +73,9 @@ iD.ui.TagReference = function(tag) { wikiLink.append('span') .text(t('inspector.reference')); }); - }; + } - tagReference.show = function() { + function show() { loaded = true; button.classed('tag-reference-loading', false); @@ -122,15 +86,60 @@ iD.ui.TagReference = function(tag) { .style('opacity', '1'); showing = true; - }; + } - tagReference.hide = function() { - body.transition() - .duration(200) + function hide(selection) { + selection = selection || body.transition().duration(200); + + selection .style('max-height', '0px') .style('opacity', '0'); showing = false; + } + + tagReference.button = function(selection) { + button = selection.selectAll('.tag-reference-button') + .data([0]); + + var enter = button.enter().append('button') + .attr('tabindex', -1) + .attr('class', 'tag-reference-button minor'); + + enter.append('span') + .attr('class', 'icon inspect'); + + button.on('click', function () { + d3.event.stopPropagation(); + d3.event.preventDefault(); + if (showing) { + hide(); + } else if (loaded) { + show(); + } else { + load(); + } + }); + }; + + tagReference.body = function(selection) { + body = selection.selectAll('.tag-reference-body') + .data([0]); + + body.enter().append('div') + .attr('class', 'tag-reference-body cf') + .style('max-height', '0') + .style('opacity', '0'); + + if (showing === false) { + hide(body); + } + }; + + tagReference.showing = function(_) { + if (!arguments.length) return showing; + showing = _; + return tagReference; }; return tagReference;