old/assets/js/main.js

setInterval(function () {
    stillAlive();
}, 60000);

function stillAlive() {
    $.get('/Main/stillAlive');
}

jQuery(function ($) {
    stillAlive();

    //#main-slider
    $(function () {
        $('#main-slider.carousel').carousel({
            interval: 8000
        });
    });

    $('#main-slider').on('slid.bs.carousel', function () {
        $('.centered').each(function (e) {
            $(this).css('margin-top', ($('#main-slider').height() - $(this).height()) / 2);
        });
    });

    $('.centered').each(function (e) {
        $(this).css('margin-top', ($('#main-slider').height() - $(this).height()) / 2);
    });

    $(window).resize(function () {
        $('.centered').each(function (e) {
            $(this).css('margin-top', ($('#main-slider').height() - $(this).height()) / 2);
        });
    });

    //contact form
    var form = $('.contact-form');
    form.submit(function () {
        $this = $(this);
        $.post($(this).attr('action'), function (data) {
            $this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
        }, 'json');
        return false;
    });

    //goto top
    $('.gototop').click(function (event) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: $("body").offset().top
        }, 500);
    });
    if (!getCookie('agreedToCookies') || getCookie('agreedToCookies') == null) {
        $('body').append(`
            <div class="alert alert-warning alert-dismissible fixed-bottom mx-auto mb-4" id="cookie-alert" role="alert" style="max-width:960px;z-index:1000">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close" style="font-size:25px;">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="row py-6">
                    <div class="col-1">
                        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width:48px;margin-right: 15px;margin-top: 5px;" xml:space="preserve"><g><g><path d="M478.01,128.591l-4.101-7.131l-6.97,4.372c-6.391,4.008-13.625,6.127-20.918,6.127c-9.167,0-17.886-3.232-25.215-9.35 l-4.128-3.446l-4.725,2.567c-6.047,3.284-12.344,4.95-18.716,4.95c-21.829,0-39.588-17.758-39.588-39.588 c0-3.091,0.491-6.352,1.543-10.26l1.544-5.737l-5.076-3.087c-11.977-7.286-19.126-19.884-19.126-33.7 c0-4.252,0.805-8.575,2.464-13.214l2.802-7.848l-7.981-2.398C305.857,3.651,281.021,0,256,0 C187.619,0,123.331,26.628,74.979,74.979C26.628,123.331,0,187.619,0,256s26.628,132.669,74.979,181.021 C123.331,485.372,187.619,512,256,512s132.669-26.628,181.021-74.979C485.372,388.669,512,324.381,512,256 C512,211.32,500.246,167.261,478.01,128.591z M425.824,425.824c-45.361,45.36-105.672,70.341-169.824,70.341 s-124.462-24.981-169.824-70.341C40.816,380.462,15.835,320.152,15.835,256S40.816,131.538,86.176,86.176 C131.538,40.816,191.848,15.835,256,15.835c20.883,0,41.629,2.709,61.782,8.063c-0.724,3.502-1.081,6.952-1.081,10.411 c0,17.46,8.102,33.513,21.936,43.97c-0.556,3.072-0.822,5.953-0.822,8.814c0,30.56,24.863,55.423,55.423,55.423 c7.372,0,14.612-1.537,21.582-4.576c9.303,6.464,19.991,9.855,31.201,9.855c7.532,0,14.994-1.589,21.955-4.64 c18.463,34.627,28.19,73.479,28.19,112.846C496.165,320.152,471.184,380.462,425.824,425.824z" fill="#404040"/></g></g><g><g><path d="M160.99,95.01c-21.829,0-39.588,17.758-39.588,39.588c0,21.829,17.759,39.588,39.588,39.588 c21.829,0,39.588-17.758,39.588-39.588S182.819,95.01,160.99,95.01z M160.99,158.351c-13.098,0-23.753-10.656-23.753-23.753 c0-13.097,10.655-23.753,23.753-23.753c13.098,0,23.753,10.656,23.753,23.753C184.742,147.695,174.087,158.351,160.99,158.351z" fill="#404040"/></g></g><g><g><path d="M409.072,216.412c-21.829,0-39.588,17.758-39.588,39.588s17.758,39.588,39.588,39.588S448.66,277.829,448.66,256 C448.66,234.171,430.901,216.412,409.072,216.412z M409.072,279.753c-13.097,0-23.753-10.656-23.753-23.753 c0-13.097,10.656-23.753,23.753-23.753c13.097,0,23.753,10.656,23.753,23.753C432.825,269.097,422.169,279.753,409.072,279.753z" fill="#404040"/></g></g><g><g><path d="M129.32,290.309c-21.829,0-39.588,17.758-39.588,39.588s17.758,39.588,39.588,39.588s39.588-17.758,39.588-39.588 S151.149,290.309,129.32,290.309z M129.32,353.649c-13.098,0-23.753-10.656-23.753-23.753c0-13.097,10.655-23.753,23.753-23.753 c13.098,0,23.753,10.656,23.753,23.753C153.072,342.994,142.417,353.649,129.32,353.649z" fill="#404040"/></g></g><g><g><path d="M266.557,195.299c-21.829,0-39.588,17.759-39.588,39.588c0,21.829,17.759,39.588,39.588,39.588 c21.829,0,39.588-17.758,39.588-39.588C306.144,213.057,288.386,195.299,266.557,195.299z M266.557,258.639 c-13.098,0-23.753-10.656-23.753-23.753c0-13.097,10.655-23.753,23.753-23.753c13.097,0,23.753,10.656,23.753,23.753 C290.309,247.983,279.653,258.639,266.557,258.639z" fill="#404040"/></g></g><g><g><path d="M308.784,358.928c-21.829,0-39.588,17.758-39.588,39.588s17.758,39.588,39.588,39.588s39.588-17.758,39.588-39.588 S330.613,358.928,308.784,358.928z M308.784,422.268c-13.097,0-23.753-10.656-23.753-23.753c0-13.097,10.656-23.753,23.753-23.753 c13.097,0,23.753,10.656,23.753,23.753C332.536,411.612,321.88,422.268,308.784,422.268z" fill="#404040"/></g></g></svg>
                    </div>
                    <p class="col">Cookies erleichtern uns die Bereitstellung unserer Dienste und dieser Webseite. Mit der Nutzung von unseren Diensten erklären Sie sich damit einverstanden, dass wir Cookies verwenden.</p>
                </div>
                <a class="btn btn-sm" href="/about/impressum#datenschutz" target="_blank">Weitere Informationen</a> 
                <a class="btn btn-sm btn-primary" id="cookie-confirm">Alles klar</a>
            </div>
        `);
    }
    $('#cookie-alert').on('close.bs.alert', function () {
        setCookie('agreedToCookies', true);
    });
    $('#cookie-confirm').on('click', function () {
        setCookie('agreedToCookies', true);
        $('#cookie-alert').alert('close');
    });
});

if (window.matchMedia("(min-width: 992px)").matches) {
    jQuery('ul.nav li.dropdown').hover(function () {
        jQuery(this).find('.dropdown-menu').stop(true, true).slideDown(200);
        jQuery(this).addClass('hovered');
    }, function () {
        jQuery(this).find('.dropdown-menu').stop(true, true).slideUp(200);
        jQuery(this).removeClass('hovered');
    });
} else {
    $('a.dropdown-toggle').attr('data-toggle', 'dropdown');
}

function getCookie(key) {
    var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
    return keyValue ? keyValue[2] : null;
}

function setCookie(key, value) {
    // const expires = new Date('31.12.9999 23:59:59');
    const expires = new Date();
    expires.setTime(expires.getTime() + (10000 * 24 * 60 * 60 * 1000));
    document.cookie = key + '=' + value + ';expires=' + expires.toUTCString() + ';path=/';
}

// Feedback Form
function sendFeedback() {
    var message = $('#feedbackModal textarea[name=message]').val();
    var anonymous = $('#feedbackModal input[name=anonymous]').is(':checked');
    var url = window.location.pathname;

    if (message === "") {
        $('#feedbackModal #message').addClass('has-error');
    } else {
        $.ajax({
            url: "/Main/addFeedback",
            method: "POST",
            data: {
                message: message,
                anonymous: anonymous,
                url: url
            },
            beforeSend: function () {
                $('#feedbackModal .modal-body').append('<div class="modal-loading-container"><i class="fa fa-cog fa-spin modal-loading-icon"></i></div>');
                $('#feedbackModalSend').button('loading');
            },
            success: function (data) {
                $('#feedbackModal .modal-loading-container .modal-loading-icon').removeClass('fa-cog fa-spin').addClass('fa-check success').append('<span>Vielen Dank für dein Feedback!</span>');
            },
        });
    }
}

