concerto-screen.html

<!-- 
  The `concerto-screen` element provides the main Concerto screen 
-->
<dom-module id="concerto-screen">

  <style>
    :host {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      cursor: none;
    }
    .position {
      position: absolute;
      overflow: hidden;
    }
    .template {
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  </style>

  <template>
    <!-- Screen setup requests -->
    <iron-ajax 
      id="initScreenData" 
      handle-as="json"
      on-response="handleScreenData">
    </iron-ajax>
    <!-- Create template background, positions, and fields -->
    <template is="dom-if" if="{{template.id}}">
      <div id="{{templateId(template.id)}}" class="template"
        style$="{{backgroundImage(template.path)}}">
        <template is="dom-repeat" items="{{template.positions}}" as="position">
          <div class="position" id="{{positionId(position.id)}}"
            style$="{{computeFieldPosition(position)}}">
            <concerto-field screen-id="{{screenId}}"
              field-id="{{position.field.id}}"
              field-name="{{position.field.name}}"
              base-url="{{baseUrl}}"
              timezone="{{timezone}}"
              content-style="{{position.style}}"
              opt-config="{{position.field.config}}"
              cache-key="{{cacheKey}}">
            </concerto-field>
          </div>
        </template>
      </div>
    </template>
  </template>

  <script>
    Polymer({
      is: "concerto-screen",

      behaviors: [ConcertoBehaviors.Utils],

      properties: {
        cacheKey: {
          type: String,
          observer: 'cacheKeyChanged'
        },
        screenId: Number,
        preview: String,
        baseUrl: {
          type: String,
          value: "",
          reflectToAttribute: true
        },
        name: String,
        template: Object,
        timezone: String
      },

      ready: function() {
        /* get intial screen data */
        var setup = this.baseUrl + "/frontend/" + this.screenId + "/setup.json";
        this.$.initScreenData.url = setup;
        this.$.initScreenData.generateRequest();
        /* show cursor if screen is in preview mode; hide otherwise */
        if (this.preview == "true") {
          this.style.cursor = "auto";
        }

        this.addEventListener('fieldCacheKeyChanged', function (e, detail) { 
          this.cacheKeyChanged(e.detail.newValue, e.detail.oldValue);
        });
      },

      templateId: function(id) {
        return "template_" + id;
      },  

      positionId: function(id) {
        return "position_" + id;
      },

      backgroundImage: function(path) {
        /* background-image style for annotated attribute binding */
        var url = this.prefixWithBase(path, this.baseUrl);
        return "background-image: url('" + url + "');";
      },

      computeFieldPosition: function(position) {
        return "left: " + position.left * 100 + "%; " +
               "top: " + position.top * 100 + "%; " + 
               "width: " + (position.right - position.left) * 100 + "%; " + 
               "height: " + (position.bottom - position.top) * 100 + "%;";
      },

      handleScreenData: function(event, response) {
        /* set screen setup properties */
        var data = response.response;
        this.name = data.name;
        this.template = data.template;
        this.timezone = data.time_zone;

        var key = response.xhr.getResponseHeader('X-Concerto-Frontend-Setup-Key');
        if (key) {
          this.cacheKey = key;
        }

        /* load the css if any */
        if (this.template.css_path && this.template.css_path != "") {
          var css_link = document.createElement("link");
          css_link.type = "text/css";
          css_link.rel = "stylesheet";
          css_link.href = this.prefixWithBase(this.template.css_path, this.baseUrl);
          document.head.appendChild(css_link);
        }
      },

      cacheKeyChanged: function(newValue, oldValue) {
        if (oldValue !== undefined && oldValue !== null && oldValue !== newValue)
        {
          console.log("cacheKeyChanged reloading screen");
          location.reload();
        }
      }
    });
  </script>

</dom-module>