Navigation

← Previous Changeset
Next Changeset →

Changeset 181

Timestamp:

08/21/08 21:25:41 (3 months ago)

Author:

rgrp

Message:

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

Files:

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

Legend:

: Unmodified
: Added
: Removed
: Modified
: Copied
: Moved

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

r171	r181
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.current~~List~~.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	});

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

r173	r181
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

trunk/microfacts/public/behaviour/load.js

r179	r181
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	});

trunk/microfacts/public/test/index.html

r179	r181
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">

trunk/microfacts/public/test/spec/threadfactletscontroller_spec.js

r173	r181
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.generateFactlet~~Element~~(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	});