Stub out a quick Field, add styles to Positions.

- Add a Field that fills itself with filler text.
- Apply styles to Positions, prevent certain styles from being set (LOCKED_STYLES) and provide a set of defaults (DEFAULT_STYLES).

app/views/layouts/frontend.html.erb

@@ -4,6 +4,7 @@
   <title>Concerto - Open Source Digital Signage</title>
   <%= csrf_meta_tag %>
   <script src="/frontend_js/closure-library/closure/goog/base.js"></script>
+  <script src="/frontend_js/field.js"></script>
   <script src="/frontend_js/position.js"></script>
   <script src="/frontend_js/template.js"></script>
   <script src="/frontend_js/screen.js"></script>

public/frontend_js/field.js

@@ -0,0 +1,50 @@
+goog.require('goog.dom');
+goog.require('goog.style');
+goog.require('goog.text.LoremIpsum');
+
+goog.provide('concerto.frontend.Field');
+
+
+
+/**
+ * A Position's Field.
+ * Responsible for rendering the content in a position.
+ * @param {Object} position The position that owns this.
+ * @param {number} id The field ID number.
+ * @constructor
+ */
+concerto.frontend.Field = function(position, id) {
+  this.position = position;
+  this.id = id;
+
+  this.createDiv();
+  goog.dom.setTextContent(this.div_, this.junkText(4));
+};
+
+
+/**
+ * Create a div for the field.
+ */
+concerto.frontend.Field.prototype.createDiv = function() {
+  if (!goog.isDefAndNotNull(this.div_)) {
+    var div = goog.dom.createDom('div');
+    goog.style.setSize(div, '100%', '100%');
+    this.position.inject(div);
+    this.div_ = div;
+  }
+};
+
+
+/**
+ * Generate some filler text.
+ * @param {number} length Number of paragraphs.
+ * @return {string} Random text.
+ */
+concerto.frontend.Field.prototype.junkText = function(length) {
+  var x = '';
+  var generator = new goog.text.LoremIpsum();
+  for (var i = 0; i < length; i++) {
+    x += generator.generateParagraph();
+  }
+  return x;
+};

public/frontend_js/position.js

@@ -1,3 +1,6 @@
+goog.require('concerto.frontend.Field');
+goog.require('goog.array');
+goog.require('goog.object');
 goog.require('goog.style');
 
 goog.provide('concerto.frontend.position');
@@ -26,7 +29,7 @@ concerto.frontend.Position = function(template, div) {
  * Create the div to use for the position.
  */
 concerto.frontend.Position.prototype.createDiv = function() {
-  var div = goog.dom.createDom('div');
+  var div = goog.dom.createDom('div', {'id': this.id, 'class': 'field'});
   goog.style.setStyle(div, 'position', 'absolute');
   goog.style.setStyle(div, 'background-color', 'green');
   this.template.inject(div);
@@ -47,7 +50,10 @@ concerto.frontend.Position.prototype.load = function(data) {
   this.top = parseFloat(data.top);
   this.style = data.style;
 
+  this.field_id = data.field_id;
   this.draw();
+  this.setProperties();
+  this.field = new concerto.frontend.Field(this, this.field_id);
 };
 
 
@@ -64,3 +70,64 @@ concerto.frontend.Position.prototype.draw = function() {
   var width = (this.right - this.left) * 100;
   goog.style.setSize(this.div_, width + '%', height + '%');
 };
+
+
+/**
+ * Inset a div into the position.
+ * We treat the position div as a private variable,
+ * so we should avoid touching it outside the position class.
+ * @param {!Object} div The think to insert into the position.
+ */
+concerto.frontend.Position.prototype.inject = function(div) {
+  goog.dom.appendChild(this.div_, div);
+};
+
+
+/**
+ * Apply the styles and properties to the position.
+ * Strip out any LOCKED_STYLES, add in any
+ * needed DEFAULT_STYLES, and then append to the
+ * current styling information.
+ */
+concerto.frontend.Position.prototype.setProperties = function() {
+  // Set the ID and class.
+  var properties = {
+    'id': 'position_' + this.id,
+    'class': 'field'
+  };
+  goog.dom.setProperties(this.div_, properties);
+
+  // Load the styles into an map.
+  var loaded_styles = goog.style.parseStyleAttribute(this.style);
+  // Filter out the locked properties.
+  var clean_styles = goog.object.filter(loaded_styles, function(value, key, o) {
+    return !goog.array.contains(concerto.frontend.Position.LOCKED_STYLES,
+        key.toLowerCase());
+  });
+  // Add the sanitized user styles on top of the default styles.
+  var styles = concerto.frontend.Position.DEFAULT_STYLES;
+  goog.object.extend(styles, clean_styles);
+
+  // Apply the styles.
+  goog.style.setStyle(this.div_, styles);
+};
+
+
+/**
+ * Styles the user may not overwrite.
+ * Names should be in lower case.
+ * @define {Array.string} Style names.
+ */
+concerto.frontend.Position.LOCKED_STYLES = [
+  'overflow', 'width', 'height', 'top', 'left', 'bottom', 'right'
+];
+
+
+/**
+ * Default styles.
+ * @define {Object.string, (number|string)} Default style-value mapping.
+ */
+concerto.frontend.Position.DEFAULT_STYLES = {
+  'overflow': 'hidden'
+};
+