TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Restrict scrolling to thead 

Fixes fluidity issue on Apple trackpad
We can now use combo scroll for Windows users / more obvious UX
This commit is contained in:
Samuel Georges 2016-04-14 05:24:19 +10:00
parent 6c30e542a7
commit b15cdadd99
5 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
modules/backend/widgets/lists/assets/js/october.list.js
View File

@ -18,7 +18,7 @@
$el.dragScroll({ $el.dragScroll({
scrollClassContainer: scrollClassContainer, scrollClassContainer: scrollClassContainer,
useComboScroll: false, scrollSelector: 'thead',
dragSelector: 'thead' dragSelector: 'thead'
}) })

6
modules/system/assets/ui/js/drag.scroll.js
View File

@ -21,6 +21,7 @@
* - useScroll - determines if the mouse wheel scrolling is allowed, true by default * - 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 * - useComboScroll - determines if horizontal scroll should act as vertical, and vice versa, true by default
* - dragSelector - restrict drag events to this selector * - dragSelector - restrict drag events to this selector
* - scrollSelector - restrict scroll events to this selector
* *
* Methods: * Methods:
* - isStart - determines if the scrollable area is in its start (left or top) * - isStart - determines if the scrollable area is in its start (left or top)
@ -66,7 +67,9 @@
/* /*
* Bind events * Bind events
*/ */
$el.mousewheel(function(event){ var $scrollSelect = this.options.scrollSelector ? $(this.options.scrollSelector, $el) : $el
$scrollSelect.mousewheel(function(event){
if (!self.options.useScroll) if (!self.options.useScroll)
return; return;
@ -241,6 +244,7 @@
useComboScroll: true, useComboScroll: true,
scrollClassContainer: false, scrollClassContainer: false,
scrollMarkerContainer: false, scrollMarkerContainer: false,
scrollSelector: null,
dragSelector: null, dragSelector: null,
dragClass: 'drag', dragClass: 'drag',
start: function() {}, start: function() {},

2
modules/system/assets/ui/less/list.less
View File

@ -459,7 +459,7 @@ table.table.data {
&:after, &:before { &:after, &:before {
margin-top: 0; margin-top: 0;
height: 41px; height: 40px;
padding: 13px 10px; padding: 13px 10px;
background: #fff; background: #fff;
top: 1px; top: 1px;

5
modules/system/assets/ui/storm-min.js vendored
View File

@ -3049,7 +3049,8 @@ this.scrollClassContainer=this.options.scrollClassContainer?$(this.options.scrol
this.isScrollable=true this.isScrollable=true
Base.call(this) Base.call(this)
if(this.options.scrollMarkerContainer){$(this.options.scrollMarkerContainer).append($('<span class="before scroll-marker"></span><span class="after scroll-marker"></span>'))} if(this.options.scrollMarkerContainer){$(this.options.scrollMarkerContainer).append($('<span class="before scroll-marker"></span><span class="after scroll-marker"></span>'))}
$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 return;var offset,offsetX=event.deltaFactor*event.deltaX,offsetY=event.deltaFactor*event.deltaY
if(!offsetX&&self.options.useComboScroll){offset=offsetY*-1} if(!offsetX&&self.options.useComboScroll){offset=offsetY*-1}
else if(!offsetY&&self.options.useComboScroll){offset=offsetX} else if(!offsetY&&self.options.useComboScroll){offset=offsetX}
@ -3104,7 +3105,7 @@ return scrolled}
this.fixScrollClasses();} this.fixScrollClasses();}
DragScroll.prototype=Object.create(BaseProto) DragScroll.prototype=Object.create(BaseProto)
DragScroll.prototype.constructor=DragScroll 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() DragScroll.prototype.fixScrollClasses=function(){var isStart=this.isStart(),isEnd=this.isEnd()
this.scrollClassContainer.toggleClass('scroll-before',!isStart) this.scrollClassContainer.toggleClass('scroll-before',!isStart)
this.scrollClassContainer.toggleClass('scroll-after',!isEnd) this.scrollClassContainer.toggleClass('scroll-after',!isEnd)

2
modules/system/assets/ui/storm.css
View File

@ -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: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-before:before{display:block}
.list-scrollable-container.scroll-after:after{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:before{left:0}
.list-scrollable-container:after{right:0} .list-scrollable-container:after{right:0}
.list-scrollable-container > .list-scrollable{overflow:hidden} .list-scrollable-container > .list-scrollable{overflow:hidden}