Changeset 174:bc60c6bebcf1

Timestamp:

08/28/08 19:30:09 (2 years ago)

Author:

rgrp

Branch:

default

convert_revision:

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

Message:

[js/thread][l]: factlet appending and delete support in thread editor. Results of these actions are persisted to server and live updated.

• Delete support completely new (necessitating changes to templates as well)
• Append support was partially working (event was firing in factletsearchview) but until now nothing resulted from that.
• TODO (BUG): appending an existing factlet will show up in page but will not persist (and therefore disappears on reload). This is fairly minor but is somthing to fix in the future.

Location:

microfacts

Files:

• public/behaviour/app/controllers/threadpage_controller.js (modified) (6 diffs)
• public/behaviour/app/views/factletsearchview.js (modified) (2 diffs)
• public/behaviour/app/views/threadfactletsview.js (modified) (6 diffs)
• public/behaviour/lib/domainobject.js (modified) (1 diff)
• public/behaviour/lib/moovc.js (modified) (1 diff)
• templates/thread/update.html (modified) (3 diffs)

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

@@ -3 +3 @@
 
     initialize: function (element) {
+        this.parent.apply(this, arguments);
         this.initModel();
         console.log('ThreadPageController: initialize');
@@ -14 +15 @@
         }, this);
 
+        this.thread = null;
+        this.threadFactlets = null;
+        this.selectedFactlet = null;
         this.model.startWithThread(payloadThread, payloadThreadFactlets);
     },
 
-    initModel: function (payloadThread) {
+    initModel: function () {
         this.model = new Model();
         this.model.addEvent('threadStart', this.onThreadStart.bind(this));
@@ -24 +28 @@
     onThreadStart: function() {
         console.log('ThreadPageController: onThreadStart');
+        this.thread = arguments[0];
+        this.threadFactlets = arguments[1];
         this.fireEvent('threadStart', arguments);
     },
@@ -29 +35 @@
     onFactletSelect: function(factlet) {
         console.log('ThreadPageController: saw factletSelect event');
+        this.selectedFactlet = factlet;
         this.fireEvent('factletSelect', factlet);
+    },
+
+    onFactletAppend: function(factlet) {
+        console.log('ThreadPageController: saw factletAppend event');
+        this.thread.data.factlets.push(factlet.id);
+        this.thread.save();
+        // should really do this in response to hearing save event from model I think
+        this.threadFactlets.push(factlet);
+        this.onThreadStart(this.thread, this.threadFactlets);
+    },
+
+    onFactletDelete: function(factlet) {
+        console.log('ThreadPageController: saw factletDelete event');
+        var threadFactletIds = this.thread.data.factlets.filter(function(item) {
+                    return item != factlet.id;
+        });
+        this.thread.data.factlets = threadFactletIds;
+        this.threadFactlets = this.threadFactlets.filter(function(item) {
+            return item.id != factlet.id;
+        });
+        this.thread.save()
+        // this.fireEvent('factletDelete', factlet);
+        this.onThreadStart(this.thread, this.threadFactlets);
+    },
+
+    onDomainObjectChange: function (domainObject) {
+        // TODO: check this is factlet data and relevant to us ....
+        if (domainObject.name == 'thread' && domainObject.id == this.thread.id) {
+            // TODO
+
+        }
     },
 
@@ -35 +73 @@
         this.controllers.push(controller);
         controller.addEvent('factletSelect', this.onFactletSelect.bind(this));
+        controller.addEvent('factletAppend', this.onFactletAppend.bind(this));
+
         this.addEvent('factletSelect', controller.onFactletSelect.bind(controller));
         this.addEvent('threadStart', controller.onThreadStart.bind(controller));
+    },
+
+    controls: {
+        '#factlet-delete-submit click': function (e) {
+            console.log('Factlet Delete Button clicked.');
+            var evt = new Event(e);
+            evt.stop();
+            if (this.selectedFactlet) {
+
+                this.onFactletDelete(this.selectedFactlet);
+            }
+        }
     }
 });
@@ -42 +94 @@
 if (Environment != "test") {
     window.addEvent('domready', function () {
-        new ThreadPageController(document);
+        // using document as argument causes problems
+        // as document is somehow special (cannot do delegate on it for example)
+        // so for moment look up body and use that
+        // new ThreadPageController(document);
+        new ThreadPageController($$('body')[0]);
     });
 }

microfacts/public/behaviour/app/views/factletsearchview.js

@@ -23 +23 @@
     },
 
+    searchResultLiTemplate: [
+'<li id="factlet-search-result-<%= c.id %>">',
+'<%= c.title %> &mdash; ',
+'<a class="factlet-append" href="#TODO-appendFactletAction">&laquo; append</a>'
+    ].join('\n'),
+
+    generateHtml: function (factletData) {
+        var template = new EJS({text: this.searchResultLiTemplate});
+        var html = template.render({'c': factletData});
+        return html;
+    },
+
     createSearchResultLi: function(factletData) {
-        var newLi = document.createElement('li');
-        var html = '';
-        html += factletData.title;
-        html += ' &mdash; <a class="factlet-append" href="#TODO-appendFactletAction">&laquo; append</a>';
-        newLi.innerHTML = html;
+        var dummy = document.createElement('ul');
+        fctdivHTML = this.generateHtml(factletData);
+        dummy.innerHTML = fctdivHTML;
+        var newLi = dummy.childNodes[0];
         this.searchResults.appendChild(newLi);
     },
