0.0.136 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/css/blocks/b_search_routes.css

@@ -1,9 +1,14 @@
 .b_search_routes {
 
     --button-font-size: 18px;
+
+    padding: 16px 10px;
+    background: #FFF;
+    border-radius: 10px;
     form{
         display: grid;
-        grid-template-columns: repeat(3, calc(33.3% - 72px)) 215px;
+        /* +5px in grid for padding */
+        grid-template-columns: repeat(3, calc(33.3% - 77px)) 215px;
         align-items: end;
         gap: 5px;
         [data-type="location"] {

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 + 20,
+        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,65 @@
+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;
+        }
+    }
+
+}

static/v2/js/widgets/w_daterangepicker.js

@@ -56,8 +56,12 @@ function daterangepickerInit(el, callback, date) {
 
         if (last_opened_daterangepicker) $parent = last_opened_daterangepicker.closest('.w_daterangepicker');
         let $input = $parent.querySelector(".date_range_input_cont input")
-        $input.value = start.format('DD.MM.YYYY');
-        if (end) $input.value = `${start.format('DD.MM.YYYY')} - ${end.format('DD.MM.YYYY')}`
+        let start_date = start.format('DD.MM.YYYY');
+        $input.value = start_date;
+        if (end){
+            let end_date = end.format('DD.MM.YYYY');
+            if (start_date !== end_date) $input.value = `${start_date} - ${end_date}`
+        }
         resetFieldError(el);
         if (callback) callback(el)
     });

static/v2/js/widgets/w_textarea_w_counter.js

@@ -6,8 +6,7 @@ function textareaInputE (el, callback){
     let $parent = el.closest(".w_textarea_w_counter")
 
     if (el.value.length > $parent.dataset.max_val){
-        el.value = el.value.slice(0, -1)
-        return;
+        el.value = el.value.slice(0, -(el.value.length - $parent.dataset.max_val))
     }
     let str = `${el.value.length} ${getTransFromEl($parent)} ${$parent.dataset.max_val}`
     $counter.innerHTML = str

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 %}