Merge lp:~salgado/lazr-js/picker-refactoring2 into lp:lazr-js

[Guilherme Salgado]

[Guilherme Salgado (salgado)]

Add a new config variable to the picker to specify the DOM element to which picker.show() should be hooked up.

That way callsites don't need to do it themselves.

[lp:~salgado/lazr-js/picker-refactoring2]

134. By Guilherme Salgado on 2009-11-12

merge from trunk

Unmerged revisions

=== modified file 'examples/picker/index.html'
--- examples/picker/index.html	2009-10-22 20:22:12 +0000
+++ examples/picker/index.html	2009-11-12 20:44:11 +0000
@@ -65,6 +65,8 @@
 
 
         var picker = new Y.Picker({
+            picker_activator: '#show-widget',
+            clear_on_cancel: true,
             align: {
                 points: [Y.WidgetPositionExt.CC, Y.WidgetPositionExt.CC]
             },
@@ -129,9 +131,6 @@
             });
         });
 
-        Y.on('click', function () {
-            picker.show();
-        }, '#show-widget');
         Y.on('change', function () {
             picker.set(
                 'min_search_chars',

=== modified file 'src-js/lazrjs/picker/picker.js'
--- src-js/lazrjs/picker/picker.js	2009-10-22 19:27:45 +0000
+++ src-js/lazrjs/picker/picker.js	2009-11-12 20:44:11 +0000
@@ -166,6 +166,20 @@
          * @preventable _defaultSave
          */
         this.publish(SAVE, { defaultFn: this._defaultSave } );
+
+        // Subscribe to the cancel event so that we can clear the widget when
+        // requested.
+        this.subscribe('cancel', this._defaultCancel);
+
+        if ( this.get('picker_activator') ) {
+            var element = Y.one(this.get('picker_activator'));
+            element.on('click', function(e) {
+                e.halt();
+                this.show();
+            }, this);
+            element.addClass(this.get('picker_activator_css_class'));
+        }
+
     },
 
     /**
@@ -499,7 +513,7 @@
         // is changed, and reset the selected one to the first one.
         this.after('batchesChange', function (e) {
             this._syncBatchesUI();
-            if (this.get(SELECTED_BATCH) == 0){
+            if (this.get(SELECTED_BATCH) === 0){
                 // If the attribute is already set to the same value,
                 // the 'after' events won't be triggered, so we have
                 // to trigger it manually.
@@ -550,6 +564,21 @@
         this._search_input.focus();
     },
 
+    /*
+     * Clear all elements of the picker, resetting it to its original state.
+     *
+     * @method _clear
+     * @param e {Object} The event object.
+     * @protected
+     */
+    _clear: function() {
+        this._search_input.set('value', '');
+        this.set('error', '');
+        this.set('results', [{}]);
+        this._results_box.set('innerHTML', '');
+        this.set('batches', []);
+    },
+
     /**
      * Handle clicks on the 'Search' button or entering the enter key in the
      * search field.  This fires the search event.
@@ -585,8 +614,25 @@
     },
 
     /**
-     * By default, the save event simply hides the widget. The search entered
-     * by the user is passed in the first details attribute of the event.
+     * By default, the cancel event just hides the widget, but you can
+     * have it also cleared by setting clear_on_cancel to 'true'.
+     *
+     * @method _defaultCancel
+     * @param e {Event.Facade} An Event Facade object.
+     * @protected
+     */
+    _defaultCancel : function(e) {
+        Picker.superclass._defaultCancel.apply(this, arguments);
+        if ( this.get('clear_on_cancel') ) {
+            this._clear();
+        }
+    },
+
+    /**
+     * By default, the save event clears and hides the widget, but you can
+     * have it not cleared by setting clear_on_save to 'false'. The search
+     * entered by the user is passed in the first details attribute of the
+     * event.
      *
      * @method _defaultSave
      * @param e {Event.Facade} An Event Facade object.
@@ -594,6 +640,9 @@
      */
     _defaultSave : function(e) {
         this.hide();
+        if ( this.get('clear_on_save') ) {
+            this._clear();
+        }
     },
 
     /**
@@ -637,6 +686,42 @@
 
 Picker.ATTRS = {
     /**
+     * Whether or not the search box and result list should be cleared when
+     * the save event is fired.
+     *
+     * @attribute clear_on_save
+     * @type Boolean
+     */
+    clear_on_save: { value: true },
+
+    /**
+     * Whether or not the search box and result list should be cleared when
+     * the cancel event is fired.
+     *
+     * @attribute clear_on_cancel
+     * @type Boolean
+     */
+    clear_on_cancel: { value: false },
+
+    /**
+     * A CSS selector for the DOM element that will activate (show) the picker
+     * once clicked.
+     *
+     * @attribute picker_activator
+     * @type String
+     */
+    picker_activator: { value: null },
+
+    /**
+     * An extra CSS class to be added to the picker_activator, generally used
+     * to distinguish regular links from js-triggering ones. 
+     *
+     * @attribute picker_activator_css_class
+     * @type String
+     */
+    picker_activator_css_class: { value: 'js-action' },
+
+    /**
      * Minimum number of characters that need to be entered in the search
      * string input before a search event will be fired. The search string
      * will be trimmed before testing the length.

=== modified file 'src-js/lazrjs/picker/tests/picker.js'
--- src-js/lazrjs/picker/tests/picker.js	2009-10-21 21:43:07 +0000
+++ src-js/lazrjs/picker/tests/picker.js	2009-11-12 20:44:11 +0000
@@ -206,7 +206,7 @@
             [false, true, false, true], results.hasClass(Y.lazr.ui.CSS_ODD));
     },
 
-    test_clicking_search_button_fires_save_event: function () {
+    test_clicking_search_button_fires_search_event: function () {
         this.picker.render();
 
         var bb = this.picker.get('boundingBox');
@@ -379,6 +379,14 @@
             }, 3000);
     },
 
+    test_cancel_event_hides_widget: function () {
+        this.picker.render();
+
+        this.picker.fire('cancel', 'bogus');
+        Assert.isFalse(
+            this.picker.get('visible'), "The widget should be hidden.");
+    },
+
     test_save_event_hides_widget: function () {
         this.picker.render();
 
@@ -387,6 +395,48 @@
             this.picker.get('visible'), "The widget should be hidden.");
     },
 
+    test_save_event_clears_widget_by_default: function () {
+        this.picker.render();
+
+        this.picker._search_input.set('value', 'foo');
+        this.picker.fire('save', 'bogus');
+        Assert.areEqual(
+            '', this.picker._search_input.get('value'),
+            "The widget hasn't been cleared");
+    },
+
+    test_save_does_not_clear_widget_when_clear_on_save_is_false: function () {
+        picker = new Y.Picker({clear_on_save: false});
+        picker.render();
+
+        picker._search_input.set('value', 'foo');
+        picker.fire('save', 'bogus');
+        Assert.areEqual(
+            'foo', picker._search_input.get('value'),
+            "The widget has been cleared but it should not");
+    },
+
+    test_cancel_event_does_not_clear_widget_by_default: function () {
+        this.picker.render();
+
+        this.picker._search_input.set('value', 'foo');
+        this.picker.fire('cancel', 'bogus');
+        Assert.areEqual(
+            'foo', this.picker._search_input.get('value'),
+            "The widget has been cleared but it should not");
+    },
+
+    test_cancel_event_clears_widget_when_clear_on_cancel_is_true: function () {
+        picker = new Y.Picker({clear_on_cancel: true});
+        picker.render();
+
+        picker._search_input.set('value', 'foo');
+        picker.fire('cancel', 'bogus');
+        Assert.areEqual(
+            '', picker._search_input.get('value'),
+            "The widget hasn't been cleared");
+    },
+
     test_search_clears_any_eror: function () {
         this.picker.render();
         this.picker.set('error', "An error");