- Changed upcoming PF version v2.0.0 → v2.0.0-rc.1

- Fixed some bugs ("infinite scroll" in select options) in "_Select2_" js plugin

app/pathfinder.ini

@@ -14,7 +14,7 @@ NAME                        =   Pathfinder
 ;           e.g. public/js/vX.X.X/app.js
 ; Syntax:   String (current version)
 ; Default:  v2.0.0
-VERSION                     =   v2.0.0
+VERSION                     =   v2.0.0-rc.1
 
 ; Contact information [optional]
 ;           Shown on 'licence', 'contact' page.

js/app/map/scrollbar.js

@@ -15,10 +15,10 @@ define([
 
     let defaultConfig = {
         axis: 'yx',
-        theme: 'light-3' ,
+        theme: 'light-3',
         scrollInertia: 200,
         autoExpandScrollbar: false,
-        scrollButtons:{
+        scrollButtons: {
             enable: true,
             scrollAmount: 30,
             scrollType: 'stepless'

js/app/ui/dialog/map_settings.js

@@ -130,6 +130,7 @@ define([
                     id: config.newMapDialogId,
                     mapData: mapData,
                     type: mapTypesCreate,
+                    select2Class: Util.config.select2Class,
 
                     hasRightMapUpdate,
                     hasRightMapExport,
@@ -419,7 +420,8 @@ define([
                     // make <select>s to Select2 fields
                     mapInfoDialog.find(
                         '#' + config.dialogMapNewContainerId + ' .' + Util.config.select2Class + ', ' +
-                        '#' + config.dialogMapEditContainerId + ' .' + Util.config.select2Class
+                        '#' + config.dialogMapEditContainerId + ' .' + Util.config.select2Class + ', ' +
+                        '#' + config.dialogMapDownloadContainerId + ' .' + Util.config.select2Class
                     ).select2({
                         minimumResultsForSearch: -1,
                         width: '100%'

js/app/ui/form_element.js

@@ -149,7 +149,7 @@ define([
 
 
                         markup += '<div class="col-xs-3">' + parts[0] + '</div>';
-                        markup += '<div class="col-xs-2 text-center"><i class="fas fa-long-arrow-alt-right"></i></div>';
+                        markup += '<div class="col-xs-2 text-center"><i class="fas fa-long-arrow-alt-right txt-color txt-color-grayLight"></i></div>';
                         markup += '<div class="col-xs-3 ' + securityClass + '">' + label + '</div>';
                         markup += '<div class="col-xs-4 text-right">' + suffix + '</div>';
                         break;
@@ -247,7 +247,7 @@ define([
 
         let defaultConfig = {
             dropdownParent: selectElement.parents('.modal-body'),
-            minimumResultsForSearch: -1,
+            minimumResultsForSearch: Infinity,
             width: '100%',
             maxSelectionLength: 1
         };
@@ -293,7 +293,7 @@ define([
     $.fn.initStatusSelect = function(options){
 
         let defaultConfig = {
-            minimumResultsForSearch: -1,
+            minimumResultsForSearch: Infinity,
             width: '100%',
             iconClass: 'fa-circle'
         };
@@ -784,7 +784,7 @@ define([
      */
     $.fn.initSignatureGroupSelect = function(options){
         let defaultConfig = {
-            minimumResultsForSearch: -1,
+            minimumResultsForSearch: Infinity,
             width: '110px',
             dropdownParent: this.parents('.popover-content')
         };
@@ -880,7 +880,7 @@ define([
      */
     $.fn.initSignatureConnectionSelect = function(options){
         let defaultConfig = {
-            minimumResultsForSearch: -1,
+            minimumResultsForSearch: Infinity,
             width: '140px',
             dropdownParent: this.parents('.popover-content')
         };

js/app/util.js

@@ -1389,6 +1389,8 @@ define([
         });
 
         let initScrollbar = (resultsWrapper) => {
+            resultsWrapper.css('maxHeight', '300px');
+
             // default 'mousewheel' event set by select2 needs to be disabled
             // in order to make mCustomScrollbar mouseWheel enable works correctly
             $(resultsWrapper).find('ul.select2-results__options').off('mousewheel');
@@ -1397,6 +1399,8 @@ define([
             let lazyLoadImagesOffset = 240;
 
             resultsWrapper.mCustomScrollbar({
+              //setHeight: 400,
+                scrollInertia: 200,
                 mouseWheel: {
                     enable: true,
                     scrollAmount: 'auto',
@@ -1411,12 +1415,14 @@ define([
                 scrollbarPosition: 'inside',
                 autoDraggerLength: true,
                 autoHideScrollbar: false,
+                alwaysShowScrollbar: 0, // 0, 1, 2
                 advanced: {
                     updateOnContentResize: true
                 },
+                //live: true, // could not get this to work
                 callbacks: {
                     alwaysTriggerOffsets: false,    // only trigger callback.onTotalScroll() once
-                    onTotalScrollOffset: 300,       // trigger callback.onTotalScroll() 100px before end
+                    onTotalScrollOffset: 100,       // trigger callback.onTotalScroll() 100px before end
                     onInit: function(){
                         // disable page scroll -> otherwise page AND customScrollbars will scroll
                         // -> this is because the initPassiveEvents() delegates the mouseWheel events
@@ -1433,10 +1439,14 @@ define([
                     onTotalScroll: function(){
                         // we want to "trigger" Select2´s 'scroll' event
                         // in order to make its "infinite scrolling" function working
-                        this.mcs.content.find(':first-child').trigger('scroll');
+                        // -> look for "--load-more" anker (last list item)
+                        //    add "no-margin" class in order to reduce offset to the list
+                        let loadMoreLi = this.mcs.content.find('.select2-results__option--load-more');
+                        loadMoreLi.addClass('no-margin');
+                        this.mcs.content.find('> :first-child').trigger('scroll');
+                        setTimeout(() => loadMoreLi.removeClass('no-margin'), 20);
                     },
                     whileScrolling: function(){
-
                         // lazy load for images -> reduce number of calculations by % 10
                         if(0 === this.mcs.top % 10){
                             let scroller = $(this).find('.mCSB_container');
@@ -1461,7 +1471,7 @@ define([
             if($(selectElement).data('select2')){
                 let resultsOptions = $(selectElement).data('select2').$results;
                 if(resultsOptions.length){
-                    let resultsWrapper = resultsOptions.parents('.select2-results');
+                    let resultsWrapper = resultsOptions.closest('.select2-results');
                     if(resultsWrapper.length){
                         wrapper = resultsWrapper;
                     }

public/js/v2.0.0-rc.1/app/map/scrollbar.js

@@ -15,10 +15,10 @@ define([
 
     let defaultConfig = {
         axis: 'yx',
-        theme: 'light-3' ,
+        theme: 'light-3',
         scrollInertia: 200,
         autoExpandScrollbar: false,
-        scrollButtons:{
+        scrollButtons: {
             enable: true,
             scrollAmount: 30,
             scrollType: 'stepless'

public/js/v2.0.0-rc.1/app/ui/dialog/map_settings.js

@@ -130,6 +130,7 @@ define([
                     id: config.newMapDialogId,
                     mapData: mapData,
                     type: mapTypesCreate,
+                    select2Class: Util.config.select2Class,
 
                     hasRightMapUpdate,
                     hasRightMapExport,
@@ -419,7 +420,8 @@ define([
                     // make <select>s to Select2 fields
                     mapInfoDialog.find(
                         '#' + config.dialogMapNewContainerId + ' .' + Util.config.select2Class + ', ' +
-                        '#' + config.dialogMapEditContainerId + ' .' + Util.config.select2Class
+                        '#' + config.dialogMapEditContainerId + ' .' + Util.config.select2Class + ', ' +
+                        '#' + config.dialogMapDownloadContainerId + ' .' + Util.config.select2Class
                     ).select2({
                         minimumResultsForSearch: -1,
                         width: '100%'

public/js/v2.0.0-rc.1/app/ui/form_element.js

@@ -149,7 +149,7 @@ define([
 
 
                         markup += '<div class="col-xs-3">' + parts[0] + '</div>';
-                        markup += '<div class="col-xs-2 text-center"><i class="fas fa-long-arrow-alt-right"></i></div>';
+                        markup += '<div class="col-xs-2 text-center"><i class="fas fa-long-arrow-alt-right txt-color txt-color-grayLight"></i></div>';
                         markup += '<div class="col-xs-3 ' + securityClass + '">' + label + '</div>';
                         markup += '<div class="col-xs-4 text-right">' + suffix + '</div>';
                         break;
@@ -247,7 +247,7 @@ define([
 
         let defaultConfig = {
             dropdownParent: selectElement.parents('.modal-body'),
-            minimumResultsForSearch: -1,
+            minimumResultsForSearch: Infinity,
             width: '100%',
             maxSelectionLength: 1
         };
@@ -293,7 +293,7 @@ define([
     $.fn.initStatusSelect = function(options){
 
         let defaultConfig = {
-            minimumResultsForSearch: -1,
+            minimumResultsForSearch: Infinity,
             width: '100%',
             iconClass: 'fa-circle'
         };
@@ -784,7 +784,7 @@ define([
      */
     $.fn.initSignatureGroupSelect = function(options){
         let defaultConfig = {
-            minimumResultsForSearch: -1,
+            minimumResultsForSearch: Infinity,
             width: '110px',
             dropdownParent: this.parents('.popover-content')
         };
@@ -880,7 +880,7 @@ define([
      */
     $.fn.initSignatureConnectionSelect = function(options){
         let defaultConfig = {
-            minimumResultsForSearch: -1,
+            minimumResultsForSearch: Infinity,
             width: '140px',
             dropdownParent: this.parents('.popover-content')
         };

public/js/v2.0.0-rc.1/app/util.js

@@ -1389,6 +1389,8 @@ define([
         });
 
         let initScrollbar = (resultsWrapper) => {
+            resultsWrapper.css('maxHeight', '300px');
+
             // default 'mousewheel' event set by select2 needs to be disabled
             // in order to make mCustomScrollbar mouseWheel enable works correctly
             $(resultsWrapper).find('ul.select2-results__options').off('mousewheel');
@@ -1397,6 +1399,8 @@ define([
             let lazyLoadImagesOffset = 240;
 
             resultsWrapper.mCustomScrollbar({
+              //setHeight: 400,
+                scrollInertia: 200,
                 mouseWheel: {
                     enable: true,
                     scrollAmount: 'auto',
@@ -1411,12 +1415,14 @@ define([
                 scrollbarPosition: 'inside',
                 autoDraggerLength: true,
                 autoHideScrollbar: false,
+                alwaysShowScrollbar: 0, // 0, 1, 2
                 advanced: {
                     updateOnContentResize: true
                 },
+                //live: true, // could not get this to work
                 callbacks: {
                     alwaysTriggerOffsets: false,    // only trigger callback.onTotalScroll() once
-                    onTotalScrollOffset: 300,       // trigger callback.onTotalScroll() 100px before end
+                    onTotalScrollOffset: 100,       // trigger callback.onTotalScroll() 100px before end
                     onInit: function(){
                         // disable page scroll -> otherwise page AND customScrollbars will scroll
                         // -> this is because the initPassiveEvents() delegates the mouseWheel events
@@ -1433,10 +1439,14 @@ define([
                     onTotalScroll: function(){
                         // we want to "trigger" Select2´s 'scroll' event
                         // in order to make its "infinite scrolling" function working
-                        this.mcs.content.find(':first-child').trigger('scroll');
+                        // -> look for "--load-more" anker (last list item)
+                        //    add "no-margin" class in order to reduce offset to the list
+                        let loadMoreLi = this.mcs.content.find('.select2-results__option--load-more');
+                        loadMoreLi.addClass('no-margin');
+                        this.mcs.content.find('> :first-child').trigger('scroll');
+                        setTimeout(() => loadMoreLi.removeClass('no-margin'), 20);
                     },
                     whileScrolling: function(){
-
                         // lazy load for images -> reduce number of calculations by % 10
                         if(0 === this.mcs.top % 10){
                             let scroller = $(this).find('.mCSB_container');
@@ -1461,7 +1471,7 @@ define([
             if($(selectElement).data('select2')){
                 let resultsOptions = $(selectElement).data('select2').$results;
                 if(resultsOptions.length){
-                    let resultsWrapper = resultsOptions.parents('.select2-results');
+                    let resultsWrapper = resultsOptions.closest('.select2-results');
                     if(resultsWrapper.length){
                         wrapper = resultsWrapper;
                     }