From b15cdadd99698bda6264c4fd17d8a2e00ee490e0 Mon Sep 17 00:00:00 2001 From: Samuel Georges Date: Thu, 14 Apr 2016 05:24:19 +1000 Subject: [PATCH] Restrict scrolling to thead Fixes fluidity issue on Apple trackpad We can now use combo scroll for Windows users / more obvious UX --- modules/backend/widgets/lists/assets/js/october.list.js | 2 +- modules/system/assets/ui/js/drag.scroll.js | 6 +++++- modules/system/assets/ui/less/list.less | 2 +- modules/system/assets/ui/storm-min.js | 5 +++-- modules/system/assets/ui/storm.css | 2 +- 5 files changed, 11 insertions(+), 6 deletions(-) diff --git a/modules/backend/widgets/lists/assets/js/october.list.js b/modules/backend/widgets/lists/assets/js/october.list.js index 7b36177bb..d3100aa64 100644 --- a/modules/backend/widgets/lists/assets/js/october.list.js +++ b/modules/backend/widgets/lists/assets/js/october.list.js @@ -18,7 +18,7 @@ $el.dragScroll({ scrollClassContainer: scrollClassContainer, - useComboScroll: false, + scrollSelector: 'thead', dragSelector: 'thead' }) diff --git a/modules/system/assets/ui/js/drag.scroll.js b/modules/system/assets/ui/js/drag.scroll.js index eda206833..1b8254e87 100644 --- a/modules/system/assets/ui/js/drag.scroll.js +++ b/modules/system/assets/ui/js/drag.scroll.js @@ -21,6 +21,7 @@ * - useScroll - determines if the mouse wheel scrolling is allowed, true by default * - useComboScroll - determines if horizontal scroll should act as vertical, and vice versa, true by default * - dragSelector - restrict drag events to this selector + * - scrollSelector - restrict scroll events to this selector * * Methods: * - isStart - determines if the scrollable area is in its start (left or top) @@ -66,7 +67,9 @@ /* * Bind events */ - $el.mousewheel(function(event){ + var $scrollSelect = this.options.scrollSelector ? $(this.options.scrollSelector, $el) : $el + + $scrollSelect.mousewheel(function(event){ if (!self.options.useScroll) return; @@ -241,6 +244,7 @@ useComboScroll: true, scrollClassContainer: false, scrollMarkerContainer: false, + scrollSelector: null, dragSelector: null, dragClass: 'drag', start: function() {}, diff --git a/modules/system/assets/ui/less/list.less b/modules/system/assets/ui/less/list.less index 558a4ef6c..4465eae7d 100644 --- a/modules/system/assets/ui/less/list.less +++ b/modules/system/assets/ui/less/list.less @@ -459,7 +459,7 @@ table.table.data { &:after, &:before { margin-top: 0; - height: 41px; + height: 40px; padding: 13px 10px; background: #fff; top: 1px; diff --git a/modules/system/assets/ui/storm-min.js b/modules/system/assets/ui/storm-min.js index 04de8489a..2e5a531a6 100644 --- a/modules/system/assets/ui/storm-min.js +++ b/modules/system/assets/ui/storm-min.js @@ -3049,7 +3049,8 @@ this.scrollClassContainer=this.options.scrollClassContainer?$(this.options.scrol this.isScrollable=true Base.call(this) if(this.options.scrollMarkerContainer){$(this.options.scrollMarkerContainer).append($(''))} -$el.mousewheel(function(event){if(!self.options.useScroll) +var $scrollSelect=this.options.scrollSelector?$(this.options.scrollSelector,$el):$el +$scrollSelect.mousewheel(function(event){if(!self.options.useScroll) return;var offset,offsetX=event.deltaFactor*event.deltaX,offsetY=event.deltaFactor*event.deltaY if(!offsetX&&self.options.useComboScroll){offset=offsetY*-1} else if(!offsetY&&self.options.useComboScroll){offset=offsetX} @@ -3104,7 +3105,7 @@ return scrolled} this.fixScrollClasses();} DragScroll.prototype=Object.create(BaseProto) DragScroll.prototype.constructor=DragScroll -DragScroll.DEFAULTS={vertical:false,useDrag:true,useScroll:true,useComboScroll:true,scrollClassContainer:false,scrollMarkerContainer:false,dragSelector:null,dragClass:'drag',start:function(){},drag:function(){},stop:function(){}} +DragScroll.DEFAULTS={vertical:false,useDrag:true,useScroll:true,useComboScroll:true,scrollClassContainer:false,scrollMarkerContainer:false,scrollSelector:null,dragSelector:null,dragClass:'drag',start:function(){},drag:function(){},stop:function(){}} DragScroll.prototype.fixScrollClasses=function(){var isStart=this.isStart(),isEnd=this.isEnd() this.scrollClassContainer.toggleClass('scroll-before',!isStart) this.scrollClassContainer.toggleClass('scroll-after',!isEnd) diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css index 4193a3b23..8f0e52310 100644 --- a/modules/system/assets/ui/storm.css +++ b/modules/system/assets/ui/storm.css @@ -2564,7 +2564,7 @@ table.table.data tr.list-tree-level-10 td.list-cell-index-1{padding-left:125px} .list-scrollable-container:after{right:-8px;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f105"} .list-scrollable-container.scroll-before:before{display:block} .list-scrollable-container.scroll-after:after{display:block} -.list-scrollable-container:after,.list-scrollable-container:before{margin-top:0;height:41px;padding:13px 10px;background:#fff;top:1px} +.list-scrollable-container:after,.list-scrollable-container:before{margin-top:0;height:40px;padding:13px 10px;background:#fff;top:1px} .list-scrollable-container:before{left:0} .list-scrollable-container:after{right:0} .list-scrollable-container > .list-scrollable{overflow:hidden}