0.0.135 scroll search route results

static/v2/css/blocks/b_filter_routes.css

@@ -6,6 +6,7 @@
 
     border-radius: 10px;
     height: fit-content;
+    box-sizing: border-box;
     .title{
         font-size: var(--form-title-font-size);
         font-weight: 700;

static/v2/js/pages/p_search_route_results.js

@@ -0,0 +1,15 @@
+$(document).ready(function() {
+    let header_height = $("#header_bg")[0].offsetHeight;
+    let _scroll = new scroll({
+        attach_top: header_height + 10,
+        top: header_height + 20,
+        el: $(".b_filter_routes")[0],
+        recover_el_view: true,
+        ghost_block:{name: 'route_filters'},
+        $unnatach_bottom_el: $("footer")[0]
+    })
+    _scroll.init()
+    $('body')[0].onscroll = function() {
+        _scroll.attachElementWhenScroll();
+    }
+})

static/v2/js/service/scroll.js

@@ -0,0 +1,78 @@
+function attachElementWhenScroll(el, options){
+    let attach_top = options.attach_top;
+    let top = options.top;
+    let left = options.left;
+
+    if (el.getBoundingClientRect().top <= attach_top){
+        el.style.top = top + 'px';
+        el.style.position = "fixed";
+    } else if (el.getBoundingClientRect().top >= attach_top){
+        el.style.position = "unset";
+    }
+}
+
+class scroll{
+    constructor(props){
+        this.attach_top = props.attach_top;
+        this.top = props.top;
+        this.left = props.left;
+        this.$el = props.el;
+        this.recover_el_view = props.recover_el_view;
+        this.unattach_top = undefined;
+        this.$unnatach_bottom_el = props.$unnatach_bottom_el;
+        this.attached = false;
+        this.attached_by_bottom_el = false;
+        this.ghost_block = props.ghost_block;
+        this.$ghost_block = null;
+    }
+
+    attachElementWhenScroll(){
+        if (!this.attached_by_bottom_el && this.$unnatach_bottom_el && this.$unnatach_bottom_el.getBoundingClientRect().top <= window.innerHeight && this.attached){
+            let $unnatach_bottom_el_margin_top= window.getComputedStyle(this.$unnatach_bottom_el)
+            $unnatach_bottom_el_margin_top = $unnatach_bottom_el_margin_top.getPropertyValue('margin-top');
+            $unnatach_bottom_el_margin_top = $unnatach_bottom_el_margin_top.split('p')
+            $unnatach_bottom_el_margin_top = $unnatach_bottom_el_margin_top.length > 0? $unnatach_bottom_el_margin_top[0] : 0;
+            this.$el.style.top = (window.scrollY - $unnatach_bottom_el_margin_top) + 'px';
+            this.$el.style.position = "absolute";
+            this.attached_by_bottom_el = true;
+            return;
+        } else if (this.attached_by_bottom_el && this.$unnatach_bottom_el && this.$unnatach_bottom_el.getBoundingClientRect().top >= window.innerHeight) {
+            this.attachFunc(false)
+        }
+        if (!this.attached && this.$el.getBoundingClientRect().top <= this.attach_top) {
+            this.attachFunc()
+        } else if ((this.$el.parentElement.getBoundingClientRect().top - this.attach_top) > 0){
+            this.$el.style.position = "unset";
+            this.attached = false;
+            if (this.$ghost_block) this.$ghost_block.style.display = "none";
+        }
+    }
+
+    attachFunc(set_unattach=true){
+        this.$el.style.top = this.top + 'px';
+        this.$el.style.position = "fixed";
+        this.attached = true;
+        this.attached_by_bottom_el = false;
+        if (this.$ghost_block) this.$ghost_block.style.display = "block";
+    }
+
+    init(){
+        if (this.recover_el_view){
+            $(this.$el).css({
+                height: this.$el.offsetHeight,
+                width: this.$el.offsetWidth
+            })
+        }
+        if (this.ghost_block){
+            let _ghost_block = `<div class="ghost_block" data-name="${this.ghost_block.name}" style="display: none;"></div>`
+
+            $(_ghost_block).insertAfter($(this.$el));
+
+            this.$ghost_block = $(`.ghost_block[data-name="${this.ghost_block.name}"]`)[0];
+
+            this.$ghost_block.width = this.$el.offsetWidth;
+            this.$ghost_block.height = this.$el.offsetHeight;
+        }
+    }
+
+}

templates/tb_base.html

@@ -58,6 +58,7 @@ function gtag_report_conversion(url) {
     <script type="text/javascript" src="{% static "js/moment_js.js" %}"></script>
     <script type="text/javascript" src="{% static "js/moment-with-locales.js" %}"></script>
     <script type="text/javascript" src="{% static "js/datarangepicker.js" %}"></script>
+    <script type="text/javascript" src="{% static "v2/js/service/scroll.js" %}"></script>
     <script type="text/javascript" src="{% static "js/push/registerSw.js" %}"></script>
     <script src="{% static "js/rangecalendartech.js" %}"></script>
     <script src="{% static "v2/js/twb.js" %}"></script>

templates/v2/pages/p_search_route_results.html

@@ -13,6 +13,7 @@
     <script src="{% static "v2/js/widgets/w_daterangepicker.js" %}"></script>
     <script src="{% static "v2/js/blocks/b_search_routes.js" %}"></script>
     <script src="{% static "v2/js/widgets/w_route_card.js" %}"></script>
+    <script src="{% static "v2/js/pages/p_search_route_results.js" %}"></script>
 {% endblock %}
 
 {% block content %}