documentation page

static/aerbimJS.js

@@ -16,6 +16,7 @@ $(document).ready(function (){
         setInfInCurtainDocumentationMobile()
         setButtonOpenMobileDocCurtain()
     }
+    windowScrollDocPage()
 })
 
 function setButtonOpenMobileDocCurtain () {
@@ -578,13 +579,57 @@ function showContentPartTree (el) {
     let $arrow = $parent.querySelector(".tree_documentation_arrow_img")
     $content_part.classList.toggle("hidden")
     if ($arrow.style.rotate === '0deg' || $arrow.style.rotate === ''){
-        $($arrow).animate({rotate: '180deg'})
+        $($arrow).css({rotate: '180deg'})
     } else {
-        $($arrow).animate({rotate: '0deg'})
+        $($arrow).css({rotate: '0deg'})
     }
 }
 let waitingTop = null
 let maxScroll = null
+
+function windowScrollDocPage (){
+    if (getInfoAboutUser()[0] !== 'laptop' && getInfoAboutUser()[0] !== 'mobile'){
+        if (window.location.href.includes("docs")){
+            let $curtain = $(".left_curtain_documentation")
+            let scroll = $(window)[0].scrollY
+            if (scroll === 0){
+                waitingTop = $(".left_curtain_documentation")[0].getBoundingClientRect().top - 172
+                maxScroll = $(".documentation_block")[0].getBoundingClientRect().bottom - $(".left_curtain_documentation")[0].offsetHeight - 172
+            }
+            let $new_curtain = $($curtain[1])
+
+            if (scroll < maxScroll || !maxScroll){
+                if (!$curtain[1] && waitingTop){
+                    $new_curtain = $curtain.clone()
+                    $new_curtain.insertAfter($curtain)
+                    let $new_curtain_tree = $new_curtain.find(".tree_documentation_container")
+                    $new_curtain_tree.css({height: 'calc(100vh - 245px);'})
+                }
+                if (scroll >= waitingTop && waitingTop){
+                    $new_curtain.css({position:'fixed',top: 166,bottom:"unset"})
+                    $($curtain[0]).css({opacity:0})
+                    $($curtain[0]).find(".tree_documentation_container").css({display:'none'})
+                } else if (scroll < waitingTop && waitingTop) {
+                    $new_curtain.remove()
+                    $($curtain[0]).css({opacity:1})
+                    $($curtain[0]).find(".tree_documentation_container").css({display:'block'})
+                } else if (!waitingTop){
+                    waitingTop = $(".left_curtain_documentation")[0].getBoundingClientRect().top - 172
+                    maxScroll = $(".documentation_block")[0].getBoundingClientRect().bottom - $(".left_curtain_documentation")[0].offsetHeight - 172
+                }
+            } else {
+                if (!$curtain[1]){
+                    $new_curtain = $curtain.clone()
+                    $new_curtain.insertAfter($curtain)
+                    let $new_curtain_tree = $new_curtain.find(".tree_documentation_container")
+                    $new_curtain_tree.css({height: 'calc(100vh - 245px);'})
+                }
+                $new_curtain.css({position:'absolute',bottom: 0,top: 'unset'})
+                $($curtain[0]).css({opacity:0})
+            }
+        }
+    }
+}
 $(window).scroll(function (){
     if (getInfoAboutUser()[0] !== 'laptop' && getInfoAboutUser()[0] !== 'mobile'){
         if (window.location.href.includes("docs")){
@@ -608,6 +653,7 @@ $(window).scroll(function (){
                     $($curtain[0]).css({opacity:0})
                     $($curtain[0]).find(".tree_documentation_container").css({display:'none'})
                 } else if (scroll < waitingTop && waitingTop) {
+                    $($curtain[0]).find(".tree_documentation_container")[0].innerHTML = $($new_curtain[0]).find(".tree_documentation_container")[0].innerHTML
                     $new_curtain.remove()
                     $($curtain[0]).css({opacity:1})
                     $($curtain[0]).find(".tree_documentation_container").css({display:'block'})

templates/blocks/b_header.html

@@ -10,7 +10,7 @@
         </a>
         <div class="right_part_header">
 {#            <a class="standart_txt text_header pointer">Поддержка</a>#}
-            <a href="{% url 'docs_main' %}" class="standart_txt text_header last_left pointer">{% translate "Документация" %}</a>
+            <a href="{% url 'docs_main' %}" class="standart_txt text_header last_left pointer">{% translate "Поддержка" %}</a>
             <a href="{% url 'contacts' %}" class="standart_txt text_header last_left pointer">{% translate "Контакты" %}</a>
             <div class="splitter_text_header"></div>
             <div class="language_select close">

templates/pages/p_documentation.html

@@ -72,7 +72,7 @@
                     	<div class="tree_documentation_container_first_level">
                             <div class="tree_documentation_container_first_line">
                                 {% if obj.children %}
-                                	<picture class="tree_documentation_arrow_picture" onclick="showContentPartTree(this)">
+                                	<picture class="tree_documentation_arrow_picture" onclick="showContentPartTree(this)" {% if obj.active %}style="rotate: 180deg;"{% endif %}>
                                         <source srcset="{% static "images/arrow_for_documentation_switcher.svg" %}">
                                         <img class="tree_documentation_arrow_img" src="{% static "images/arrow_for_documentation_switcher.svg" %}" alt="">
                                     </picture>
@@ -88,7 +88,7 @@
                                         <div class="tree_documentation_container_second_level">
                                             <div class="tree_documentation_container_first_line">
                                                 {% if obj.children %}
-                                                    <picture class="tree_documentation_arrow_picture" onclick="showContentPartTree(this)">
+                                                    <picture class="tree_documentation_arrow_picture" onclick="showContentPartTree(this)" {% if obj.active %}style="rotate: 180deg;"{% endif %}>
                                                         <source srcset="{% static "images/arrow_for_documentation_switcher.svg" %}">
                                                         <img class="tree_documentation_arrow_img" src="{% static "images/arrow_for_documentation_switcher.svg" %}" alt="">
                                                     </picture>