mirror of
https://github.com/ansible/awx.git
synced 2026-01-18 13:11:19 -03:30
Added malihu-custom-scrollbar library to provide consistent cross-browser scrolling on job detail page. Implemented on task host list to create an 'infinite scroll'.
This commit is contained in:
Chris Houseknecht
parent
0a18816cf5
commit
fc0056d058
@ -77,7 +77,6 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
|
||||
event_socket.on("job_events-" + job_id, function(data) {
|
||||
var matches;
|
||||
data.id = data.event_id;
|
||||
data.event = data.event_name;
|
||||
if (api_complete) {
|
||||
matches = processed_events.find(function(x) { return x === data.id; });
|
||||
@ -92,7 +91,6 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
if (scope.removeAPIComplete) {
|
||||
scope.removeAPIComplete();
|
||||
}
|
||||
@ -270,6 +268,82 @@ function JobDetailController ($scope, $compile, $routeParams, ClearScope, Breadc
|
||||
$(window).resize(_.debounce(function(){
|
||||
adjustSize();
|
||||
}, 500));
|
||||
|
||||
$scope.HostDetailOnTotalScroll = function(mcs) {
|
||||
var url = GetBasePath('jobs') + job_id + '/job_events/?parent=' + scope.activeTask;
|
||||
url += '&host__name__gt=' + scope.hostResults[scope.hostResults.length - 1].name + '&host__isnull=false&page_size=5&order_by=host__name';
|
||||
Wait('start');
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
.success(function(data) {
|
||||
setTimeout(function() {
|
||||
scope.$apply(function() {
|
||||
data.results.forEach(function(row) {
|
||||
scope.hostResults.push({
|
||||
id: row.id,
|
||||
status: ( (row.failed) ? 'failed': (row.changed) ? 'changed' : 'successful' ),
|
||||
host_id: row.host,
|
||||
task_id: row.parent,
|
||||
name: row.event_data.host,
|
||||
created: row.created,
|
||||
msg: ( (row.event_data && row.event_data.res) ? row.event_data.res.msg : '' )
|
||||
});
|
||||
if (scope.hostResults.length > 10) {
|
||||
scope.hostResults.splice(0,1);
|
||||
}
|
||||
});
|
||||
$('#tasks-table-detail').mCustomScrollbar("update");
|
||||
if (data.next) {
|
||||
// there are more rows. move dragger up, letting user know.
|
||||
setTimeout(function() { $('.mCSB_dragger').css({ top: (mcs.draggerTop - 10) + 'px'}); }, 700);
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
Wait('stop');
|
||||
})
|
||||
.error(function(data, status) {
|
||||
ProcessErrors(scope, data, status, null, { hdr: 'Error!',
|
||||
msg: 'Call to ' + url + '. GET returned: ' + status });
|
||||
});
|
||||
};
|
||||
|
||||
$scope.HostDetailOnTotalScrollBack = function(mcs) {
|
||||
var url = GetBasePath('jobs') + job_id + '/job_events/?parent=' + scope.activeTask;
|
||||
Wait('start');
|
||||
url += '&host__name__lt=' + scope.hostResults[0].name + '&host__isnull=false&page_size=5&order_by=-host__name';
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
.success(function(data) {
|
||||
setTimeout(function() {
|
||||
scope.$apply(function() {
|
||||
data.results.forEach(function(row) {
|
||||
scope.hostResults.unshift({
|
||||
id: row.id,
|
||||
status: ( (row.failed) ? 'failed': (row.changed) ? 'changed' : 'successful' ),
|
||||
host_id: row.host,
|
||||
task_id: row.parent,
|
||||
name: row.event_data.host,
|
||||
created: row.created,
|
||||
msg: ( (row.event_data && row.event_data.res) ? row.event_data.res.msg : '' )
|
||||
});
|
||||
if (scope.hostResults.length > 10) {
|
||||
scope.hostResults.pop();
|
||||
}
|
||||
});
|
||||
$('#tasks-table-detail').mCustomScrollbar("update");
|
||||
if (data.next) {
|
||||
// there are more rows. move dragger down, letting user know.
|
||||
setTimeout(function() { $('.mCSB_dragger').css({ top: (mcs.draggerTop + 10) + 'px' }); }, 700);
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
Wait('stop');
|
||||
})
|
||||
.error(function(data, status) {
|
||||
ProcessErrors(scope, data, status, null, { hdr: 'Error!',
|
||||
msg: 'Call to ' + url + '. GET returned: ' + status });
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
JobDetailController.$inject = [ '$scope', '$compile', '$routeParams', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'GetBasePath', 'Wait',
|
||||
|
||||
@ -46,6 +46,7 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
|
||||
|
||||
var scope = params.scope,
|
||||
events = params.events;
|
||||
|
||||
events.forEach(function(event) {
|
||||
var hostCount;
|
||||
|
||||
@ -78,7 +79,7 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
|
||||
scope.tasks.push({
|
||||
id: event.id,
|
||||
name: event.event_display,
|
||||
play_id: event.parent,
|
||||
play_id: ( (event.parent) ? event.parent : scope.activePlay ),
|
||||
status: ( (event.failed) ? 'failed' : (event.changed) ? 'changed' : 'successful' ),
|
||||
created: event.created,
|
||||
modified: event.modified,
|
||||
@ -158,11 +159,11 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
|
||||
event_id: event.id,
|
||||
created: event.created,
|
||||
modified: event.modified,
|
||||
message: (event.event_data && event.event_data.res) ? event.event_data.res.msg : ''
|
||||
message: ( (event.event_data && event.event_data.res) ? event.event_data.res.msg : '' )
|
||||
});
|
||||
|
||||
}
|
||||
if (event.event === 'runner_on_error') {
|
||||
if (event.event === 'runner_on_error' || event.event === 'runner_on_async_failed') {
|
||||
UpdateHostStatus({
|
||||
scope: scope,
|
||||
name: event.event_data.host,
|
||||
@ -188,7 +189,7 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
|
||||
message: (event.event_data && event.event_data.res) ? event.event_data.res.msg : ''
|
||||
});
|
||||
}
|
||||
if (event.event === 'runner_on_ok') {
|
||||
if (event.event === 'runner_on_ok' || event.event === 'runner_on_async_ok') {
|
||||
UpdateHostStatus({
|
||||
scope: scope,
|
||||
name: event.event_data.host,
|
||||
@ -481,13 +482,22 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
|
||||
unreachable: (status === 'unreachable') ? 1 : 0,
|
||||
failed: (status === 'failed') ? 1 : 0
|
||||
});
|
||||
scope.hosts.sort(function(a,b) {
|
||||
if (a.name < b.name) {
|
||||
return -1;
|
||||
}
|
||||
if (a.name > b.name) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
UpdateTaskStatus({
|
||||
scope: scope,
|
||||
task_id: task_id,
|
||||
failed: (status === 'failed' || status === 'unreachable') ? true :false,
|
||||
changed: (status === 'changed') ? true : false,
|
||||
failed: ((status === 'failed' || status === 'unreachable') ? true :false),
|
||||
changed: ((status === 'changed') ? true : false),
|
||||
modified: modified
|
||||
});
|
||||
|
||||
@ -515,8 +525,36 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
|
||||
created = params.created,
|
||||
name = params.name,
|
||||
msg = params.message,
|
||||
play_id, first;
|
||||
play_id, first,
|
||||
tmp = [];
|
||||
|
||||
// Remove any rows not related to the current task
|
||||
scope.hostResults.forEach(function(result, idx) {
|
||||
if (result.task_id !== task_id) {
|
||||
tmp.push(idx);
|
||||
}
|
||||
});
|
||||
tmp.forEach(function(row) {
|
||||
scope.hostResults.splice(row, 1);
|
||||
});
|
||||
|
||||
// Sort
|
||||
scope.hostResults.sort(function(a,b) {
|
||||
if (a.name < b.name) {
|
||||
return -1;
|
||||
}
|
||||
if (a.name > b.name) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
// Keep the list pruned to 10 hosts
|
||||
if (scope.hostResults.length === 10) {
|
||||
scope.hostResults.splice(0,1);
|
||||
}
|
||||
|
||||
// Add the new row
|
||||
scope.hostResults.push({
|
||||
id: event_id,
|
||||
status: status,
|
||||
@ -527,6 +565,17 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
|
||||
msg: msg
|
||||
});
|
||||
|
||||
// Sort one more time
|
||||
scope.hostResults.sort(function(a,b) {
|
||||
if (a.name < b.name) {
|
||||
return -1;
|
||||
}
|
||||
if (a.name > b.name) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
scope.tasks.every(function(task) {
|
||||
if (task.id === task_id) {
|
||||
play_id = task.play_id;
|
||||
@ -601,17 +650,20 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
|
||||
table_height = $('#tasks-table-detail').height();
|
||||
$('#tasks-table-detail').css('height', original_height);
|
||||
$('#tasks-table-detail').scrollTop(table_height);
|
||||
$('#tasks-table-detail').mCustomScrollbar("update");
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
};
|
||||
}])
|
||||
|
||||
.factory('SelectTask', ['SelectHost', function(SelectHost) {
|
||||
.factory('SelectTask', ['SelectHost', 'GetBasePath', '$routeParams', 'Rest', 'ProcessErrors', 'Wait',
|
||||
function(SelectHost, GetBasePath, $routeParams, Rest, ProcessErrors, Wait) {
|
||||
return function(params) {
|
||||
var scope = params.scope,
|
||||
id = params.id,
|
||||
callback = params.callback;
|
||||
callback = params.callback,
|
||||
url;
|
||||
scope.tasks.forEach(function(task, idx) {
|
||||
if (task.id === id) {
|
||||
scope.tasks[idx].taskActiveClass = 'active';
|
||||
@ -625,15 +677,41 @@ function(UpdatePlayStatus, UpdatePlayNoHostsMatched, UpdateHostStatus, UpdatePla
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
SelectHost();
|
||||
Wait('start');
|
||||
scope.hostResults = [];
|
||||
url = GetBasePath('jobs') + $routeParams.id + '/job_events/?parent=' + id +
|
||||
'&host__isnull=false&page_size=10&order_by=-host__name';
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
.success(function(data) {
|
||||
var i;
|
||||
for (i = data.results.length - 1; i >=0; i--) {
|
||||
scope.hostResults.push({
|
||||
id: data.results[i].id,
|
||||
status: ( (data.results[i].failed) ? 'failed' : (data.results[i].changed) ? 'changed' : 'successful' ),
|
||||
host_id: data.results[i].host,
|
||||
task_id: data.results[i].parent,
|
||||
name: data.results[i].summary_fields.host.name,
|
||||
created: data.results[i].created,
|
||||
msg: data.results[i].event_data.res.msg
|
||||
});
|
||||
}
|
||||
Wait('stop');
|
||||
SelectHost();
|
||||
})
|
||||
.error(function(data, status) {
|
||||
ProcessErrors(scope, data, status, null, { hdr: 'Error!',
|
||||
msg: 'Call to ' + url + '. GET returned: ' + status });
|
||||
});
|
||||
};
|
||||
}])
|
||||
|
||||
.factory('SelectHost', [ function() {
|
||||
return function() {
|
||||
setTimeout(function() {
|
||||
var inner_height = $('#hosts-table-details').height();
|
||||
$('#hosts-table-details').scrollTop(inner_height);
|
||||
var inner_height = $('#hosts-table-detail').innerHeight();
|
||||
$('#hosts-table-detail').scrollTop(inner_height);
|
||||
$('#tasks-table-detail').mCustomScrollbar("update");
|
||||
}, 100);
|
||||
};
|
||||
}]);
|
||||
|
||||
@ -199,7 +199,7 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
#hosts-table-detail {
|
||||
padding: 3px;
|
||||
padding: 3px 0 3px 5px;
|
||||
border: 1px solid @grey;
|
||||
border-top: 2px solid #ddd;
|
||||
height: 150px;
|
||||
@ -228,5 +228,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.mCSB_container {
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
@ -720,48 +720,26 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
|
||||
};
|
||||
}])
|
||||
|
||||
.directive('awScrollDown', [ function() {
|
||||
.directive('awCustomScroll', [ function() {
|
||||
return function(scope, element, attrs) {
|
||||
var element_to_scroll = attrs.awScrollDown, elem;
|
||||
$(element).on('click', function() {
|
||||
var height = document.getElementById(element_to_scroll).scrollHeight;
|
||||
$(element).hide();
|
||||
$('#' + element_to_scroll).animate({scrollTop:height}, 800);
|
||||
});
|
||||
elem = document.getElementById(element_to_scroll);
|
||||
$('#' + element_to_scroll).on('scroll', function() {
|
||||
if (elem.scrollTop > 0 && $(element).is(':visible')) {
|
||||
$(element).hide();
|
||||
}
|
||||
else if (elem.scrollTop === 0 && !$(element).is(':visible')) {
|
||||
$(element).fadeIn(2500);
|
||||
$(element).mCustomScrollbar({
|
||||
advanced:{
|
||||
updateOnContentResize: true
|
||||
},
|
||||
scrollButtons: {
|
||||
enable: true,
|
||||
scrollType: 'continuous'
|
||||
},
|
||||
theme: 'dark-thick',
|
||||
mouseWheel: true,
|
||||
scrollInertia: 0,
|
||||
callbacks: {
|
||||
onTotalScroll: scope[attrs.onTotalScroll],
|
||||
//onTotalScrollOffset: 21,
|
||||
onTotalScrollBack: scope[attrs.onTotalScrollBack],
|
||||
//onTotalScrollBackOffset: 21
|
||||
}
|
||||
});
|
||||
if (elem.scrollTop > 0 && $(element).is(':visible')) {
|
||||
$(element).hide();
|
||||
}
|
||||
};
|
||||
}])
|
||||
|
||||
.directive('awScrollUp', [ function() {
|
||||
return function(scope, element, attrs) {
|
||||
var element_to_scroll = attrs.awScrollUp, elem;
|
||||
$(element).on('click', function() {
|
||||
$(element).hide();
|
||||
$('#' + element_to_scroll).animate({scrollTop:0}, 'slow');
|
||||
});
|
||||
elem = document.getElementById(element_to_scroll);
|
||||
$('#' + element_to_scroll).on('scroll', function() {
|
||||
if (elem.scrollTop === 0 && $(element).is(':visible')) {
|
||||
$(element).hide();
|
||||
}
|
||||
else if (elem.scrollTop > 0 && !$(element).is(':visible')) {
|
||||
$(element).fadeIn(2500);
|
||||
}
|
||||
});
|
||||
if (elem.scrollTop === 0) {
|
||||
$(element).hide();
|
||||
}
|
||||
};
|
||||
}]);
|
||||
|
||||
|
||||
50
awx/ui/static/lib/malihu-custom-scrollbar-plugin/.bower.json
Normal file
50
awx/ui/static/lib/malihu-custom-scrollbar-plugin/.bower.json
Normal file
@ -0,0 +1,50 @@
|
||||
{
|
||||
"name": "malihu-custom-scrollbar-plugin",
|
||||
"version": "2.8.3",
|
||||
"title": "malihu custom scrollbar plugin",
|
||||
"description": "Custom scrollbar jQuery plugin that's fully customizable with CSS. Features vertical/horizontal scrolling, mouse-wheel support, scroll easing, adjustable scrollbar height/width, nested scrollbars, user defined callbacks etc.",
|
||||
"main": "./jquery.mCustomScrollbar.js",
|
||||
"keywords": [
|
||||
"jquery",
|
||||
"custom scrollbar",
|
||||
"scrollbar"
|
||||
],
|
||||
"homepage": "http://manos.malihu.gr/jquery-custom-content-scroller/",
|
||||
"author": {
|
||||
"name": "malihu",
|
||||
"url": "http://manos.malihu.gr"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/malihu/malihu-custom-scrollbar-plugin.git"
|
||||
},
|
||||
"licenses": [
|
||||
{
|
||||
"type": "GNU LGPL",
|
||||
"url": "http://www.gnu.org/licenses/lgpl.html"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": ">=1.6",
|
||||
"jquery-mousewheel": ">=3.0.6"
|
||||
},
|
||||
"ignore": [
|
||||
"*.md",
|
||||
"*.txt",
|
||||
"*.json",
|
||||
"*.html",
|
||||
"/demo_files",
|
||||
"/source_files",
|
||||
"/js"
|
||||
],
|
||||
"_release": "2.8.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "2.8.3",
|
||||
"commit": "179ced37ef972b2c44bb4b71d20a6310fa317867"
|
||||
},
|
||||
"_source": "git://github.com/malihu/malihu-custom-scrollbar-plugin.git",
|
||||
"_target": "~2.8.3",
|
||||
"_originalSource": "malihu-custom-scrollbar-plugin",
|
||||
"_direct": true
|
||||
}
|
||||
4
awx/ui/static/lib/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js
vendored
Normal file
4
awx/ui/static/lib/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,474 @@
|
||||
/* basic scrollbar styling */
|
||||
/* vertical scrollbar */
|
||||
.mCSB_container{
|
||||
width:auto;
|
||||
margin-right:30px;
|
||||
overflow:hidden;
|
||||
}
|
||||
.mCSB_container.mCS_no_scrollbar{
|
||||
margin-right:0;
|
||||
}
|
||||
.mCS_disabled>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar,
|
||||
.mCS_destroyed>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar{
|
||||
margin-right:30px;
|
||||
}
|
||||
.mCustomScrollBox>.mCSB_scrollTools{
|
||||
width:16px;
|
||||
height:100%;
|
||||
top:0;
|
||||
right:0;
|
||||
}
|
||||
.mCSB_scrollTools .mCSB_draggerContainer{
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
bottom:0;
|
||||
right:0;
|
||||
height:auto;
|
||||
}
|
||||
.mCSB_scrollTools a+.mCSB_draggerContainer{
|
||||
margin:20px 0;
|
||||
}
|
||||
.mCSB_scrollTools .mCSB_draggerRail{
|
||||
width:2px;
|
||||
height:100%;
|
||||
margin:0 auto;
|
||||
-webkit-border-radius:10px;
|
||||
-moz-border-radius:10px;
|
||||
border-radius:10px;
|
||||
}
|
||||
.mCSB_scrollTools .mCSB_dragger{
|
||||
cursor:pointer;
|
||||
width:100%;
|
||||
height:30px;
|
||||
}
|
||||
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
|
||||
width:4px;
|
||||
height:100%;
|
||||
margin:0 auto;
|
||||
-webkit-border-radius:10px;
|
||||
-moz-border-radius:10px;
|
||||
border-radius:10px;
|
||||
text-align:center;
|
||||
}
|
||||
.mCSB_scrollTools .mCSB_buttonUp,
|
||||
.mCSB_scrollTools .mCSB_buttonDown{
|
||||
display:block;
|
||||
position:relative;
|
||||
height:20px;
|
||||
overflow:hidden;
|
||||
margin:0 auto;
|
||||
cursor:pointer;
|
||||
}
|
||||
.mCSB_scrollTools .mCSB_buttonDown{
|
||||
top:100%;
|
||||
margin-top:-40px;
|
||||
}
|
||||
/* horizontal scrollbar */
|
||||
.mCSB_horizontal>.mCSB_container{
|
||||
height:auto;
|
||||
margin-right:0;
|
||||
margin-bottom:30px;
|
||||
overflow:hidden;
|
||||
}
|
||||
.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
|
||||
margin-bottom:0;
|
||||
}
|
||||
.mCS_disabled>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar,
|
||||
.mCS_destroyed>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
|
||||
margin-right:0;
|
||||
margin-bottom:30px;
|
||||
}
|
||||
.mCSB_horizontal.mCustomScrollBox>.mCSB_scrollTools{
|
||||
width:100%;
|
||||
height:16px;
|
||||
top:auto;
|
||||
right:auto;
|
||||
bottom:0;
|
||||
left:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
.mCSB_horizontal>.mCSB_scrollTools a+.mCSB_draggerContainer{
|
||||
margin:0 20px;
|
||||
}
|
||||
.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
|
||||
width:100%;
|
||||
height:2px;
|
||||
margin:7px 0;
|
||||
-webkit-border-radius:10px;
|
||||
-moz-border-radius:10px;
|
||||
border-radius:10px;
|
||||
}
|
||||
.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger{
|
||||
width:30px;
|
||||
height:100%;
|
||||
}
|
||||
.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
|
||||
width:100%;
|
||||
height:4px;
|
||||
margin:6px auto;
|
||||
-webkit-border-radius:10px;
|
||||
-moz-border-radius:10px;
|
||||
border-radius:10px;
|
||||
}
|
||||
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonLeft,
|
||||
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
|
||||
display:block;
|
||||
position:relative;
|
||||
width:20px;
|
||||
height:100%;
|
||||
overflow:hidden;
|
||||
margin:0 auto;
|
||||
cursor:pointer;
|
||||
float:left;
|
||||
}
|
||||
.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
|
||||
margin-left:-40px;
|
||||
float:right;
|
||||
}
|
||||
.mCustomScrollBox{
|
||||
-ms-touch-action:none; /*MSPointer events - direct all pointer events to js*/
|
||||
}
|
||||
|
||||
/* default scrollbar colors and backgrounds (default theme) */
|
||||
.mCustomScrollBox>.mCSB_scrollTools{
|
||||
opacity:0.75;
|
||||
filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
|
||||
}
|
||||
.mCustomScrollBox:hover>.mCSB_scrollTools{
|
||||
opacity:1;
|
||||
filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; /* old ie */
|
||||
}
|
||||
.mCSB_scrollTools .mCSB_draggerRail{
|
||||
background:#000; /* rgba fallback */
|
||||
background:rgba(0,0,0,0.4);
|
||||
filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
|
||||
}
|
||||
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
|
||||
background:#fff; /* rgba fallback */
|
||||
background:rgba(255,255,255,0.75);
|
||||
filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
|
||||
}
|
||||
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
|
||||
background:rgba(255,255,255,0.85);
|
||||
filter:"alpha(opacity=85)"; -ms-filter:"alpha(opacity=85)"; /* old ie */
|
||||
}
|
||||
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
|
||||
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
|
||||
background:rgba(255,255,255,0.9);
|
||||
filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
|
||||
}
|
||||
.mCSB_scrollTools .mCSB_buttonUp,
|
||||
.mCSB_scrollTools .mCSB_buttonDown,
|
||||
.mCSB_scrollTools .mCSB_buttonLeft,
|
||||
.mCSB_scrollTools .mCSB_buttonRight{
|
||||
background-image:url(mCSB_buttons.png);
|
||||
background-repeat:no-repeat;
|
||||
opacity:0.4;
|
||||
filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
|
||||
}
|
||||
.mCSB_scrollTools .mCSB_buttonUp{
|
||||
background-position:0 0;
|
||||
/*
|
||||
sprites locations are 0 0/-16px 0/-32px 0/-48px 0 (light) and -80px 0/-96px 0/-112px 0/-128px 0 (dark)
|
||||
*/
|
||||
}
|
||||
.mCSB_scrollTools .mCSB_buttonDown{
|
||||
background-position:0 -20px;
|
||||
/*
|
||||
sprites locations are 0 -20px/-16px -20px/-32px -20px/-48px -20px (light) and -80px -20px/-96px -20px/-112px -20px/-128px -20px (dark)
|
||||
*/
|
||||
}
|
||||
.mCSB_scrollTools .mCSB_buttonLeft{
|
||||
background-position:0 -40px;
|
||||
/*
|
||||
sprites locations are 0 -40px/-20px -40px/-40px -40px/-60px -40px (light) and -80px -40px/-100px -40px/-120px -40px/-140px -40px (dark)
|
||||
*/
|
||||
}
|
||||
.mCSB_scrollTools .mCSB_buttonRight{
|
||||
background-position:0 -56px;
|
||||
/*
|
||||
sprites locations are 0 -56px/-20px -56px/-40px -56px/-60px -56px (light) and -80px -56px/-100px -56px/-120px -56px/-140px -56px (dark)
|
||||
*/
|
||||
}
|
||||
.mCSB_scrollTools .mCSB_buttonUp:hover,
|
||||
.mCSB_scrollTools .mCSB_buttonDown:hover,
|
||||
.mCSB_scrollTools .mCSB_buttonLeft:hover,
|
||||
.mCSB_scrollTools .mCSB_buttonRight:hover{
|
||||
opacity:0.75;
|
||||
filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
|
||||
}
|
||||
.mCSB_scrollTools .mCSB_buttonUp:active,
|
||||
.mCSB_scrollTools .mCSB_buttonDown:active,
|
||||
.mCSB_scrollTools .mCSB_buttonLeft:active,
|
||||
.mCSB_scrollTools .mCSB_buttonRight:active{
|
||||
opacity:0.9;
|
||||
filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
|
||||
}
|
||||
|
||||
/*scrollbar themes*/
|
||||
/*dark (dark colored scrollbar)*/
|
||||
.mCS-dark>.mCSB_scrollTools .mCSB_draggerRail{
|
||||
background:#000; /* rgba fallback */
|
||||
background:rgba(0,0,0,0.15);
|
||||
}
|
||||
.mCS-dark>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
|
||||
background:#000; /* rgba fallback */
|
||||
background:rgba(0,0,0,0.75);
|
||||
}
|
||||
.mCS-dark>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
|
||||
background:rgba(0,0,0,0.85);
|
||||
}
|
||||
.mCS-dark>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
|
||||
.mCS-dark>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
|
||||
background:rgba(0,0,0,0.9);
|
||||
}
|
||||
.mCS-dark>.mCSB_scrollTools .mCSB_buttonUp{
|
||||
background-position:-80px 0;
|
||||
}
|
||||
.mCS-dark>.mCSB_scrollTools .mCSB_buttonDown{
|
||||
background-position:-80px -20px;
|
||||
}
|
||||
.mCS-dark>.mCSB_scrollTools .mCSB_buttonLeft{
|
||||
background-position:-80px -40px;
|
||||
}
|
||||
.mCS-dark>.mCSB_scrollTools .mCSB_buttonRight{
|
||||
background-position:-80px -56px;
|
||||
}
|
||||
/*light-2*/
|
||||
.mCS-light-2>.mCSB_scrollTools .mCSB_draggerRail{
|
||||
width:4px;
|
||||
background:#fff; /* rgba fallback */
|
||||
background:rgba(255,255,255,0.1);
|
||||
-webkit-border-radius:1px;
|
||||
-moz-border-radius:1px;
|
||||
border-radius:1px;
|
||||
}
|
||||
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
|
||||
width:4px;
|
||||
background:#fff; /* rgba fallback */
|
||||
background:rgba(255,255,255,0.75);
|
||||
-webkit-border-radius:1px;
|
||||
-moz-border-radius:1px;
|
||||
border-radius:1px;
|
||||
}
|
||||
.mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
|
||||
width:100%;
|
||||
height:4px;
|
||||
margin:6px 0;
|
||||
}
|
||||
.mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
|
||||
width:100%;
|
||||
height:4px;
|
||||
margin:6px auto;
|
||||
}
|
||||
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
|
||||
background:rgba(255,255,255,0.85);
|
||||
}
|
||||
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
|
||||
.mCS-light-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
|
||||
background:rgba(255,255,255,0.9);
|
||||
}
|
||||
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonUp{
|
||||
background-position:-32px 0;
|
||||
}
|
||||
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonDown{
|
||||
background-position:-32px -20px;
|
||||
}
|
||||
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonLeft{
|
||||
background-position:-40px -40px;
|
||||
}
|
||||
.mCS-light-2>.mCSB_scrollTools .mCSB_buttonRight{
|
||||
background-position:-40px -56px;
|
||||
}
|
||||
/*dark-2*/
|
||||
.mCS-dark-2>.mCSB_scrollTools .mCSB_draggerRail{
|
||||
width:4px;
|
||||
background:#000; /* rgba fallback */
|
||||
background:rgba(0,0,0,0.1);
|
||||
-webkit-border-radius:1px;
|
||||
-moz-border-radius:1px;
|
||||
border-radius:1px;
|
||||
}
|
||||
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
|
||||
width:4px;
|
||||
background:#000; /* rgba fallback */
|
||||
background:rgba(0,0,0,0.75);
|
||||
-webkit-border-radius:1px;
|
||||
-moz-border-radius:1px;
|
||||
border-radius:1px;
|
||||
}
|
||||
.mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
|
||||
width:100%;
|
||||
height:4px;
|
||||
margin:6px 0;
|
||||
}
|
||||
.mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
|
||||
width:100%;
|
||||
height:4px;
|
||||
margin:6px auto;
|
||||
}
|
||||
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
|
||||
background:rgba(0,0,0,0.85);
|
||||
}
|
||||
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
|
||||
.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
|
||||
background:rgba(0,0,0,0.9);
|
||||
}
|
||||
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonUp{
|
||||
background-position:-112px 0;
|
||||
}
|
||||
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonDown{
|
||||
background-position:-112px -20px;
|
||||
}
|
||||
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonLeft{
|
||||
background-position:-120px -40px;
|
||||
}
|
||||
.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonRight{
|
||||
background-position:-120px -56px;
|
||||
}
|
||||
/*light-thick*/
|
||||
.mCS-light-thick>.mCSB_scrollTools .mCSB_draggerRail{
|
||||
width:4px;
|
||||
background:#fff; /* rgba fallback */
|
||||
background:rgba(255,255,255,0.1);
|
||||
-webkit-border-radius:2px;
|
||||
-moz-border-radius:2px;
|
||||
border-radius:2px;
|
||||
}
|
||||
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
|
||||
width:6px;
|
||||
background:#fff; /* rgba fallback */
|
||||
background:rgba(255,255,255,0.75);
|
||||
-webkit-border-radius:2px;
|
||||
-moz-border-radius:2px;
|
||||
border-radius:2px;
|
||||
}
|
||||
.mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
|
||||
width:100%;
|
||||
height:4px;
|
||||
margin:6px 0;
|
||||
}
|
||||
.mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
|
||||
width:100%;
|
||||
height:6px;
|
||||
margin:5px auto;
|
||||
}
|
||||
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
|
||||
background:rgba(255,255,255,0.85);
|
||||
}
|
||||
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
|
||||
.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
|
||||
background:rgba(255,255,255,0.9);
|
||||
}
|
||||
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonUp{
|
||||
background-position:-16px 0;
|
||||
}
|
||||
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonDown{
|
||||
background-position:-16px -20px;
|
||||
}
|
||||
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonLeft{
|
||||
background-position:-20px -40px;
|
||||
}
|
||||
.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonRight{
|
||||
background-position:-20px -56px;
|
||||
}
|
||||
/*dark-thick*/
|
||||
.mCS-dark-thick>.mCSB_scrollTools .mCSB_draggerRail{
|
||||
width:4px;
|
||||
background:#000; /* rgba fallback */
|
||||
background:rgba(0,0,0,0.1);
|
||||
-webkit-border-radius:2px;
|
||||
-moz-border-radius:2px;
|
||||
border-radius:2px;
|
||||
}
|
||||
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
|
||||
width:6px;
|
||||
background:#000; /* rgba fallback */
|
||||
background:rgba(0,0,0,0.75);
|
||||
-webkit-border-radius:2px;
|
||||
-moz-border-radius:2px;
|
||||
border-radius:2px;
|
||||
}
|
||||
.mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
|
||||
width:100%;
|
||||
height:4px;
|
||||
margin:6px 0;
|
||||
}
|
||||
.mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
|
||||
width:100%;
|
||||
height:6px;
|
||||
margin:5px auto;
|
||||
}
|
||||
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
|
||||
background:rgba(0,0,0,0.85);
|
||||
}
|
||||
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
|
||||
.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
|
||||
background:rgba(0,0,0,0.9);
|
||||
}
|
||||
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonUp{
|
||||
background-position:-96px 0;
|
||||
}
|
||||
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonDown{
|
||||
background-position:-96px -20px;
|
||||
}
|
||||
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonLeft{
|
||||
background-position:-100px -40px;
|
||||
}
|
||||
.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonRight{
|
||||
background-position:-100px -56px;
|
||||
}
|
||||
/*light-thin*/
|
||||
.mCS-light-thin>.mCSB_scrollTools .mCSB_draggerRail{
|
||||
background:#fff; /* rgba fallback */
|
||||
background:rgba(255,255,255,0.1);
|
||||
}
|
||||
.mCS-light-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
|
||||
width:2px;
|
||||
}
|
||||
.mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
|
||||
width:100%;
|
||||
}
|
||||
.mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
|
||||
width:100%;
|
||||
height:2px;
|
||||
margin:7px auto;
|
||||
}
|
||||
/*dark-thin*/
|
||||
.mCS-dark-thin>.mCSB_scrollTools .mCSB_draggerRail{
|
||||
background:#000; /* rgba fallback */
|
||||
background:rgba(0,0,0,0.15);
|
||||
}
|
||||
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
|
||||
width:2px;
|
||||
background:#000; /* rgba fallback */
|
||||
background:rgba(0,0,0,0.75);
|
||||
}
|
||||
.mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
|
||||
width:100%;
|
||||
}
|
||||
.mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
|
||||
width:100%;
|
||||
height:2px;
|
||||
margin:7px auto;
|
||||
}
|
||||
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
|
||||
background:rgba(0,0,0,0.85);
|
||||
}
|
||||
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
|
||||
.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
|
||||
background:rgba(0,0,0,0.9);
|
||||
}
|
||||
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonUp{
|
||||
background-position:-80px 0;
|
||||
}
|
||||
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonDown{
|
||||
background-position:-80px -20px;
|
||||
}
|
||||
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonLeft{
|
||||
background-position:-80px -40px;
|
||||
}
|
||||
.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonRight{
|
||||
background-position:-80px -56px;
|
||||
}
|
||||
@ -0,0 +1,969 @@
|
||||
/*
|
||||
== malihu jquery custom scrollbars plugin ==
|
||||
version: 2.8.3
|
||||
author: malihu (http://manos.malihu.gr)
|
||||
plugin home: http://manos.malihu.gr/jquery-custom-content-scroller
|
||||
*/
|
||||
|
||||
/*
|
||||
Copyright 2010-2013 Manos Malihutsakis
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Lesser General Public License as published by
|
||||
the Free Software Foundation, either version 3 of the License, or
|
||||
any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Lesser General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Lesser General Public License
|
||||
along with this program. If not, see http://www.gnu.org/licenses/lgpl.html.
|
||||
*/
|
||||
(function($){
|
||||
/*plugin script*/
|
||||
var methods={
|
||||
init:function(options){
|
||||
var defaults={
|
||||
set_width:false, /*optional element width: boolean, pixels, percentage*/
|
||||
set_height:false, /*optional element height: boolean, pixels, percentage*/
|
||||
horizontalScroll:false, /*scroll horizontally: boolean*/
|
||||
scrollInertia:950, /*scrolling inertia: integer (milliseconds)*/
|
||||
mouseWheel:true, /*mousewheel support: boolean*/
|
||||
mouseWheelPixels:"auto", /*mousewheel pixels amount: integer, "auto"*/
|
||||
autoDraggerLength:true, /*auto-adjust scrollbar dragger length: boolean*/
|
||||
autoHideScrollbar:false, /*auto-hide scrollbar when idle*/
|
||||
alwaysShowScrollbar:false, /*always show scrollbar even when there's nothing to scroll (disables autoHideScrollbar): boolean*/
|
||||
snapAmount:null, /* optional element always snaps to a multiple of this number in pixels */
|
||||
snapOffset:0, /* when snapping, snap with this number in pixels as an offset */
|
||||
scrollButtons:{ /*scroll buttons*/
|
||||
enable:false, /*scroll buttons support: boolean*/
|
||||
scrollType:"continuous", /*scroll buttons scrolling type: "continuous", "pixels"*/
|
||||
scrollSpeed:"auto", /*scroll buttons continuous scrolling speed: integer, "auto"*/
|
||||
scrollAmount:40 /*scroll buttons pixels scroll amount: integer (pixels)*/
|
||||
},
|
||||
advanced:{
|
||||
updateOnBrowserResize:true, /*update scrollbars on browser resize (for layouts based on percentages): boolean*/
|
||||
updateOnContentResize:false, /*auto-update scrollbars on content resize (for dynamic content): boolean*/
|
||||
autoExpandHorizontalScroll:false, /*auto-expand width for horizontal scrolling: boolean*/
|
||||
autoScrollOnFocus:true, /*auto-scroll on focused elements: boolean*/
|
||||
normalizeMouseWheelDelta:false /*normalize mouse-wheel delta (-1/1)*/
|
||||
},
|
||||
contentTouchScroll:true, /*scrolling by touch-swipe content: boolean*/
|
||||
callbacks:{
|
||||
onScrollStart:function(){}, /*user custom callback function on scroll start event*/
|
||||
onScroll:function(){}, /*user custom callback function on scroll event*/
|
||||
onTotalScroll:function(){}, /*user custom callback function on scroll end reached event*/
|
||||
onTotalScrollBack:function(){}, /*user custom callback function on scroll begin reached event*/
|
||||
onTotalScrollOffset:0, /*scroll end reached offset: integer (pixels)*/
|
||||
onTotalScrollBackOffset:0, /*scroll begin reached offset: integer (pixels)*/
|
||||
whileScrolling:function(){} /*user custom callback function on scrolling event*/
|
||||
},
|
||||
theme:"light" /*"light", "dark", "light-2", "dark-2", "light-thick", "dark-thick", "light-thin", "dark-thin"*/
|
||||
},
|
||||
options=$.extend(true,defaults,options);
|
||||
return this.each(function(){
|
||||
var $this=$(this);
|
||||
/*set element width/height, create markup for custom scrollbars, add classes*/
|
||||
if(options.set_width){
|
||||
$this.css("width",options.set_width);
|
||||
}
|
||||
if(options.set_height){
|
||||
$this.css("height",options.set_height);
|
||||
}
|
||||
if(!$(document).data("mCustomScrollbar-index")){
|
||||
$(document).data("mCustomScrollbar-index","1");
|
||||
}else{
|
||||
var mCustomScrollbarIndex=parseInt($(document).data("mCustomScrollbar-index"));
|
||||
$(document).data("mCustomScrollbar-index",mCustomScrollbarIndex+1);
|
||||
}
|
||||
$this.wrapInner("<div class='mCustomScrollBox"+" mCS-"+options.theme+"' id='mCSB_"+$(document).data("mCustomScrollbar-index")+"' style='position:relative; height:100%; overflow:hidden; max-width:100%;' />").addClass("mCustomScrollbar _mCS_"+$(document).data("mCustomScrollbar-index"));
|
||||
var mCustomScrollBox=$this.children(".mCustomScrollBox");
|
||||
if(options.horizontalScroll){
|
||||
mCustomScrollBox.addClass("mCSB_horizontal").wrapInner("<div class='mCSB_h_wrapper' style='position:relative; left:0; width:999999px;' />");
|
||||
var mCSB_h_wrapper=mCustomScrollBox.children(".mCSB_h_wrapper");
|
||||
mCSB_h_wrapper.wrapInner("<div class='mCSB_container' style='position:absolute; left:0;' />").children(".mCSB_container").css({"width":mCSB_h_wrapper.children().outerWidth(),"position":"relative"}).unwrap();
|
||||
}else{
|
||||
mCustomScrollBox.wrapInner("<div class='mCSB_container' style='position:relative; top:0;' />");
|
||||
}
|
||||
var mCSB_container=mCustomScrollBox.children(".mCSB_container");
|
||||
if($.support.touch){
|
||||
mCSB_container.addClass("mCS_touch");
|
||||
}
|
||||
mCSB_container.after("<div class='mCSB_scrollTools' style='position:absolute;'><div class='mCSB_draggerContainer'><div class='mCSB_dragger' style='position:absolute;' oncontextmenu='return false;'><div class='mCSB_dragger_bar' style='position:relative;'></div></div><div class='mCSB_draggerRail'></div></div></div>");
|
||||
var mCSB_scrollTools=mCustomScrollBox.children(".mCSB_scrollTools"),
|
||||
mCSB_draggerContainer=mCSB_scrollTools.children(".mCSB_draggerContainer"),
|
||||
mCSB_dragger=mCSB_draggerContainer.children(".mCSB_dragger");
|
||||
if(options.horizontalScroll){
|
||||
mCSB_dragger.data("minDraggerWidth",mCSB_dragger.width());
|
||||
}else{
|
||||
mCSB_dragger.data("minDraggerHeight",mCSB_dragger.height());
|
||||
}
|
||||
if(options.scrollButtons.enable){
|
||||
if(options.horizontalScroll){
|
||||
mCSB_scrollTools.prepend("<a class='mCSB_buttonLeft' oncontextmenu='return false;'></a>").append("<a class='mCSB_buttonRight' oncontextmenu='return false;'></a>");
|
||||
}else{
|
||||
mCSB_scrollTools.prepend("<a class='mCSB_buttonUp' oncontextmenu='return false;'></a>").append("<a class='mCSB_buttonDown' oncontextmenu='return false;'></a>");
|
||||
}
|
||||
}
|
||||
/*mCustomScrollBox scrollTop and scrollLeft is always 0 to prevent browser focus scrolling*/
|
||||
mCustomScrollBox.bind("scroll",function(){
|
||||
if(!$this.is(".mCS_disabled")){ /*native focus scrolling for disabled scrollbars*/
|
||||
mCustomScrollBox.scrollTop(0).scrollLeft(0);
|
||||
}
|
||||
});
|
||||
/*store options, global vars/states, intervals*/
|
||||
$this.data({
|
||||
/*init state*/
|
||||
"mCS_Init":true,
|
||||
/*instance index*/
|
||||
"mCustomScrollbarIndex":$(document).data("mCustomScrollbar-index"),
|
||||
/*option parameters*/
|
||||
"horizontalScroll":options.horizontalScroll,
|
||||
"scrollInertia":options.scrollInertia,
|
||||
"scrollEasing":"mcsEaseOut",
|
||||
"mouseWheel":options.mouseWheel,
|
||||
"mouseWheelPixels":options.mouseWheelPixels,
|
||||
"autoDraggerLength":options.autoDraggerLength,
|
||||
"autoHideScrollbar":options.autoHideScrollbar,
|
||||
"alwaysShowScrollbar":options.alwaysShowScrollbar,
|
||||
"snapAmount":options.snapAmount,
|
||||
"snapOffset":options.snapOffset,
|
||||
"scrollButtons_enable":options.scrollButtons.enable,
|
||||
"scrollButtons_scrollType":options.scrollButtons.scrollType,
|
||||
"scrollButtons_scrollSpeed":options.scrollButtons.scrollSpeed,
|
||||
"scrollButtons_scrollAmount":options.scrollButtons.scrollAmount,
|
||||
"autoExpandHorizontalScroll":options.advanced.autoExpandHorizontalScroll,
|
||||
"autoScrollOnFocus":options.advanced.autoScrollOnFocus,
|
||||
"normalizeMouseWheelDelta":options.advanced.normalizeMouseWheelDelta,
|
||||
"contentTouchScroll":options.contentTouchScroll,
|
||||
"onScrollStart_Callback":options.callbacks.onScrollStart,
|
||||
"onScroll_Callback":options.callbacks.onScroll,
|
||||
"onTotalScroll_Callback":options.callbacks.onTotalScroll,
|
||||
"onTotalScrollBack_Callback":options.callbacks.onTotalScrollBack,
|
||||
"onTotalScroll_Offset":options.callbacks.onTotalScrollOffset,
|
||||
"onTotalScrollBack_Offset":options.callbacks.onTotalScrollBackOffset,
|
||||
"whileScrolling_Callback":options.callbacks.whileScrolling,
|
||||
/*events binding state*/
|
||||
"bindEvent_scrollbar_drag":false,
|
||||
"bindEvent_content_touch":false,
|
||||
"bindEvent_scrollbar_click":false,
|
||||
"bindEvent_mousewheel":false,
|
||||
"bindEvent_buttonsContinuous_y":false,
|
||||
"bindEvent_buttonsContinuous_x":false,
|
||||
"bindEvent_buttonsPixels_y":false,
|
||||
"bindEvent_buttonsPixels_x":false,
|
||||
"bindEvent_focusin":false,
|
||||
"bindEvent_autoHideScrollbar":false,
|
||||
/*buttons intervals*/
|
||||
"mCSB_buttonScrollRight":false,
|
||||
"mCSB_buttonScrollLeft":false,
|
||||
"mCSB_buttonScrollDown":false,
|
||||
"mCSB_buttonScrollUp":false
|
||||
});
|
||||
/*max-width/max-height*/
|
||||
if(options.horizontalScroll){
|
||||
if($this.css("max-width")!=="none"){
|
||||
if(!options.advanced.updateOnContentResize){ /*needs updateOnContentResize*/
|
||||
options.advanced.updateOnContentResize=true;
|
||||
}
|
||||
}
|
||||
}else{
|
||||
if($this.css("max-height")!=="none"){
|
||||
var percentage=false,maxHeight=parseInt($this.css("max-height"));
|
||||
if($this.css("max-height").indexOf("%")>=0){
|
||||
percentage=maxHeight,
|
||||
maxHeight=$this.parent().height()*percentage/100;
|
||||
}
|
||||
$this.css("overflow","hidden");
|
||||
mCustomScrollBox.css("max-height",maxHeight);
|
||||
}
|
||||
}
|
||||
$this.mCustomScrollbar("update");
|
||||
/*window resize fn (for layouts based on percentages)*/
|
||||
if(options.advanced.updateOnBrowserResize){
|
||||
var mCSB_resizeTimeout,currWinWidth=$(window).width(),currWinHeight=$(window).height();
|
||||
$(window).bind("resize."+$this.data("mCustomScrollbarIndex"),function(){
|
||||
if(mCSB_resizeTimeout){
|
||||
clearTimeout(mCSB_resizeTimeout);
|
||||
}
|
||||
mCSB_resizeTimeout=setTimeout(function(){
|
||||
if(!$this.is(".mCS_disabled") && !$this.is(".mCS_destroyed")){
|
||||
var winWidth=$(window).width(),winHeight=$(window).height();
|
||||
if(currWinWidth!==winWidth || currWinHeight!==winHeight){ /*ie8 fix*/
|
||||
if($this.css("max-height")!=="none" && percentage){
|
||||
mCustomScrollBox.css("max-height",$this.parent().height()*percentage/100);
|
||||
}
|
||||
$this.mCustomScrollbar("update");
|
||||
currWinWidth=winWidth; currWinHeight=winHeight;
|
||||
}
|
||||
}
|
||||
},150);
|
||||
});
|
||||
}
|
||||
/*content resize fn (for dynamically generated content)*/
|
||||
if(options.advanced.updateOnContentResize){
|
||||
var mCSB_onContentResize;
|
||||
if(options.horizontalScroll){
|
||||
var mCSB_containerOldSize=mCSB_container.outerWidth();
|
||||
}else{
|
||||
var mCSB_containerOldSize=mCSB_container.outerHeight();
|
||||
}
|
||||
mCSB_onContentResize=setInterval(function(){
|
||||
if(options.horizontalScroll){
|
||||
if(options.advanced.autoExpandHorizontalScroll){
|
||||
mCSB_container.css({"position":"absolute","width":"auto"}).wrap("<div class='mCSB_h_wrapper' style='position:relative; left:0; width:999999px;' />").css({"width":mCSB_container.outerWidth(),"position":"relative"}).unwrap();
|
||||
}
|
||||
var mCSB_containerNewSize=mCSB_container.outerWidth();
|
||||
}else{
|
||||
var mCSB_containerNewSize=mCSB_container.outerHeight();
|
||||
}
|
||||
if(mCSB_containerNewSize!=mCSB_containerOldSize){
|
||||
$this.mCustomScrollbar("update");
|
||||
mCSB_containerOldSize=mCSB_containerNewSize;
|
||||
}
|
||||
},300);
|
||||
}
|
||||
});
|
||||
},
|
||||
update:function(){
|
||||
var $this=$(this),
|
||||
mCustomScrollBox=$this.children(".mCustomScrollBox"),
|
||||
mCSB_container=mCustomScrollBox.children(".mCSB_container");
|
||||
mCSB_container.removeClass("mCS_no_scrollbar");
|
||||
$this.removeClass("mCS_disabled mCS_destroyed");
|
||||
mCustomScrollBox.scrollTop(0).scrollLeft(0); /*reset scrollTop/scrollLeft to prevent browser focus scrolling*/
|
||||
var mCSB_scrollTools=mCustomScrollBox.children(".mCSB_scrollTools"),
|
||||
mCSB_draggerContainer=mCSB_scrollTools.children(".mCSB_draggerContainer"),
|
||||
mCSB_dragger=mCSB_draggerContainer.children(".mCSB_dragger");
|
||||
if($this.data("horizontalScroll")){
|
||||
var mCSB_buttonLeft=mCSB_scrollTools.children(".mCSB_buttonLeft"),
|
||||
mCSB_buttonRight=mCSB_scrollTools.children(".mCSB_buttonRight"),
|
||||
mCustomScrollBoxW=mCustomScrollBox.width();
|
||||
if($this.data("autoExpandHorizontalScroll")){
|
||||
mCSB_container.css({"position":"absolute","width":"auto"}).wrap("<div class='mCSB_h_wrapper' style='position:relative; left:0; width:999999px;' />").css({"width":mCSB_container.outerWidth(),"position":"relative"}).unwrap();
|
||||
}
|
||||
var mCSB_containerW=mCSB_container.outerWidth();
|
||||
}else{
|
||||
var mCSB_buttonUp=mCSB_scrollTools.children(".mCSB_buttonUp"),
|
||||
mCSB_buttonDown=mCSB_scrollTools.children(".mCSB_buttonDown"),
|
||||
mCustomScrollBoxH=mCustomScrollBox.height(),
|
||||
mCSB_containerH=mCSB_container.outerHeight();
|
||||
}
|
||||
if(mCSB_containerH>mCustomScrollBoxH && !$this.data("horizontalScroll")){ /*content needs vertical scrolling*/
|
||||
mCSB_scrollTools.css("display","block");
|
||||
var mCSB_draggerContainerH=mCSB_draggerContainer.height();
|
||||
/*auto adjust scrollbar dragger length analogous to content*/
|
||||
if($this.data("autoDraggerLength")){
|
||||
var draggerH=Math.round(mCustomScrollBoxH/mCSB_containerH*mCSB_draggerContainerH),
|
||||
minDraggerH=mCSB_dragger.data("minDraggerHeight");
|
||||
if(draggerH<=minDraggerH){ /*min dragger height*/
|
||||
mCSB_dragger.css({"height":minDraggerH});
|
||||
}else if(draggerH>=mCSB_draggerContainerH-10){ /*max dragger height*/
|
||||
var mCSB_draggerContainerMaxH=mCSB_draggerContainerH-10;
|
||||
mCSB_dragger.css({"height":mCSB_draggerContainerMaxH});
|
||||
}else{
|
||||
mCSB_dragger.css({"height":draggerH});
|
||||
}
|
||||
mCSB_dragger.children(".mCSB_dragger_bar").css({"line-height":mCSB_dragger.height()+"px"});
|
||||
}
|
||||
var mCSB_draggerH=mCSB_dragger.height(),
|
||||
/*calculate and store scroll amount, add scrolling*/
|
||||
scrollAmount=(mCSB_containerH-mCustomScrollBoxH)/(mCSB_draggerContainerH-mCSB_draggerH);
|
||||
$this.data("scrollAmount",scrollAmount).mCustomScrollbar("scrolling",mCustomScrollBox,mCSB_container,mCSB_draggerContainer,mCSB_dragger,mCSB_buttonUp,mCSB_buttonDown,mCSB_buttonLeft,mCSB_buttonRight);
|
||||
/*scroll*/
|
||||
var mCSB_containerP=Math.abs(mCSB_container.position().top);
|
||||
$this.mCustomScrollbar("scrollTo",mCSB_containerP,{scrollInertia:0,trigger:"internal"});
|
||||
}else if(mCSB_containerW>mCustomScrollBoxW && $this.data("horizontalScroll")){ /*content needs horizontal scrolling*/
|
||||
mCSB_scrollTools.css("display","block");
|
||||
var mCSB_draggerContainerW=mCSB_draggerContainer.width();
|
||||
/*auto adjust scrollbar dragger length analogous to content*/
|
||||
if($this.data("autoDraggerLength")){
|
||||
var draggerW=Math.round(mCustomScrollBoxW/mCSB_containerW*mCSB_draggerContainerW),
|
||||
minDraggerW=mCSB_dragger.data("minDraggerWidth");
|
||||
if(draggerW<=minDraggerW){ /*min dragger height*/
|
||||
mCSB_dragger.css({"width":minDraggerW});
|
||||
}else if(draggerW>=mCSB_draggerContainerW-10){ /*max dragger height*/
|
||||
var mCSB_draggerContainerMaxW=mCSB_draggerContainerW-10;
|
||||
mCSB_dragger.css({"width":mCSB_draggerContainerMaxW});
|
||||
}else{
|
||||
mCSB_dragger.css({"width":draggerW});
|
||||
}
|
||||
}
|
||||
var mCSB_draggerW=mCSB_dragger.width(),
|
||||
/*calculate and store scroll amount, add scrolling*/
|
||||
scrollAmount=(mCSB_containerW-mCustomScrollBoxW)/(mCSB_draggerContainerW-mCSB_draggerW);
|
||||
$this.data("scrollAmount",scrollAmount).mCustomScrollbar("scrolling",mCustomScrollBox,mCSB_container,mCSB_draggerContainer,mCSB_dragger,mCSB_buttonUp,mCSB_buttonDown,mCSB_buttonLeft,mCSB_buttonRight);
|
||||
/*scroll*/
|
||||
var mCSB_containerP=Math.abs(mCSB_container.position().left);
|
||||
$this.mCustomScrollbar("scrollTo",mCSB_containerP,{scrollInertia:0,trigger:"internal"});
|
||||
}else{ /*content does not need scrolling*/
|
||||
/*unbind events, reset content position, hide scrollbars, remove classes*/
|
||||
mCustomScrollBox.unbind("mousewheel focusin");
|
||||
if($this.data("horizontalScroll")){
|
||||
mCSB_dragger.add(mCSB_container).css("left",0);
|
||||
}else{
|
||||
mCSB_dragger.add(mCSB_container).css("top",0);
|
||||
}
|
||||
if ($this.data("alwaysShowScrollbar")) {
|
||||
if(!$this.data("horizontalScroll")){ /*vertical scrolling*/
|
||||
mCSB_dragger.css({"height":mCSB_draggerContainer.height()});
|
||||
}else if($this.data("horizontalScroll")){ /*horizontal scrolling*/
|
||||
mCSB_dragger.css({"width":mCSB_draggerContainer.width()});
|
||||
}
|
||||
} else {
|
||||
mCSB_scrollTools.css("display","none");
|
||||
mCSB_container.addClass("mCS_no_scrollbar");
|
||||
}
|
||||
$this.data({"bindEvent_mousewheel":false,"bindEvent_focusin":false});
|
||||
}
|
||||
},
|
||||
scrolling:function(mCustomScrollBox,mCSB_container,mCSB_draggerContainer,mCSB_dragger,mCSB_buttonUp,mCSB_buttonDown,mCSB_buttonLeft,mCSB_buttonRight){
|
||||
var $this=$(this);
|
||||
/*scrollbar drag scrolling*/
|
||||
if(!$this.data("bindEvent_scrollbar_drag")){
|
||||
var mCSB_draggerDragY,mCSB_draggerDragX,
|
||||
mCSB_dragger_downEvent,mCSB_dragger_moveEvent,mCSB_dragger_upEvent;
|
||||
if($.support.pointer){ /*pointer*/
|
||||
mCSB_dragger_downEvent="pointerdown";
|
||||
mCSB_dragger_moveEvent="pointermove";
|
||||
mCSB_dragger_upEvent="pointerup";
|
||||
}else if($.support.msPointer){ /*MSPointer*/
|
||||
mCSB_dragger_downEvent="MSPointerDown";
|
||||
mCSB_dragger_moveEvent="MSPointerMove";
|
||||
mCSB_dragger_upEvent="MSPointerUp";
|
||||
}
|
||||
if($.support.pointer || $.support.msPointer){ /*pointer, MSPointer*/
|
||||
mCSB_dragger.bind(mCSB_dragger_downEvent,function(e){
|
||||
e.preventDefault();
|
||||
$this.data({"on_drag":true}); mCSB_dragger.addClass("mCSB_dragger_onDrag");
|
||||
var elem=$(this),
|
||||
elemOffset=elem.offset(),
|
||||
x=e.originalEvent.pageX-elemOffset.left,
|
||||
y=e.originalEvent.pageY-elemOffset.top;
|
||||
if(x<elem.width() && x>0 && y<elem.height() && y>0){
|
||||
mCSB_draggerDragY=y;
|
||||
mCSB_draggerDragX=x;
|
||||
}
|
||||
});
|
||||
$(document).bind(mCSB_dragger_moveEvent+"."+$this.data("mCustomScrollbarIndex"),function(e){
|
||||
e.preventDefault();
|
||||
if($this.data("on_drag")){
|
||||
var elem=mCSB_dragger,
|
||||
elemOffset=elem.offset(),
|
||||
x=e.originalEvent.pageX-elemOffset.left,
|
||||
y=e.originalEvent.pageY-elemOffset.top;
|
||||
scrollbarDrag(mCSB_draggerDragY,mCSB_draggerDragX,y,x);
|
||||
}
|
||||
}).bind(mCSB_dragger_upEvent+"."+$this.data("mCustomScrollbarIndex"),function(e){
|
||||
$this.data({"on_drag":false}); mCSB_dragger.removeClass("mCSB_dragger_onDrag");
|
||||
});
|
||||
}else{ /*mouse/touch*/
|
||||
mCSB_dragger.bind("mousedown touchstart",function(e){
|
||||
e.preventDefault(); e.stopImmediatePropagation();
|
||||
var elem=$(this),elemOffset=elem.offset(),x,y;
|
||||
if(e.type==="touchstart"){
|
||||
var touch=e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
|
||||
x=touch.pageX-elemOffset.left; y=touch.pageY-elemOffset.top;
|
||||
}else{
|
||||
$this.data({"on_drag":true}); mCSB_dragger.addClass("mCSB_dragger_onDrag");
|
||||
x=e.pageX-elemOffset.left; y=e.pageY-elemOffset.top;
|
||||
}
|
||||
if(x<elem.width() && x>0 && y<elem.height() && y>0){
|
||||
mCSB_draggerDragY=y; mCSB_draggerDragX=x;
|
||||
}
|
||||
}).bind("touchmove",function(e){
|
||||
e.preventDefault(); e.stopImmediatePropagation();
|
||||
var touch=e.originalEvent.touches[0] || e.originalEvent.changedTouches[0],
|
||||
elem=$(this),
|
||||
elemOffset=elem.offset(),
|
||||
x=touch.pageX-elemOffset.left,
|
||||
y=touch.pageY-elemOffset.top;
|
||||
scrollbarDrag(mCSB_draggerDragY,mCSB_draggerDragX,y,x);
|
||||
});
|
||||
$(document).bind("mousemove."+$this.data("mCustomScrollbarIndex"),function(e){
|
||||
if($this.data("on_drag")){
|
||||
var elem=mCSB_dragger,
|
||||
elemOffset=elem.offset(),
|
||||
x=e.pageX-elemOffset.left,
|
||||
y=e.pageY-elemOffset.top;
|
||||
scrollbarDrag(mCSB_draggerDragY,mCSB_draggerDragX,y,x);
|
||||
}
|
||||
}).bind("mouseup."+$this.data("mCustomScrollbarIndex"),function(e){
|
||||
$this.data({"on_drag":false}); mCSB_dragger.removeClass("mCSB_dragger_onDrag");
|
||||
});
|
||||
}
|
||||
$this.data({"bindEvent_scrollbar_drag":true});
|
||||
}
|
||||
function scrollbarDrag(mCSB_draggerDragY,mCSB_draggerDragX,y,x){
|
||||
if($this.data("horizontalScroll")){
|
||||
$this.mCustomScrollbar("scrollTo",(mCSB_dragger.position().left-(mCSB_draggerDragX))+x,{moveDragger:true,trigger:"internal"});
|
||||
}else{
|
||||
$this.mCustomScrollbar("scrollTo",(mCSB_dragger.position().top-(mCSB_draggerDragY))+y,{moveDragger:true,trigger:"internal"});
|
||||
}
|
||||
}
|
||||
/*content touch-drag*/
|
||||
if($.support.touch && $this.data("contentTouchScroll")){
|
||||
if(!$this.data("bindEvent_content_touch")){
|
||||
var touch,
|
||||
elem,elemOffset,y,x,mCSB_containerTouchY,mCSB_containerTouchX;
|
||||
mCSB_container.bind("touchstart",function(e){
|
||||
e.stopImmediatePropagation();
|
||||
touch=e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
|
||||
elem=$(this);
|
||||
elemOffset=elem.offset();
|
||||
x=touch.pageX-elemOffset.left;
|
||||
y=touch.pageY-elemOffset.top;
|
||||
mCSB_containerTouchY=y;
|
||||
mCSB_containerTouchX=x;
|
||||
});
|
||||
mCSB_container.bind("touchmove",function(e){
|
||||
e.preventDefault(); e.stopImmediatePropagation();
|
||||
touch=e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
|
||||
elem=$(this).parent();
|
||||
elemOffset=elem.offset();
|
||||
x=touch.pageX-elemOffset.left;
|
||||
y=touch.pageY-elemOffset.top;
|
||||
if($this.data("horizontalScroll")){
|
||||
$this.mCustomScrollbar("scrollTo",mCSB_containerTouchX-x,{trigger:"internal"});
|
||||
}else{
|
||||
$this.mCustomScrollbar("scrollTo",mCSB_containerTouchY-y,{trigger:"internal"});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
/*dragger rail click scrolling*/
|
||||
if(!$this.data("bindEvent_scrollbar_click")){
|
||||
mCSB_draggerContainer.bind("click",function(e){
|
||||
var scrollToPos=(e.pageY-mCSB_draggerContainer.offset().top)*$this.data("scrollAmount"),target=$(e.target);
|
||||
if($this.data("horizontalScroll")){
|
||||
scrollToPos=(e.pageX-mCSB_draggerContainer.offset().left)*$this.data("scrollAmount");
|
||||
}
|
||||
if(target.hasClass("mCSB_draggerContainer") || target.hasClass("mCSB_draggerRail")){
|
||||
$this.mCustomScrollbar("scrollTo",scrollToPos,{trigger:"internal",scrollEasing:"draggerRailEase"});
|
||||
}
|
||||
});
|
||||
$this.data({"bindEvent_scrollbar_click":true});
|
||||
}
|
||||
/*mousewheel scrolling*/
|
||||
if($this.data("mouseWheel")){
|
||||
if(!$this.data("bindEvent_mousewheel")){
|
||||
mCustomScrollBox.bind("mousewheel",function(e,delta){
|
||||
var scrollTo,mouseWheelPixels=$this.data("mouseWheelPixels"),absPos=Math.abs(mCSB_container.position().top),
|
||||
draggerPos=mCSB_dragger.position().top,limit=mCSB_draggerContainer.height()-mCSB_dragger.height();
|
||||
if($this.data("normalizeMouseWheelDelta")){
|
||||
if(delta<0){delta=-1;}else{delta=1;}
|
||||
}
|
||||
if(mouseWheelPixels==="auto"){
|
||||
mouseWheelPixels=100+Math.round($this.data("scrollAmount")/2);
|
||||
}
|
||||
if($this.data("horizontalScroll")){
|
||||
draggerPos=mCSB_dragger.position().left;
|
||||
limit=mCSB_draggerContainer.width()-mCSB_dragger.width();
|
||||
absPos=Math.abs(mCSB_container.position().left);
|
||||
}
|
||||
if((delta>0 && draggerPos!==0) || (delta<0 && draggerPos!==limit)){e.preventDefault(); e.stopImmediatePropagation();}
|
||||
scrollTo=absPos-(delta*mouseWheelPixels);
|
||||
$this.mCustomScrollbar("scrollTo",scrollTo,{trigger:"internal"});
|
||||
});
|
||||
$this.data({"bindEvent_mousewheel":true});
|
||||
}
|
||||
}
|
||||
/*buttons scrolling*/
|
||||
if($this.data("scrollButtons_enable")){
|
||||
if($this.data("scrollButtons_scrollType")==="pixels"){ /*scroll by pixels*/
|
||||
if($this.data("horizontalScroll")){
|
||||
mCSB_buttonRight.add(mCSB_buttonLeft).unbind("mousedown touchstart MSPointerDown pointerdown mouseup MSPointerUp pointerup mouseout MSPointerOut pointerout touchend",mCSB_buttonRight_stop,mCSB_buttonLeft_stop);
|
||||
$this.data({"bindEvent_buttonsContinuous_x":false});
|
||||
if(!$this.data("bindEvent_buttonsPixels_x")){
|
||||
/*scroll right*/
|
||||
mCSB_buttonRight.bind("click",function(e){
|
||||
e.preventDefault();
|
||||
PixelsScrollTo(Math.abs(mCSB_container.position().left)+$this.data("scrollButtons_scrollAmount"));
|
||||
});
|
||||
/*scroll left*/
|
||||
mCSB_buttonLeft.bind("click",function(e){
|
||||
e.preventDefault();
|
||||
PixelsScrollTo(Math.abs(mCSB_container.position().left)-$this.data("scrollButtons_scrollAmount"));
|
||||
});
|
||||
$this.data({"bindEvent_buttonsPixels_x":true});
|
||||
}
|
||||
}else{
|
||||
mCSB_buttonDown.add(mCSB_buttonUp).unbind("mousedown touchstart MSPointerDown pointerdown mouseup MSPointerUp pointerup mouseout MSPointerOut pointerout touchend",mCSB_buttonRight_stop,mCSB_buttonLeft_stop);
|
||||
$this.data({"bindEvent_buttonsContinuous_y":false});
|
||||
if(!$this.data("bindEvent_buttonsPixels_y")){
|
||||
/*scroll down*/
|
||||
mCSB_buttonDown.bind("click",function(e){
|
||||
e.preventDefault();
|
||||
PixelsScrollTo(Math.abs(mCSB_container.position().top)+$this.data("scrollButtons_scrollAmount"));
|
||||
});
|
||||
/*scroll up*/
|
||||
mCSB_buttonUp.bind("click",function(e){
|
||||
e.preventDefault();
|
||||
PixelsScrollTo(Math.abs(mCSB_container.position().top)-$this.data("scrollButtons_scrollAmount"));
|
||||
});
|
||||
$this.data({"bindEvent_buttonsPixels_y":true});
|
||||
}
|
||||
}
|
||||
function PixelsScrollTo(to){
|
||||
if(!mCSB_dragger.data("preventAction")){
|
||||
mCSB_dragger.data("preventAction",true);
|
||||
$this.mCustomScrollbar("scrollTo",to,{trigger:"internal"});
|
||||
}
|
||||
}
|
||||
}else{ /*continuous scrolling*/
|
||||
if($this.data("horizontalScroll")){
|
||||
mCSB_buttonRight.add(mCSB_buttonLeft).unbind("click");
|
||||
$this.data({"bindEvent_buttonsPixels_x":false});
|
||||
if(!$this.data("bindEvent_buttonsContinuous_x")){
|
||||
/*scroll right*/
|
||||
mCSB_buttonRight.bind("mousedown touchstart MSPointerDown pointerdown",function(e){
|
||||
e.preventDefault();
|
||||
var scrollButtonsSpeed=ScrollButtonsSpeed();
|
||||
$this.data({"mCSB_buttonScrollRight":setInterval(function(){
|
||||
$this.mCustomScrollbar("scrollTo",Math.abs(mCSB_container.position().left)+scrollButtonsSpeed,{trigger:"internal",scrollEasing:"easeOutCirc"});
|
||||
},17)});
|
||||
});
|
||||
var mCSB_buttonRight_stop=function(e){
|
||||
e.preventDefault(); clearInterval($this.data("mCSB_buttonScrollRight"));
|
||||
}
|
||||
mCSB_buttonRight.bind("mouseup touchend MSPointerUp pointerup mouseout MSPointerOut pointerout",mCSB_buttonRight_stop);
|
||||
/*scroll left*/
|
||||
mCSB_buttonLeft.bind("mousedown touchstart MSPointerDown pointerdown",function(e){
|
||||
e.preventDefault();
|
||||
var scrollButtonsSpeed=ScrollButtonsSpeed();
|
||||
$this.data({"mCSB_buttonScrollLeft":setInterval(function(){
|
||||
$this.mCustomScrollbar("scrollTo",Math.abs(mCSB_container.position().left)-scrollButtonsSpeed,{trigger:"internal",scrollEasing:"easeOutCirc"});
|
||||
},17)});
|
||||
});
|
||||
var mCSB_buttonLeft_stop=function(e){
|
||||
e.preventDefault(); clearInterval($this.data("mCSB_buttonScrollLeft"));
|
||||
}
|
||||
mCSB_buttonLeft.bind("mouseup touchend MSPointerUp pointerup mouseout MSPointerOut pointerout",mCSB_buttonLeft_stop);
|
||||
$this.data({"bindEvent_buttonsContinuous_x":true});
|
||||
}
|
||||
}else{
|
||||
mCSB_buttonDown.add(mCSB_buttonUp).unbind("click");
|
||||
$this.data({"bindEvent_buttonsPixels_y":false});
|
||||
if(!$this.data("bindEvent_buttonsContinuous_y")){
|
||||
/*scroll down*/
|
||||
mCSB_buttonDown.bind("mousedown touchstart MSPointerDown pointerdown",function(e){
|
||||
e.preventDefault();
|
||||
var scrollButtonsSpeed=ScrollButtonsSpeed();
|
||||
$this.data({"mCSB_buttonScrollDown":setInterval(function(){
|
||||
$this.mCustomScrollbar("scrollTo",Math.abs(mCSB_container.position().top)+scrollButtonsSpeed,{trigger:"internal",scrollEasing:"easeOutCirc"});
|
||||
},17)});
|
||||
});
|
||||
var mCSB_buttonDown_stop=function(e){
|
||||
e.preventDefault(); clearInterval($this.data("mCSB_buttonScrollDown"));
|
||||
}
|
||||
mCSB_buttonDown.bind("mouseup touchend MSPointerUp pointerup mouseout MSPointerOut pointerout",mCSB_buttonDown_stop);
|
||||
/*scroll up*/
|
||||
mCSB_buttonUp.bind("mousedown touchstart MSPointerDown pointerdown",function(e){
|
||||
e.preventDefault();
|
||||
var scrollButtonsSpeed=ScrollButtonsSpeed();
|
||||
$this.data({"mCSB_buttonScrollUp":setInterval(function(){
|
||||
$this.mCustomScrollbar("scrollTo",Math.abs(mCSB_container.position().top)-scrollButtonsSpeed,{trigger:"internal",scrollEasing:"easeOutCirc"});
|
||||
},17)});
|
||||
});
|
||||
var mCSB_buttonUp_stop=function(e){
|
||||
e.preventDefault(); clearInterval($this.data("mCSB_buttonScrollUp"));
|
||||
}
|
||||
mCSB_buttonUp.bind("mouseup touchend MSPointerUp pointerup mouseout MSPointerOut pointerout",mCSB_buttonUp_stop);
|
||||
$this.data({"bindEvent_buttonsContinuous_y":true});
|
||||
}
|
||||
}
|
||||
function ScrollButtonsSpeed(){
|
||||
var speed=$this.data("scrollButtons_scrollSpeed");
|
||||
if($this.data("scrollButtons_scrollSpeed")==="auto"){
|
||||
speed=Math.round(($this.data("scrollInertia")+100)/40);
|
||||
}
|
||||
return speed;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*scrolling on element focus (e.g. via TAB key)*/
|
||||
if($this.data("autoScrollOnFocus")){
|
||||
if(!$this.data("bindEvent_focusin")){
|
||||
mCustomScrollBox.bind("focusin",function(){
|
||||
mCustomScrollBox.scrollTop(0).scrollLeft(0);
|
||||
var focusedElem=$(document.activeElement);
|
||||
if(focusedElem.is("input,textarea,select,button,a[tabindex],area,object")){
|
||||
var mCSB_containerPos=mCSB_container.position().top,
|
||||
focusedElemPos=focusedElem.position().top,
|
||||
visibleLimit=mCustomScrollBox.height()-focusedElem.outerHeight();
|
||||
if($this.data("horizontalScroll")){
|
||||
mCSB_containerPos=mCSB_container.position().left;
|
||||
focusedElemPos=focusedElem.position().left;
|
||||
visibleLimit=mCustomScrollBox.width()-focusedElem.outerWidth();
|
||||
}
|
||||
if(mCSB_containerPos+focusedElemPos<0 || mCSB_containerPos+focusedElemPos>visibleLimit){
|
||||
$this.mCustomScrollbar("scrollTo",focusedElemPos,{trigger:"internal"});
|
||||
}
|
||||
}
|
||||
});
|
||||
$this.data({"bindEvent_focusin":true});
|
||||
}
|
||||
}
|
||||
/*auto-hide scrollbar*/
|
||||
if($this.data("autoHideScrollbar") && !$this.data("alwaysShowScrollbar")){
|
||||
if(!$this.data("bindEvent_autoHideScrollbar")){
|
||||
mCustomScrollBox.bind("mouseenter",function(e){
|
||||
mCustomScrollBox.addClass("mCS-mouse-over");
|
||||
functions.showScrollbar.call(mCustomScrollBox.children(".mCSB_scrollTools"));
|
||||
}).bind("mouseleave touchend",function(e){
|
||||
mCustomScrollBox.removeClass("mCS-mouse-over");
|
||||
if(e.type==="mouseleave"){functions.hideScrollbar.call(mCustomScrollBox.children(".mCSB_scrollTools"));}
|
||||
});
|
||||
$this.data({"bindEvent_autoHideScrollbar":true});
|
||||
}
|
||||
}
|
||||
},
|
||||
scrollTo:function(scrollTo,options){
|
||||
var $this=$(this),
|
||||
defaults={
|
||||
moveDragger:false,
|
||||
trigger:"external",
|
||||
callbacks:true,
|
||||
scrollInertia:$this.data("scrollInertia"),
|
||||
scrollEasing:$this.data("scrollEasing")
|
||||
},
|
||||
options=$.extend(defaults,options),
|
||||
draggerScrollTo,
|
||||
mCustomScrollBox=$this.children(".mCustomScrollBox"),
|
||||
mCSB_container=mCustomScrollBox.children(".mCSB_container"),
|
||||
mCSB_scrollTools=mCustomScrollBox.children(".mCSB_scrollTools"),
|
||||
mCSB_draggerContainer=mCSB_scrollTools.children(".mCSB_draggerContainer"),
|
||||
mCSB_dragger=mCSB_draggerContainer.children(".mCSB_dragger"),
|
||||
contentSpeed=draggerSpeed=options.scrollInertia,
|
||||
scrollBeginning,scrollBeginningOffset,totalScroll,totalScrollOffset;
|
||||
if(!mCSB_container.hasClass("mCS_no_scrollbar")){
|
||||
$this.data({"mCS_trigger":options.trigger});
|
||||
if($this.data("mCS_Init")){options.callbacks=false;}
|
||||
if(scrollTo || scrollTo===0){
|
||||
if(typeof(scrollTo)==="number"){ /*if integer, scroll by number of pixels*/
|
||||
if(options.moveDragger){ /*scroll dragger*/
|
||||
draggerScrollTo=scrollTo;
|
||||
if($this.data("horizontalScroll")){
|
||||
scrollTo=mCSB_dragger.position().left*$this.data("scrollAmount");
|
||||
}else{
|
||||
scrollTo=mCSB_dragger.position().top*$this.data("scrollAmount");
|
||||
}
|
||||
draggerSpeed=0;
|
||||
}else{ /*scroll content by default*/
|
||||
draggerScrollTo=scrollTo/$this.data("scrollAmount");
|
||||
}
|
||||
}else if(typeof(scrollTo)==="string"){ /*if string, scroll by element position*/
|
||||
var target;
|
||||
if(scrollTo==="top"){ /*scroll to top*/
|
||||
target=0;
|
||||
}else if(scrollTo==="bottom" && !$this.data("horizontalScroll")){ /*scroll to bottom*/
|
||||
target=mCSB_container.outerHeight()-mCustomScrollBox.height();
|
||||
}else if(scrollTo==="left"){ /*scroll to left*/
|
||||
target=0;
|
||||
}else if(scrollTo==="right" && $this.data("horizontalScroll")){ /*scroll to right*/
|
||||
target=mCSB_container.outerWidth()-mCustomScrollBox.width();
|
||||
}else if(scrollTo==="first"){ /*scroll to first element position*/
|
||||
target=$this.find(".mCSB_container").find(":first");
|
||||
}else if(scrollTo==="last"){ /*scroll to last element position*/
|
||||
target=$this.find(".mCSB_container").find(":last");
|
||||
}else{ /*scroll to element position*/
|
||||
target=$this.find(scrollTo);
|
||||
}
|
||||
if(target.length===1){ /*if such unique element exists, scroll to it*/
|
||||
if($this.data("horizontalScroll")){
|
||||
scrollTo=target.position().left;
|
||||
}else{
|
||||
scrollTo=target.position().top;
|
||||
}
|
||||
draggerScrollTo=scrollTo/$this.data("scrollAmount");
|
||||
}else{
|
||||
draggerScrollTo=scrollTo=target;
|
||||
}
|
||||
}
|
||||
/*scroll to*/
|
||||
if($this.data("horizontalScroll")){
|
||||
if($this.data("onTotalScrollBack_Offset")){ /*scroll beginning offset*/
|
||||
scrollBeginningOffset=-$this.data("onTotalScrollBack_Offset");
|
||||
}
|
||||
if($this.data("onTotalScroll_Offset")){ /*total scroll offset*/
|
||||
totalScrollOffset=mCustomScrollBox.width()-mCSB_container.outerWidth()+$this.data("onTotalScroll_Offset");
|
||||
}
|
||||
if(draggerScrollTo<0){ /*scroll start position*/
|
||||
draggerScrollTo=scrollTo=0; clearInterval($this.data("mCSB_buttonScrollLeft"));
|
||||
if(!scrollBeginningOffset){scrollBeginning=true;}
|
||||
}else if(draggerScrollTo>=mCSB_draggerContainer.width()-mCSB_dragger.width()){ /*scroll end position*/
|
||||
draggerScrollTo=mCSB_draggerContainer.width()-mCSB_dragger.width();
|
||||
scrollTo=mCustomScrollBox.width()-mCSB_container.outerWidth(); clearInterval($this.data("mCSB_buttonScrollRight"));
|
||||
if(!totalScrollOffset){totalScroll=true;}
|
||||
}else{scrollTo=-scrollTo;}
|
||||
var snapAmount = $this.data("snapAmount");
|
||||
if (snapAmount) {
|
||||
scrollTo = Math.round(scrollTo / snapAmount) * snapAmount - $this.data("snapOffset");
|
||||
}
|
||||
/*scrolling animation*/
|
||||
functions.mTweenAxis.call(this,mCSB_dragger[0],"left",Math.round(draggerScrollTo),draggerSpeed,options.scrollEasing);
|
||||
functions.mTweenAxis.call(this,mCSB_container[0],"left",Math.round(scrollTo),contentSpeed,options.scrollEasing,{
|
||||
onStart:function(){
|
||||
if(options.callbacks && !$this.data("mCS_tweenRunning")){callbacks("onScrollStart");}
|
||||
if($this.data("autoHideScrollbar") && !$this.data("alwaysShowScrollbar")){functions.showScrollbar.call(mCSB_scrollTools);}
|
||||
},
|
||||
onUpdate:function(){
|
||||
if(options.callbacks){callbacks("whileScrolling");}
|
||||
},
|
||||
onComplete:function(){
|
||||
if(options.callbacks){
|
||||
callbacks("onScroll");
|
||||
if(scrollBeginning || (scrollBeginningOffset && mCSB_container.position().left>=scrollBeginningOffset)){callbacks("onTotalScrollBack");}
|
||||
if(totalScroll || (totalScrollOffset && mCSB_container.position().left<=totalScrollOffset)){callbacks("onTotalScroll");}
|
||||
}
|
||||
mCSB_dragger.data("preventAction",false); $this.data("mCS_tweenRunning",false);
|
||||
if($this.data("autoHideScrollbar") && !$this.data("alwaysShowScrollbar")){if(!mCustomScrollBox.hasClass("mCS-mouse-over")){functions.hideScrollbar.call(mCSB_scrollTools);}}
|
||||
}
|
||||
});
|
||||
}else{
|
||||
if($this.data("onTotalScrollBack_Offset")){ /*scroll beginning offset*/
|
||||
scrollBeginningOffset=-$this.data("onTotalScrollBack_Offset");
|
||||
}
|
||||
if($this.data("onTotalScroll_Offset")){ /*total scroll offset*/
|
||||
totalScrollOffset=mCustomScrollBox.height()-mCSB_container.outerHeight()+$this.data("onTotalScroll_Offset");
|
||||
}
|
||||
if(draggerScrollTo<0){ /*scroll start position*/
|
||||
draggerScrollTo=scrollTo=0; clearInterval($this.data("mCSB_buttonScrollUp"));
|
||||
if(!scrollBeginningOffset){scrollBeginning=true;}
|
||||
}else if(draggerScrollTo>=mCSB_draggerContainer.height()-mCSB_dragger.height()){ /*scroll end position*/
|
||||
draggerScrollTo=mCSB_draggerContainer.height()-mCSB_dragger.height();
|
||||
scrollTo=mCustomScrollBox.height()-mCSB_container.outerHeight(); clearInterval($this.data("mCSB_buttonScrollDown"));
|
||||
if(!totalScrollOffset){totalScroll=true;}
|
||||
}else{scrollTo=-scrollTo;}
|
||||
var snapAmount = $this.data("snapAmount");
|
||||
if (snapAmount) {
|
||||
scrollTo = Math.round(scrollTo / snapAmount) * snapAmount - $this.data("snapOffset");
|
||||
}
|
||||
/*scrolling animation*/
|
||||
functions.mTweenAxis.call(this,mCSB_dragger[0],"top",Math.round(draggerScrollTo),draggerSpeed,options.scrollEasing);
|
||||
functions.mTweenAxis.call(this,mCSB_container[0],"top",Math.round(scrollTo),contentSpeed,options.scrollEasing,{
|
||||
onStart:function(){
|
||||
if(options.callbacks && !$this.data("mCS_tweenRunning")){callbacks("onScrollStart");}
|
||||
if($this.data("autoHideScrollbar") && !$this.data("alwaysShowScrollbar")){functions.showScrollbar.call(mCSB_scrollTools);}
|
||||
},
|
||||
onUpdate:function(){
|
||||
if(options.callbacks){callbacks("whileScrolling");}
|
||||
},
|
||||
onComplete:function(){
|
||||
if(options.callbacks){
|
||||
callbacks("onScroll");
|
||||
if(scrollBeginning || (scrollBeginningOffset && mCSB_container.position().top>=scrollBeginningOffset)){callbacks("onTotalScrollBack");}
|
||||
if(totalScroll || (totalScrollOffset && mCSB_container.position().top<=totalScrollOffset)){callbacks("onTotalScroll");}
|
||||
}
|
||||
mCSB_dragger.data("preventAction",false); $this.data("mCS_tweenRunning",false);
|
||||
if($this.data("autoHideScrollbar") && !$this.data("alwaysShowScrollbar")){if(!mCustomScrollBox.hasClass("mCS-mouse-over")){functions.hideScrollbar.call(mCSB_scrollTools);}}
|
||||
}
|
||||
});
|
||||
}
|
||||
if($this.data("mCS_Init")){$this.data({"mCS_Init":false});}
|
||||
}
|
||||
}
|
||||
/*callbacks*/
|
||||
function callbacks(cb){
|
||||
if ($this.data("mCustomScrollbarIndex")) {
|
||||
this.mcs = {
|
||||
top: mCSB_container.position().top, left: mCSB_container.position().left,
|
||||
draggerTop: mCSB_dragger.position().top, draggerLeft: mCSB_dragger.position().left,
|
||||
topPct: Math.round((100 * Math.abs(mCSB_container.position().top)) / Math.abs(mCSB_container.outerHeight() - mCustomScrollBox.height())),
|
||||
leftPct: Math.round((100 * Math.abs(mCSB_container.position().left)) / Math.abs(mCSB_container.outerWidth() - mCustomScrollBox.width()))
|
||||
};
|
||||
switch (cb) {
|
||||
/*start scrolling callback*/
|
||||
case "onScrollStart":
|
||||
$this.data("mCS_tweenRunning", true).data("onScrollStart_Callback").call($this, this.mcs);
|
||||
break;
|
||||
case "whileScrolling":
|
||||
$this.data("whileScrolling_Callback").call($this, this.mcs);
|
||||
break;
|
||||
case "onScroll":
|
||||
$this.data("onScroll_Callback").call($this, this.mcs);
|
||||
break;
|
||||
case "onTotalScrollBack":
|
||||
$this.data("onTotalScrollBack_Callback").call($this, this.mcs);
|
||||
break;
|
||||
case "onTotalScroll":
|
||||
$this.data("onTotalScroll_Callback").call($this, this.mcs);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
stop:function(){
|
||||
var $this=$(this),
|
||||
mCSB_container=$this.children().children(".mCSB_container"),
|
||||
mCSB_dragger=$this.children().children().children().children(".mCSB_dragger");
|
||||
functions.mTweenAxisStop.call(this,mCSB_container[0]);
|
||||
functions.mTweenAxisStop.call(this,mCSB_dragger[0]);
|
||||
},
|
||||
disable:function(resetScroll){
|
||||
var $this=$(this),
|
||||
mCustomScrollBox=$this.children(".mCustomScrollBox"),
|
||||
mCSB_container=mCustomScrollBox.children(".mCSB_container"),
|
||||
mCSB_scrollTools=mCustomScrollBox.children(".mCSB_scrollTools"),
|
||||
mCSB_dragger=mCSB_scrollTools.children().children(".mCSB_dragger");
|
||||
mCustomScrollBox.unbind("mousewheel focusin mouseenter mouseleave touchend");
|
||||
mCSB_container.unbind("touchstart touchmove")
|
||||
if(resetScroll){
|
||||
if($this.data("horizontalScroll")){
|
||||
mCSB_dragger.add(mCSB_container).css("left",0);
|
||||
}else{
|
||||
mCSB_dragger.add(mCSB_container).css("top",0);
|
||||
}
|
||||
}
|
||||
mCSB_scrollTools.css("display","none");
|
||||
mCSB_container.addClass("mCS_no_scrollbar");
|
||||
$this.data({"bindEvent_mousewheel":false,"bindEvent_focusin":false,"bindEvent_content_touch":false,"bindEvent_autoHideScrollbar":false}).addClass("mCS_disabled");
|
||||
},
|
||||
destroy:function(){
|
||||
var $this=$(this);
|
||||
$this.removeClass("mCustomScrollbar _mCS_"+$this.data("mCustomScrollbarIndex")).addClass("mCS_destroyed").children().children(".mCSB_container").unwrap().children().unwrap().siblings(".mCSB_scrollTools").remove();
|
||||
$(document).unbind("mousemove."+$this.data("mCustomScrollbarIndex")+" mouseup."+$this.data("mCustomScrollbarIndex")+" MSPointerMove."+$this.data("mCustomScrollbarIndex")+" MSPointerUp."+$this.data("mCustomScrollbarIndex"));
|
||||
$(window).unbind("resize."+$this.data("mCustomScrollbarIndex"));
|
||||
}
|
||||
},
|
||||
functions={
|
||||
/*hide/show scrollbar*/
|
||||
showScrollbar:function(){
|
||||
this.stop().animate({opacity:1},"fast");
|
||||
},
|
||||
hideScrollbar:function(){
|
||||
this.stop().animate({opacity:0},"fast");
|
||||
},
|
||||
/*js animation tween*/
|
||||
mTweenAxis:function(el,prop,to,duration,easing,callbacks){
|
||||
var callbacks=callbacks || {},
|
||||
onStart=callbacks.onStart || function(){},onUpdate=callbacks.onUpdate || function(){},onComplete=callbacks.onComplete || function(){};
|
||||
var startTime=_getTime(),_delay,progress=0,from=el.offsetTop,elStyle=el.style;
|
||||
if(prop==="left"){from=el.offsetLeft;}
|
||||
var diff=to-from;
|
||||
_cancelTween();
|
||||
_startTween();
|
||||
function _getTime(){
|
||||
if(window.performance && window.performance.now){
|
||||
return window.performance.now();
|
||||
}else{
|
||||
if(window.performance && window.performance.webkitNow){
|
||||
return window.performance.webkitNow();
|
||||
}else{
|
||||
if(Date.now){return Date.now();}else{return new Date().getTime();}
|
||||
}
|
||||
}
|
||||
}
|
||||
function _step(){
|
||||
if(!progress){onStart.call();}
|
||||
progress=_getTime()-startTime;
|
||||
_tween();
|
||||
if(progress>=el._time){
|
||||
el._time=(progress>el._time) ? progress+_delay-(progress- el._time) : progress+_delay-1;
|
||||
if(el._time<progress+1){el._time=progress+1;}
|
||||
}
|
||||
if(el._time<duration){el._id=_request(_step);}else{onComplete.call();}
|
||||
}
|
||||
function _tween(){
|
||||
if(duration>0){
|
||||
el.currVal=_ease(el._time,from,diff,duration,easing);
|
||||
elStyle[prop]=Math.round(el.currVal)+"px";
|
||||
}else{
|
||||
elStyle[prop]=to+"px";
|
||||
}
|
||||
onUpdate.call();
|
||||
}
|
||||
function _startTween(){
|
||||
_delay=1000/60;
|
||||
el._time=progress+_delay;
|
||||
_request=(!window.requestAnimationFrame) ? function(f){_tween(); return setTimeout(f,0.01);} : window.requestAnimationFrame;
|
||||
el._id=_request(_step);
|
||||
}
|
||||
function _cancelTween(){
|
||||
if(el._id==null){return;}
|
||||
if(!window.requestAnimationFrame){clearTimeout(el._id);
|
||||
}else{window.cancelAnimationFrame(el._id);}
|
||||
el._id=null;
|
||||
}
|
||||
function _ease(t,b,c,d,type){
|
||||
switch(type){
|
||||
case "linear":
|
||||
return c*t/d + b;
|
||||
break;
|
||||
case "easeOutQuad":
|
||||
t /= d; return -c * t*(t-2) + b;
|
||||
break;
|
||||
case "easeInOutQuad":
|
||||
t /= d/2;
|
||||
if (t < 1) return c/2*t*t + b;
|
||||
t--;
|
||||
return -c/2 * (t*(t-2) - 1) + b;
|
||||
break;
|
||||
case "easeOutCubic":
|
||||
t /= d; t--; return c*(t*t*t + 1) + b;
|
||||
break;
|
||||
case "easeOutQuart":
|
||||
t /= d; t--; return -c * (t*t*t*t - 1) + b;
|
||||
break;
|
||||
case "easeOutQuint":
|
||||
t /= d; t--; return c*(t*t*t*t*t + 1) + b;
|
||||
break;
|
||||
case "easeOutCirc":
|
||||
t /= d; t--; return c * Math.sqrt(1 - t*t) + b;
|
||||
break;
|
||||
case "easeOutSine":
|
||||
return c * Math.sin(t/d * (Math.PI/2)) + b;
|
||||
break;
|
||||
case "easeOutExpo":
|
||||
return c * ( -Math.pow( 2, -10 * t/d ) + 1 ) + b;
|
||||
break;
|
||||
case "mcsEaseOut":
|
||||
var ts=(t/=d)*t,tc=ts*t;
|
||||
return b+c*(0.499999999999997*tc*ts + -2.5*ts*ts + 5.5*tc + -6.5*ts + 4*t);
|
||||
break;
|
||||
case "draggerRailEase":
|
||||
t /= d/2;
|
||||
if (t < 1) return c/2*t*t*t + b;
|
||||
t -= 2;
|
||||
return c/2*(t*t*t + 2) + b;
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
/*stop js animation tweens*/
|
||||
mTweenAxisStop:function(el){
|
||||
if(el._id==null){return;}
|
||||
if(!window.requestAnimationFrame){clearTimeout(el._id);
|
||||
}else{window.cancelAnimationFrame(el._id);}
|
||||
el._id=null;
|
||||
},
|
||||
/*detect requestAnimationFrame and polyfill*/
|
||||
rafPolyfill:function(){
|
||||
var pfx=["ms","moz","webkit","o"],i=pfx.length;
|
||||
while(--i > -1 && !window.requestAnimationFrame){
|
||||
window.requestAnimationFrame=window[pfx[i]+"RequestAnimationFrame"];
|
||||
window.cancelAnimationFrame=window[pfx[i]+"CancelAnimationFrame"] || window[pfx[i]+"CancelRequestAnimationFrame"];
|
||||
}
|
||||
}
|
||||
}
|
||||
/*detect features*/
|
||||
functions.rafPolyfill.call(); /*requestAnimationFrame*/
|
||||
$.support.touch=!!('ontouchstart' in window); /*touch*/
|
||||
$.support.pointer=window.navigator.pointerEnabled; /*pointer support*/
|
||||
$.support.msPointer=window.navigator.msPointerEnabled; /*MSPointer support*/
|
||||
/*plugin dependencies*/
|
||||
var _dlp=("https:"==document.location.protocol) ? "https:" : "http:";
|
||||
$.event.special.mousewheel || document.write('<script src="'+_dlp+'//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js"><\/script>');
|
||||
/*plugin fn*/
|
||||
$.fn.mCustomScrollbar=function(method){
|
||||
if(methods[method]){
|
||||
return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
|
||||
}else if(typeof method==="object" || !method){
|
||||
return methods.init.apply(this,arguments);
|
||||
}else{
|
||||
$.error("Method "+method+" does not exist");
|
||||
}
|
||||
};
|
||||
})(jQuery);
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@ -78,8 +78,8 @@
|
||||
<div class="col-lg-1 col-md-1 hidden-sm hidden-xs" aw-tool-tip="Completed at {{ task.finished | date:'HH:mm:ss' }}"
|
||||
data-placement="top">{{ task.elapsed }}
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-5 col-sm-10 col-xs-12 status-column">
|
||||
<i class="fa icon-job-{{ task.status }}"></i><span ng-show="hasRoles"> {{ task.role }} </span>{{ task.name }}
|
||||
<div class="col-lg-5 col-md-5 col-sm-10 col-xs-12 status-column" aw-tool-tip="Event Id: {{ task.id }} Status: {{ task.status }}" data-placement="top">
|
||||
<i class="fa icon-job-{{ task.status }}"></i><span ng-show="hasRoles"> {{ task.role }} </span> {{ task.name }}
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-5 hidden-sm hidden-xs">
|
||||
<div class="status-bar">
|
||||
@ -95,21 +95,19 @@
|
||||
|
||||
<div id="task-hosts-section" class="section">
|
||||
<h5>Hosts</h5>
|
||||
<div id="hosts-table-detail" class="table-detail">
|
||||
<div class="row" ng-repeat="result in hostResults | filter:{ task_id: activeTask }">
|
||||
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 status-column">
|
||||
<a href="" ng-click="doSomething()" aw-tool-tip="Status: {{ result.status }}. Click for details" data-placement="top">
|
||||
<i class="fa icon-job-{{ result.status }}"></i></a>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
|
||||
<a href="" ng-click="doSomething()" aw-tool-tip="Status: {{ result.status }}. Click for details" data-placement="top">{{ result.name }}</a>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
|
||||
{{ result.msg }}
|
||||
<div id="hosts-table-detail" aw-custom-scroll data-on-total-scroll="HostDetailOnTotalScroll"
|
||||
data-on-total-scroll-back="HostDetailOnTotalScrollBack" class="table-detail">
|
||||
<div id="hosts-table-detail-inner">
|
||||
<div class="row" ng-repeat="result in hostResults | filter:{ task_id: activeTask }">
|
||||
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 status-column">
|
||||
<a href="" ng-click="doSomething()" aw-tool-tip="Event Id: {{ result.id }} Status: {{ result.status }}. Click for details" data-placement="top"><i class="fa icon-job-{{ result.status }}"></i> {{ result.name }}</a>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
|
||||
{{ result.msg }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="hosts-slider-vertical" style="position:absolute; top:27px; right: 0; width:9px; height:150px;"></div>
|
||||
</div><!-- section -->
|
||||
|
||||
</div><!-- job-detail-tables -->
|
||||
@ -132,7 +130,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-detail">
|
||||
<div class="row" ng-repeat="host in hosts">
|
||||
<div class="row" ng-repeat="host in hosts" id="{{ host.id }}">
|
||||
<div class="name col-lg-4 col-md-4 col-sm-4 col-xs-4"><a href="/#/home/hosts/?id={{ host.id }}"
|
||||
aw-tool-tip="View host" data-placement="top">{{ host.name }}</a></div>
|
||||
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">{{ host.ok }}</div>
|
||||
|
||||
@ -10,9 +10,10 @@
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}lib/select2/select2.css" />
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}lib/select2/select2-bootstrap.css" />
|
||||
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}lib/codemirror/lib/codemirror.css" >
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}lib/codemirror/theme/elegant.css" >
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}lib/codemirror/addon/lint/lint.css" >
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}lib/codemirror/lib/codemirror.css" />
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}lib/codemirror/theme/elegant.css" />
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}lib/codemirror/addon/lint/lint.css" />
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}lib/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css" />
|
||||
|
||||
{% if settings.USE_MINIFIED_JS %}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}css/awx.min.css" />
|
||||
@ -400,6 +401,7 @@
|
||||
<script src="{{ STATIC_URL }}lib/codemirror/addon/selection/active-line.js"></script>
|
||||
<script src="{{ STATIC_URL }}lib/scrollto/lib/jquery-scrollto.js"></script>
|
||||
<script src="{{ STATIC_URL }}lib/socket.io-client/dist/socket.io.min.js"></script>
|
||||
<script src="{{ STATIC_URL }}lib/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
|
||||
<script src="{{ STATIC_URL }}lib/d3js/build/d3.v3.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user