// Contact form
function sendContactMessage() {
    var message = $('#contact-message textarea').val();
    var email = "";
    if ($('#email-address input').val() !== null) {
        email = $('#email-address input').val()
    }
    $('#contactModal .modal-body').append('<div class="modal-loading-container"><div class="modal-loading-icon"><i class="fa fa-cog fa-spin"></i></div></div>');
    $('#contactModalSend').button('loading');
    $.ajax({
        url: "/Main/contactTeam",
        method: "POST",
        data: {
            message: message,
            email: email
        },
        success: function (data) {
            if (data.type) {
                $('#contactModal .modal-loading-container .modal-loading-icon i').removeClass('fa-cog fa-spin').addClass('fa-check').parents('.modal-loading-icon').addClass('success').append('<span>' + data.message + '</span>');
            } else {
                $('#contactModal .modal-loading-container .modal-loading-icon i').removeClass('fa-cog fa-spin').addClass('fa-times').parents('.modal-loading-icon').addClass('error').append('<span>' + data.message + '</span>');
            }
        },
        error: function (data) {
            $('#contactModal .modal-loading-container .modal-loading-icon i').removeClass('fa-cog fa-spin').addClass('fa-times').parents('.modal-loading-icon').addClass('error').append('<span>Ein unbekannter Fehler ist aufgetreten</span>');
        }
    });
}

$(function () {
    $('.menu-icon').click(function () {
        $(this).toggleClass('is-open');
        $('.side-navigation').toggleClass('active');
        $('.side-navigation-background  ').toggleClass('active');
    });
});

const btnFloat = document.querySelector('.btn-floating .btn');
const btnShadow = document.querySelector('.btn-floating-shadow');

btnFloat.addEventListener('click', function () {
    const btnParent = btnFloat.parentElement;
    btnParent.classList.toggle('active');
    btnIsActive(btnParent);
});

btnShadow.addEventListener('click', function () {
    const btnParent = btnFloat.parentElement;
    btnParent.classList.remove('active');
    btnIsActive(btnParent);
});


// function for asign a dinamic position to the ".btn-floating-list"
// I mean if you want to put more than 3 buttons this automatic take the correct top
function btnIsActive(btnFloat) {
    var LiHeight = btnFloat.querySelector('ul.btn-floating-list li').offsetHeight;
    var LiLength = btnFloat.querySelectorAll('ul.btn-floating-list li').length;
    if (btnFloat.className === "btn-floating active") {
        var LiMargin = ((LiLength + 1) * 10) / LiLength;

        var btnTop = (LiHeight + LiMargin) * LiLength;

        btnFloat.querySelector('ul.btn-floating-list').style.top = -btnTop + 'px';
    } else {
        btnFloat.querySelector('ul.btn-floating-list').style.top = LiHeight + 'px';
    }
}

