Implements toolbar disabling.

2011-10-04 01:16:29 -03:00
parent b7bbe2c0b7
commit 9185883d30
24 changed files with 919 additions and 275 deletions
--- a/mindplot/src/main/javascript/widget/ColorPalettePanel.js
+++ b/mindplot/src/main/javascript/widget/ColorPalettePanel.js
@@ -17,7 +17,7 @@
 */

 mindplot.widget.ColorPalettePanel = new Class({
-    Extends: mindplot.widget.ToolbarItem,
+    Extends: mindplot.widget.ToolbarPaneItem,

    initialize : function(buttonId, model, baseUrl) {
        this._baseUrl = baseUrl;
--- a/mindplot/src/main/javascript/widget/ColorPickerPanel.js
+++ b/mindplot/src/main/javascript/widget/ColorPickerPanel.js
@@ -17,7 +17,7 @@
 */

 mindplot.widget.ColorPickerPanel = new Class({
-    Extends: mindplot.widget.ToolbarItem,
+    Extends: mindplot.widget.ToolbarPaneItem,
    initialize : function(buttonId, model) {
        this.parent(buttonId, model);
        this._mooRainbow = new MooRainbow(buttonId, {
--- a/mindplot/src/main/javascript/widget/IconPanel.js
+++ b/mindplot/src/main/javascript/widget/IconPanel.js
@@ -17,7 +17,7 @@
 */

 mindplot.widget.IconPanel = new Class({
-    Extends: mindplot.widget.ToolbarItem,
+    Extends: mindplot.widget.ToolbarPaneItem,
    initialize : function(buttonId, model) {
        this.parent(buttonId, model);
    },
--- a/mindplot/src/main/javascript/widget/ListToolbarPanel.js
+++ b/mindplot/src/main/javascript/widget/ListToolbarPanel.js
@@ -17,7 +17,7 @@
 */

 mindplot.widget.ListToolbarPanel = new Class({
-    Extends: mindplot.widget.ToolbarItem,
+    Extends: mindplot.widget.ToolbarPaneItem,
    initialize : function(buttonId, model) {
        this.parent(buttonId, model);
        this._initPanel();
--- a/mindplot/src/main/javascript/widget/Menu.js
+++ b/mindplot/src/main/javascript/widget/Menu.js
@@ -26,6 +26,7 @@ mindplot.widget.Menu = new Class({
        this._designer = designer;
        this._toolbarElems = [];
        this._containerId = containerId;
+        this._toolbarDisabled = false;

        // Stop event propagation ...
        $(this._containerId).addEvent('click', function(event) {
@@ -179,83 +180,50 @@ mindplot.widget.Menu = new Class({
        };
        this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('fontColor', fontColorModel, baseUrl));

-        // Register on close events ...
-        this._toolbarElems.forEach(function(elem) {
-            elem.addEvent('show', function() {
-                this.clear()
-            }.bind(this));
-        }.bind(this));
-
-
-        // Register Events ...
-        $('zoomIn').addEvent('click', function() {
-            this.clear();
-            designer.zoomIn();
-        }.bind(this));
-
-        $('zoomOut').addEvent('click', function() {
-            this.clear();
-            designer.zoomOut();
-        }.bind(this));
-
-        $('undoEdition').addEvent('click', function() {
-            this.clear();
-            designer.undo();
-        }.bind(this));
-
-        $('redoEdition').addEvent('click', function() {
-            this.clear();
-            designer.redo();
-        }.bind(this));
-
-        $('addTopic').addEvent('click', function() {
-            this.clear();
-            designer.createChildForSelectedNode();
-        }.bind(this));
-
-        $('deleteTopic').addEvent('click', function() {
-            this.clear();
-            designer.deleteCurrentNode();
-        }.bind(this));
-
-
-        $('topicLink').addEvent('click', function() {
-            this.clear();
-            designer.addLink();
-        }.bind(this));
-
-        $('topicRelation').addEvent('click', function(event) {
-            designer.addRelationShip(event);
+        this.addButton('zoomIn', false, false, function() {
+            designer.zoomIn()
        });

-        $('topicNote').addEvent('click', function() {
-            this.clear();
-            designer.addNote();
-        }.bind(this));
+        this.addButton('zoomOut', false, false, function() {
+            designer.zoomOut()
+        });

-        $('fontBold').addEvent('click', function() {
+        this.addButton('undoEdition', false, false, function() {
+            designer.undo()
+        });
+
+        this.addButton('redoEdition', false, false, function() {
+            designer.redo();
+        });
+
+        this.addButton('addTopic', true, false, function() {
+            designer.createChildForSelectedNode();
+        });
+
+        this.addButton('deleteTopic', true, true, function() {
+            designer.deleteCurrentNode();
+        });
+
+        this.addButton('topicLink', true, false, function() {
+            designer.addLink();
+        });
+
+        this.addButton('topicRelation', true, false, function() {
+            designer.addLink();
+        });
+
+        this.addButton('topicNote', true, false, function() {
+            designer.addNote();
+        });
+
+        this.addButton('fontBold', true, false, function() {
            designer.changeFontWeight();
        });

-        $('fontItalic').addEvent('click', function() {
+        this.addButton('fontItalic', true, false, function() {
            designer.changeFontStyle();
        });

-        designer.addEvent("modelUpdate", function(event) {
-            if (event.undoSteps > 0) {
-                $("undoEdition").setStyle("background-image", "url(../images/file_undo.png)");
-            } else {
-                $("undoEdition").setStyle("background-image", "url(../images/file_undo_dis.png)");
-            }
-
-            if (event.redoSteps > 0) {
-                $("redoEdition").setStyle("background-image", "url(../images/file_redo.png)");
-            } else {
-                $("redoEdition").setStyle("background-image", "url(../images/file_redo_dis.png)");
-            }
-
-        });
-
        var saveElem = $('saveButton');
        if (saveElem) {
            saveElem.addEvent('click', function() {
@@ -338,6 +306,71 @@ mindplot.widget.Menu = new Class({

        }

+        this._registerEvents(designer);
+    },
+
+    _registerEvents : function(designer) {
+
+        // Register on close events ...
+        this._toolbarElems.forEach(function(elem) {
+            elem.addEvent('show', function() {
+                this.clear()
+            }.bind(this));
+        }.bind(this));
+
+        designer.addEvent('onblur', function() {
+            var topics = designer.getModel().filterSelectedTopics();
+            var rels = designer.getModel().filterSelectedRelations();
+
+            this._toolbarElems.forEach(function(button) {
+                if (button.isTopicAction() && topics.length == 0) {
+                    button.disable();
+                }
+
+                if (button.isRelAction() && rels.length == 0) {
+                    button.disable();
+                }
+            })
+        }.bind(this));
+
+        designer.addEvent('onfocus', function() {
+            var topics = designer.getModel().filterSelectedTopics();
+            var rels = designer.getModel().filterSelectedRelations();
+
+            this._toolbarElems.forEach(function(button) {
+                if (button.isTopicAction() && topics.length > 0) {
+                    button.enable();
+                }
+
+                if (button.isRelAction() && rels.length > 0) {
+                    button.enable();
+                }
+            })
+        }.bind(this));
+
+        designer.addEvent("modelUpdate", function(event) {
+            if (event.undoSteps > 0) {
+                $("undoEdition").setStyle("background-image", "url(../images/file_undo.png)");
+            } else {
+                $("undoEdition").setStyle("background-image", "url(../images/file_undo_dis.png)");
+            }
+
+            if (event.redoSteps > 0) {
+                $("redoEdition").setStyle("background-image", "url(../images/file_redo.png)");
+            } else {
+                $("redoEdition").setStyle("background-image", "url(../images/file_redo_dis.png)");
+            }
+
+        });
+    },
+
+    addButton:function (buttonId, topic, rel, fn) {
+        // Register Events ...
+        var button = new mindplot.widget.ToolbarItem(buttonId, function(event) {
+            this.clear();
+            fn(event);
+        }.bind(this), {topicAction:topic,relAction:rel});
+        this._toolbarElems.push(button);
    },

    clear : function() {
@@ -345,4 +378,4 @@ mindplot.widget.Menu = new Class({
            elem.hide();
        });
    }
-});
+});
--- a/mindplot/src/main/javascript/widget/Monitor.js
+++ b/mindplot/src/main/javascript/widget/Monitor.js
@@ -0,0 +1,50 @@
+/*
+ *    Copyright [2011] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+mindplot.widget.Monitor = new Class({
+    initialize : function(fadeElem, msgElem) {
+        $assert(fadeElem, "fadeElem can not be null");
+        $assert(msgElem, "msgElem can not be null");
+        this.msgQueue = [];
+
+        this._fadeElem = fadeElem;
+        this._msgElem = msgElem;
+    },
+
+    _showMsg : function(msg, msgKind) {
+        if (msgKind == core.Monitor.MsgKind.ERROR) {
+            msg = "<div id='small_error_icon'>" + msg + "</div>";
+        }
+        this._msgElem.innerHTML = msg;
+    },
+
+    logError : function(userMsg) {
+        this.logMessage(userMsg, core.Monitor.MsgKind.ERROR);
+    },
+
+    logMessage : function(msg, msgKind) {
+        console.log(userMsg);
+    }
+});
+
+core.Monitor.MsgKind = {
+    INFO:1,
+    WARNING:2,
+    ERROR:3,
+    FATAL:4
+};
--- a/mindplot/src/main/javascript/widget/NoteEditor.js
+++ b/mindplot/src/main/javascript/widget/NoteEditor.js
@@ -21,7 +21,42 @@ mindplot.widget.NoteEditor = new Class({
    initialize : function(model) {
        $assert(model, "model can not be null");
        var panel = this._buildPanel(model);
-        this.parent({closeButton:false,destroyOnClose:true,title:'Note'});
+        this.parent({
+            closeButton:false,
+            destroyOnClose:true,
+            title:'Note',
+            onInitialize: function(wrapper) {
+                wrapper.setStyle('opacity', 0);
+                this.fx = new Fx.Morph(wrapper, {
+                    duration: 600,
+                    transition: Fx.Transitions.Bounce.easeOut
+                });
+                this.overlay = new Overlay(this.options.inject, {
+                    duration: this.options.duration
+                });
+                if (this.options.closeOnOverlayClick) this.overlay.addEvent('click', this.close.bind(this));
+            },
+
+            onBeforeOpen: function() {
+                this.overlay.open();
+                this.fx.start({
+                    'margin-top': [-200, -100],
+                    opacity: [0, 1]
+                }).chain(function() {
+                    this.fireEvent('show');
+                }.bind(this));
+            },
+
+            onBeforeClose: function() {
+                this.fx.start({
+                    'margin-top': [-100, 0],
+                    opacity: 0
+                }).chain(function() {
+                    this.fireEvent('hide');
+                }.bind(this));
+                this.overlay.close();
+            }
+        });
        this.setContent(panel);
    },

--- a/mindplot/src/main/javascript/widget/ToolbarItem.js
+++ b/mindplot/src/main/javascript/widget/ToolbarItem.js
@@ -18,39 +18,13 @@

 mindplot.widget.ToolbarItem = new Class({
    Implements:[Events],
-    initialize : function(buttonId, model) {
+    initialize : function(buttonId, fn, options) {
        $assert(buttonId, "buttonId can not be null");
-        $assert(model, "model can not be null");
-        this._model = model;
+        $assert(fn, "fn can not be null");
        this._buttonId = buttonId;
-        this._panelId = this._init().id;
-    },
+        this._fn = fn;
+        this._options = options;

-    _init:function () {
-        // Load the context of the panel ...
-        var panelElem = this.buildPanel();
-        var buttonElem = this.getButtonElem();
-
-        // Add panel content ..
-        panelElem.setStyle('display', 'none');
-        panelElem.inject(buttonElem);
-
-        // Add events for button click ...
-        this.getButtonElem().addEvent('click', function() {
-            // Is the panel being displayed ?
-            if (this.isVisible()) {
-                this.hide();
-            } else {
-                this.show();
-            }
-
-        }.bind(this));
-
-        return panelElem;
-   },
-
-    getModel : function() {
-        return this._model;
    },

    getButtonElem : function() {
@@ -59,32 +33,39 @@ mindplot.widget.ToolbarItem = new Class({
        return elem;
    }.protect(),

-    getPanelElem : function() {
-        return $(this._panelId);
-    }.protect(),
-
    show : function() {
-        if (!this.isVisible()) {
-            this.fireEvent('show');
-            this.getButtonElem().className = 'buttonActive';
-            this.getPanelElem().setStyle('display', 'block');
-        }
+        this.fireEvent('show');
    },

    hide : function() {
-        if (this.isVisible()) {
-            this.getButtonElem().className = 'button';
-            this.getPanelElem().setStyle('display', 'none');
-            this.fireEvent('hide');
+        this.fireEvent('hide');
+    },
+
+    isTopicAction : function() {
+        return this._options.topicAction;
+    },
+
+    isRelAction : function() {
+        return this._options.relAction;
+    },
+
+    disable : function() {
+        var elem = this.getButtonElem();
+        if (this._enable) {
+            elem.removeEvent('click', this._fn);
+            elem.removeClass('buttonOn');
+            elem.addClass('buttonOff');
+            this._enable = false;
        }
    },

-    isVisible : function() {
-        return this.getPanelElem().getStyle('display') == 'block';
-    },
-
-    buildPanel : function() {
-        throw "Method must be implemented";
-    }.protect()
-
+    enable : function() {
+        var elem = this.getButtonElem();
+        if (!this._enable) {
+            elem.addEvent('click', this._fn);
+            elem.removeClass('buttonOff');
+            elem.addClass('buttonOn');
+            this._enable = true;
+        }
+    }
 });
--- a/mindplot/src/main/javascript/widget/ToolbarPaneItem.js
+++ b/mindplot/src/main/javascript/widget/ToolbarPaneItem.js
@@ -0,0 +1,93 @@
+/*
+ *    Copyright [2011] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+mindplot.widget.ToolbarPaneItem = new Class({
+    Extends:mindplot.widget.ToolbarItem,
+    initialize : function(buttonId, model) {
+        $assert(buttonId, "buttonId can not be null");
+        $assert(model, "model can not be null");
+        var fn = function() {
+            // Is the panel being displayed ?
+            if (this.isVisible()) {
+                this.hide();
+            } else {
+                this.show();
+            }
+
+        }.bind(this);
+        this.parent(buttonId, fn, {topicAction:true,relAction:true});
+        this._model = model;
+        this._panelId = this._init().id;
+    },
+
+    _init:function () {
+        // Load the context of the panel ...
+        var panelElem = this.buildPanel();
+        var buttonElem = this.getButtonElem();
+
+        // Add panel content ..
+        panelElem.setStyle('display', 'none');
+        panelElem.inject(buttonElem);
+
+        return panelElem;
+    },
+
+    getModel : function() {
+        return this._model;
+    },
+
+    getButtonElem : function() {
+        var elem = $(this._buttonId);
+        $assert(elem, "Could not find element for " + this._buttonId);
+        return elem;
+    }.protect(),
+
+    getPanelElem : function() {
+        return $(this._panelId);
+    }.protect(),
+
+    show : function() {
+        if (!this.isVisible()) {
+            this.parent();
+            this.getButtonElem().className = 'buttonActive';
+            this.getPanelElem().setStyle('display', 'block');
+        }
+    },
+
+    hide : function() {
+        if (this.isVisible()) {
+            this.getButtonElem().className = 'buttonOn';
+            this.getPanelElem().setStyle('display', 'none');
+            this.parent();
+        }
+    },
+
+    isVisible : function() {
+        return this.getPanelElem().getStyle('display') == 'block';
+    },
+
+    disable: function() {
+        this.hide();
+        this.parent();
+    },
+
+    buildPanel : function() {
+        throw "Method must be implemented";
+    }.protect()
+
+});