mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-06-17 07:40:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

version 1.3.0

Browse Source
This commit is contained in:
Rene
2018-02-26 20:06:14 +01:00
parent 176b13e73c
commit 8bc44e9f0a
8 changed files with 563 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2 -2
View File
@@ -219,7 +219,7 @@ Take the table below only as a overview of all options.
<td>autoHideDelay</td> <td>autoHideDelay</td>
<td>number</td> <td>number</td>
<td><code>800</code></td> <td><code>800</code></td>
<td>The possibility to hide visible scrollbars after a certain action.</td> <td>The delay in milliseconds before the scrollbars gets hidden automatically.</td>
</tr> </tr>
<tr> <tr>
<td></td> <td></td>
@@ -516,7 +516,7 @@ OverlayScrollbars.defaultOptions({
</td> </td>
</tr> </tr>
<tr> <tr>
<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/gmethod-getglobals" target="_blank">OverlayScrollbars.globals()</a></b></td> <td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/gmethod-globals" target="_blank">OverlayScrollbars.globals()</a></b></td>
<td>Returns a plain object which contains global information about the plugin and each instance of it.</td> <td>Returns a plain object which contains global information about the plugin and each instance of it.</td>
</tr> </tr>
<tr> <tr>
css/OverlayScrollbars.css
+2 -2
View File
@@ -2,13 +2,13 @@
* OverlayScrollbars * OverlayScrollbars
* https://github.com/KingSora/OverlayScrollbars * https://github.com/KingSora/OverlayScrollbars
* *
* Version: 1.2.3 * Version: 1.3.0
* *
* Copyright KingSora. * Copyright KingSora.
* https://github.com/KingSora * https://github.com/KingSora
* *
* Released under the MIT license. * Released under the MIT license.
* Date: 02.02.2018 * Date: 26.02.2018
*/ */
/* /*
css/OverlayScrollbars.min.css
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
js/OverlayScrollbars.js
+292 -226
View File
File diff suppressed because it is too large Load Diff
js/OverlayScrollbars.min.js
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
js/jquery.overlayScrollbars.js
+256 -208
View File
@@ -2,13 +2,13 @@
* OverlayScrollbars * OverlayScrollbars
* https://github.com/KingSora/OverlayScrollbars * https://github.com/KingSora/OverlayScrollbars
* *
* Version: 1.2.3 * Version: 1.3.0
* *
* Copyright KingSora. * Copyright KingSora.
* https://github.com/KingSora * https://github.com/KingSora
* *
* Released under the MIT license. * Released under the MIT license.
* Date: 02.02.2018 * Date: 26.02.2018
*/ */
(function (global, factory) { (function (global, factory) {
@@ -18,16 +18,36 @@
module.exports = factory(global, global.document, undefined, require('jquery')); module.exports = factory(global, global.document, undefined, require('jquery'));
else else
factory(global, global.document, undefined, global.jQuery); factory(global, global.document, undefined, global.jQuery);
}(typeof window !== "undefined" ? window : this, (function(window, document, undefined, jQuery) { }(typeof window !== 'undefined' ? window : this, (function(window, document, undefined, jQuery) {
'use-strict'; 'use-strict';
var PLUGINNAME = "OverlayScrollbars"; var PLUGINNAME = 'OverlayScrollbars';
var TYPES = {
o : 'object',
f : 'function',
a : 'array',
s : 'string',
n : 'number',
u : 'undefined'
};
var WORDING = {
c : 'class',
s : 'style',
i : 'id',
oH : 'offsetHeight',
cH : 'clientHeight',
sH : 'scrollHeight',
oW : 'offsetWidth',
cW : 'clientWidth',
sW : 'scrollWidth'
};
var COMPATIBILITY = { var COMPATIBILITY = {
/** /**
* Gets the current window width. * Gets the current window width.
* @returns {Number|number} The current window width in pixel. * @returns {Number|number} The current window width in pixel.
*/ */
wW: function() { wW: function() {
return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; return window.innerWidth || document.documentElement[WORDING.cW] || document.body[WORDING.cW];
}, },
/** /**
@@ -35,7 +55,7 @@
* @returns {Number|number} The current window height in pixel. * @returns {Number|number} The current window height in pixel.
*/ */
wH: function() { wH: function() {
return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; return window.innerHeight || document.documentElement[WORDING.cH] || document.body[WORDING.cH];
}, },
/** /**
@@ -158,6 +178,25 @@
return (e.button & 1 ? 1 : (e.button & 2 ? 3 : (e.button & 4 ? 2 : 0))); return (e.button & 1 ? 1 : (e.button & 2 ? 3 : (e.button & 4 ? 2 : 0)));
else else
return e.which; return e.which;
},
bind: function(func, oThis) {
if (typeof func !== TYPES.f) {
throw "Can't bind function!";
// closest thing possible to the ECMAScript 5
// internal IsCallable function
//throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
}
var aArgs = Array.prototype.slice.call(arguments, 2);
var fNOP = function() {};
var fBound = function() { return func.apply(this instanceof fNOP ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments))); };
if (func.prototype)
fNOP.prototype = func.prototype; // Function.prototype doesn't have a prototype property
fBound.prototype = new fNOP();
return fBound;
} }
}; };
var HELPER = (function(jQuery) { var HELPER = (function(jQuery) {
@@ -247,27 +286,26 @@
* @returns {boolean|string} True if property found, false or string otherwise. A string indicates where the property path couldn't be resolved anymore. * @returns {boolean|string} True if property found, false or string otherwise. A string indicates where the property path couldn't be resolved anymore.
*/ */
function _getPropertyByStringMaster(object, propertyString, propertyStringProgress, callbackOnProperty, callbackOnParentObject) { function _getPropertyByStringMaster(object, propertyString, propertyStringProgress, callbackOnProperty, callbackOnParentObject) {
var strFunc = 'function';
var strObject = 'object';
var found = false; var found = false;
propertyStringProgress = propertyStringProgress === undefined ? '' : propertyStringProgress; propertyStringProgress = propertyStringProgress === undefined ? '' : propertyStringProgress;
if (typeof propertyString !== 'string') if (typeof propertyString !== TYPES.s)
return found; return found;
if (propertyString.length === 0) if (propertyString.length === 0)
return found; return found;
if (propertyStringProgress === "") { if (propertyStringProgress === '') {
var nameSplit = propertyString.split('.'); var nameSplit = propertyString.split('.');
var currObj = object; var currObj = object;
var nameProgression = ""; var nameProgression = '';
var pathIsInvalid = false; var pathIsInvalid = false;
for (var i = 0; i < nameSplit.length; i++) { for (var i = 0; i < nameSplit.length; i++) {
var currSplit = nameSplit[i]; var currSplit = nameSplit[i];
currObj = currObj[currSplit]; currObj = currObj[currSplit];
nameProgression += currSplit + '.'; nameProgression += currSplit + '.';
if (helper.type(currObj) !== strObject && i + 1 !== nameSplit.length) { if (helper.type(currObj) !== TYPES.o && i + 1 !== nameSplit.length) {
pathIsInvalid = true; pathIsInvalid = true;
break; break;
} }
@@ -279,15 +317,15 @@
for (var prop in object) { for (var prop in object) {
if (object.hasOwnProperty(prop)) { if (object.hasOwnProperty(prop)) {
var isSearchedProperty = (propertyStringProgress + prop) === propertyString; var isSearchedProperty = (propertyStringProgress + prop) === propertyString;
if (helper.type(object[prop]) === strObject && !isSearchedProperty) { if (helper.type(object[prop]) === TYPES.o && !isSearchedProperty) {
found = _getPropertyByStringMaster(object[prop], propertyString, propertyStringProgress + prop + '.', callbackOnProperty, callbackOnParentObject); found = _getPropertyByStringMaster(object[prop], propertyString, propertyStringProgress + prop + '.', callbackOnProperty, callbackOnParentObject);
if (typeof callbackOnParentObject === strFunc) if (typeof callbackOnParentObject === TYPES.f)
callbackOnParentObject(object, prop); callbackOnParentObject(object, prop);
if (found) if (found)
break; break;
} }
else if (isSearchedProperty) { else if (isSearchedProperty) {
if (typeof callbackOnProperty === strFunc) if (typeof callbackOnProperty === TYPES.f)
callbackOnProperty(object, prop); callbackOnProperty(object, prop);
found = true; found = true;
break; break;
@@ -296,7 +334,7 @@
} }
return found; return found;
}; }
return { return {
/** /**
@@ -343,7 +381,7 @@
var obj = {}; var obj = {};
var tmp = obj; var tmp = obj;
for (var i = 0; i < propertyPathSplits.length; i++) { for (var i = 0; i < propertyPathSplits.length; i++) {
var value = i === propertyPathSplits.length - 1 ? propertyValue : {}; var value = i === propertyPathSplits.length - 1 ? propertyValue : { };
tmp = tmp[propertyPathSplits[i]] = value; tmp = tmp[propertyPathSplits[i]] = value;
} }
helper.extend(true, object, obj); helper.extend(true, object, obj);
@@ -444,41 +482,60 @@
_base.autoUpdateLoop = false; _base.autoUpdateLoop = false;
_base.autoUpdateRecommended = compatibility.mO() === undefined; _base.autoUpdateRecommended = compatibility.mO() === undefined;
var bodyElement = helper('body'); var bodyElement = helper('body');
var scrollbarDummyElement = helper('<div id="hs-dummy-scrollbar-size"><div style="height: 200%; width: 200%;"></div></div>'); var scrollbarDummyElement = helper('<div id="hs-dummy-scrollbar-size"><div style="height: 200%; width: 200%; margin: 10px 0;"></div></div>');
var nativeScrollbarSize = (function() { var nativeScrollbarSize = (function() {
bodyElement.append(scrollbarDummyElement); bodyElement.append(scrollbarDummyElement);
var strOverflow = 'overflow'; var strOverflow = 'overflow';
var strHidden = 'hidden';
var scrollbarDummyElement0 = scrollbarDummyElement[0]; var scrollbarDummyElement0 = scrollbarDummyElement[0];
var dummyContainerChild = helper(scrollbarDummyElement.children('div').first()); var dummyContainerChild = helper(scrollbarDummyElement.children('div').first());
var IEBUGFIX = scrollbarDummyElement0.offsetHeight; //IE9 causes a bug where offsetHeight is zero for no reason var IEBUGFIX = scrollbarDummyElement0[WORDING.oH]; //IE9 causes a bug where offsetHeight is zero for no reason
var scrollbarSize; var scrollbarSize;
if(IEBUGFIX === 0) if(IEBUGFIX === 0)
scrollbarDummyElement.hide().show(); scrollbarDummyElement.hide().show();
var scrollbarSize = { scrollbarSize = {
x: scrollbarDummyElement0.offsetHeight - scrollbarDummyElement0.clientHeight, x: scrollbarDummyElement0[WORDING.oH] - scrollbarDummyElement0[WORDING.cH],
y: scrollbarDummyElement0.offsetWidth - scrollbarDummyElement0.clientWidth y: scrollbarDummyElement0[WORDING.oW] - scrollbarDummyElement0[WORDING.cW]
}; };
scrollbarDummyElement.addClass('os-viewport-native-scrollbars-invisible'); //https://bugzilla.mozilla.org/show_bug.cgi?id=1439305
scrollbarDummyElement.css(strOverflow, 'hidden').hide().css(strOverflow, 'scroll').show(); //fix opera bug: scrollbar styles will only appear if overflow value is scroll or auto during the activation of the style. _base.restrictedMeasuring = (function() {
_base.nativeScrollbarStyling = (scrollbarDummyElement0.offsetHeight - scrollbarDummyElement0.clientHeight) === 0 && (scrollbarDummyElement0.offsetWidth - scrollbarDummyElement0.clientWidth) === 0; scrollbarDummyElement.css(strOverflow, strHidden);
scrollbarDummyElement.css({ 'overflow-y' : 'hidden', 'direction' : 'rtl' }).scrollLeft(0); var scrollSize = {
var dummyContainerOffset = scrollbarDummyElement.offset(); w : scrollbarDummyElement0[WORDING.sW],
var dummyContainerChildOffset = dummyContainerChild.offset(); h : scrollbarDummyElement0[WORDING.sH]
scrollbarDummyElement.scrollLeft(999); };
var dummyContainerScrollOffsetAfterScroll = dummyContainerChild.offset(); scrollbarDummyElement.css(strOverflow, 'visible');
_base.rtlScrollBehavior = { var scrollSize2 = {
//origin direction = determines if the zero scroll position is on the left or right side w : scrollbarDummyElement0[WORDING.sW],
//'i' means 'invert' (i === true means that the axis must be inverted to be correct) h : scrollbarDummyElement0[WORDING.sH]
//true = on the left side };
//false = on the right side return (scrollSize.w - scrollSize2.w) !== 0 || (scrollSize.h - scrollSize2.h) !== 0;
i : dummyContainerOffset.left === dummyContainerChildOffset.left, })();
//negative = determines if the maximum scroll is positive or negative _base.nativeScrollbarStyling = (function() {
//'n' means 'negate' (n === true means that the axis must be negated to be correct) scrollbarDummyElement.addClass('os-viewport-native-scrollbars-invisible');
//true = negative scrollbarDummyElement.css(strOverflow, strHidden).hide().css(strOverflow, 'scroll').show(); //fix opera bug: scrollbar styles will only appear if overflow value is scroll or auto during the activation of the style.
//false = positive return (scrollbarDummyElement0[WORDING.oH] - scrollbarDummyElement0[WORDING.cH]) === 0 && (scrollbarDummyElement0[WORDING.oW] - scrollbarDummyElement0[WORDING.cW]) === 0;
n : dummyContainerChildOffset.left - dummyContainerScrollOffsetAfterScroll.left === 0 })();
}; _base.rtlScrollBehavior = (function() {
scrollbarDummyElement.removeAttr('style').remove(); scrollbarDummyElement.css({ 'overflow-y' : strHidden, 'direction' : 'rtl' }).scrollLeft(0);
var dummyContainerOffset = scrollbarDummyElement.offset();
var dummyContainerChildOffset = dummyContainerChild.offset();
scrollbarDummyElement.scrollLeft(999);
var dummyContainerScrollOffsetAfterScroll = dummyContainerChild.offset();
return {
//origin direction = determines if the zero scroll position is on the left or right side
//'i' means 'invert' (i === true means that the axis must be inverted to be correct)
//true = on the left side
//false = on the right side
i : dummyContainerOffset.left === dummyContainerChildOffset.left,
//negative = determines if the maximum scroll is positive or negative
//'n' means 'negate' (n === true means that the axis must be negated to be correct)
//true = negative
//false = positive
n : dummyContainerChildOffset.left - dummyContainerScrollOffsetAfterScroll.left === 0
};
})();
scrollbarDummyElement.removeAttr(WORDING.s).remove();
return scrollbarSize; return scrollbarSize;
})(); })();
var nativeScrollbarIsOverlaid = { var nativeScrollbarIsOverlaid = {
@@ -552,33 +609,6 @@
} }
_base.supportTransform = detectCSSFeature("transform"); _base.supportTransform = detectCSSFeature("transform");
_base.supportTransition = detectCSSFeature("transition"); _base.supportTransition = detectCSSFeature("transition");
if (!Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
if (typeof this !== 'function') {
// closest thing possible to the ECMAScript 5
// internal IsCallable function
throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function() {},
fBound = function() {
return fToBind.apply(this instanceof fNOP
? this
: oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
if (this.prototype) {
// Function.prototype doesn't have a prototype property
fNOP.prototype = this.prototype;
}
fBound.prototype = new fNOP();
return fBound;
};
}
//passive event support //passive event support
var supportsPassive = false; var supportsPassive = false;
try { try {
@@ -641,8 +671,8 @@
bodyElement.append(scrollbarDummyElement); bodyElement.append(scrollbarDummyElement);
var measure = scrollbarDummyElement[0]; var measure = scrollbarDummyElement[0];
_base.nativeScrollbarSize = { _base.nativeScrollbarSize = {
x: measure.offsetHeight - measure.clientHeight, x: measure[WORDING.oH] - measure[WORDING.cH],
y: measure.offsetWidth - measure.clientWidth y: measure[WORDING.oW] - measure[WORDING.cW]
}; };
scrollbarDummyElement.remove(); scrollbarDummyElement.remove();
helper.each(instances.all(), function () { helper.each(instances.all(), function () {
@@ -798,6 +828,7 @@
var _supportTransform; var _supportTransform;
var _supportPassiveEvents; var _supportPassiveEvents;
var _supportResizeObserver; var _supportResizeObserver;
var _restrictedMeasuring;
var _isBorderBox; var _isBorderBox;
var _paddingX; var _paddingX;
var _paddingY; var _paddingY;
@@ -839,8 +870,6 @@
var _strScrollbar = 'scrollbar'; var _strScrollbar = 'scrollbar';
var _strMinusHorizontal = '-horizontal'; var _strMinusHorizontal = '-horizontal';
var _strMinusVertical = '-vertical'; var _strMinusVertical = '-vertical';
var _strNumber = 'number';
var _strString = 'string';
var _strScrollLeft = _strScroll + 'Left'; var _strScrollLeft = _strScroll + 'Left';
var _strScrollTop = _strScroll + 'Top'; var _strScrollTop = _strScroll + 'Top';
var _strMouseTouchDownEvent = 'mousedown touchstart'; var _strMouseTouchDownEvent = 'mousedown touchstart';
@@ -850,7 +879,7 @@
var _strKeyUpEvent = 'keyup'; var _strKeyUpEvent = 'keyup';
var _strSelectStartEvent = 'selectstart'; var _strSelectStartEvent = 'selectstart';
var _strTransitionEndEvent = 'transitionend webkitTransitionEnd oTransitionEnd'; var _strTransitionEndEvent = 'transitionend webkitTransitionEnd oTransitionEnd';
var _strResizeObserverProperty = '~_overlayScrollbarsRO_~'; var _strResizeObserverProperty = '__overlayScrollbarsRO__';
//class names: //class names:
var _cassNamesPrefix = 'os-'; var _cassNamesPrefix = 'os-';
@@ -904,7 +933,7 @@
//update //update
var _lastUpdateTime; var _lastUpdateTime;
var _swallowedUpdateParams = {}; var _swallowedUpdateParams = { };
var _swallowedUpdateTimeout; var _swallowedUpdateTimeout;
var _swallowUpdateLag = 33; var _swallowUpdateLag = 33;
@@ -1029,8 +1058,8 @@
return; return;
var measureElement = _sizeObserverElement[0]; var measureElement = _sizeObserverElement[0];
var hostSize = { var hostSize = {
w: measureElement.scrollWidth, w: measureElement[WORDING.sW],
h: measureElement.scrollHeight h: measureElement[WORDING.sH]
}; };
if (_initialized) { if (_initialized) {
var changed = checkCacheDouble(hostSize, _hostElementSizeChangeDetectedCache); var changed = checkCacheDouble(hostSize, _hostElementSizeChangeDetectedCache);
@@ -1155,8 +1184,8 @@
var shrinkElement = helper(observerElement[strChildNodes][1]); var shrinkElement = helper(observerElement[strChildNodes][1]);
var expandElement = helper(observerElement[strChildNodes][0]); var expandElement = helper(observerElement[strChildNodes][0]);
var expandElementChild = helper(expandElement[0][strChildNodes][0]); var expandElementChild = helper(expandElement[0][strChildNodes][0]);
var widthCache = observerElement.offsetWidth; var widthCache = observerElement[WORDING.oW];
var heightCache = observerElement.offsetHeight; var heightCache = observerElement[WORDING.oH];
var isDirty; var isDirty;
var rAFId; var rAFId;
var currWidth; var currWidth;
@@ -1165,8 +1194,8 @@
var nativeScrollbarSize = globals.nativeScrollbarSize; //care don't make changes to this object!!! var nativeScrollbarSize = globals.nativeScrollbarSize; //care don't make changes to this object!!!
var reset = function () { var reset = function () {
/* /*
var sizeResetWidth = observerElement.offsetWidth + nativeScrollbarSize.x * factor + nativeScrollbarSize.y * factor + _overlayScrollbarDummySize.x + _overlayScrollbarDummySize.y; var sizeResetWidth = observerElement[WORDING.oW] + nativeScrollbarSize.x * factor + nativeScrollbarSize.y * factor + _overlayScrollbarDummySize.x + _overlayScrollbarDummySize.y;
var sizeResetHeight = observerElement.offsetHeight + nativeScrollbarSize.x * factor + nativeScrollbarSize.y * factor + _overlayScrollbarDummySize.x + _overlayScrollbarDummySize.y; var sizeResetHeight = observerElement[WORDING.oH] + nativeScrollbarSize.x * factor + nativeScrollbarSize.y * factor + _overlayScrollbarDummySize.x + _overlayScrollbarDummySize.y;
var expandChildCSS = {}; var expandChildCSS = {};
expandChildCSS[_strWidth] = sizeResetWidth; expandChildCSS[_strWidth] = sizeResetWidth;
expandChildCSS[_strHeight] = sizeResetHeight; expandChildCSS[_strHeight] = sizeResetHeight;
@@ -1189,8 +1218,8 @@
callback(); callback();
}; };
var onScroll = function (event) { var onScroll = function (event) {
currWidth = observerElement.offsetWidth; currWidth = observerElement[WORDING.oW];
currHeight = observerElement.offsetHeight; currHeight = observerElement[WORDING.oH];
isDirty = currWidth != widthCache || currHeight != heightCache; isDirty = currWidth != widthCache || currHeight != heightCache;
if (event && isDirty && !rAFId) { if (event && isDirty && !rAFId) {
@@ -1233,15 +1262,15 @@
var JQelement = targetElement; var JQelement = targetElement;
targetElement = targetElement[0]; targetElement = targetElement[0];
var attachEvent = doc.attachEvent; var attachEvent = doc.attachEvent;
var isIE = typeof navigator !== 'undefined' ? navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/Edge/) : true; var isIE = typeof navigator !== TYPES.u ? navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/Edge/) : true;
if (attachEvent) { if (attachEvent) {
JQelement.prepend(_strDivBegin + _classNameResizeObserverElement + _strDivEnd); JQelement.prepend(_strDivBegin + _classNameResizeObserverElement + _strDivEnd);
JQelement.find(_strDot + _classNameResizeObserverElement).first()[0].attachEvent('onresize', callback); JQelement.find(_strDot + _classNameResizeObserverElement).first()[0].attachEvent('onresize', callback);
} }
else { else {
var obj = doc.createElement('object'); var obj = doc.createElement(TYPES.o);
obj.setAttribute('tabindex', '-1'); obj.setAttribute('tabindex', '-1');
obj.setAttribute('class', _classNameResizeObserverElement); obj.setAttribute(WORDING.c, _classNameResizeObserverElement);
obj.onload = function () { obj.onload = function () {
var wnd = this.contentDocument.defaultView; var wnd = this.contentDocument.defaultView;
wnd.addEventListener('resize', callback); wnd.addEventListener('resize', callback);
@@ -1377,7 +1406,8 @@
* @param args The args with which the callback shall be called. * @param args The args with which the callback shall be called.
*/ */
function callCallback(callback, args) { function callCallback(callback, args) {
callback.call(_base, args); if(_initialized)
callback.call(_base, args);
} }
/** /**
@@ -1405,7 +1435,7 @@
_mutationObserverHost.observe(_hostElement[0], { _mutationObserverHost.observe(_hostElement[0], {
attributes: true, attributes: true,
attributeOldValue: true, attributeOldValue: true,
attributeFilter: ['id', 'class', 'style'] attributeFilter: [WORDING.i, WORDING.c, WORDING.s]
}); });
_mutationObserverContent.observe(_isTextarea ? _targetElement[0] : _contentElement[0], { _mutationObserverContent.observe(_isTextarea ? _targetElement[0] : _contentElement[0], {
@@ -1414,7 +1444,7 @@
subtree: !_isTextarea, subtree: !_isTextarea,
childList: !_isTextarea, childList: !_isTextarea,
characterData: !_isTextarea, characterData: !_isTextarea,
attributeFilter: _isTextarea ? ['wrap', 'cols', 'rows'] : ['id', 'class', 'style'] attributeFilter: _isTextarea ? ['wrap', 'cols', 'rows'] : [WORDING.i, WORDING.c, WORDING.s]
}); });
_mutationObserverConnected = true; _mutationObserverConnected = true;
@@ -1452,8 +1482,8 @@
_resizeDragStartPosition = compatibility.page(event); _resizeDragStartPosition = compatibility.page(event);
_resizeDragStartSize.w = _hostElement[0].offsetWidth - (!_isBorderBox ? _paddingX : 0); _resizeDragStartSize.w = _hostElement[0][WORDING.oW] - (!_isBorderBox ? _paddingX : 0);
_resizeDragStartSize.h = _hostElement[0].offsetHeight - (!_isBorderBox ? _paddingY : 0); _resizeDragStartSize.h = _hostElement[0][WORDING.oH] - (!_isBorderBox ? _paddingY : 0);
_documentElement.on(_strSelectStartEvent, onSelectStart); _documentElement.on(_strSelectStartEvent, onSelectStart);
_documentElement.on(_strMouseTouchMoveEvent, scrollbarCornerOnResize); _documentElement.on(_strMouseTouchMoveEvent, scrollbarCornerOnResize);
@@ -1530,8 +1560,8 @@
_targetElement.css(css); _targetElement.css(css);
//measure width //measure width
var origWidth = measureElement.offsetWidth; var origWidth = measureElement[WORDING.oW];
var width = doMeasure ? Math.max(origWidth, measureElement.scrollWidth - 1) : 1; var width = doMeasure ? Math.max(origWidth, measureElement[WORDING.sW] - 1) : 1;
width += (_widthAutoCache ? _marginX + (!_isBorderBox ? wrapAttrOff ? 0 : _paddingX + _borderX : 0) : 0); width += (_widthAutoCache ? _marginX + (!_isBorderBox ? wrapAttrOff ? 0 : _paddingX + _borderX : 0) : 0);
//set measured width and height auto //set measured width and height auto
@@ -1540,8 +1570,8 @@
_targetElement.css(css); _targetElement.css(css);
//measure height //measure height
var origHeight = measureElement.offsetHeight; var origHeight = measureElement[WORDING.oH];
var height = Math.max(origHeight, measureElement.scrollHeight - 1); var height = Math.max(origHeight, measureElement[WORDING.sH] - 1);
//append correct size values //append correct size values
css[_strWidth] = width; css[_strWidth] = width;
@@ -1778,6 +1808,7 @@
//get and apply intended handle length //get and apply intended handle length
var handleRatio = Math.min(1, (_hostSizeCache[scrollbarVars._wh] - (_paddingAbsoluteCache ? (isHorizontal ? _paddingX : _paddingY) : 0)) / _contentScrollSizeCache[scrollbarVars._wh]); var handleRatio = Math.min(1, (_hostSizeCache[scrollbarVars._wh] - (_paddingAbsoluteCache ? (isHorizontal ? _paddingX : _paddingY) : 0)) / _contentScrollSizeCache[scrollbarVars._wh]);
handleRatio = isNaN(handleRatio) ? 0 : handleRatio;
handleCSS[scrollbarVars.wh] = (Math.floor(handleRatio * 100 * 100000) / 100000) + "%"; //the last * 100000 / 100000 is for flooring to the 4th digit handleCSS[scrollbarVars.wh] = (Math.floor(handleRatio * 100 * 100000) / 100000) + "%"; //the last * 100000 / 100000 is for flooring to the 4th digit
if (!nativeOverlayScrollbarsAreActive()) if (!nativeOverlayScrollbarsAreActive())
@@ -2212,8 +2243,8 @@
*/ */
function isHTMLElement(o) { function isHTMLElement(o) {
return ( return (
typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2 typeof HTMLElement === TYPES.o ? o instanceof HTMLElement : //DOM2
o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName === "string" o && typeof o === TYPES.o && o !== null && o.nodeType === 1 && typeof o.nodeName === TYPES.s
); );
} }
@@ -2232,17 +2263,16 @@
function getValidatedOption(currentOptions, optionName, optionAllowedValues, removeFromObject) { function getValidatedOption(currentOptions, optionName, optionAllowedValues, removeFromObject) {
var returnObj = {n: optionName, s: false, v: undefined, p: undefined}; //name = [name], succes = false, value = undefined, prepared = undefined, var returnObj = {n: optionName, s: false, v: undefined, p: undefined}; //name = [name], succes = false, value = undefined, prepared = undefined,
var optionValue; var optionValue;
var optionValueType = 'undefined'; var optionValueType = TYPES.u;
var optionNameProgression = byPropertyPath.has(currentOptions, optionName); var optionNameProgression = byPropertyPath.has(currentOptions, optionName);
var currObj = byPropertyPath.get(currentOptions, optionName); var currObj = byPropertyPath.get(currentOptions, optionName);
var canBeUndefined = false; var canBeUndefined = false;
var optionIsInvalid = optionNameProgression !== true; var optionIsInvalid = optionNameProgression !== true;
var strString = _strString;
var strStar = '*'; var strStar = '*';
var i, v, g; var i, v, g;
var optionAllowedValuesLength; var optionAllowedValuesLength;
var anyStringAllowed = false; var anyStringAllowed = false;
if (helper.type(optionAllowedValues) !== 'array') if (helper.type(optionAllowedValues) !== TYPES.a)
optionAllowedValues = [optionAllowedValues]; optionAllowedValues = [optionAllowedValues];
optionAllowedValuesLength = optionAllowedValues.length; optionAllowedValuesLength = optionAllowedValues.length;
@@ -2253,7 +2283,7 @@
var count = 0; var count = 0;
for (g = 0; g < optionAllowedValuesLength; g++) { for (g = 0; g < optionAllowedValuesLength; g++) {
var check = optionAllowedValues[g]; var check = optionAllowedValues[g];
if (helper.type(check) === strString) { if (helper.type(check) === TYPES.s) {
count++; count++;
if (count > 1) if (count > 1)
break; break;
@@ -2279,7 +2309,7 @@
var valueType = helper.type(allowedValue); var valueType = helper.type(allowedValue);
var correct = false; var correct = false;
if (valueType === optionValueType) { if (valueType === optionValueType) {
if (valueType === strString) { if (valueType === TYPES.s) {
correct = anyStringAllowed ? true : optionValue === allowedValue; correct = anyStringAllowed ? true : optionValue === allowedValue;
} }
else { else {
@@ -2296,7 +2326,7 @@
}; };
for (i = 0; i < optionAllowedValuesLength; i++) { for (i = 0; i < optionAllowedValuesLength; i++) {
var currPossibleValue = optionAllowedValues[i]; var currPossibleValue = optionAllowedValues[i];
if (helper.type(currPossibleValue) === strString) { if (helper.type(currPossibleValue) === TYPES.s) {
var currPossibleValueSplit = currPossibleValue.split(':'); var currPossibleValueSplit = currPossibleValue.split(':');
var key = currPossibleValueSplit[0]; var key = currPossibleValueSplit[0];
var breakAll = false; var breakAll = false;
@@ -2327,7 +2357,7 @@
for (i = 0; i < optionAllowedValuesLength; i++) { for (i = 0; i < optionAllowedValuesLength; i++) {
var value = optionAllowedValues[i]; var value = optionAllowedValues[i];
var valueType = helper.type(value); var valueType = helper.type(value);
if (valueType === strString) { if (valueType === TYPES.s) {
hasAllowedStrings = !anyStringAllowed; hasAllowedStrings = !anyStringAllowed;
var stringSplit = value.split(':'); var stringSplit = value.split(':');
for (v = 0; v < stringSplit.length; v++) { for (v = 0; v < stringSplit.length; v++) {
@@ -2502,18 +2532,20 @@
} }
/** /**
* Returns true if the given mutation is not from a from the plguin generated element. If the target element is a textarea the mutation is always unknown. * Returns true if the given mutation is not from a from the plugin generated element. If the target element is a textarea the mutation is always unknown.
* @param mutation The mutation which shall be checked. * @param mutation The mutation which shall be checked.
* @returns {boolean} True if the mutation is from a unknown element, false otherwise. * @returns {boolean} True if the mutation is from a unknown element, false otherwise.
*/ */
function isUnknownMutation(mutation) { function isUnknownMutation(mutation) {
var attributeName = mutation.attributeName; var attributeName = mutation.attributeName;
var mutationTarget = mutation.target; var mutationTarget = mutation.target;
var mutationType = mutation.type;
if (mutationTarget === _contentElement[0]) if (mutationTarget === _contentElement[0])
return false; return attributeName === null;
if (mutation.type === "attributes" && (attributeName === "class" || attributeName === "style") && !_isTextarea) { if (mutationType === 'attributes' && (attributeName === WORDING.c || attributeName === WORDING.s) && !_isTextarea) {
//only do it of browser support it natively //only do it of browser support it natively
if (typeof mutationTarget.closest !== 'function') if (typeof mutationTarget.closest !== TYPES.f)
return true; return true;
if (mutationTarget.closest(_strDot + _classNameResizeObserverElement) !== null || if (mutationTarget.closest(_strDot + _classNameResizeObserverElement) !== null ||
mutationTarget.closest(_strDot + _classNameScrollbar) !== null || mutationTarget.closest(_strDot + _classNameScrollbar) !== null ||
@@ -2545,39 +2577,40 @@
var numberAllowedValues = 0; var numberAllowedValues = 0;
var callbackAllowedValues = [new Function(), null]; var callbackAllowedValues = [new Function(), null];
var validatedOptions = []; var validatedOptions = [
validatedOptions.push(getValidatedOption(newOptions, strNativeScrollbarsOverlaidDot + 'showNativeScrollbars', booleanAllowedValues)); getValidatedOption(newOptions, strNativeScrollbarsOverlaidDot + 'showNativeScrollbars', booleanAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strNativeScrollbarsOverlaidDot + 'initialize', booleanAllowedValues)); getValidatedOption(newOptions, strNativeScrollbarsOverlaidDot + 'initialize', booleanAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strOverflowBehaviorDot + _strX, overflowBehaviorAllowedValues)); getValidatedOption(newOptions, strOverflowBehaviorDot + _strX, overflowBehaviorAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strOverflowBehaviorDot + _strY, overflowBehaviorAllowedValues)); getValidatedOption(newOptions, strOverflowBehaviorDot + _strY, overflowBehaviorAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strScrollbarsDot + 'visibility', scrollbarsVisibilityAllowedValues)); getValidatedOption(newOptions, strScrollbarsDot + 'visibility', scrollbarsVisibilityAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strScrollbarsDot + 'autoHide', scrollbarsAutoHideAllowedValues)); getValidatedOption(newOptions, strScrollbarsDot + 'autoHide', scrollbarsAutoHideAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strScrollbarsDot + 'autoHideDelay', numberAllowedValues)); getValidatedOption(newOptions, strScrollbarsDot + 'autoHideDelay', numberAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strScrollbarsDot + 'clickScrolling', booleanAllowedValues)); getValidatedOption(newOptions, strScrollbarsDot + 'clickScrolling', booleanAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strScrollbarsDot + 'dragScrolling', booleanAllowedValues)); getValidatedOption(newOptions, strScrollbarsDot + 'dragScrolling', booleanAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strScrollbarsDot + 'touchSupport', booleanAllowedValues)); getValidatedOption(newOptions, strScrollbarsDot + 'touchSupport', booleanAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strTextareaDot + 'dynWidth', booleanAllowedValues)); getValidatedOption(newOptions, strTextareaDot + 'dynWidth', booleanAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strTextareaDot + 'dynHeight', booleanAllowedValues)); getValidatedOption(newOptions, strTextareaDot + 'dynHeight', booleanAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, 'className', classNameAllowedValues)); getValidatedOption(newOptions, 'className', classNameAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, 'resize', resizeAllowedValues)); getValidatedOption(newOptions, 'resize', resizeAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, 'sizeAutoCapable', booleanAllowedValues)); getValidatedOption(newOptions, 'sizeAutoCapable', booleanAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, 'paddingAbsolute', booleanAllowedValues)); getValidatedOption(newOptions, 'paddingAbsolute', booleanAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, 'clipAlways', booleanAllowedValues)); getValidatedOption(newOptions, 'clipAlways', booleanAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, 'normalizeRTL', booleanAllowedValues)); getValidatedOption(newOptions, 'normalizeRTL', booleanAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, 'autoUpdate', booleanNullAllowedValues)); getValidatedOption(newOptions, 'autoUpdate', booleanNullAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, 'autoUpdateInterval', numberAllowedValues)); getValidatedOption(newOptions, 'autoUpdateInterval', numberAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strCallbacksDot + 'onInitialized', callbackAllowedValues)); getValidatedOption(newOptions, strCallbacksDot + 'onInitialized', callbackAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strCallbacksDot + 'onInitializationWithdrawn', callbackAllowedValues)); getValidatedOption(newOptions, strCallbacksDot + 'onInitializationWithdrawn', callbackAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strCallbacksDot + 'onDestroyed', callbackAllowedValues)); getValidatedOption(newOptions, strCallbacksDot + 'onDestroyed', callbackAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strCallbacksDot + 'onScrollStart', callbackAllowedValues)); getValidatedOption(newOptions, strCallbacksDot + 'onScrollStart', callbackAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strCallbacksDot + 'onScroll', callbackAllowedValues)); getValidatedOption(newOptions, strCallbacksDot + 'onScroll', callbackAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strCallbacksDot + 'onScrollStop', callbackAllowedValues)); getValidatedOption(newOptions, strCallbacksDot + 'onScrollStop', callbackAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strCallbacksDot + 'onDirectionChanged', callbackAllowedValues)); getValidatedOption(newOptions, strCallbacksDot + 'onDirectionChanged', callbackAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strCallbacksDot + 'onContentSizeChanged', callbackAllowedValues)); getValidatedOption(newOptions, strCallbacksDot + 'onContentSizeChanged', callbackAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strCallbacksDot + 'onHostSizeChanged', callbackAllowedValues)); getValidatedOption(newOptions, strCallbacksDot + 'onHostSizeChanged', callbackAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strCallbacksDot + 'onOverflowChanged', callbackAllowedValues)); getValidatedOption(newOptions, strCallbacksDot + 'onOverflowChanged', callbackAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strCallbacksDot + 'onOverflowAmountChanged', callbackAllowedValues)); getValidatedOption(newOptions, strCallbacksDot + 'onOverflowAmountChanged', callbackAllowedValues),
validatedOptions.push(getValidatedOption(newOptions, strCallbacksDot + 'onUpdated', callbackAllowedValues)); getValidatedOption(newOptions, strCallbacksDot + 'onUpdated', callbackAllowedValues)
];
for (var prop in newOptions) { for (var prop in newOptions) {
if (newOptions.hasOwnProperty(prop)) { if (newOptions.hasOwnProperty(prop)) {
@@ -2592,7 +2625,7 @@
helper.each(obj, function (i, v) { helper.each(obj, function (i, v) {
if (helper.isPlainObject(v)) if (helper.isPlainObject(v))
prepare(v); prepare(v);
else if (helper.type(v) === 'function') else if (helper.type(v) === TYPES.f)
obj[i] = helper.type(v); obj[i] = helper.type(v);
}); });
}; };
@@ -2623,8 +2656,8 @@
_contentElement.css(css); _contentElement.css(css);
} }
var contentElementScrollSize = { var contentElementScrollSize = {
w: getContentMeasureElement().scrollWidth + textareaValueLength, w: getContentMeasureElement()[WORDING.sW] + textareaValueLength,
h: getContentMeasureElement().scrollHeight + textareaValueLength h: getContentMeasureElement()[WORDING.sH] + textareaValueLength
}; };
if (setCSS) { if (setCSS) {
css[_strFloat] = float; css[_strFloat] = float;
@@ -2646,11 +2679,11 @@
if (_isSleeping || _mutationObserverConnected) if (_isSleeping || _mutationObserverConnected)
return false; return false;
var hostElementId = _hostElement.attr('id') || _strEmpty; var hostElementId = _hostElement.attr(WORDING.i) || _strEmpty;
var hostElementIdChanged = checkCacheSingle(hostElementId, _updateAutoHostElementIdCache); var hostElementIdChanged = checkCacheSingle(hostElementId, _updateAutoHostElementIdCache);
var hostElementClass = _hostElement.attr('class') || _strEmpty; var hostElementClass = _hostElement.attr(WORDING.c) || _strEmpty;
var hostElementClassChanged = checkCacheSingle(hostElementClass, _updateAutoHostElementClassCache); var hostElementClassChanged = checkCacheSingle(hostElementClass, _updateAutoHostElementClassCache);
var hostElementStyle = _hostElement.attr('style') || _strEmpty; var hostElementStyle = _hostElement.attr(WORDING.s) || _strEmpty;
var hostElementStyleChanged = checkCacheSingle(hostElementStyle, _updateAutoHostElementStyleCache); var hostElementStyleChanged = checkCacheSingle(hostElementStyle, _updateAutoHostElementStyleCache);
var hostElementVisible = _hostElement.is(':visible') || _strEmpty; var hostElementVisible = _hostElement.is(':visible') || _strEmpty;
var hostElementVisibleChanged = checkCacheSingle(hostElementVisible, _updateAutoHostElementVisibleCache); var hostElementVisibleChanged = checkCacheSingle(hostElementVisible, _updateAutoHostElementVisibleCache);
@@ -2983,8 +3016,8 @@
var oldSize = {w: -1, h: -1}; var oldSize = {w: -1, h: -1};
addResizeObserver(_sizeAutoObserverElement, function () { addResizeObserver(_sizeAutoObserverElement, function () {
var newSize = { var newSize = {
w: _sizeAutoObserverElement[0].offsetWidth, w: _sizeAutoObserverElement[0][WORDING.oW],
h: _sizeAutoObserverElement[0].offsetHeight h: _sizeAutoObserverElement[0][WORDING.oH]
}; };
if (checkCacheDouble(newSize, oldSize)) { if (checkCacheDouble(newSize, oldSize)) {
if (_initialized && (_heightAutoCache && newSize.h > 0) || (_widthAutoCache && newSize.w > 0)) { if (_initialized && (_heightAutoCache && newSize.h > 0) || (_widthAutoCache && newSize.w > 0)) {
@@ -3046,21 +3079,23 @@
_isBorderBox = (boxSizing === 'border-box'); _isBorderBox = (boxSizing === 'border-box');
var isRTLLeft = _isRTL ? _strLeft : _strRight; var isRTLLeft = _isRTL ? _strLeft : _strRight;
var isRTLRight = _isRTL ? _strRight : _strLeft; var isRTLRight = _isRTL ? _strRight : _strLeft;
var hostElement = _hostElement[0];
var paddingElement = _paddingElement[0];
//detect width auto: //detect width auto:
var widthAutoResizeDetection = false; var widthAutoResizeDetection = false;
var widthAutoObserverDetection = (_sizeAutoObserverAdded && (_hostElement.css(_strFloat) !== 'none' /*|| _isTextarea */)) ? (Math.round(sizeAutoObserverElementBCRect.right - sizeAutoObserverElementBCRect.left) === 0) && (!paddingAbsolute ? (_hostElement[0].clientWidth - _paddingX) > 0 : true) : false; var widthAutoObserverDetection = (_sizeAutoObserverAdded && (_hostElement.css(_strFloat) !== 'none' /*|| _isTextarea */)) ? (Math.round(sizeAutoObserverElementBCRect.right - sizeAutoObserverElementBCRect.left) === 0) && (!paddingAbsolute ? (hostElement[WORDING.cW] - _paddingX) > 0 : true) : false;
if (sizeAutoCapable && !widthAutoObserverDetection) { if (sizeAutoCapable && !widthAutoObserverDetection) {
var tmpCurrHostWidth = _hostElement[0].offsetWidth; var tmpCurrHostWidth = hostElement[WORDING.oW];
var tmpCurrContentGlueWidth = _contentGlueElement.css(_strWidth); var tmpCurrContentGlueWidth = _contentGlueElement.css(_strWidth);
_contentGlueElement.css(_strWidth, _strAuto); _contentGlueElement.css(_strWidth, _strAuto);
var tmpNewHostWidth = _hostElement[0].offsetWidth; var tmpNewHostWidth = hostElement[WORDING.oW];
_contentGlueElement.css(_strWidth, tmpCurrContentGlueWidth); _contentGlueElement.css(_strWidth, tmpCurrContentGlueWidth);
widthAutoResizeDetection = tmpCurrHostWidth !== tmpNewHostWidth; widthAutoResizeDetection = tmpCurrHostWidth !== tmpNewHostWidth;
if (!widthAutoResizeDetection) { if (!widthAutoResizeDetection) {
_contentGlueElement.css(_strWidth, tmpCurrHostWidth + 1); _contentGlueElement.css(_strWidth, tmpCurrHostWidth + 1);
tmpNewHostWidth = _hostElement[0].offsetWidth; tmpNewHostWidth = hostElement[WORDING.oW];
_contentGlueElement.css(_strWidth, tmpCurrContentGlueWidth); _contentGlueElement.css(_strWidth, tmpCurrContentGlueWidth);
widthAutoResizeDetection = tmpCurrHostWidth !== tmpNewHostWidth; widthAutoResizeDetection = tmpCurrHostWidth !== tmpNewHostWidth;
} }
@@ -3103,8 +3138,8 @@
}; };
//vars to apply correct css //vars to apply correct css
var contentElementCSS = {}; var contentElementCSS = { };
var contentGlueElementCSS = {}; var contentGlueElementCSS = { };
//set info for padding //set info for padding
_paddingX = padding.l + padding.r; _paddingX = padding.l + padding.r;
@@ -3167,8 +3202,8 @@
//viewport size is padding container because it never has padding, margin and a border. //viewport size is padding container because it never has padding, margin and a border.
_viewportSize = { _viewportSize = {
w: _paddingElement[0].offsetWidth, w: paddingElement[WORDING.oW],
h: _paddingElement[0].offsetHeight h: paddingElement[WORDING.oH]
}; };
//update Textarea //update Textarea
@@ -3212,7 +3247,7 @@
contentElementCSS[_strMaxMinus + _strHeight] = _strEmpty; contentElementCSS[_strMaxMinus + _strHeight] = _strEmpty;
//fix dyn height collapse bug: (doesn't works for width!) //fix dyn height collapse bug: (doesn't works for width!)
//contentGlueElementCSS[_strHeight] = _isTextarea && textareaDynHeight ? textareaSize.dh : _strAuto; //contentGlueElementCSS[_strHeight] = _isTextarea && textareaDynHeight ? textareaSize.dh : _strAuto;
contentGlueElementCSS[_strHeight] = _isTextarea ? textareaDynHeight ? textareaSize.dh : _strAuto : _contentElement[0].clientHeight; contentGlueElementCSS[_strHeight] = _isTextarea ? textareaDynHeight ? textareaSize.dh : _strAuto : _contentElement[0][WORDING.cH];
} }
if (sizeAutoCapable) if (sizeAutoCapable)
_contentGlueElement.css(contentGlueElementCSS); _contentGlueElement.css(contentGlueElementCSS);
@@ -3231,6 +3266,7 @@
var strOverflowY = strOverflow + '-y'; var strOverflowY = strOverflow + '-y';
var strHidden = 'hidden'; var strHidden = 'hidden';
var strVisible = 'visible'; var strVisible = 'visible';
var hideOverflow4CorrectMeasuring = _restrictedMeasuring ? (_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y) || (_viewportSize.w < _nativeScrollbarMinSize.y || _viewportSize.h < _nativeScrollbarMinSize.x) : false;
//Reset the viewport (very important for natively overlaid scrollbars and zoom change //Reset the viewport (very important for natively overlaid scrollbars and zoom change
var viewportElementResetCSS = {}; var viewportElementResetCSS = {};
@@ -3239,21 +3275,20 @@
setTopRightBottomLeft(viewportElementResetCSS, _strEmpty); setTopRightBottomLeft(viewportElementResetCSS, _strEmpty);
_viewportElement.css(viewportElementResetCSS); _viewportElement.css(viewportElementResetCSS);
//content element has to have overflow hidden, else element marginsss aren't calculated properly if(hideOverflow4CorrectMeasuring)
if (heightAuto && !_isTextarea) {
_contentElement.css(strOverflow, strHidden); _contentElement.css(strOverflow, strHidden);
contentElementCSS[strOverflow] = _strEmpty
}
//measure several sizes: //measure several sizes:
var contentMeasureElement = getContentMeasureElement(); var contentMeasureElement = getContentMeasureElement();
//in Firefox content element has to have overflow hidden, else element margins aren't calculated properly, this element prevents this bug, but only if scrollbars aren't overlaid
var contentMeasureElementGuaranty = _restrictedMeasuring && !hideOverflow4CorrectMeasuring ? _viewportElement[0] : contentMeasureElement;
var clientSize = { var clientSize = {
w: contentMeasureElement.clientWidth, w: contentMeasureElement[WORDING.cW],
h: contentMeasureElement.clientHeight h: contentMeasureElement[WORDING.cH]
}; };
var scrollSize = { var scrollSize = {
w: contentMeasureElement.scrollWidth, w: Math.max(contentMeasureElement[WORDING.sW], contentMeasureElementGuaranty[WORDING.sW]),
h: contentMeasureElement.scrollHeight h: Math.max(contentMeasureElement[WORDING.sH], contentMeasureElementGuaranty[WORDING.sH])
}; };
var contentClientSize = { var contentClientSize = {
w: _isTextarea && textareaSize && !textareaDynWidth ? textareaSize.ow : widthAuto ? clientSize.w : scrollSize.w, w: _isTextarea && textareaSize && !textareaDynWidth ? textareaSize.ow : widthAuto ? clientSize.w : scrollSize.w,
@@ -3267,10 +3302,9 @@
//measure and correct several sizes //measure and correct several sizes
//has to be clientSize because offsetSize respect borders. //has to be clientSize because offsetSize respect borders.
var hostElement = _hostElement[0];
var hostSize = { var hostSize = {
w: hostElement.clientWidth, w: hostElement[WORDING.cW],
h: hostElement.clientHeight h: hostElement[WORDING.cH]
}; };
var contentGlueSize = { var contentGlueSize = {
w: Math.max(contentClientSize.w + (paddingAbsolute ? _paddingX : 0), hostSize.w - _paddingX) - (textareaDynWidth ? (_isTextarea && widthAuto ? _marginX + (!_isBorderBox ? _paddingX + _borderX : 0) : 0) : 0), w: Math.max(contentClientSize.w + (paddingAbsolute ? _paddingX : 0), hostSize.w - _paddingX) - (textareaDynWidth ? (_isTextarea && widthAuto ? _marginX + (!_isBorderBox ? _paddingX + _borderX : 0) : 0) : 0),
@@ -3297,13 +3331,13 @@
if (!heightAuto || (!heightAuto && border.c)) if (!heightAuto || (!heightAuto && border.c))
contentGlueElementCSS[_strHeight] = hostSize.h - (_isBorderBox ? 0 : _paddingY + _borderY) - 1 - _marginY; contentGlueElementCSS[_strHeight] = hostSize.h - (_isBorderBox ? 0 : _paddingY + _borderY) - 1 - _marginY;
//if size is auto and host ist same size as max size, make content glue size +1 to make sure size changes will be detected //if size is auto and host is same size as max size, make content glue size +1 to make sure size changes will be detected
if (cssMaxValue.cw && cssMaxValue.iw === maxWidth) if (cssMaxValue.cw && cssMaxValue.iw === maxWidth)
contentGlueElementCSS[_strWidth] = maxWidth + (_isBorderBox ? 0 : _paddingX) + 1; contentGlueElementCSS[_strWidth] = maxWidth + (_isBorderBox ? 0 : _paddingX) + 1;
if (cssMaxValue.ch && cssMaxValue.ih === maxHeight) if (cssMaxValue.ch && cssMaxValue.ih === maxHeight)
contentGlueElementCSS[_strHeight] = maxHeight + (_isBorderBox ? 0 : _paddingY) + 1; contentGlueElementCSS[_strHeight] = maxHeight + (_isBorderBox ? 0 : _paddingY) + 1;
//if size is auto and host ist smaller than size as min size, make content glue size -1 to make sure size changes will be detected (this is only needed if padding is 0) //if size is auto and host is smaller than size as min size, make content glue size -1 to make sure size changes will be detected (this is only needed if padding is 0)
if (widthAuto && (clientSize.w < _viewportSize.w || _isTextarea && !textareaAutoWrapping) && _paddingX === 0) { if (widthAuto && (clientSize.w < _viewportSize.w || _isTextarea && !textareaAutoWrapping) && _paddingX === 0) {
if (_isTextarea) if (_isTextarea)
textareaCoverCSS[_strWidth] = parseIntToZeroOrNumber(_textareaCoverElement.css(_strWidth)) - 1; textareaCoverCSS[_strWidth] = parseIntToZeroOrNumber(_textareaCoverElement.css(_strWidth)) - 1;
@@ -3338,9 +3372,11 @@
//measure again, but this time all correct sizes: //measure again, but this time all correct sizes:
var contentBCRect = contentMeasureElement.getBoundingClientRect(); var contentBCRect = contentMeasureElement.getBoundingClientRect();
var contentScrollSize = { var contentScrollSize = {
w: contentMeasureElement.scrollWidth, w: Math.max(contentMeasureElement[WORDING.sW], contentMeasureElementGuaranty[WORDING.sW]),
h: contentMeasureElement.scrollHeight h: Math.max(contentMeasureElement[WORDING.sH], contentMeasureElementGuaranty[WORDING.sH])
}; };
if(hideOverflow4CorrectMeasuring)
_contentElement.css(strOverflow, _strEmpty);
if (contentBCRect.width !== undefined) { if (contentBCRect.width !== undefined) {
var contentBCRectW = contentBCRect.width; var contentBCRectW = contentBCRect.width;
var contentBCRectH = contentBCRect.height; var contentBCRectH = contentBCRect.height;
@@ -3353,12 +3389,18 @@
//has to be clientSize because offsetSize respect borders. //has to be clientSize because offsetSize respect borders.
hostSize = { hostSize = {
w: hostElement.clientWidth, w: hostElement[WORDING.cW],
h: hostElement.clientHeight h: hostElement[WORDING.cH]
}; };
hostSizeChanged = checkCacheDouble(hostSize, _hostSizeCache); hostSizeChanged = checkCacheDouble(hostSize, _hostSizeCache);
_hostSizeCache = hostSize; _hostSizeCache = hostSize;
//viewport size is padding container because it never has padding, margin and a border.
_viewportSize = {
w: paddingElement[WORDING.oW],
h: paddingElement[WORDING.oH]
};
var overflowBehaviorIsVS = { var overflowBehaviorIsVS = {
x: overflowBehavior.x === 'v-s', x: overflowBehavior.x === 'v-s',
y: overflowBehavior.y === 'v-s' y: overflowBehavior.y === 'v-s'
@@ -3371,10 +3413,12 @@
x: overflowBehavior.x === 's', x: overflowBehavior.x === 's',
y: overflowBehavior.y === 's' y: overflowBehavior.y === 's'
}; };
//var overflowBehaviorIsH = { /*
// x : overflowBehavior.x === 'h', * var overflowBehaviorIsH = {
// y : overflowBehavior.y === 'h' * x : overflowBehavior.x === 'h',
//}; * y : overflowBehavior.y === 'h'
* };
*/
var overflowAmount = { var overflowAmount = {
x: Math.max(0, contentScrollSize.w - hostSize.w + (paddingAbsolute ? _paddingX : 0)), x: Math.max(0, contentScrollSize.w - hostSize.w + (paddingAbsolute ? _paddingX : 0)),
y: Math.max(0, contentScrollSize.h - hostSize.h + (paddingAbsolute ? _paddingY : 0)) y: Math.max(0, contentScrollSize.h - hostSize.h + (paddingAbsolute ? _paddingY : 0))
@@ -3512,11 +3556,13 @@
resetScrollbarHidingY(); resetScrollbarHidingY();
} }
// if the scroll container is too small and if there is any overflow with not overlay scrollbar, make viewport element greater in size (Firefox hide Scrollbars fix) // if the scroll container is too small and if there is any overflow with not overlay scrollbar, make viewport element greater in size (Firefox hide Scrollbars fix)
// because firefox starts hiding scrollbars on too small elements // because firefox starts hiding scrollbars on too small elements
// with this behavior the overflow calculation may be incorrect or the scrollbars would appear suddenly // with this behavior the overflow calculation may be incorrect or the scrollbars would appear suddenly
// https://bugzilla.mozilla.org/show_bug.cgi?id=292284 // https://bugzilla.mozilla.org/show_bug.cgi?id=292284
if ((_viewportSize.h < _nativeScrollbarMinSize.x || _viewportSize.w < _nativeScrollbarMinSize.y) && ((hasOverflow.x && hideOverflow.x && !_nativeScrollbarIsOverlaid.x) || (hasOverflow.y && hideOverflow.y && !_nativeScrollbarIsOverlaid.y))) { if ((_viewportSize.h < _nativeScrollbarMinSize.x || _viewportSize.w < _nativeScrollbarMinSize.y)
&& ((hasOverflow.x && hideOverflow.x && !_nativeScrollbarIsOverlaid.x) || (hasOverflow.y && hideOverflow.y && !_nativeScrollbarIsOverlaid.y))) {
viewportElementCSS[_strPaddingMinus + _strTop] = _nativeScrollbarMinSize.x; viewportElementCSS[_strPaddingMinus + _strTop] = _nativeScrollbarMinSize.x;
viewportElementCSS[_strMarginMinus + _strTop] = -_nativeScrollbarMinSize.x; viewportElementCSS[_strMarginMinus + _strTop] = -_nativeScrollbarMinSize.x;
@@ -3563,14 +3609,14 @@
var elementStyle = element.style; var elementStyle = element.style;
elementStyle.webkitTransform = 'scale(1)'; elementStyle.webkitTransform = 'scale(1)';
elementStyle.display = 'run-in'; elementStyle.display = 'run-in';
var dump = element.offsetHeight; var dump = element[WORDING.oH];
elementStyle.display = _strEmpty; elementStyle.display = _strEmpty;
elementStyle.webkitTransform = _strEmpty; elementStyle.webkitTransform = _strEmpty;
} }
//force hard redraw in webkit if native overlaid scrollbars shall appear //force hard redraw in webkit if native overlaid scrollbars shall appear
if (ignoreOverlayScrollbarHidingChanged && ignoreOverlayScrollbarHiding) { if (ignoreOverlayScrollbarHidingChanged && ignoreOverlayScrollbarHiding) {
_hostElement.hide(); _hostElement.hide();
var dump = _hostElement[0].offsetHeight; var dump = hostElement[WORDING.oH];
_hostElement.show(); _hostElement.show();
} }
} }
@@ -3598,10 +3644,11 @@
var scrollbarsVisibilityVisible = scrollbarsVisibility === 'v'; var scrollbarsVisibilityVisible = scrollbarsVisibility === 'v';
var scrollbarsVisibilityHidden = scrollbarsVisibility === 'h'; var scrollbarsVisibilityHidden = scrollbarsVisibility === 'h';
var scrollbarsVisibilityAuto = scrollbarsVisibility === 'a'; var scrollbarsVisibilityAuto = scrollbarsVisibility === 'a';
var showScrollbarH = refreshScrollbarAppearance.bind(0, true, true, canScroll.x);
var showScrollbarV = refreshScrollbarAppearance.bind(0, false, true, canScroll.y); var showScrollbarH = COMPATIBILITY.bind(refreshScrollbarAppearance, 0, true, true, canScroll.x);
var hideScrollbarH = refreshScrollbarAppearance.bind(0, true, false, canScroll.x); var showScrollbarV = COMPATIBILITY.bind(refreshScrollbarAppearance, 0, false, true, canScroll.y);
var hideScrollbarV = refreshScrollbarAppearance.bind(0, false, false, canScroll.y); var hideScrollbarH = COMPATIBILITY.bind(refreshScrollbarAppearance, 0, true, false, canScroll.x);
var hideScrollbarV = COMPATIBILITY.bind(refreshScrollbarAppearance, 0, false, false, canScroll.y);
//add or remove rtl class name for styling purposes //add or remove rtl class name for styling purposes
if (cssDirectionChanged) { if (cssDirectionChanged) {
@@ -3881,7 +3928,7 @@
_base.options = function (newOptions, value) { _base.options = function (newOptions, value) {
//return current options if newOptions are undefined or empty //return current options if newOptions are undefined or empty
if (helper.isEmptyObject(newOptions) || !helper.isPlainObject(newOptions)) { if (helper.isEmptyObject(newOptions) || !helper.isPlainObject(newOptions)) {
if (helper.type(newOptions) === 'string') { if (helper.type(newOptions) === TYPES.s) {
if (arguments.length >= 2) { if (arguments.length >= 2) {
var option = {}; var option = {};
byPropertyPath.set(option, newOptions, value, true); byPropertyPath.set(option, newOptions, value, true);
@@ -3959,7 +4006,7 @@
_targetElement.removeClass(_classNameTextareaElement) _targetElement.removeClass(_classNameTextareaElement)
.removeClass(_classNameTextInherit); .removeClass(_classNameTextInherit);
_targetElement.unwrap() _targetElement.unwrap()
.removeAttr('style'); .removeAttr(WORDING.s);
_hostElement.remove(); _hostElement.remove();
} }
else { else {
@@ -4098,7 +4145,7 @@
var coordinatesOperators = ['+=', '-=', '*=', '/=']; var coordinatesOperators = ['+=', '-=', '*=', '/='];
var i; var i;
var finalScroll = { }; var finalScroll = { };
var durationIsObject = helper.type(duration) === 'object'; var durationIsObject = helper.type(duration) === TYPES.o;
var strEnd = 'end'; var strEnd = 'end';
var strBegin = 'begin'; var strBegin = 'begin';
var elementObjSettings = { var elementObjSettings = {
@@ -4121,15 +4168,15 @@
}; };
var getRawScroll = function (coordinates) { var getRawScroll = function (coordinates) {
var rawScroll = {}; var rawScroll = {};
if (helper.type(coordinates) === 'array' && coordinates.length > 0) { if (helper.type(coordinates) === TYPES.a && coordinates.length > 0) {
rawScroll.x = coordinates[0]; rawScroll.x = coordinates[0];
rawScroll.y = coordinates[1]; rawScroll.y = coordinates[1];
} }
else if (helper.type(coordinates) === _strString || helper.type(coordinates) === _strNumber) { else if (helper.type(coordinates) === TYPES.s || helper.type(coordinates) === TYPES.n) {
rawScroll.x = coordinates; rawScroll.x = coordinates;
rawScroll.y = coordinates; rawScroll.y = coordinates;
} }
else if (helper.type(coordinates) === 'object') { else if (helper.type(coordinates) === TYPES.o) {
coordinates = helper.extend({}, coordinates); coordinates = helper.extend({}, coordinates);
i = 0; i = 0;
for (var key in coordinates) { for (var key in coordinates) {
@@ -4163,7 +4210,7 @@
var isRTLisX = _isRTL && isX; var isRTLisX = _isRTL && isX;
var normalizeShortcuts = isRTLisX && _rtlScrollBehavior.n && !_normalizeRTLCache; var normalizeShortcuts = isRTLisX && _rtlScrollBehavior.n && !_normalizeRTLCache;
if (helper.type(rawScroll) === _strString) { if (helper.type(rawScroll) === TYPES.s) {
//check operator //check operator
if (rawScroll.length > 2) { if (rawScroll.length > 2) {
var possibleOperator = rawScroll.substr(0, 2); var possibleOperator = rawScroll.substr(0, 2);
@@ -4187,11 +4234,11 @@
rawScroll = rawScroll.replace(/vh/g, mult + _viewportSize.h); rawScroll = rawScroll.replace(/vh/g, mult + _viewportSize.h);
amount = window.parseInt(window.parseFloat(window.eval(rawScroll)).toFixed()); amount = window.parseInt(window.parseFloat(window.eval(rawScroll)).toFixed());
} }
else if (helper.type(rawScroll) === _strNumber) { else if (helper.type(rawScroll) === TYPES.n) {
amount = rawScroll; amount = rawScroll;
} }
if (!isNaN(amount) && amount !== undefined && helper.type(amount) === _strNumber) { if (!isNaN(amount) && amount !== undefined && helper.type(amount) === TYPES.n) {
var normalizeIsRTLisX = _normalizeRTLCache && isRTLisX; var normalizeIsRTLisX = _normalizeRTLCache && isRTLisX;
var operatorCurrScroll = currScroll * (normalizeIsRTLisX && _rtlScrollBehavior.n ? -1 : 1); var operatorCurrScroll = currScroll * (normalizeIsRTLisX && _rtlScrollBehavior.n ? -1 : 1);
var invert = normalizeIsRTLisX && _rtlScrollBehavior.i; var invert = normalizeIsRTLisX && _rtlScrollBehavior.i;
@@ -4250,9 +4297,9 @@
var marginLength; var marginLength;
//block can be [string, or array of two strings] //block can be [string, or array of two strings]
if (blockType === _strString) if (blockType === TYPES.s)
block = [block, block]; block = [block, block];
else if (blockType === 'array') { else if (blockType === TYPES.a) {
blockLength = block.length; blockLength = block.length;
if (blockLength > 2 || blockLength < 1) if (blockLength > 2 || blockLength < 1)
block = undefined; block = undefined;
@@ -4262,7 +4309,7 @@
block[1] = strBegin; block[1] = strBegin;
for (i = 0; i < blockLength; i++) { for (i = 0; i < blockLength; i++) {
var item = block[i]; var item = block[i];
if (helper.type(item) !== _strString || !checkSettingsStringValue(item, elementObjSettingsBlockValues)) { if (helper.type(item) !== TYPES.s || !checkSettingsStringValue(item, elementObjSettingsBlockValues)) {
valid = false; valid = false;
break; break;
} }
@@ -4275,7 +4322,7 @@
block = undefined; block = undefined;
//margin can be [ true, false, number, array of 2 numbers, array of 4 numbers ] //margin can be [ true, false, number, array of 2 numbers, array of 4 numbers ]
if (marginType === _strNumber) if (marginType === TYPES.n)
margin = [margin, margin, margin, margin]; margin = [margin, margin, margin, margin];
else if (marginType === 'boolean') { else if (marginType === 'boolean') {
if (margin) { if (margin) {
@@ -4289,14 +4336,14 @@
else else
margin = [0, 0, 0, 0]; margin = [0, 0, 0, 0];
} }
else if (marginType === 'array') { else if (marginType === TYPES.a) {
marginLength = margin.length; marginLength = margin.length;
if (marginLength !== 2 && marginLength !== 4) if (marginLength !== 2 && marginLength !== 4)
margin = undefined; margin = undefined;
else { else {
valid = true; valid = true;
for (i = 0; i < marginLength; i++) { for (i = 0; i < marginLength; i++) {
if (helper.type(margin[i]) !== _strNumber) { if (helper.type(margin[i]) !== TYPES.n) {
valid = false; valid = false;
break; break;
} }
@@ -4358,8 +4405,8 @@
} }
else { else {
rawElementSize = { rawElementSize = {
w: finalElement[0].offsetWidth, w: finalElement[0][WORDING.oW],
h: finalElement[0].offsetHeight h: finalElement[0][WORDING.oH]
}; };
} }
var elementSize = { var elementSize = {
@@ -4400,7 +4447,7 @@
duration : duration, duration : duration,
complete : complete complete : complete
}; };
if(helper.type(easing) === 'array') { if(helper.type(easing) === TYPES.a) {
var specialEasing = { }; var specialEasing = { };
specialEasing[_strScrollLeft] = easing[0]; specialEasing[_strScrollLeft] = easing[0];
specialEasing[_strScrollTop] = easing[1]; specialEasing[_strScrollTop] = easing[1];
@@ -4486,7 +4533,7 @@
viewportSize: prepare(_viewportSize), viewportSize: prepare(_viewportSize),
hostSize: prepare(_hostSizeCache) hostSize: prepare(_hostSizeCache)
}; };
if (helper.type(stateProperty) === _strString) if (helper.type(stateProperty) === TYPES.s)
return byPropertyPath.get(obj, stateProperty); return byPropertyPath.get(obj, stateProperty);
return obj; return obj;
}; };
@@ -4525,6 +4572,7 @@
_supportPassiveEvents = globals.supportPassiveEvents; _supportPassiveEvents = globals.supportPassiveEvents;
_supportResizeObserver = globals.supportResizeObserver; _supportResizeObserver = globals.supportResizeObserver;
_supportMutationObserver = globals.supportMutationObserver; _supportMutationObserver = globals.supportMutationObserver;
_restrictedMeasuring = globals.restrictedMeasuring;
_documentElement = helper(targetElement.ownerDocument); _documentElement = helper(targetElement.ownerDocument);
_windowElement = helper(_documentElement[0].defaultView || _documentElement[0].parentWindow); _windowElement = helper(_documentElement[0].defaultView || _documentElement[0].parentWindow);
_htmlElement = _documentElement.find('html').first(); _htmlElement = _documentElement.find('html').first();
@@ -4624,9 +4672,9 @@
var target = this.target; var target = this.target;
var attrName = t.attributeName; var attrName = t.attributeName;
if (attrName === 'class') if (attrName === WORDING.c)
doUpdate = hostClassNamesChanged(t.oldValue, target.className); doUpdate = hostClassNamesChanged(t.oldValue, target.className);
else if (attrName === 'style') else if (attrName === WORDING.s)
doUpdate = t.oldValue !== target.style.cssText; doUpdate = t.oldValue !== target.style.cssText;
else else
doUpdate = true; doUpdate = true;
js/jquery.overlayScrollbars.min.js
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
package.json
+2 -2
View File
@@ -1,6 +1,6 @@
{ {
"name": "overlayscrollbars", "name": "overlayscrollbars",
"version": "1.2.3", "version": "1.3.0",
"description": "A javascript scrollbar plugin which hides the native scrollbars and provides custom styleable overlay scrollbars, but keeps the native functionality and feeling.", "description": "A javascript scrollbar plugin which hides the native scrollbars and provides custom styleable overlay scrollbars, but keeps the native functionality and feeling.",
"keywords" : [ "keywords" : [
"overlayscrollbars", "overlayscrollbars",
@@ -28,7 +28,7 @@
"bugs": { "bugs": {
"url": "https://github.com/KingSora/OverlayScrollbars/issues" "url": "https://github.com/KingSora/OverlayScrollbars/issues"
}, },
"main": "js/OverlayScrollbars.min.js", "main": "js/OverlayScrollbars.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },