test custom element for thimble (ultra portable!)

custom-element-thimble.html

<script>
  (function () {
    // super secret special shim for loading Polymer elements in weird situations
    if (!window.Polymer) {
      var base = location.protocol === 'https:' ? 'https://appmaker-integration.herokuapp.com' : 'http://localhost:1999/';
      var waiting = [];
      window.Polymer = function(){waiting.push(arguments)};
      ["/vendor/polymer/polymer.html", "/ceci/ceci-element.html", "/ceci/ceci-definition.html"].forEach(function(src) {
        var l = document.createElement('link');
        l.rel="import";
        l.href = base + src;
        document.head.appendChild(l);
      });
      var s = document.createElement('script');
      s.src = base + '/vendor/platform/platform.js';
      s.onload = function () {
        setTimeout(function () {
          waiting.forEach(function (w) {
            window.Polymer.apply(document, w);
          });
        }, 500);
      };
      document.head.appendChild(s);
    }
  })();
</script>
<polymer-element name="ceci-mood" extends="ceci-element" attributes="mood">
  <ceci-definition>
    {
      "name": "Mood",
      "description": "Shows mood.",
      "broadcasts": {
        "comment": {
          "label": "Comment",
          "description": "Comments about the mood."
        }
      },
      "listeners": {
        "reset": {
          "description": "Reset",
          "label": "Reset"
        }
      },
      "attributes": {
        "mood": {
          "description": "Current mood",
          "label": "Mood",
          "editable": "select",
          "options": ["normal","happy","sad"]
        }
      }
    }
  </ceci-definition>
  <template>
    <style></style>
    <div>{{face}}</div>
    <shadow></shadow>
  </template>
  <script>
    var faceMap = {
      normal: ':|',
      happy: ':)',
      sad: ':('
    };

    Polymer("ceci-mood", {
      mood: 'normal',
      face: ':|',
      ready: function() {
        this.super();
        console.log('FACE BOOT');
      },
      moodChanged: function (oldMood, newMood) {
        this.face = faceMap[newMood] || faceMap.normal;
      },
      reset: function() {
        this.mood = 'normal';
      }
    });
  </script>
</polymer-element>
<ceci-mood></ceci-mood>
<button onclick="document.querySelector('ceci-mood').reset()">Normal</button>
<button onclick="document.querySelector('ceci-mood').mood='happy';">Happy</button>
<button onclick="document.querySelector('ceci-mood').mood='sad';">Sad</button>