Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adding the ability to revert list at all time or when the list is going out of view #37

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
+105 −17
Open

adding the ability to revert list at all time or when the list is going out of view #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
acea051
add ed commit of the following:
nazaninreihani Sep 17, 2019
f1c7d53
Add autoreverse
nazaninreihani Sep 17, 2019
d1d350d
default autoreverse
nazaninreihani Sep 17, 2019
91977f5
default auto reverse in demo
nazaninreihani Sep 17, 2019
6ca6991
build
nazaninreihani Sep 17, 2019
f15cdac
update readme
nazaninreihani Sep 17, 2019
f58f19c
remove unused code
nazaninreihani Sep 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ And
| `bg-color` | String | <b>Default '#333333'</b><br> Accepts all color formats: HEX, RGB & RGBA |
| `position` | String | <b>Default 'bottom-left'</b> <br>Options: 'bottom-left', 'bottom-right', 'top-left','top-right' |
| `position-type` | String | <b>Default 'fixed'</b> <br>Options: 'fixed' or 'absolute'|
| `revert-direction` | Boolean | <b>Default 'false'</b> <br> if true the direction of list will be reverted |
| `auto-reverse` | Boolean | <b>Default 'true'</b> <br> if true the direction of list will be reverted when the list is reaching end of the view but the button is available, can be used to prevent the list rendering outside view |
| `z-index` | String | <b>Default '999'</b> <br>Set any value that suits your needs. |
| `ripple-show` | Boolean | <b>Default true</b> <br>Options: true or false. |
| `ripple-color` | String | <b>Default 'light'</b> <br>Options: 'light' or 'dark'. |
Expand Down
12 changes: 12 additions & 0 deletions demo/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,14 @@
<input type="checkbox" v-model="enableRotation">
Enable Rotation
</label>
<label class="checkbox" style="display: flex; align-items: center; padding-right: 1rem;">
<input type="checkbox" v-model="revertDirection">
Revert Direction
</label>
<label class="checkbox" style="display: flex; align-items: center; padding-right: 1rem;">
<input type="checkbox" v-model="autoReverse">
Auto Reverse Direction
</label>
</div>
</div>
<div class="columns">
Expand Down Expand Up @@ -196,6 +204,8 @@
:position="position"
:icon-size="iconSizes"
:position-type="positionType"
:revert-direction="revertDirection"
:auto-reverse="autoReverse"
:bg-color="colors.hex"
:main-icon="mainIcon"
:main-tooltip="mainTooltip"
Expand Down Expand Up @@ -268,6 +278,8 @@
],
position: 'bottom-right',
positionType: 'fixed',
revertDirection: false,
autoReverse: true,
tooltipEvent: 'hover',
iconSizes: 'medium',
colors: defaultProps,
Expand Down
4 changes: 2 additions & 2 deletions dist/build.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/build.js.map
View file
Open in desktop

Large diffs are not rendered by default.

