Ticket #4065 - Timeline: Jump To switcher issues.

modules/boonex/timeline/classes/BxTimelineTemplate.php

@@ -64,8 +64,10 @@ class BxTimelineTemplate extends BxBaseModNotificationsTemplate
                     'repost.css',
                 );
 
-                if($this->_oConfig->isJumpTo())
-                    $aCss[] = BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'flatpickr/dist/|flatpickr.min.css';
+                if($this->_oConfig->isJumpTo()) {
+                    list($aCssCalendar, $aJsCalendar) = BxBaseFormView::getCssJsCalendar();
+                    $aCss = array_merge($aCss, $aCssCalendar);
+                }
                 break;
 
             case 'post':
@@ -100,12 +102,8 @@ class BxTimelineTemplate extends BxBaseModNotificationsTemplate
                 ));
 
                 if ($this->_oConfig->isJumpTo()) {
-                    $a = array('flatpickr/dist/flatpickr.min.js');
-                    $aLangs = BxBaseFormView::getJsCalendarLangs();
-                    $sLang = BxDolLanguages::getInstance()->detectLanguageFromArray ($aLangs);
-                    if ($sLang)
-                        $a[] = 'flatpickr/dist/l10n/' . $sLang . '.js';
-                    $aJs = array_merge($aJs, $a);
+                    list($aCssCalendar, $aJsCalendar) = BxBaseFormView::getCssJsCalendar();
+                    $aJs = array_merge($aJs, $aJsCalendar);
                 }
                 break;
 

modules/boonex/timeline/js/view.js

@@ -638,17 +638,25 @@ BxTimelineView.prototype.initCalendar = function()
     if(!oInput.length)
         return;
 
-    flatpickr(oInput.parents('.flatpickr').get(0), {
+    var oInputPicker = oInput.parents('.flatpickr:first');
+    if(!oInputPicker.length)
+        return;
+
+    flatpickr(oInputPicker.get(0), {
         wrap: true,
         dateFormat: "Y-m-d",
         minDate: 1900,
         maxDate: "today",
         onValueUpdate: function(aDates, sDate, oPicker){
-            $this.changeTimeline(oInput.parent(), sDate);
+            $this.changeTimeline(oInputPicker.find('.bx-btn'), sDate);
         }
     });
 };
 
+/**
+ * Isn't needed for now, because 'flatpickr' picker is used.
+ * Saved for possible future usage.
+ */
 BxTimelineView.prototype.showCalendar = function(oLink)
 {
 };

modules/boonex/timeline/template/css/view.css

@@ -173,11 +173,7 @@ div.bx-tl-jump-to .bx-btn {
     float: none;
 }
 div.bx-tl-jump-to .bx-tl-jump-to-calendar {
-    position: relative;
-    display: inline-block;
-    visibility: hidden;
-    width: 0;
-    height: 100%;
+    width: 100%;
 }
 
 

modules/boonex/timeline/template/jump_to.html

@@ -4,7 +4,11 @@
     </div>
 </bx_if:show_list>
 <bx_if:show_calendar>
-    <div class="__style_prefix__-jump-to-cnt flatpickr">
-        <bx_text:_bx_timeline_txt_or_jump_to />&nbsp;<a data-toggle class="bx-btn" href="javascript:void(0)" onclick="__onclick__"><i class="sys-icon calendar-alt"></i><input class="__style_prefix__-jump-to-calendar" type="text" data-input /></a>
+    <div class="__style_prefix__-jump-to-cnt flex items-center flatpickr">
+        <bx_text:_bx_timeline_txt_or_jump_to />
+        <div class="bx-form-input-wrapper bx-form-input-wrapper-datetime w-32 mx-2">
+            <input class="bx-def-font-inputs bx-form-input-datetime __style_prefix__-jump-to-calendar" type="text" data-input />
+        </div>
+        <a class="bx-btn __style_prefix__-jump-to-switch" href="javascript:void(0)" onclick="__onclick__" data-toggle><i class="sys-icon calendar-alt"></i></a>
     </div>
-</bx_if:show_calendar>
+</bx_if:show_calendar>

modules/boonex/timeline/template/load_more.html

@@ -1,8 +1,10 @@
 <div class="__style_prefix__-load-more bx-def-padding-sec-top bx-clearfix" style="display:__visible__;">
-    <button class="bx-btn<bx_if:is_disabled> bx-btn-disabled</bx_if:is_disabled>" <bx_if:show_on_click>onclick="__on_click__"</bx_if:show_on_click>>
-        <bx_text:_bx_timeline_txt_load_more />
-    </button>
-    <bx_if:show_jump_to>
-    	<div class="__style_prefix__-jump-to">__content__</div>
-    </bx_if:show_jump_to>
+    <div class="__style_prefix__-load-more-cnt flex items-center justify-between">
+        <button class="bx-btn<bx_if:is_disabled> bx-btn-disabled</bx_if:is_disabled>" <bx_if:show_on_click>onclick="__on_click__"</bx_if:show_on_click>>
+            <bx_text:_bx_timeline_txt_load_more />
+        </button>
+        <bx_if:show_jump_to>
+            <div class="__style_prefix__-jump-to">__content__</div>
+        </bx_if:show_jump_to>
+    </div>
 </div>