Mercurial > hg > LGServices

comparison src/main/webapp/resources/js/jquery.doubleScroll.js @ 35:89a5ca7d44f7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
new: rename branch to task, add fields in task table, add scroll bar
author Zoe Hong <zhong@mpiwg-berlin.mpg.de>
date Thu, 19 Nov 2015 17:14:06 +0100
parents
children
comparison
equal deleted inserted replaced
34:2e1662afc81c 35:89a5ca7d44f7
1 /*
2 * @name DoubleScroll
3 * @desc displays scroll bar on top and on the bottom of the div
4 * @requires jQuery
5 *
6 * @author Pawel Suwala - http://suwala.eu/
7 * @author Antoine Vianey - http://www.astek.fr/
8 * @version 0.4 (18-06-2014)
9 *
10 * Dual licensed under the MIT and GPL licenses:
11 * http://www.opensource.org/licenses/mit-license.php
12 * http://www.gnu.org/licenses/gpl.html
13 *
14 * Usage:
15 * https://github.com/avianey/jqDoubleScroll
16 */
17
18 jQuery.fn.doubleScroll = function(userOptions) {
19 var $ = jQuery;
20 // Default options
21 var options = {
22 contentElement: undefined, // Widest element, if not specified first child element will be used
23 scrollCss: {
24 'overflow-x': 'auto',
25 'overflow-y': 'hidden'
26 },
27 contentCss: {
28 'overflow-x': 'auto',
29 'overflow-y': 'hidden'
30 },
31 onlyIfScroll: true, // top scrollbar is not shown if the bottom one is not present
32 resetOnWindowResize: true, // recompute the top ScrollBar requirements when the window is resized
33 timeToWaitForResize: 30 // wait for the last update event (usefull when browser fire resize event constantly during ressing)
34 };
35 $.extend(true, options, userOptions);
36 // do not modify
37 // internal stuff
38 $.extend(options, {
39 topScrollBarMarkup: '<div class="doubleScroll-scroll-wrapper" style="height: 20px;"><div class="doubleScroll-scroll" style="height: 20px;"></div></div>',
40 topScrollBarWrapperSelector: '.doubleScroll-scroll-wrapper',
41 topScrollBarInnerSelector: '.doubleScroll-scroll'
42 });
43
44 var _showScrollBar = function($self, options) {
45
46 if (options.onlyIfScroll && $self.get(0).scrollWidth <= $self.width()) {
47 // content doesn't scroll
48 // remove any existing occurrence...
49 $self.prev(options.topScrollBarWrapperSelector).remove();
50 return;
51 }
52
53 // add div that will act as an upper scroll only if not already added to the DOM
54 var $topScrollBar = $self.prev(options.topScrollBarWrapperSelector);
55 if ($topScrollBar.length == 0) {
56
57 // creating the scrollbar
58 // added before in the DOM
59 $topScrollBar = $(options.topScrollBarMarkup);
60 $self.before($topScrollBar);
61
62 // apply the css
63 $topScrollBar.css(options.scrollCss);
64 $self.css(options.contentCss);
65
66 // bind upper scroll to bottom scroll
67 $topScrollBar.bind('scroll.doubleScroll', function() {
68 $self.scrollLeft($topScrollBar.scrollLeft());
69 });
70
71 // bind bottom scroll to upper scroll
72 var selfScrollHandler = function() {
73 $topScrollBar.scrollLeft($self.scrollLeft());
74 };
75 $self.bind('scroll.doubleScroll', selfScrollHandler);
76 }
77
78 // find the content element (should be the widest one)
79 var $contentElement;
80 if (options.contentElement !== undefined && $self.find(options.contentElement).length !== 0) {
81 $contentElement = $self.find(options.contentElement);
82 } else {
83 $contentElement = $self.find('>:first-child');
84 }
85
86 // set the width of the wrappers
87 $(options.topScrollBarInnerSelector, $topScrollBar).width($contentElement.outerWidth());
88 $topScrollBar.width($self.width());
89 $topScrollBar.scrollLeft($self.scrollLeft());
90
91 }
92
93 return this.each(function() {
94 var $self = $(this);
95 _showScrollBar($self, options);
96
97 // bind the resize handler
98 // do it once
99 if (options.resetOnWindowResize) {
100 var id;
101 var handler = function(e) {
102 _showScrollBar($self, options);
103 };
104 $(window).bind('resize.doubleScroll', function() {
105 // adding/removing/replacing the scrollbar might resize the window
106 // so the resizing flag will avoid the infinite loop here...
107 clearTimeout(id);
108 id = setTimeout(handler, options.timeToWaitForResize);
109 });
110 }
111 });
112 }