From 84865fbfd21441399c000b88562ad88123284c68 Mon Sep 17 00:00:00 2001
From: Ethan Selzer <ethanselzer@gmail.com>
Date: Sun, 1 Apr 2018 22:02:38 -0700
Subject: [PATCH] Example: Add Hint and Responsive Images + Updates

---
 example/src/components/ReactSlick.js          | 16 +++---
 example/src/pages/Basic.js                    | 53 +++++++++++++++++
 .../pages/EnlargedImageContainerDimensions.js | 18 +++---
 example/src/pages/ExternalEnlargedImage.js    |  9 +--
 example/src/pages/FixedWidthSmallImage.js     | 11 ++--
 example/src/pages/Hint.js                     | 57 +++++++++++++++++++
 example/src/pages/ReactSlick.js               |  2 +-
 .../{SideBySide.js => ResponsiveImages.js}    | 37 ++++++------
 example/src/router.js                         |  8 ++-
 9 files changed, 159 insertions(+), 52 deletions(-)
 create mode 100644 example/src/pages/Basic.js
 create mode 100644 example/src/pages/Hint.js
 rename example/src/pages/{SideBySide.js => ResponsiveImages.js} (81%)

diff --git a/example/src/components/ReactSlick.js b/example/src/components/ReactSlick.js
index 97300f57..68682f7c 100644
--- a/example/src/components/ReactSlick.js
+++ b/example/src/components/ReactSlick.js
@@ -69,19 +69,19 @@ export default class ReactSlickExample extends Component {
                     <div key={index}>
                         <ReactImageMagnify
                             {...{
-                                largeImage: {
-                                    alt: '',
-                                    src: src.large,
-                                    width: 1426,
-                                    height: 2000
-                                },
                                 smallImage: {
-                                    isFluidWidth: true,
                                     alt: 'Wristwatch by Versace',
+                                    isFluidWidth: true,
                                     src: src.small,
                                     srcSet: src.srcSet,
                                     sizes: '(max-width: 480px) 100vw, (max-width: 1200px) 30vw, 360px'
-                                }
+                                },
+                                largeImage: {
+                                    src: src.large,
+                                    width: 1426,
+                                    height: 2000
+                                },
+                                lensStyle: { backgroundColor: 'rgba(0,0,0,.6)' }
                             }}
                             {...rimProps}
                         />
