This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* other imports */ | |
import browser from 'bowser'; // the browser import | |
/* ... */ | |
executeEnteringTransition = (node, done) => { | |
this.postStyler.set({ ...this.from, visibility: 'visible' }); | |
const hidePreview = () => (this.preview.style.visibility = 'hidden'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.page-post .underlay { | |
position: fixed; | |
top: -10vh; | |
left: 0; | |
z-index: 0; | |
width: 100vw; | |
height: 120vh; | |
background-color: #fff; | |
transition: opacity 400ms ease; | |
&::before { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ... */ | |
<div | |
className={cn('page full-width page-post', { | |
'post-dragged': dragProgress > 0 | |
})} | |
> | |
<div className="underlay" /> | |
<div | |
ref={post => (this.post = post)} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
onScroll = () => { | |
const scrollTop = windowScroll.get('top'); | |
if (scrollTop < 0 && !this.isTransitioningFromDrag) { | |
if (this.isTouching) this.isDragging = true; | |
if (this.isDragging) { | |
if (scrollTop > -DRAG_THRESHOLD) { | |
const dragProgress = Math.min(1, -scrollTop / DRAG_LIMIT); | |
this.setState({ dragProgress }); | |
} else { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
addListeners = () => { | |
window.addEventListener('scroll', this.onScroll); | |
window.addEventListener('touchstart', this.onTouchStart); | |
window.addEventListener('touchend', this.onTouchEnd); | |
}; | |
removeListeners = () => { | |
window.removeEventListener('scroll', this.onScroll); | |
window.removeEventListener('touchend', this.onTouchEnd); | |
window.removeEventListener('touchstart', this.onTouchStart); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
executeEnteringTransition = (node, done) => { | |
/* same code */ | |
complete: () => { | |
tween({ from: windowScroll.get('top'), to: 0 }).start({ | |
update: v => windowScroll.set('top', v), | |
complete: () => { | |
// this removes all style from the post node | |
// and fixes the close icon position bug | |
// https://stackoverflow.com/questions/42660332/css-transform-parent-and-fixed-child-is-there-a-way-to-breakout-of-node-with-tr | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div className={cn('page full-width page-post', { 'post-dragged': dragProgress > 0 })}> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
onExit = () => { | |
this.removeListeners(); | |
if (!this.preview) return; | |
const scale = 1 - this.state.dragProgress * (1 - DRAG_MINIMUM_SCALE); | |
this.from = { | |
top: 0, | |
height: this.post.offsetHeight, | |
width: this.post.offsetWidth, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// .post-dragged rule is exactly the same | |
// as .post-enter | |
.page-post { | |
&.post-enter, | |
&.post-dragged { // add this rule | |
.post { | |
position: fixed; | |
overflow: hidden; | |
pointer-events: none; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
render() { | |
/* same code */ | |
const { dragProgress } = this.state; | |
const postStyle = | |
dragProgress > 0 | |
? { | |
transform: `scale(${1 - dragProgress * (1 - DRAG_MINIMUM_SCALE)})`, | |
borderRadius: dragProgress * 16 |