mirror of
https://github.com/internetee/registry.git
synced 2025-07-01 00:33:36 +02:00
Story#115762063 - add double scroll
This commit is contained in:
parent
6545ac2ae6
commit
8b25a2d30e
4 changed files with 160 additions and 1 deletions
|
@ -9,5 +9,6 @@
|
|||
#= require shared/jquery.validate.bootstrap
|
||||
#= require jquery-ui/datepicker
|
||||
#= require select2
|
||||
#= require jquery.doubleScroll
|
||||
#= require shared/general
|
||||
#= require admin/application
|
||||
|
|
|
@ -16,3 +16,35 @@ $(document).on 'page:change', ->
|
|||
$(this).validate()
|
||||
|
||||
$('[data-toggle="popover"]').popover()
|
||||
|
||||
|
||||
|
||||
|
||||
# doublescroll
|
||||
$('[data-doublescroll]').doubleScroll({
|
||||
onlyIfScroll: false,
|
||||
scrollCss:
|
||||
'overflow-x': 'auto'
|
||||
'overflow-y': 'hidden'
|
||||
contentCss:
|
||||
'overflow-x': 'auto'
|
||||
'overflow-y': 'hidden'
|
||||
resetOnWindowResize: true
|
||||
})
|
||||
|
||||
positionSlider = ->
|
||||
for scroll in document.querySelectorAll('[data-doublescroll]')
|
||||
wrapper = scroll.previousSibling
|
||||
if $(scroll).offset().top < $(window).scrollTop()
|
||||
wrapper.style.position = 'fixed'
|
||||
wrapper.style.top = '-5px'
|
||||
else
|
||||
wrapper.style.position = 'relative'
|
||||
wrapper.style.top = '0'
|
||||
return
|
||||
|
||||
positionSlider()
|
||||
$(window).scroll(positionSlider).resize positionSlider
|
||||
#due .report-table width: auto top scrollbar appears after resize so we do fake resize action
|
||||
$(window).resize()
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
.row
|
||||
.col-md-12
|
||||
.table-responsive
|
||||
.table-responsive{data: {doublescroll: true}}
|
||||
%table.table.table-bordered.table-condensed
|
||||
%thead
|
||||
%tr
|
||||
|
|
126
vendor/assets/javascripts/jquery.doubleScroll.js
vendored
Normal file
126
vendor/assets/javascripts/jquery.doubleScroll.js
vendored
Normal file
|
@ -0,0 +1,126 @@
|
|||
/*
|
||||
* @name DoubleScroll
|
||||
* @desc displays scroll bar on top and on the bottom of the div
|
||||
* @requires jQuery
|
||||
*
|
||||
* @author Pawel Suwala - http://suwala.eu/
|
||||
* @author Antoine Vianey - http://www.astek.fr/
|
||||
* @version 0.5 (11-11-2015)
|
||||
*
|
||||
* Dual licensed under the MIT and GPL licenses:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
*
|
||||
* Usage:
|
||||
* https://github.com/avianey/jqDoubleScroll
|
||||
*/
|
||||
(function( $ ) {
|
||||
|
||||
jQuery.fn.doubleScroll = function(userOptions) {
|
||||
|
||||
// Default options
|
||||
var options = {
|
||||
contentElement: undefined, // Widest element, if not specified first child element will be used
|
||||
scrollCss: {
|
||||
'overflow-x': 'auto',
|
||||
'overflow-y': 'hidden'
|
||||
},
|
||||
contentCss: {
|
||||
'overflow-x': 'auto',
|
||||
'overflow-y': 'hidden'
|
||||
},
|
||||
onlyIfScroll: true, // top scrollbar is not shown if the bottom one is not present
|
||||
resetOnWindowResize: false, // recompute the top ScrollBar requirements when the window is resized
|
||||
timeToWaitForResize: 30 // wait for the last update event (usefull when browser fire resize event constantly during ressing)
|
||||
};
|
||||
|
||||
$.extend(true, options, userOptions);
|
||||
|
||||
// do not modify
|
||||
// internal stuff
|
||||
$.extend(options, {
|
||||
topScrollBarMarkup: '<div class="doubleScroll-scroll-wrapper" style="height: 20px;"><div class="doubleScroll-scroll" style="height: 20px;"></div></div>',
|
||||
topScrollBarWrapperSelector: '.doubleScroll-scroll-wrapper',
|
||||
topScrollBarInnerSelector: '.doubleScroll-scroll'
|
||||
});
|
||||
|
||||
var _showScrollBar = function($self, options) {
|
||||
|
||||
if (options.onlyIfScroll && $self.get(0).scrollWidth <= $self.width()) {
|
||||
// content doesn't scroll
|
||||
// remove any existing occurrence...
|
||||
$self.prev(options.topScrollBarWrapperSelector).remove();
|
||||
return;
|
||||
}
|
||||
|
||||
// add div that will act as an upper scroll only if not already added to the DOM
|
||||
var $topScrollBar = $self.prev(options.topScrollBarWrapperSelector);
|
||||
|
||||
if ($topScrollBar.length == 0) {
|
||||
|
||||
// creating the scrollbar
|
||||
// added before in the DOM
|
||||
$topScrollBar = $(options.topScrollBarMarkup);
|
||||
$self.before($topScrollBar);
|
||||
|
||||
// apply the css
|
||||
$topScrollBar.css(options.scrollCss);
|
||||
$self.css(options.contentCss);
|
||||
|
||||
// bind upper scroll to bottom scroll
|
||||
$topScrollBar.bind('scroll.doubleScroll', function() {
|
||||
$self.scrollLeft($topScrollBar.scrollLeft());
|
||||
});
|
||||
|
||||
// bind bottom scroll to upper scroll
|
||||
var selfScrollHandler = function() {
|
||||
$topScrollBar.scrollLeft($self.scrollLeft());
|
||||
};
|
||||
$self.bind('scroll.doubleScroll', selfScrollHandler);
|
||||
}
|
||||
|
||||
// find the content element (should be the widest one)
|
||||
var $contentElement;
|
||||
|
||||
if (options.contentElement !== undefined && $self.find(options.contentElement).length !== 0) {
|
||||
$contentElement = $self.find(options.contentElement);
|
||||
} else {
|
||||
$contentElement = $self.find('>:first-child');
|
||||
}
|
||||
|
||||
// set the width of the wrappers
|
||||
$(options.topScrollBarInnerSelector, $topScrollBar).width($contentElement.outerWidth());
|
||||
$topScrollBar.width($self.width());
|
||||
$topScrollBar.scrollLeft($self.scrollLeft());
|
||||
|
||||
}
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
var $self = $(this);
|
||||
|
||||
_showScrollBar($self, options);
|
||||
|
||||
// bind the resize handler
|
||||
// do it once
|
||||
if (options.resetOnWindowResize) {
|
||||
|
||||
var id;
|
||||
var handler = function(e) {
|
||||
_showScrollBar($self, options);
|
||||
};
|
||||
|
||||
$(window).bind('resize.doubleScroll', function() {
|
||||
// adding/removing/replacing the scrollbar might resize the window
|
||||
// so the resizing flag will avoid the infinite loop here...
|
||||
clearTimeout(id);
|
||||
id = setTimeout(handler, options.timeToWaitForResize);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}( jQuery ));
|
Loading…
Add table
Add a link
Reference in a new issue