@@ -74 +85 @@
             var elemId = evt.target.parentNode.id;
             var factletId = elemId.split('-').getLast().toInt();
-            this.fireEvent('factletAppend', this.currentFactlets[factletId]);
+            var factlet = this.currentFactlets[factletId];
+            this.fireEvent('factletAppend', factlet);
         }
 

microfacts/public/behaviour/app/views/threadfactletsview.js

@@ -15 +15 @@
     generateFactletHtml: function (factletData) {
         var template = new EJS({text: this.factletSummaryTemplate});
-        console.log(factletData);
         var html = template.render({'c': factletData});
         return html;
@@ -22 +21 @@
     onFactletSelect: function (factlet) {
         console.log("ThreadFactletsController saw factletSelect event");
-        console.log(this.factletDivsKeyedById);
         this.selectedFactletId = factlet.id;
         // TODO: unselect any selected element ...
@@ -41 +39 @@
 
     onThreadUpdate: function(thread, threadFactlets) {
-        console.log(arguments);
         this.thread = thread;
         this.factlets = threadFactlets;
@@ -51 +48 @@
             // Create ourselves so work on update too
             var dummy = document.createElement('div');
-            console.log(fct.data);
             fctdivHTML = this.generateFactletHtml(fct.data);
             dummy.innerHTML = fctdivHTML;
@@ -63 +59 @@
     },
 
+    findFactletId: function (el) {
+        var domelem = el;
+        // walk up dom looking for something with an id
+        while (domelem.id == "") {
+            var domelem = domelem.parentNode;
+        }
+        var divId = domelem.id;
+        var factletId = divId.split('-').getLast().toInt();
+        return factletId;
+    },
+
     controls: {
         '.factlet click': function (e) {
@@ -68 +75 @@
             // this.manageFactletClick(e);
             var evt = new Event(e);
-            console.log('Factlet in ThreadFactlets clicked.');
-            console.log(evt.target.id);
-            var divId = evt.target.id;
-            var factletId = divId.split('-').getLast().toInt();
+            var factletId = this.findFactletId(evt.target);
+            this.fireEvent('factletSelect', this.factletsKeyedById[factletId]);
+        },
+        // exact duplicate but cannot see how to do multiple selections ...
+        '.factlet-title click': function (e) {
+            var evt = new Event(e);
+            var factletId = this.findFactletId(evt.target);
             this.fireEvent('factletSelect', this.factletsKeyedById[factletId]);
         }

microfacts/public/behaviour/lib/domainobject.js

@@ -36 +36 @@
         this.data = data;
         this.fireEvent('dataChange', this.data);
+        this.fireEvent('domainObjectChange', this);
     },
 

microfacts/public/behaviour/lib/moovc.js

@@ -3 +3 @@
 
     log: function(message) {
-    //    console.log(message);
+        console.log(message);
     },
 

microfacts/templates/thread/update.html

@@ -12 +12 @@
   
   <head>
-    <title>View - ${c.thread.title}</title>
+    <title>Editing - ${c.thread.title}</title>
+    <style type="text/css">
+      #factlet-search {
+        float: none;
+        width: 100%;
+      }
+
+      div#edit-pane {
+        float: right;
+        width: 48%;
+      }
+
+      div#factlet-delete {
+        margin-bottom: 20px;
+      }
+    </style>
   </head>
 
   <body>
-    <aside id="thread-control-${c.thread.id}" py:if="len(c.thread.factlets) > 0">
-      <h2>Thread control:</h2>
-      <form>
-        <input type="button" value="&laquo; Previous" class="prev" />
-        <input type="button" value="Next &raquo;" class="next" />
-      </form>
-      <ul>
-        <li>${h.link_to("Add more factlets", h.url_for(controller='thread', action='edit'))}</li>
-      </ul>
-    </aside>
-    
     <div id="thread-${c.thread.id}" class="thread">
       
-      <h2 id="thread-title">Thread: ${c.thread.title}</h2>
+      <h2 id="thread-title">Editing Thread: ${c.thread.title}</h2>
       
       <py:choose>  
@@ -49 +53 @@
     </div><!--! /thread -->
     
+  <div id="edit-pane">
+
+    <div id="factlet-delete">
+      <h3>Delete Selected Factlet</h3>
+      <form action="${h.url_for(controller='rest', action='update', register='thread')}" method="post">
+        <input type="submit" id="factlet-delete-submit" value="Delete &raquo;" />
+      </form>
+    </div>
+
     <div id="factlet-search">
-      <h3>Search for Factlets:</h3>
+      <h3>Search for Factlets to Add:</h3>
       <form action="${h.url_for(controller='rest', action='search', register='factlet')}" method="post">
         <input type="text" id="factlet-search-title" name="title" />
@@ -61 +74 @@
       </ul>
     </div><!--! /factlet-search -->
+  </div><!--! /edit-pane -->
+
 
   </body>