Add support for mini-screens.

Let the screen constructor take an optional div as a parameter to build itself in. This lets you put a screen in a specific element on a page without destroying the entire document body. Anything inside this element will be destroy, and it defaults to document body just like the old system.
concerto · Feb 17, 2012 · 70d1208 · 70d1208
1 parent 1f3365d
commit 70d1208
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 20 deletions.
diff --git a/app/views/layouts/frontend.html.erb b/app/views/layouts/frontend.html.erb
@@ -15,10 +15,13 @@
       height: 100%;
     }
   </style>
-</head>
-<body>
   <script type="text/javascript">
-    var s = new concerto.frontend.Screen(1);
+    var s;
+    function load(){
+      s = new concerto.frontend.Screen(1);
+    }
   </script>
+</head>
+<body onload="load()">
 </body>
 </html>
diff --git a/public/frontend_js/field.js b/public/frontend_js/field.js
@@ -9,7 +9,7 @@ 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 {!concerto.frontend.Position} position The position that owns this.
  * @param {number} id The field ID number.
  * @constructor
  */

diff --git a/public/frontend_js/position.js b/public/frontend_js/position.js
@@ -9,18 +9,18 @@ goog.provide('concerto.frontend.position');
 
 /**
  * A Position on a Template.
- * @param {!Object} template The concerto.frontend.Template that
+ * @param {!concerto.frontend.Template} template The template
  *   is holding this position.
- * @param {?Object} div The div to use for the position.
+ * @param {Object=} opt_div The div to use for the position.
  * @constructor
  */
-concerto.frontend.Position = function(template, div) {
+concerto.frontend.Position = function(template, opt_div) {
   this.id = null;
   this.template = template;
-  if (!goog.isDefAndNotNull(div)) {
+  if (!goog.isDefAndNotNull(opt_div)) {
     this.createDiv();
   } else {
-    this.div_ = div;
+    this.div_ = opt_div;
   }
 };
 

diff --git a/public/frontend_js/screen.js b/public/frontend_js/screen.js
@@ -9,13 +9,21 @@ goog.provide('concerto.frontend.screen');
 /**
  * Screen Frontend.
  * @param {number} screen_id Screen ID number.
+ * @param {Object=} opt_div Optional load to put the screen in.  Defaults
+ *   to document.body, so the screen will take over the entire body.
  * @constructor
  */
-concerto.frontend.Screen = function(screen_id) {
+concerto.frontend.Screen = function(screen_id, opt_div) {
   this.connection = new goog.net.XhrManager(2, null, 0, 2);
   this.id = screen_id;
   this.name = 'New Screen';
 
+  if (goog.isDefAndNotNull(opt_div)) {
+    this.container_ = opt_div;
+  } else {
+    this.container_ = document.body;
+  }
+
   this.setup();
 };
 
@@ -37,15 +45,33 @@ concerto.frontend.Screen.prototype.configUrl = function() {
  * Download the config, parse it, and start creating the template.
  */
 concerto.frontend.Screen.prototype.setup = function() {
+  var properties = {'id': 'screen_' + this.id, 'class': 'screen'};
+  var div = goog.dom.createDom('div', properties);
+  goog.style.setSize(div, '100%', '100%');
+  goog.style.setStyle(div, 'position', 'relative');
+  goog.dom.removeChildren(this.container_);
+  goog.dom.appendChild(this.container_, div);
+  this.div_ = div;
+
   var url = this.configUrl();
   this.connection.send('setup', url, 'GET', '', null, 1, goog.bind(function(e) {
     var xhr = e.target;
     var obj = xhr.getResponseJson();
 
     this.name = obj.name;
     if (goog.isDefAndNotNull(obj.template)) {
-      this.template = new concerto.frontend.Template();
+      this.template = new concerto.frontend.Template(this);
       this.template.load(obj.template);
     }
   }, this));
 };
+
+
+/**
+ * Insert the something into the screen.
+ * @param {!Object} div The thing to insert into the screen.
+ */
+concerto.frontend.Screen.prototype.inject = function(div) {
+  goog.dom.appendChild(this.div_, div);
+};
+
diff --git a/public/frontend_js/template.js b/public/frontend_js/template.js
@@ -10,17 +10,19 @@ goog.provide('concerto.frontend.template');
 /**
  * Screen Template.
  * The template being shown on the screen.
- * @param {=Object} div Div to hold template.
- *   will be created if needed.
+ * @param {!concerto.frontend.Screen} screen The screen showing this template.
+ * @param {Object=} opt_div Div to hold template.
+ *   Will be created if needed.
  * @constructor
  */
-concerto.frontend.Template = function(div) {
+concerto.frontend.Template = function(screen, opt_div) {
+  this.screen = screen;
   this.id = null;
   this.positions = [];
-  if (!goog.isDefAndNotNull(div)) {
+  if (!goog.isDefAndNotNull(opt_div)) {
     this.createDiv();
   } else {
-    this.div_ = div;
+    this.div_ = opt_div;
   }
 };
 
@@ -31,10 +33,10 @@ concerto.frontend.Template = function(div) {
  * take up the full document body.
  */
 concerto.frontend.Template.prototype.createDiv = function() {
-  var div = goog.dom.createDom('div');
+  var div = goog.dom.createDom('div', {'id': 'template', 'class': 'template'});
   goog.style.setSize(div, '100%', '100%');
   goog.style.setStyle(div, 'background-color', 'blue');
-  goog.dom.appendChild(document.body, div);
+  this.screen.inject(div);
   this.div_ = div;
 };
 
@@ -47,6 +49,8 @@ concerto.frontend.Template.prototype.createDiv = function() {
  */
 concerto.frontend.Template.prototype.load = function(data) {
   this.id = data.id;
+  goog.dom.setProperties(this.div_, {'id': 'template_' + this.id});
+
   if (goog.isDefAndNotNull(data.positions)) {
     goog.array.forEach(data.positions, goog.bind(function(position_data) {
       var position = new concerto.frontend.Position(this);
@@ -58,10 +62,10 @@ concerto.frontend.Template.prototype.load = function(data) {
 
 
 /**
- * Inset a div into the template.
+ * Insert a div into the template.
  * We treat the template div as a private variable,
  * so we should avoid touching it outside the Template class.
- * @param {!Object} div The think to insert into the template.
+ * @param {!Object} div The thing to insert into the template.
  */
 concerto.frontend.Template.prototype.inject = function(div) {
   goog.dom.appendChild(this.div_, div);