Progress

app/javascript/gabsocial/components/modal/focal_point_modal.js

@@ -1,121 +0,0 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import classNames from 'classnames';
-import { changeUploadCompose } from '../../actions/compose';
-import { getPointerPosition } from '../../utils/element_position';
-import ImageLoader from '../image_loader';
-
-const mapStateToProps = (state, { id }) => ({
-  media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),
-});
-
-const mapDispatchToProps = (dispatch, { id }) => ({
-
-  onSave: (x, y) => {
-    dispatch(changeUploadCompose(id, { focus: `${x.toFixed(2)},${y.toFixed(2)}` }));
-  },
-
-});
-
-export default
-@connect(mapStateToProps, mapDispatchToProps)
-class FocalPointModal extends ImmutablePureComponent {
-
-  static propTypes = {
-    media: ImmutablePropTypes.map.isRequired,
-  };
-
-  state = {
-    x: 0,
-    y: 0,
-    focusX: 0,
-    focusY: 0,
-    dragging: false,
-  };
-
-  componentWillMount () {
-    this.updatePositionFromMedia(this.props.media);
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if (this.props.media.get('id') !== nextProps.media.get('id')) {
-      this.updatePositionFromMedia(nextProps.media);
-    }
-  }
-
-  componentWillUnmount () {
-    document.removeEventListener('mousemove', this.handleMouseMove);
-    document.removeEventListener('mouseup', this.handleMouseUp);
-  }
-
-  handleMouseDown = e => {
-    document.addEventListener('mousemove', this.handleMouseMove);
-    document.addEventListener('mouseup', this.handleMouseUp);
-
-    this.updatePosition(e);
-    this.setState({ dragging: true });
-  }
-
-  handleMouseMove = e => {
-    this.updatePosition(e);
-  }
-
-  handleMouseUp = () => {
-    document.removeEventListener('mousemove', this.handleMouseMove);
-    document.removeEventListener('mouseup', this.handleMouseUp);
-
-    this.setState({ dragging: false });
-    this.props.onSave(this.state.focusX, this.state.focusY);
-  }
-
-  updatePosition = e => {
-    const { x, y } = getPointerPosition(this.node, e);
-    const focusX   = (x - .5) *  2;
-    const focusY   = (y - .5) * -2;
-
-    this.setState({ x, y, focusX, focusY });
-  }
-
-  updatePositionFromMedia = media => {
-    const focusX = media.getIn(['meta', 'focus', 'x']);
-    const focusY = media.getIn(['meta', 'focus', 'y']);
-
-    if (focusX && focusY) {
-      const x = (focusX /  2) + .5;
-      const y = (focusY / -2) + .5;
-
-      this.setState({ x, y, focusX, focusY });
-    } else {
-      this.setState({ x: 0.5, y: 0.5, focusX: 0, focusY: 0 });
-    }
-  }
-
-  setRef = c => {
-    this.node = c;
-  }
-
-  render () {
-    const { media } = this.props;
-    const { x, y, dragging } = this.state;
-
-    const width  = media.getIn(['meta', 'original', 'width']) || null;
-    const height = media.getIn(['meta', 'original', 'height']) || null;
-
-    return (
-      <div className='modal-root__modal focal-point-modal'>
-        <div className={classNames('focal-point', { dragging })} ref={this.setRef}>
-          <ImageLoader
-            previewSrc={media.get('preview_url')}
-            src={media.get('url')}
-            width={width}
-            height={height}
-          />
-
-          <div className='focal-point__reticle' style={{ top: `${y * 100}%`, left: `${x * 100}%` }} />
-          <div className='focal-point__overlay' onMouseDown={this.handleMouseDown} />
-        </div>
-      </div>
-    );
-  }
-
-}

app/javascript/gabsocial/components/modal/focal_point_modal/focal_point_modal.scss

@@ -1,36 +0,0 @@
-.focal-point-modal {
-  position: relative;
-
-  @include max-size(80vw, 80vh);
-}
-
-.focal-point {
-  position: relative;
-  cursor: pointer;
-  overflow: hidden;
-
-  &.dragging {
-    cursor: move;
-  }
-
-  img {
-    margin: auto;
-
-    @include max-size(80vw, 80vh);
-    @include size(auto);
-  }
-
-  &__reticle {
-    position: absolute;
-    transform: translate(-50%, -50%);
-    background: url('/assets/images/reticle.png') no-repeat 0 0;
-    box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
-
-    @include circle(100px);
-  }
-
-  &__overlay {
-    @include size(100%);
-    @include abs-position(0, auto, auto, 0);
-  }
-}

app/javascript/gabsocial/components/modal/modal_root.js

@@ -16,7 +16,6 @@ import MediaModal from './media_modal'
 import VideoModal from './video_modal'
 import BoostModal from './boost_modal'
 import ConfirmationModal from './confirmation_modal'
-import FocalPointModal from './focal_point_modal'
 import HotkeysModal from './hotkeys_modal'
 import ComposeModal from './compose_modal'
 import UnauthorizedModal from './unauthorized_modal'
@@ -29,7 +28,6 @@ const MODAL_COMPONENTS = {
   'COMPOSE': () => Promise.resolve({ default: ComposeModal }),
   'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }),
   'EMBED': EmbedModal,
-  'FOCAL_POINT': () => Promise.resolve({ default: FocalPointModal }),
   'HOTKEYS': () => Promise.resolve({ default: HotkeysModal }),
   'MEDIA': () => Promise.resolve({ default: MediaModal }),
   'MUTE': MuteModal,