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:
-
Legend:
- Unmodified
- Added
- Removed
-
|
r161
|
r171
|
|
| 7 | 7 | this.searchResults = $$('.factlet-search-results')[0]; |
| 8 | 8 | // list of factlet ids currently being shown |
| 9 | | this.currentList = []; |
| | 9 | this.currentFactletIds = []; |
| | 10 | this.currentFactlets = new Hash({}); |
| 10 | 11 | }, |
| 11 | 12 | |
| … |
… |
|
| 19 | 20 | onDataChange: function (data) { |
| 20 | 21 | // TODO: check this is factlet data and relevant to us .... |
| 21 | | if (this.currentList.contains(data.id)) { |
| | 22 | if (this.currentFactletIds.contains(data.id)) { |
| 22 | 23 | this.createSearchResultLi(data); |
| 23 | 24 | } |
| … |
… |
|
| 28 | 29 | var html = ''; |
| 29 | 30 | html += factletData.title; |
| 30 | | html += ' — <a class="factlet-append" href="#TODO-appendFactletAction">« add</a>'; |
| | 31 | html += ' — <a class="factlet-append" href="#TODO-appendFactletAction">« append</a>'; |
| 31 | 32 | newLi.innerHTML = html; |
| 32 | 33 | this.searchResults.appendChild(newLi); |
| … |
… |
|
| 36 | 37 | console.log('FactletSearchController: updateSearchResults'); |
| 37 | 38 | console.log(data); |
| 38 | | this.currentList = data; |
| | 39 | this.currentFactletIds = data; |
| | 40 | this.currentFactlets.empty(); |
| 39 | 41 | // empty current list of results |
| 40 | 42 | // assume only one for present |
| 41 | 43 | this.searchResults.innerHTML = ''; |
| 42 | 44 | // data will be list of factlet ids |
| 43 | | data.each(function(factletId) { |
| | 45 | this.currentFactletIds.each(function(factletId) { |
| 44 | 46 | var factlet = DomainObject.Resource('Factlet', factletId); |
| | 47 | this.currentFactlets[factletId] = factlet; |
| 45 | 48 | // if object is already |
| 46 | 49 | if (factlet.data) { |
| … |
… |
|
| 55 | 58 | controls: { |
| 56 | 59 | '#factlet-search-submit click': function (e) { |
| | 60 | console.log('Factlet Search Button clicked.'); |
| 57 | 61 | var evt = new Event(e); |
| 58 | 62 | evt.stop(); |
| 59 | | console.log('Factlet Search Button clicked.'); |
| 60 | 63 | var requestOptions = { |
| 61 | 64 | onSuccess: this.updateSearchResults.bind(this) |
| … |
… |
|
| 66 | 69 | var query = { "q": data }; |
| 67 | 70 | request.post(url, encodeURIComponent(JSON.encode(query))); |
| | 71 | }, |
| | 72 | '.factlet-append click': function(e) { |
| | 73 | var evt = new Event(e); |
| | 74 | evt.stop(); |
| | 75 | var elemId = evt.target.parentNode.id; |
| | 76 | var factletId = elemId.split('-').getLast().toInt(); |
| | 77 | this.fireEvent('factletAppend', this.currentFactlets[factletId]); |
| 68 | 78 | } |
| | 79 | |
| 69 | 80 | } |
| 70 | 81 | }); |
-
|
r163
|
r171
|
|
| 2 | 2 | Extends: Controller, |
| 3 | 3 | |
| 4 | | // factletSummaryTemplate = [ |
| 5 | | //'<div id="factlet-<%= c.id %>" class="factlet">', |
| 6 | | //' <%= this.partial({url: baseurl+'/title.ejs'}) %>', |
| 7 | | //'</div>', |
| 8 | | // ].join('\n'); |
| | 4 | factletSummaryTemplate: [ |
| | 5 | '<div id="factlet-<%= c.id %>" class="factlet">', |
| | 6 | '<h3 class="factlet-title"><%= c.title %></h3>', |
| | 7 | '</div>' |
| | 8 | ].join('\n'), |
| 9 | 9 | |
| 10 | 10 | initialize: function (element) { |
| 11 | 11 | this.parent.apply(this, arguments); |
| 12 | | // this.model = DomainObject.Resource('Factlet', this.id()); |
| 13 | | // this.views.push(new FillView()); |
| 14 | | // this.views.push(new PageTitleView('Factlets')); |
| 15 | | // this.addDefaultListeners(); |
| 16 | 12 | this.factlets = []; |
| 17 | 13 | this.selectedFactletId = null; |
| 18 | 14 | }, |
| 19 | 15 | |
| 20 | | // Name is relative to app/views directory, without an .ejs extension. |
| 21 | | renderView: function (name, data) { |
| 22 | | // return new EJS({url: '/app/views/'+name+'.ejs'}).render({'c': data}); |
| 23 | | }, |
| 24 | | |
| 25 | | generateFactletElement: function (factlet) { |
| 26 | | // var html = this.renderView('factlet/summary', factlet.data); |
| 27 | | html = null; |
| | 16 | generateFactletHtml: function (factletData) { |
| | 17 | var template = new EJS({text: this.factletSummaryTemplate}); |
| | 18 | console.log(factletData); |
| | 19 | var html = template.render({'c': factletData}); |
| 28 | 20 | return html; |
| 29 | 21 | }, |
| … |
… |
|
| 41 | 33 | }, |
| 42 | 34 | |
| 43 | | onThreadStart: function () { |
| | 35 | onThreadStart: function (thread, threadFactlets) { |
| 44 | 36 | console.log("ThreadFactletsController saw threadStart event"); |
| 45 | | this.thread = arguments[0]; |
| 46 | | this.factlets = arguments[1]; |
| 47 | | this.factletsKeyedById = new Hash({}); |
| 48 | | this.factletDivsKeyedById = new Hash({}); |
| 49 | | this.factlets.each(function(fct) { |
| 50 | | this.factletsKeyedById[fct.id] = fct; |
| 51 | | // now associate each factlet with its element |
| 52 | | var divId = 'factlet-' + fct.id; |
| 53 | | var fctdiv = $(divId); |
| 54 | | this.factletDivsKeyedById[fct.id] = fctdiv; |
| 55 | | }, this); |
| | 37 | // no specific initializing here so just do update |
| | 38 | this.onThreadUpdate(thread, threadFactlets); |
| 56 | 39 | console.log('ThreadFactletsController: end'); |
| 57 | 40 | }, |
| 58 | 41 | |
| 59 | | onRemoveSelectedFactlet: function() { |
| 60 | | this.thread.factlets.erase(this.selectedFactletId); |
| 61 | | this.thread.save(); |
| | 42 | onThreadUpdate: function(thread, threadFactlets) { |
| | 43 | console.log(arguments); |
| | 44 | this.thread = thread; |
| | 45 | this.factlets = threadFactlets; |
| | 46 | this.factletsKeyedById = new Hash({}); |
| | 47 | this.factletDivsKeyedById = new Hash({}); |
| | 48 | this.element.innerHTML = ''; |
| | 49 | this.factlets.each(function(fct) { |
| | 50 | this.factletsKeyedById[fct.id] = fct; |
| | 51 | // Create ourselves so work on update too |
| | 52 | var dummy = document.createElement('div'); |
| | 53 | console.log(fct.data); |
| | 54 | fctdivHTML = this.generateFactletHtml(fct.data); |
| | 55 | dummy.innerHTML = fctdivHTML; |
| | 56 | var fctdiv = dummy.childNodes[0]; |
| | 57 | this.element.appendChild(fctdiv); |
| | 58 | // now associate each factlet with its element |
| | 59 | // var divId = 'factlet-' + fct.id; |
| | 60 | // var fctdiv = $(divId); |
| | 61 | this.factletDivsKeyedById[fct.id] = fctdiv; |
| | 62 | }, this); |
| 62 | 63 | }, |
| 63 | 64 | |
-
|
r169
|
r171
|
|
| 197 | 197 | type: "js", |
| 198 | 198 | path: "app/microfacts.js?" + Math.random(), |
| 199 | | requires: ['domainobject', 'view', 'controller', 'microfactscontroller', 'factletcontroller', 'threadfactletscontroller', 'mapview', 'timelineview', 'geochronopagecontroller'], |
| | 199 | requires: ['domainobject', 'view', 'controller', 'microfactscontroller', 'factletcontroller', 'threadfactletscontroller', 'mapview', 'timelineview', 'geochronopagecontroller', 'threadpagecontroller'], |
| 200 | 200 | varName: "Microfacts" |
| 201 | 201 | }); |
-
|
r169
|
r171
|
|
| 53 | 53 | <script type="text/javascript" src="spec/model_spec.js?123"></script> |
| 54 | 54 | <script type="text/javascript" src="spec/controller_spec.js?123"></script> |
| | 55 | |
| | 56 | <!-- views --> |
| 55 | 57 | <script type="text/javascript" src="spec/view_spec.js?123"></script> |
| | 58 | <script type="text/javascript" src="spec/threadfactletscontroller_spec.js?123"></script> |
| | 59 | <script type="text/javascript" src="spec/factletsearch_controller_spec.js?123"></script> |
| | 60 | |
| 56 | 61 | <script type="text/javascript" src="spec/mapview_spec.js?123"></script> |
| 57 | 62 | <script type="text/javascript" src="spec/timelineview_spec.js?123"></script> |
| | 63 | |
| | 64 | <!-- (page) controllers --> |
| 58 | 65 | <script type="text/javascript" src="spec/geochronopage_controller_spec.js?123"></script> |
| 59 | | <!-- |
| 60 | | <script type="text/javascript" src="spec/threadfactletscontroller_spec.js?123"></script> |
| 61 | | --> |
| 62 | 66 | |
| 63 | 67 | <!-- |
| … |
… |
|
| 101 | 105 | </div> |
| 102 | 106 | </div> |
| | 107 | |
| | 108 | <div id="factlet-search"> |
| | 109 | <ul class="factlet-search-results"></ul> |
| | 110 | </div> |
| 103 | 111 | |
| 104 | 112 | <script type="text/javascript" charset="utf-8"> |
-
|
r163
|
r171
|
|
| 1 | | var thread = { |
| | 1 | var threadData = { |
| 2 | 2 | 'id' : 2, |
| 3 | 3 | 'title': 'Blah', |
| … |
… |
|
| 5 | 5 | }; |
| 6 | 6 | |
| | 7 | var thread = { |
| | 8 | 'id': threadData['id'], |
| | 9 | 'data': threadData |
| | 10 | }; |
| | 11 | |
| 7 | 12 | var threadFactlets = [ |
| 8 | | { |
| | 13 | { |
| 9 | 14 | 'id': 101, |
| 10 | | 'title': 'My Factlet', |
| 11 | | 'location' : { |
| 12 | | "type": "Point", |
| 13 | | "coordinates": [51.50842, -0.12553] |
| | 15 | 'data': { |
| | 16 | 'id': 101, |
| | 17 | 'title': 'My Factlet', |
| | 18 | 'location' : { |
| | 19 | "type": "Point", |
| | 20 | "coordinates": [51.50842, -0.12553] |
| | 21 | } |
| 14 | 22 | } |
| 15 | 23 | }, |
| 16 | | { |
| | 24 | { |
| 17 | 25 | 'id': 102, |
| 18 | | 'title': 'Your Factlet', |
| 19 | | 'location' : { |
| 20 | | "type": "Point", |
| 21 | | "coordinates": [0, 0] |
| | 26 | 'data': { |
| | 27 | 'id': 102, |
| | 28 | 'title': 'Your Factlet', |
| | 29 | 'location' : { |
| | 30 | "type": "Point", |
| | 31 | "coordinates": [0, 0] |
| | 32 | } |
| 22 | 33 | } |
| 23 | 34 | } |
| 24 | 35 | ]; |
| | 36 | |
| 25 | 37 | |
| 26 | 38 | describe('ThreadFactletsController', { |
| … |
… |
|
| 51 | 63 | }, |
| 52 | 64 | |
| 53 | | 'should manage generateFactletElement': function() { |
| 54 | | var html = ctrl.generateFactletElement(threadFactlets[0]); |
| 55 | | console.log(html); |
| | 65 | 'test generateFactletHtml': function() { |
| | 66 | var html = ctrl.generateFactletHtml(threadFactlets[0]); |
| | 67 | expect(html.substring(0, 21)).should_be('<div id="factlet-101"'); |
| 56 | 68 | } |
| 57 | 69 | |
| 58 | | |
| 59 | 70 | }); |