mirror of
https://github.com/Theodor-Springmann-Stiftung/hamann-ausgabe-core.git
synced 2025-10-30 01:35:32 +00:00
- Commentboxes work (marginals) + mouseover
- Basic Briefe Controller - Generic XML reader
This commit is contained in:
schnulller
@@ -468,6 +468,8 @@ Ensure the default browser behavior of the `hidden` attribute.
|
||||
--tw-backdrop-sepia: ;
|
||||
}
|
||||
|
||||
/* TODO: check what can be inlined (eg. used once in the code, has no double paths etc...) */
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@@ -808,6 +810,8 @@ body {
|
||||
|
||||
.ha-register .ha-register-head {
|
||||
border-bottom-width: 2px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(226 232 240 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.ha-register .ha-register-head h1 {
|
||||
@@ -855,6 +859,8 @@ body {
|
||||
|
||||
.ha-register .ha-register-head .ha-register-nav a.active {
|
||||
border-bottom-width: 2px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(226 232 240 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.ha-register .ha-register-head .ha-register-nav .ha-register-left-nav {
|
||||
@@ -967,30 +973,29 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.ha-register .ha-neuzeit .ha-register-body .ha-headcomment .ha-commenthead .ha-letlinks, .ha-register .ha-forschung .ha-register-body .ha-headcomment .ha-commenthead .ha-letlinks {
|
||||
padding-left: 0.5rem;
|
||||
.ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks .ha-hkb {
|
||||
display: inline;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
@media (min-width: 1190px) {
|
||||
.ha-register .ha-neuzeit .ha-register-body .ha-headcomment .ha-commenthead .ha-letlinks, .ha-register .ha-forschung .ha-register-body .ha-headcomment .ha-commenthead .ha-letlinks {
|
||||
position: absolute;
|
||||
left: 48rem;
|
||||
top: 0px;
|
||||
display: block;
|
||||
width: 20rem;
|
||||
border-left-width: 2px;
|
||||
text-indent: 0px;
|
||||
}
|
||||
|
||||
.ha-register .ha-neuzeit .ha-register-body .ha-subcomment .ha-commenthead .ha-letlinks, .ha-register .ha-forschung .ha-register-body .ha-subcomment .ha-commenthead .ha-letlinks {
|
||||
left: 46rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ha-register .ha-neuzeit .ha-register-body .ha-subcomment .ha-commenthead .ha-letlinks, .ha-register .ha-forschung .ha-register-body .ha-headcomment .ha-commenthead .ha-letlinks {
|
||||
.ha-register .ha-neuzeit .ha-register-body .ha-commenthead .ha-letlinks, .ha-register .ha-forschung .ha-register-body .ha-commenthead .ha-letlinks {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1190px) {
|
||||
.ha-register .ha-neuzeit .ha-register-body .ha-subcomment .ha-commenthead .ha-letlinks, .ha-register .ha-forschung .ha-register-body .ha-headcomment .ha-commenthead .ha-letlinks {
|
||||
.ha-register .ha-neuzeit .ha-register-body .ha-commenthead .ha-letlinks, .ha-register .ha-forschung .ha-register-body .ha-commenthead .ha-letlinks {
|
||||
position: absolute;
|
||||
left: 46rem;
|
||||
top: 0px;
|
||||
display: block;
|
||||
width: 20rem;
|
||||
@@ -1190,12 +1195,55 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.pointer-events-none {
|
||||
pointer-events: none;
|
||||
.ha-register .ha-headcomment .ha-btn-collapsed-box {
|
||||
left: 47.6rem;
|
||||
}
|
||||
|
||||
.static {
|
||||
position: static;
|
||||
.ha-register .ha-subcomment .ha-btn-collapsed-box {
|
||||
left: 45.6rem;
|
||||
}
|
||||
|
||||
.ha-register .ha-btn-collapsed-box {
|
||||
position: absolute;
|
||||
top: -0.25rem;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.ha-register .ha-btn-collapsed-box:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
@media (min-width: 1190px) {
|
||||
.ha-register .ha-btn-collapsed-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.ha-register .ha-neuzeit .ha-register-body .ha-commenthead .ha-collapsed-box, .ha-register .ha-forschung .ha-register-body .ha-commenthead .ha-collapsed-box {
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ha-register .ha-neuzeit .ha-register-body .ha-commenthead .ha-expanded-box, .ha-register .ha-forschung .ha-register-body .ha-commenthead .ha-expanded-box {
|
||||
z-index: 1000;
|
||||
height: auto !important;
|
||||
max-height: 100vh !important;
|
||||
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
/* .ha-register .ha-neuzeit .ha-register-body .ha-commenthead .ha-collapsed-box:hover,
|
||||
.ha-register .ha-forschung .ha-register-body .ha-commenthead .ha-collapsed-box:hover {
|
||||
@apply shadow-md z-[1000] !h-auto
|
||||
} */
|
||||
|
||||
.pointer-events-none {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
@@ -1286,6 +1334,10 @@ body {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.resize {
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.list-disc {
|
||||
list-style-type: disc;
|
||||
}
|
||||
@@ -1391,12 +1443,12 @@ body {
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
/* Regular woff-files for regular font variants
|
||||
Instead we use the Graphite versions of the font currently
|
||||
/* Regular woff-files for regular font variants curerently
|
||||
Instead we can use the Graphite versions of the font
|
||||
|
||||
@font-face {
|
||||
font-family: 'Biolinum';
|
||||
src: url('../fonts/LinBiolinum_R.woff') format('woff');
|
||||
src: url('/fonts/LinBiolinum_R_G.ttf') format('truetype');
|
||||
font-display: swap;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
@@ -1404,7 +1456,7 @@ body {
|
||||
|
||||
@font-face {
|
||||
font-family: 'Libertine';
|
||||
src: url('../fonts/LinLibertine_R.woff') format('woff');
|
||||
src: url('/fonts/LinLibertine_R_G.ttf') format('truetype');
|
||||
font-display: swap;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
@@ -1415,7 +1467,7 @@ body {
|
||||
@font-face {
|
||||
font-family: 'Biolinum';
|
||||
|
||||
src: url('/fonts/LinBiolinum_R_G.ttf') format('truetype');
|
||||
src: url('../fonts/LinBiolinum_R.woff') format('woff');
|
||||
|
||||
font-display: swap;
|
||||
|
||||
@@ -1427,7 +1479,7 @@ body {
|
||||
@font-face {
|
||||
font-family: 'Libertine';
|
||||
|
||||
src: url('/fonts/LinLibertine_R_G.ttf') format('truetype');
|
||||
src: url('../fonts/LinLibertine_R.woff') format('woff');
|
||||
|
||||
font-display: swap;
|
||||
|
||||
@@ -1510,6 +1562,10 @@ body {
|
||||
list-style-type:circle;
|
||||
} */
|
||||
|
||||
.downshadow-sm {
|
||||
box-shadow: 5px 6px 5px -7px rgba(0,0,0,0.79);
|
||||
}
|
||||
|
||||
.hyphenate {
|
||||
-webkit-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
@@ -1570,14 +1626,24 @@ body {
|
||||
color:#000000;
|
||||
}
|
||||
|
||||
.ha-open-btn-collapsed-box::before {
|
||||
content: '\200E+';
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.ha-close-btn-collapsed-box::before {
|
||||
content: '\200E\00D7';
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* Not possible otherwise, overwrites javascript set style values, which cant be defined before render */
|
||||
|
||||
@media (max-width: 1190px) {
|
||||
.ha-register .ha-neuzeit .ha-register-body .ha-subcomment .ha-commenthead .ha-letlinks {
|
||||
height: auto !important;
|
||||
overflow: unset !important;
|
||||
}
|
||||
}
|
||||
/* @media (max-width: 1190px) {
|
||||
.ha-register .ha-neuzeit .ha-register-body .ha-subcomment .ha-commenthead .ha-letlinks {
|
||||
height: auto !important;
|
||||
overflow: unset !important;
|
||||
}
|
||||
} */
|
||||
|
||||
.hover\:text-black:hover {
|
||||
--tw-text-opacity: 1;
|
||||
|
||||
@@ -2,26 +2,8 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Regular woff-files for regular font variants
|
||||
Instead we use the Graphite versions of the font currently
|
||||
|
||||
@font-face {
|
||||
font-family: 'Biolinum';
|
||||
src: url('../fonts/LinBiolinum_R.woff') format('woff');
|
||||
font-display: swap;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Libertine';
|
||||
src: url('../fonts/LinLibertine_R.woff') format('woff');
|
||||
font-display: swap;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
*/
|
||||
/* Regular woff-files for regular font variants curerently
|
||||
Instead we can use the Graphite versions of the font
|
||||
|
||||
@font-face {
|
||||
font-family: 'Biolinum';
|
||||
@@ -39,6 +21,24 @@
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Biolinum';
|
||||
src: url('../fonts/LinBiolinum_R.woff') format('woff');
|
||||
font-display: swap;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Libertine';
|
||||
src: url('../fonts/LinLibertine_R.woff') format('woff');
|
||||
font-display: swap;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Biolinum';
|
||||
src: url('../fonts/LinBiolinum_RI.woff') format('woff');
|
||||
@@ -80,6 +80,7 @@
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* TODO: check what can be inlined (eg. used once in the code, has no double paths etc...) */
|
||||
body {
|
||||
@apply text-base desktop:text-lg w-full h-full
|
||||
}
|
||||
@@ -202,7 +203,7 @@
|
||||
}
|
||||
|
||||
.ha-register .ha-register-head {
|
||||
@apply border-b-2
|
||||
@apply border-b-2 border-slate-200
|
||||
}
|
||||
|
||||
.ha-register .ha-register-head h1 {
|
||||
@@ -222,7 +223,7 @@
|
||||
}
|
||||
|
||||
.ha-register .ha-register-head .ha-register-nav a.active {
|
||||
@apply border-b-2
|
||||
@apply border-b-2 border-slate-200
|
||||
}
|
||||
|
||||
.ha-register .ha-register-head .ha-register-nav .ha-register-left-nav {
|
||||
@@ -273,14 +274,23 @@
|
||||
@apply inline-block font-normal text-xs md:text-sm leading-snug font-sans text-gray-600 caps-small ml-2
|
||||
}
|
||||
|
||||
.ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks .ha-hkb {
|
||||
@apply inline text-gray-900
|
||||
}
|
||||
|
||||
.ha-register .ha-neuzeit .ha-register-body .ha-headcomment .ha-commenthead .ha-letlinks,
|
||||
.ha-register .ha-forschung .ha-register-body .ha-headcomment .ha-commenthead .ha-letlinks {
|
||||
@apply desktop:indent-0 desktop:left-[48rem] desktop:top-0 desktop:w-80 desktop:block desktop:absolute desktop:border-l-2 pl-2
|
||||
@apply desktop:left-[48rem]
|
||||
}
|
||||
|
||||
.ha-register .ha-neuzeit .ha-register-body .ha-subcomment .ha-commenthead .ha-letlinks,
|
||||
.ha-register .ha-forschung .ha-register-body .ha-headcomment .ha-commenthead .ha-letlinks {
|
||||
@apply desktop:indent-0 desktop:block desktop:absolute desktop:border-l-2 pl-2 desktop:bg-slate-50 desktop:left-[46rem] desktop:top-0 desktop:w-80
|
||||
.ha-register .ha-forschung .ha-register-body .ha-subcomment .ha-commenthead .ha-letlinks {
|
||||
@apply desktop:left-[46rem]
|
||||
}
|
||||
|
||||
.ha-register .ha-neuzeit .ha-register-body .ha-commenthead .ha-letlinks,
|
||||
.ha-register .ha-forschung .ha-register-body .ha-commenthead .ha-letlinks {
|
||||
@apply desktop:indent-0 desktop:top-0 desktop:w-80 desktop:block desktop:bg-slate-50 desktop:absolute desktop:border-l-2 pl-2
|
||||
}
|
||||
|
||||
.ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks a {
|
||||
@@ -365,6 +375,33 @@
|
||||
.ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content a {
|
||||
@apply py-1 desktop:py-2
|
||||
}
|
||||
|
||||
.ha-register .ha-headcomment .ha-btn-collapsed-box {
|
||||
@apply left-[47.6rem]
|
||||
}
|
||||
|
||||
.ha-register .ha-subcomment .ha-btn-collapsed-box {
|
||||
@apply left-[45.6rem]
|
||||
}
|
||||
|
||||
.ha-register .ha-btn-collapsed-box {
|
||||
@apply hidden desktop:block absolute -top-1 text-gray-600 hover:text-gray-900 cursor-pointer
|
||||
}
|
||||
|
||||
.ha-register .ha-neuzeit .ha-register-body .ha-commenthead .ha-collapsed-box,
|
||||
.ha-register .ha-forschung .ha-register-body .ha-commenthead .ha-collapsed-box {
|
||||
@apply z-0 overflow-hidden
|
||||
}
|
||||
|
||||
.ha-register .ha-neuzeit .ha-register-body .ha-commenthead .ha-expanded-box,
|
||||
.ha-register .ha-forschung .ha-register-body .ha-commenthead .ha-expanded-box {
|
||||
@apply shadow-md z-[1000] !h-auto !max-h-screen
|
||||
}
|
||||
|
||||
/* .ha-register .ha-neuzeit .ha-register-body .ha-commenthead .ha-collapsed-box:hover,
|
||||
.ha-register .ha-forschung .ha-register-body .ha-commenthead .ha-collapsed-box:hover {
|
||||
@apply shadow-md z-[1000] !h-auto
|
||||
} */
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -380,6 +417,11 @@ body {
|
||||
list-style-type:circle;
|
||||
} */
|
||||
|
||||
.downshadow-sm {
|
||||
-webkit-box-shadow: 5px 6px 5px -7px rgba(0,0,0,0.79);
|
||||
box-shadow: 5px 6px 5px -7px rgba(0,0,0,0.79);
|
||||
}
|
||||
|
||||
.hyphenate {
|
||||
hyphens: auto;
|
||||
}
|
||||
@@ -435,10 +477,20 @@ body {
|
||||
color:#000000;
|
||||
}
|
||||
|
||||
.ha-open-btn-collapsed-box::before {
|
||||
content: '\200E+';
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.ha-close-btn-collapsed-box::before {
|
||||
content: '\200E\00D7';
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* Not possible otherwise, overwrites javascript set style values, which cant be defined before render */
|
||||
@media (max-width: 1190px) {
|
||||
/* @media (max-width: 1190px) {
|
||||
.ha-register .ha-neuzeit .ha-register-body .ha-subcomment .ha-commenthead .ha-letlinks {
|
||||
height: auto !important;
|
||||
overflow: unset !important;
|
||||
}
|
||||
}
|
||||
} */
|
||||
@@ -1,96 +1,176 @@
|
||||
const openmenu = function () {
|
||||
var x = document.getElementById("ha-topnav");
|
||||
if (x !== null) x.className += " ha-topnav-collapsed";
|
||||
let oldbutton = document.getElementById("openmenubutton");
|
||||
if (oldbutton !== null) oldbutton.setAttribute('class', 'hidden');
|
||||
let newbutton = document.getElementById("closemenubutton");
|
||||
if (newbutton !== null) newbutton.setAttribute('class', '');
|
||||
}
|
||||
|
||||
const closemenu = function () {
|
||||
var x = document.getElementById("ha-topnav");
|
||||
if (x !== null) x.className = "ha-topnav";
|
||||
let oldbutton = document.getElementById("closemenubutton");
|
||||
if (oldbutton !== null) oldbutton.setAttribute('class', 'hidden');
|
||||
let newbutton = document.getElementById("openmenubutton");
|
||||
if (newbutton !== null) newbutton.setAttribute('class', '');
|
||||
|
||||
}
|
||||
|
||||
const markactive_startswith = function (element) {
|
||||
// Marks links as active which target URL starts with the current URL
|
||||
var all_links = element.getElementsByTagName("a"),
|
||||
i = 0, len = all_links.length,
|
||||
full_path = location.href.split('#')[0].toLowerCase(); //Ignore hashes
|
||||
|
||||
for (; i < len; i++) {
|
||||
if (full_path.startsWith(all_links[i].href.toLowerCase())) {
|
||||
all_links[i].className += " active";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const markactive_exact = function (element) {
|
||||
var all_links = element.getElementsByTagName("a"),
|
||||
i = 0, len = all_links.length,
|
||||
full_path = location.href.split('#')[0].toLowerCase(); //Ignore hashes
|
||||
|
||||
for (; i < len; i++) {
|
||||
if (full_path == all_links[i].href.toLowerCase()) {
|
||||
all_links[i].className += " active";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getLineHeight = function (element) {
|
||||
var temp = document.createElement(element.nodeName), ret;
|
||||
temp.setAttribute("class", element.className);
|
||||
temp.innerHTML = "A";
|
||||
|
||||
element.parentNode.appendChild(temp);
|
||||
ret = temp.clientHeight;
|
||||
temp.parentNode.removeChild(temp);
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
const sidebarcollapse = function (selector) {
|
||||
let backlinkboxes = document.querySelectorAll(selector);
|
||||
let clientrects = [];
|
||||
|
||||
for (element of backlinkboxes) {
|
||||
clientrects.push([element, element.getBoundingClientRect()]);
|
||||
}
|
||||
|
||||
let lineheight = 1;
|
||||
|
||||
if (backlinkboxes.length >= 1) {
|
||||
lineheight = getLineHeight(backlinkboxes[0]);
|
||||
}
|
||||
|
||||
for (var i = 0; i < clientrects.length; i++) {
|
||||
if (i < clientrects.length-1) {
|
||||
if (clientrects[i][1].bottom >= clientrects[i+1][1].top) {
|
||||
let overlap = clientrects[i][1].bottom - clientrects[i+1][1].top;
|
||||
let newlength = clientrects[i][1].height - overlap;
|
||||
let remainder = newlength % lineheight;
|
||||
newlength = newlength - remainder;
|
||||
clientrects[i][0].style.height = newlength + 'px';
|
||||
clientrects[i][0].style.overflowX = "hidden";
|
||||
clientrects[i][0].style.overflowY = "scroll";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById("openmenubutton").addEventListener('click', openmenu);
|
||||
document.getElementById("closemenubutton").addEventListener('click', closemenu);
|
||||
markactive_startswith(document.getElementById("ha-topnav"));
|
||||
markactive_exact(document.getElementById("ha-register-nav"));
|
||||
sidebarcollapse(".ha-neuzeit .ha-letlinks");
|
||||
sidebarcollapse(".ha-forschung .ha-letlinks");
|
||||
})
|
||||
|
||||
const openmenu = function () {
|
||||
var x = document.getElementById("ha-topnav");
|
||||
if (x !== null) x.className += " ha-topnav-collapsed";
|
||||
let oldbutton = document.getElementById("openmenubutton");
|
||||
if (oldbutton !== null) oldbutton.setAttribute("class", "hidden");
|
||||
let newbutton = document.getElementById("closemenubutton");
|
||||
if (newbutton !== null) newbutton.setAttribute("class", "");
|
||||
};
|
||||
|
||||
const closemenu = function () {
|
||||
var x = document.getElementById("ha-topnav");
|
||||
if (x !== null) x.className = "ha-topnav";
|
||||
let oldbutton = document.getElementById("closemenubutton");
|
||||
if (oldbutton !== null) oldbutton.setAttribute("class", "hidden");
|
||||
let newbutton = document.getElementById("openmenubutton");
|
||||
if (newbutton !== null) newbutton.setAttribute("class", "");
|
||||
};
|
||||
|
||||
const markactive_startswith = function (element) {
|
||||
// Marks links as active which target URL starts with the current URL
|
||||
var all_links = element.getElementsByTagName("a"),
|
||||
i = 0,
|
||||
len = all_links.length,
|
||||
full_path = location.href.split("#")[0].toLowerCase(); //Ignore hashes
|
||||
|
||||
for (; i < len; i++) {
|
||||
if (full_path.startsWith(all_links[i].href.toLowerCase())) {
|
||||
all_links[i].className += " active";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const markactive_exact = function (element) {
|
||||
var all_links = element.getElementsByTagName("a"),
|
||||
i = 0,
|
||||
len = all_links.length,
|
||||
full_path = location.href.split("#")[0].toLowerCase(); //Ignore hashes
|
||||
|
||||
for (; i < len; i++) {
|
||||
if (full_path == all_links[i].href.toLowerCase()) {
|
||||
all_links[i].className += " active";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getLineHeight = function (element) {
|
||||
var temp = document.createElement(element.nodeName),
|
||||
ret;
|
||||
temp.setAttribute("class", element.className);
|
||||
temp.innerHTML = "A";
|
||||
|
||||
element.parentNode.appendChild(temp);
|
||||
ret = temp.clientHeight;
|
||||
temp.parentNode.removeChild(temp);
|
||||
|
||||
return ret;
|
||||
};
|
||||
|
||||
const collapsebox = function (element, height) {
|
||||
element.style.maxHeight = height + "px";
|
||||
element.classList.add("ha-collapsed-box");
|
||||
element.classList.remove("ha-expanded-box");
|
||||
};
|
||||
|
||||
const uncollapsebox = function (element) {
|
||||
element.classList.remove("ha-collapsed-box");
|
||||
element.classList.add("ha-expanded-box");
|
||||
};
|
||||
|
||||
const addbuttoncaollapsebox = function (element, height, hoverfunction) {
|
||||
const btn = document.createElement("div");
|
||||
btn.classList.add("ha-btn-collapsed-box");
|
||||
|
||||
if (element.classList.contains("ha-collapsed-box")) {
|
||||
btn.classList.add("ha-open-btn-collapsed-box");
|
||||
} else {
|
||||
btn.classList.add("ha-close-btn-collapsed-box");
|
||||
}
|
||||
|
||||
btn.addEventListener("click", function (ev) {
|
||||
ev.stopPropagation();
|
||||
if (element.classList.contains("ha-collapsed-box")) {
|
||||
uncollapsebox(element);
|
||||
btn.classList.remove("ha-open-btn-collapsed-box");
|
||||
btn.classList.add("ha-close-btn-collapsed-box");
|
||||
btn.classList.add("ha-collapsed-box-manually-toggled");
|
||||
} else {
|
||||
collapsebox(element, height);
|
||||
btn.classList.remove("ha-close-btn-collapsed-box");
|
||||
btn.classList.remove("ha-collapsed-box-manually-toggled");
|
||||
btn.classList.add("ha-open-btn-collapsed-box");
|
||||
}
|
||||
});
|
||||
|
||||
if (hoverfunction) {
|
||||
let timer = null;
|
||||
|
||||
element.addEventListener("mouseenter", function (ev) {
|
||||
ev.stopPropagation();
|
||||
timer = setTimeout(function () {
|
||||
if (element.classList.contains("ha-collapsed-box")) {
|
||||
uncollapsebox(element);
|
||||
btn.classList.remove("ha-open-btn-collapsed-box");
|
||||
btn.classList.add("ha-close-btn-collapsed-box");
|
||||
}
|
||||
}, 200);
|
||||
});
|
||||
|
||||
element.addEventListener("mouseleave", function (ev) {
|
||||
ev.stopPropagation();
|
||||
if (timer != null) {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
if (
|
||||
element.classList.contains("ha-expanded-box") &&
|
||||
!btn.classList.contains("ha-collapsed-box-manually-toggled")
|
||||
) {
|
||||
collapsebox(element, height);
|
||||
btn.classList.remove("ha-close-btn-collapsed-box");
|
||||
btn.classList.add("ha-open-btn-collapsed-box");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//element.appendChild(btn);
|
||||
//element.insertBefore(btn, element.firstChild);
|
||||
element.parentNode.insertBefore(btn, element);
|
||||
};
|
||||
|
||||
/* TODO: need a resize watcher to undo and reapply the effect on breakpoint */
|
||||
const overlappingcollapsebox = function (selector, hoverfunction) {
|
||||
let boxes = document.querySelectorAll(selector);
|
||||
let clientrects = [];
|
||||
let lineheight = 1;
|
||||
|
||||
if (boxes.length >= 1) {
|
||||
lineheight = getLineHeight(boxes[0]);
|
||||
}
|
||||
|
||||
for (element of boxes) {
|
||||
clientrects.push([element, element.getBoundingClientRect()]);
|
||||
}
|
||||
|
||||
for (var i = 0; i < clientrects.length; i++) {
|
||||
if (i < clientrects.length - 1) {
|
||||
let overlap = clientrects[i][1].bottom - clientrects[i + 1][1].top;
|
||||
if (overlap >= 0) {
|
||||
let newlength = clientrects[i][1].height - overlap;
|
||||
let remainder = newlength % lineheight;
|
||||
newlength = newlength - remainder;
|
||||
collapsebox(clientrects[i][0], newlength);
|
||||
addbuttoncaollapsebox(clientrects[i][0], newlength, hoverfunction);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("load", function () {
|
||||
if (
|
||||
document.getElementById("openmenubutton") != null &&
|
||||
document.getElementById("closemenubutton") != null
|
||||
) {
|
||||
document
|
||||
.getElementById("openmenubutton")
|
||||
.addEventListener("click", openmenu);
|
||||
document
|
||||
.getElementById("closemenubutton")
|
||||
.addEventListener("click", closemenu);
|
||||
}
|
||||
if (document.getElementById("ha-topnav") != null)
|
||||
markactive_startswith(document.getElementById("ha-topnav"));
|
||||
if (document.getElementById("ha-register-nav") != null)
|
||||
markactive_exact(document.getElementById("ha-register-nav"));
|
||||
overlappingcollapsebox(".ha-neuzeit .ha-letlinks", true);
|
||||
overlappingcollapsebox(".ha-forschung .ha-letlinks", true);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user