dave/pathfinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- fixed page scroll issue with custom scrollable select options, closed #692

Browse Source
This commit is contained in:
Mark Friedrich
2018-09-28 13:47:15 +02:00
parent 1f504a1667
commit d29701951c
7 changed files with 50 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/app/map/scrollbar.js
View File

@@ -5,7 +5,7 @@ define([
'jquery',
'app/init',
'app/util'
], function($, Init, Util){
], ($, Init, Util) => {
'use strict';
/**

22
js/app/util.js
View File

@@ -25,6 +25,9 @@ define([
ajaxOverlayClass: 'pf-loading-overlay',
ajaxOverlayWrapperClass: 'pf-loading-overlay-wrapper',
// page
noScrollClass: 'no-scroll',
// form
formEditableFieldClass: 'pf-editable', // class for all xEditable fields
formErrorContainerClass: 'pf-dialog-error-container', // class for "error" containers in dialogs
@@ -1074,7 +1077,12 @@ define([
callbacks: {
alwaysTriggerOffsets: false, // only trigger callback.onTotalScroll() once
onTotalScrollOffset: 300, // trigger callback.onTotalScroll() 100px before end
onTotalScroll: function(a){
onInit: function(){
// disable page scroll -> otherwise page AND customScrollbars will scroll
// -> this is because the initPassiveEvents() delegates the mouseWheel events
togglePageScroll(false);
},
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');
@@ -1117,6 +1125,10 @@ define([
// the only way to prevent this is to remove the element
// https://stackoverflow.com/questions/17995057/prevent-select2-from-autmatically-focussing-its-search-input-when-dropdown-is-op
$(this).parents('.editableform').find(this).next().find('.select2-selection').remove();
// re-enable page scroll -> might be disabled before by mCustomScrollbar onInit() event
// -> in case there is a custom <select> with scrollable options
togglePageScroll(true);
});
};
@@ -1138,6 +1150,14 @@ define([
'<div class="editableform-loading"><i class="fas fa-lg fa-sync fa-spin"></i></div>';
};
/**
* prevent page from scrolling
* @param enable
*/
let togglePageScroll = (enable = true) => {
$('html').toggleClass(config.noScrollClass, !enable);
};
/**
* request a captcha image
* @param reason

2
public/css/v1.4.2/pathfinder.css
View File

File diff suppressed because one or more lines are too long

2
public/css/v1.4.2/pathfinder.css.map
View File

File diff suppressed because one or more lines are too long

2
public/js/v1.4.2/app/map/scrollbar.js
View File

@@ -5,7 +5,7 @@ define([
'jquery',
'app/init',
'app/util'
], function($, Init, Util){
], ($, Init, Util) => {
'use strict';
/**

22
public/js/v1.4.2/app/util.js
View File

@@ -25,6 +25,9 @@ define([
ajaxOverlayClass: 'pf-loading-overlay',
ajaxOverlayWrapperClass: 'pf-loading-overlay-wrapper',
// page
noScrollClass: 'no-scroll',
// form
formEditableFieldClass: 'pf-editable', // class for all xEditable fields
formErrorContainerClass: 'pf-dialog-error-container', // class for "error" containers in dialogs
@@ -1074,7 +1077,12 @@ define([
callbacks: {
alwaysTriggerOffsets: false, // only trigger callback.onTotalScroll() once
onTotalScrollOffset: 300, // trigger callback.onTotalScroll() 100px before end
onTotalScroll: function(a){
onInit: function(){
// disable page scroll -> otherwise page AND customScrollbars will scroll
// -> this is because the initPassiveEvents() delegates the mouseWheel events
togglePageScroll(false);
},
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');
@@ -1117,6 +1125,10 @@ define([
// the only way to prevent this is to remove the element
// https://stackoverflow.com/questions/17995057/prevent-select2-from-autmatically-focussing-its-search-input-when-dropdown-is-op
$(this).parents('.editableform').find(this).next().find('.select2-selection').remove();
// re-enable page scroll -> might be disabled before by mCustomScrollbar onInit() event
// -> in case there is a custom <select> with scrollable options
togglePageScroll(true);
});
};
@@ -1138,6 +1150,14 @@ define([
'<div class="editableform-loading"><i class="fas fa-lg fa-sync fa-spin"></i></div>';
};
/**
* prevent page from scrolling
* @param enable
*/
let togglePageScroll = (enable = true) => {
$('html').toggleClass(config.noScrollClass, !enable);
};
/**
* request a captcha image
* @param reason

6
sass/layout/_main.scss
View File

@@ -31,9 +31,7 @@ a, .pf-link{
}
}
// emphasized text
em{
font-style: italic;
&.pf-brand{
@@ -49,6 +47,10 @@ em{
text-decoration: line-through;
}
.no-scroll{
overflow: hidden;
}
.no-padding{
padding: 0 !important;
}