Aerbim/static/aerbimJS.js

$(document).ready(function (){
    if (document.querySelector(".header").dataset['page'] === 'True' && getInfoAboutUser()[0] !== 'mobile' && getInfoAboutUser()[0] !== 'laptop'){
        renderContent()
    } else {
        let el = document.querySelector(".container_sections_buttons")
        if (el){
            replaceHrefOnOnclick()
            replace_select_language()
        }
    }
})

function getInfoAboutUser (){
    let user_type = ''
    if (screen.width <= 800){
        user_type = 'mobile'
    } else if (screen.width > 1024) {
        user_type = 'desktop'
    } else if (screen.width >= 800 && screen.width <= 1024) {
        user_type = 'laptop'
    }
    return [user_type,screen.width]
}

function sendWidthAjax () {
    let width = getInfoAboutUser()[1]
    let data = {
        'screen_width': width
    }
    return data
}

function renderContent (el=null) {
    let data = sendWidthAjax()
    if (!el) {
        let section_button = document.querySelector(".section_btn")
        data['section_url'] = section_button.dataset['url']
    } else {
        data['section_url'] = el.dataset['url']
    }
    let language = document.querySelector(".name_language").innerHTML
    if (language.includes("ru")){
        data['lang'] = 'ru'
    } else if (language.includes("en")){
        data['lang'] = 'en'
    }
    $.ajax({
        headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },
        url: '/get_content_for_section/',
        type: "POST",
        // async: true,
        cache: false,
        processData: false,
        // contentType: false,
        enctype: 'json',
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(data),
        success: function(data){
            document.querySelector(".content").innerHTML = data.html
            window.scrollTo(0, 0);
            let lang = getLang()
            replaceHrefOnOnclick()

            if (el){
                history.pushState({
                        'section':data['section_url']
                    },
                    '',
                    `/${lang}/section/${el.dataset['url']}/`
                )
            }
            replace_select_language()
        },
        error: function (data){
            alert(data.errors)
        }
    });
}

function getLang () {
    let lang = ''
    if (window.location.href.includes("/en/")){
        lang = 'en'
    } else if (window.location.href.includes("/ru/")){
        lang = 'ru'
    }
    return lang
}

function replace_select_language () {
    let select = document.querySelector(".name_language")
    if (getInfoAboutUser()[0] === 'mobile' || getInfoAboutUser()[0] === 'laptop'){
        select = document.querySelector(".name_language.curtain")
    }

    let lang_f_replace = getLang()
    select.innerHTML = lang_f_replace
}

function replaceHrefOnOnclick () {
    let elements = document.querySelectorAll('.section_btn')
    let i = 0
    elements.forEach(function (){
        let cur_el = elements[i]
        if (cur_el.attributes.hasOwnProperty("href")){
            cur_el.setAttribute("onclick",`renderContent(this)`)
            let str = cur_el.outerHTML
            let str_f_replace = cur_el.href
            str_f_replace = str_f_replace.replace(`${window.location.origin}`,'')
            str_f_replace = `href="${str_f_replace}"`
            str = str.replace(str_f_replace,'')
            cur_el.outerHTML = str
        }
        i++
    })
}

function faq_open_close () {
    let faq = document.querySelector(".faq_container")
    faq.classList.toggle("open")
    faq.classList.toggle("close")
}

function open_select_language () {
    let el = document.querySelector(".language_select")
    if (getInfoAboutUser()[0] === 'mobile' || getInfoAboutUser()[0] === 'laptop'){
        el = document.querySelector(".language_select.curtain")
    }
    el.classList.toggle("open")
    el.classList.toggle("close")
}

function select_language (el) {
    let txt = el.innerHTML
    let select = document.querySelector(".name_language")
    if (getInfoAboutUser()[0] === 'mobile' || getInfoAboutUser()[0] === 'laptop'){
        select = document.querySelector(".name_language.curtain")
    }
    select.innerHTML = txt
    let lang_f_replace = ''
    if (window.location.href.includes('ru')){
        lang_f_replace = 'ru'
    } else {
        lang_f_replace = 'en'
    }
    window.location.href = window.location.href.replace(`${lang_f_replace}`,txt.toLowerCase())
    history.pushState({
        'lang':txt
    },null,window.location.href.replace(`${lang_f_replace}`,txt.toLowerCase()))
    open_select_language()
}


// curtain
function openCurtain (el) {
    let curtain = document.querySelector(".curtain")
    curtain.classList.toggle("open")
    curtain.classList.toggle("close")
    if (el.src.includes('burger_menu')){
        el.src = '/static/images/close_menu.svg'
    } else if (el.src.includes('close_menu')){
        el.src = '/static/images/burger_menu.svg'
    }
    openOverlay()
}

function openOverlay () {
    let overlay = document.querySelector(".block_overlay")
    overlay.classList.toggle("show")
    overlay.classList.toggle("hide")
    removeScrollBody()
}

function removeScrollBody () {
    let body = document.querySelector("body")
    body.classList.toggle("n_scroll")
}

// slider

function change_slide (index_this_slide,type,list_lenght) {
    let new_index_slide = null
    let this_slide = document.querySelector(`[data-id-slide="${index_this_slide}"]`)
    let iterator_slide = document.querySelector(".iterator_slide")
    if (type === 'next'){
        new_index_slide = parseInt(index_this_slide) + 1
    } else if (type === 'back'){
        new_index_slide = parseInt(index_this_slide) - 1
    }
    if (parseInt(new_index_slide) > parseInt(list_lenght)){
        new_index_slide = 1
    } else if (parseInt(new_index_slide) < 1){
        new_index_slide = list_lenght
    }
    let slide_f_show = document.querySelector(`[data-id-slide="${new_index_slide}"]`)
    if (slide_f_show){
        slide_f_show.classList.toggle("show")
        slide_f_show.classList.toggle("hide")
        this_slide.classList.toggle("show")
        this_slide.classList.toggle("hide")

        iterator_slide.innerHTML = `${new_index_slide} / ${list_lenght}`
    }

}