workbench/moreSmoke/index.html

<!--
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <script src="../../polymer.js"></script>
</head>
<body>
  <br>

  <x-foo></x-foo>  

    <br><br><br>

  <x-bar></x-bar>  

    <br><br><br>

  <x-baz></x-baz>  

  <script>
    function twiddleFont(e) {
      e.style.fontSize = Math.floor(Math.random() * 46) + 12 + 'px';
    }
  </script>

  <polymer-element name="x-foo" attributes="you color" on-squid="tentacles" on-click="clicked">
    <template>
      <link rel="stylesheet" href="x-foo.css">
      Hi <b id="me" on-click="meClicked">{{me}}</b>, hey <b id="you" on-click="youClicked">{{you}}</b>
    </template>
    <script>
      Polymer('x-foo', {
        me: 'foo',
        // you is published, can be changed via attribute (markup or binding)
        you: '?',
        color: 'tomato',
        ready: function() {
          this.colorChanged();
        },
        colorChanged: function() {
          this.style.backgroundColor = this.color;
        },
        meClicked: function(event, details, sender) {
          twiddleFont(sender);
          event.stopPropagation();
        },
        youClicked: function(event, details, sender) {
          twiddleFont(sender);
          event.stopPropagation();
        },
        clicked: function(event, details, sender) {
          this.$.me.style.fontSize = '';
          this.$.you.style.fontSize = '';
        }
      });
    </script>
  </polymer-element>

  <polymer-element name="x-foo-foo" extends="x-foo" on-play="clarinet"></polymer-element>
  
  <polymer-element name="x-bar" on-sponge="bob">
    <template>
      <style>
        @host {*{ 
          display: inline-block;
          background-color: gold;
          padding: 12px;
        }};
      </style>
      <!-- me is not published by x-foo, so foo.me is unchanged -->
      <!-- you is published by x-foo, so foo.you === this.me -->
      <x-foo me="{{me}}" you="{{me}}" color="orange"></x-foo>
    </template>
    <script>
      Polymer('x-bar', {
        me: "bar"
      });
    </script>
  </polymer-element>

  <polymer-element name="x-baz">
    <template>
      <style>
        @host {*{ 
          display: inline-block;
          background-color: lightgreen;
          padding: 8px;
        }};
      </style>
      <template repeat="{{cheese}}">
        <div><span on-click="nameAction">{{name}}</span> is tasty.</div>
      </template>
    </template>
    <script>
      Polymer('x-baz', {
        cheese: [{name: "Gouda"}, {name: "Cheddar"}, {name: "Brie"}, {name: "Mozzarella"}],
        nameAction: function(event, detail, sender) {
          twiddleFont(sender);
        }
      });
    </script>
  </polymer-element>
</body>
</html>