polymer-ui-menu-button: iOS7-esque parallax effect

googlearchive · Sep 13, 2013 · 7f014cd · 7f014cd
1 parent fd62563
commit 7f014cd
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 3 deletions.
diff --git a/polymer-ui-menu-button/parallax.html b/polymer-ui-menu-button/parallax.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+<head>
+	<meta name="viewport" content="width=device-width, user-scalable=no">
+	<link href="polymer-ui-menu-button.html" rel="import">
+	<link href="../polymer-ui-menu-item/polymer-ui-menu-item.html" rel="import">
+	<link href="../polymer-ui-toolbar/polymer-ui-toolbar.html" rel="import">
+	<link href="../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html">
+	<script src="../../polymer/polymer.js"></script>
+	<link href="../basic.css" rel="stylesheet">
+	<style>
+		body {
+			margin: 0;
+		}
+	</style>
+</head>
+<body class="polymer-ui-body-text polymer-ui-light-bg">
+	<polymer-flex-layout vertical></polymer-flex-layout>
+	<polymer-ui-toolbar>
+		<polymer-ui-menu-button selected="0" parallax="true">
+			<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
+			<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
+			<polymer-ui-menu-item icon="search" label="Search"></polymer-ui-menu-item>
+		</polymer-ui-menu-button>
+	</polymer-ui-toolbar>
+	<div flex></div>
+</body>
+</html>
diff --git a/polymer-ui-menu-button/polymer-ui-menu-button.html b/polymer-ui-menu-button/polymer-ui-menu-button.html
@@ -32,7 +32,7 @@
 <link rel="import" href="../polymer-ui-menu/polymer-ui-menu.html">
 <link rel="import" href="../polymer-ui-arrow/polymer-ui-arrow.html">
 
-<polymer-element name="polymer-ui-menu-button" attributes="src icon opened responsive halign valign selected selectedItem selectedClass valueattr multi">
+<polymer-element name="polymer-ui-menu-button" attributes="src icon opened responsive halign valign selected selectedItem selectedClass valueattr multi parallax">
   <template>
     <link rel="stylesheet" href="polymer-ui-menu-button.css">
 		<polymer-ui-icon-button id="button" on-tap="toggle" src="{{src}}" icon="{{icon}}" active="{{opened}}" anchor-point="{{valign}}"></polymer-ui-icon-button>
@@ -85,12 +85,41 @@
        */
 			valign: 'bottom',
       multi: false,
+      parallax: false,
       mediaQuery: 'max-width: 800px',
+      created: function() {
+        this.boundParallaxAction = this.parallaxAction.bind(this);
+      },
 			openedChanged: function() {
 				this.async(function() {
 					this.$.arrowPositionHelper.apply();
-				});
-			},
+          this.tilt = null;
+          if (this.parallax) {
+            window.addEventListener('deviceorientation',
+                this.boundParallaxAction, false);
+          } else {
+            window.removeEventListener('deviceorientation',
+                this.boundParallaxAction, false);
+          }
+        });
+      },
+      parallaxAction: function(e) {
+        var tiltLR = Math.round(e.gamma);
+        var tiltTB = Math.round(e.beta);
+        if (!this.tilt) {
+          this.tilt = {
+            lr: tiltLR,
+            tb: tiltTB
+          };
+        } else {
+          var transX = ((this.tilt.lr - tiltLR) % 90) / 90 * 8;
+          var transY = ((this.tilt.tb - tiltTB) % 90) / 90 * 13;
+          this.$.overlayMenu.style['-webkit-transform'] = 'translate3d(' +
+              transX + 'px,' + transY + 'px,0)';
+          this.$.arrow.style['-webkit-transform'] = 'translate3d(' +
+              transX + 'px,' + transY + 'px,0)';
+        }
+      },
 			mediaChangeAction: function(e) {
 				if (e.detail.matches) {
 					this.classList.add('fullwidth');