diff --git a/example/src/pages/Basic.js b/example/src/pages/Basic.js
new file mode 100644
index 00000000..eb191241
--- /dev/null
+++ b/example/src/pages/Basic.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import ReactImageMagnify from '../pkg-lnk/ReactImageMagnify';
+import SpacedSpan from '../components/SpacedSpan';
+
+import './app.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
+                        }
+                    }} />
+                </div>
+                <div className="fluid__instructions">
+                    <h3>Basic Example</h3>
+                    <p>
+                        Side by Side enlargement for mouse input.
+                    </p>
+                    <p>
+                        In place enlargement for touch input.
+                    </p>
+                    <p>
+                        Fluid between breakpoints.
+                    </p>
+                    <p>
+                        Please see
+                        <SpacedSpan>
+                            <a href="https://github.com/ethanselzer/react-image-magnify/blob/master/example/src/pages/Basic.js">
+                                source code
+                            </a>
+                        </SpacedSpan>
+                        for details.
+                    </p>
+                </div>
+                <div style={{height: '500px'}} />
+            </div>
+        );
+    }
+}
diff --git a/example/src/pages/EnlargedImageContainerDimensions.js b/example/src/pages/EnlargedImageContainerDimensions.js
index b974f188..20e3c0e4 100644
--- a/example/src/pages/EnlargedImageContainerDimensions.js
+++ b/example/src/pages/EnlargedImageContainerDimensions.js
@@ -38,20 +38,18 @@ export default class EnlargedImageContainerDimensions extends Component {
             <div className="fluid">
                 <div className="fluid__image-container">
                     <ReactImageMagnify {...{
-                        largeImage: {
-                            alt: '',
-                            src: watchImg1200,
-                            width: 1200,
-                            height: 1800
-                        },
-                        smallImage: {
-                            isFluidWidth: true,
+                         smallImage: {
                             alt: 'Wristwatch by Ted Baker London',
+                            isFluidWidth: true,
                             src: watchImg1200,
                             srcSet: this.srcSet,
                             sizes: '(max-width: 480px) 100vw, (max-width: 1200px) 30vw, 360px'
                         },
-                        isHintEnabled: true,
+                        largeImage: {
+                            src: watchImg1200,
+                            width: 1200,
+                            height: 1800
+                        },
                         enlargedImageContainerDimensions: {
                             width: '200%',
                             height: '100%'
@@ -67,7 +65,7 @@ export default class EnlargedImageContainerDimensions extends Component {
                         May be percentage for one dimension and number for the other.
                     </p>
                     <p>
-                        Exmample specifies width of
+                        This example specifies width of
                         <SpacedSpan className="code">200%</SpacedSpan>
                         and height of
                         <SpacedSpan className="code">100%.</SpacedSpan>
diff --git a/example/src/pages/ExternalEnlargedImage.js b/example/src/pages/ExternalEnlargedImage.js
index 690fe950..7b052a06 100644
--- a/example/src/pages/ExternalEnlargedImage.js
+++ b/example/src/pages/ExternalEnlargedImage.js
@@ -12,14 +12,7 @@ export default class ReactSlickExample extends Component {
                 <div className="fluid__image-container">
                     <ReactSlick {...{
                         rimProps: {
-                            isHintEnabled: true,
-                            shouldHideHintAfterFirstActivation: false,
-                            enlargedImagePortalId: 'portal',
-                            enlargedImageContainerDimensions: {
-                                width: '150%',
-                                height: '100%'
-                            },
-                            lensStyle: { backgroundColor: 'rgba(0,0,0,.6)' }
+                            enlargedImagePortalId: 'portal'
                         }
                     }}/>
                 </div>
diff --git a/example/src/pages/FixedWidthSmallImage.js b/example/src/pages/FixedWidthSmallImage.js
index 18fc4239..b1eda3e0 100644
--- a/example/src/pages/FixedWidthSmallImage.js
+++ b/example/src/pages/FixedWidthSmallImage.js
@@ -11,18 +11,17 @@ export default class extends Component {
             <div className="fluid">
                 <div className="fluid__image-container">
                     <ReactImageMagnify {...{
-                        largeImage: {
-                            alt: '',
-                            src: watchImg,
-                            width: 1200,
-                            height: 1800
-                        },
                         smallImage: {
                             alt: 'Wristwatch by Ted Baker London',
                             src: watchImg,
                             width: 300,
                             height: 450
                         },
+                        largeImage: {
+                            src: watchImg,
+                            width: 1200,
+                            height: 1800
+                        },
                         isHintEnabled: true
                     }} />
                 </div>
diff --git a/example/src/pages/Hint.js b/example/src/pages/Hint.js
new file mode 100644
index 00000000..7e4dace5
--- /dev/null
+++ b/example/src/pages/Hint.js
@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import ReactImageMagnify from '../pkg-lnk/ReactImageMagnify';
+import SpacedSpan from '../components/SpacedSpan';
+
+import './app.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
+                        },
+                        isHintEnabled: true
+                    }} />
+                </div>
+                <div className="fluid__instructions">
+                    <h3>Hint Example</h3>
+                    <p>
+                        Helps inform users of zoom feature.
+                    </p>
+                    <p>
+                        Configurable text for mouse and touch inputs. English defaults provided.
+                    </p>
+                    <p>
+                        Custom component option.
+                    </p>
+                    <p>
+                        Hidden after first interaction by default.
+                    </p>
+                    <p>
+                        Please see
+                        <SpacedSpan>
+                            <a href="https://github.com/ethanselzer/react-image-magnify/blob/master/example/src/pages/Hint.js">
+                                source code
+                            </a>
+                        </SpacedSpan>
+                        for details.
+                    </p>
+                </div>
+                <div style={{height: '500px'}} />
+            </div>
+        );
+    }
+}
diff --git a/example/src/pages/ReactSlick.js b/example/src/pages/ReactSlick.js
index 86f2dfb0..4826efd8 100644
--- a/example/src/pages/ReactSlick.js
+++ b/example/src/pages/ReactSlick.js
@@ -45,7 +45,7 @@ export default class ReactSlickExample extends Component {
                     <p>
                         Initial file size optimized via
                         <SpacedSpan className="code">
-                            srcSet
+                            srcset
                         </SpacedSpan>
                         and
                         <SpacedSpan className="code">
diff --git a/example/src/pages/SideBySide.js b/example/src/pages/ResponsiveImages.js
similarity index 81%
rename from example/src/pages/SideBySide.js
rename to example/src/pages/ResponsiveImages.js
index c6204502..526f3f1a 100644
--- a/example/src/pages/SideBySide.js
+++ b/example/src/pages/ResponsiveImages.js
@@ -38,37 +38,29 @@ export default class BasicExample extends Component {
             <div className="fluid">
                 <div className="fluid__image-container">
                     <ReactImageMagnify {...{
-                        largeImage: {
-                            alt: '',
-                            src: watchImg1200,
-                            width: 1200,
-                            height: 1800
-                        },
                         smallImage: {
-                            isFluidWidth: true,
                             alt: 'Wristwatch by Ted Baker London',
+                            isFluidWidth: true,
                             src: watchImg1200,
                             srcSet: this.srcSet,
                             sizes: '(max-width: 480px) 100vw, (max-width: 1200px) 30vw, 360px'
                         },
-                        isHintEnabled: true
+                        largeImage: {
+                            src: watchImg1200,
+                            width: 1200,
+                            height: 1800
+                        }
                     }} />
                 </div>
                 <div className="fluid__instructions">
-                    <h3>Basic Example</h3>
-                    <p>
-                        Side by Side enlargement for mouse input.
-                    </p>
-                    <p>
-                        In place enlargement for touch input.
-                    </p>
+                    <h3>Responsive Images Example</h3>
                     <p>
                         Fluid between breakpoints.
                     </p>
                     <p>
                         Initial file size optimized via
                         <SpacedSpan className="code">
-                            srcSet
+                            srcset
                         </SpacedSpan>
                         and
                         <SpacedSpan className="code">
@@ -76,10 +68,21 @@ export default class BasicExample extends Component {
                         </SpacedSpan>
                         attributes.
                     </p>
+                    <p>
+                        For more information on responsive images, please try these resources:
+                        <br />
+                        <a href="https://cloudfour.com/thinks/responsive-images-101-definitions">
+                            Responsive Images 101
+                        </a>
+                        <br />
+                        <a href="https://bitsofco.de/the-srcset-and-sizes-attributes/">
+                            Responsive Images - The srcset and sizes Attributes
+                        </a>
+                    </p>
                     <p>
                         Please see
                         <SpacedSpan>
-                            <a href="https://github.com/ethanselzer/react-image-magnify/blob/master/example/src/pages/SideBySide.js">
+                            <a href="https://github.com/ethanselzer/react-image-magnify/blob/master/example/src/pages/ResponsiveImages.js">
                                 source code
                             </a>
                         </SpacedSpan>
diff --git a/example/src/router.js b/example/src/router.js
index c23c7b4b..4045f899 100644
--- a/example/src/router.js
+++ b/example/src/router.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import { Router, Route } from 'react-router';
 
-import SideBySide from './pages/SideBySide';
+import Basic from './pages/Basic';
+import ResponsiveImages from './pages/ResponsiveImages';
+import Hint from './pages/Hint';
 import ReactSlick from './pages/ReactSlick';
 import EnlargedImageContainerDimensions from './pages/EnlargedImageContainerDimensions';
 import FixedWidthSmallImage from './pages/FixedWidthSmallImage';
@@ -9,7 +11,9 @@ import ExternalEnlargedImage from './pages/ExternalEnlargedImage';
 
 const Routes = (props) => (
     <Router {...props}>
-        <Route path="/" component={SideBySide} />
+        <Route path="/" component={Basic} />
+        <Route path="/responsive-images" component={ResponsiveImages} />
+        <Route path="/hint" component={Hint} />
         <Route path="/react-slick" component={ReactSlick} />
         <Route path="/dimensions" component={EnlargedImageContainerDimensions} />
         <Route path="/fixed" component={FixedWidthSmallImage} />