dbismut

// OPTION 1
// Close Icon managed by CTO, alert managed by CTO

TryOn.init({
  events: {
    close: () => {
      window.modal.close(); // closes the popin embedding the CTO experience
    }
  }
});

dbismut

{
  "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

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

state = {
  dragProgress: 0,
  closeInverted: false,
};

onScroll = () => {
  /* same code */
  
  // handling close icon color
  const threshold = scrollTop / CLOSE_INVERTED_THRESHOLD;

dbismut

.close.invert {
  background: #000;
  &::after,
  &::before {
    background: #fff;
  }
}

dbismut

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

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

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

.page-post {
  &.post-exit,
  &.post-enter {
    .content,
    .close,
    .underlay {
      opacity: 0;
    }
    .underlay {
      transition-delay: 0;

dbismut

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();
  }