shown event addad fixes #7

CHANGELOG.txt

@@ -2,8 +2,9 @@ X-editable changelog
 =============================
           
 
-Version 1.0.1 wip
+Version 1.0.1 Nov 22, 2012
 ----------------------------          
+[enh #7] 'shown' event added (vitalets)         
 [enh #1] params can be a function to calc it dynamically (vitalets)         
 [enh #6] do not preventDetault() in click when toggle='manual'. This allows to have clickable links (vitalets)         
 [bug #3] should not mark element with unsave css if url is user's function (vitalets)         

src/containers/editable-container.js

@@ -54,8 +54,17 @@ Applied as jQuery method.
             .on({
                 save: $.proxy(this.save, this),
                 cancel: $.proxy(this.cancel, this),
-                show: $.proxy(this.setPosition, this),
+                show: $.proxy(this.setPosition, this), //re-position container every time form is shown (after loading state)
-                rendering: $.proxy(this.setPosition, this)
+                rendering: $.proxy(this.setPosition, this), //this allows to place container correctly when loading shown
+                rendered: $.proxy(function(){
+                    /**        
+                    Fired when container is shown and form is rendered (for select will wait for loading dropdown options)
+                    
+                    @event shown 
+                    @param {Object} event event object
+                    **/                      
+                    this.$element.triggerHandler('shown');
+                }, this) 
             });
             return this.$form;
         },        
@@ -94,7 +103,7 @@ Applied as jQuery method.
         @method hide()
         **/         
         hide: function() {
-            this.call('hide'); 
+            this.call('hide');
         },
 
         /*
@@ -110,7 +119,7 @@ Applied as jQuery method.
                 this.hide();
             }
             /**        
-            Fired when form was cancelled by user
+            Fired when form was cancelled
             
             @event cancel 
             @param {Object} event event object

src/containers/editable-inline.js

@@ -11,7 +11,7 @@
                  
         initContainer: function(){
             //no init for container
-            //only convert anim to miliseconds
+            //only convert anim to miliseconds (int)
             if(!this.options.anim) {
                 this.options.anim = 0;
             }         

src/containers/editable-popover.js

@@ -6,11 +6,6 @@
 (function ($) {
 
     //extend methods
-    /**
-    Container based on Bootstrap Popover
-
-    @class editableContainer (popover)
-    **/    
     $.extend($.fn.editableContainer.Constructor.prototype, {
         containerName: 'popover',
         innerCss: '.popover-content p',

src/containers/editable-tooltip.js

@@ -6,11 +6,6 @@
 (function ($) {
     
     //extend methods
-    /**
-    Container based on jQuery UI Tooltip
-
-    @class editableContainer (tooltip)
-    **/    
     $.extend($.fn.editableContainer.Constructor.prototype, {
         containerName: 'tooltip',
         innerCss: '.ui-tooltip-content', 

src/editable-form/editable-form.js

@@ -74,6 +74,14 @@ Editableform is linked with one of input types, e.g. 'text' or 'select'.
                     this.input.value2input(this.value);
                     this.$form.submit($.proxy(this.submit, this));
                 }
+                
+                /**        
+                Fired when form is rendered
+                @event rendered
+                @param {Object} event event object
+                **/            
+                this.$element.triggerHandler('rendered');                
+                
                 this.showForm();
             }, this));
         },

src/element/editable-element.js

@@ -290,7 +290,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
             this.setValue(params.newValue);
             
             /**        
-            Fired when new value was submitted. You can use <code>$(this).data('editable')</code> inside handler to access to editable instance
+            Fired when new value was submitted. You can use <code>$(this).data('editable')</code> to access to editable instance
             
             @event save 
             @param {Object} event event object
@@ -307,7 +307,8 @@ Makes editable any HTML element on the page. Applied as jQuery method.
                     alert('error!'); 
                 } 
             });
-            **/              
+            **/
+            //event itself is triggered by editableContainer. Description here is only for documentation              
         },
 
         validate: function () {

test/unit/api.js

@@ -50,12 +50,6 @@ $(function () {
         //validate again
         var errors = e.editable('validate'); 
         ok($.isEmptyObject(errors), 'validation ok');  
-        
-        /* 
-        equal(e.filter('.editable-unsaved').length, 2, 'editable-unsaved exist');
-        e.editable('markAsSaved');      
-        ok(!e.filter('.editable-unsaved').length, 'editable-unsaved not exist');
-        */
     });
     
     test("getValue with originally empty elements", function () {
@@ -183,23 +177,21 @@ $(function () {
         }, timeout);                                        
         
      });  
+              
      
-     //shown / hidden events are totally depend on container.           
+     asyncTest("events: shown / cancel", function () {
-    /* 
+        expect(2);
-     asyncTest("'shown' / 'hidden' events", function () {
-        expect(3);
         var val = '1',
-            e = $('<a href="#" data-pk="1" data-type="select" data-url="post.php" data-name="text1" data-value="'+val+'"></a>').appendTo(fx);
+            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, editable) {
+        e.on('shown', function(event) {
-             var p = $(this).data('popover').$tip;
+             var editable = $(this).data('editable');
-             ok(p.is(':visible'), 'popover shown');  
+             equal(editable.value, val, 'shown triggered, value correct');
-             equal(editable.value, val, 'show triggered, value correct');
         });
         
-        e.on('hidden', function(event, editable) {
+        e.on('cancel', function(event) {
-             var p = $(this).data('popover').$tip;
+             var editable = $(this).data('editable');
-             ok(!p.is(':visible'), 'popover hidden'); 
+             ok(true, 'cancel triggered'); 
         });        
         
         e.editable({
@@ -211,14 +203,14 @@ $(function () {
         setTimeout(function() {
              var p = tip(e);
              p.find('button[type=button]').click(); 
-             
+             setTimeout(function() {
-             e.remove();    
+                 e.remove();    
-             start();  
+                 start();  
+             }, timeout);
         }, timeout);                                        
         
      });     
-    */ 
+  
-
    
      test("show/hide/toggle methods", function () {
         var e = $('<a href="#" data-pk="1" data-url="post.php" data-name="text1">abc</a>').appendTo('#qunit-fixture').editable();