Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-03-16 22:10:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added swipeable functionality.

Browse source
This commit is contained in:
TECNOSYLVA\fgarcia 2017-02-23 15:26:53 +01:00
parent fe7333ec85
commit 6f933d21ea
2 changed files with 78 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
docs/src/pages/components/Onboarding.vue
View file

@ -38,9 +38,9 @@
</md-table-row>
<md-table-row>
<md-table-cell>md-timeout</md-table-cell>
<md-table-cell>md-duration</md-table-cell>
<md-table-cell><code>Number</code></md-table-cell>
<md-table-cell>Set timeout for <code>md-auto</code> in milliseconds. Default <code>5000</code>.</md-table-cell>
<md-table-cell>Set duration for <code>md-auto</code> in milliseconds. Default <code>5000</code>.</md-table-cell>
</md-table-row>
<md-table-row>
@ -48,6 +48,18 @@
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Enable prev/next controls. Default <code>false</code>.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-swipeable</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
<md-table-cell>Enable the swipe functionality. Default <code>false</code>.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-swipe-distance</md-table-cell>
<md-table-cell><code>Number</code></md-table-cell>
<md-table-cell>Set the swipe distance needed to open/close the sidenav. Default <code>100</code>.</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
@ -55,9 +67,9 @@
</div>
<div slot="example">
<example-box card-title="Basic, automatic, infinite, uncontrolled">
<example-box card-title="Basic, automatic, infinite, uncontrolled, swipeable">
<div slot="demo">
<md-boards :md-auto="true" :md-infinite="true" :md-duration="8000">
<md-boards :md-auto="true" :md-infinite="true" :md-duration="5000" :md-swipeable="true">
<md-board id="slide1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-board>
@ -74,7 +86,7 @@
<div slot="code">
<code-block lang="xml">
&lt;md-boards :md-auto=&quot;true&quot; :md-infinite=&quot;true&quot; :md-duration=&quot;3000&quot;&gt;
&lt;md-boards :md-auto=&quot;true&quot; :md-infinite=&quot;true&quot; :md-duration=&quot;5000&quot; :md-swipeable=&quot;true&quot;&gt;
&lt;md-board id=&quot;slide1&quot;&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
&lt;/md-board&gt;

69
src/components/mdOnboarding/mdBoards.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="md-boards" :class="[themeClass, boardClasses]">
<div class="md-boards-content" ref="boardContent" :style="{ height: contentHeight }">
<div class="md-boards-content" ref="boardsContent" :style="{ height: contentHeight }">
<div class="md-boards-wrapper" :style="{ transform: `translate3D(-${contentWidth}, 0, 0)` }">
<slot></slot>
</div>
@ -87,6 +87,11 @@
mdInfinite: {
type: Boolean,
default: false
},
mdSwipeable: Boolean,
mdSwipeDistance: {
type: Number,
default: 100
}
},
mixins: [theme],
@ -164,7 +169,7 @@
},
observeElementChanges() {
this.parentObserver = new MutationObserver(throttle(this.calculateOnWatch, 50));
this.parentObserver.observe(this.$refs.boardContent, {
this.parentObserver.observe(this.$refs.boardsContent, {
childList: true,
attributes: true,
subtree: true
@ -240,7 +245,7 @@
}, this.mdDuration);
},
setActiveBoard(boardData, reset) {
if (reset) {
if (this.mdAuto && reset) {
this.start();
}
this.hasIcons = !!boardData.icon;
@ -275,6 +280,40 @@
this.setActiveBoard(this.boardList[firstBoard], true);
}
},
isHorizontallyInside(positionX) {
return positionX > this.mountedRect.left && positionX < this.mountedRect.left + this.mountedRect.width;
},
isVerticallyInside(positionY) {
return positionY > this.mountedRect.top && positionY < this.mountedRect.top + this.mountedRect.height;
},
handleTouchStart(event) {
this.mountedRect = this.$refs.boardsContent.getBoundingClientRect();
const positionX = event.changedTouches[0].clientX;
const positionY = event.changedTouches[0].clientY;
if (this.isHorizontallyInside(positionX) && this.isVerticallyInside(positionY)) {
this.initialTouchPosition = positionX;
this.canMove = true;
}
},
handleTouchEnd(event) {
if (this.canMove) {
const positionX = event.changedTouches[0].clientX;
const difference = this.initialTouchPosition - positionX;
const action = difference > 0
? 'moveNextBoard'
: 'movePrevBoard';
if (Math.abs(difference) > this.mdSwipeDistance) {
this[action]();
}
this.canMove = false;
this.initialTouchPosition = null;
}
}
},
mounted() {
@ -287,12 +326,20 @@
this.setActiveBoard(this.boardList[firstBoard]);
}
});
/* automatic behaviour */
if (this.mdAuto) {
this.start();
}
if (this.mdSwipeable) {
this.mountedRect = this.$refs.boardsContent.getBoundingClientRect();
this.initialTouchPosition = null;
this.canMove = false;
document.addEventListener('touchstart', this.handleTouchStart);
document.addEventListener('touchend', this.handleTouchEnd);
}
if (this.mdAuto) {
this.start();
}
});
},
beforeDestroy() {
if (this.parentObserver) {
@ -304,6 +351,12 @@
}
window.removeEventListener('resize', this.calculateOnResize);
if (this.mdSwipeable) {
document.removeEventListener('touchstart', this.handleTouchStart);
document.removeEventListener('touchend', this.handleTouchEnd);
}
}
};
</script>