Fetch and load single pieces of content into the Frontend.

Added simple implementations for Graphic and Ticker Text content types and fetch available content from the backend.

app/views/layouts/frontend.html.erb

@@ -11,9 +11,9 @@
     goog.require('goog.debug.Console');
   </script>
   <script src="/frontend_js/content.js"></script>
-  <script src="/frontend_js/contents/random_text.js"></script>
   <script src="/frontend_js/contents/client_time.js"></script>
-  <script src="/frontend_js/contents/sample_image.js"></script>
+  <script src="/frontend_js/contents/graphic.js"></script>
+  <script src="/frontend_js/contents/ticker.js"></script>
   <script src="/frontend_js/transition.js"></script>
   <script src="/frontend_js/transitions/fade.js"></script>
   <script src="/frontend_js/field.js"></script>

public/frontend_js/contents/graphic.js

@@ -0,0 +1,56 @@
+goog.provide('concerto.frontend.Content.Graphic');
+
+goog.require('concerto.frontend.Content');
+goog.require('goog.Uri');
+goog.require('goog.events.EventType');
+goog.require('goog.net.ImageLoader');
+
+
+
+/**
+ * Graphic.
+ *
+ * @param {Object} data Properties for this piece of content.
+ * @constructor
+ * @extends {concerto.frontend.Content}
+ */
+concerto.frontend.Content.Graphic = function(data) {
+  concerto.frontend.Content.call(this, data);
+
+  /**
+   * The image loader, so we don't load an image that isn't ready.
+   * @type {goog.net.ImageLoader}
+   * @private
+   */
+  this.loader_ = new goog.net.ImageLoader();
+  goog.events.listen(this.loader_, goog.events.EventType.LOAD,
+      this.loaderFinish_, false, this);
+
+  var image_url = new goog.Uri(data.render_details.path);
+  image_url.setParameterValue('height', data.field.size.height);
+  image_url.setParameterValue('width', data.field.size.width);
+
+  this.loader_.addImage('graphic', image_url.toString());
+};
+goog.inherits(concerto.frontend.Content.Graphic, concerto.frontend.Content);
+
+
+/**
+ * Load the image and get ready for the complete event.
+ * @private
+ */
+concerto.frontend.Content.Graphic.prototype.load_ = function() {
+  this.loader_.start();
+};
+
+
+/**
+ * Called when the image finishes loading.
+ * @param {goog.events.EventType} e The finish event.
+ * @private
+ */
+concerto.frontend.Content.Graphic.prototype.loaderFinish_ = function(e) {
+  var image = e.target;
+  goog.dom.appendChild(this.div_, image);
+  this.finishLoad();
+};

public/frontend_js/contents/ticker.js

@@ -0,0 +1,34 @@
+goog.provide('concerto.frontend.Content.Ticker');
+
+goog.require('concerto.frontend.Content');
+
+
+
+/**
+ * Ticker Text.
+ *
+ * @param {Object} data Properties for this piece of content.
+ * @constructor
+ * @extends {concerto.frontend.Content}
+ */
+concerto.frontend.Content.Ticker = function(data) {
+  concerto.frontend.Content.call(this, data);
+
+  /**
+   * The text.
+   * @type {string}
+   */
+  this.text = data.render_details.data;
+
+};
+goog.inherits(concerto.frontend.Content.Ticker, concerto.frontend.Content);
+
+
+/**
+ * Load the text.
+ * @private
+ */
+concerto.frontend.Content.Ticker.prototype.load_ = function() {
+  goog.dom.setTextContent(this.div_, this.text);
+  this.finishLoad();
+};

public/frontend_js/field.js

@@ -1,7 +1,8 @@
 goog.provide('concerto.frontend.Field');
 
 goog.require('concerto.frontend.Content.ClientTime');
-goog.require('concerto.frontend.Content.RandomText');
+goog.require('concerto.frontend.Content.Graphic');
+goog.require('concerto.frontend.Content.Ticker');
 goog.require('concerto.frontend.Transition.Fade');
 goog.require('goog.debug.Logger');
 goog.require('goog.dom');
@@ -17,11 +18,13 @@ goog.require('goog.style');
  *
  * @param {!concerto.frontend.Position} position The position that owns this.
  * @param {number} id The field ID number.
+ * @param {string} content_path The URL to get information about the content
+ *    that you would show here.
  * @param {Object=} opt_transition A transition to use between content.
  * @constructor
  * @extends {goog.events.EventTarget}
  */
