r111766 MediaWiki - Code Review archive

Repository:	MediaWiki
Revision:	< r111765‎ \| r111766 \| r111767 >
Date:	17:35, 17 February 2012
Author:	jdlrobson
Status:	ok
Tags:
Comment:	jslinted opensearch code
Modified paths:	/trunk/extensions/MobileFrontend/javascripts/beta_opensearch.js (modified) (history) /trunk/extensions/MobileFrontend/javascripts/opensearch.js (modified) (history)

Diff [purge]

Index: trunk/extensions/MobileFrontend/javascripts/opensearch.js
—	—	@@ -1,21 +1,17 @@
2		~~-MobileFrontend.opensearch = function() {~~
	2	+/global document, window, MobileFrontend, navigator, placeholder /
	3	+/jslint sloppy: true, white:true, maxerr: 50, indent: 4, plusplus: true/
	4	+MobileFrontend.opensearch = (function() {
	5	+ var apiUrl = '/api.php', timer = -1, typingDelay = 500,
	6	+ numResults = 5, pixels = 'px',
	7	+ results = document.getElementById( 'results' ),
	8	+ search = document.getElementById( 'search' ),
	9	+ sq = document.getElementById( 'sq' ),
	10	+ sb = document.getElementById( 'searchbox' );
3	11
4		~~- var apiUrl = '/api.php';~~
5		-
6	12	if ( scriptPath ) {
7	13	apiUrl = scriptPath + apiUrl;
8	14	}
9	15
10		~~- var timer = -1;~~
11		~~- var typingDelay = 500;~~
12		~~- var numResults = 5;~~
13		~~- var pixels = 'px';~~
14		-
15		~~- var results = document.getElementById( 'results' );~~
16		~~- var search = document.getElementById( 'search' );~~
17		~~- var sq = document.getElementById( 'sq' );~~
18		~~- var sb = document.getElementById( 'searchbox' );~~
19		-
20	16	function hideResults() {
21	17	var results = document.getElementById( 'results' );
22	18	results.style.display = 'none';
—	—	@@ -24,7 +20,7 @@
25	21	function whichElement( e ) {
26	22	var targ;
27	23	if ( !e ) {
28		~~- var e = window.event;~~
	24	+ e = window.event;
29	25	}
30	26	if ( e.target ) {
31	27	targ = e.target;
—	—	@@ -32,25 +28,24 @@
33	29	targ = e.srcElement;
34	30	}
35	31
36		~~- if ( targ.nodeType == 3 ) {~~
	32	+ if ( targ.nodeType === 3 ) {
37	33	targ = targ.parentNode;
38	34	}
39	35
40	36	e.cancelBubble = true;
41	37	e.stopPropagation();
42	38
43		~~- if ( targ.className == "suggestion-result" \|\|~~
44		~~- targ.className == "search-result-item" \|\|~~
45		~~- targ.className == "suggestions-result" \|\|~~
46		~~- targ.className == "sq-val-update" ) {~~
47		~~- } else {~~
	39	+ if (!( targ.className === "suggestion-result" \|\|
	40	+ targ.className === "search-result-item" \|\|
	41	+ targ.className === "suggestions-result" \|\|
	42	+ targ.className === "sq-val-update" ) ) {
48	43	hideResults();
49	44	}
50	45	}
51	46
52	47	function updateSearchWidth() {
53	48	if ( sq && search && sb ) {
54		~~- var iw = ( document.documentElement.clientWidth ) ? document.documentElement.clientWidth : document.body.clientWidth;~~
	49	+ var iw = document.documentElement.clientWidth \|\| document.body.clientWidth;
55	50	sb.style.width = ( iw - 30 ) + pixels;
56	51	sq.style.width = ( iw - 110 ) + pixels;
57	52	search.style.width = ( iw - 130 ) + pixels;
—	—	@@ -89,10 +84,10 @@
90	85	timer = setTimeout( function () { searchApi( term ); }, typingDelay );
91	86	}
92	87	}, false );
93		~~- }~~
	88	+ };
94	89
95	90	function searchApi( term ) {
96		~~- var xmlHttp;~~
	91	+ var xmlHttp, url;
97	92	if ( window.XMLHttpRequest ) {
98	93	xmlHttp = new XMLHttpRequest();
99	94	} else {
—	—	@@ -100,26 +95,26 @@
101	96	}
102	97	xmlHttp.overrideMimeType( 'text/xml' );
103	98	xmlHttp.onreadystatechange = function() {
104		~~- if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) {~~
	99	+ if ( xmlHttp.readyState === 4 && xmlHttp.status === 200 ) {
105	100	var sections = createObjectArray( xmlHttp.responseXML );
106	101	writeResults( sections );
107	102	}
108		~~- }~~
	103	+ };
109	104	term = encodeURIComponent( term );
110		~~- var url = apiUrl + '?action=opensearch&limit=' + numResults + '&namespace=0&format=xml&search=' + term;~~
	105	+ url = apiUrl + '?action=opensearch&limit=' + numResults + '&namespace=0&format=xml&search=' + term;
111	106	xmlHttp.open( 'GET', url, true );
112	107	xmlHttp.send();
113	108	}
114	109
115	110	function createObjectArray( responseXml ) {
116		~~- var sections = new Array();~~
117		~~- var items = responseXml.getElementsByTagName( 'Item' );~~
	111	+ var sections = [], i, item, section,
	112	+ items = responseXml.getElementsByTagName( 'Item' );
118	113	for ( i = 0; i < items.length; i++ ) {
119		~~- var item = items[i];~~
120		~~- var section = {~~
	114	+ item = items[i];
	115	+ section = {
121	116	label: item.getElementsByTagName( 'Text' )[0].textContent,
122		~~- value: item.getElementsByTagName( 'Url' )[0].textContent,~~
123		~~- }~~
	117	+ value: item.getElementsByTagName( 'Url' )[0].textContent
	118	+ };
124	119	sections.push( section );
125	120	}
126	121	return sections;
—	—	@@ -135,7 +130,9 @@
136	131	}
137	132
138	133	function writeResults( sections ) {
139		~~- var results = document.getElementById( 'results' );~~
	134	+ var results = document.getElementById( 'results' ), suggestions, i,
	135	+ suggestionListener, section, suggestionsResult, link, label;
	136	+
140	137	results.style.display = 'block';
141	138	if ( !sections \|\| sections.length < 1 ) {
142	139	results.innerHTML = "No results";
—	—	@@ -143,21 +140,24 @@
144	141	if( results.firstChild ) {
145	142	results.removeChild( results.firstChild );
146	143	}
147		~~- var suggestions = document.createElement( 'div' );~~
	144	+ suggestions = document.createElement( 'div' );
148	145	suggestions.className = 'suggestions-results';
149	146	results.appendChild( suggestions );
	147	+ suggestionListener = function() {
	148	+ var title = this.parentNode.getAttribute( 'title' );
	149	+ sqValUpdate( title );
	150	+ };
	151	+
150	152	for ( i = 0; i < sections.length; i++ ) {
151		~~- var section = sections[i], suggestionsResult = document.createElement( 'div' ),~~
152		~~- link = document.createElement( 'a' ), label;~~
	153	+ section = sections[i];
	154	+ suggestionsResult = document.createElement( 'div' );
	155	+ link = document.createElement( 'a' );
153	156	suggestionsResult.setAttribute( 'title', section.label );
154	157	suggestionsResult.className = 'suggestions-result';
155	158	label = document.createTextNode( '+' );
156	159	link.appendChild(label);
157	160	link.className = 'sq-val-update';
158		~~- link.addEventListener( 'click', function() {~~
159		~~- var title = this.parentNode.getAttribute( 'title' );~~
160		~~- sqValUpdate( title );~~
161		~~- });~~
	161	+ link.addEventListener( 'click', suggestionListener );
162	162	suggestionsResult.appendChild( link );
163	163
164	164	link = document.createElement( 'a' );
—	—	@@ -194,4 +194,4 @@
195	195	createObjectArray: createObjectArray
196	196	};
197	197
198		~~-}();~~
	198	+}());
Index: trunk/extensions/MobileFrontend/javascripts/beta_opensearch.js
—	—	@@ -1,29 +1,25 @@
2		~~-MobileFrontend.opensearch = function() {~~
	2	+/global document, window, MobileFrontend, navigator, placeholder /
	3	+/jslint sloppy: true, white:true, maxerr: 50, indent: 4, plusplus: true/
	4	+MobileFrontend.opensearch = (function() {
	5	+ var apiUrl = '/api.php', timer = -1, typingDelay = 500,
	6	+ numResults = 15, pixels = 'px', term,
	7	+ results = document.getElementById( 'results' ),
	8	+ search = document.getElementById( 'search' ),
	9	+ sq = document.getElementById( 'sq' ),
	10	+ sb = document.getElementById( 'searchbox' ),
	11	+ logo = document.getElementById( 'logo' ),
	12	+ goButton = document.getElementById( 'goButton' ),
	13	+ content = document.getElementById( 'content' ),
	14	+ footer = document.getElementById( 'footer' ),
	15	+ zeroRatedBanner = document.getElementById( 'zero-rated-banner' ) \|\|
	16	+ document.getElementById( 'zero-rated-banner-red' ),
	17	+ clearSearch = document.getElementById( 'clearsearch' ),
	18	+ focused = false, ol = {};
3	19
4		~~- var apiUrl = '/api.php';~~
5		-
6	20	if ( scriptPath ) {
7	21	apiUrl = scriptPath + apiUrl;
8	22	}
9	23
10		~~- var timer = -1;~~
11		~~- var typingDelay = 500;~~
12		~~- var numResults = 15;~~
13		~~- var pixels = 'px';~~
14		~~- var term;~~
15		-
16		~~- var results = document.getElementById( 'results' );~~
17		~~- var search = document.getElementById( 'search' );~~
18		~~- var sq = document.getElementById( 'sq' );~~
19		~~- var sb = document.getElementById( 'searchbox' );~~
20		~~- var logo = document.getElementById( 'logo' );~~
21		~~- var goButton = document.getElementById( 'goButton' );~~
22		~~- var content = document.getElementById( 'content' );~~
23		~~- var footer = document.getElementById( 'footer' );~~
24		~~- var zeroRatedBanner = document.getElementById( 'zero-rated-banner' ) \|\|~~
25		~~- document.getElementById( 'zero-rated-banner-red' );~~
26		~~- var clearSearch = document.getElementById( 'clearsearch' );~~
27		-
28	24	function hideResults() {
29	25	results.style.display = 'none';
30	26	}
—	—	@@ -41,10 +37,9 @@
42	38
43	39	resetViewPort();
44	40
45		~~- var focused = false;~~
46		~~- var ol = new Object();~~
47	41	search.onfocus = function() {
48		-
	42	+ var pE, pT, pTT, rrd, rrdD,
	43	+ removeResultsEl;
49	44	resetViewPort();
50	45
51	46	if ( zeroRatedBanner ) {
—	—	@@ -67,8 +62,8 @@
68	63	sq.style.top = sb.offsetTop + pixels;
69	64	sq.style.height = sb.offsetHeight + pixels;
70	65	sq.style.width = sb.offsetWidth + pixels;
71		~~- sq.style.left = 0 + pixels;~~
72		~~- sq.style.top = 0 + pixels;~~
	66	+ sq.style.left = 0;
	67	+ sq.style.top = 0;
73	68	sq.style.height = 40 + pixels;
74	69	sq.style.width = document.body.clientWidth + pixels;
75	70	search.style.position = 'absolute';
—	—	@@ -76,7 +71,7 @@
77	72	search.style.height = 34 + pixels;
78	73	search.style.width = ( document.body.clientWidth - 90 ) + pixels;
79	74	search.style.fontSize = 16 + pixels;
80		~~- results.style.left = 0 + pixels;~~
	75	+ results.style.left = 0;
81	76	results.style.top = ( sq.offsetTop + sq.offsetHeight ) + pixels;
82	77	results.style.width = document.body.clientWidth + pixels;
83	78	results.style.minHeight = '100%';
—	—	@@ -84,19 +79,19 @@
85	80	results.style.backgroundColor = '#E6E6E6';
86	81	results.style.paddingTop = 5 + pixels;
87	82	results.style.display = 'block';
88		~~- sb.style.border = 0 + pixels;~~
	83	+ sb.style.border = 0;
89	84	logo.style.visibility = 'hidden';
90	85	goButton.style.visibility = 'hidden';
91	86
92		~~- var pE = document.getElementById( 'placeholder' );~~
	87	+ pE = document.getElementById( 'placeholder' );
93	88	if ( !pE ) {
94	89	pT = document.createElement( 'span' );
95		~~- var pTT = document.createTextNode(placeholder);~~
	90	+ pTT = document.createTextNode(placeholder);
96	91	pT.setAttribute( 'id', 'placeholder' );
97	92	pT.appendChild(pTT);
98	93	sb.insertBefore( pT, sb.firstChild );
99	94	}
100		~~- var pE = document.getElementById( 'placeholder' );~~
	95	+ pE = document.getElementById( 'placeholder' );
101	96	if ( pE ) {
102	97	pE.style.position = 'absolute';
103	98	pE.style.left = ( search.offsetLeft + 5 ) + pixels;
—	—	@@ -107,11 +102,11 @@
108	103	search.style.backgroundColor = 'transparent';
109	104	}
110	105
111		~~- if ( pE && search.value != '' ) {~~
	106	+ if ( pE && search.value !== '' ) {
112	107	pE.style.display = 'none';
113	108	}
114	109
115		~~- var removeResultsEl = document.getElementById( 'remove-results' );~~
	110	+ removeResultsEl = document.getElementById( 'remove-results' );
116	111	if ( !removeResultsEl ) {
117	112	rrd = document.createElement( 'a' );
118	113	rrd.setAttribute( 'href', '#' );
—	—	@@ -126,9 +121,10 @@
127	122	}
128	123	focused = true;
129	124	}
130		~~- }~~
	125	+ };
131	126
132	127	function removeResults() {
	128	+ var removeResultsEl, pE = document.getElementById( 'placeholder' );
133	129	if ( content ) {
134	130	content.style.display = 'block';
135	131	}
—	—	@@ -136,7 +132,6 @@
137	133	footer.style.display = 'block';
138	134	}
139	135
140		~~- var pE = document.getElementById( 'placeholder' );~~
141	136	if ( pE ) {
142	137	pE.style.display = 'none';
143	138	}
—	—	@@ -164,9 +159,9 @@
165	160	}
166	161	if ( sb ) {
167	162	sb.style.border = 'solid #CCC 1px';
168		~~- var removeResults = document.getElementById( 'remove-results' );~~
169		~~- if ( removeResults ) {~~
170		~~- removeResults.style.display = 'none';~~
	163	+ removeResultsEl = document.getElementById( 'remove-results' );
	164	+ if ( removeResultsEl ) {
	165	+ removeResultsEl.style.display = 'none';
171	166	}
172	167	}
173	168	if ( focused ) {
—	—	@@ -181,7 +176,7 @@
182	177	function whichElement( e ) {
183	178	var targ;
184	179	if ( !e ) {
185		~~- var e = window.event;~~
	180	+ e = window.event;
186	181	}
187	182	if ( e.target ) {
188	183	targ = e.target;
—	—	@@ -189,24 +184,24 @@
190	185	targ = e.srcElement;
191	186	}
192	187
193		~~- if ( targ.nodeType == 3 ) {~~
	188	+ if ( targ.nodeType === 3 ) {
194	189	targ = targ.parentNode;
195	190	}
196	191
197	192	e.cancelBubble = true;
198	193	e.stopPropagation();
199		~~- if ( targ.className == "suggestion-result" \|\|~~
200		~~- targ.className == "search-result-item" \|\|~~
201		~~- targ.className == "suggestions-result" \|\|~~
202		~~- targ.className == "sq-val-update" \|\|~~
203		~~- targ.id == 'results' \|\|~~
204		~~- targ.id == 'search' \|\|~~
205		~~- targ.id == 'searchbox' \|\|~~
206		~~- targ.id == 'sq' \|\|~~
207		~~- targ.id == 'placeholder' \|\|~~
208		~~- targ.id == 'clearsearch' \|\|~~
209		~~- targ.tagName == 'BODY' ) {~~
210		~~- if ( targ.id == 'clearsearch' && results ) {~~
	194	+ if ( targ.className === "suggestion-result" \|\|
	195	+ targ.className === "search-result-item" \|\|
	196	+ targ.className === "suggestions-result" \|\|
	197	+ targ.className === "sq-val-update" \|\|
	198	+ targ.id === 'results' \|\|
	199	+ targ.id === 'search' \|\|
	200	+ targ.id === 'searchbox' \|\|
	201	+ targ.id === 'sq' \|\|
	202	+ targ.id === 'placeholder' \|\|
	203	+ targ.id === 'clearsearch' \|\|
	204	+ targ.tagName === 'BODY' ) {
	205	+ if ( targ.id === 'clearsearch' && results ) {
211	206	results.innerHTML = '';
212	207	}
213	208	} else {
—	—	@@ -216,7 +211,7 @@
217	212
218	213	function updateSearchWidth() {
219	214	if ( sq && search && sb ) {
220		~~- var iw = ( document.documentElement.clientWidth ) ? document.documentElement.clientWidth : document.body.clientWidth;~~
	215	+ var iw = document.documentElement.clientWidth \|\| document.body.clientWidth;
221	216	sb.style.width = ( iw - 30 ) + pixels;
222	217	sq.style.width = ( iw - 110 ) + pixels;
223	218	search.style.width = ( iw - 130 ) + pixels;
—	—	@@ -224,7 +219,7 @@
225	220	results.style.width = ( sq.offsetWidth - 2 ) + pixels;
226	221	results.style.left = sq.offsetLeft + pixels;
227	222	results.style.top = ( sq.offsetTop + sq.offsetHeight ) + pixels;
228		~~- if ( results.style.display == 'block' ) {~~
	223	+ if ( results.style.display === 'block' ) {
229	224	focused = false;
230	225	search.blur();
231	226	search.focus();
—	—	@@ -241,7 +236,7 @@
242	237	case -90:
243	238	case 90:
244	239	case 180:
245		~~- setTimeout( "updateSearchWidth()", 300 );~~
	240	+ setTimeout( updateSearchWidth, 300 );
246	241	break;
247	242	}
248	243	}
—	—	@@ -261,10 +256,10 @@
262	257	timer = setTimeout( function () { searchApi( term ); }, typingDelay );
263	258	}
264	259	}, false );
265		~~- }~~
	260	+ };
266	261
267	262	function searchApi( term ) {
268		~~- var xmlHttp;~~
	263	+ var xmlHttp, url;
269	264	if ( window.XMLHttpRequest ) {
270	265	xmlHttp = new XMLHttpRequest();
271	266	} else {
—	—	@@ -272,25 +267,25 @@
273	268	}
274	269	xmlHttp.overrideMimeType( 'text/xml' );
275	270	xmlHttp.onreadystatechange = function() {
276		~~- if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) {~~
	271	+ if ( xmlHttp.readyState === 4 && xmlHttp.status === 200 ) {
277	272	var sections = createObjectArray( xmlHttp.responseXML );
278	273	writeResults( sections );
279	274	}
280		~~- }~~
281		~~- var url = apiUrl + '?action=opensearch&limit=' + numResults + '&namespace=0&format=xml&search=' + term;~~
	275	+ };
	276	+ url = apiUrl + '?action=opensearch&limit=' + numResults + '&namespace=0&format=xml&search=' + term;
282	277	xmlHttp.open( 'GET', url, true );
283	278	xmlHttp.send();
284	279	}
285	280
286	281	function createObjectArray( responseXml ) {
287		~~- var sections = new Array();~~
288		~~- var items = responseXml.getElementsByTagName( 'Item' );~~
	282	+ var sections = [], i, item, section,
	283	+ items = responseXml.getElementsByTagName( 'Item' );
289	284	for ( i = 0; i < items.length; i++ ) {
290		~~- var item = items[i];~~
291		~~- var section = {~~
	285	+ item = items[i];
	286	+ section = {
292	287	label: item.getElementsByTagName( 'Text' )[0].textContent,
293		~~- value: item.getElementsByTagName( 'Url' )[0].textContent,~~
294		~~- }~~
	288	+ value: item.getElementsByTagName( 'Url' )[0].textContent
	289	+ };
295	290	sections.push( section );
296	291	}
297	292	return sections;
—	—	@@ -314,8 +309,10 @@
315	310	}
316	311
317	312	function writeResults( sections ) {
318		~~- var results = document.getElementById( 'results' );~~
319		~~- var term = htmlEntities( document.getElementById( 'search' ).value );~~
	313	+ var results = document.getElementById( 'results' ), suggestions, i,
	314	+ term = htmlEntities( document.getElementById( 'search' ).value ),
	315	+ suggestionListener, section, escapedTerm, suggestionsResult, link, label;
	316	+
320	317	results.style.display = 'block';
321	318	if ( search ) {
322	319	search.focus();
—	—	@@ -326,21 +323,24 @@
327	324	if( results.firstChild ) {
328	325	results.removeChild( results.firstChild );
329	326	}
330		~~- var suggestions = document.createElement( 'div' );~~
	327	+ suggestions = document.createElement( 'div' );
331	328	suggestions.className = 'suggestions-results';
332	329	results.appendChild( suggestions );
	330	+ suggestionListener = function() {
	331	+ var title = this.parentNode.getAttribute( 'title' );
	332	+ sqValUpdate( title );
	333	+ };
	334	+
333	335	for ( i = 0; i < sections.length; i++ ) {
334		~~- var section = sections[i], suggestionsResult = document.createElement( 'div' ),~~
335		~~- link = document.createElement( 'a' ), label;~~
	336	+ section = sections[i];
	337	+ suggestionsResult = document.createElement( 'div' );
	338	+ link = document.createElement( 'a' );
336	339	suggestionsResult.setAttribute( 'title', section.label );
337	340	suggestionsResult.className = 'suggestions-result';
338	341	label = document.createTextNode( '+' );
339	342	link.appendChild(label);
340	343	link.className = 'sq-val-update';
341		~~- link.addEventListener( 'click', function() {~~
342		~~- var title = this.parentNode.getAttribute( 'title' );~~
343		~~- sqValUpdate( title );~~
344		~~- });~~
	344	+ link.addEventListener( 'click', suggestionListener );
345	345	suggestionsResult.appendChild( link );
346	346
347	347	link = document.createElement( 'a' );
—	—	@@ -353,7 +353,7 @@
354	354	suggestions.appendChild( suggestionsResult );
355	355	// TODO: simplify the highlighting code to not use htmlEntities
356	356	// highlight matched term
357		~~- var escapedTerm = escapeJsString( term );~~
	357	+ escapedTerm = escapeJsString( term );
358	358	link.innerHTML = link.innerHTML.replace( new RegExp( '(' + escapedTerm + ')' , 'ig'),
359	359	'<strong>$1</strong>' );
360	360	}
—	—	@@ -384,4 +384,4 @@
385	385	removeResults: removeResults
386	386	};
387	387
388		~~-}();~~
	388	+}());
\ No newline at end of file

Status & tagging log

17:51, 17 February 2012 Preilly (talk | contribs) changed the status of r111766 [removed: new added: ok]