mirror of
				https://github.com/Theodor-Springmann-Stiftung/hamann-ausgabe-core.git
				synced 2025-11-04 04:05:32 +00:00 
			
		
		
		
	
		
			
				
	
	
		
			110 lines
		
	
	
		
			4.5 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			110 lines
		
	
	
		
			4.5 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
/*
 | 
						|
    Funktion zum Einklappen der Kommentare der Seitenleiste, je nach verfügbarem Platz.
 | 
						|
    Benötigt jQuery.
 | 
						|
    (c) 2020 Theodor Springmann Stiftung Heidelberg
 | 
						|
*/
 | 
						|
$(function() {
 | 
						|
    /* 
 | 
						|
        Jede Zeile in der Seitenleiste wird ausgewählt.
 | 
						|
        Voraussetzungen:
 | 
						|
            - Marginalspalte hat die Klasse "commentColumn"
 | 
						|
            - Kommentar in einer Zeile hat die Klasse "commBox"
 | 
						|
            - Eine Zeile ohne Kommentar ist ein <br class="emptyline"/>
 | 
						|
    */
 | 
						|
    const sidebar = '.commentColumn';
 | 
						|
    const comment = '.commBox';
 | 
						|
    const emptyline = '.emptyline';
 | 
						|
 | 
						|
    /* 
 | 
						|
        Hilfsvariablen
 | 
						|
            - Funktion, um die Ergebnisse einer Query umzukehren.
 | 
						|
            - Variable, in der die Anzahl verfügbaren Platzes gespeichert wird.
 | 
						|
            - Größe eines REM
 | 
						|
            - Zeilenhöhe in commBox
 | 
						|
            - Padding von commBox
 | 
						|
    */
 | 
						|
    jQuery.fn.reverse = [].reverse;
 | 
						|
    var emptylines_cnt = 0;
 | 
						|
    var rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
 | 
						|
    var commBoxLineHeight = 1;
 | 
						|
    var commBoxPaddingHeight = 0.2;
 | 
						|
 | 
						|
    /* Die Liste an Zeilen in der Seitenspalte wird rückwärts durchgegangen. */
 | 
						|
    $(sidebar + ' ' + comment + ',' + emptyline).reverse().each(function(elem) {
 | 
						|
 | 
						|
        /* Fall 1: Es handelt sich um eine Leerzeile. Die Anzahl verfügbarer Leerzeilen wird erhöht. */
 | 
						|
        if ($(this).hasClass("emptyline")) {
 | 
						|
            emptylines_cnt++;
 | 
						|
        }
 | 
						|
 | 
						|
        /* Fall 2: Es handelt sich um einen Kommentar, der evtl. gekürzt werden muss. */
 | 
						|
        else {
 | 
						|
 | 
						|
           /* Von der Leerzeilenzahl bestimmte MÖGLICHE höhe des Divs berechnen
 | 
						|
            bei der von mir gewählten Zeilenhöhe wird ab 5 fre ien Textzeilen eine extra Kommentarzeile frei*/
 | 
						|
            if (emptylines_cnt >= 2) {
 | 
						|
                bonusLines = Math.floor(emptylines_cnt / 2);
 | 
						|
                emptylines_cnt = bonusLines + emptylines_cnt;
 | 
						|
            }
 | 
						|
            var possibleHeight = emptylines_cnt 
 | 
						|
                                    * commBoxLineHeight 
 | 
						|
                                    + commBoxLineHeight 
 | 
						|
                                    + commBoxPaddingHeight;
 | 
						|
            possibleHeight = Math.floor(possibleHeight * 100) / 100;
 | 
						|
 | 
						|
            var contentHeight = $(this).height();
 | 
						|
            /*contentHeight in rem umrechnen*/
 | 
						|
            contentHeight = contentHeight / rem;
 | 
						|
            contentHeight = Math.ceil(contentHeight * 100) / 100;
 | 
						|
 | 
						|
            if (contentHeight > possibleHeight) {
 | 
						|
                $(this).toggleClass("short");
 | 
						|
                possibleHeight = String(possibleHeight) + "rem";
 | 
						|
                $(this).css("height", possibleHeight);
 | 
						|
            }
 | 
						|
            emptylines_cnt = 0;
 | 
						|
        }
 | 
						|
    });
 | 
						|
 | 
						|
 | 
						|
   $('button').on('click', function() {
 | 
						|
    if (this.parentNode.parentNode.classList.contains("short")) { /*testen ob parrentnode kurzkommentar ist. Wenn JA:*/
 | 
						|
        if (this.parentNode.parentNode.classList.contains("expanded")) { /*testen ob gerade expanded Wenn JA:*/
 | 
						|
            this.parentNode.parentNode.classList.remove("expanded"); /*entferne expandeded*/
 | 
						|
        } else { /*wenn parentnode nicht expanded ist*/
 | 
						|
            $("button").each(function(i) {
 | 
						|
                if (this.parentNode.parentNode.classList.contains("expanded")) {
 | 
						|
                    this.parentNode.parentNode.classList.remove("expanded"); /*werden alle kommentare geschlossen*/
 | 
						|
                }
 | 
						|
            });
 | 
						|
            this.parentNode.parentNode.classList.add("expanded"); /*und der aktuelle kommentar expandiert*/
 | 
						|
       }
 | 
						|
    } else {
 | 
						|
        $("button").each(function(i) { /*wenn die parentnode nicht short ist*/
 | 
						|
            if (this.parentNode.parentNode.classList.contains("expanded")) {
 | 
						|
                this.parentNode.parentNode.classList.remove("expanded"); /*werden alle kommentare geschlossen*/
 | 
						|
            }
 | 
						|
        });
 | 
						|
    }
 | 
						|
    });
 | 
						|
 | 
						|
    $('button').on('click', function() {
 | 
						|
        var ntht_button = 1;
 | 
						|
        $(this).prevAll().each(function(i) {
 | 
						|
            ++ntht_button
 | 
						|
        });
 | 
						|
        var commBox = this.parentNode.parentNode;
 | 
						|
        var childrenOfCommbox = commBox.children
 | 
						|
        for (var i = 0; i < childrenOfCommbox.length; i++) {
 | 
						|
            if (i == ntht_button) {
 | 
						|
                childrenOfCommbox[i].classList.remove("invisible");
 | 
						|
                childrenOfCommbox[i].style.display = "block";
 | 
						|
                childrenOfCommbox[i].style.width = "100%";
 | 
						|
            } else if (i !== ntht_button && i !== 0) {
 | 
						|
                childrenOfCommbox[i].classList.add("invisible");
 | 
						|
                childrenOfCommbox[i].style.display = "none";
 | 
						|
            }
 | 
						|
        }
 | 
						|
 | 
						|
    });
 | 
						|
}); |