Skip to content

Commit

Permalink
Add map of Crete for filtering findspots
Browse files Browse the repository at this point in the history
  • Loading branch information
@mwenge
mwenge committed Apr 8, 2020
1 parent 06dd7d3 commit 3c0a023
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 2 deletions.
19 changes: 18 additions & 1 deletion explorer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -479,7 +479,21 @@ dt, dd, font {
.filter-command-container:hover .filter-label {
visibility: visible;
}
#filter-details-container, #search-container {
#findspots {
z-index: 2000;
position: relative;
}
.pin {
position: absolute;
font-family: 'Noto Emoji', sans-serif;
color: rgb(51, 0, 17);
}
#crete-map {
border-radius: 10px;
box-shadow: 0.2em 0.2em 0.8em rgba(0,0,0,0.3);
}

#filter-details-container, #search-container, #findspots {
position: fixed;
left: 50%; /* horizontally centre */
transform: translateX(-50%); /* horizontally centre */
Expand All @@ -490,6 +504,9 @@ dt, dd, font {
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
area {
cursor: pointer;
}
.filter-tag {
cursor: pointer;
padding: 3px;
Expand Down
42 changes: 41 additions & 1 deletion explorer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -653,7 +653,8 @@ function loadInscription(inscription) {
inscription.tagContainer = tagContainer;

var tagsToAdd = [[inscription.support, 'activeSupports', 'supports-command'], [inscription.scribe, 'activeScribes', 'scribes-command'],
[contexts.get(inscription.name), 'activeContexts', 'contexts-command'], [tags.get(inscription.name), 'activeTagValues', 'tags-command']]
[contexts.get(inscription.name), 'activeContexts', 'contexts-command'],
[tags.get(inscription.name), 'activeTagValues', 'tags-command']]
.filter(w => w[0] != undefined && w[0] != "");

tagsToAdd.forEach( tagData => {
Expand Down Expand Up @@ -905,6 +906,7 @@ function hasTag(tag, inscription) {
(contexts.has(inscription.name) && contexts.get(inscription.name).includes(tag)) ||
inscription.support.includes(tag) ||
inscription.wordTags.flat(2).includes(tag) ||
inscription.name.substr(0, 2) == tag ||
inscription.scribe == tag
);
}
Expand Down Expand Up @@ -1036,6 +1038,32 @@ function toggleTag(event, tag) {
applySearchTerms();
}

function showMap(event) {
var findspots = document.getElementById('findspots');
var isVisible = findspots.style.visibility == "visible";
if (isVisible) {
findspots.style.visibility = 'hidden';
Array.prototype.map.call(document.getElementsByClassName("pin"), x => x.style.visibility = "hidden");
return;
}
console.log(activeFindspots);
activeFindspots.forEach( spot => {
var pin = document.getElementById("pin-" + spot);
pin.style.visibility = "visible";
});

var search = document.getElementById("search");
search.style.visibility = "hidden";
document.getElementById("search-command").style.backgroundColor = "black";

var container = document.getElementById("filter-details-container");
container.innerHTML = "";

var container = document.getElementById("findspots");
container.style.visibility = "visible";
}


function showMetadata(event, metadata, activeMetadata, activeMetadataName) {
metadata = metadata.filter(function(item, pos, self) {
return self.indexOf(item) == pos;
Expand All @@ -1045,6 +1073,10 @@ function showMetadata(event, metadata, activeMetadata, activeMetadataName) {
search.style.visibility = "hidden";
document.getElementById("search-command").style.backgroundColor = "black";

var findspots = document.getElementById("findspots");
findspots.style.visibility = "hidden";
Array.prototype.map.call(findspots.getElementsByClassName("pin"), x => x.style.visibility = "hidden");

var container = document.getElementById("filter-details-container");
container.innerHTML = "";

Expand Down Expand Up @@ -1077,6 +1109,13 @@ function toggleMetadatum(event, datum, activeMetadata, commandElementID) {
tagColors[datum] = cycleColor();
}
}

if (commandElementID == "findspots-command") {
var pin = document.getElementById("pin-" + datum);
console.log(pin.style.visibility);
pin.style.visibility = pin.style.visibility == "hidden" ? "visible" : "hidden";
}

var element = document.getElementById(commandElementID);
element.style.backgroundColor = activeMetadata.length ? "purple" : "black";
toggleTag(event, datum);
Expand All @@ -1089,6 +1128,7 @@ var activeScribes = [];
var activeContexts = [];
var activeWordTags = [];
var activeTagValues = [];
var activeFindspots = [];
// Load inscriptions as they come into view
let observer = new IntersectionObserver(function(entries, self) {
entries.forEach(entry => {
Expand Down
Binary file added images/Crete.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
51 changes: 51 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1318,6 +1318,53 @@
</div>
<div id="filter-details-container">
</div>
<div id="findspots">
<img src="images/Crete.jpg" id="crete-map" alt="" usemap="#map" />
<map name="map">
<area shape="rect" coords="491, 116, 509, 130" alt="ZA" title="Zakros"
onclick="toggleMetadatum(event, 'ZA', activeFindspots, 'findspots-command')" />
<area shape="rect" coords="494, 104, 510, 119" alt="PK" title="Palaikastro"
onclick="toggleMetadatum(event, 'PK', activeFindspots, 'findspots-command')" />
<area shape="rect" coords="466, 101, 485, 121" alt="PE" title="Petras"
onclick="toggleMetadatum(event, 'PE', activeFindspots, 'findspots-command')" />
<area shape="rect" coords="383, 132, 401, 148" alt="SY" title="Syme"
onclick="toggleMetadatum(event, 'SY', activeFindspots, 'findspots-command')" />
<area shape="rect" coords="371, 110, 387, 125" alt="PS" title="Pseira"
onclick="toggleMetadatum(event, 'PS', activeFindspots, 'findspots-command')" />
<area shape="rect" coords="349, 87, 367, 103" alt="MA" title="Malia"
onclick="toggleMetadatum(event, 'MA', activeFindspots, 'findspots-command')" />
<area shape="rect" coords="328, 105, 351, 125" alt="AR" title="AR"
onclick="toggleMetadatum(event, 'AR', activeFindspots, 'findspots-command')" />
<area shape="rect" coords="306, 93, 320, 109" alt="IO" title="Iouktas"
onclick="toggleMetadatum(event, 'IO', activeFindspots, 'findspots-command')" />
<area shape="rect" coords="286, 76, 305, 93" alt="KN" title="Knossos"
onclick="toggleMetadatum(event, 'KN', activeFindspots, 'findspots-command')" />
<area shape="rect" coords="271, 93, 286, 109" alt="TY" title="Tylissos"
onclick="toggleMetadatum(event, 'TY', activeFindspots, 'findspots-command')" />
<area shape="rect" coords="247, 139, 268, 160" alt="PH" title="Phaistos"
onclick="toggleMetadatum(event, 'PH', activeFindspots, 'findspots-command')" />
<area shape="rect" coords="228, 136, 245, 152" alt="HT" title="Hagia Tragida"
onclick="toggleMetadatum(event, 'HT', activeFindspots, 'findspots-command')" />
<area shape="rect" coords="215, 111, 237, 127" alt="AP" title="Apodoulou"
onclick="toggleMetadatum(event, 'AP', activeFindspots, 'findspots-command')" />
<area shape="rect" coords="82, 39, 104, 67" alt="KH" title="Kharnia"
onclick="toggleMetadatum(event, 'KH', activeFindspots, 'findspots-command')" />
</map>
<div class="pin" id="pin-ZA" style="left: 501px; top: 101px; visibility: hidden;">&#x1f4cd;</div>
<div class="pin" id="pin-PK" style="left: 504px; top: 89px; visibility: hidden;">&#x1f4cd;</div>
<div class="pin" id="pin-PE" style="left: 476px; top: 85px; visibility: hidden;">&#x1f4cd;</div>
<div class="pin" id="pin-SY" style="left: 393px; top: 115px; visibility: hidden;">&#x1f4cd;</div>
<div class="pin" id="pin-PS" style="left: 381px; top: 95px; visibility: hidden;">&#x1f4cd;</div>
<div class="pin" id="pin-MA" style="left: 359px; top: 62px; visibility: hidden;">&#x1f4cd;</div>
<div class="pin" id="pin-AR" style="left: 338px; top: 90px; visibility: hidden;">&#x1f4cd;</div>
<div class="pin" id="pin-IO" style="left: 316px; top: 75px; visibility: hidden;">&#x1f4cd;</div>
<div class="pin" id="pin-KN" style="left: 296px; top: 60px; visibility: hidden;">&#x1f4cd;</div>
<div class="pin" id="pin-TY" style="left: 281px; top: 80px; visibility: hidden;">&#x1f4cd;</div>
<div class="pin" id="pin-PH" style="left: 257px; top: 114px; visibility: hidden;">&#x1f4cd;</div>
<div class="pin" id="pin-HT" style="left: 238px; top: 121px; visibility: hidden;">&#x1f4cd;</div>
<div class="pin" id="pin-AP" style="left: 225px; top: 95px; visibility: hidden;">&#x1f4cd;</div>
<div class="pin" id="pin-KH" style="left: 92px; top: 25px; visibility: hidden;">&#x1f4cd;</div>
</div>
<div class="bottom-console">
<div class="filters-container">
<div class="filter-command-container">
Expand Down Expand Up @@ -1347,6 +1394,10 @@
<div class="filter-command" id="word-command" onclick="sendKey(event, 'w')">&#x1f4c8;</div>
<div class="filter-label">Frequency</div>
</div>
<div class="filter-command-container">
<div class="filter-command" id="findspots-command" onclick="showMap(event)">&#x1f310;</div>
<div class="filter-label">Findspots</div>
</div>
<div class="filter-command-container">
<div class="filter-command" style="position:relative" id="translate-command" onclick="sendKey(event, 't')">
<span style="position: absolute; top: -10%; left: 25%;">𐘇</span>
Expand Down

0 comments on commit 3c0a023

Please sign in to comment.