<p></p>
<h3 dir="auto">Problem</h3>
<p dir="auto">There is no diff visualization in the <a href="https://www.openstreetmap.org/node/1/history" rel="nofollow">current OSM object's history section</a>.</p>
<h3 dir="auto">Description</h3>
<p dir="auto"><a href="https://github.com/openstreetmap/openstreetmap-website/assets/70379302/1166e3ad-fd30-4028-ab38-53594db0c5d6">image.png (view on web)</a></p>
<p dir="auto">Embed this CSS and JS to the "/history" page</p>
<p dir="auto">CSS :</p>
<div class="highlight highlight-source-css" dir="auto"><pre class="notranslate"> .<span class="pl-c1">history-diff-new-tag</span> {
<span class="pl-c1">background</span><span class="pl-kos">:</span> <span class="pl-en">rgba</span>(<span class="pl-c1">17</span><span class="pl-kos">,</span><span class="pl-c1">238</span><span class="pl-kos">,</span><span class="pl-c1">9</span><span class="pl-kos">,</span><span class="pl-c1">0.6</span>) <span class="pl-k">!important</span>;
}
.<span class="pl-c1">history-diff-modified-tag</span> {
<span class="pl-c1">background</span><span class="pl-kos">:</span> <span class="pl-en">rgba</span>(<span class="pl-c1">223</span><span class="pl-kos">,</span><span class="pl-c1">238</span><span class="pl-kos">,</span><span class="pl-c1">9</span><span class="pl-kos">,</span><span class="pl-c1">0.6</span>) <span class="pl-k">!important</span>;
}
.<span class="pl-c1">history-diff-deleted-tag</span> {
<span class="pl-c1">background</span><span class="pl-kos">:</span> <span class="pl-en">rgba</span>(<span class="pl-c1">238</span><span class="pl-kos">,</span><span class="pl-c1">51</span><span class="pl-kos">,</span><span class="pl-c1">9</span><span class="pl-kos">,</span><span class="pl-c1">0.6</span>) <span class="pl-k">!important</span>;
}
.<span class="pl-c1">non-modified-tag</span> .<span class="pl-c1">empty-version</span> {
}
.<span class="pl-c1">hidden-non-modified-tag</span><span class="pl-kos">,</span> .<span class="pl-c1">hidden-empty-version</span> {
<span class="pl-c1">display</span><span class="pl-kos">:</span> none;
}
.<span class="pl-c1">hidden-version</span><span class="pl-kos">,</span> .<span class="pl-c1">hidden-h4</span> {
<span class="pl-c1">display</span><span class="pl-kos">:</span> none;
}
<span class="pl-kos">#</span><span class="pl-c1">sidebar_content</span> <span class="pl-ent">h2</span><span class="pl-kos">:</span><span class="pl-c1">not</span>(.<span class="pl-c1">changeset-header</span>){
<span class="pl-c1">font-size</span><span class="pl-kos">:</span> <span class="pl-c1">1<span class="pl-smi">rem</span></span>;
}
<span class="pl-ent">h4</span> {
<span class="pl-c1">font-size</span><span class="pl-kos">:</span> <span class="pl-c1">1<span class="pl-smi">rem</span></span>;
}
.<span class="pl-c1">find-deleted-user-btn</span> {
<span class="pl-c1">cursor</span><span class="pl-kos">:</span> pointer <span class="pl-k">!important</span>;
}
.<span class="pl-c1">copied</span> {
<span class="pl-c1">background-color</span><span class="pl-kos">:</span> red <span class="pl-k">!important</span>;
<span class="pl-c1">transition</span><span class="pl-kos">:</span>all <span class="pl-c1">0.3<span class="pl-smi">s</span></span>;
}
.<span class="pl-c1">was-copied</span> {
<span class="pl-c1">background-color</span><span class="pl-kos">:</span> none <span class="pl-k">!important</span>;
<span class="pl-c1">transition</span><span class="pl-kos">:</span>all <span class="pl-c1">0.3<span class="pl-smi">s</span></span>;
}</pre></div>
<p dir="auto">JS :</p>
<div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-en">addHistoryLink</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">location</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s">"/node"</span><span class="pl-kos">)</span>
<span class="pl-c1">&&</span> <span class="pl-c1">!</span><span class="pl-s1">location</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s">"/way"</span><span class="pl-kos">)</span>
<span class="pl-c1">&&</span> <span class="pl-c1">!</span><span class="pl-s1">location</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s">"/relation"</span><span class="pl-kos">)</span>
<span class="pl-c1">||</span> <span class="pl-s1">location</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s">"/history"</span><span class="pl-kos">)</span>
<span class="pl-kos">)</span> <span class="pl-k">return</span><span class="pl-kos">;</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">'.history_button_class'</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-k">return</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
<span class="pl-k">let</span> <span class="pl-s1">versionInSidebar</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"#sidebar_content h4 a"</span><span class="pl-kos">)</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">versionInSidebar</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">return</span>
<span class="pl-kos">}</span>
<span class="pl-k">let</span> <span class="pl-s1">a</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"a"</span><span class="pl-kos">)</span>
<span class="pl-k">let</span> <span class="pl-s1">curHref</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"#sidebar_content h4 a"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">href</span><span class="pl-kos">.</span><span class="pl-en">match</span><span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span>(.*)\/(\d+)$<span class="pl-c1">/</span></span><span class="pl-kos">)</span>
<span class="pl-s1">a</span><span class="pl-kos">.</span><span class="pl-c1">href</span> <span class="pl-c1">=</span> <span class="pl-s1">curHref</span><span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">]</span>
<span class="pl-s1">a</span><span class="pl-kos">.</span><span class="pl-c1">textContent</span> <span class="pl-c1">=</span> <span class="pl-s">"🕒"</span>
<span class="pl-s1">a</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">"history_button_class"</span><span class="pl-kos">)</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">curHref</span><span class="pl-kos">[</span><span class="pl-c1">2</span><span class="pl-kos">]</span> <span class="pl-c1">!==</span> <span class="pl-s">"1"</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-s1">versionInSidebar</span><span class="pl-kos">.</span><span class="pl-en">after</span><span class="pl-kos">(</span><span class="pl-s1">a</span><span class="pl-kos">)</span>
<span class="pl-s1">versionInSidebar</span><span class="pl-kos">.</span><span class="pl-en">after</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createTextNode</span><span class="pl-kos">(</span><span class="pl-s">"\xA0"</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span>
<span class="pl-kos">}</span>
<span class="pl-k">function</span> <span class="pl-en">makeHistoryCompact</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-c">// todo -> toogleAttribute</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">".compact-toggle-btn"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">textContent</span> <span class="pl-c1">===</span> <span class="pl-s">"><"</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelectorAll</span><span class="pl-kos">(</span><span class="pl-s">".non-modified-tag"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">el</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span>
<span class="pl-s1">el</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">replace</span><span class="pl-kos">(</span><span class="pl-s">"non-modified-tag"</span><span class="pl-kos">,</span> <span class="pl-s">"hidden-non-modified-tag"</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelectorAll</span><span class="pl-kos">(</span><span class="pl-s">".empty-version"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">el</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span>
<span class="pl-s1">el</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">replace</span><span class="pl-kos">(</span><span class="pl-s">"empty-version"</span><span class="pl-kos">,</span> <span class="pl-s">"hidden-empty-version"</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">".compact-toggle-btn"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">textContent</span> <span class="pl-c1">=</span> <span class="pl-s">"<>"</span>
<span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
<span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelectorAll</span><span class="pl-kos">(</span><span class="pl-s">".hidden-non-modified-tag"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">el</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span>
<span class="pl-s1">el</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">replace</span><span class="pl-kos">(</span><span class="pl-s">"hidden-non-modified-tag"</span><span class="pl-kos">,</span> <span class="pl-s">"non-modified-tag"</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelectorAll</span><span class="pl-kos">(</span><span class="pl-s">".hidden-empty-version"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">el</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span>
<span class="pl-s1">el</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">replace</span><span class="pl-kos">(</span><span class="pl-s">"hidden-empty-version"</span><span class="pl-kos">,</span> <span class="pl-s">"empty-version"</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">".compact-toggle-btn"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">textContent</span> <span class="pl-c1">=</span> <span class="pl-s">"><"</span>
<span class="pl-kos">}</span>
<span class="pl-kos">}</span>
<span class="pl-k">function</span> <span class="pl-en">addDiffInHistory</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-en">addHistoryLink</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">location</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s">"/history"</span><span class="pl-kos">)</span>
<span class="pl-c1">||</span> <span class="pl-s1">location</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span> <span class="pl-c1">===</span> <span class="pl-s">"/history"</span>
<span class="pl-c1">||</span> <span class="pl-s1">location</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s">"/history/"</span><span class="pl-kos">)</span>
<span class="pl-kos">)</span> <span class="pl-k">return</span><span class="pl-kos">;</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">".compact-toggle-btn"</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">return</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">location</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s">"/user/"</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">let</span> <span class="pl-s1">compactToggle</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"button"</span><span class="pl-kos">)</span>
<span class="pl-s1">compactToggle</span><span class="pl-kos">.</span><span class="pl-c1">textContent</span> <span class="pl-c1">=</span> <span class="pl-s">"><"</span>
<span class="pl-s1">compactToggle</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">"compact-toggle-btn"</span><span class="pl-kos">)</span>
<span class="pl-s1">compactToggle</span><span class="pl-kos">.</span><span class="pl-c1">onclick</span> <span class="pl-c1">=</span> <span class="pl-s1">makeHistoryCompact</span>
<span class="pl-k">let</span> <span class="pl-s1">sidebar</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"#sidebar_content h2"</span><span class="pl-kos">)</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">sidebar</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">return</span>
<span class="pl-kos">}</span>
<span class="pl-s1">sidebar</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">compactToggle</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span>
<span class="pl-k">let</span> <span class="pl-s1">versions</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-kos">{</span><span class="pl-c1">tags</span>: <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-c1">coordinates</span>: <span class="pl-s">""</span><span class="pl-kos">,</span> <span class="pl-c1">wasModified</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span> <span class="pl-c1">nodes</span>: <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-c1">members</span>: <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-c1">visible</span>: <span class="pl-c1">true</span><span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
<span class="pl-c">// add/modification</span>
<span class="pl-k">let</span> <span class="pl-s1">versionsHTML</span> <span class="pl-c1">=</span> <span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-en">from</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelectorAll</span><span class="pl-kos">(</span><span class="pl-s">".browse-section.browse-node, .browse-section.browse-way, .browse-section.browse-relation"</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
<span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">let</span> <span class="pl-s1">ver</span> <span class="pl-k">of</span> <span class="pl-s1">versionsHTML</span><span class="pl-kos">.</span><span class="pl-en">toReversed</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">let</span> <span class="pl-s1">wasModifiedObject</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>
<span class="pl-k">let</span> <span class="pl-s1">version</span> <span class="pl-c1">=</span> <span class="pl-s1">ver</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">childNodes</span><span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">href</span><span class="pl-kos">.</span><span class="pl-en">match</span><span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span>\/(\d+)$<span class="pl-c1">/</span></span><span class="pl-kos">)</span><span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">]</span>
<span class="pl-k">let</span> <span class="pl-s1">kv</span> <span class="pl-c1">=</span> <span class="pl-s1">ver</span><span class="pl-kos">.</span><span class="pl-en">querySelectorAll</span><span class="pl-kos">(</span><span class="pl-s">"tbody > tr"</span><span class="pl-kos">)</span> <span class="pl-c1">??</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
<span class="pl-k">let</span> <span class="pl-s1">tags</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
<span class="pl-k">let</span> <span class="pl-s1">metainfoHTML</span> <span class="pl-c1">=</span> <span class="pl-s1">ver</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">'ul:nth-child(3) > li:nth-child(1)'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">let</span> <span class="pl-s1">changesetHTML</span> <span class="pl-c1">=</span> <span class="pl-s1">ver</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">'ul:nth-child(3) > li:nth-child(2)'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">let</span> <span class="pl-s1">changesetA</span> <span class="pl-c1">=</span> <span class="pl-s1">ver</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">'ul:nth-child(3) > li:nth-child(2) > a'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">changesetID</span> <span class="pl-c1">=</span> <span class="pl-s1">changesetA</span><span class="pl-kos">.</span><span class="pl-c1">textContent</span>
<span class="pl-k">let</span> <span class="pl-s1">time</span> <span class="pl-c1">=</span> <span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-en">from</span><span class="pl-kos">(</span><span class="pl-s1">metainfoHTML</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">find</span><span class="pl-kos">(</span><span class="pl-s1">i</span> <span class="pl-c1">=></span> <span class="pl-s1">i</span><span class="pl-kos">.</span><span class="pl-c1">localName</span> <span class="pl-c1">===</span> <span class="pl-s">"time"</span><span class="pl-kos">)</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-en">from</span><span class="pl-kos">(</span><span class="pl-s1">metainfoHTML</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">some</span><span class="pl-kos">(</span><span class="pl-s1">e</span> <span class="pl-c1">=></span> <span class="pl-s1">e</span><span class="pl-kos">.</span><span class="pl-c1">localName</span> <span class="pl-c1">===</span> <span class="pl-s">"a"</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">let</span> <span class="pl-s1">a</span> <span class="pl-c1">=</span> <span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-en">from</span><span class="pl-kos">(</span><span class="pl-s1">metainfoHTML</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">find</span><span class="pl-kos">(</span><span class="pl-s1">i</span> <span class="pl-c1">=></span> <span class="pl-s1">i</span><span class="pl-kos">.</span><span class="pl-c1">localName</span> <span class="pl-c1">===</span> <span class="pl-s">"a"</span><span class="pl-kos">)</span>
<span class="pl-s1">metainfoHTML</span><span class="pl-kos">.</span><span class="pl-c1">innerHTML</span> <span class="pl-c1">=</span> <span class="pl-s">""</span>
<span class="pl-s1">metainfoHTML</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">time</span><span class="pl-kos">)</span>
<span class="pl-s1">metainfoHTML</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createTextNode</span><span class="pl-kos">(</span><span class="pl-s">" "</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
<span class="pl-s1">metainfoHTML</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">a</span><span class="pl-kos">)</span>
<span class="pl-s1">metainfoHTML</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createTextNode</span><span class="pl-kos">(</span><span class="pl-s">" "</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
<span class="pl-s1">metainfoHTML</span><span class="pl-kos">.</span><span class="pl-c1">innerHTML</span> <span class="pl-c1">=</span> <span class="pl-s">""</span>
<span class="pl-s1">metainfoHTML</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">time</span><span class="pl-kos">)</span>
<span class="pl-k">let</span> <span class="pl-s1">findBtn</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"a"</span><span class="pl-kos">)</span>
<span class="pl-s1">findBtn</span><span class="pl-kos">.</span><span class="pl-c1">textContent</span> <span class="pl-c1">=</span> <span class="pl-s">" 🔍 "</span>
<span class="pl-s1">findBtn</span><span class="pl-kos">.</span><span class="pl-c1">value</span> <span class="pl-c1">=</span> <span class="pl-s1">changesetID</span>
<span class="pl-s1">findBtn</span><span class="pl-kos">.</span><span class="pl-c1">datetime</span> <span class="pl-c1">=</span> <span class="pl-s1">time</span><span class="pl-kos">.</span><span class="pl-c1">dateTime</span>
<span class="pl-s1">findBtn</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">"find-deleted-user-btn"</span><span class="pl-kos">)</span>
<span class="pl-s1">findBtn</span><span class="pl-kos">.</span><span class="pl-c1">onclick</span> <span class="pl-c1">=</span> <span class="pl-s1">findChangesetInDiff</span>
<span class="pl-s1">metainfoHTML</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">findBtn</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span>
<span class="pl-s1">changesetHTML</span><span class="pl-kos">.</span><span class="pl-c1">innerHTML</span> <span class="pl-c1">=</span> <span class="pl-s">''</span>
<span class="pl-k">let</span> <span class="pl-s1">hashtag</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createTextNode</span><span class="pl-kos">(</span><span class="pl-s">"#"</span><span class="pl-kos">)</span>
<span class="pl-s1">metainfoHTML</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">hashtag</span><span class="pl-kos">)</span>
<span class="pl-s1">metainfoHTML</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">changesetA</span><span class="pl-kos">)</span>
<span class="pl-k">let</span> <span class="pl-s1">visible</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span>
<span class="pl-k">let</span> <span class="pl-s1">coordinates</span> <span class="pl-c1">=</span> <span class="pl-c1">null</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">location</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s">"/node"</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-s1">coordinates</span> <span class="pl-c1">=</span> <span class="pl-s1">ver</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"li:nth-child(3) > a"</span><span class="pl-kos">)</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">coordinates</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">let</span> <span class="pl-s1">locationHTML</span> <span class="pl-c1">=</span> <span class="pl-s1">ver</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">'ul:nth-child(3) > li:nth-child(3)'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">let</span> <span class="pl-s1">locationA</span> <span class="pl-c1">=</span> <span class="pl-s1">ver</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">'ul:nth-child(3) > li:nth-child(3) > a'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">locationHTML</span><span class="pl-kos">.</span><span class="pl-c1">innerHTML</span> <span class="pl-c1">=</span> <span class="pl-s">''</span>
<span class="pl-s1">locationHTML</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">locationA</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
<span class="pl-s1">visible</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span>
<span class="pl-s1">wasModifiedObject</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span> <span class="pl-c">// because sometimes deleted object has tags</span>
<span class="pl-s1">time</span><span class="pl-kos">.</span><span class="pl-en">before</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createTextNode</span><span class="pl-kos">(</span><span class="pl-s">"🗑 "</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span>
<span class="pl-kos">}</span>
<span class="pl-s1">kv</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span>
<span class="pl-kos">(</span><span class="pl-s1">i</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span>
<span class="pl-k">let</span> <span class="pl-s1">k</span> <span class="pl-c1">=</span> <span class="pl-s1">i</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"th > a"</span><span class="pl-kos">)</span><span class="pl-kos">?.</span><span class="pl-c1">textContent</span> <span class="pl-c1">??</span> <span class="pl-s1">i</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"th"</span><span class="pl-kos">)</span><span class="pl-kos">?.</span><span class="pl-c1">textContent</span><span class="pl-kos">;</span>
<span class="pl-k">let</span> <span class="pl-s1">v</span> <span class="pl-c1">=</span> <span class="pl-s1">i</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"td .wdplugin"</span><span class="pl-kos">)</span><span class="pl-kos">?.</span><span class="pl-c1">textContent</span> <span class="pl-c1">??</span> <span class="pl-s1">i</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"td > a"</span><span class="pl-kos">)</span><span class="pl-kos">?.</span><span class="pl-c1">textContent</span> <span class="pl-c1">??</span> <span class="pl-s1">i</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"td"</span><span class="pl-kos">)</span><span class="pl-kos">?.</span><span class="pl-c1">textContent</span><span class="pl-kos">;</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">k</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-c">// Human-readable Wikidata extension compatibility</span>
<span class="pl-k">return</span>
<span class="pl-kos">}</span>
<span class="pl-s1">tags</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s1">k</span><span class="pl-kos">,</span> <span class="pl-s1">v</span><span class="pl-kos">]</span><span class="pl-kos">)</span>
<span class="pl-k">let</span> <span class="pl-s1">lastTags</span> <span class="pl-c1">=</span> <span class="pl-s1">versions</span><span class="pl-kos">.</span><span class="pl-en">slice</span><span class="pl-kos">(</span><span class="pl-c1">-</span><span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">tags</span>
<span class="pl-k">let</span> <span class="pl-s1">tagWasModified</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">lastTags</span><span class="pl-kos">.</span><span class="pl-en">some</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">elem</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-s1">elem</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span> <span class="pl-c1">===</span> <span class="pl-s1">k</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-s1">i</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"th"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">"history-diff-new-tag"</span><span class="pl-kos">)</span>
<span class="pl-s1">i</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"td"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">"history-diff-new-tag"</span><span class="pl-kos">)</span>
<span class="pl-s1">wasModifiedObject</span> <span class="pl-c1">=</span> <span class="pl-s1">tagWasModified</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span>
<span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">lastTags</span><span class="pl-kos">.</span><span class="pl-en">some</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">elem</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-s1">elem</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span> <span class="pl-c1">===</span> <span class="pl-s1">k</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-s1">lastTags</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">el</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">el</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span> <span class="pl-c1">===</span> <span class="pl-s1">k</span> <span class="pl-c1">&&</span> <span class="pl-s1">el</span><span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">]</span> <span class="pl-c1">!==</span> <span class="pl-s1">v</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-s1">i</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"th"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">"history-diff-modified-key"</span><span class="pl-kos">)</span>
<span class="pl-s1">i</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"td"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">"history-diff-modified-tag"</span><span class="pl-kos">)</span>
<span class="pl-s1">i</span><span class="pl-kos">.</span><span class="pl-c1">title</span> <span class="pl-c1">=</span> <span class="pl-s">`was: "<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">el</span><span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">}</span></span>"`</span><span class="pl-kos">;</span>
<span class="pl-s1">wasModifiedObject</span> <span class="pl-c1">=</span> <span class="pl-s1">tagWasModified</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span>
<span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">tagWasModified</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-s1">i</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"th"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">"non-modified-tag"</span><span class="pl-kos">)</span>
<span class="pl-s1">i</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"td"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">"non-modified-tag"</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span>
<span class="pl-kos">}</span>
<span class="pl-kos">)</span>
<span class="pl-k">let</span> <span class="pl-s1">lastCoordinates</span> <span class="pl-c1">=</span> <span class="pl-s1">versions</span><span class="pl-kos">.</span><span class="pl-en">slice</span><span class="pl-kos">(</span><span class="pl-c1">-</span><span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">coordinates</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">visible</span> <span class="pl-c1">&&</span> <span class="pl-s1">coordinates</span> <span class="pl-c1">&&</span> <span class="pl-s1">versions</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">></span> <span class="pl-c1">1</span> <span class="pl-c1">&&</span> <span class="pl-s1">coordinates</span><span class="pl-kos">.</span><span class="pl-c1">href</span> <span class="pl-c1">!==</span> <span class="pl-s1">lastCoordinates</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">lastCoordinates</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">const</span> <span class="pl-s1">curLat</span> <span class="pl-c1">=</span> <span class="pl-s1">coordinates</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">".latitude"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">textContent</span><span class="pl-kos">.</span><span class="pl-en">replace</span><span class="pl-kos">(</span><span class="pl-s">","</span><span class="pl-kos">,</span> <span class="pl-s">"."</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">curLon</span> <span class="pl-c1">=</span> <span class="pl-s1">coordinates</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">".longitude"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">textContent</span><span class="pl-kos">.</span><span class="pl-en">replace</span><span class="pl-kos">(</span><span class="pl-s">","</span><span class="pl-kos">,</span> <span class="pl-s">"."</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">lastLat</span> <span class="pl-c1">=</span> <span class="pl-s1">lastCoordinates</span><span class="pl-kos">.</span><span class="pl-en">match</span><span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span>#map=.+\/(.+)\/(.+)$<span class="pl-c1">/</span></span><span class="pl-kos">)</span><span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">lastLon</span> <span class="pl-c1">=</span> <span class="pl-s1">lastCoordinates</span><span class="pl-kos">.</span><span class="pl-en">match</span><span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span>#map=.+\/(.+)\/(.+)$<span class="pl-c1">/</span></span><span class="pl-kos">)</span><span class="pl-kos">[</span><span class="pl-c1">2</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">distInMeters</span> <span class="pl-c1">=</span> <span class="pl-en">getDistanceFromLatLonInKm</span><span class="pl-kos">(</span>
<span class="pl-v">Number</span><span class="pl-kos">.</span><span class="pl-en">parseFloat</span><span class="pl-kos">(</span><span class="pl-s1">lastLat</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
<span class="pl-v">Number</span><span class="pl-kos">.</span><span class="pl-en">parseFloat</span><span class="pl-kos">(</span><span class="pl-s1">lastLon</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
<span class="pl-v">Number</span><span class="pl-kos">.</span><span class="pl-en">parseFloat</span><span class="pl-kos">(</span><span class="pl-s1">curLat</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
<span class="pl-v">Number</span><span class="pl-kos">.</span><span class="pl-en">parseFloat</span><span class="pl-kos">(</span><span class="pl-s1">curLon</span><span class="pl-kos">)</span>
<span class="pl-kos">)</span> <span class="pl-c1">*</span> <span class="pl-c1">1000</span><span class="pl-kos">;</span>
<span class="pl-k">debugger</span>
<span class="pl-k">const</span> <span class="pl-s1">distTxt</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"span"</span><span class="pl-kos">)</span>
<span class="pl-s1">distTxt</span><span class="pl-kos">.</span><span class="pl-c1">textContent</span> <span class="pl-c1">=</span> <span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">distInMeters</span><span class="pl-kos">.</span><span class="pl-en">toFixed</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">}</span></span>m`</span>
<span class="pl-s1">distTxt</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">"history-diff-modified-tag"</span><span class="pl-kos">)</span>
<span class="pl-s1">coordinates</span><span class="pl-kos">.</span><span class="pl-en">after</span><span class="pl-kos">(</span><span class="pl-s1">distTxt</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">coordinates</span><span class="pl-kos">.</span><span class="pl-en">after</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createTextNode</span><span class="pl-kos">(</span><span class="pl-s">" "</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-s1">wasModifiedObject</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span>
<span class="pl-kos">}</span>
<span class="pl-k">let</span> <span class="pl-s1">childNodes</span> <span class="pl-c1">=</span> <span class="pl-c1">null</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">location</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s">"/way"</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-s1">location</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s">"/relation"</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-s1">childNodes</span> <span class="pl-c1">=</span> <span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-en">from</span><span class="pl-kos">(</span><span class="pl-s1">ver</span><span class="pl-kos">.</span><span class="pl-en">querySelectorAll</span><span class="pl-kos">(</span><span class="pl-s">"details ul.list-unstyled li a:first-child"</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">el</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-s1">el</span><span class="pl-kos">.</span><span class="pl-c1">href</span><span class="pl-kos">)</span>
<span class="pl-k">let</span> <span class="pl-s1">lastChildNodes</span> <span class="pl-c1">=</span> <span class="pl-s1">versions</span><span class="pl-kos">.</span><span class="pl-en">slice</span><span class="pl-kos">(</span><span class="pl-c1">-</span><span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">nodes</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">version</span> <span class="pl-c1">></span> <span class="pl-c1">1</span> <span class="pl-c1">&&</span>
<span class="pl-kos">(</span><span class="pl-s1">childNodes</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">!==</span> <span class="pl-s1">lastChildNodes</span><span class="pl-kos">.</span><span class="pl-c1">length</span>
<span class="pl-c1">||</span> <span class="pl-s1">childNodes</span><span class="pl-kos">.</span><span class="pl-en">some</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">el</span><span class="pl-kos">,</span> <span class="pl-s1">index</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-s1">lastChildNodes</span><span class="pl-kos">[</span><span class="pl-s1">index</span><span class="pl-kos">]</span> <span class="pl-c1">!==</span> <span class="pl-s1">childNodes</span><span class="pl-kos">[</span><span class="pl-s1">index</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-s1">ver</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"details > summary"</span><span class="pl-kos">)</span><span class="pl-kos">?.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">"history-diff-modified-tag"</span><span class="pl-kos">)</span>
<span class="pl-s1">wasModifiedObject</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span>
<span class="pl-kos">}</span>
<span class="pl-s1">ver</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"details"</span><span class="pl-kos">)</span><span class="pl-kos">?.</span><span class="pl-en">removeAttribute</span><span class="pl-kos">(</span><span class="pl-s">"open"</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span>
<span class="pl-s1">versions</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
<span class="pl-c1">tags</span>: <span class="pl-s1">tags</span><span class="pl-kos">,</span>
<span class="pl-c1">coordinates</span>: <span class="pl-s1">coordinates</span><span class="pl-kos">?.</span><span class="pl-c1">href</span> <span class="pl-c1">??</span> <span class="pl-s1">lastCoordinates</span><span class="pl-kos">,</span>
<span class="pl-c1">wasModified</span>: <span class="pl-s1">wasModifiedObject</span><span class="pl-kos">,</span>
<span class="pl-c1">nodes</span>: <span class="pl-s1">childNodes</span><span class="pl-kos">,</span>
<span class="pl-c1">members</span>: <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
<span class="pl-c1">visible</span>: <span class="pl-s1">visible</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-s1">ver</span><span class="pl-kos">.</span><span class="pl-en">querySelectorAll</span><span class="pl-kos">(</span><span class="pl-s">"h4"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">el</span><span class="pl-kos">,</span> <span class="pl-s1">index</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">(</span><span class="pl-s1">index</span> <span class="pl-c1">!==</span> <span class="pl-c1">0</span><span class="pl-kos">)</span> ? <span class="pl-s1">el</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">"hidden-h4"</span><span class="pl-kos">)</span> : <span class="pl-c1">null</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span>
<span class="pl-c">// deletion</span>
<span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-en">from</span><span class="pl-kos">(</span><span class="pl-s1">versionsHTML</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">x</span><span class="pl-kos">,</span> <span class="pl-s1">index</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">versionsHTML</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1"><=</span> <span class="pl-s1">index</span> <span class="pl-c1">+</span> <span class="pl-c1">1</span><span class="pl-kos">)</span> <span class="pl-k">return</span><span class="pl-kos">;</span>
<span class="pl-s1">versions</span><span class="pl-kos">.</span><span class="pl-en">toReversed</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">[</span><span class="pl-s1">index</span> <span class="pl-c1">+</span> <span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">tags</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">tag</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span>
<span class="pl-k">let</span> <span class="pl-s1">k</span> <span class="pl-c1">=</span> <span class="pl-s1">tag</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span>
<span class="pl-k">let</span> <span class="pl-s1">v</span> <span class="pl-c1">=</span> <span class="pl-s1">tag</span><span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">]</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">versions</span><span class="pl-kos">.</span><span class="pl-en">toReversed</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">[</span><span class="pl-s1">index</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">tags</span><span class="pl-kos">.</span><span class="pl-en">some</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">elem</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-s1">elem</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span> <span class="pl-c1">===</span> <span class="pl-s1">k</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">let</span> <span class="pl-s1">tr</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"tr"</span><span class="pl-kos">)</span>
<span class="pl-k">let</span> <span class="pl-s1">th</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"th"</span><span class="pl-kos">)</span>
<span class="pl-s1">th</span><span class="pl-kos">.</span><span class="pl-c1">textContent</span> <span class="pl-c1">=</span> <span class="pl-s1">k</span>
<span class="pl-s1">th</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">"history-diff-deleted-tag"</span><span class="pl-kos">,</span> <span class="pl-s">"py-1"</span><span class="pl-kos">,</span> <span class="pl-s">"border-grey"</span><span class="pl-kos">,</span> <span class="pl-s">"table-light"</span><span class="pl-kos">,</span> <span class="pl-s">"fw-normal"</span><span class="pl-kos">)</span>
<span class="pl-k">let</span> <span class="pl-s1">td</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"td"</span><span class="pl-kos">)</span>
<span class="pl-s1">td</span><span class="pl-kos">.</span><span class="pl-c1">textContent</span> <span class="pl-c1">=</span> <span class="pl-s1">v</span>
<span class="pl-s1">td</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">"history-diff-deleted-tag"</span><span class="pl-kos">,</span> <span class="pl-s">"py-1"</span><span class="pl-kos">,</span> <span class="pl-s">"border-grey"</span><span class="pl-kos">,</span> <span class="pl-s">"table-light"</span><span class="pl-kos">,</span> <span class="pl-s">"fw-normal"</span><span class="pl-kos">)</span>
<span class="pl-s1">tr</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">th</span><span class="pl-kos">)</span>
<span class="pl-s1">tr</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">td</span><span class="pl-kos">)</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">x</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"tbody"</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">let</span> <span class="pl-s1">tableDiv</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"table"</span><span class="pl-kos">)</span>
<span class="pl-s1">tableDiv</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">"mb-3"</span><span class="pl-kos">,</span> <span class="pl-s">"border"</span><span class="pl-kos">,</span> <span class="pl-s">"border-secondary-subtle"</span><span class="pl-kos">,</span> <span class="pl-s">"rounded"</span><span class="pl-kos">,</span> <span class="pl-s">"overflow-hidden"</span><span class="pl-kos">)</span>
<span class="pl-k">let</span> <span class="pl-s1">table</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"table"</span><span class="pl-kos">)</span>
<span class="pl-s1">table</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">"mb-0"</span><span class="pl-kos">,</span> <span class="pl-s">"browse-tag-list"</span><span class="pl-kos">,</span> <span class="pl-s">"table"</span><span class="pl-kos">,</span> <span class="pl-s">"align-middle"</span><span class="pl-kos">)</span>
<span class="pl-k">let</span> <span class="pl-s1">tbody</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"tbody"</span><span class="pl-kos">)</span>
<span class="pl-s1">table</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">tbody</span><span class="pl-kos">)</span>
<span class="pl-s1">tableDiv</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">table</span><span class="pl-kos">)</span>
<span class="pl-s1">x</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">tableDiv</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span>
<span class="pl-s1">x</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"tbody"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">prepend</span><span class="pl-kos">(</span><span class="pl-s1">tr</span><span class="pl-kos">)</span>
<span class="pl-s1">versions</span><span class="pl-kos">[</span><span class="pl-s1">versions</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">-</span> <span class="pl-s1">index</span> <span class="pl-c1">-</span> <span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">wasModified</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span>
<span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">versions</span><span class="pl-kos">[</span><span class="pl-s1">versions</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">-</span> <span class="pl-s1">index</span> <span class="pl-c1">-</span> <span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">wasModified</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">let</span> <span class="pl-s1">spoiler</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"details"</span><span class="pl-kos">)</span>
<span class="pl-k">let</span> <span class="pl-s1">summary</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"summary"</span><span class="pl-kos">)</span>
<span class="pl-s1">summary</span><span class="pl-kos">.</span><span class="pl-c1">textContent</span> <span class="pl-c1">=</span> <span class="pl-s1">x</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"a"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">textContent</span>
<span class="pl-s1">spoiler</span><span class="pl-kos">.</span><span class="pl-c1">innerHTML</span> <span class="pl-c1">=</span> <span class="pl-s1">x</span><span class="pl-kos">.</span><span class="pl-c1">innerHTML</span>
<span class="pl-s1">spoiler</span><span class="pl-kos">.</span><span class="pl-en">prepend</span><span class="pl-kos">(</span><span class="pl-s1">summary</span><span class="pl-kos">)</span>
<span class="pl-s1">spoiler</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">"empty-version"</span><span class="pl-kos">)</span>
<span class="pl-s1">x</span><span class="pl-kos">.</span><span class="pl-en">replaceWith</span><span class="pl-kos">(</span><span class="pl-s1">spoiler</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-v">Array</span><span class="pl-kos">.</span><span class="pl-en">from</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementsByClassName</span><span class="pl-kos">(</span><span class="pl-s">"browse-section browse-redacted"</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span>
<span class="pl-kos">(</span><span class="pl-s1">elem</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span>
<span class="pl-s1">elem</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">"hidden-version"</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span>
<span class="pl-kos">)</span>
<span class="pl-en">makeHistoryCompact</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-en">addDiffInHistory</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><a href="https://github.com/deevroman/better-osm-org?tab=readme-ov-file">Test via Tampermonkey</a></p>
<h3 dir="auto">Screenshots</h3>
<p dir="auto"><em>No response</em></p>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/issues/4765">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLJF2JLVIGU6EN2VBHLZBDN3RAVCNFSM6AAAAABHLCXIYCVHI2DSMVQWIX3LMV43ASLTON2WKOZSGI4DGNBWHAYDIMI">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLLNV2VKK5AS5RSHEFLZBDN3RA5CNFSM6AAAAABHLCXIYCWGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHIQGXVBE.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/issues/4765</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/issues/4765",
"url": "https://github.com/openstreetmap/openstreetmap-website/issues/4765",
"name": "View Issue"
},
"description": "View this Issue on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>