Editor working .

mindplot/src/main/javascript/widget/ToolbarPaneItem.js

@@ -21,6 +21,7 @@ mindplot.widget.ToolbarPaneItem = new Class({
     initialize : function(buttonId, model) {
         $assert(buttonId, "buttonId can not be null");
         $assert(model, "model can not be null");
+        this._model = model;
         var fn = function() {
             // Is the panel being displayed ?
             if (this.isVisible()) {
@@ -31,19 +32,46 @@ mindplot.widget.ToolbarPaneItem = new Class({
 
         }.bind(this);
         this.parent(buttonId, fn, {topicAction:true,relAction:false});
-        this._model = model;
-        this._panelId = this._init().id;
+        this._panelElem = this._init();
+        this._visible = false;
     },
 
     _init:function () {
         // Load the context of the panel ...
         var panelElem = this.buildPanel();
-        panelElem.setStyle('cursor','default');
+        panelElem.setStyle('cursor', 'default');
         var buttonElem = this.getButtonElem();
 
-        // Add panel content ..
-        panelElem.setStyle('display', 'none');
-        panelElem.inject(buttonElem);
+        var item = this;
+        this._tip = new mindplot.widget.FloatingTip(buttonElem, {
+            html: true,
+            position: 'bottom',
+            arrowOffset : 5,
+            center: true,
+            arrowSize: 7,
+            showDelay: 0,
+            hideDelay: 0,
+            content: function() {
+                return item._updateSelectedItem();
+            }.bind(this),
+            className: 'toolbarPaneTip',
+            motionOnShow:false,
+            motionOnHide:false,
+            motion: 0,
+            distance: 0,
+            showOn: 'xxxx',
+            hideOn: 'xxxx',
+            preventHideOnOver:true,
+            offset: {x:-4,y:0}
+        });
+
+        this._tip.addEvent('hide', function() {
+            this._visible = false
+        }.bind(this));
+
+        this._tip.addEvent('show', function() {
+            this._visible = true
+        }.bind(this));
 
         return panelElem;
     },
@@ -53,34 +81,55 @@ mindplot.widget.ToolbarPaneItem = new Class({
     },
 
     getPanelElem : function() {
-        return $(this._panelId);
+        return this._panelElem;
     }.protect(),
 
     show : function() {
         if (!this.isVisible()) {
             this.parent();
-            this.getButtonElem().className = 'buttonActive';
-            this.getPanelElem().setStyle('display', 'block');
+            this._tip.show(this.getButtonElem());
+            this.getButtonElem().className = 'buttonExtActive';
         }
     },
 
     hide : function() {
         if (this.isVisible()) {
-            this.getButtonElem().className = 'buttonOn';
-            this.getPanelElem().setStyle('display', 'none');
             this.parent();
+            this._tip.hide(this.getButtonElem());
+            this.getButtonElem().className = 'buttonExtOn';
         }
     },
 
     isVisible : function() {
-        return this.getPanelElem().getStyle('display') == 'block';
+        return this._visible;
     },
 
-    disable: function() {
+    disable : function() {
         this.hide();
-        this.parent();
+        var elem = this.getButtonElem();
+        if (this._enable) {
+            elem.removeEvent('click', this._fn);
+            elem.removeClass('buttonExtOn');
+
+            // Todo: Hack...
+            elem.removeClass('buttonOn');
+
+            elem.addClass('buttonExtOff');
+            this._enable = false;
+        }
     },
 
+    enable : function() {
+        var elem = this.getButtonElem();
+        if (!this._enable) {
+            elem.addEvent('click', this._fn);
+            elem.removeClass('buttonExtOff');
+            elem.addClass('buttonExtOn');
+            this._enable = true;
+        }
+    },
+
+
     buildPanel : function() {
         throw "Method must be implemented";
     }.protect()