$('.side-navigation-background').click(function () {
    $(this).removeClass('active');
    $('.side-navigation').removeClass('active');
    $('.menu-icon').removeClass('is-open');
});

$('.side-navigation-content .dropdown > a').on("click", function (e) {
    e.preventDefault();
    $(".sub-menu", $(this).parent()).slideToggle(200);
    $('.fa-angle-down', $(this)).toggleClass('opened');
});

$('#navbar-swipe-open').on('swiperight', function () {
    $(".side-navigation").addClass('active');
    $('.side-navigation-background').addClass('active');
    $('.menu-icon').addClass('is-open');
});

$(document).on('swipeleft', function () {
    if ($('.side-navigation').hasClass('active')) {
        $('.side-navigation-background').removeClass('active');
        $('.side-navigation').removeClass('active');
        $('.menu-icon').removeClass('is-open');
    }
});

$('#search-form').submit((e) => {
    e.preventDefault();

    executeSearch();
});

$('.navbar-search input').on('keyup', (e) => {
    if (e.key === 'Enter') {
        $('#search-form').submit();
    }
});

function executeSearch() {
    const search = $('.navbar-search input').val().trim();

    if (search.length < 3) {
        addSnackbar('warning', 'Bitte gib mindestens 3 Buchstaben als Suchbegriff an.');
        return;
    }

    const newUrl = '/search?q=' + encodeURI(search);
    window.history.pushState(null, '', newUrl);

    const old = $('body > *:not(header):not(footer):not(#bottom)').fadeOut(500);
    setTimeout(() => old.remove(), 500);

    $('.navbar').after('<div class="loadingSpinner"></div>');

    $.ajax({
        url: '/search',
        data: {
            q: search
        },
        method: 'GET',
        success: data => {
            document.write(data);
            document.close();
        },
        error: data => {
            console.log(data);
        }
    });
}

$(function () {
    $.each($(".share-btn"), function () {
        $(this).on("click", function (event) {
            var width = 650,
                height = 450;

            event.preventDefault();

            window.open($(this).attr('href'), 'Share Dialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=' + width + ',height=' + height + ',top=' + (screen.height / 2 - height / 2) + ',left=' + (screen.width / 2 - width / 2));
        });
    });
});

$(document).scroll(function () {
    if ($(this).scrollTop() > 0) {
        $('.navbar-inverse').css('box-shadow', '0 3px 6px 0 rgba(0, 0, 0, 0.18)').css('-webkit-box-shadow', '0 3px 6px 0 rgba(0, 0, 0, 0.18)').css('background-color', '#2272fff2');
    } else {
        $('.navbar-inverse').removeAttr('style');
    }
});

$(function () {
    $('[data-toggle="tooltip"]').tooltip();
});

function toggleMenu() {
    $('.side-navigation').toggleClass('active');
    $('.side-navigation-background').toggleClass('active');
    $('.menu-icon').toggleClass('is-open');
}

$(document).keyup(function (e) {
    if (e.keyCode === 27) {
        toggleMenu();
    }
});

function addReadMoreBtns() {
    $('.comment-well .content-container').each(function () {
        $('.content .read-more-btn', $(this)).remove();
        if ($('.content', $(this)).outerHeight() > $(this).outerHeight()) {
            $('.content', $(this)).append('<p class="read-more-btn"><a href="#">Mehr lesen</a></p>');
        }
    });

    $('.comment-well .read-more-btn a').click(function (e) {
        e.preventDefault();
        const parent = $(this).parent().parent().parent().parent();
        const totalHeight = $('.content', parent).outerHeight() + 55;
        parent.css({
            "height": parent.height(),
            "max-height": 9999
        }).animate({
            "height": totalHeight
        }, 200);

        $(this).parent().fadeOut();

        return false;
    });
}

$('#notificationMenuButton').click(() => {
    $.ajax({
        url: '/Main/notificationsRead',
        method: 'post',
        success: (data) => {
            if (data.success) {
                loadNotificationsAsync();
            }
        }
    });
});

