hidden event: reason param added

CHANGELOG.txt

@@ -4,6 +4,9 @@ X-editable changelog
 
 Version 1.2.0 wip
 ----------------------------  
+[enh] editableContainer removed from docs as not widely used (vitalets)  
+[enh] editableContainer: removed 'autohide' option and 'cancel' event. Use 'hidden' event instead (vitalets)  
+[enh] 'hidden' event: added param 'reason' that points to reason caused hiding (vitalets)  
 [enh] 'select' submit by enter (vitalets)  
 [bug #37] fix incorrectly shown datepicker in jquery 1.7.1 + webkit (vitalets)  
 [enh] added url param 'jquery' to run tests in different versions of jquery, e.g. '&jquery=1.7.2' (vitalets)  

src/containers/editable-container.js

@@ -80,8 +80,10 @@ Applied as jQuery method.
             .editableform(this.formOptions)
             .on({
                 save: $.proxy(this.save, this),
-                cancel: $.proxy(this.cancel, this),
+                cancel: $.proxy(function(){
-                show: $.proxy(this.setPosition, this), //re-position container every time form is shown (after loading state)
+                   this.hide('cancel'); 
+                }, this),
+                show: $.proxy(this.setPosition, this), //re-position container every time form is shown (occurs each time after loading state)
                 rendering: $.proxy(this.setPosition, this), //this allows to place container correctly when loading shown
                 rendered: $.proxy(function(){
                     /**        
@@ -144,8 +146,9 @@ Applied as jQuery method.
         /**
         Hides container with form
         @method hide()
+        @param {string} reason Reason caused hiding. Can be <code>save|cancel|onblur|undefined (=manual)</code>
         **/         
-        hide: function() {  
+        hide: function(reason) {  
             if(!this.tip() || !this.tip().is(':visible') || !this.$element.hasClass('editable-open')) {
                 return;
             }
@@ -155,9 +158,17 @@ Applied as jQuery method.
             Fired when container was hidden. It occurs on both save or cancel.
 
             @event hidden 
-            @param {Object} event event object
+            @param {object} event event object
+            @param {string} reason Reason caused hiding. Can be <code>save|cancel|onblur|undefined (=manual)</code>
+            @example
+            $('#username').on('hidden', function(e, reason) {
+                if(reason === 'save' || reason === 'cancel') {
+                    //auto-open next editable
+                    $(this).closest('tr').next().find('.editable').editable('show');
+                } 
+            });            
             **/             
-            this.$element.triggerHandler('hidden');   
+            this.$element.triggerHandler('hidden', reason);   
         },
         
         /* internal hide method. To be overwritten in child classes */
@@ -186,23 +197,8 @@ Applied as jQuery method.
             //tbd in child class
         },
 
-        cancel: function() {     
-            if(this.options.autohide) {
-                this.hide();
-            }
-            /**        
-            Fired when form was cancelled by user
-            
-            @event cancel 
-            @param {Object} event event object
-            **/             
-            this.$element.triggerHandler('cancel');
-        },
-
         save: function(e, params) {
-            if(this.options.autohide) {
+            this.hide('save');
-                this.hide();
-            }
             /**        
             Fired when new value was submitted. You can use <code>$(this).data('editableContainer')</code> inside handler to access to editableContainer instance
             
@@ -263,7 +259,7 @@ Applied as jQuery method.
         */
         closeOthers: function(element) {
             $('.editable-open').each(function(i, el){
-                //do nothing with passed element
+                //do nothing with passed element and it's children
                 if(el === element || $(el).find(element).length) {
                     return;
                 }
@@ -277,7 +273,7 @@ Applied as jQuery method.
                 }
                 
                 if(ec.options.onblur === 'cancel') {
-                    $el.data('editableContainer').hide();
+                    $el.data('editableContainer').hide('onblur');
                 } else if(ec.options.onblur === 'submit') {
                     $el.data('editableContainer').tip().find('form').submit();
                 }

src/element/editable-element.js

@@ -246,15 +246,11 @@ Makes editable any HTML element on the page. Applied as jQuery method.
             //init editableContainer: popover, tooltip, inline, etc..
             if(!this.container) {
                 var containerOptions = $.extend({}, this.options, {
-                    value: this.value,
+                    value: this.value
-                    autohide: false //element will take care to show/hide container. Otherwise hide() will be called twice
                 });
                 this.$element.editableContainer(containerOptions);
                 this.$element.on({
-                    save: $.proxy(this.save, this),
+                    save: $.proxy(this.save, this)
-                    cancel: $.proxy(function(){
-                            this.hide();
-                    }, this)
                 });
                 this.container = this.$element.data('editableContainer'); 
             } else if(this.container.tip().is(':visible')) {
@@ -293,13 +289,13 @@ Makes editable any HTML element on the page. Applied as jQuery method.
         */          
         save: function(e, params) {
             //if url is not user's function and value was not sent to server and value changed --> mark element with unsaved css. 
-            if(typeof this.options.url !== 'function' && params.response === undefined && this.input.value2str(this.value) !== this.input.value2str(params.newValue)) { 
+            if(typeof this.options.url !== 'function' && this.options.display !== false && params.response === undefined && this.input.value2str(this.value) !== this.input.value2str(params.newValue)) { 
                 this.$element.addClass('editable-unsaved');
             } else {
                 this.$element.removeClass('editable-unsaved');
             }
             
-            this.hide();
+           // this.hide();
             this.setValue(params.newValue);
             
             /**        

test/unit/api.js

@@ -79,9 +79,9 @@ $(function () {
         e.editable();
     });      
   
-     asyncTest("events: shown / cancel / hidden", function () {
+     asyncTest("events: shown / hidden (reason: cancel, onblur, manual)", function () {
-        expect(3);
+        expect(11);
-        var val = '1',
+        var val = '1', test_reason, 
             e = $('<a href="#" data-pk="1" data-type="select" data-url="post.php" data-name="text" data-value="'+val+'"></a>').appendTo(fx);
         
         e.on('shown', function(event) {
@@ -89,14 +89,8 @@ $(function () {
              equal(editable.value, val, 'shown triggered, value correct');
         });
         
-        e.on('cancel', function(event) {
+        e.on('hidden', function(event, reason) {
-             var editable = $(this).data('editable');
+             ok((reason === test_reason) || (test_reason === 'manual' && reason === undefined), 'hidden triggered, reason ok'); 
-             ok(true, 'cancel triggered'); 
-        });     
-        
-        e.on('hidden', function(event) {
-             var editable = $(this).data('editable');
-             ok(true, 'hidden triggered'); 
         });            
         
         e.editable({
@@ -107,28 +101,42 @@ $(function () {
         
         setTimeout(function() {
              var p = tip(e);
-             p.find('button[type=button]').click(); 
+             
-             setTimeout(function() {
+             test_reason = 'cancel'
-                 e.remove();    
+             p.find('button[type=button]').click();  //cancel
-                 start();  
+             ok(!p.is(':visible'), 'popover closed');
-             }, timeout);
+
+             test_reason = 'onblur'            
+             e.click();
+             p = tip(e);
+             ok(p.is(':visible'), 'popover shown');
+             e.parent().click();
+             ok(!p.is(':visible'), 'popover closed');
+             
+             test_reason = 'manual'            
+             e.click();
+             p = tip(e);
+             ok(p.is(':visible'), 'popover shown');
+             e.editable('hide');
+             ok(!p.is(':visible'), 'popover closed');             
+             
+             e.remove();    
+             start();  
         }, timeout);                                        
         
      });    
      
-     asyncTest("event: save / hidden", function () {
+     asyncTest("event: save / hidden (reason: save)", function () {
         expect(2);
         var val = '1',
             e = $('<a href="#" data-pk="1" data-type="select" data-url="post.php" data-name="text" data-value="'+val+'"></a>').appendTo(fx);
         
         e.on('save', function(event, params) {
-            var editable = $(this).data('editable');
             equal(params.newValue, 2, 'save triggered, value correct');
         });
         
-        e.on('hidden', function(event) {
+        e.on('hidden', function(event, reason) {
-             var editable = $(this).data('editable');
+            equal(reason, 'save', 'hidden triggered, reason ok'); 
-             ok(true, 'hidden triggered'); 
         });         
         
         e.editable({