Name-suggestion-index: Enable easier copy / paste from NSI into ID

Created on 8 Nov 2020 · 4Comments · Source: osmlab/name-suggestion-index

I spotted a request by @boothym over on ID#8176 asking if they could implement a feature that would enable the tag text area to accept the tags that are displayed on the nsi.guide web site, so anybody who wanted to add a brand that was in the NSI (but not yet available in ID) could simply copy and paste from the NSI web site into the ID tag text area.

At the moment, the NSI web site displays tags like this:

"brand": "Bannatyne Health Club"
"brand:wikidata": "Q24993691"
"brand:wikipedia": "en:Bannatyne's"
"leisure": "fitness_centre"
"name": "Bannatyne Health Club"

Whereas the ID Editor's text area requires them to look like this:

brand=Bannatyne Health Club
brand:wikidata=Q24993691
brand:wikipedia=en:Bannatyne's
leisure=fitness_centre
name=Bannatyne Health Club

This means anyone (like @boothym) who wanted to add the Bannatyne's brand tags would need to first copy and paste the tags displayed on the NSI web site, then alter them to match the way ID wants them.

While awaiting for a fresh NSI update into ID, could we maybe provide the ability for a user who is browsing the NSI web site the ability to copy and paste the desired tags in an ID ready fashion?

Today I have been trying to code up a change to the web site that added a clipboard link / icon under each set of tags, that would have automatically copied the brand tags into a users clipboard, but in an ID ready state, but I had to admit defeat as I don't really understand react.

I stated with making the tags area clickable, which would call the function copythistext and carry over the content of the tags into the function, for example:

<td class="tags"><pre class="tags" onclick="copythistext(this.textContent);">
"brand": "Bannatyne Health Club"
"brand:wikidata": "Q24993691"
"brand:wikipedia": "en:Bannatyne's"
"leisure": "fitness_centre"
"name": "Bannatyne Health Club"
</td>

... and when the function was called, a string replace call would replace the quotation marks and colon's with no quotes and an equals sign, so ID could accept it:

function copythistext(IDTags) {
// Replace's colon ('":') with equals (""=") and removes quotation marks (").
var IDNSItags = IDtags.replace(/": /g,'"=').replace(/"/g,'');
// copy ID ready tags to the clipboard.
navigator.clipboard.writeText(IDNSItags);
}

I also tried adding a link under each set of tags, such as:

<p><a href="javascript:copythistext(0);">Copy tags to clipboard for ID Editor!</a></p>

... where the number within the copythistext parentheses would be generated by the react app counting each row as it is generated (so 0 for the first entry, 1 for the second, 2 for the third, etc) and then using a CSS selector to grab all the tags as an array, and using the above number to match the correct set of tags:

function copythistext(IDTags) {
// Get each set of tags as an array
var taglist = document.querySelectorAll("pre.tags");
// match the array set of tags with the number referenced in the function call
var tag = taglist[IDTags].textContent;

// Replace's colon ('":') with equals (""=") and removes quotation marks (").
var IDNSItags = tag.replace(/": /g,'"=').replace(/"/g,'');
// copy ID ready tags to the clipboard.
navigator.clipboard.writeText(IDNSItags);
}

Hopefully someone here with more coding skills that me will understand what I have been trying to achieve, and may be able to implement it within react.

I managed to put together a little example on my local machine, and it seems to work okay. I uploaded it here but only realised now it won't work as it isn't on an SSL server, but the code is visible and it works on my local machine.

enhancement nsi.guide question

Source

UKChris-osm

👍1

All 4 comments

I managed to put together a little example on my local machine, and it seems to work okay. I uploaded it here but only realised now it won't work as it isn't on an SSL server, but the code is visible and it works on my local machine.

Interesting. I tried it out and all it did was copy the Wikidata Q-code. That said, I like the idea. I had a similar thought a while back, but it wasn't anywhere near as thought out as your idea.