Adds Background class

psyrendust · Jul 13, 2015 · 16e2641 · 16e2641
1 parent 2a6c41e
commit 16e2641
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 43 deletions.
diff --git a/src/Background.js b/src/Background.js
@@ -0,0 +1,44 @@
+import DOMElement from 'famous/dom-renderables/DOMElement';
+import Node from 'famous/core/Node';
+import Opacity from 'famous/components/Opacity';
+
+export default class Background extends Node {
+  constructor() {
+    super();
+    this
+      .setAlign(0.5, 0.5, 0.5)
+      .setOrigin(0.5, 0.5, 0.5)
+      .setMountPoint(0.5, 0.5, 0.5)
+      .setProportionalSize(1, 1)
+      .setPosition(0, 0, -1000);
+    this.opacity = new Opacity(this);
+    this.opacity.set(1);
+    this.el = new DOMElement(this, {
+      properties: {
+        width: '100%',
+        height: '100%',
+        background: "#00b9d7",
+        background: "-moz-radial-gradient(center, ellipse cover,  #00b9d7 0%, #9783f2 100%)",
+        background: "-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#00b9d7), color-stop(100%,#9783f2))",
+        background: "-webkit-radial-gradient(center, ellipse cover,  #00b9d7 0%,#9783f2 100%)",
+        background: "-o-radial-gradient(center, ellipse cover,  #00b9d7 0%,#9783f2 100%)",
+        background: "-ms-radial-gradient(center, ellipse cover,  #00b9d7 0%,#9783f2 100%)",
+        background: "radial-gradient(ellipse at center,  #00b9d7 0%,#9783f2 100%)",
+        filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b9d7', endColorstr='#9783f2',GradientType=1 )"
+      }
+    });
+    this.isShown = false;
+  }
+  show() {
+    if (this.isShown) return;
+    this.isShown = true;
+    this.opacity.halt();
+    this.opacity.set(0.3, {duration: 50});
+  }
+  hide() {
+    if (!this.isShown) return;
+    this.isShown = false;
+    this.opacity.halt();
+    this.opacity.set(0.0, {duration: 300});
+  }
+}
diff --git a/src/index.js b/src/index.js
@@ -4,6 +4,7 @@ import FamousEngine from 'famous/core/FamousEngine';
 import Node from 'famous/core/Node';
 import Opacity from 'famous/components/Opacity';
 
+import Background from './Background';
 import Lights from './Lights';
 import Grid from './Grid';
 import Audio from './utils/Audio';
@@ -22,55 +23,13 @@ const PRIMITIVE_TYPES = [
   'TRIANGLE_FAN'
 ];
 
-class Background extends Node {
-  constructor() {
-    super();
-    this
-      .setAlign(0.5, 0.5, 0.5)
-      .setOrigin(0.5, 0.5, 0.5)
-      .setMountPoint(0.5, 0.5, 0.5)
-      .setProportionalSize(1, 1, 1)
-      .setPosition(0, 0, 0);
-    this.opacity = new Opacity(this);
-    this.opacity.set(0);
-    this.el = new DOMElement(this, {
-      properties: {
-        'z-index': '0',
-        width: '100%',
-        height: '100%',
-        background: "#00b9d7",
-        background: "-moz-radial-gradient(center, ellipse cover,  #00b9d7 0%, #9783f2 100%)",
-        background: "-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#00b9d7), color-stop(100%,#9783f2))",
-        background: "-webkit-radial-gradient(center, ellipse cover,  #00b9d7 0%,#9783f2 100%)",
-        background: "-o-radial-gradient(center, ellipse cover,  #00b9d7 0%,#9783f2 100%)",
-        background: "-ms-radial-gradient(center, ellipse cover,  #00b9d7 0%,#9783f2 100%)",
-        background: "radial-gradient(ellipse at center,  #00b9d7 0%,#9783f2 100%)",
-        filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b9d7', endColorstr='#9783f2',GradientType=1 )"
-      }
-    });
-    this.isShown = false;
-  }
-  show() {
-    if (this.isShown) return;
-    this.isShown = true;
-    this.opacity.halt();
-    this.opacity.set(0.3, {duration: 50});
-  }
-  hide() {
-    if (!this.isShown) return;
-    this.isShown = false;
-    this.opacity.halt();
-    this.opacity.set(0, {duration: 300});
-  }
-}
-
 class Vizzy {
   init() {
     this.scene = FamousEngine.createScene()
     this.camera = new Camera(this.scene);
     this.camera.setDepth(120);
     this.root = this.scene.addChild()
-    // this.background = this.root.addChild(new Background());
+    this.background = this.root.addChild(new Background());
     this.lights = this.root.addChild(new Lights());
     this.audio = new Audio(this.root);
     this.grid = new Grid(this.root.addChild(), this.audio);