Changeset 171:32a6b9eea546

Timestamp:

08/21/08 20:25:41 (2 years ago)

Author:

rgrp

Branch:

default

convert_revision:

svn:10edda23-d834-0410-9182-b00384516d49/trunk@181

Message:

[js][m]: more work on threadfactlets_controller (test esp.) plus created factletsearch_controller and added support for handling append click event.

Location:

microfacts/public

Files:

• behaviour/app/controllers/factletsearch_controller.js (modified) (6 diffs)
• behaviour/app/controllers/threadfactlets_controller.js (modified) (2 diffs)
• behaviour/load.js (modified) (1 diff)
• test/index.html (modified) (2 diffs)
• test/spec/factletsearch_controller_spec.js (added)
• test/spec/threadfactletscontroller_spec.js (modified) (3 diffs)

microfacts/public/behaviour/app/controllers/factletsearch_controller.js

@@ -7 +7 @@
         this.searchResults = $$('.factlet-search-results')[0];
         // list of factlet ids currently being shown
-        this.currentList = [];
+        this.currentFactletIds = [];
+        this.currentFactlets = new Hash({});
     },
     
@@ -19 +20 @@
     onDataChange: function (data) {
         // TODO: check this is factlet data and relevant to us ....
-        if (this.currentList.contains(data.id)) {
+        if (this.currentFactletIds.contains(data.id)) {
             this.createSearchResultLi(data);
         }
@@ -28 +29 @@
         var html = '';
         html += factletData.title;
-        html += ' &mdash; <a class="factlet-append" href="#TODO-appendFactletAction">&laquo; add</a>';
+        html += ' &mdash; <a class="factlet-append" href="#TODO-appendFactletAction">&laquo; append</a>';
         newLi.innerHTML = html;
         this.searchResults.appendChild(newLi);
@@ -36 +37 @@
         console.log('FactletSearchController: updateSearchResults');
         console.log(data);
-        this.currentList = data;
+        this.currentFactletIds = data;
+        this.currentFactlets.empty();
         // empty current list of results
         // assume only one for present
         this.searchResults.innerHTML = '';
         // data will be list of factlet ids
-        data.each(function(factletId) {
+        this.currentFactletIds.each(function(factletId) {
             var factlet = DomainObject.Resource('Factlet', factletId);
+            this.currentFactlets[factletId] = factlet;
             // if object is already 
             if (factlet.data) {
@@ -55 +58 @@
     controls: {
         '#factlet-search-submit click': function (e) {
+            console.log('Factlet Search Button clicked.');
             var evt = new Event(e);
             evt.stop();
-            console.log('Factlet Search Button clicked.');
             var requestOptions = {
                 onSuccess: this.updateSearchResults.bind(this)
@@ -66 +69 @@
             var query = { "q": data };
             request.post(url, encodeURIComponent(JSON.encode(query)));
+        },
+        '.factlet-append click': function(e) {
+            var evt = new Event(e);
+            evt.stop();
+            var elemId = evt.target.parentNode.id;
+            var factletId = elemId.split('-').getLast().toInt();
+            this.fireEvent('factletAppend', this.currentFactlets[factletId]);
         }
+
     }
 });

microfacts/public/behaviour/app/controllers/threadfactlets_controller.js

@@ -2 +2 @@
     Extends: Controller,
 
-//    factletSummaryTemplate = [
-//'<div id="factlet-<%= c.id %>" class="factlet">',
-//'  <%= this.partial({url: baseurl+'/title.ejs'}) %>',
-//'</div>',
-//    ].join('\n');
+    factletSummaryTemplate: [
+'<div id="factlet-<%= c.id %>" class="factlet">',
+'<h3 class="factlet-title"><%= c.title %></h3>',
+'</div>'
+    ].join('\n'),
     
     initialize: function (element) {
         this.parent.apply(this, arguments);
-//        this.model = DomainObject.Resource('Factlet', this.id());
-//        this.views.push(new FillView());
-//        this.views.push(new PageTitleView('Factlets'));
-//        this.addDefaultListeners();
         this.factlets = [];
         this.selectedFactletId = null;
     },
 
-    // Name is relative to app/views directory, without an .ejs extension.
-    renderView: function (name, data) {
-        // return new EJS({url: '/app/views/'+name+'.ejs'}).render({'c': data});
-    },
-
-    generateFactletElement: function (factlet) {
-        // var html = this.renderView('factlet/summary', factlet.data);
-        html = null;
+    generateFactletHtml: function (factletData) {
+        var template = new EJS({text: this.factletSummaryTemplate});
+        console.log(factletData);
+        var html = template.render({'c': factletData});
         return html;
     },
@@ -41 +33 @@
     },
 
-    onThreadStart: function () {
+    onThreadStart: function (thread, threadFactlets) {
         console.log("ThreadFactletsController saw threadStart event");
-        this.thread = arguments[0];
-        this.factlets = arguments[1];
-        this.factletsKeyedById = new Hash({});
-        this.factletDivsKeyedById = new Hash({});
-        this.factlets.each(function(fct) {
-            this.factletsKeyedById[fct.id] = fct;
-            // now associate each factlet with its element
-            var divId = 'factlet-' + fct.id;
-            var fctdiv = $(divId);
-            this.factletDivsKeyedById[fct.id] = fctdiv;
-        }, this);
+        // no specific initializing here so just do update
+        this.onThreadUpdate(thread, threadFactlets);
         console.log('ThreadFactletsController: end');
     },
 
-    onRemoveSelectedFactlet: function() {
-        this.thread.factlets.erase(this.selectedFactletId);
-        this.thread.save();
+    onThreadUpdate: function(thread, threadFactlets) {
+        console.log(arguments);
+        this.thread = thread;
+        this.factlets = threadFactlets;
+        this.factletsKeyedById = new Hash({});
+        this.factletDivsKeyedById = new Hash({});
+        this.element.innerHTML = '';
+        this.factlets.each(function(fct) {
+            this.factletsKeyedById[fct.id] = fct;
+            // Create ourselves so work on update too
+            var dummy = document.createElement('div');
+            console.log(fct.data);
+            fctdivHTML = this.generateFactletHtml(fct.data);
+            dummy.innerHTML = fctdivHTML;
+            var fctdiv = dummy.childNodes[0];
+            this.element.appendChild(fctdiv);
+            // now associate each factlet with its element
+            // var divId = 'factlet-' + fct.id;
+            // var fctdiv = $(divId);
+            this.factletDivsKeyedById[fct.id] = fctdiv;
+        }, this);
     },
 

microfacts/public/behaviour/load.js

@@ -197 +197 @@
     type: "js",
     path: "app/microfacts.js?" + Math.random(),
-    requires: ['domainobject', 'view', 'controller', 'microfactscontroller', 'factletcontroller', 'threadfactletscontroller', 'mapview', 'timelineview', 'geochronopagecontroller'],
+    requires: ['domainobject', 'view', 'controller', 'microfactscontroller', 'factletcontroller', 'threadfactletscontroller', 'mapview', 'timelineview', 'geochronopagecontroller', 'threadpagecontroller'],
     varName: "Microfacts"
 });

microfacts/public/test/index.html

@@ -53 +53 @@
   <script type="text/javascript" src="spec/model_spec.js?123"></script>
   <script type="text/javascript" src="spec/controller_spec.js?123"></script>
+
+  <!-- views -->
   <script type="text/javascript" src="spec/view_spec.js?123"></script>
+  <script type="text/javascript" src="spec/threadfactletscontroller_spec.js?123"></script>
+  <script type="text/javascript" src="spec/factletsearch_controller_spec.js?123"></script>
+
   <script type="text/javascript" src="spec/mapview_spec.js?123"></script>
   <script type="text/javascript" src="spec/timelineview_spec.js?123"></script>
+
+  <!-- (page) controllers -->
   <script type="text/javascript" src="spec/geochronopage_controller_spec.js?123"></script>
-  <!--
-  <script type="text/javascript" src="spec/threadfactletscontroller_spec.js?123"></script>
-  -->
 
 <!--
@@ -101 +105 @@
     </div>
   </div>
+
+  <div id="factlet-search">
+    <ul class="factlet-search-results"></ul>
+  </div>
  
       <script type="text/javascript" charset="utf-8">

microfacts/public/test/spec/threadfactletscontroller_spec.js

@@ -1 @@
-var thread = {
+var threadData = {
     'id' : 2,
     'title': 'Blah',
@@ -5 +5 @@
 };
 
+var thread = {
+    'id': threadData['id'],
+    'data': threadData
+};
+
 var threadFactlets = [
-    {
+    { 
         'id': 101,
-        'title': 'My Factlet',
-        'location' : {
-            "type": "Point",
-            "coordinates": [51.50842, -0.12553]
+        'data': {
+            'id': 101,
+            'title': 'My Factlet',
+            'location' : {
+                "type": "Point",
+                "coordinates": [51.50842, -0.12553]
+            }
         }
     },
-    {
+    { 
         'id': 102,
-        'title': 'Your Factlet',
-        'location' : {
-            "type": "Point", 
-            "coordinates": [0, 0]
+        'data': {
+            'id': 102,
+            'title': 'Your Factlet',
+            'location' : {
+                "type": "Point", 
+                "coordinates": [0, 0]
+            }
         }
     }
 ];
+
 
 describe('ThreadFactletsController', {
@@ -51 +63 @@
     },
 
-    'should manage generateFactletElement': function() {
-        var html = ctrl.generateFactletElement(threadFactlets[0]);
-        console.log(html);
+    'test generateFactletHtml': function() {
+        var html = ctrl.generateFactletHtml(threadFactlets[0]);
+        expect(html.substring(0, 21)).should_be('<div id="factlet-101"');
     }
 
-
 });