-concerto.frontend.Field = function(position, id, opt_transition) {
+concerto.frontend.Field = function(position, id, content_path, opt_transition) {
   goog.events.EventTarget.call(this);
 
   /**
@@ -36,6 +39,12 @@ concerto.frontend.Field = function(position, id, opt_transition) {
    */
   this.id = id;
 
+  /**
+   * URL for content.
+   * @type {?string}
+   */
+  this.content_url = content_path;
+
   /**
    * Previous content that was shown.
    * @type {?Object}
@@ -72,6 +81,13 @@ concerto.frontend.Field = function(position, id, opt_transition) {
    */
   this.transition_ = opt_transition || concerto.frontend.Transition.Fade;
 
+  /**
+   * Alias to the XHR connection.
+   * @type {!goog.new.XhrManager}
+   * @private
+   */
+  this.connection_ = this.position.template.screen.connection;
+
   this.createDiv();
   this.nextContent();
 };
@@ -117,29 +133,45 @@ concerto.frontend.Field.prototype.inject = function(div) {
  * and then start loading it.  Listen for the FINISH_LOAD event to
  * inidicate we should show this content and the DISPLAY_END event to
  * load a new piece of content.
+ *
+ * @param {Boolean} start_load If we should trigger the startLoad event
+ *    automatically.
  */
-concerto.frontend.Field.prototype.loadContent = function() {
+concerto.frontend.Field.prototype.loadContent = function(start_load) {
+  var load_content_on_finish = start_load || null;
+
   this.logger_.info('Field ' + this.id + ' is looking for new content.');
-  var random_duration = Math.floor(Math.random() * 11);
-  var data = { duration: random_duration };
-
-  var contents = [
-    concerto.frontend.Content.SampleImage,
-    concerto.frontend.Content.RandomText,
-    concerto.frontend.Content.ClientTime
-  ];
-
-  this.next_content_ = new contents[Math.floor(Math.random() * 3)](data);
-
-  // When the content is loaded, we show it in the field,
-  goog.events.listen(this.next_content_,
-      concerto.frontend.Content.EventType.FINISH_LOAD,
-      this.showContent, false, this);
-
-  // When the content has been shown for too long try to load a new one.
-  goog.events.listen(this.next_content_,
-      concerto.frontend.Content.EventType.DISPLAY_END,
-      this.autoAdvance, false, this);
+  this.connection_.send(this.id, this.content_url, 'GET', '', null, 1,
+      goog.bind(function(e) {
+
+        var xhr = e.target;
+        //Currently only think about the first content.
+        var obj = xhr.getResponseJson()[0];
+        var contents = {
+          'Graphic': concerto.frontend.Content.Graphic,
+          'Ticker': concerto.frontend.Content.Ticker
+        };
+
+        obj.field = {
+          'size': goog.style.getSize(this.div_)
+        };
+
+        this.next_content_ = new contents[obj.type](obj);
+
+        // When the content is loaded, we show it in the field,
+        goog.events.listen(this.next_content_,
+            concerto.frontend.Content.EventType.FINISH_LOAD,
+            this.showContent, false, this);
+
+        // When the content has been shown for too long try to load a new one.
+        goog.events.listen(this.next_content_,
+            concerto.frontend.Content.EventType.DISPLAY_END,
+            this.autoAdvance, false, this);
+
+        if (load_content_on_finish) {
+          this.next_content_.startLoad();
+        }
+      }, this));
 };
 
 
@@ -172,9 +204,10 @@ concerto.frontend.Field.prototype.nextContent = function() {
       ' would like a new piece of content.');
   // If a piece of content is already in the queue, use that.
   if (!goog.isDefAndNotNull(this.next_content_)) {
-    this.loadContent();
+    this.loadContent(true);
+  } else {
+    this.next_content_.startLoad();
   }
-  this.next_content_.startLoad();
 };
 
 

public/frontend_js/position.js

@@ -121,7 +121,8 @@ concerto.frontend.Position.prototype.load = function(data) {
    * Field in this position.
    * @type {concerto.frontend.Field}
    */
-  this.field = new concerto.frontend.Field(this, this.field_id);
+  this.field = new concerto.frontend.Field(this, this.field_id,
+      data.field_contents_path);
 };
 
 

public/frontend_js/template.js

@@ -28,7 +28,6 @@ concerto.frontend.Template = function(screen, opt_div) {
   /**
    * The template ID number.
    * @type {?number}
-   * @private
    */
   this.id = null;