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:
-
Legend:
- Unmodified
- Added
- Removed
-
|
r173
|
r174
|
|
| 3 | 3 | |
| 4 | 4 | initialize: function (element) { |
| | 5 | this.parent.apply(this, arguments); |
| 5 | 6 | this.initModel(); |
| 6 | 7 | console.log('ThreadPageController: initialize'); |
| … |
… |
|
| 14 | 15 | }, this); |
| 15 | 16 | |
| | 17 | this.thread = null; |
| | 18 | this.threadFactlets = null; |
| | 19 | this.selectedFactlet = null; |
| 16 | 20 | this.model.startWithThread(payloadThread, payloadThreadFactlets); |
| 17 | 21 | }, |
| 18 | 22 | |
| 19 | | initModel: function (payloadThread) { |
| | 23 | initModel: function () { |
| 20 | 24 | this.model = new Model(); |
| 21 | 25 | this.model.addEvent('threadStart', this.onThreadStart.bind(this)); |
| … |
… |
|
| 24 | 28 | onThreadStart: function() { |
| 25 | 29 | console.log('ThreadPageController: onThreadStart'); |
| | 30 | this.thread = arguments[0]; |
| | 31 | this.threadFactlets = arguments[1]; |
| 26 | 32 | this.fireEvent('threadStart', arguments); |
| 27 | 33 | }, |
| … |
… |
|
| 29 | 35 | onFactletSelect: function(factlet) { |
| 30 | 36 | console.log('ThreadPageController: saw factletSelect event'); |
| | 37 | this.selectedFactlet = factlet; |
| 31 | 38 | 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 | } |
| 32 | 70 | }, |
| 33 | 71 | |
| … |
… |
|
| 35 | 73 | this.controllers.push(controller); |
| 36 | 74 | controller.addEvent('factletSelect', this.onFactletSelect.bind(this)); |
| | 75 | controller.addEvent('factletAppend', this.onFactletAppend.bind(this)); |
| | 76 | |
| 37 | 77 | this.addEvent('factletSelect', controller.onFactletSelect.bind(controller)); |
| 38 | 78 | 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 | } |
| 39 | 91 | } |
| 40 | 92 | }); |
| … |
… |
|
| 42 | 94 | if (Environment != "test") { |
| 43 | 95 | 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]); |
| 45 | 101 | }); |
| 46 | 102 | } |
-
|
r173
|
r174
|
|
| 23 | 23 | }, |
| 24 | 24 | |
| | 25 | searchResultLiTemplate: [ |
| | 26 | '<li id="factlet-search-result-<%= c.id %>">', |
| | 27 | '<%= c.title %> — ', |
| | 28 | '<a class="factlet-append" href="#TODO-appendFactletAction">« 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 | |
| 25 | 37 | createSearchResultLi: function(factletData) { |
| 26 | | var newLi = document.createElement('li'); |
| 27 | | var html = ''; |
| 28 | | html += factletData.title; |
| 29 | | html += ' — <a class="factlet-append" href="#TODO-appendFactletAction">« 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]; |
| 31 | 42 | this.searchResults.appendChild(newLi); |
| 32 | 43 | }, |
| … |
… |
|
| 74 | 85 | var elemId = evt.target.parentNode.id; |
| 75 | 86 | var factletId = elemId.split('-').getLast().toInt(); |
| 76 | | this.fireEvent('factletAppend', this.currentFactlets[factletId]); |
| | 87 | var factlet = this.currentFactlets[factletId]; |
| | 88 | this.fireEvent('factletAppend', factlet); |
| 77 | 89 | } |
| 78 | 90 | |
-
|
r173
|
r174
|
|
| 15 | 15 | generateFactletHtml: function (factletData) { |
| 16 | 16 | var template = new EJS({text: this.factletSummaryTemplate}); |
| 17 | | console.log(factletData); |
| 18 | 17 | var html = template.render({'c': factletData}); |
| 19 | 18 | return html; |
| … |
… |
|
| 22 | 21 | onFactletSelect: function (factlet) { |
| 23 | 22 | console.log("ThreadFactletsController saw factletSelect event"); |
| 24 | | console.log(this.factletDivsKeyedById); |
| 25 | 23 | this.selectedFactletId = factlet.id; |
| 26 | 24 | // TODO: unselect any selected element ... |
| … |
… |
|
| 41 | 39 | |
| 42 | 40 | onThreadUpdate: function(thread, threadFactlets) { |
| 43 | | console.log(arguments); |
| 44 | 41 | this.thread = thread; |
| 45 | 42 | this.factlets = threadFactlets; |
| … |
… |
|
| 51 | 48 | // Create ourselves so work on update too |
| 52 | 49 | var dummy = document.createElement('div'); |
| 53 | | console.log(fct.data); |
| 54 | 50 | fctdivHTML = this.generateFactletHtml(fct.data); |
| 55 | 51 | dummy.innerHTML = fctdivHTML; |
| … |
… |
|
| 63 | 59 | }, |
| 64 | 60 | |
| | 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 | |
| 65 | 72 | controls: { |
| 66 | 73 | '.factlet click': function (e) { |
| … |
… |
|
| 68 | 75 | // this.manageFactletClick(e); |
| 69 | 76 | 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); |
| 74 | 84 | this.fireEvent('factletSelect', this.factletsKeyedById[factletId]); |
| 75 | 85 | } |
-
|
r169
|
r174
|
|
| 36 | 36 | this.data = data; |
| 37 | 37 | this.fireEvent('dataChange', this.data); |
| | 38 | this.fireEvent('domainObjectChange', this); |
| 38 | 39 | }, |
| 39 | 40 | |
-
|
r173
|
r174
|
|
| 3 | 3 | |
| 4 | 4 | log: function(message) { |
| 5 | | // console.log(message); |
| | 5 | console.log(message); |
| 6 | 6 | }, |
| 7 | 7 | |
-
|
r170
|
r174
|
|
| 12 | 12 | |
| 13 | 13 | <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> |
| 15 | 30 | </head> |
| 16 | 31 | |
| 17 | 32 | <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="« Previous" class="prev" /> |
| 22 | | <input type="button" value="Next »" 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 | | |
| 29 | 33 | <div id="thread-${c.thread.id}" class="thread"> |
| 30 | 34 | |
| 31 | | <h2 id="thread-title">Thread: ${c.thread.title}</h2> |
| | 35 | <h2 id="thread-title">Editing Thread: ${c.thread.title}</h2> |
| 32 | 36 | |
| 33 | 37 | <py:choose> |
| … |
… |
|
| 49 | 53 | </div><!--! /thread --> |
| 50 | 54 | |
| | 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 »" /> |
| | 61 | </form> |
| | 62 | </div> |
| | 63 | |
| 51 | 64 | <div id="factlet-search"> |
| 52 | | <h3>Search for Factlets:</h3> |
| | 65 | <h3>Search for Factlets to Add:</h3> |
| 53 | 66 | <form action="${h.url_for(controller='rest', action='search', register='factlet')}" method="post"> |
| 54 | 67 | <input type="text" id="factlet-search-title" name="title" /> |
| … |
… |
|
| 61 | 74 | </ul> |
| 62 | 75 | </div><!--! /factlet-search --> |
| | 76 | </div><!--! /edit-pane --> |
| | 77 | |
| 63 | 78 | |
| 64 | 79 | </body> |