added toggle values dblclick and hover

CHANGELOG.txt

@@ -4,9 +4,10 @@ X-editable changelog
 
 Version 1.1.1 wip
 ----------------------------   
+[enh] added 'inputs-ext' directory with sample input 'address'. They will not be concatenated to main files (vitalets)  
 [enh #13] 'onblur' option: to cancel, submit or ignore when user clicks outside the form (vitalets)  
 [enh] 'ajaxOptions' parameter for advanced ajax configuration (vitalets)  
-[enh] success callback can return object to overwrite submitted value (vitalets)  
+[enh] 'success' callback can return object to overwrite submitted value (vitalets)  
        
        
 Version 1.1.0 Nov 27, 2012

src/containers/editable-container.js

@@ -159,12 +159,12 @@ Applied as jQuery method.
         /**
         Shows container with form
         @method show()
-        @param {boolean} multi if true - other editable containers will not be closed. Default false.
+        @param {boolean} closeAll Wether to close all other editable containers when showing this one. Default true.
         **/          
-        show: function (multi) {
+        show: function (closeAll) {
             this.$element.addClass('editable-open');
-            if(!multi) {
+            if(closeAll !== false) {
-                //close all open containers (except one)
+                //close all open containers (except this)
                 this.closeOthers(this.$element[0]);  
             }
             
@@ -207,12 +207,13 @@ Applied as jQuery method.
         /**
         Toggles container visibility (show / hide)
         @method toggle()
+        @param {boolean} closeAll Wether to close all other editable containers when showing this one. Default true.
         **/          
-        toggle: function() {
+        toggle: function(closeAll) {
             if(this.tip && this.tip().is(':visible')) {
                 this.hide();
             } else {
-                this.show();
+                this.show(closeAll);
             } 
         },
 

src/element/editable-element.js

@@ -57,9 +57,9 @@ Makes editable any HTML element on the page. Applied as jQuery method.
             this.$element.addClass('editable');
             
             //attach click handler. In disabled mode it just prevent default action (useful for links)
-            if(this.options.toggle === 'click') {
+            if(this.options.toggle !== 'manual') {
                 this.$element.addClass('editable-click');
-                this.$element.on('click.editable', $.proxy(this.click, this));
+                this.$element.on(this.options.toggle + '.editable', $.proxy(this.activate, this));
             } else {
                 this.$element.attr('tabindex', -1); //do not stop focus on element when toggled manually
             }
@@ -100,7 +100,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
             this.options.disabled = false;
             this.$element.removeClass('editable-disabled');
             this.handleEmpty();
-            if(this.options.toggle === 'click') {
+            if(this.options.toggle !== 'manual') {
                 if(this.$element.attr('tabindex') === '-1') {    
                     this.$element.removeAttr('tabindex');                                
                 }
@@ -178,22 +178,34 @@ Makes editable any HTML element on the page. Applied as jQuery method.
             }
         },        
         
-        click: function (e) {
+        activate: function (e) {
             e.preventDefault();
             if(this.options.disabled) {
                 return;
             }
-            //stop propagation bacause document listen any click to hide all editableContainers
+            /*
+            stop propagation not required anymore because in document click handler it checks event target
+            */
             //e.stopPropagation();
-            this.toggle();
+            
+            if(this.options.toggle === 'mouseenter') {
+                //for hover only show container
+                this.show(); 
+            } else {
+                /*
+                if toggle = click we should not close all other containers as they will be closed automatically in document click listener
+                */
+                var closeAll = (this.options.toggle !== 'click');
+                this.toggle(closeAll);
+            }
         },
         
         /**
         Shows container with form
         @method show()
-        @param {boolean} multi if true - other editable containers will not be closed. Default false.
+        @param {boolean} closeAll Wether to close all other editable containers when showing this one. Default true.
         **/  
-        show: function (multi) {
+        show: function (closeAll) {
             if(this.options.disabled) {
                 return;
             }
@@ -213,13 +225,9 @@ Makes editable any HTML element on the page. Applied as jQuery method.
             } else if(this.container.tip().is(':visible')) {
                 return;
             }      
-                                         
-            //hide all other editable containers. Required to work correctly with toggle = manual
-            //temp
-            //$('.editable-container').find('.editable-cancel').click();
             
             //show container
-            this.container.show(multi);
+            this.container.show(closeAll);
         },
         
         /**
@@ -240,12 +248,13 @@ Makes editable any HTML element on the page. Applied as jQuery method.
         /**
         Toggles container visibility (show / hide)
         @method toggle()
+        @param {boolean} closeAll Wether to close all other editable containers when showing this one. Default true.
         **/  
-        toggle: function() {
+        toggle: function(closeAll) {
             if(this.container && this.container.tip().is(':visible')) {
                 this.hide();
             } else {
-                this.show();
+                this.show(closeAll);
             }
         },
         
@@ -462,9 +471,10 @@ Makes editable any HTML element on the page. Applied as jQuery method.
         **/         
         disabled: false,
         /**
-        How to toggle editable. Can be <code>click|manual</code>. 
+        How to toggle editable. Can be <code>click|dblclick|mouseenter|manual</code>. 
         When set to <code>manual</code> you should manually call <code>show/hide</code> methods of editable.  
-        Note: if you are calling <code>show</code> on **click** event you need to apply <code>e.stopPropagation()</code> because container has behavior to hide on any click outside.
+        **Note**: if you call <code>show</code> or <code>toggle</code> inside **click** handler of some DOM element, 
+        you need to apply <code>e.stopPropagation()</code> because containers are being closed on any click on document.
         
         @example
         $('#edit-button').click(function(e) {
@@ -477,6 +487,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
         @default 'click'
         **/          
         toggle: 'click',
+
         /**
         Text shown when element is empty.
 

test/unit/common.js

@@ -89,39 +89,6 @@
         ok(p.find(':contains("'+title+'")').length, 'title ok');
         e.remove();
       });   
-     /* 
-      test("should close all other containers on click on editable", function () {
-        var e1 = $('<a href="#" data-pk="1" data-url="post.php" id="a">abc</a>').appendTo('#qunit-fixture').editable(),  
-            e2 = $('<a href="#" data-pk="1" data-url="post.php" id="b">abcd</a>').appendTo('#qunit-fixture').editable();  
-                                                                      
-        e1.click()
-        var p1 = tip(e1);
-        ok(p1.is(':visible'), 'popover1 visible');
-        
-        e2.click()
-        var p2 = tip(e2);
-        ok(p2.is(':visible'), 'popover2 visible');
-        ok(!p1.is(':visible'), 'popover1 closed');
-        
-        p2.find('button[type=button]').click();
-        ok(!p2.is(':visible'), 'popover2 closed');
-      });
-      
-     test("click outside container should hide it", function () {
-        var e = $('<a href="#" data-pk="1" data-url="post.php" data-name="text1">abc</a>').appendTo('#qunit-fixture').editable(),
-            e1 = $('<div>').appendTo('body');
-        
-        e.click();
-        var p = tip(e);
-        ok(p.is(':visible'), 'popover shown');
-        
-        p.click();
-        ok(p.is(':visible'), 'popover still shown');
-        
-        e1.click();
-        ok(!p.is(':visible'), 'popover closed');
-     });        
-      */
       
       test("onblur: cancel", function () {
         var oldValue = 'abc',
@@ -160,7 +127,7 @@
         e2.editable('hide');
         ok(!p2.is(':visible'), 'popover2 closed');    
         
-        //call show method of another editable (multi = false)                                                              
+        //call show method of another editable, closeAll = true (default)                                                              
         e.click();
         p = tip(e);
         ok(p.is(':visible'), 'popover1 visible');
@@ -173,12 +140,12 @@
         e2.editable('hide');
         ok(!p2.is(':visible'), 'popover2 closed');         
         
-        //call show method of another editable (multi = true)                                                              
+        //call show method of another editable, closeAll = false
         e.click();
         p = tip(e);
         ok(p.is(':visible'), 'popover1 visible');
         p.find('input').val(newValue);
-        e2.editable('show', true);
+        e2.editable('show', false);
         p2 = tip(e2);
         ok(p.is(':visible'), 'popover1 visible');
         ok(p2.is(':visible'), 'popover2 visible');
@@ -226,7 +193,7 @@
         e2.editable('hide');
         ok(!p2.is(':visible'), 'popover2 closed');    
         
-        //call show method of another editable (multi = false)                                                              
+        //call show method of another editable, closeAll = true (default)                                                              
         e.click();
         p = tip(e);
         ok(p.is(':visible'), 'popover1 visible');
@@ -239,12 +206,12 @@
         e2.editable('hide');
         ok(!p2.is(':visible'), 'popover2 closed');         
         
-        //call show method of another editable (multi = true)                                                              
+        //call show method of another editable, closeAll = false
         e.click();
         p = tip(e);
         ok(p.is(':visible'), 'popover1 visible');
         p.find('input').val(oldValue);
-        e2.editable('show', true);
+        e2.editable('show', false);
         p2 = tip(e2);
         ok(p.is(':visible'), 'popover1 visible');
         ok(p2.is(':visible'), 'popover2 visible');
@@ -286,7 +253,7 @@
         e2.editable('hide');
         ok(!p2.is(':visible'), 'popover2 closed');    
         
-        //call show method of another editable (multi = false)                                                              
+        //call show method of another editable, closeAll = true (default)
         e2.editable('show');
         p2 = tip(e2);
         ok(p.is(':visible'), 'popover1 still visible'); 
@@ -294,8 +261,8 @@
         e2.editable('hide');
         ok(!p2.is(':visible'), 'popover2 closed'); 
         
-        //call show method of another editable (multi = true)                                                              
+        //call show method of another editable, closeAll = false                                                              
-        e2.editable('show', true);
+        e2.editable('show', false);
         p2 = tip(e2);
         ok(p.is(':visible'), 'popover1 still visible'); 
         ok(p2.is(':visible'), 'popover2 visible');
@@ -317,7 +284,68 @@
         ok(p.find('button').offset().left > p.find('.editable-input').offset().left + p.find('.editable-input').width(), 'buttons left ok');
        
         d.remove();
-     });       
+     });   
+     
+      test("toggle: manual", function () {
+        var e = $('<a href="#" id="a"></a>').appendTo('#qunit-fixture').editable({
+            toggle: 'manual'
+        });
+        
+        e.click();                       
+        ok(!e.data('editableContainer'), 'popover not visible after click');
+        e.editable('show'); 
+        var p = tip(e);
+        ok(p.is(':visible'), 'shown manually');
+     });    
+     
+      test("toggle: dblclick", function () {
+        var e = $('<a href="#" id="a"></a>').appendTo('#qunit-fixture').editable({
+            toggle: 'dblclick'
+        }),
+        p, p2,
+        e2 = $('<a href="#" data-type="text" data-pk="1" data-url="post.php" id="b">abcd</a>').appendTo('#qunit-fixture').editable();
+        
+        e.click();
+        ok(!e.data('editableContainer'), 'popover not visible after click');
+
+        e2.click();
+        p2 = tip(e2);                     
+        ok(p2.is(':visible'), 'popover2 visible');         
+        
+        e.dblclick();
+        p = tip(e);                     
+        ok(p.is(':visible'), 'popover1 visible');         
+        ok(!p2.is(':visible'), 'popover2 closed');         
+     });    
+     
+      test("toggle: mouseenter", function () {
+        var e = $('<a href="#" id="a"></a>').appendTo('#qunit-fixture').editable({
+            toggle: 'mouseenter'
+        }),
+        p, p2,
+        e2 = $('<a href="#" data-type="text" data-pk="1" data-url="post.php" id="b">abcd</a>').appendTo('#qunit-fixture').editable();
+        
+        e.click();
+        ok(!e.data('editableContainer'), 'popover not visible after click');
+        
+        e.dblclick();
+        ok(!e.data('editableContainer'), 'popover not visible after dblclick');
+
+        e2.click();   
+        p2 = tip(e2);                     
+        ok(p2.is(':visible'), 'popover2 visible');         
+        
+        e.mouseenter();
+        ok(e.data('editableContainer'), 'container defined');
+        p = tip(e);                     
+        ok(p.is(':visible'), 'popover1 visible');         
+        ok(!p2.is(':visible'), 'popover2 closed'); 
+        
+        //hover once again --> container should stay open
+        e.hover();
+        p = tip(e);
+        ok(p.is(':visible'), 'popover1 visible after second hover');                                      
+     });        
       
       //unfortunatly, testing this feature does not always work in browsers. Tested manually.
       /*

test/unit/text.js

@@ -39,18 +39,6 @@ $(function () {
         p.find('button[type=button]').click(); 
         ok(!p.is(':visible'), 'popover was removed');
       });           
-      
-     test("option 'toggle' = manual", function () {
-        var e = $('<a href="#" id="a"></a>').appendTo('#qunit-fixture').editable({
-            toggle: 'manual'
-        });
-        
-        e.click();                       
-        ok(!e.data().editableContainer, 'popover not visible after click');
-        e.editable('show'); 
-        var p = tip(e);
-        ok(p.is(':visible'), 'shown manually');
-     });    
      
      asyncTest("should load correct value and save new entered text (and value)", function () {
         var  v = 'ab<b>"',