documentation page

This commit is contained in:
SBD
2024-07-15 14:20:53 +03:00
parent 5f207aed36
commit 3668d7a549
3 changed files with 51 additions and 5 deletions

View File

@@ -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'})

View File

@@ -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">

View File

@@ -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>