Changeset 186

Show
Ignore:
Timestamp:
08/28/08 20:30:09 (4 months ago)
Author:
rgrp
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.
Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

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

    r185 r186  
    33 
    44    initialize: function (element) { 
     5        this.parent.apply(this, arguments); 
    56        this.initModel(); 
    67        console.log('ThreadPageController: initialize'); 
    …… 
    1415        }, this); 
    1516 
     17        this.thread = null; 
     18        this.threadFactlets = null; 
     19        this.selectedFactlet = null; 
    1620        this.model.startWithThread(payloadThread, payloadThreadFactlets); 
    1721    }, 
    1822 
    19     initModel: function (payloadThread) { 
     23    initModel: function () { 
    2024        this.model = new Model(); 
    2125        this.model.addEvent('threadStart', this.onThreadStart.bind(this)); 
    …… 
    2428    onThreadStart: function() { 
    2529        console.log('ThreadPageController: onThreadStart'); 
     30        this.thread = arguments[0]; 
     31        this.threadFactlets = arguments[1]; 
    2632        this.fireEvent('threadStart', arguments); 
    2733    }, 
    …… 
    2935    onFactletSelect: function(factlet) { 
    3036        console.log('ThreadPageController: saw factletSelect event'); 
     37        this.selectedFactlet = factlet; 
    3138        this.fireEvent('factletSelect', factlet); 
     39    }, 
     40 
     41    onFactletAppend: function(factlet) { 
     42        console.log('ThreadPageController: saw factletAppend event'); 
     43        this.thread.data.factlets.push(factlet.id); 
     44        this.thread.save(); 
     45        // should really do this in response to hearing save event from model I think 
     46        this.threadFactlets.push(factlet); 
     47        this.onThreadStart(this.thread, this.threadFactlets); 
     48    }, 
     49 
     50    onFactletDelete: function(factlet) { 
     51        console.log('ThreadPageController: saw factletDelete event'); 
     52        var threadFactletIds = this.thread.data.factlets.filter(function(item) { 
     53                    return item != factlet.id; 
     54        }); 
     55        this.thread.data.factlets = threadFactletIds; 
     56        this.threadFactlets = this.threadFactlets.filter(function(item) { 
     57            return item.id != factlet.id; 
     58        }); 
     59        this.thread.save() 
     60        // this.fireEvent('factletDelete', factlet); 
     61        this.onThreadStart(this.thread, this.threadFactlets); 
     62    }, 
     63 
     64    onDomainObjectChange: function (domainObject) { 
     65        // TODO: check this is factlet data and relevant to us .... 
     66        if (domainObject.name == 'thread' && domainObject.id == this.thread.id) { 
     67            // TODO 
     68 
     69        } 
    3270    }, 
    3371 
    …… 
    3573        this.controllers.push(controller); 
    3674        controller.addEvent('factletSelect', this.onFactletSelect.bind(this)); 
     75        controller.addEvent('factletAppend', this.onFactletAppend.bind(this)); 
     76 
    3777        this.addEvent('factletSelect', controller.onFactletSelect.bind(controller)); 
    3878        this.addEvent('threadStart', controller.onThreadStart.bind(controller)); 
     79    }, 
     80 
     81    controls: { 
     82        '#factlet-delete-submit click': function (e) { 
     83            console.log('Factlet Delete Button clicked.'); 
     84            var evt = new Event(e); 
     85            evt.stop(); 
     86            if (this.selectedFactlet) { 
     87 
     88                this.onFactletDelete(this.selectedFactlet); 
     89            } 
     90        } 
    3991    } 
    4092}); 
    …… 
    4294if (Environment != "test") { 
    4395    window.addEvent('domready', function () { 
    44         new ThreadPageController(document); 
     96        // using document as argument causes problems 
     97        // as document is somehow special (cannot do delegate on it for example) 
     98        // so for moment look up body and use that 
     99        // new ThreadPageController(document); 
     100        new ThreadPageController($$('body')[0]); 
    45101    }); 
    46102} 

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

    r185 r186  
    2323    }, 
    2424 
     25    searchResultLiTemplate: [ 
     26'<li id="factlet-search-result-<%= c.id %>">', 
     27'<%= c.title %> &mdash; ', 
     28'<a class="factlet-append" href="#TODO-appendFactletAction">&laquo; append</a>' 
     29    ].join('\n'), 
     30 
     31    generateHtml: function (factletData) { 
     32        var template = new EJS({text: this.searchResultLiTemplate}); 
     33        var html = template.render({'c': factletData}); 
     34        return html; 
     35    }, 
     36 
    2537    createSearchResultLi: function(factletData) { 
    26         var newLi = document.createElement('li'); 
    27         var html = ''; 
    28         html += factletData.title; 
    29         html += ' &mdash; <a class="factlet-append" href="#TODO-appendFactletAction">&laquo; append</a>'; 
    30         newLi.innerHTML = html; 
     38        var dummy = document.createElement('ul'); 
     39        fctdivHTML = this.generateHtml(factletData); 
     40        dummy.innerHTML = fctdivHTML; 
     41        var newLi = dummy.childNodes[0]; 
    3142        this.searchResults.appendChild(newLi); 
    3243    }, 
    …… 
    7485            var elemId = evt.target.parentNode.id; 
    7586            var factletId = elemId.split('-').getLast().toInt(); 
    76             this.fireEvent('factletAppend', this.currentFactlets[factletId]); 
     87            var factlet = this.currentFactlets[factletId]; 
     88            this.fireEvent('factletAppend', factlet); 
    7789        } 
    7890 

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

    r185 r186  
    1515    generateFactletHtml: function (factletData) { 
    1616        var template = new EJS({text: this.factletSummaryTemplate}); 
    17         console.log(factletData); 
    1817        var html = template.render({'c': factletData}); 
    1918        return html; 
    …… 
    2221    onFactletSelect: function (factlet) { 
    2322        console.log("ThreadFactletsController saw factletSelect event"); 
    24         console.log(this.factletDivsKeyedById); 
    2523        this.selectedFactletId = factlet.id; 
    2624        // TODO: unselect any selected element ... 
    …… 
    4139 
    4240    onThreadUpdate: function(thread, threadFactlets) { 
    43         console.log(arguments); 
    4441        this.thread = thread; 
    4542        this.factlets = threadFactlets; 
    …… 
    5148            // Create ourselves so work on update too 
    5249            var dummy = document.createElement('div'); 
    53             console.log(fct.data); 
    5450            fctdivHTML = this.generateFactletHtml(fct.data); 
    5551            dummy.innerHTML = fctdivHTML; 
    …… 
    6359    }, 
    6460 
     61    findFactletId: function (el) { 
     62        var domelem = el; 
     63        // walk up dom looking for something with an id 
     64        while (domelem.id == "") { 
     65            var domelem = domelem.parentNode; 
     66        } 
     67        var divId = domelem.id; 
     68        var factletId = divId.split('-').getLast().toInt(); 
     69        return factletId; 
     70    }, 
     71 
    6572    controls: { 
    6673        '.factlet click': function (e) { 
    …… 
    6875            // this.manageFactletClick(e); 
    6976            var evt = new Event(e); 
    70             console.log('Factlet in ThreadFactlets clicked.'); 
    71             console.log(evt.target.id); 
    72             var divId = evt.target.id; 
    73             var factletId = divId.split('-').getLast().toInt(); 
     77            var factletId = this.findFactletId(evt.target); 
     78            this.fireEvent('factletSelect', this.factletsKeyedById[factletId]); 
     79        }, 
     80        // exact duplicate but cannot see how to do multiple selections ... 
     81        '.factlet-title click': function (e) { 
     82            var evt = new Event(e); 
     83            var factletId = this.findFactletId(evt.target); 
    7484            this.fireEvent('factletSelect', this.factletsKeyedById[factletId]); 
    7585        } 

  • trunk/microfacts/public/behaviour/lib/domainobject.js

    r179 r186  
    3636        this.data = data; 
    3737        this.fireEvent('dataChange', this.data); 
     38        this.fireEvent('domainObjectChange', this); 
    3839    }, 
    3940 

  • trunk/microfacts/public/behaviour/lib/moovc.js

    r185 r186  
    33 
    44    log: function(message) { 
    5     //    console.log(message); 
     5        console.log(message); 
    66    }, 
    77 

  • trunk/microfacts/templates/thread/update.html

    r180 r186  
    1212   
    1313  <head> 
    14     <title>View - ${c.thread.title}</title> 
     14    <title>Editing - ${c.thread.title}</title> 
     15    <style type="text/css"> 
     16      #factlet-search { 
     17        float: none; 
     18        width: 100%; 
     19      } 
     20 
     21      div#edit-pane { 
     22        float: right; 
     23        width: 48%; 
     24      } 
     25 
     26      div#factlet-delete { 
     27        margin-bottom: 20px; 
     28      } 
     29    </style> 
    1530  </head> 
    1631 
    1732  <body> 
    18     <aside id="thread-control-${c.thread.id}" py:if="len(c.thread.factlets) > 0"> 
    19       <h2>Thread control:</h2> 
    20       <form> 
    21         <input type="button" value="&laquo; Previous" class="prev" /> 
    22         <input type="button" value="Next &raquo;" class="next" /> 
    23       </form> 
    24       <ul> 
    25         <li>${h.link_to("Add more factlets", h.url_for(controller='thread', action='edit'))}</li> 
    26       </ul> 
    27     </aside> 
    28      
    2933    <div id="thread-${c.thread.id}" class="thread"> 
    3034       
    31       <h2 id="thread-title">Thread: ${c.thread.title}</h2> 
     35      <h2 id="thread-title">Editing Thread: ${c.thread.title}</h2> 
    3236       
    3337      <py:choose>   
    …… 
    4953    </div><!--! /thread --> 
    5054     
     55  <div id="edit-pane"> 
     56 
     57    <div id="factlet-delete"> 
     58      <h3>Delete Selected Factlet</h3> 
     59      <form action="${h.url_for(controller='rest', action='update', register='thread')}" method="post"> 
     60        <input type="submit" id="factlet-delete-submit" value="Delete &raquo;" /> 
     61      </form> 
     62    </div> 
     63 
    5164    <div id="factlet-search"> 
    52       <h3>Search for Factlets:</h3> 
     65      <h3>Search for Factlets to Add:</h3> 
    5366      <form action="${h.url_for(controller='rest', action='search', register='factlet')}" method="post"> 
    5467        <input type="text" id="factlet-search-title" name="title" /> 
    …… 
    6174      </ul> 
    6275    </div><!--! /factlet-search --> 
     76  </div><!--! /edit-pane --> 
     77 
    6378 
    6479  </body>