mirror of https://github.com/ColorlibHQ/AdminLTE
Fixed IE10 issue
Abdullah Almsaeed
parent
174be54e9b
commit
f84eb88bcf
|
|
@ -5,90 +5,68 @@
|
|||
* Version: 1.3.3
|
||||
*
|
||||
*/
|
||||
(function($) {
|
||||
(function ($) {
|
||||
|
||||
$.fn.extend({
|
||||
slimScroll: function(options) {
|
||||
slimScroll: function (options) {
|
||||
|
||||
var defaults = {
|
||||
|
||||
// width in pixels of the visible scroll area
|
||||
width : 'auto',
|
||||
|
||||
width: 'auto',
|
||||
// height in pixels of the visible scroll area
|
||||
height : '250px',
|
||||
|
||||
height: '250px',
|
||||
// width in pixels of the scrollbar and rail
|
||||
size : '7px',
|
||||
|
||||
size: '7px',
|
||||
// scrollbar color, accepts any hex/color value
|
||||
color: '#000',
|
||||
|
||||
// scrollbar position - left/right
|
||||
position : 'right',
|
||||
|
||||
position: 'right',
|
||||
// distance in pixels between the side edge and the scrollbar
|
||||
distance : '1px',
|
||||
|
||||
distance: '1px',
|
||||
// default scroll position on load - top / bottom / $('selector')
|
||||
start : 'top',
|
||||
|
||||
start: 'top',
|
||||
// sets scrollbar opacity
|
||||
opacity : .4,
|
||||
|
||||
opacity: .4,
|
||||
// enables always-on mode for the scrollbar
|
||||
alwaysVisible : false,
|
||||
|
||||
alwaysVisible: false,
|
||||
// check if we should hide the scrollbar when user is hovering over
|
||||
disableFadeOut : false,
|
||||
|
||||
disableFadeOut: false,
|
||||
// sets visibility of the rail
|
||||
railVisible : false,
|
||||
|
||||
railVisible: false,
|
||||
// sets rail color
|
||||
railColor : '#333',
|
||||
|
||||
railColor: '#333',
|
||||
// sets rail opacity
|
||||
railOpacity : .2,
|
||||
|
||||
railOpacity: .2,
|
||||
// whether we should use jQuery UI Draggable to enable bar dragging
|
||||
railDraggable : true,
|
||||
|
||||
railDraggable: true,
|
||||
// defautlt CSS class of the slimscroll rail
|
||||
railClass : 'slimScrollRail',
|
||||
|
||||
railClass: 'slimScrollRail',
|
||||
// defautlt CSS class of the slimscroll bar
|
||||
barClass : 'slimScrollBar',
|
||||
|
||||
barClass: 'slimScrollBar',
|
||||
// defautlt CSS class of the slimscroll wrapper
|
||||
wrapperClass : 'slimScrollDiv',
|
||||
|
||||
wrapperClass: 'slimScrollDiv',
|
||||
// check if mousewheel should scroll the window if we reach top/bottom
|
||||
allowPageScroll : false,
|
||||
|
||||
allowPageScroll: false,
|
||||
// scroll amount applied to each mouse wheel step
|
||||
wheelStep : 20,
|
||||
|
||||
wheelStep: 20,
|
||||
// scroll amount applied when user is using gestures
|
||||
touchScrollStep : 200,
|
||||
|
||||
touchScrollStep: 200,
|
||||
// sets border radius
|
||||
borderRadius: '7px',
|
||||
|
||||
// sets border radius of the rail
|
||||
railBorderRadius : '7px'
|
||||
railBorderRadius: '7px'
|
||||
};
|
||||
|
||||
var o = $.extend(defaults, options);
|
||||
|
||||
// do it for every element that matches selector
|
||||
this.each(function(){
|
||||
this.each(function () {
|
||||
|
||||
var isOverPanel, isOverBar, isDragg, queueHide, touchDif,
|
||||
barHeight, percentScroll, lastScroll,
|
||||
divS = '<div></div>',
|
||||
minBarHeight = 30,
|
||||
releaseScroll = false;
|
||||
var isOverPanel, isOverBar, isDragg, queueHide, touchDif,
|
||||
barHeight, percentScroll, lastScroll,
|
||||
divS = '<div></div>',
|
||||
minBarHeight = 30,
|
||||
releaseScroll = false;
|
||||
|
||||
// used in event handlers and for better minification
|
||||
var me = $(this);
|
||||
|
|
@ -96,58 +74,58 @@
|
|||
// ensure we are not binding it again
|
||||
if (me.parent().hasClass(o.wrapperClass))
|
||||
{
|
||||
// start from last bar position
|
||||
var offset = me.scrollTop();
|
||||
// start from last bar position
|
||||
var offset = me.scrollTop();
|
||||
|
||||
// find bar and rail
|
||||
bar = me.parent().find('.' + o.barClass);
|
||||
rail = me.parent().find('.' + o.railClass);
|
||||
// find bar and rail
|
||||
bar = me.parent().find('.' + o.barClass);
|
||||
rail = me.parent().find('.' + o.railClass);
|
||||
|
||||
getBarHeight();
|
||||
getBarHeight();
|
||||
|
||||
// check if we should scroll existing instance
|
||||
if ($.isPlainObject(options))
|
||||
{
|
||||
// Pass height: auto to an existing slimscroll object to force a resize after contents have changed
|
||||
if ( 'height' in options && options.height == 'auto' ) {
|
||||
me.parent().css('height', 'auto');
|
||||
me.css('height', 'auto');
|
||||
var height = me.parent().parent().height();
|
||||
me.parent().css('height', height);
|
||||
me.css('height', height);
|
||||
}
|
||||
|
||||
if ('scrollTo' in options)
|
||||
{
|
||||
// jump to a static point
|
||||
offset = parseInt(o.scrollTo);
|
||||
}
|
||||
else if ('scrollBy' in options)
|
||||
{
|
||||
// jump by value pixels
|
||||
offset += parseInt(o.scrollBy);
|
||||
}
|
||||
else if ('destroy' in options)
|
||||
{
|
||||
// remove slimscroll elements
|
||||
bar.remove();
|
||||
rail.remove();
|
||||
me.unwrap();
|
||||
return;
|
||||
}
|
||||
|
||||
// scroll content by the given offset
|
||||
scrollContent(offset, false, true);
|
||||
// check if we should scroll existing instance
|
||||
if ($.isPlainObject(options))
|
||||
{
|
||||
// Pass height: auto to an existing slimscroll object to force a resize after contents have changed
|
||||
if ('height' in options && options.height == 'auto') {
|
||||
me.parent().css('height', 'auto');
|
||||
me.css('height', 'auto');
|
||||
var height = me.parent().parent().height();
|
||||
me.parent().css('height', height);
|
||||
me.css('height', height);
|
||||
}
|
||||
|
||||
return;
|
||||
if ('scrollTo' in options)
|
||||
{
|
||||
// jump to a static point
|
||||
offset = parseInt(o.scrollTo);
|
||||
}
|
||||
else if ('scrollBy' in options)
|
||||
{
|
||||
// jump by value pixels
|
||||
offset += parseInt(o.scrollBy);
|
||||
}
|
||||
else if ('destroy' in options)
|
||||
{
|
||||
// remove slimscroll elements
|
||||
bar.remove();
|
||||
rail.remove();
|
||||
me.unwrap();
|
||||
return;
|
||||
}
|
||||
|
||||
// scroll content by the given offset
|
||||
scrollContent(offset, false, true);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
else if ($.isPlainObject(options))
|
||||
{
|
||||
if ('destroy' in options)
|
||||
{
|
||||
return;
|
||||
}
|
||||
if ('destroy' in options)
|
||||
{
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// optionally set height to the parent's height
|
||||
|
|
@ -155,55 +133,57 @@
|
|||
|
||||
// wrap content
|
||||
var wrapper = $(divS)
|
||||
.addClass(o.wrapperClass)
|
||||
.css({
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
width: o.width,
|
||||
height: o.height
|
||||
});
|
||||
.addClass(o.wrapperClass)
|
||||
.css({
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
width: o.width,
|
||||
height: o.height
|
||||
});
|
||||
|
||||
// update style for the div
|
||||
me.css({
|
||||
overflow: 'hidden',
|
||||
width: o.width,
|
||||
height: o.height
|
||||
height: o.height,
|
||||
//Fix for IE10
|
||||
"-ms-touch-action": "none"
|
||||
});
|
||||
|
||||
// create scrollbar rail
|
||||
var rail = $(divS)
|
||||
.addClass(o.railClass)
|
||||
.css({
|
||||
width: o.size,
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
display: (o.alwaysVisible && o.railVisible) ? 'block' : 'none',
|
||||
'border-radius': o.railBorderRadius,
|
||||
background: o.railColor,
|
||||
opacity: o.railOpacity,
|
||||
zIndex: 90
|
||||
});
|
||||
.addClass(o.railClass)
|
||||
.css({
|
||||
width: o.size,
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
display: (o.alwaysVisible && o.railVisible) ? 'block' : 'none',
|
||||
'border-radius': o.railBorderRadius,
|
||||
background: o.railColor,
|
||||
opacity: o.railOpacity,
|
||||
zIndex: 90
|
||||
});
|
||||
|
||||
// create scrollbar
|
||||
var bar = $(divS)
|
||||
.addClass(o.barClass)
|
||||
.css({
|
||||
background: o.color,
|
||||
width: o.size,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
opacity: o.opacity,
|
||||
display: o.alwaysVisible ? 'block' : 'none',
|
||||
'border-radius' : o.borderRadius,
|
||||
BorderRadius: o.borderRadius,
|
||||
MozBorderRadius: o.borderRadius,
|
||||
WebkitBorderRadius: o.borderRadius,
|
||||
zIndex: 99
|
||||
});
|
||||
.addClass(o.barClass)
|
||||
.css({
|
||||
background: o.color,
|
||||
width: o.size,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
opacity: o.opacity,
|
||||
display: o.alwaysVisible ? 'block' : 'none',
|
||||
'border-radius': o.borderRadius,
|
||||
BorderRadius: o.borderRadius,
|
||||
MozBorderRadius: o.borderRadius,
|
||||
WebkitBorderRadius: o.borderRadius,
|
||||
zIndex: 99
|
||||
});
|
||||
|
||||
// set position
|
||||
var posCss = (o.position == 'right') ? { right: o.distance } : { left: o.distance };
|
||||
var posCss = (o.position == 'right') ? {right: o.distance} : {left: o.distance};
|
||||
rail.css(posCss);
|
||||
bar.css(posCss);
|
||||
|
||||
|
|
@ -215,25 +195,26 @@
|
|||
me.parent().append(rail);
|
||||
|
||||
// make it draggable and no longer dependent on the jqueryUI
|
||||
if (o.railDraggable){
|
||||
bar.bind("mousedown", function(e) {
|
||||
if (o.railDraggable) {
|
||||
bar.bind("mousedown", function (e) {
|
||||
var $doc = $(document);
|
||||
isDragg = true;
|
||||
t = parseFloat(bar.css('top'));
|
||||
pageY = e.pageY;
|
||||
|
||||
$doc.bind("mousemove.slimscroll", function(e){
|
||||
$doc.bind("mousemove.slimscroll", function (e) {
|
||||
currTop = t + e.pageY - pageY;
|
||||
bar.css('top', currTop);
|
||||
scrollContent(0, bar.position().top, false);// scroll content
|
||||
});
|
||||
|
||||
$doc.bind("mouseup.slimscroll", function(e) {
|
||||
isDragg = false;hideBar();
|
||||
$doc.bind("mouseup.slimscroll", function (e) {
|
||||
isDragg = false;
|
||||
hideBar();
|
||||
$doc.unbind('.slimscroll');
|
||||
});
|
||||
return false;
|
||||
}).bind("selectstart.slimscroll", function(e){
|
||||
}).bind("selectstart.slimscroll", function (e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
|
|
@ -241,53 +222,78 @@
|
|||
}
|
||||
|
||||
// on rail over
|
||||
rail.hover(function(){
|
||||
rail.hover(function () {
|
||||
showBar();
|
||||
}, function(){
|
||||
}, function () {
|
||||
hideBar();
|
||||
});
|
||||
|
||||
// on bar over
|
||||
bar.hover(function(){
|
||||
bar.hover(function () {
|
||||
isOverBar = true;
|
||||
}, function(){
|
||||
}, function () {
|
||||
isOverBar = false;
|
||||
});
|
||||
|
||||
// show on parent mouseover
|
||||
me.hover(function(){
|
||||
me.hover(function () {
|
||||
isOverPanel = true;
|
||||
showBar();
|
||||
hideBar();
|
||||
}, function(){
|
||||
}, function () {
|
||||
isOverPanel = false;
|
||||
hideBar();
|
||||
});
|
||||
|
||||
// support for mobile
|
||||
me.bind('touchstart', function(e,b){
|
||||
if (e.originalEvent.touches.length)
|
||||
{
|
||||
// record where touch started
|
||||
touchDif = e.originalEvent.touches[0].pageY;
|
||||
}
|
||||
});
|
||||
if (window.navigator.msPointerEnabled) {
|
||||
// support for mobile
|
||||
me.bind('MSPointerDown', function (e, b) {
|
||||
if (e.originalEvent.targetTouches.length)
|
||||
{
|
||||
// record where touch started
|
||||
touchDif = e.originalEvent.targetTouches[0].pageY;
|
||||
}
|
||||
});
|
||||
|
||||
me.bind('touchmove', function(e){
|
||||
// prevent scrolling the page if necessary
|
||||
if(!releaseScroll)
|
||||
{
|
||||
e.originalEvent.preventDefault();
|
||||
}
|
||||
if (e.originalEvent.touches.length)
|
||||
{
|
||||
// see how far user swiped
|
||||
var diff = (touchDif - e.originalEvent.touches[0].pageY) / o.touchScrollStep;
|
||||
// scroll content
|
||||
scrollContent(diff, true);
|
||||
touchDif = e.originalEvent.touches[0].pageY;
|
||||
}
|
||||
});
|
||||
me.bind('MSPointerMove', function (e) {
|
||||
// prevent scrolling the page if necessary
|
||||
e.originalEvent.preventDefault();
|
||||
if (e.originalEvent.targetTouches.length)
|
||||
{
|
||||
// see how far user swiped
|
||||
var diff = (touchDif - e.originalEvent.targetTouches[0].pageY) / o.touchScrollStep;
|
||||
// scroll content
|
||||
scrollContent(diff, true);
|
||||
touchDif = e.originalEvent.targetTouches[0].pageY;
|
||||
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// support for mobile
|
||||
me.bind('touchstart', function (e, b) {
|
||||
if (e.originalEvent.touches.length)
|
||||
{
|
||||
// record where touch started
|
||||
touchDif = e.originalEvent.touches[0].pageY;
|
||||
}
|
||||
});
|
||||
|
||||
me.bind('touchmove', function (e) {
|
||||
// prevent scrolling the page if necessary
|
||||
if (!releaseScroll)
|
||||
{
|
||||
e.originalEvent.preventDefault();
|
||||
}
|
||||
if (e.originalEvent.touches.length)
|
||||
{
|
||||
// see how far user swiped
|
||||
var diff = (touchDif - e.originalEvent.touches[0].pageY) / o.touchScrollStep;
|
||||
// scroll content
|
||||
scrollContent(diff, true);
|
||||
touchDif = e.originalEvent.touches[0].pageY;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// set up initial height
|
||||
getBarHeight();
|
||||
|
|
@ -296,7 +302,7 @@
|
|||
if (o.start === 'bottom')
|
||||
{
|
||||
// scroll content to bottom
|
||||
bar.css({ top: me.outerHeight() - bar.outerHeight() });
|
||||
bar.css({top: me.outerHeight() - bar.outerHeight()});
|
||||
scrollContent(0, true);
|
||||
}
|
||||
else if (o.start !== 'top')
|
||||
|
|
@ -305,7 +311,9 @@
|
|||
scrollContent($(o.start).position().top, null, true);
|
||||
|
||||
// make sure bar stays hidden
|
||||
if (!o.alwaysVisible) { bar.hide(); }
|
||||
if (!o.alwaysVisible) {
|
||||
bar.hide();
|
||||
}
|
||||
}
|
||||
|
||||
// attach scroll events
|
||||
|
|
@ -314,13 +322,19 @@
|
|||
function _onWheel(e)
|
||||
{
|
||||
// use mouse wheel only when mouse is over
|
||||
if (!isOverPanel) { return; }
|
||||
if (!isOverPanel) {
|
||||
return;
|
||||
}
|
||||
|
||||
var e = e || window.event;
|
||||
|
||||
var delta = 0;
|
||||
if (e.wheelDelta) { delta = -e.wheelDelta/120; }
|
||||
if (e.detail) { delta = e.detail / 3; }
|
||||
if (e.wheelDelta) {
|
||||
delta = -e.wheelDelta / 120;
|
||||
}
|
||||
if (e.detail) {
|
||||
delta = e.detail / 3;
|
||||
}
|
||||
|
||||
var target = e.target || e.srcTarget || e.srcElement;
|
||||
if ($(target).closest('.' + o.wrapperClass).is(me.parent())) {
|
||||
|
|
@ -329,8 +343,12 @@
|
|||
}
|
||||
|
||||
// stop window scroll
|
||||
if (e.preventDefault && !releaseScroll) { e.preventDefault(); }
|
||||
if (!releaseScroll) { e.returnValue = false; }
|
||||
if (e.preventDefault && !releaseScroll) {
|
||||
e.preventDefault();
|
||||
}
|
||||
if (!releaseScroll) {
|
||||
e.returnValue = false;
|
||||
}
|
||||
}
|
||||
|
||||
function scrollContent(y, isWheel, isJump)
|
||||
|
|
@ -354,7 +372,7 @@
|
|||
delta = (y > 0) ? Math.ceil(delta) : Math.floor(delta);
|
||||
|
||||
// scroll the scrollbar
|
||||
bar.css({ top: delta + 'px' });
|
||||
bar.css({top: delta + 'px'});
|
||||
}
|
||||
|
||||
// calculate actual scroll amount
|
||||
|
|
@ -366,7 +384,7 @@
|
|||
delta = y;
|
||||
var offsetTop = delta / me[0].scrollHeight * me.outerHeight();
|
||||
offsetTop = Math.min(Math.max(offsetTop, 0), maxTop);
|
||||
bar.css({ top: offsetTop + 'px' });
|
||||
bar.css({top: offsetTop + 'px'});
|
||||
}
|
||||
|
||||
// scroll content
|
||||
|
|
@ -386,8 +404,8 @@
|
|||
{
|
||||
if (window.addEventListener)
|
||||
{
|
||||
this.addEventListener('DOMMouseScroll', _onWheel, false );
|
||||
this.addEventListener('mousewheel', _onWheel, false );
|
||||
this.addEventListener('DOMMouseScroll', _onWheel, false);
|
||||
this.addEventListener('mousewheel', _onWheel, false);
|
||||
}
|
||||
else
|
||||
{
|
||||
|
|
@ -399,11 +417,11 @@
|
|||
{
|
||||
// calculate scrollbar height and make sure it is not too small
|
||||
barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight);
|
||||
bar.css({ height: barHeight + 'px' });
|
||||
bar.css({height: barHeight + 'px'});
|
||||
|
||||
// hide scrollbar if content is not long enough
|
||||
var display = barHeight == me.outerHeight() ? 'none' : 'block';
|
||||
bar.css({ display: display });
|
||||
bar.css({display: display});
|
||||
}
|
||||
|
||||
function showBar()
|
||||
|
|
@ -421,8 +439,8 @@
|
|||
// publish approporiate event
|
||||
if (lastScroll != percentScroll)
|
||||
{
|
||||
var msg = (~~percentScroll == 0) ? 'top' : 'bottom';
|
||||
me.trigger('slimscroll', msg);
|
||||
var msg = (~~percentScroll == 0) ? 'top' : 'bottom';
|
||||
me.trigger('slimscroll', msg);
|
||||
}
|
||||
}
|
||||
else
|
||||
|
|
@ -432,13 +450,15 @@
|
|||
lastScroll = percentScroll;
|
||||
|
||||
// show only when required
|
||||
if(barHeight >= me.outerHeight()) {
|
||||
if (barHeight >= me.outerHeight()) {
|
||||
//allow window scroll
|
||||
releaseScroll = true;
|
||||
return;
|
||||
}
|
||||
bar.stop(true,true).fadeIn('fast');
|
||||
if (o.railVisible) { rail.stop(true,true).fadeIn('fast'); }
|
||||
bar.stop(true, true).fadeIn('fast');
|
||||
if (o.railVisible) {
|
||||
rail.stop(true, true).fadeIn('fast');
|
||||
}
|
||||
}
|
||||
|
||||
function hideBar()
|
||||
|
|
@ -446,7 +466,7 @@
|
|||
// only hide when options allow it
|
||||
if (!o.alwaysVisible)
|
||||
{
|
||||
queueHide = setTimeout(function(){
|
||||
queueHide = setTimeout(function () {
|
||||
if (!(o.disableFadeOut && isOverPanel) && !isOverBar && !isDragg)
|
||||
{
|
||||
bar.fadeOut('slow');
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue