Introduce Positive Space Lens

ethanselzer · Apr 20, 2018 · 80325b9 · 80325b9
1 parent ba242dd
commit 80325b9
Show file tree

Hide file tree

Showing 20 changed files with 518 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -94,6 +94,8 @@ See more usage examples in the [example project](https://github.com/ethanselzer/
 | isHintEnabled               | Boolean| false   | Enable hint feature. |
 | hintTextMouse               | String |Hover to Zoom| Hint text for mouse. |
 | hintTextTouch               | String |Long-Touch to Zoom| Hint text for touch. |
+| shouldUsePositiveSpaceLens  | Boolean| false | Specify a positive space lens in place of the default negative space lens. |
+| lensComponent  | Function | (Provided) | Specify a custom lens component. |
 
 ### Small Image
 ```
@@ -179,6 +181,13 @@ Thanks to the following community members for opening Issues and Pull Requests.
 @spiderbites  
 @Akarshit  
 @eddy20vt  
+@evannoronha  
+@benjaminadk  
+@nilsklimm  
+@m4recek  
+@yaser-ali-vp  
+@carlgunderson  
+@tojvan  
 
 You are awesome! ✨💫
 

diff --git a/example/src/components/Header.js b/example/src/components/Header.js
@@ -39,6 +39,8 @@ class Navigation extends React.Component {
                 return 2.5;
             case '/external' :
                 return 2.6;
+            case '/lens' :
+                return 2.7;
             case '/image-magnify' :
                 return 3.1;
             case '/support' :
@@ -69,6 +71,7 @@ class Navigation extends React.Component {
                             <MenuItem eventKey={2.4} href="#/dimensions">Enlarged Image Container Dimensions</MenuItem>
                             <MenuItem eventKey={2.5} href="#/react-slick">Carousel Integration</MenuItem>
                             <MenuItem eventKey={2.6} href="#/external">External Enlarged Image</MenuItem>
+                            <MenuItem eventKey={2.7} href="#/lens">Alternate Lens</MenuItem>
                         </NavDropdown>
                         <NavItem href="https://github.com/ethanselzer/react-image-magnify#required-props">
                             Docs

diff --git a/example/src/components/Lens.js b/example/src/components/Lens.js
@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import ReactImageMagnify from '../pkg-lnk/ReactImageMagnify';
+import SpacedSpan from '../components/SpacedSpan';
+
+import '../styles/examples.css';
+
+import watchImg687 from '../images/wristwatch_687.jpg';
+import watchImg1200 from '../images/wristwatch_1200.jpg';
+
+export default class BasicExample extends Component {
+    render() {
+        return (
+            <div className="fluid">
+                <div className="fluid__image-container">
+                    <ReactImageMagnify {...{
+                        smallImage: {
+                            alt: 'Wristwatch by Ted Baker London',
+                            isFluidWidth: true,
+                            src: watchImg687,
+                        },
+                        largeImage: {
+                            src: watchImg1200,
+                            width: 1200,
+                            height: 1800
+                        },
+                        shouldUsePositiveSpaceLens: true
+                    }} />
+                </div>
+                <div className="fluid__instructions">
+                    <h3>Alternate Lens</h3>
+                    <p>
+                        Specify a positive space design
+                        in place of the default negative space design.
+                    </p>
+                    <p>
+                        Optionally override the default appearance by specifying a custom style, for example:
+                    </p>
+                    <pre>
+                        lensStyle: &#123;<br />
+                        &nbsp;&nbsp;background: 'hsla(0, 0%, 100%, .3)',<br />
+                        &nbsp;&nbsp;border: '1px solid #ccc'<br />
+                        &#125;
+                    </pre>
+                    <p>
+                        Support for a custom lens is provided by
+                        the <span className="code">lensComponent</span> prop.
+                    </p>
+                    <p>
+                        Please see
+                        <SpacedSpan>
+                            <a href="https://github.com/ethanselzer/react-image-magnify/blob/master/example/src/components/Lens.js">
+                                source code
+                            </a>
+                        </SpacedSpan>
+                        for details.
+                    </p>
+                </div>
+                <div style={{height: '500px'}} />
+            </div>
+        );
+    }
+}
diff --git a/example/src/pages/Home.js b/example/src/pages/Home.js
@@ -39,6 +39,7 @@ export default class extends Component {
                                     <NavItem href="#/dimensions">Enlarged Image Container Dimensions</NavItem>
                                     <NavItem href="#/react-slick">Carousel Integration</NavItem>
                                     <NavItem href="#/external">External Enlarged Image</NavItem>
+                                    <NavItem href="#/lens">Alternate Lens</NavItem>
                                 </Nav>
                             </Panel>
                         </Col>

diff --git a/example/src/pages/Lens.js b/example/src/pages/Lens.js
@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import {
+  Col,
+  Grid,
+  Jumbotron,
+  Row
+} from 'react-bootstrap';
+import Helmet from 'react-helmet';
+
+import Header from '../components/Header';
+import Lens from '../components/Lens';
+
+import 'bootstrap/dist/css/bootstrap.css';
+import '../styles/app.css';
+
+export default class extends Component {
+    render() {
+        return (
+            <div>
+                <Helmet title="Image Magnify | React Cursor Position" />
+                <Header {...this.props}/>
+                <Jumbotron>
+                    <Grid>
+                        <Row>
+                            <Col sm={12}>
+                            </Col>
+                        </Row>
+                    </Grid>
+                </Jumbotron>
+                <Grid>
+                    <Row>
+                        <Col sm={12}>
+                            <Lens />
+                        </Col>
+                    </Row>
+                </Grid>
+            </div>
+        );
+    }
+}
diff --git a/example/src/router.js b/example/src/router.js
@@ -7,6 +7,7 @@ import ResponsiveImages from './pages/ResponsiveImages';
 import Hint from './pages/Hint';
 import ReactSlickIntegration from './pages/ReactSlickIntegration';
 import EnlargedImageContainerDimensions from './pages/EnlargedImageContainerDimensions';
+import Lens from './pages/Lens';
 import FixedWidthSmallImage from './pages/FixedWidthSmallImage';
 import ExternalEnlargedImage from './pages/ExternalEnlargedImage';
 import Support from './pages/Support';
@@ -19,6 +20,7 @@ const Routes = (props) => (
         <Route path="/hint" component={Hint} />
         <Route path="/react-slick" component={ReactSlickIntegration} />
         <Route path="/dimensions" component={EnlargedImageContainerDimensions} />
+        <Route path="/lens" component={Lens} />
         <Route path="/fixed" component={FixedWidthSmallImage} />
         <Route path="/external" component={ExternalEnlargedImage} />
         <Route path="/support" component={Support} />

diff --git a/src/ReactImageMagnify.js b/src/ReactImageMagnify.js
@@ -5,7 +5,8 @@ import React from 'react';
 import ReactCursorPosition from 'react-cursor-position';
 
 import RenderEnlargedImage from './RenderEnlargedImage';
-import ShadedLens from './shaded-lens';
+import NegativeSpaceLens from './lens/negative-space';
+import PositiveSpaceLens from './lens/positive-space';
 import DisplayUntilActive from './hint/DisplayUntilActive';
 import Hint from './hint/DefaultHint';
 
@@ -66,6 +67,8 @@ class ReactImageMagnify extends React.Component {
         imageClassName: PropTypes.string,
         imageStyle: PropTypes.object,
         lensStyle: PropTypes.object,
+        lensComponent: PropTypes.func,
+        shouldUsePositiveSpaceLens: PropTypes.bool,
         smallImage: SmallImageShape,
         largeImage: LargeImageShape,
         enlargedImageContainerClassName: PropTypes.string,
@@ -96,7 +99,8 @@ class ReactImageMagnify extends React.Component {
         hintTextMouse: 'Hover to Zoom',
         hintTextTouch: 'Long-Touch to Zoom',
         hoverDelayInMs: 250,
-        hoverOffDelayInMs: 150
+        hoverOffDelayInMs: 150,
+        shouldUsePositiveSpaceLens: false
     };
 
     componentDidMount() {
@@ -249,6 +253,23 @@ class ReactImageMagnify extends React.Component {
         );
     }
 
+    get lensComponent() {
+        const {
+            shouldUsePositiveSpaceLens,
+            lensComponent
+        } = this.props;
+
+        if (lensComponent) {
+            return lensComponent
+        }
+
+        if (shouldUsePositiveSpaceLens) {
+            return PositiveSpaceLens;
+        }
+
+        return NegativeSpaceLens;
+    }
+
     render() {
         const {
             className,
@@ -293,6 +314,8 @@ class ReactImageMagnify extends React.Component {
             this.enlargedImageContainerDimensions
         );
 
+        const Lens = this.lensComponent;
+
         return (
             <ReactCursorPosition { ...{
                 className,
@@ -328,10 +351,9 @@ class ReactImageMagnify extends React.Component {
                     </DisplayUntilActive>
                 }
                 {this.shouldShowLens &&
-                    <ShadedLens {...{
+                    <Lens {...{
                         cursorOffset,
                         fadeDurationInMs,
-                        enlargedImageContainerDimensions: this.enlargedImageContainerDimensions,
                         smallImage,
                         style: lensStyle
                     }} />

diff --git a/src/shaded-lens/Lens.js → src/lens/negative-space/Lens.js b/src/shaded-lens/Lens.js → src/lens/negative-space/Lens.js
diff --git a/src/shaded-lens/LensBottom.js → src/lens/negative-space/LensBottom.js b/src/shaded-lens/LensBottom.js → src/lens/negative-space/LensBottom.js
@@ -2,7 +2,7 @@ import React from 'react';
 import objectAssign from 'object-assign';
 import clamp from 'clamp';
 import Lens from './Lens';
-import LensPropTypes from '../prop-types/Lens';
+import LensPropTypes from '../../prop-types/Lens';
 
 const LensBottom = ({
     cursorOffset,

diff --git a/src/shaded-lens/LensLeft.js → src/lens/negative-space/LensLeft.js b/src/shaded-lens/LensLeft.js → src/lens/negative-space/LensLeft.js
@@ -2,7 +2,7 @@ import React from 'react';
 import objectAssign from 'object-assign';
 import clamp from 'clamp';
 import Lens from './Lens';
-import LensPropTypes from '../prop-types/Lens';
+import LensPropTypes from '../../prop-types/Lens';
 
 const LensLeft = ({
     cursorOffset,

diff --git a/src/shaded-lens/LensRight.js → src/lens/negative-space/LensRight.js b/src/shaded-lens/LensRight.js → src/lens/negative-space/LensRight.js
@@ -2,7 +2,7 @@ import React from 'react';
 import objectAssign from 'object-assign';
 import clamp from 'clamp';
 import Lens from './Lens';
-import LensPropTypes from '../prop-types/Lens';
+import LensPropTypes from '../../prop-types/Lens';
 
 const LensRight = ({
     cursorOffset,

diff --git a/src/shaded-lens/LensTop.js → src/lens/negative-space/LensTop.js b/src/shaded-lens/LensTop.js → src/lens/negative-space/LensTop.js
@@ -2,7 +2,7 @@ import React from 'react';
 import clamp from 'clamp';
 import objectAssign from 'object-assign';
 import Lens from './Lens';
-import LensPropTypes from '../prop-types/Lens';
+import LensPropTypes from '../../prop-types/Lens';
 
 const LensTop = ({
     cursorOffset,

diff --git a/src/shaded-lens/index.js → src/lens/negative-space/index.js b/src/shaded-lens/index.js → src/lens/negative-space/index.js
@@ -6,9 +6,9 @@ import LensLeft from './LensLeft';
 import LensRight from './LensRight';
 import LensBottom from './LensBottom';
 
-import LensPropTypes from '../prop-types/Lens';
+import LensPropTypes from '../../prop-types/Lens';
 
-export default function ImageLensShaded(inputProps) {
+export default function NegativeSpaceLens(inputProps) {
     const { style: userSpecifiedStyle } = inputProps;
 
     const compositLensStyle = objectAssign(
@@ -32,4 +32,4 @@ export default function ImageLensShaded(inputProps) {
     );
 }
 
-ImageLensShaded.propTypes = LensPropTypes;
+NegativeSpaceLens.propTypes = LensPropTypes;
diff --git a/src/lens/positive-space/assets/texture.gif b/src/lens/positive-space/assets/texture.gif
diff --git a/src/lens/positive-space/assets/textured-lens-data-uri.js b/src/lens/positive-space/assets/textured-lens-data-uri.js