From b043fe3e6ae537e77ed6dbde4f83aed9351d87f8 Mon Sep 17 00:00:00 2001 From: Mitja Stachowiak Date: Mon, 22 Apr 2024 02:35:00 +0200 Subject: [PATCH] Ausklappbare Kapitelsektionen --- css/default.css | 30 ++++-- js/fetchText.js | 262 ++++++++++++++++-------------------------------- 2 files changed, 104 insertions(+), 188 deletions(-) diff --git a/css/default.css b/css/default.css index 957c36b..c84cc07 100755 --- a/css/default.css +++ b/css/default.css @@ -712,23 +712,31 @@ aside { .thema > div { border: 2px solid #efebdc; } -.thema > div:before { +.thema > div.quellen { white-space: pre-wrap; } +.thema > div { display: none; } +.thema > div.flapout { display: block; background-color: #efebdc; - color: #bedc0a; + color: #444; font-weight: bold; font-size: 0.8em; line-height: 1em; + cursor: pointer; } -.thema > div.einleitung:before { content: 'Einleitung in das Thema'; } -.thema > div.problem:before { content: 'Problembeschreibung'; } -.thema > div.forderungen:before { content: 'Forderungen'; } -.thema > div.fortschritt:before { content: 'Fortschritt'; } -.thema > div.kosten:before { content: 'Kosten'; } -.thema > div.ziel:before { content: 'Begründung wie das Problem gelöst wird'; } -.thema > div.verteidigung:before { content: 'Entkräften von Gegenargumenten'; } -.thema > div.relevanz:before { content: 'Relevanz: Warum dies ein großes Problem ist'; } - +.thema > div.flapout:hover { + color: #bedc0a; +} +.thema > div.flapout:before { + content: '+'; + display: inline-block; + width: 0.7em; + height: 0.7em; + margin-right: 5px; +} +.thema > div.flapout.open:before { + content: '-'; +} +.thema > div.open { display: block; } table td, .sortable th { diff --git a/js/fetchText.js b/js/fetchText.js index 1a25111..f35fc67 100644 --- a/js/fetchText.js +++ b/js/fetchText.js @@ -2,6 +2,7 @@ var freeFetchedText = null; var makeupForm = null; var chartAcceptanceData = null; var chartAcceptance = null; + function createAcceptanceChart (id) { chartAcceptance = Highcharts.chart(id, { chart: { @@ -170,6 +171,19 @@ function fetchText (win) { var release = false; if (makeupForm.isRelease) release = true; + function isInProgram (className, program) { + let programs = ['grundsatz', 'eu', 'bundestag']; + if (program == 'alles') return true; + let spl = className.split(' '); + let hasProgram = false; + let hasGivenProgram = false; + for (let i = 0; i < spl.length; i++) { + if (programs.includes(spl[i])) hasProgram = true; + if (spl[i] == program) hasGivenProgram = true; + } + return !hasProgram || hasGivenProgram; + } + function deleteElementExtra (el) { // deletes an element from parent and in some special cases also recursively the parent, if it is empty afterwards. let p = el.parentElement; p.removeChild(el); @@ -254,7 +268,7 @@ function fetchText (win) { } } if (el.childNodes[i].nodeType == 1) { // elements - if (el.childNodes[i].tagName.toLowerCase() == 'del' && release) { + if (release && ((el.childNodes[i].tagName.toLowerCase() == 'del') || (!isInProgram(el.childNodes[i].className, makeupForm.selectProgram.value)))) { deleteElementExtra(el.childNodes[i]); continue; } @@ -277,7 +291,11 @@ function fetchText (win) { } } str = el.childNodes[i].getAttribute('ref'); - if (str !== null && str != '') { + if (release) { + el.childNodes[i].removeAttribute('ref'); + el.childNodes[i].removeAttribute('date'); + el.childNodes[i].removeAttribute('autor'); + } else if (str !== null && str != '') { let a = win.document.createElement('a'); a.href = str; a.textContent = '🗨'; @@ -289,10 +307,75 @@ function fetchText (win) { el.childNodes[i].insertBefore(a, el.childNodes[i].firstChild); } iterateContent(el.childNodes[i]); + if ((el.tagName.toLowerCase() == 'div') && ((' '+el.className+' ').indexOf(' thema ') >= 0) && (el.childNodes[i].tagName.toLowerCase() == 'div')) { // Themensektion, anklickbaren Header erzeugen + let flapoutHeader = document.createElement('div'); + flapoutHeader.className = 'flapout'; + flapoutHeader.setAttribute('onclick', 'toggleFlapout(this)'); + let spl = el.childNodes[i].className.split(' '); + for (let j = 0; j < spl.length; j++) + switch (spl[j]) { + case 'einleitung': + flapoutHeader.textContent = 'Einleitung in das Thema'; + flapoutHeader.className += ' open'; + el.childNodes[i].className += ' open'; + break; + case 'problem': + flapoutHeader.textContent = 'Problembeschreibung'; + break; + case 'forderungen': + flapoutHeader.textContent = 'Forderungen'; + flapoutHeader.className += ' open'; + el.childNodes[i].className += ' open'; + break; + case 'fortschritt': + flapoutHeader.textContent = 'Fortschritt'; + break; + case 'beispiel': + flapoutHeader.textContent = 'Beispiel'; + break; + case 'kosten': + flapoutHeader.textContent = 'Kosten'; + break; + case 'ziel': + flapoutHeader.textContent = 'Ziel'; + break; + case 'verteidigung': + flapoutHeader.textContent = 'Entkräften von Gegenargumenten'; + break; + case 'relevanz': + flapoutHeader.textContent = 'Relevanz'; + break; + case 'quellen': + flapoutHeader.textContent = 'Weitere Quellen'; + break; + } + el.insertBefore(flapoutHeader, el.childNodes[i]); + } } } } iterateContent(win.document.body); + let scr = document.createElement('script'); + scr.setAttribute('type', 'text/javascript'); + function toggleFlapout (el) { + let i = 0; + while (el.parentElement.childNodes[i] != el) i++; + do + i++; + while (el.parentElement.childNodes[i].nodeType != 1); + let spl = el.parentElement.childNodes[i].className.split(' '); + let j = spl.indexOf('open'); + if (j >= 0) spl.splice(j, 1); + else spl.push('open'); + el.parentElement.childNodes[i].className = spl.join(' '); + spl = el.className.split(' '); + j = spl.indexOf('open'); + if (j >= 0) spl.splice(j, 1); + else spl.push('open'); + el.className = spl.join(' '); + } + scr.innerHTML = toggleFlapout.toString(); + win.document.body.appendChild(scr); if (release) { document.getElementById('Codeblock').textContent = win.document.body.innerHTML; document.getElementById('Codeblock').style.display = 'block'; @@ -309,179 +392,4 @@ function fetchText (win) { }, false); makeupText(win); filterProgram(win); - - /* - if (!document.getElementById('loadTextBranch').checked) return; - var backup = win.document.createElement('div'); - backup.getElementById = function (id) { - var el = null; - function searchId (p) { - for (let i = 0; i < p.childNodes.length; i++) - if (p.childNodes[i].nodeType == 1) - if (p.childNodes[i].id == id) { - el = p.childNodes[i]; - return; - } else searchId(p.childNodes[i]); - } - searchId(backup); - return el; - }; - while (win.document.body.firstChild) - backup.appendChild(win.document.body.firstChild); - if (backup.getElementById('footer')) win.document.body.appendChild(backup.getElementById('footer')); - win.document.body.className += ' commented'; - var release = false; - if (window.location.href.indexOf('generateFinalHTML') >= 0) release = true; - var counterComments = 0; - freeFetchedText = function () { - counterComments = 0; - backup = null; - } - function scanEmbeddings (el) { - let childs = new Array(); - for (let i = 0; i < el.childNodes.length; i++) - childs.push(el.childNodes[i]); - for (let i = 0; i < childs.length; i++) - if (childs[i].nodeType == 1) scanEmbeddings(childs[i]); - else if (childs[i].nodeType == 3) { - let pos = 0; - let lastReplacePos = 0; - let replaceArr = new Array(); - while (pos < childs[i].textContent.length) { - let start = childs[i].textContent.indexOf('[', pos); - let stop = childs[i].textContent.indexOf(']', pos); - if (stop >= 0) pos = stop+1; - else { - if (lastReplacePos > 0) replaceArr.push(win.document.createTextNode(childs[i].textContent.substring(lastReplacePos, childs[i].textContent.length))); - break; - } - if (start >= 0 && start < stop) { - let shortcode = childs[i].textContent.substring(start+1, stop); - let insertEl = null; - if (shortcode.toLowerCase().indexOf('quelle: ') == 0) { - insertEl = win.document.createElement('footnote'); - let p = shortcode.indexOf(' #'); - if (p > 0 && shortcode.indexOf(' ##') == p) { - let notename = shortcode.substring(p+3, (shortcode.indexOf(' ', p+3) >= 0)?shortcode.indexOf(' ', p+3):shortcode.length); - insertEl.setAttribute('noteref', notename); - } else { - if (p > 0) { - let notename = shortcode.substring(p+2, (shortcode.indexOf(' ', p+2) >= 0)?shortcode.indexOf(' ', p+2):shortcode.length); - insertEl.setAttribute('notename', notename); - shortcode = shortcode.substring(0, p) + shortcode.substring(p+1+notename.length, shortcode.length); - } - insertEl.textContent = shortcode.substring(8, shortcode.length); - } - } else if (shortcode.toLowerCase().indexOf('kommentar: ') == 0) { - insertEl = win.document.createElement('commentnote'); - let textbox = win.document.createElement('div'); - textbox.style.top = (counterComments % 3 - 2) * 0.4 + 'em'; - counterComments++; - textbox.textContent = shortcode.substring(11, shortcode.length); - if (textbox.textContent.indexOf('Überarbeitung:') == 0) insertEl.className += ' redaction'; - insertEl.appendChild(textbox); - } else if (shortcode.toLowerCase().indexOf('zustimmung: ') == 0) { - insertEl = win.document.createElement('acceptance'); - insertEl.textContent = shortcode.substring(12, shortcode.length); - } else insertEl = backup.getElementById(shortcode); - if (insertEl) { - replaceArr.push(win.document.createTextNode(childs[i].textContent.substring(lastReplacePos, start))); - replaceArr.push(insertEl); - lastReplacePos = pos; - } - } - } - if (lastReplacePos > 0) { - while (replaceArr.length > 0) - el.insertBefore(replaceArr.shift(), childs[i]); - el.removeChild(childs[i]); - } - } - } - var srcFile = win.document.getElementsByTagName('title')[0].textContent; //win.document.body.getAttribute('textsource'); - if (!srcFile) return; - var xhttp = new XMLHttpRequest(); - xhttp.onreadystatechange = function () { - if (this.readyState == 4 && this.status == 200) { - let md = new Remarkable(); - let div = win.document.createElement('div'); - div.innerHTML = md.render(xhttp.responseText); - scanEmbeddings(div); - for (let i = div.childNodes.length-1; i >= 0; i--) - win.document.body.insertBefore(div.childNodes[i], win.document.body.firstChild); - } - }; - let branch = 'master'; - if (document.getElementById('branchSelect')) - branch = document.getElementById('branchSelect').value; - let textPath = 'https:\/\/klimaliste-darmstadt-dieburg.de\/system\/php\/cors.php?path='+branch+'\/'+srcFile+'.txt&rand='+Math.round(Math.random()*10000000); - if (win.location.href.indexOf('file:\/\/\/') == 0) textPath = '..\/text\/'+srcFile+'.txt'; - xhttp.open("GET", textPath, false); - xhttp.send(); - - let z = win.document.getElementsByTagName('acceptance'); - for (let i = 0; i < z.length; i++) { - let arr = z[i].textContent.split(','); - let accepted = false; - if (arr.length == 10) { - let nPositiv = 0; - let average = 0; - let sum = 0; - for (let j = 0; j < 10; j++) { - arr[j] = parseInt(arr[j]); - sum += arr[j]; - if (j < 5) { - average += arr[j] * (j-5); - } else { - nPositiv += arr[j]; - average += arr[j] * (j-4); - } - } - z[i].arr = arr; - average /= sum; - accepted = (average > 0) && (nPositiv >= sum / 3 * 2); - z[i].average = average; - } - z[i].accepted = accepted; - z[i].textContent = ''; - let target = z[i].parentElement; - if (target == win.document.body || target.acceptance) target = z[i].nextElementSibling; - if (target) { - target.acceptance = z[i]; - if (target.nodeType == 1) target.setAttribute('zustimmung', z[i].arr.join(',')); - if (release) { - //if (!accepted) target.parentElement.removeChild(target); - } else { - if (accepted) target.className += ' accepted'; - else target.className = ' rejected'; - } - } - } - if (release) { - let comments = win.document.getElementsByTagName('commentnote'); - for (let i = comments.length-1; i >= 0; i--) { - var a = ''; - if (comments[i].acceptance) a = 'zustimmung="'+comments[i].acceptance.arr.join(',')+'" '; - let comment = document.createComment(' '+a+comments[i].textContent+' '); - comments[i].parentElement.insertBefore(comment, comments[i]); - comments[i].parentElement.removeChild(comments[i]); - } - while (win.document.getElementsByTagName('acceptance').length > 0) - win.document.getElementsByTagName('acceptance')[0].parentElement.removeChild(win.document.getElementsByTagName('acceptance')[0]); - //while (win.document.getElementsByTagName('del').length > 0) - // win.document.getElementsByTagName('del')[0].parentElement.removeChild(win.document.getElementsByTagName('del')[0]); - document.getElementById('Codeblock').textContent = win.document.body.innerHTML; - document.getElementById('Codeblock').style.display = 'block'; - } else - win.addEventListener('mousemove', function (ev) { - let el = ev.target; - let arr = null; - while (el) - if (el.acceptance) { - arr = el.acceptance.arr; - break; - } else el = el.parentElement; - parent.showAcceptance(arr); - }, false); - */ };