102 changes: 88 additions & 14 deletions src/FAB.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<div :id="position + '-wrapper'" class="fab-wrapper" v-on-clickaway="away"
:style="[ pos, {zIndex: zIndex}, {position: positionType} ]">
:style="[ pos, {zIndex: zIndex}, {position: positionType} ]"
:ref="fabWrapper">
<div :id="position + '-action'" class="actions-container" :style="listPos">
<transition name="fab-actions-appear"
:enter-active-class="transitionEnter"
Expand Down Expand Up @@ -83,7 +84,9 @@
return {
toggle: this.startOpened,
pos: {},
tooltipPosition: 'left'
tooltipPosition: 'left',
hasReachedEnd: false,
fabWrapper: 'fabWrapper'
}
},
props: {
Expand All @@ -96,6 +99,9 @@
positionType: {
default: 'fixed',
},
revertDirection: {
default: false,
},
zIndex: {
default: '999',
},
Expand Down Expand Up @@ -132,6 +138,9 @@
toggleWhenAway: {
default: true
},
autoReverse: {
default: true,
}
},
computed: {
actionIconSize() {
Expand Down Expand Up @@ -182,16 +191,50 @@
return '32px';
}
},
listSize() {
switch (this.iconSize) {
case 'small':
return '56px';
break;
case 'medium':
return '64px';
break;
case 'large':
return '86px';
break;
default:
return '64px';
}
},
listPadding() {
switch (this.iconSize) {
case 'small':
return '58px';
break;
case 'medium':
return '74px';
break;
case 'large':
return '92px';
break;
default:
return '74px';
}
},
listPos() {
if (this.position === 'top-right' || this.position === 'top-left') {
return {
top: '-20px',
paddingTop: '20px'
top: this.allowRevertDirection ? 'unset' : this.listPadding,
bottom: this.allowRevertDirection ? this.listPadding : 'unset',
position: this.allowRevertDirection ? 'absolute' : 'absolute',
width: this.listSize,
}
}
return {
bottom: '-20px',
paddingBottom: '20px'
bottom: this.allowRevertDirection ? 'unset' : this.listPadding,
top: this.allowRevertDirection ? this.listPadding : 'unset',
position: this.allowRevertDirection ? 'absolute' : 'absolute',
width: this.listSize
}
},
transitionEnter() {
Expand All @@ -205,18 +248,18 @@
animation() {
if (this.position === 'top-right' || this.position === 'top-left') {
return {
enter: 'animated quick fadeInDown',
leave: 'animated quick fadeOutUp'
enter: this.allowRevertDirection ? 'animated quick fadeInUp' : 'animated quick fadeInDown',
leave: this.allowRevertDirection ? 'animated quick fadeOutDown' : 'animated quick fadeOutUp'
};
} else if (this.position === 'bottom-right' || this.position === 'bottom-left') {
return {
enter: 'animated quick fadeInUp',
leave: 'animated quick fadeOutDown'
enter: this.allowRevertDirection ? 'animated quick fadeInDown' : 'animated quick fadeInUp',
leave: this.allowRevertDirection ? 'animated quick fadeOutUp' : 'animated quick fadeOutDown'
};
} else {
return {
enter: 'animated fadeInUp',
leave: 'animated fadeOutDown'
enter: this.allowRevertDirection ? 'animated fadeInDown' : 'animated fadeInUp',
leave: this.allowRevertDirection ? 'animated fadeOutUp' : 'animated fadeOutDown'
};
}
},
Expand All @@ -227,6 +270,10 @@
}

return 'hover';
},
allowRevertDirection() {
return this.revertDirection ||
(this.positionType === 'absolute' && this.autoReverse && this.hasReachedEnd);
}
},
methods: {
Expand Down Expand Up @@ -293,6 +340,20 @@
},
afterActionsTransitionEnter() {
this.showTooltip();
},
setHasReachedEnd(hasReachedEnd) {
if (this.hasReachedEnd !== hasReachedEnd) {
this.hasReachedEnd = hasReachedEnd;
}
},
handleScroll(event) {
const bounding = this.$refs.fabWrapper.getBoundingClientRect();
if (this.position === 'top-right' || this.position === 'top-left') {
const limit = (window.innerHeight || document.documentElement.clientHeight) - 180;
this.setHasReachedEnd(bounding.top >= limit);
} else {
this.setHasReachedEnd(bounding.bottom <= 200);
}
}
},
watch: {
Expand All @@ -303,17 +364,27 @@
this.moveTransition();
this.tooltipPos();
});
},
autoReverse(val, oldVal){
if (val !== oldVal) {
if (val) window.addEventListener('scroll', this.handleScroll);
else window.removeEventListener('scroll', this.handleScroll);
}
}
},
mounted() {
this.moveTransition();
},
created() {
this.setPosition();
if (this.autoReverse) window.addEventListener('scroll', this.handleScroll);

if (this.startOpened) {
this.showTooltip(this.tooltipTimeOutWhenStartOpened);
}
},
destroyed() {
if (this.autoReverse) window.removeEventListener('scroll', this.handleScroll);
}
}
</script>
Expand Down Expand Up @@ -422,7 +493,8 @@
/*width: 50px;*/
/*height: 50px;*/
padding: 10px;
margin-top: 2vh;
margin-top: 1vh;
margin-bottom: 1vh;
display: flex;
align-items: center;
border-radius: 100px;
Expand All @@ -444,9 +516,11 @@
}

.fab-wrapper .actions-container {
overflow: hidden;
z-index: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}

/* Rules for sizing the icon. */
Expand Down