Skip to content

Commit

Permalink
Merge branch 'propagate_event_when_not_scrolled' of https://github.co…
Browse files Browse the repository at this point in the history 
…m/VincentLoy/vue2-scrollbar into VincentLoy-propagate_event_when_not_scrolled

- Merge PR @VincentLoy: Propagate event when not scrolled
- Fix Touch Event preventDefault Inside Wrapper
  • Loading branch information
@BosNaufal
BosNaufal committed Aug 4, 2017
2 parents bdcd1db + 3929efb commit 54292d3
Show file tree
Hide file tree
Showing 5 changed files with 40 additions and 18 deletions.
8 changes: 7 additions & 1 deletion build/build.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions dist/style/app.css
View file
@@ -1,6 +1,7 @@

body {
background: #f9f9f9;
height: 1000px;
}

p {
Expand Down
6 changes: 5 additions & 1 deletion dist/vue2-scrollbar.js
View file
Expand Up @@ -5,6 +5,7 @@
* ,Vue 2 Scrollbar @ Version 0.0.1,
*
*/
<<<<<<< HEAD
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
Expand Down Expand Up @@ -1125,4 +1126,7 @@ if (false) {

/***/ })
/******/ ]);
});
});
=======
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Vue2Scrollbar=e():t.Vue2Scrollbar=e()}(this,function(){return function(t){function e(i){if(r[i])return r[i].exports;var n=r[i]={exports:{},id:i,loaded:!1};return t[i].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var r={};return e.m=t,e.c=r,e.p="../dist/",e(0)}([function(t,e,r){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}var n=r(6),o=i(n);t.exports=o.default},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{draggingFromParent:Boolean,scrolling:Number,wrapper:Object,area:Object,onChangePosition:Function,onDragging:Function,onStopDrag:Function},data:function(){return{width:0,dragging:!1,start:0}},watch:{"wrapper.width":function(t,e){this.calculateSize(this)},"area.width":function(t,e){this.calculateSize(this)}},methods:{startDrag:function(t){t.preventDefault(),t.stopPropagation(),t=t.changedTouches?t.changedTouches[0]:t,this.dragging=!0,this.start=t.clientX},onDrag:function(t){if(this.dragging){this.onDragging(),t.preventDefault(),t.stopPropagation(),t=t.changedTouches?t.changedTouches[0]:t;var e=t.clientX-this.start,r=e/this.wrapper.width*100;this.start=t.clientX;var i=this.scrolling+r;this.onChangePosition(i,"horizontal")}},stopDrag:function(t){this.dragging&&(this.onStopDrag(),this.dragging=!1)},jump:function(t){var e=t.target===this.$refs.container;if(e){var r=this.$refs.scrollbar.getBoundingClientRect(),i=t.clientX-r.left,n=this.width/2,o=i/this.wrapper.width*100-n;this.start=t.clientX;var a=this.scrolling+o;this.onChangePosition(a,"horizontal")}},calculateSize:function(t){this.width=t.wrapper.width/t.area.width*100}},mounted:function(){this.calculateSize(this),document.addEventListener("mousemove",this.onDrag),document.addEventListener("touchmove",this.onDrag),document.addEventListener("mouseup",this.stopDrag),document.addEventListener("touchend",this.stopDrag)},beforeDestroy:function(){document.removeEventListener("mousemove",this.onDrag),document.removeEventListener("touchmove",this.onDrag),document.removeEventListener("mouseup",this.stopDrag),document.removeEventListener("touchend",this.stopDrag)}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{draggingFromParent:Boolean,scrolling:Number,wrapper:Object,area:Object,onChangePosition:Function,onDragging:Function,onStopDrag:Function},data:function(){return{height:0,dragging:!1,start:0}},watch:{"wrapper.height":function(t,e){this.calculateSize(this)},"area.height":function(t,e){this.calculateSize(this)}},methods:{startDrag:function(t){t.preventDefault(),t.stopPropagation(),t=t.changedTouches?t.changedTouches[0]:t,this.dragging=!0,this.start=t.clientY},onDrag:function(t){if(this.dragging){this.onDragging(),t.preventDefault(),t.stopPropagation(),t=t.changedTouches?t.changedTouches[0]:t;var e=t.clientY-this.start,r=e/this.wrapper.height*100;this.start=t.clientY;var i=this.scrolling+r;this.onChangePosition(i,"vertical")}},stopDrag:function(t){this.dragging&&(this.onStopDrag(),this.dragging=!1)},jump:function(t){var e=t.target===this.$refs.container;if(e){var r=this.$refs.scrollbar.getBoundingClientRect(),i=t.clientY-r.top,n=this.height/2,o=i/this.wrapper.height*100-n;this.start=t.clientY;var a=this.scrolling+o;this.onChangePosition(a,"vertical")}},calculateSize:function(t){this.height=t.wrapper.height/t.area.height*100},getSize:function(){var t=this.$refs.container.parentElement,e=t.parentElement,r={scrollAreaHeight:t.children[0].clientHeight,scrollAreaWidth:t.children[0].clientWidth,scrollWrapperHeight:e.clientHeight,scrollWrapperWidth:e.clientWidth};return r}},mounted:function(){this.calculateSize(this),document.addEventListener("mousemove",this.onDrag),document.addEventListener("touchmove",this.onDrag),document.addEventListener("mouseup",this.stopDrag),document.addEventListener("touchend",this.stopDrag)},beforeDestroy:function(){document.removeEventListener("mousemove",this.onDrag),document.removeEventListener("touchmove",this.onDrag),document.removeEventListener("mouseup",this.stopDrag),document.removeEventListener("touchend",this.stopDrag)}}},function(t,e,r){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=r(5),o=i(n),a=r(4),s=i(a);e.default={props:{classes:String,style:Object,speed:{type:Number,default:53}},components:{VerticalScrollbar:o.default,HorizontalScrollbar:s.default},data:function(){return{ready:!1,top:0,left:0,scrollAreaHeight:null,scrollAreaWidth:null,scrollWrapperHeight:null,scrollWrapperWidth:null,vMovement:0,hMovement:0,cachedvMovement:0,dragging:!1,start:{y:0,x:0}}},computed:{allowBodyScrollVertical:function(){return this.vMovement===this.cachedvMovement}},methods:{scroll:function(t){var e=this;this.calculateSize(function(){var r=e.speed,i=t.shiftKey,n=t.deltaY>0?r:-r,o=t.deltaX>0?r:-r;i&&0==t.deltaX&&(o=t.deltaY>0?r:-r);var a=e.top+n,s=e.left+o,l=e.scrollAreaHeight>e.scrollWrapperHeight,c=e.scrollAreaWidth>e.scrollWrapperWidth;l&&!i&&e.normalizeVertical(a),i&&c&&e.normalizeHorizontal(s)}),this.allowBodyScrollVertical||t.preventDefault()},startDrag:function(t){var e=this,r=t.changedTouches?t.changedTouches[0]:t;this.calculateSize(function(){e.dragging=!0,e.start={y:r.pageY,x:r.pageX}}),this.allowBodyScrollVertical||(t.preventDefault(),t.stopPropagation())},onDrag:function(t){if(this.dragging){var e=t.changedTouches?t.changedTouches[0]:t,r=this.start.y-e.clientY,i=this.start.x-e.clientX;this.start={y:e.clientY,x:e.clientX};var n=this.top+r,o=this.left+i;this.normalizeVertical(n),this.normalizeHorizontal(o),this.allowBodyScrollVertical||t.preventDefault()}},stopDrag:function(t){this.dragging=!1},scrollToY:function(t){this.normalizeVertical(t)},scrollToX:function(t){this.normalizeVertical(t)},normalizeVertical:function(t){var e=this.getSize(),r=e.scrollAreaHeight-e.scrollWrapperHeight;t>r?t=r:t<0&&(t=0),this.top=t,this.cachedvMovement=this.vMovement,this.vMovement=t/e.scrollAreaHeight*100},normalizeHorizontal:function(t){var e=this.getSize(),r=e.scrollAreaWidth-this.scrollWrapperWidth;t>r?t=r:t<0&&(t=0),this.left=t,this.hMovement=t/e.scrollAreaWidth*100},handleChangePosition:function(t,e){var r=this;this.calculateSize(function(){var i=t/100;"vertical"==e&&r.normalizeVertical(i*r.scrollAreaHeight),"horizontal"==e&&r.normalizeHorizontal(i*r.scrollAreaWidth)})},handleScrollbarDragging:function(){this.dragging=!0},handleScrollbarStopDrag:function(){this.dragging=!1},getSize:function(){var t=this.$refs.scrollArea,e=this.$refs.scrollWrapper,r={scrollAreaHeight:t.children[0].clientHeight,scrollAreaWidth:t.children[0].clientWidth,scrollWrapperHeight:e.clientHeight,scrollWrapperWidth:e.clientWidth};return r},calculateSize:function(t){"function"!=typeof t&&(t=null);var e=this.getSize();return e.scrollWrapperHeight!==this.scrollWrapperHeight||e.scrollWrapperWidth!==this.scrollWrapperWidth||e.scrollAreaHeight!==this.scrollAreaHeight||e.scrollAreaWidth!==this.scrollAreaWidth?(this.scrollAreaHeight=e.scrollAreaHeight,this.scrollAreaWidth=e.scrollAreaWidth,this.scrollWrapperHeight=e.scrollWrapperHeight,this.scrollWrapperWidth=e.scrollWrapperWidth,this.ready=!0,!!t&&t()):!!t&&t()}},mounted:function(){this.calculateSize(),window.addEventListener("resize",this.calculateSize)},beforeDestroy:function(){window.removeEventListener("resize",this.calculateSize)}}},function(t,e,r){var i,n;i=r(1);var o=r(8);n=i=i||{},"object"!=typeof i.default&&"function"!=typeof i.default||(n=i=i.default),"function"==typeof n&&(n=n.options),n.render=o.render,n.staticRenderFns=o.staticRenderFns,t.exports=i},function(t,e,r){var i,n;i=r(2);var o=r(9);n=i=i||{},"object"!=typeof i.default&&"function"!=typeof i.default||(n=i=i.default),"function"==typeof n&&(n=n.options),n.render=o.render,n.staticRenderFns=o.staticRenderFns,t.exports=i},function(t,e,r){var i,n;i=r(3);var o=r(7);n=i=i||{},"object"!=typeof i.default&&"function"!=typeof i.default||(n=i=i.default),"function"==typeof n&&(n=n.options),n.render=o.render,n.staticRenderFns=o.staticRenderFns,t.exports=i},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{ref:"scrollWrapper",class:"vue-scrollbar__wrapper"+(this.classes?" "+this.classes:""),style:this.style,on:{click:t.calculateSize}},[r("div",{ref:"scrollArea",class:"vue-scrollbar__area"+(this.dragging?" ":" vue-scrollbar-transition"),style:{marginTop:this.top*-1+"px",marginLeft:this.left*-1+"px"},on:{wheel:t.scroll,touchstart:t.startDrag,touchmove:t.onDrag,touchend:t.stopDrag}},[t._t("default"),t._v(" "),t.ready?r("vertical-scrollbar",{attrs:{area:{height:t.scrollAreaHeight},wrapper:{height:t.scrollWrapperHeight},scrolling:t.vMovement,"dragging-from-parent":t.dragging,"on-change-position":t.handleChangePosition,"on-dragging":t.handleScrollbarDragging,"on-stop-drag":t.handleScrollbarStopDrag}}):t._e(),t._v(" "),t.ready?r("horizontal-scrollbar",{attrs:{area:{width:t.scrollAreaWidth},wrapper:{width:t.scrollWrapperWidth},scrolling:t.hMovement,"dragging-from-parent":t.dragging,"on-change-position":t.handleChangePosition,"on-dragging":t.handleScrollbarDragging,"on-stop-drag":t.handleScrollbarStopDrag}}):t._e()],2)])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",[t.width<100?r("div",{ref:"container",staticClass:"vue-scrollbar__scrollbar-horizontal",on:{click:t.jump}},[r("div",{ref:"scrollbar",class:"scrollbar"+(t.dragging||t.draggingFromParent?"":" vue-scrollbar-transition"),style:{width:this.width+"%",left:this.scrolling+"%"},on:{touchstart:t.startDrag,mousedown:t.startDrag}})]):t._e()])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",[t.height<100?r("div",{ref:"container",staticClass:"vue-scrollbar__scrollbar-vertical",on:{click:t.jump}},[r("div",{ref:"scrollbar",class:"scrollbar"+(t.dragging||t.draggingFromParent?"":" vue-scrollbar-transition"),style:{height:t.height+"%",top:t.scrolling+"%"},on:{touchstart:t.startDrag,mousedown:t.startDrag}})]):t._e()])},staticRenderFns:[]}}])});
>>>>>>> 3929efb980eb539b933635d85350b085a6df732c
4 changes: 3 additions & 1 deletion src/js/components/app.vue
View file
Expand Up @@ -3,7 +3,9 @@
<div>
<vue-scrollbar classes="my-scrollbar" ref="Scrollbar">
<div class="scroll-me">
<div class="kolom"></div>
<a href="https://google.com">
<div class="kolom">Go To Google</div>
</a>
<div class="kolom"></div>
<div class="kolom"></div>
<div class="kolom"></div>
Expand Down
39 changes: 24 additions & 15 deletions src/js/components/vue-scrollbar.vue
View file
Expand Up @@ -83,15 +83,13 @@
vMovement: 0,
hMovement: 0,
dragging: false,
start: { y: 0, x: 0}
start: { y: 0, x: 0},
allowBodyScroll: false,
}
},
methods: {
scroll(e){
e.preventDefault()
// Make sure the content height is not changed
this.calculateSize(() => {
// Set the wheel step
Expand Down Expand Up @@ -120,36 +118,45 @@
if(shifted && canScrollX) this.normalizeHorizontal(nextX)
})
// prevent Default only if scrolled content is not at the top/bottom
if (!this.allowBodyScroll) {
e.preventDefault()
}
},
// DRAG EVENT JUST FOR TOUCH DEVICE~
startDrag(e){
// e.preventDefault()
// e.stopPropagation()
this.touchEvent = e
e = e.changedTouches ? e.changedTouches[0] : e
const evt = e.changedTouches ? e.changedTouches[0] : e
// Make sure the content height is not changed
this.calculateSize(() => {
// Prepare to drag
this.dragging = true,
this.start = { y: e.pageY, x: e.pageX }
this.start = { y: evt.pageY, x: evt.pageX }
})
},
onDrag(e){
if(this.dragging){
e.preventDefault()
e = e.changedTouches ? e.changedTouches[0] : e
// Prevent Click Event When it dragging
if (this.touchEvent) {
this.touchEvent.preventDefault()
this.touchEvent.stopPropagation()
}
let evt = e.changedTouches ? e.changedTouches[0] : e
// Invers the Movement
let yMovement = this.start.y - e.clientY
let xMovement = this.start.x - e.clientX
let yMovement = this.start.y - evt.clientY
let xMovement = this.start.x - evt.clientX
// Update the last e.client
this.start = { y: e.clientY, x: e.clientX }
this.start = { y: evt.clientY, x: evt.clientX }
// The next Vertical Value will be
let nextY = this.top + yMovement
Expand All @@ -163,6 +170,7 @@
stopDrag(e){
this.dragging = false
this.touchEvent = false
},
scrollToY(y) {
Expand Down Expand Up @@ -190,6 +198,7 @@
// Update the Vertical Value if it's needed
const shouldScroll = this.top !== next
this.allowBodyScroll = !shouldScroll
if (shouldScroll) {
this.top = next,
this.vMovement = next / elementSize.scrollAreaHeight * 100
Expand All @@ -198,7 +207,6 @@
this.onMaxScroll({ top: maxTop, bottom: maxBottom, right: false, left: false })
}
}
},
normalizeHorizontal(next){
Expand All @@ -217,6 +225,7 @@
// Update the Horizontal Value
const shouldScroll = this.left !== next
this.allowBodyScroll = !shouldScroll
if (shouldScroll) {
this.left = next,
this.hMovement = next / elementSize.scrollAreaWidth * 100
Expand Down

0 comments on commit 54292d3

Please sign in to comment.