event handlers test

Polymer · Oct 22, 2013 · 3cf2a56 · 3cf2a56
1 parent c3e4837
commit 3cf2a56
Showing 1 changed file with 88 additions and 0 deletions.
diff --git a/test/html/event-handlers.html b/test/html/event-handlers.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html>
+  <head>
+    <title>event handlers</title>
+    <script src="../../polymer.js"></script>
+    <script src="../../../tools/test/htmltest.js"></script>
+    <script src="../../../tools/test/chai/chai.js"></script>
+  </head>
+  <body>
+
+  <x-test>
+    <div>...light...</div>
+  </x-test>
+
+  <polymer-element name="x-test" on-tap="hostTapAction">
+    <template>
+      <style>
+        @host {
+          * {
+            display: block;
+          }
+        }
+        .gradient {
+          background: -webkit-gradient(linear, left top, left bottom, 
+            color-stop(0%,#b4e391), color-stop(50%,#61c419), 
+            color-stop(100%,#b4e391));
+        }
+      </style>
+
+      <div on-tap="{{divTapAction}}">Tap me!
+        <content></content>
+      </div>
+      <input id="input" on-focus="{{focusAction}}" on-blur="{{blurAction}}">focusy</input>
+      <div style="height: 200px; overflow: auto; border: 1px solid black;" on-scroll="{{scrollAction}}">
+        <div class="gradient">
+          <template repeat="{{list1}}">
+            <div on-tap="{{itemTapAction}}">{{index}}</div>
+          </template>
+          <template repeat="{{item in list2}}">
+            <div on-tap="itemTapAction">{{item.index}}</div>
+          </template>
+        </div>
+      </div>
+    </template>
+    <script>
+      Polymer('x-test', {
+        ready: function() {
+          this.list1 = [];
+          this.list2 = [];
+          for (var i=0, o; i <10; i++) {
+            o = {index: i};
+            this.list1.push(o);
+            this.list2.push(o);
+          }
+        },
+        hostTapAction: function(e) {
+          this.logEvent(e);
+        },
+        divTapAction: function(e) {
+          this.logEvent(e);
+        },
+        focusAction: function(e) {
+          this.logEvent(e);
+        },
+        blurAction: function(e) {
+          this.logEvent(e);
+        },
+        scrollAction: function(e) {
+          this.logEvent(e);
+        },
+        logEvent: function(e, message) {
+          console.log('[%s].%s: %s', e.currentTarget.localName, e.type, message || '');
+        },
+        itemTapAction: function(e) {
+          this.logEvent(e, e.target.templateInstance.model.index);
+          e.stopPropagation();
+        }
+      });
+    </script>  
+  </polymer-element>
+
+
+  <script>
+    document.addEventListener('WebComponentsReady', function() {
+    })
+  </script>
+  </body>
+</html>