$(() => {
    $('.max-length-input').each(function () {
        console.log(this);
        $(this).after(`<span class="max-length-counter">${$(this).attr('max-length')}</span>`);
    });
});

$('.max-length-input').keypress(function () {
    const val = $(this).val() || $(this).text();
    $(this).next('.max-length-counter').text($(this).attr('max-length') - val.trim().length);
});

const notificationCount = 5;
let notificationOffset = 0;

function loadNotificationsAsync() {
    $.ajax({
        url: '/Main/getNotifications',
        method: 'POST',
        data: {
            count: notificationCount,
            offset: notificationOffset
        },
        beforeSend: () => {
            $('#notificationMenu').find('.loadingSpinner').removeClass('failed');
        },
        success: (data) => {
            $('#notificationMenu').find('.loadingSpinner').remove();
            if (data.status === 'success') {
                const container = $('#notificationMenu .list-group');
                for (let notification of data.notifications) {
                    container.append(`
                        <a href="${notification.link}" class="list-group-item list-group-item-action flex-column align-items-start ${notification.unread ? '' : 'disabled'}">
                            <div class="d-flex w-100 justify-content-between">
                                <h5 class="mb-1">${notification.sender}</h5>
                                <small>${notification.time}</small>
                            </div>
                            <p class="mb-1">${notification.message}</p>
                        </a>
                    `)
                }
                if (data.notifications.length > 0) {
                    const unread = data.notifications.filter(e => e.unread);
                    if (unread.length > 0) {
                        $('#notificationCount').text(unread.length);
                    }
                    notificationOffset++;
                } else {
                    $('#notificationMenu .list-group p.list-group-item').remove();
                    $('#notificationMenu .list-group').append(`<p class="list-group-item text-muted">Keine neuen Benachrichtigungen</p>`)
                }
            }
        },
        error: () => {
            $('#notificationMenu').find('.loadingSpinner').addClass('failed');
        }
    });
}

loadNotificationsAsync();

$('#switchDarkmode').click(function (event) {
    event.preventDefault();
    $('body').toggleClass('dark');
    if ($('body').hasClass('dark')) {
        $(this).find('.fa-moon').removeClass('fa').addClass('far');
        $(this).attr('data-title', 'Light Theme')
    } else {
        $(this).find('.fa-moon').removeClass('far').addClass('fa');
        $(this).attr('data-title', 'Dark Theme')
    }
});

function addSnackbar(type, text) {
    const snackbar = $(`<div class="alert alert-${type} snackbar" role="alert" >${text}</div>`);
    $('.snackbar-container').append(snackbar);
    setTimeout(() => {
        snackbar.remove();
    }, 5500);
}

function openAsyncModal(url, title, data, finished, id, size = 'default') {
    const modal = $(`
        <div class="modal fade" id="${id}" tabindex="-1" role="dialog">
            <div class="modal-dialog ${size !== 'default' ? 'modal-' + size : ''} modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">${title}</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="loadingSpinner"></div>
                    </div>
                </div>
            </div>
        </div>
    `);
    $('body').append(modal);
    modal.modal('show');

    $.ajax({
        url,
        data,
        method: 'POST',
        success: (result) => {
            console.log(result);
            modal.find('.modal-body').empty();
            if (result.success) {
                modal.find('.modal-title').text(result.title);
                modal.find('.modal-body').append(result.body);
                finished();
            } else {
                modal.modal('hide');
                addSnackbar('danger', result.message);
            }
        },
        error: (data) => {
            console.log(data);
            modal.modal('hide');
            addSnackbar('danger', '<b>Ein unbekannter Fehler ist aufgetreten.</b> Versuche, die Seite erneut zu laden, oder kontaktiere das Support-Team sollte der Fehler bestehen bleiben.');
        }
    });

    modal.on('hidden.bs.modal', function () {
        $(this).remove();
    });

    return modal;
}