init

src/containers/editable-tooltip.js

@@ -0,0 +1,97 @@
+/**
+* Editable jQuery UI Tooltip 
+* ---------------------
+* requires jquery ui 1.9.x 
+*/
+(function ($) {
+    
+    //extend methods
+    $.extend($.fn.editableContainer.Constructor.prototype, {
+        containerName: 'tooltip',
+        innerCss: '.ui-tooltip-content', 
+        
+        initContainer: function(){
+            this.handlePlacement();
+            this.options.open = $.proxy(function() {
+                //disable events hiding tooltip by default
+                this.container()._on(this.container().element, {
+                    mouseleave: function(e){ e.stopImmediatePropagation(); },
+                    focusout: function(e){ e.stopImmediatePropagation(); }
+                });  
+            }, this);
+            this.call(this.options);
+            //disable standart event to show tooltip
+            this.container()._off(this.container().element, 'mouseover focusin');
+        },         
+        
+        tip: function() {
+            return this.container()._find(this.container().element);
+        },
+        
+        show: function() {
+            this.call('open');
+            this.tip().addClass('editable-container');
+            
+            this.initForm(); 
+            this.tip().find(this.innerCss)
+                .empty()
+                .append($('<label>').text(this.options.title || this.$element.data( "ui-tooltip-title") || this.$element.data( "originalTitle")))
+                .append(this.$form);      
+            this.$form.editableform('render');             
+        },  
+        
+        hide: function() {
+            this.call('close');      
+        },
+        
+        setPosition: function() {
+            this.tip().position( $.extend({
+                of: this.$element
+            }, this.options.position ) );     
+        },
+        
+        handlePlacement: function() {
+           var pos; 
+           switch(this.options.placement) {
+               case 'top':
+                      pos = {
+                          my: "center bottom-5", 
+                          at: "center top" 
+                      };
+               break;
+               case 'right':
+                      pos = {
+                          my: "left+5 center", 
+                          at: "right center" 
+                      };
+               break;
+               case 'bottom':
+                      pos = {
+                          my: "center top+5", 
+                          at: "center bottom" 
+                      };
+               break;
+               case 'left':
+                      pos = {
+                          my: "right-5 center", 
+                          at: "left center" 
+                      };
+               break;                                             
+           }
+           
+           this.options.position = $.extend({}, this.options.position, pos);
+        },
+        
+       destroy: function() {
+          //jqueryui tooltip destroy itself
+       }                 
+    });
+    
+    //defaults
+    $.fn.editableContainer.defaults = $.extend({}, $.fn.tooltip.defaults, $.fn.editableContainer.defaults, {
+        items: '*',
+        content: ' ',
+        position: {}
+    });
+    
+}(window.jQuery));