Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

David Bismut dbismut

🏠
Working from home
View GitHub Profile
View .eslintrc.json
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"jest": true,
"node": true
},
"globals": {},
"parser": "/Users/david/repos/useAudioPlayer/node_modules/babel-eslint/lib/index.js",
@dbismut
dbismut / Post.js
Created Apr 9, 2018
Part 3 - changing the render to implement the close icon state
View Post.js
render() {
/* ... */
const { closeInverted, dragProgress } = this.state; // change the state
return (
/* same code */
// this will add the invert class
// when this.state.closeInverted is true
<div
@dbismut
dbismut / Post.js
Created Apr 9, 2018
Part 3 - Modifying the onScroll method for handling the closeInvert state
View Post.js
state = {
dragProgress: 0,
closeInverted: false,
};
onScroll = () => {
/* same code */
// handling close icon color
const threshold = scrollTop / CLOSE_INVERTED_THRESHOLD;
@dbismut
dbismut / Post.scss
Created Apr 9, 2018
Part 3 - Adding the invert class for the close icon
View Post.scss
.close.invert {
background: #000;
&::after,
&::before {
background: #fff;
}
}
@dbismut
dbismut / Post.js
Created Apr 9, 2018
Part 3 - Last details and animation width
View Post.js
executeEnteringTransition = (node, done) => {
/* same code */
const {
height: heightFrom,
top: topFrom,
scale: scaleFrom,
...mainFrom
} = this.from;
const { height: heightTo, top: topTo, scale: scaleTo, ...mainTo } = this.to;
@dbismut
dbismut / Post.js
Last active Apr 9, 2018
Part 3 - Setting scale for the preview node
View Post.js
getPreviewStyleAndPosition = () => {
const { top, width, height } = this.preview.getBoundingClientRect();
const transformMatrix = window.getComputedStyle(this.preview).transform;
// transformMatrix is either 'none', or a string in the form of
// matrix(0.965, 0, 0, 0.965, 0, 0)
const scale =
transformMatrix.indexOf('matrix') === 0
? parseFloat(transformMatrix.split(', ')[3])
@dbismut
dbismut / Preview.js
Last active Apr 9, 2018
Part 3 - Starting with Pressure.js
View Preview.js
import React, { PureComponent } from 'react';
import Pressure from 'pressure';
const PRESSED_SCALE = 0.95;
// minimum scale applied to the preview node
export default class Preview extends PureComponent {
state = { force: 0 };
timer = null;
@dbismut
dbismut / Post.scss
Last active Apr 9, 2018
Part 3 - Classes that will animate the underlay and close icon
View Post.scss
.page-post {
&.post-exit,
&.post-enter {
.content,
.close,
.underlay {
opacity: 0;
}
.underlay {
transition-delay: 0;
@dbismut
dbismut / Post.js
Last active Apr 9, 2018
Part 3 - Adding the .post-enter-started class
View Post.js
executeEnteringTransition = (node, done) => {
this.postStyler.set({ ...this.from, visibility: 'visible' });
node.classList.add('post-enter-started'); // add this line
/* same code */
complete: () => {
node.classList.remove('post-enter-started'); // add this line
done();
}
@dbismut
dbismut / Post.js
Created Apr 9, 2018
Part 2 - Fixing one last glitch
View Post.js
/* 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');