Initial commit

.gitignore

@@ -1,2 +1,4 @@
 lib
 node_modules
+.yarn-error.log
+yarn.lock

.npmignore

@@ -2,3 +2,5 @@ src
 demo
 .babelrc
 webpack.config.js
+.yarn-error.log
+yarn.lock

README.md

@@ -2,29 +2,15 @@
 
 > This module extends **React Js**
 
-This FancyImage React component creates an animation on image change and can be used as nice and material headline design with image.
+React component that mounts three dot button that morphs into a menu by clicking on it.
+Never ever worry about a fancy dropdown menu. This component does it for you!
 
 # Installation
 
-`npm install --save react-fancy-image`
+`npm install --save react-animated-menus`
 
 # Usage
 
-Add following line at the beginning of your document:
-
-`import ReactFancyImage from 'react-fancy-image'`
-
-Use the ReactFancyImage component:
-
-```jsx
-<ReactFancyImage img={require(imgUrl)} headlineA="" headlineB="" />
-//The image is displayed 'absolute'.
-//To embed it into your website it is recommended to use a parent div
-//to be able to move and style the image. Like so:
-<div style={{position: 'relative'}}>
-  <ReactFancyImage img={require(imgUrl)} headlineA="" headlineB="" />
-</div>
-```
 
 # Contact
 

package-lock.json

@@ -1,5 +1,5 @@
 {
-    "name": "react-fancy-image",
+    "name": "react-animated-menus",
     "version": "1.0.0",
     "lockfileVersion": 1,
     "requires": true,
@@ -371,6 +371,12 @@
             "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
             "dev": true
         },
+        "animejs": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/animejs/-/animejs-2.2.0.tgz",
+            "integrity": "sha1-Ne79/FNbgZScnLBvCz5gwC5v3IA=",
+            "dev": true
+        },
         "ansi-align": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz",
@@ -3054,57 +3060,6 @@
             "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
             "dev": true
         },
-        "css-loader": {
-            "version": "0.28.11",
-            "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-0.28.11.tgz",
-            "integrity": "sha512-wovHgjAx8ZIMGSL8pTys7edA1ClmzxHeY6n/d97gg5odgsxEgKjULPR0viqyC+FWMCL9sfqoC/QCUBo62tLvPg==",
-            "dev": true,
-            "requires": {
-                "babel-code-frame": "6.26.0",
-                "css-selector-tokenizer": "0.7.0",
-                "cssnano": "3.10.0",
-                "icss-utils": "2.1.0",
-                "loader-utils": "1.1.0",
-                "lodash.camelcase": "4.3.0",
-                "object-assign": "4.1.1",
-                "postcss": "5.2.18",
-                "postcss-modules-extract-imports": "1.2.0",
-                "postcss-modules-local-by-default": "1.2.0",
-                "postcss-modules-scope": "1.1.0",
-                "postcss-modules-values": "1.3.0",
-                "postcss-value-parser": "3.3.0",
-                "source-list-map": "2.0.0"
-            },
-            "dependencies": {
-                "has-flag": {
-                    "version": "1.0.0",
-                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-                    "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
-                    "dev": true
-                },
-                "postcss": {
-                    "version": "5.2.18",
-                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
-                    "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
-                    "dev": true,
-                    "requires": {
-                        "chalk": "1.1.3",
-                        "js-base64": "2.4.5",
-                        "source-map": "0.5.7",
-                        "supports-color": "3.2.3"
-                    }
-                },
-                "supports-color": {
-                    "version": "3.2.3",
-                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
-                    "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
-                    "dev": true,
-                    "requires": {
-                        "has-flag": "1.0.0"
-                    }
-                }
-            }
-        },
         "css-select": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",

package.json

