<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ article.enwiki }} – dab mechanic</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet"
href="//en.wikipedia.org/w/load.php?debug=false&lang=en&modules=mediawiki.legacy.commonPrint,shared|skins.vector.styles&only=styles&skin=vector&*">
<link rel="stylesheet" href="//en.wikipedia.org/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector"/>
<link rel="stylesheet" href="//en.wikipedia.org/w/load.php?lang=en&modules=ext.cite.styles&only=styles&skin=vector"/>
<style>
a.disambig { color: #ff8c00; }
a.disambig-highlight { color: #ff8c00; border: 2px solid #ff8c00; }
a.new { color: red; }
#top {
position: fixed;
left: 0px;
right: 0px;
height: 4em;
background: white;
z-index: 0;
}
#article {
padding-left: 40%;
}
.dab-highlight {
border: 2px solid blue;
}
#dabs {
position: fixed;
top: 0em;
left: 0px;
width: 40%;
overflow: auto;
bottom: 0px;
}
.card-highlight {
color: #000 !important;
background-color: #FFD580 !important;
}
</style>
</head>
<body>
<div id="dabs" class="p-3">
<h1>{{ article.enwiki }}</h1>
<div id="save-panel" class="d-none">
<form method="POST" action="{{ article.save_endpoint() }}">
<button class="btn btn-primary" id="save-btn">Save</button>
<span id="edit-count"></span>
<input type="hidden" value="{}" id="save-edits" name="edits">
</form>
</div>
<div>There are {{ article.dab_list | count }} links in the article that need disambiguating.</div>
{% for dab in article.dab_list %}
<div class="card p-1 m-2">
<h3 class="card-title" id="dab-card-title-{{ dab.num }}" onclick="return jump_to({{ dab.num }})">{{ dab.title }}</h3>
<div>
<a href="#" onclick="return jump_to({{ dab.num }})">highlight link</a>
<span class="d-none" id="cancel-{{ dab.num }}">
|
<a href="#" onclick="return cancel_selection({{ dab.num }})">cancel selection</a>
</span>
</div>
<div class="dab-article" id="dab-article-{{ dab.num }}">{{ dab.html | safe }}</div>
</div>
{% endfor %}
</div>
<div id="article" class="pe-3">
<div>{{ article.get_html() | safe }}</div>
</div>
</div>
</div>
<script>
var edit_set = new Set();
var edits = {};
var dab_lookup = {{ article.dab_lookup | tojson }};
var dab_order = {{ article.dab_order | tojson }};
function jump_to(dab_num) {
var highlight_title = "text-bg-primary";
var links = document.getElementsByTagName("a");
for(var i=0; i<links.length; i++) {
links[i].classList.remove("disambig-highlight");
}
var card_titles = document.getElementsByClassName("card-title");
for(var i=0; i<card_titles.length; i++) {
card_titles[i].classList.remove(highlight_title);
}
var card_title = document.getElementById("dab-card-title-" + dab_num);
card_title.classList.add(highlight_title);
var link = document.getElementById("dab-" + dab_num);
link.scrollIntoView();
link.classList.add("disambig-highlight")
return false;
}
function clear_dab_highlight(dab_num) {
var dab_article = document.getElementById("dab-article-" + dab_num);
var links = dab_article.querySelectorAll("a");
for(var i=0; i<links.length; i++) {
links[i].classList.remove("dab-highlight");
}
}
function update_edit_count() {
var save_panel = document.getElementById("save-panel")
if (edit_set.size) {
save_panel.classList.remove("d-none");
var edit_count = edit_set.size == 1 ? "1 edit" : edit_set.size + " edits";
document.getElementById("edit-count").textContent = edit_count;
} else {
save_panel.classList.add("d-none");
document.getElementById("edit-count").textContent = "";
}
}
function update_edits() {
var saves = dab_order.filter(t => edits[t]).map(t => [t, edits[t]]);
var save_edits = document.getElementById("save-edits");
save_edits.value = JSON.stringify(saves);
}
function select_dab(element, dab_num) {
jump_to(dab_num);
document.getElementById("cancel-" + dab_num).classList.remove("d-none");
var title = element.getAttribute("title");
edits[dab_lookup[dab_num]] = title;
edit_set.add(dab_num);
update_edits();
update_edit_count();
clear_dab_highlight(dab_num);
var dab_article = document.getElementById("dab-article-" + dab_num);
var links = dab_article.querySelectorAll("a");
for(var i=0; i<links.length; i++) {
links[i].classList.remove("dab-highlight");
}
var title = element.getAttribute("title");
element.classList.add("dab-highlight");
console.log(title, dab_num);
return false;
}
function cancel_selection(dab_num) {
delete edits[dab_lookup[dab_num]];
document.getElementById("cancel-" + dab_num).classList.add("d-none");
clear_dab_highlight(dab_num);
edit_set.delete(dab_num);
update_edits();
update_edit_count();
return false;
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>