Rolling on the Credo JS.

diff --git a/examples/htdocs/mkws-widget-credo.js b/examples/htdocs/mkws-widget-credo.js
index 7ea0169..2bb1b1a 100644 (file)
--- a/examples/htdocs/mkws-widget-credo.js
+++ b/examples/htdocs/mkws-widget-credo.js
@@ -1,51 +1,59 @@
 mkws.registerWidgetType('Credo', function() {
-  s = []
+  var that = this;
+  var s = []
   s.push('<table>');
 
   // Main panel: encylopaedia and images on the left, topics on the right
-  s.push('<tr>');
+  s.push('<tr class="front">');
 
   s.push('<td class="main">');
-
-  s.push('<div class="encyclopaedia">');
-  s.push('<div class="title">Topic Page: ### title</div>');
-  s.push(this.subwidget('Reference'));
-  s.push('</div>');
-
-  s.push('<div class="images">');
-  s.push('<div class="title">Images</div>');
-  s.push(this.subwidget('Images', { /* ### config */ } ));
-  s.push('</div>');
-
+  s.push(section('encyclopaedia', 'Topic Page: ### title',
+                 this.subwidget('Reference')));
+  s.push(section('image', 'Images',
+                 this.subwidget('Images', { /* ### config */ })));
   s.push('</td>');
 
   s.push('<td class="side">');
-
-  s.push('<div class="mindmap">');
-  s.push('<div class="title">Create a Mind Map for ### title</div>');
-  // ### Is there a way to make a mind-map?
-  s.push('</div>');
-
-  s.push('<div class="topics">');
-  s.push('<div class="title">Related Topics</div>');
-  s.push(this.subwidget('Facet', { facet: 'subject' }));
-  s.push('</div>');
-
+  s.push(section('mindmap', 'Create a Mind Map for ### title',
+                 '### Is there a way to make a mind-map?'));
+  s.push(section('topics', 'Related Topics',
+                 this.subwidget('Facet', { facet: 'subject' })));
   s.push('</td>');
 
   s.push('</tr>');
 
-  s.push('<tr>');
-  s.push('</td>');
-  s.push('<div class="entries">');
-  s.push('<div class="title">Credo Entries</div>');
-  s.push(this.subwidget('Records', { /* ### config */ }));
-  s.push('</div>');
-  s.push('</td>');
-  s.push('</tr>');
+  s.push(sectionRow('entries', 'Credo Entries',
+                    this.subwidget('Records', { /* ### config */ })));
+  s.push(sectionRow('articles', 'Articles',
+                    this.subwidget('Records', { /* ### config */ })));
+  s.push(sectionRow('books', 'Books',
+                    this.subwidget('Records', { /* ### config */ })));
+  s.push(sectionRow('news', 'News',
+                    this.subwidget('Records', { /* ### config */ })));
+  s.push(sectionRow('resources', 'Suggested Resources',
+                    this.subwidget('Records', { /* ### config */ })));
 
-  // More TRs for Articles, Books, News, Suggested Resources
   s.push('</table>');
 
   this.node.html(s.join(''));
+
+
+  function section(xclass, title, content) {
+    var s = [];
+    s.push('<div class="' + xclass + ' section">');
+    s.push('<div class="title">' + title + '</div>');
+    s.push('<div class="content">' + content + '</div>');
+    s.push('</div>');
+    return s.join('');
+  }
+
+  function sectionRow(xclass, title, content) {
+    var s = [];
+    s.push('<tr>');
+    s.push('<td colspan="2">');
+    s.push(section(xclass, title, content));
+    s.push('</td>');
+    s.push('</tr>');
+    return s.join('');
+  }
 });