Skip to content

Commit f1c7d53

Browse files
nazaninreihaninazaninreihani
committed
Add autoreverse
1 parent acea051 commit f1c7d53

File tree

4 files changed

+81
-25
lines changed

4 files changed

+81
-25
lines changed

‎demo/App.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,10 @@
168168
<input type="checkbox" v-model="revertDirection">
169169
Revert Direction
170170
</label>
171+
<label class="checkbox" style="display: flex; align-items: center; padding-right: 1rem;">
172+
<input type="checkbox" v-model="autoReverse">
173+
Auto Reverse Direction
174+
</label>
171175
</div>
172176
</div>
173177
<div class="columns">
@@ -201,6 +205,7 @@
201205
:icon-size="iconSizes"
202206
:position-type="positionType"
203207
:revert-direction="revertDirection"
208+
:auto-reverse="autoReverse"
204209
:bg-color="colors.hex"
205210
:main-icon="mainIcon"
206211
:main-tooltip="mainTooltip"
@@ -274,6 +279,7 @@
274279
position: 'bottom-right',
275280
positionType: 'fixed',
276281
revertDirection: false,
282+
autoReverse: false,
277283
tooltipEvent: 'hover',
278284
iconSizes: 'medium',
279285
colors: defaultProps,

‎dist/build.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/build.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/FAB.vue‎

