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

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