From fb6ef2380552e4b1e856ceaacbabf0ee8acc77af Mon Sep 17 00:00:00 2001
From: Abbe98 <albin.post@gmail.com>
Date: Sun, 8 Dec 2024 17:15:38 +0100
Subject: [PATCH] Make the infobox expandable #102

Display official blog URL and official jobs URL (#287) as a start.
---
 static/main.css    | 33 +++++++++++++++++++++++++++++++++
 templates/org.html | 46 +++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 74 insertions(+), 5 deletions(-)

diff --git a/static/main.css b/static/main.css
index 269850accff..078f1924d3b 100644
--- a/static/main.css
+++ b/static/main.css
@@ -50,6 +50,10 @@ a, a:hover {
     color: #fff;
 }
 
+hr {
+    color: inherit;
+}
+
 summary {
     font-size: 1.5rem;
     font-weight: 800;
@@ -452,6 +456,35 @@ header.topic {
     background: #00264d;
     border-radius: 5px;
     padding: 2em;
+    padding-bottom: calc(2em - 29px / 2); /* 29px is the height of the button excluding content */
+}
+
+.infobox .additional-info.collapsed {
+    max-height: 0;
+    overflow: hidden;
+}
+
+.infobox .additional-info {
+    max-height: 1000px;
+    transition: max-height .8s;
+}
+
+.infobox button {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    padding: 0;
+    margin: auto;
+    display: block;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+
+.infobox button:hover {
+    /* bounce the icon slightly */
+    transform: translateY(2px);
+    transition: transform 0.2s;
 }
 
 .btn-list .btn {
diff --git a/templates/org.html b/templates/org.html
index 23061dba3c9..61c1f7536e3 100644
--- a/templates/org.html
+++ b/templates/org.html
@@ -92,6 +92,20 @@ <h1 lang="{{ .orgLabel.Lang }}">{{ .orgLabel }}</h1>
                 </ul>
                 
                 {{ if $details.wikipedia }}<p><a href="{{ $details.wikipedia }}">Read more on Wikipedia.</a></p>{{ end }}
+
+                <div class="additional-info collapsed">
+                    <hr>
+                    <ul>
+                        <li>Official jobs page: <span class="text-grey" id="additional-link-jobs">[missing data]</span></li>
+                        <li>Official blog: <span class="text-grey" id="additional-link-blog">[missing data]</span></li>
+                    </ul>
+                </div>
+
+                <button title="expand" id="expandInfoBoxBtn">
+                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden width="37" height="37" fill="currentColor" class="bi bi-chevron-compact-down" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M1.553 6.776a.5.5 0 0 1 .67-.223L8 9.44l5.776-2.888a.5.5 0 1 1 .448.894l-6 3a.5.5 0 0 1-.448 0l-6-3a.5.5 0 0 1-.223-.67"/>
+                    </svg>
+                </button>
             </div>
 
             <div class="center-text action-boxes">
@@ -199,6 +213,16 @@ <h2 class="m0">Platforms and accounts</h2>
     downloadElm.href = window.URL.createObjectURL(new Blob([tsv], { type: 'text/tsv' }));
 }
 
+const expandInfoBoxBtn = document.querySelector('#expandInfoBoxBtn');
+expandInfoBoxBtn.addEventListener('click', () => {
+    const additionalInfo = document.querySelector('.additional-info');
+    if (additionalInfo.classList.contains('collapsed')) {
+        additionalInfo.classList.remove('collapsed');
+        expandInfoBoxBtn.style.display = 'none';
+        document.querySelector('.infobox').style.paddingBottom = '2em';
+    }
+});
+
 const pageQID = window.location.toString().match(/(Q\d+)\/$/g)[0].slice(0, -1);
 const wikidataEndpoint = 'https://www.wikidata.org/w/api.php?action=wbgetentities&origin=*&format=json&props=claims&ids=';
 const recentAccountsElm = document.querySelector('#recent-accounts');
@@ -210,7 +234,12 @@ <h2 class="m0">Platforms and accounts</h2>
     existingTableText = document.querySelector('table.container').innerHTML;
 }
 
-const props = {
+const additionalLinks = {
+    P10311: 'additional-link-jobs',
+    P1581: 'additional-link-blog',
+};
+
+const socialProps = {
     P2397: ['YouTube', 'https://www.youtube.com/channel/'],
     P4264: ['LinkedIn', 'https://www.linkedin.com/company/'],
     P2013: ['Facebook', 'https://www.facebook.com/'],
@@ -220,7 +249,7 @@ <h2 class="m0">Platforms and accounts</h2>
     P4015: ['Vimeo', 'https://vimeo.com/'],
     P3267: ['Flickr', 'https://www.flickr.com/photos/'],
 };
-const propKeys = Object.keys(props);
+const propKeys = Object.keys(socialProps);
 
 if (pageQID) {
     fetch(wikidataEndpoint + pageQID)
@@ -229,7 +258,7 @@ <h2 class="m0">Platforms and accounts</h2>
           const claims = Object.keys(data.entities[pageQID].claims);
           let updatedAny = false;
           claims.forEach(claim => {
-            const isOldClaim = claim
+            const isOldClaim = claim;
             if (propKeys.includes(claim) && !(existingTableText && existingTableText.includes(claim))) {
                 // check if the claim is old because it has a P582 qualifier
                 if (data.entities[pageQID].claims[claim][0].qualifiers && data.entities[pageQID].claims[claim][0].qualifiers.P582) {
@@ -238,18 +267,25 @@ <h2 class="m0">Platforms and accounts</h2>
 
                 const trElm = document.createElement('TR');
                 const tdNameElm = document.createElement('TD');
-                tdNameElm.innerText = props[claim][0];
+                tdNameElm.innerText = socialProps[claim][0];
                 const account = data.entities[pageQID].claims[claim][0].mainsnak.datavalue.value;
                 const tdLinkElm = document.createElement('TD');
                 const aElm = document.createElement('A');
                 aElm.innerText = account;
-                aElm.href = props[claim][1] + account;
+                aElm.href = socialProps[claim][1] + account;
                 aElm.rel = 'nofollow';
                 tdLinkElm.appendChild(aElm);
                 trElm.appendChild(tdNameElm);
                 trElm.appendChild(tdLinkElm);
                 recentAccountsElm.after(trElm);
                 updatedAny = true;
+            } else if (Object.keys(additionalLinks).includes(claim)) {
+                const additionalLinkElm = document.getElementById(additionalLinks[claim]);
+                if (additionalLinkElm) {
+                    const url = data.entities[pageQID].claims[claim][0].mainsnak.datavalue.value;
+                    const displayText = url.replace('http://', '').replace('https://', '').replace(/\/$/, '');
+                    additionalLinkElm.innerHTML = `<a href="${url}">${displayText}</a>`;
+                }
             }
           });
           if (updatedAny) {