LAZR Javascript Library

Merge lp:~barry/lazr-js/482298-picker-batching into lp:lazr-js

  1. 482298-picker-batching
  2. Merge into toolchain
Proposed by Barry Warsaw
Status: Merged
Approved by: Barry Warsaw
Approved revision: not available
Merged at revision: not available
Proposed branch: lp:~barry/lazr-js/482298-picker-batching
Merge into: lp:lazr-js
Diff against target: 325 lines (+138/-51)
3 files modified
examples/picker/index.html (+40/-29)
src-js/lazrjs/picker/picker.js (+62/-22)
src-js/lazrjs/picker/tests/picker.js (+36/-0)
To merge this branch: bzr merge lp:~barry/lazr-js/482298-picker-batching
Reviewer Review Type Date Requested Status
Brad Crittenden (community) code Approve
Māris Fogels code Pending
Review via email: mp+15176@code.launchpad.net
To post a comment you must log in.
Revision history for this message
Barry Warsaw (barry) wrote :

Implement a simplified batching API for the Picker. The common case is where the page headings are numbers starting from 1, with values starting from 0. So unless you need to do something fancy, you can just tell the picker how many batches there are and it will do the rest.

Revision history for this message
Barry Warsaw (barry) wrote :

Um, something's wacky with the diff. If you branch the code, you won't see those conflict markers.

lp:~barry/lazr-js/482298-picker-batching updated
149. By Barry Warsaw

Merge trunk

Revision history for this message
Barry Warsaw (barry) wrote :

> Um, something's wacky with the diff. If you branch the code, you won't see
> those conflict markers.

nm. conflict resolved

Revision history for this message
Brad Crittenden (bac) :
review: Approve (code)

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== modified file 'examples/picker/index.html'
--- examples/picker/index.html 2009-11-19 17:27:44 +0000
+++ examples/picker/index.html 2009-11-24 00:13:10 +0000
@@ -112,27 +112,36 @@
112 spin_interval = 2000;112 spin_interval = 2000;
113 }113 }
114 Y.later(spin_interval, null, function () {114 Y.later(spin_interval, null, function () {
115 var results = search_items(115 var results = search_items(e.details[Y.Picker.SEARCH_STRING]);
116 e.details[Y.Picker.SEARCH_STRING]);
117 var selected_batch = e.details[Y.Picker.SELECTED_BATCH_VALUE];116 var selected_batch = e.details[Y.Picker.SELECTED_BATCH_VALUE];
117 var simple_batching = Y.get('#page-label-1').get('checked');
118118
119 // Update the batches only if it's a new search.119 if (simple_batching) {
120 if (selected_batch === undefined) {120 if (selected_batch === undefined) {
121 var batches = [];121 // This is a new search, so select the first batch.
122 // Set up the picker batches if there is more than one122 selected_batch = 0;
123 // results batch.123 }
124 if (results.length > 1) {124 picker.set('batch_count', results.length);
125 Y.Array.each(results, function (batch, i) {125 picker.set('results', results[selected_batch]);
126 batches.push({126 }
127 name: i+1,127 else {
128 value: i,128 if (selected_batch === undefined) {
129 // This is a new search, so select the first batch.
130 // Set up the picker batches if there is more than one
131 // results batch.
132 var batches = [];
133 if (results.length > 1) {
134 Y.Array.each(results, function (batch, i) {
135 // Stupid batch page labels.
136 var label = String.fromCharCode(65 + i);
137 batches.push({ value: i, name: label });
129 });138 });
130 });139 }
140 picker.set('batches', batches);
141 selected_batch = 0;
131 }142 }
132 picker.set('batches', batches);143 picker.set('results', results[selected_batch]);
133 selected_batch = 0;
134 }144 }
135 picker.set('results', results[selected_batch]);
136 });145 });
137 });146 });
138147
@@ -227,6 +236,13 @@
227 <input type="text" id="batch-size" value="3" />236 <input type="text" id="batch-size" value="3" />
228 </div>237 </div>
229 <div>238 <div>
239 <b>Page labels:</b><br />
240 <input type="radio" name="page-labels" id="page-label-1"
241 value="numbers" checked="yes">Numbers<br />
242 <input type="radio" name="page-labels" id="page-label-2"
243 value="letters">Letters
244 </div>
245 <div>
230 <button id="show-widget" disabled="true">Show widget</button>246 <button id="show-widget" disabled="true">Show widget</button>
231 </div>247 </div>
232 </div>248 </div>
@@ -356,24 +372,19 @@
356 picker.after('search', function(e) {372 picker.after('search', function(e) {
357 var search_text = e.details[Y.Picker.SEARCH_STRING];373 var search_text = e.details[Y.Picker.SEARCH_STRING];
358 var selected_batch = e.details[Y.Picker.SELECTED_BATCH_VALUE];374 var selected_batch = e.details[Y.Picker.SELECTED_BATCH_VALUE];
375 var result_batches = my_perform_search(search_text);
359376
360 // On a new search, there will be no selected batch. Update the
361 // batches so that the Picker can page through them.
362 if (selected_batch === undefined) {377 if (selected_batch === undefined) {
378 // On a new search, there will be no selected batch. Update the
379 // batches so that the Picker can page through them.
363 var batches = [];380 var batches = [];
364 result_batches = my_perform_search(search_text);
365 // Iterate over all the results, extending the Picker batches
366 // array, so that there is one item per results batch. The
367 // Picker batch items must have a 'name' and a 'value'.
368 Y.Array.each(result_batches, function(batch, i) {381 Y.Array.each(result_batches, function(batch, i) {
369 batches.push({382 var roman = roman_numeral(i + 1);
370 name: i + 1,383 batches.push({ value: i, name: roman });
371 value: i,
372 });
373 });384 });
374 // If there was only one batch of results, then the Picker385 // If there was only one batch of results, then `batches` will
375 // batches will be of length zero, and the picker will know to386 // be of length zero, and the picker will know to not display
376 // not display the page arrows.387 // the page arrows.
377 picker.set('batches', batches);388 picker.set('batches', batches);
378 selected_batch = 0;389 selected_batch = 0;
379 }390 }
380391
=== modified file 'src-js/lazrjs/picker/picker.js'
--- src-js/lazrjs/picker/picker.js 2009-11-18 21:34:09 +0000
+++ src-js/lazrjs/picker/picker.js 2009-11-24 00:13:10 +0000
@@ -50,6 +50,7 @@
50 ERROR = 'error',50 ERROR = 'error',
51 RESULTS = 'results',51 RESULTS = 'results',
52 BATCHES = 'batches',52 BATCHES = 'batches',
53 BATCH_COUNT = 'batch_count',
53 SEARCH_SLOT = 'search_slot',54 SEARCH_SLOT = 'search_slot',
54 FOOTER_SLOT = 'footer_slot',55 FOOTER_SLOT = 'footer_slot',
55 SELECTED_BATCH = 'selected_batch',56 SELECTED_BATCH = 'selected_batch',
@@ -217,19 +218,46 @@
217 },218 },
218219
219 /**220 /**
221 * Return the batch page information.
222 *
223 * @method _getBatches
224 * @protected
225 */
226 _getBatches: function() {
227 var batches = this.get(BATCHES);
228
229 if (batches === null) {
230 var batch_count = this.get(BATCH_COUNT);
231 if (batch_count === null) {
232 batches = [];
233 }
234 else {
235 batches = [];
236 // Only create batch pages when there's more than one.
237 if (batch_count > 1) {
238 for (var i = 0; i < batch_count; i++) {
239 batches.push({ value: i, name: i + 1 });
240 }
241 }
242 }
243 }
244 return batches;
245 },
246
247 /**
220 * Update the batches container in the UI.248 * Update the batches container in the UI.
221 *249 *
222 * @method _syncBatchesUI250 * @method _syncBatchesUI
223 * @protected251 * @protected
224 */252 */
225 _syncBatchesUI: function() {253 _syncBatchesUI: function() {
226 var options = this.get(BATCHES);254 var batches = this._getBatches();
227255
228 // Clear previous batches.256 // Clear previous batches.
229 Y.Event.purgeElement(this._batches_box, true);257 Y.Event.purgeElement(this._batches_box, true);
230 this._batches_box.set('innerHTML', '');258 this._batches_box.set('innerHTML', '');
231259
232 if (options.length === 0) {260 if (batches.length === 0) {
233 this._prev_button = null;261 this._prev_button = null;
234 this._next_button = null;262 this._next_button = null;
235 return;263 return;
@@ -243,11 +271,11 @@
243 this.set(SELECTED_BATCH, selected);271 this.set(SELECTED_BATCH, selected);
244 this.fire(272 this.fire(
245 SEARCH, this.get(CURRENT_SEARCH_STRING),273 SEARCH, this.get(CURRENT_SEARCH_STRING),
246 options[selected].value);274 batches[selected].value);
247 }, this);275 }, this);
248 this._batches_box.appendChild(this._prev_button);276 this._batches_box.appendChild(this._prev_button);
249277
250 Y.Array.each(options, function(data, i) {278 Y.Array.each(batches, function(data, i) {
251 var batch_item = Y.Node.create('<span></span>');279 var batch_item = Y.Node.create('<span></span>');
252 batch_item.appendChild(280 batch_item.appendChild(
253 document.createTextNode(data.name));281 document.createTextNode(data.name));
@@ -267,7 +295,7 @@
267 this.set(SELECTED_BATCH, selected);295 this.set(SELECTED_BATCH, selected);
268 this.fire(296 this.fire(
269 SEARCH, this.get(CURRENT_SEARCH_STRING),297 SEARCH, this.get(CURRENT_SEARCH_STRING),
270 this.get(BATCHES)[selected].value);298 batches[selected].value);
271 }, this);299 }, this);
272 },300 },
273301
@@ -279,7 +307,6 @@
279 */307 */
280 _syncSelectedBatchUI: function() {308 _syncSelectedBatchUI: function() {
281 var idx = this.get(SELECTED_BATCH);309 var idx = this.get(SELECTED_BATCH);
282
283 var items = this._batches_box.queryAll('span');310 var items = this._batches_box.queryAll('span');
284 if (items.size()) {311 if (items.size()) {
285 this._prev_button.set('disabled', idx === 0);312 this._prev_button.set('disabled', idx === 0);
@@ -501,19 +528,15 @@
501 this._syncFooterSlotUI();528 this._syncFooterSlotUI();
502 }, this);529 }, this);
503530
504 // Update the batch list whenever the "batches" property531 // Update the batch list whenever the "batches" or "results" property
505 // is changed, and reset the selected one to the first one.532 // is changed.
506 this.after('batchesChange', function (e) {533 var doBatchesChange = function (e) {
507 this._syncBatchesUI();534 this._syncBatchesUI();
508 if (this.get(SELECTED_BATCH) === 0){535 this._syncSelectedBatchUI();
509 // If the attribute is already set to the same value,536 };
510 // the 'after' events won't be triggered, so we have537
511 // to trigger it manually.538 this.after('batchesChange', doBatchesChange, this);
512 this._syncSelectedBatchUI();539 this.after('resultsChange', doBatchesChange, this);
513 } else {
514 this.set(SELECTED_BATCH, 0);
515 }
516 }, this);
517540
518 // Keep the UI in sync with the currently selected batch.541 // Keep the UI in sync with the currently selected batch.
519 this.after('selected_batchChange', function (e) {542 this.after('selected_batchChange', function (e) {
@@ -561,7 +584,8 @@
561 this.set(CURRENT_SEARCH_STRING, '');584 this.set(CURRENT_SEARCH_STRING, '');
562 this.set(ERROR, '');585 this.set(ERROR, '');
563 this.set(RESULTS, [{}]);586 this.set(RESULTS, [{}]);
564 this.set(BATCHES, []);587 this.set(BATCHES, null);
588 this.set(BATCH_COUNT, null);
565 this._search_input.set('value', '');589 this._search_input.set('value', '');
566 this._results_box.set('innerHTML', '');590 this._results_box.set('innerHTML', '');
567 },591 },
@@ -702,7 +726,7 @@
702726
703 /**727 /**
704 * An extra CSS class to be added to the picker_activator, generally used728 * An extra CSS class to be added to the picker_activator, generally used
705 * to distinguish regular links from js-triggering ones. 729 * to distinguish regular links from js-triggering ones.
706 *730 *
707 * @attribute picker_activator_css_class731 * @attribute picker_activator_css_class
708 * @type String732 * @type String
@@ -773,7 +797,22 @@
773 * @attribute batches797 * @attribute batches
774 * @type Array798 * @type Array
775 */799 */
776 batches: {value: []},800 batches: {value: null},
801
802 /**
803 * For simplified batch creation, you can set this to the number of
804 * batches in the search results. In this case, the batch labels
805 * and values are automatically calculated. The batch name (used as the
806 * batch label) will be the batch number starting from 1. The batch value
807 * (used as additional details to the SEARCH event) will be the batch
808 * number, starting from zero.
809 *
810 * If 'batches' is set (see above), batch_count is ignored.
811 *
812 * @attribute batch_count
813 * @type Integer
814 */
815 batch_count: {value: null},
777816
778 /**817 /**
779 * Batch currently selected.818 * Batch currently selected.
@@ -787,9 +826,10 @@
787 return value || 0;826 return value || 0;
788 },827 },
789 validator: function (value) {828 validator: function (value) {
829 var batches = this._getBatches();
790 return Y.Lang.isNumber(value) &&830 return Y.Lang.isNumber(value) &&
791 value >= 0 &&831 value >= 0 &&
792 value < this.get(BATCHES).length;832 value < batches.length;
793 }},833 }},
794834
795 /**835 /**
796836
=== modified file 'src-js/lazrjs/picker/tests/picker.js'
--- src-js/lazrjs/picker/tests/picker.js 2009-11-13 20:50:08 +0000
+++ src-js/lazrjs/picker/tests/picker.js 2009-11-24 00:13:10 +0000
@@ -532,6 +532,42 @@
532 "There should be a next button.");532 "There should be a next button.");
533 },533 },
534534
535 test_simplified_batching_interface: function () {
536 this.picker.render();
537 this.picker.set('batch_count', 4);
538 this.picker.set('results', [
539 { value: 'aardvark', title: 'Aardvarks' },
540 { value: 'bats', title: 'Bats' },
541 { value: 'cats', title: 'Cats' },
542 { value: 'dogs', title: 'Dogs' },
543 { value: 'emus', title: 'Emus' },
544 { value: 'frogs', title: 'Frogs' },
545 { value: 'gerbils', title: 'Gerbils' }
546 ]);
547 var bb = this.picker.get('boundingBox');
548 Assert.isNotNull(
549 bb.query('.yui-picker-batches span'),
550 "Container for batches not found.");
551 var batches = bb.queryAll('.yui-picker-batches span');
552 Assert.isNotNull(batches, "Batches not found");
553 Assert.areEqual(4, batches.size());
554 ArrayAssert.itemsAreEqual(
555 ['1', '2', '3', '4'],
556 batches.get('text'),
557 "Batches don't contain batch names.");
558 ArrayAssert.itemsAreEqual(
559 [true, false, false, false],
560 batches.hasClass('yui-picker-selected-batch'),
561 "Selected batches missing CSS class.");
562
563 Assert.isNotNull(
564 bb.query('.yui-picker-batches .lazr-prev'),
565 "There should be a previous button.");
566 Assert.isNotNull(
567 bb.query('.yui-picker-batches .lazr-next'),
568 "There should be a next button.");
569 },
570
535 test_clicking_a_batch_item_fires_search_event: function () {571 test_clicking_a_batch_item_fires_search_event: function () {
536 this.picker.set('current_search_string', 'search');572 this.picker.set('current_search_string', 'search');
537 this.picker.set('batches', [573 this.picker.set('batches', [

Subscribers

People subscribed via source and target branches