-
Notifications
You must be signed in to change notification settings - Fork 161
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1e437bc
commit 075fe4f
Showing
27 changed files
with
1,290 additions
and
8 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| .DS_Store | ||
| dist/ | ||
| npm-debug.log | ||
| node_modules | ||
| node_modules | ||
| .next |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| { | ||
| "name": "react-image-magnify", | ||
| "version": "1.0.0", | ||
| "description": "react-image-magnify example and demo", | ||
| "main": "index.js", | ||
| "author": "", | ||
| "license": "ISC", | ||
| "scripts": { | ||
| "dev": "next", | ||
| "build": "next build", | ||
| "start": "next start" | ||
| }, | ||
| "dependencies": { | ||
| "next": "^1.1.0", | ||
| "lodash.assign": "^4.2.0", | ||
| "lodash.clamp": "^4.0.3", | ||
| "react-cursor-position": "^1.1.0", | ||
| "react-hover-observer": "^1.1.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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import React, { Component } from 'react'; | ||
| import ReactImageMagnify from '../src/ReactImageMagnify'; | ||
|
|
||
| class App extends Component { | ||
| render() { | ||
| return ( | ||
| <div className="App"> | ||
| <div className="App-header"> | ||
| </div> | ||
| <ReactImageMagnify {...{ | ||
| largeImage: { | ||
| alt: 'Wrist watch face', | ||
| src: 'static/large-a.jpg', | ||
| width: 1200, | ||
| height: 1800 | ||
| }, | ||
| smallImage: { | ||
| alt: 'Wrist watch face', | ||
| src: 'static/large-a.jpg', | ||
| width: 400, | ||
| height: 600 | ||
| } | ||
| }} /> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default App; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import React, { Component } from 'react'; | ||
| import ReactImageMagnifyTouch from '../src/ReactImageMagnifyTouch'; | ||
|
|
||
| class App extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| imageWidth: 0, | ||
| imageHeight: 0 | ||
| }; | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| const rect = document.documentElement.getBoundingClientRect(); | ||
| const screenWidth = rect.width; | ||
| const imageWidth = screenWidth - 300; | ||
|
|
||
| this.setState({ | ||
| imageWidth, | ||
| imageHeight: imageWidth + (imageWidth / 2) | ||
| }); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div> | ||
| <ReactImageMagnifyTouch {...{ | ||
| style: { | ||
| margin: '20px auto 0' | ||
| }, | ||
| enlargedImageContainerStyle: { | ||
| left: '0px', | ||
| border: 'none', | ||
| margin: '0px' | ||
| }, | ||
| largeImage: { | ||
| alt: 'Wrist watch face', | ||
| src: 'static/large-a.jpg', | ||
| width: 1200, | ||
| height: 1800 | ||
| }, | ||
| smallImage: { | ||
| alt: 'Wrist watch face', | ||
| src: 'static/large-a.jpg', | ||
| width: 400, | ||
| height: 600 | ||
| } | ||
| }} /> | ||
| <div style={{ | ||
| width: '400px', | ||
| height: '2000px', | ||
| margin: '0 auto', | ||
| font: '22px Arial' | ||
| }}> | ||
| <p>Press (long touch) image to magnify. Pan (drag) to traverse image.</p> | ||
| <p>Note the page can be scrolled when touch begins on image.</p> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default App; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,170 @@ | ||
| import React, { PropTypes } from 'react'; | ||
| import clamp from 'lodash.clamp'; | ||
| import { Image } from './ReactImageMagnify'; | ||
|
|
||
| export const Point = PropTypes.shape({ | ||
| x: PropTypes.number.isRequired, | ||
| y: PropTypes.number.isRequired | ||
| }); | ||
|
|
||
| export const ImageShape = PropTypes.shape({ | ||
| alt: PropTypes.string, | ||
| src: PropTypes.string.isRequired, | ||
| width: PropTypes.number.isRequired, | ||
| height: PropTypes.number.isRequired | ||
| }); | ||
|
|
||
| export default React.createClass({ | ||
|
|
||
| displayName: 'EnlargedImage', | ||
|
|
||
| getInitialState() { | ||
| return { | ||
| isTransitionEntering: false, | ||
| isTransitionActive: false, | ||
| isTransitionLeaving: false, | ||
| isTransitionDone: false | ||
| }; | ||
| }, | ||
|
|
||
| getDefaultProps() { | ||
| return { | ||
| fadeDurationInMs: 0 | ||
| }; | ||
| }, | ||
|
|
||
| propTypes: { | ||
| containerClassName: PropTypes.string, | ||
| containerStyle: PropTypes.object, | ||
| cursorOffset: Point, | ||
| cursorPosition: Point, | ||
| fadeDurationInMs: PropTypes.number, | ||
| imageClassName: PropTypes.string, | ||
| imageStyle: PropTypes.object, | ||
| isHovering: PropTypes.bool, | ||
| largeImage: ImageShape, | ||
| smallImage: ImageShape | ||
| }, | ||
|
|
||
| componentWillReceiveProps(nextProps) { | ||
| const { isHovering } = nextProps; | ||
|
|
||
| if (isHovering) { | ||
| this.setState({ | ||
| isTransitionEntering: true | ||
| }); | ||
|
|
||
| setTimeout(() => { | ||
| this.setState({ | ||
| isTransitionEntering: false, | ||
| isTransitionActive: true | ||
| }); | ||
| }, 0); | ||
| } else { | ||
| this.setState({ | ||
| isTransitionActive: false, | ||
| isTransitionLeaving: true | ||
| }); | ||
|
|
||
| setTimeout(() => { | ||
| this.setState({ | ||
| isTransitionLeaving: false, | ||
| isTransitionDone: true | ||
| }); | ||
| }, this.props.fadeDurationInMs); | ||
| } | ||
| }, | ||
|
|
||
| render() { | ||
| const { | ||
| containerClassName, | ||
| containerStyle, | ||
| cursorOffset, | ||
| cursorPosition, | ||
| fadeDurationInMs, | ||
| imageClassName, | ||
| imageStyle, | ||
| isHovering, | ||
| largeImage, | ||
| smallImage, | ||
| } = this.props; | ||
|
|
||
| const { | ||
| isTransitionEntering, | ||
| isTransitionActive, | ||
| isTransitionLeaving | ||
| } = this.state; | ||
|
|
||
| const offsetRatio = { | ||
| x: largeImage.width / smallImage.width, | ||
| y: largeImage.height / smallImage.height | ||
| }; | ||
|
|
||
| const differentiatedImageCoordinates = { | ||
| x: (Math.round((cursorPosition.x - cursorOffset.x) * offsetRatio.x) * -1), | ||
| y: (Math.round((cursorPosition.y - cursorOffset.y) * offsetRatio.y) * -1) | ||
| }; | ||
|
|
||
| const minCoordinates = { | ||
| x: ((largeImage.width - smallImage.width) * -1), | ||
| y: ((largeImage.height - smallImage.height) * -1) | ||
| }; | ||
|
|
||
| const maxCoordinate = 0; | ||
|
|
||
| const imageCoordinates = { | ||
| x: clamp(differentiatedImageCoordinates.x, minCoordinates.x, maxCoordinate), | ||
| y: clamp(differentiatedImageCoordinates.y, minCoordinates.y, maxCoordinate) | ||
| }; | ||
|
|
||
| let isVisible; | ||
| if (isTransitionEntering || isTransitionActive || isTransitionLeaving) { | ||
| isVisible = true; | ||
| } else { | ||
| isVisible = false; | ||
| } | ||
|
|
||
| const defaultContainerStyle = { | ||
| marginLeft: '10px', | ||
| position: 'absolute', | ||
| left: '100%', | ||
| top: '0px', | ||
| border: '1px solid #d6d6d6', | ||
| overflow: 'hidden' | ||
| }; | ||
|
|
||
| const computedContainerStyle = { | ||
| width: smallImage.width, | ||
| height: smallImage.height, | ||
| opacity: this.state.isTransitionActive ? 1 : 0, | ||
| transition: `opacity ${fadeDurationInMs}ms ease-in` | ||
| }; | ||
|
|
||
| const translate = `translate(${imageCoordinates.x}px, ${imageCoordinates.y}px)`; | ||
|
|
||
| const computedImageStyle = { | ||
| width: largeImage.width, | ||
| height: largeImage.height, | ||
| transform: translate, | ||
| WebkitTransform: translate, | ||
| msTransform: translate | ||
| }; | ||
|
|
||
| const component = ( | ||
| <div { ...{ | ||
| className: containerClassName, | ||
| key: 'enlarged', | ||
| style: Object.assign({}, defaultContainerStyle, containerStyle, computedContainerStyle) | ||
| }}> | ||
| <img data-hover="false" { ...{ | ||
| alt: largeImage.alt, | ||
| className: imageClassName, | ||
| src: largeImage.src, | ||
| style: Object.assign({}, imageStyle, computedImageStyle) | ||
| }}/> | ||
| </div> | ||
| ); | ||
|
|
||
| return isVisible ? component : null; | ||
| } | ||
| }); |
Oops, something went wrong.