diff --git a/app/assets/javascripts/admin-manifest.coffee b/app/assets/javascripts/admin-manifest.coffee index 759e78c5a..51bc5f419 100644 --- a/app/assets/javascripts/admin-manifest.coffee +++ b/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 diff --git a/app/assets/javascripts/admin/application.coffee b/app/assets/javascripts/admin/application.coffee index 256d2e0fa..bdc1a74bb 100644 --- a/app/assets/javascripts/admin/application.coffee +++ b/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() + diff --git a/app/views/admin/domains/versions.haml b/app/views/admin/domains/versions.haml index 63d318236..b803808aa 100644 --- a/app/views/admin/domains/versions.haml +++ b/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 diff --git a/vendor/assets/javascripts/jquery.doubleScroll.js b/vendor/assets/javascripts/jquery.doubleScroll.js new file mode 100644 index 000000000..45ff0642f --- /dev/null +++ b/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: '