First commit

SoorajChandran · Nov 25, 2017 · 3fecc65 · 3fecc65
commit 3fecc65
Show file tree

Hide file tree

Showing 15 changed files with 7,414 additions and 0 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,20 @@
+{
+  "extends": ["airbnb", "prettier", "prettier/react"],
+  "plugins": ["prettier"],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 2016,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true
+  },
+  "rules": {
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/README.md b/README.md
@@ -0,0 +1,33 @@
+# React component for zoom on hover ( e-commerce websites )
+
+Simple component for zoom on hover.
+
+
+Clone the repo
+
+```sh
+$ yard add
+$ yarn start
+```
+
+### Linting
+
+
+```sh
+$ yard run lint
+```
+
+
+### watch scss change
+
+```sh
+$ npm run watch-css
+```
+
+License
+----
+
+MIT
+
+Author: @SoorajChandran
+Date: 25 Nov 2017
diff --git a/package.json b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "image-hover-zoom",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "prop-types": "^15.6.0",
+    "react": "^16.1.1",
+    "react-dom": "^16.1.1",
+    "react-scripts": "1.0.17"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "lint": "eslint src",
+    "build-css": "node-sass-chokidar src/ -o src/",
+    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive"
+  },
+  "devDependencies": {
+    "eslint": "^4.11.0",
+    "eslint-config-airbnb": "^15.0.1",
+    "eslint-config-prettier": "^2.8.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint-plugin-prettier": "^2.3.1",
+    "eslint-plugin-react": "^7.5.1",
+    "prettier": "^1.8.2"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,26 @@
+.App .sampleImage {
+  height: 300px;
+  width: 600px;
+  cursor: crosshair; }
+
+.App .image-container {
+  /*position: relative;*/ }
+  .App .image-container .frame {
+    height: 100px;
+    width: 200px;
+    top: 0;
+    left: 0;
+    display: none;
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(0, 0, 0, 0.8);
+    position: absolute;
+    pointer-events: none; }
+  .App .image-container .zoomedImageContainer {
+    height: 300px;
+    width: 600px;
+    overflow: hidden;
+    position: absolute;
+    background-position: 0 0; }
+
+.App .image-container.right {
+  text-align: right; }
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import './App.css';
+import ImageZoom from './components/ImageZoom'
+
+class App extends Component {
+
+  render() {
+
+    const img1 = {
+          compressedImage: "https://images.pexels.com/photos/683940/pexels-photo-683940.jpeg?h=350&dpr=2&auto=compress&cs=tinysrgb",
+          originalImage: "https://static.pexels.com/photos/683940/pexels-photo-683940.jpeg",
+          zoomFactor: "3",
+          dir: "left"
+        }
+
+    const img2 = {
+          compressedImage: "https://images.pexels.com/photos/681687/pexels-photo-681687.jpeg?h=350&dpr=2&auto=compress&cs=tinysrgb",
+          originalImage: "https://static.pexels.com/photos/681687/pexels-photo-681687.jpeg",
+          zoomFactor: "3",
+          dir: "right"
+        }
+    return (
+      <div className="App">
+        <ImageZoom options={img1}/>
+        <ImageZoom options={img2}/>        
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/src/App.scss b/src/App.scss
@@ -0,0 +1,32 @@
+.App {
+ .sampleImage{
+  height: 300px;
+  width: 600px;
+  cursor: crosshair;
+ }
+
+ .image-container{
+   /*position: relative;*/
+   .frame{
+      height: 100px;
+      width: 200px;
+      top:0;
+      left: 0;
+      display: none;
+      background: rgba(0,0,0,0.2);
+      border: 1px solid rgba(0,0,0,0.8);
+      position: absolute;
+      pointer-events: none;
+   }
+   .zoomedImageContainer{
+    height: 300px;
+    width: 600px;
+    overflow: hidden;
+    position: absolute;
+    background-position: 0 0; 
+   }
+ } 
+ .image-container.right{
+  text-align: right;
+ }
+}
diff --git a/src/components/ImageZoom.js b/src/components/ImageZoom.js
@@ -0,0 +1,105 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+
+class ImageZoom extends Component {
+
+  constructor(props){
+    super(props);
+    this.zoomFactor = parseInt(this.props.options.zoomFactor, 10) || 3;
+    this.frameHeight = 100;
+    this.frameWidth = 200;
+  }
+
+  addFrame = (x,y,el) => {
+    const { left, top , width ,height } = el.getBoundingClientRect();
+    const minX = Math.min(x,(left + width - this.frameWidth));
+    const minY = Math.min(y,(top + height - this.frameHeight));
+    const frameEl = this.getTargetElement(el,"frame");
+    frameEl.style.left = `${minX}px`;
+    frameEl.style.top = `${minY}px`;
+    const scaledValues = this.scaleValues(minX - el.offsetLeft,minY - el.offsetTop);
+    this.getTargetElement(el,"zoomedImageContainer").style.backgroundPosition = `${scaledValues[0]}px ${scaledValues[1]}px`;
+  }
+
+  getTargetElement = (el,targetId) => {
+    const children = el.parentNode.childNodes;
+    return Array.from(children).find(function(item){
+      if(item.id === targetId){
+        return true;
+      }
+    })
+    return false;
+  }
+
+  hide(id,el){
+      this.getTargetElement(el,id).style.display = 'none';
+  }
+
+  scaleValues = (x,y) => ([-1*this.zoomFactor*parseInt(x,10),-1*this.zoomFactor*parseInt(y,10)])
+
+  showZoomedContainer = (el) => {
+    const targetEl = this.getTargetElement(el,"zoomedImageContainer");
+    targetEl.style.display = 'block';
+    const { left, top , width } = el.getBoundingClientRect();
+    targetEl.style.left = left <= window.screen.width/2 ? `${left + width}px`:  `${left - 600}px`;
+    targetEl.style.top = `${top}px` ;
+
+    if(this.isImageLoaded()){
+      targetEl.style.background = `url(${this.props.options.originalImage}) no-repeat`;
+      targetEl.style.backgroundSize = `${this.zoomFactor*600}px ${this.zoomFactor*300}px`;
+    }else{
+      targetEl.style.background = `url(${this.props.options.  compressedImage}) no-repeat`;
+      targetEl.style.backgroundSize = `${this.zoomFactor*600}px ${this.zoomFactor*300}px`;
+    }
+
+  }
+
+  isImageLoaded = () => {
+    const img = new Image();
+    img.src = this.props.originalImage;
+    return img.complete;
+  }
+
+  handleMouseEnter = (e) => {
+    this.getTargetElement(e.target,"frame").style.display = 'block';
+    this.showZoomedContainer(e.target);
+  }
+
+  handleMouseMove = (e) => {
+    this.addFrame(e.clientX,e.clientY,e.target);
+  }
+  handleMouseLeave = (e) => {
+    this.hide("frame",e.target);
+    this.hide("zoomedImageContainer",e.target);
+  }
+
+  render(){
+
+    const { compressedImage,dir } = this.props.options;
+
+    return(
+      <div>
+       <div className={`image-container ${dir}`}>
+        <img 
+        onMouseMove={this.handleMouseMove.bind(this)} 
+        onMouseLeave={this.handleMouseLeave.bind(this)}
+        onMouseEnter={this.handleMouseEnter.bind(this)}
+        className="sampleImage" 
+        src={compressedImage} 
+        alt="sample"/>
+        <div id="frame" className="frame">
+        </div>
+        <div id="zoomedImageContainer" className="zoomedImageContainer">  
+        </div>
+      </div>
+      </div>
+    )
+  }
+}
+
+ImageZoom.PropTypes = {
+  imgSrc: PropTypes.string.isRequired,
+  zoomFactor: PropTypes.string
+}
+
+export default ImageZoom;
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import registerServiceWorker from './registerServiceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+registerServiceWorker();