Lines changed: 72 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<div :id="position + '-wrapper'" class="fab-wrapper" v-on-clickaway="away"
3-
:style="[ pos, {zIndex: zIndex}, {position: positionType} ]">
3+
:style="[ pos, {zIndex: zIndex}, {position: positionType} ]"
4+
:ref="fabWrapper">
45
<div :id="position + '-action'" class="actions-container" :style="listPos">
56
<transition name="fab-actions-appear"
67
:enter-active-class="transitionEnter"
@@ -84,6 +85,8 @@
8485
toggle: this.startOpened,
8586
pos: {},
8687
tooltipPosition: 'left',
88+
hasReachedEnd: false,
89+
fabWrapper: 'fabWrapper'
8790
}
8891
},
8992
props: {
@@ -135,6 +138,9 @@
135138
toggleWhenAway: {
136139
default: true
137140
},
141+
autoReverse: {
142+
default: false,
143+
}
138144
},
139145
computed: {
140146
actionIconSize() {
@@ -200,36 +206,50 @@
200206
return '64px';
201207
}
202208
},
203-
listPadding() {
209+
topListPadding() {
210+
switch (this.iconSize) {
211+
case 'small':
212+
return '58px';
213+
break;
214+
case 'medium':
215+
return '74px';
216+
break;
217+
case 'large':
218+
return '92px';
219+
break;
220+
default:
221+
return '74px';
222+
}
223+
},
224+
bottomListPadding() {
225+
// mainIconSize + (paddingAmount) / 2 + 20
204226
switch (this.iconSize) {
205227
case 'small':
206-
return '72px';
228+
return '48px';
207229
break;
208230
case 'medium':
209-
return '88px';
231+
return '52px';
210232
break;
211233
case 'large':
212-
return '106px';
234+
return '58px';
213235
break;
214236
default:
215-
return '88px';
237+
return '52px';
216238
}
217239
},
218240
listPos() {
219241
if (this.position === 'top-right' || this.position === 'top-left') {
220242
return {
221-
top: this.revertDirection ? 'unset' : '-20px',
222-
bottom: this.revertDirection ? this.listPadding : 'unset',
223-
paddingTop: '20px',
224-
position: this.revertDirection ? 'absolute' : 'relative',
243+
top: this.allowRevertDirection ? 'unset' : this.topListPadding,
244+
bottom: this.allowRevertDirection ? this.topListPadding : 'unset',
245+
position: this.allowRevertDirection ? 'absolute' : 'absolute',
225246
width: this.listSize,
226247
}
227248
}
228249
return {
229-
bottom: this.revertDirection ? 'unset' : '-20px',
230-
top: this.revertDirection ? '40px' : 'unset',
231-
paddingBottom: '20px',
232-
position: this.revertDirection ? 'absolute' : 'relative',
250+
bottom: this.allowRevertDirection ? 'unset' : this.topListPadding,
251+
top: this.allowRevertDirection ? this.topListPadding : 'unset',
252+
position: this.allowRevertDirection ? 'absolute' : 'absolute',
233253
width: this.listSize
234254
}
235255
},
@@ -244,18 +264,18 @@
244264
animation() {
245265
if (this.position === 'top-right' || this.position === 'top-left') {
246266
return {
247-
enter: this.revertDirection ? 'animated quick fadeInUp' : 'animated quick fadeInDown',
248-
leave: this.revertDirection ? 'animated quick fadeOutDown' : 'animated quick fadeOutUp'
267+
enter: this.allowRevertDirection ? 'animated quick fadeInUp' : 'animated quick fadeInDown',
268+
leave: this.allowRevertDirection ? 'animated quick fadeOutDown' : 'animated quick fadeOutUp'
249269
};
250270
} else if (this.position === 'bottom-right' || this.position === 'bottom-left') {
251271
return {
252-
enter: this.revertDirection ? 'animated quick fadeInDown' : 'animated quick fadeInUp',
253-
leave: this.revertDirection ? 'animated quick fadeOutUp' : 'animated quick fadeOutDown'
272+
enter: this.allowRevertDirection ? 'animated quick fadeInDown' : 'animated quick fadeInUp',
273+
leave: this.allowRevertDirection ? 'animated quick fadeOutUp' : 'animated quick fadeOutDown'
254274
};
255275
} else {
256276
return {
257-
enter: this.revertDirection ? 'animated fadeInDown' : 'animated fadeInUp',
258-
leave: this.revertDirection ? 'animated fadeOutUp' : 'animated fadeOutDown'
277+
enter: this.allowRevertDirection ? 'animated fadeInDown' : 'animated fadeInUp',
278+
leave: this.allowRevertDirection ? 'animated fadeOutUp' : 'animated fadeOutDown'
259279
};
260280
}
261281
},
@@ -266,6 +286,10 @@
266286
}
267287
268288
return 'hover';
289+
},
290+
allowRevertDirection() {
291+
return this.revertDirection ||
292+
(this.positionType === 'absolute' && this.autoReverse && this.hasReachedEnd);
269293
}
270294
},
271295
methods: {
@@ -332,6 +356,20 @@
332356
},
333357
afterActionsTransitionEnter() {
334358
this.showTooltip();
359+
},
360+
setHasReachedEnd(hasReachedEnd) {
361+
if (this.hasReachedEnd !== hasReachedEnd) {
362+
this.hasReachedEnd = hasReachedEnd;
363+
}
364+
},
365+
handleScroll(event) {
366+
const bounding = this.$refs.fabWrapper.getBoundingClientRect();
367+
if (this.position === 'top-right' || this.position === 'top-left') {
368+
const limit = (window.innerHeight || document.documentElement.clientHeight) - 180;
369+
this.setHasReachedEnd(bounding.top >= limit);
370+
} else {
371+
this.setHasReachedEnd(bounding.bottom <= 200);
372+
}
335373
}
336374
},
337375
watch: {
@@ -342,17 +380,27 @@
342380
this.moveTransition();
343381
this.tooltipPos();
344382
});
383+
},
384+
autoReverse(val, oldVal){
385+
if (val !== oldVal && !val) {
386+
if (val) window.addEventListener('scroll', this.handleScroll);
387+
else window.removeEventListener('scroll', this.handleScroll);
388+
}
345389
}
346390
},
347391
mounted() {
348392
this.moveTransition();
349393
},
350394
created() {
351395
this.setPosition();
396+
if (this.autoReverse) window.addEventListener('scroll', this.handleScroll);
352397
353398
if (this.startOpened) {
354399
this.showTooltip(this.tooltipTimeOutWhenStartOpened);
355400
}
401+
},
402+
destroyed() {
403+
if (this.autoReverse) window.removeEventListener('scroll', this.handleScroll);
356404
}
357405
}
358406
</script>
@@ -461,11 +509,13 @@
461509
/*width: 50px;*/
462510
/*height: 50px;*/
463511
padding: 10px;
464-
margin-top: 2vh;
512+
margin-top: 1vh;
513+
margin-bottom: 1vh;
465514
display: flex;
466515
align-items: center;
467516
border-radius: 100px;
468517
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.20), 0 4px 4px rgba(0, 0, 0, 0.15);
518+
z-index: 15;
469519
}
470520
471521
.fab-list li .material-icons {
@@ -480,10 +530,10 @@
480530
ul {
481531
list-style-type: none;
482532
padding: 0 !important;
533+
z-index: 10;
483534
}
484535
485536
.fab-wrapper .actions-container {
486-
overflow: hidden;
487537
z-index: 0;
488538
position: relative;
489539
display: flex;

0 commit comments

Comments
 (0)