@@ -1,7 +1,7 @@
 {
-    "name": "react-fancy-image",
+    "name": "react-animated-menus",
-    "version": "1.0.2",
+    "version": "1.0.0",
-    "description": "React image component with transitions and animations by image change",
+    "description": "React component that mounts three dot button that morphs into a menu by clicking on it.",
     "main": "./lib/index.js",
     "license": "MIT",
     "scripts": {
@@ -14,6 +14,7 @@
         "react-scripts": "1.1.4"
     },
     "devDependencies": {
+        "animejs": "^2.2.0",
         "babel-core": "^6.21.0",
         "babel-loader": "^7.1.4",
         "babel-preset-env": "^1.6.1",

src/Image.css

@@ -1,207 +0,0 @@
-.Image h1{
-  left: -8%;
-  top: 10%;
-  position: absolute;
-}
-.Image h2{
-  left: 10%;
-  top: 30%;
-  width: 70%;
-  padding-bottom: 10px;
-  letter-spacing: 2px;
-  font-size: 1.3em;
-  font-family: sans-serif;
-  padding-left: 0.3em;
-  position: absolute;
-}
-
-.Image {
-  width: 600px;
-  height: 300px;
-  background-color: transparent;
-
-  position: absolute;
-}
-
-.Image_element {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: top left;
-  opacity: 0;
-}
-
-.Image_element.Image_element-fade-out {
-  animation: fade-out 0.7s;
-  transform: translate(100px,100px);
-  -webkit-transform: translate(100px,100px);
-  opacity: 0 !important;
-}
-
-.Image_element.Image_element-fade-in {
-  animation: fade-in 0.7s;
-  transform: translate(0px,0px);
-  -webkit-transform: translate(0px,0px);
-  opacity: 1 !important;
-}
-
-
-/*
-* Fade animations
-*/
-@keyframes fade-in {
-  0% {
-    transform: translate(-150px,150px);
-    -webkit-transform: translate(-150px,150px);
-    opacity: 0;
-  },
-  80% {
-    transform: translate(0px,0px);
-    -webkit-transform: translate(0px,0px);
-    opacity: 1;
-  }
-  100% {
-    transform: translate(0px,0px);
-    -webkit-transform: translate(0px,0px);
-    opacity: 1;
-  }
-}
-
-@keyframes fade-out {
-  0% {
-    transform: translate(0px,0px);
-    -webkit-transform: translate(0px,0px);
-    opacity: 1;
-  },
-  80% {
-    transform: translate(100px,100px);
-    -webkit-transform: translate(100px,-100px);
-    opacity: 0;
-  }
-  100% {
-    transform: translate(100px,-100px);
-    -webkit-transform: translate(100px,-100px);
-    opacity: 0;
-  }
-}
-
-
-/*
-* elements
-*/
-.Image_element-1 {
-  -webkit-clip-path: polygon(0% 0%, 10% 0%, 0% 10%);
-  clip-path: polygon(0% 0%, 10% 0%, 0% 10%);
-}
-
-.Image_element-2 {
-  -webkit-clip-path: polygon(0% 10%, 10% 0%, 23% 0%, 0% 23%);
-  clip-path: polygon(0% 10%, 10% 0%, 23% 0%, 0% 23%);
-}
-
-.Image_element-3 {
-  -webkit-clip-path: polygon(0% 23%, 23% 0%, 40% 0%, 0% 40%);
-  clip-path: polygon(0% 23%, 23% 0%, 40% 0%, 0% 40%);
-}
-
-.Image_element-4 {
-  -webkit-clip-path: polygon(0% 40%, 40% 0%, 50% 0%, 0% 50%);
-  clip-path: polygon(0% 40%, 40% 0%, 50% 0%, 0% 50%);
-}
-
-.Image_element-5 {
-  -webkit-clip-path: polygon(0% 50%, 50% 0%, 75% 0%, 0% 75%);
-  clip-path: polygon(0% 50%, 50% 0%, 75% 0%, 0% 75%);
-}
-
-.Image_element-6 {
-  -webkit-clip-path: polygon(0% 75%, 75% 0%, 80% 0%, 0% 80%);
-  clip-path: polygon(0% 75%, 75% 0%, 80% 0%, 0% 80%);
-}
-
-.Image_element-7 {
-  -webkit-clip-path: polygon(0% 80%, 80% 0%, 90% 0%, 0% 90%);
-  clip-path: polygon(0% 80%, 80% 0%, 90% 0%, 0% 90%);
-}
-
-.Image_element-8 {
-  -webkit-clip-path: polygon(0% 90%, 90% 0%, 100% 0%, 100% 5%, 5% 100%, 0% 100%);
-  clip-path: polygon(0% 90%, 90% 0%, 100% 0%, 100% 5%, 5% 100%, 0% 100%);
-}
-
-.Image_element-9 {
-  -webkit-clip-path: polygon(5% 100%, 100% 5%, 100% 10%, 10% 100%);
-  clip-path: polygon(5% 100%, 100% 5%, 100% 10%, 10% 100%);
-}
-
-.Image_element-10 {
-  -webkit-clip-path: polygon(10% 100%, 100% 10%, 100% 30%, 30% 100%);
-  clip-path: polygon(10% 100%, 100% 10%, 100% 30%, 30% 100%);
-}
-
-.Image_element-11 {
-  -webkit-clip-path: polygon(30% 100%, 100% 30%, 100% 50%, 50% 100%);
-  clip-path: polygon(30% 100%, 100% 30%, 100% 50%, 50% 100%);
-}
-
-.Image_element-12 {
-  -webkit-clip-path: polygon(50% 100%, 100% 50%, 100% 60%, 60% 100%);
-  clip-path: polygon(50% 100%, 100% 50%, 100% 60%, 60% 100%);
-}
-
-.Image_element-13 {
-  -webkit-clip-path: polygon(60% 100%, 100% 60%, 100% 80%, 80% 100%);
-  clip-path: polygon(60% 100%, 100% 60%, 100% 80%, 80% 100%);
-}
-
-.Image_element-14 {
-  -webkit-clip-path: polygon(80% 100%, 100% 80%, 100% 100%, 100% 100%);
-  clip-path: polygon(80% 100%, 100% 80%, 100% 100%, 100% 100%);
-}
-
-
-/*
-* Headlines
-*/
-.Image_headline {
-  text-align: left !important;
-  width: 70%;
-  padding: 10px;
-  letter-spacing: 10px;
-  display: block;
-  z-index: 1;
-  margin-top: 10px;
-  margin-bottom: 20px;
-  box-sizing: border-box;
-  padding-left: 20px !important;
-}
-
-.Image_headline-1 {
-  font-size: 1.7em;
-}
-
-.Image_headline-2 {
-  font-size: 1.5em;
-}
-
-.Image_headline-3 {
-  font-size: 1.3em;
-}
-
-.Image_headline-black {
-  background-color: black;
-}
-.Image_headline-black::first-letter {
-  color: #E45F4D;
-  font-weight: bold;
-}
-
-.Image_headline-bright {
-  color: rgb(228, 228, 228) !important;
-}
-
-.Image_headline-dark {
-  color: rgb(45, 45, 45) !important;
-}

src/Image.jsx

@@ -1,134 +0,0 @@
-import React, { Component } from 'react';
-
-import './Image.css';
-
-
-class Image extends Component {
-  constructor(props) {
-    super(props);
-
-    /*
-    * Expected props:
-    *   - img: require(imgUrl)
-    *   - headlineA: String
-    *   - headlineB: String
-    */
-    this.currentImageIs_A = true;
-  }
-
-  componentDidMount() {
-    this.fadeIn("a");
-  }
-
-  componentDidUpdate() {
-    const fadeInLetter = this.currentImageIs_A ? "b" : "a";
-    const fadeOutLetter = this.currentImageIs_A ? "a" : "b";
-    this.fadeIn(fadeInLetter, this.props.img);
-    this.fadeOut(fadeOutLetter);
-    this.currentImageIs_A = !this.currentImageIs_A;
-  }
-
-
-  fadeIn(letter) {
-    /*
-    * Fade in
-    */
-    //Image
-    const elements = document.getElementById(letter).getElementsByClassName("Image_element");
-    for (var i = 0; i < elements.length; i++) {
-      const element = elements[i];
-      //Change picture
-      const imgUrl = this.props.img;
-      element.style.backgroundImage = "url(" + imgUrl + ")";
-      //Animation
-      this.timeout_fadeIn(element,i);
-    };
-  }
-
-  fadeOut(letter) {
-    /*
-    * Fade out
-    */
-    //Image
-    const elements = document.getElementById(letter).getElementsByClassName("Image_element");
-    for (var i = 0; i < elements.length; i++) {
-      const element = elements[i];
-      //Animation
-      this.timeout_fadeOut(element,i);
-    };
-  }
-
-  timeout_fadeIn(element,i) {
-    setTimeout(function() {
-      element.classList.remove("Image_element-fade-out");
-      element.classList.add("Image_element-fade-in");
-    }, i*100);
-  }
-
-  timeout_fadeOut(element,i) {
-    setTimeout(function() {
-      element.classList.remove("Image_element-fade-in");
-      element.classList.add("Image_element-fade-out");
-    }, i*100);
-  }
-
-
-  render() {
-    if(this.props.img !== null) {
-      //displayed
-      return (
-        <div>
-          <div className="Image" id="a">
-            <h1 className="Image_headline Image_headline-1 Image_headline-black Image_headline-bright">
-              {this.props.headlineA}
-            </h1>
-            <h2 className="Image_headline Image_headline-2 Image_headline-black Image_headline-bright">
-              {this.props.headlineB}
-            </h2>
-            <div className="Image_element-1 Image_element"></div>
-            <div className="Image_element-2 Image_element"></div>
-            <div className="Image_element-3 Image_element"></div>
-            <div className="Image_element-4 Image_element"></div>
-            <div className="Image_element-5 Image_element"></div>
-            <div className="Image_element-6 Image_element"></div>
-            <div className="Image_element-7 Image_element"></div>
-
-            <div className="Image_element-8 Image_element"></div>
-
-            <div className="Image_element-9 Image_element"></div>
-            <div className="Image_element-10 Image_element"></div>
-            <div className="Image_element-11 Image_element"></div>
-            <div className="Image_element-12 Image_element"></div>
-            <div className="Image_element-13 Image_element"></div>
-            <div className="Image_element-14 Image_element"></div>
-          </div>
-          <div className="Image" id="b">
-            <div className="Image_element-1 Image_element"></div>
-            <div className="Image_element-2 Image_element"></div>
-            <div className="Image_element-3 Image_element"></div>
-            <div className="Image_element-4 Image_element"></div>
-            <div className="Image_element-5 Image_element"></div>
-            <div className="Image_element-6 Image_element"></div>
-            <div className="Image_element-7 Image_element"></div>
-
-            <div className="Image_element-8 Image_element"></div>
-
-            <div className="Image_element-9 Image_element"></div>
-            <div className="Image_element-10 Image_element"></div>
-            <div className="Image_element-11 Image_element"></div>
-            <div className="Image_element-12 Image_element"></div>
-            <div className="Image_element-13 Image_element"></div>
-            <div className="Image_element-14 Image_element"></div>
-          </div>
-        </div>
-      );
-    } else {
-      //not displayed
-      return (
-        null
-      );
-    }
-  }
-}
-
-export default Image;

src/index.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+
+class Menu extends Component {
+  constructor(props) {
+    super(props);
+
+    /*
+    * Expected props:
+    *   /
+    */
+    this.currentImageIs_A = true;
+  }
+
+  render() {
+    return (
+      <div>
+        Hello
+      </div>
+    );
+  }
+}
+
+export default Menu;

webpack.config.js

@@ -2,7 +2,7 @@ var path = require('path');
 
 module.exports = {
     mode: 'production',
-    entry: './src/Image.jsx',
+    entry: './src/index.js',
     output: {
         path: path.resolve('lib'),
         filename: 'index.js',