Story#115762063 - add double scroll

app/assets/javascripts/admin-manifest.coffee

@@ -9,5 +9,6 @@
 #= require shared/jquery.validate.bootstrap
 #= require jquery-ui/datepicker
 #= require select2
+#= require jquery.doubleScroll
 #= require shared/general
 #= require admin/application

app/assets/javascripts/admin/application.coffee

@@ -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()
+

app/views/admin/domains/versions.haml

@@ -4,7 +4,7 @@
 
 .row
   .col-md-12
-    .table-responsive
+    .table-responsive{data: {doublescroll: true}}
       %table.table.table-bordered.table-condensed
         %thead
           %tr

vendor/assets/javascripts/jquery.doubleScroll.js

@@ -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 ));