From a3008996731116c4bb8d40e91406b28846b4801b Mon Sep 17 00:00:00 2001 From: Gonzalo Bellver Date: Wed, 30 Nov 2011 18:06:45 -0300 Subject: [PATCH] Menu refactor --- mindplot/pom.xml | 4 + .../javascript/XMLMindmapSerializer_Beta.js | 3 +- mindplot/src/main/javascript/widget/IMenu.js | 120 ++++++++++++ mindplot/src/main/javascript/widget/Menu.js | 159 +++------------- .../javascript/widget/ThinkmappingMenu.js | 171 ++++++++++++++++++ 5 files changed, 322 insertions(+), 135 deletions(-) create mode 100644 mindplot/src/main/javascript/widget/IMenu.js create mode 100644 mindplot/src/main/javascript/widget/ThinkmappingMenu.js diff --git a/mindplot/pom.xml b/mindplot/pom.xml index f976cda6..4875bf13 100644 --- a/mindplot/pom.xml +++ b/mindplot/pom.xml @@ -209,6 +209,10 @@ files="widget/TopicShapePanel.js"/> + + diff --git a/mindplot/src/main/javascript/XMLMindmapSerializer_Beta.js b/mindplot/src/main/javascript/XMLMindmapSerializer_Beta.js index 9fbee16c..9d5c416d 100644 --- a/mindplot/src/main/javascript/XMLMindmapSerializer_Beta.js +++ b/mindplot/src/main/javascript/XMLMindmapSerializer_Beta.js @@ -167,7 +167,8 @@ mindplot.XMLMindmapSerializer_Beta = new Class({ $assert(rootElem.tagName == mindplot.XMLMindmapSerializer_Beta.MAP_ROOT_NODE, "This seem not to be a map document."); // Start the loading process ... - var mindmap = new mindplot.model.Mindmap(); + var version = rootElem.getAttribute("version"); + var mindmap = new mindplot.model.Mindmap(mapId, version); var children = rootElem.childNodes; for (var i = 0; i < children.length; i++) { diff --git a/mindplot/src/main/javascript/widget/IMenu.js b/mindplot/src/main/javascript/widget/IMenu.js new file mode 100644 index 00000000..acdc4bae --- /dev/null +++ b/mindplot/src/main/javascript/widget/IMenu.js @@ -0,0 +1,120 @@ +/* + * 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.IMenu = new Class({ + initialize : function(designer, containerId, mapId) { + $assert(designer, "designer can not be null"); + $assert(containerId, "containerId can not be null"); + + this._designer = designer; + this._toolbarElems = []; + this._containerId = containerId; + this._mapId = mapId; + }, + + _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) { + var disable = false; + if (button.isTopicAction() && button.isRelAction()) { + disable = rels.length == 0 && topics.length == 0; + + } else if (!button.isTopicAction() && !button.isRelAction()) { + disable = false; + } + else if (button.isTopicAction() && topics.length == 0) { + disable = true; + } else if (button.isRelAction() && rels.length == 0) { + disable = true; + } + + if (disable) { + button.disable(); + } else { + button.enable(); + } + + }) + }.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)); + }, + + clear : function() { + this._toolbarElems.forEach(function(item) { + item.hide(); + }); + }, + + _save:function (saveElem, designer, saveHistory) { + + console.log("save!!!!"); //TODO(gb): Remove trace!!! + // Load map content ... + var mindmap = designer.getMindmap(); + var mindmapProp = designer.getMindmapProperties(); + + // Display save message .. + if (saveHistory) { + $notify("Saving ..."); + saveElem.setStyle('cursor', 'wait'); + } else { + console.log("Saving without history ..."); + } + + // Call persistence manager for saving ... + var persistenceManager = mindplot.PersitenceManager.getInstance(); + persistenceManager.save(mindmap, mindmapProp, saveHistory, { + onSuccess: function() { + if (saveHistory) { + saveElem.setStyle('cursor', 'pointer'); + $notify("Save complete"); + } + }, + onError: function() { + if (saveHistory) { + saveElem.setStyle('cursor', 'pointer'); + $notify("Save could not be completed. Try latter"); + } + } + }); + } +}) \ No newline at end of file diff --git a/mindplot/src/main/javascript/widget/Menu.js b/mindplot/src/main/javascript/widget/Menu.js index ea18ddcd..3bc38e27 100644 --- a/mindplot/src/main/javascript/widget/Menu.js +++ b/mindplot/src/main/javascript/widget/Menu.js @@ -17,15 +17,12 @@ */ mindplot.widget.Menu = new Class({ - initialize : function(designer, containerId, mapId, readOnly) { - $assert(designer, "designer can not be null"); - $assert(containerId, "containerId can not be null"); - var baseUrl = "../css/widget"; + Extends: mindplot.widget.IMenu, - // Init variables ... - this._designer = designer; - this._toolbarElems = []; - this._containerId = containerId; + initialize : function(designer, containerId, mapId, readOnly) { + this.parent(designer, containerId, mapId); + + var baseUrl = "../css/widget"; // Stop event propagation ... $(this._containerId).addEvent('click', function(event) { @@ -179,7 +176,7 @@ mindplot.widget.Menu = new Class({ }; this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('fontColor', fontColorModel, baseUrl)); - this.addButton('export', false, false, function() { + this._addButton('export', false, false, function() { var reqDialog = new MooDialog.Request('../c/export.htm?mapId=' + mapId, null, {'class': 'exportModalDialog', closeButton:true, @@ -194,57 +191,57 @@ mindplot.widget.Menu = new Class({ MooDialog.Request.active = reqDialog; }); - this.addButton('print', false, false, function() { + this._addButton('print', false, false, function() { printMap(); }); - this.addButton('zoomIn', false, false, function() { + this._addButton('zoomIn', false, false, function() { designer.zoomIn(); }); - this.addButton('zoomOut', false, false, function() { + this._addButton('zoomOut', false, false, function() { designer.zoomOut(); }); - this.addButton('undoEdition', false, false, function() { + this._addButton('undoEdition', false, false, function() { designer.undo(); }); - this.addButton('redoEdition', false, false, function() { + this._addButton('redoEdition', false, false, function() { designer.redo(); }); - this.addButton('addTopic', true, false, function() { + this._addButton('addTopic', true, false, function() { designer.createChildForSelectedNode(); }); - this.addButton('deleteTopic', true, true, function() { + this._addButton('deleteTopic', true, true, function() { designer.deleteCurrentNode(); }); - this.addButton('topicLink', true, false, function() { + this._addButton('topicLink', true, false, function() { designer.addLink(); }); - this.addButton('topicRelation', true, false, function(event) { + this._addButton('topicRelation', true, false, function(event) { designer.showRelPivot(event); }); - this.addButton('topicNote', true, false, function() { + this._addButton('topicNote', true, false, function() { designer.addNote(); }); - this.addButton('fontBold', true, false, function() { + this._addButton('fontBold', true, false, function() { designer.changeFontWeight(); }); - this.addButton('fontItalic', true, false, function() { + this._addButton('fontItalic', true, false, function() { designer.changeFontStyle(); }); var saveElem = $('save'); if (saveElem) { - this.addButton('save', false, false, function() { + this._addButton('save', false, false, function() { this._save(saveElem, designer, true); }.bind(this)); @@ -267,7 +264,7 @@ mindplot.widget.Menu = new Class({ var discardElem = $('discard'); if (discardElem) { - this.addButton('discard', false, false, function() { + this._addButton('discard', false, false, function() { if (!readOnly) { displayLoading(); @@ -281,7 +278,7 @@ mindplot.widget.Menu = new Class({ var tagElem = $('tagIt'); if (tagElem) { - this.addButton('tagIt', false, false, function() { + this._addButton('tagIt', false, false, function() { var reqDialog = new MooDialog.Request('../c/tags.htm?mapId=' + mapId, null, {'class': 'tagItModalDialog', closeButton:true, @@ -298,7 +295,7 @@ mindplot.widget.Menu = new Class({ var shareElem = $('shareIt'); if (shareElem) { - this.addButton('shareIt', false, false, function() { + this._addButton('shareIt', false, false, function() { var reqDialog = new MooDialog.Request('../c/mymaps.htm?action=collaborator&userEmail=paulo%40pveiga.com.ar&mapId=' + mapId, null, {'class': 'shareItModalDialog', closeButton:true, @@ -316,7 +313,7 @@ mindplot.widget.Menu = new Class({ var publishElem = $('publishIt'); if (publishElem) { - this.addButton('publishIt', false, false, function() { + this._addButton('publishIt', false, false, function() { var reqDialog = new MooDialog.Request('../c/publish.htm?mapId=' + mapId, null, {'class': 'publishModalDialog', closeButton:true, @@ -335,7 +332,7 @@ mindplot.widget.Menu = new Class({ var historyElem = $('history'); if (historyElem) { - this.addButton('history', false, false, function() { + this._addButton('history', false, false, function() { var reqDialog = new MooDialog.Request('../c/history.htm?action=list&goToMindmapList&mapId=' + mapId, null, {'class': 'historyModalDialog', closeButton:true, @@ -353,118 +350,12 @@ 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) { - var disable = false; - if (button.isTopicAction() && button.isRelAction()) { - disable = rels.length == 0 && topics.length == 0; - - } else if (!button.isTopicAction() && !button.isRelAction()) { - disable = false; - } - else if (button.isTopicAction() && topics.length == 0) { - disable = true; - } else if (button.isRelAction() && rels.length == 0) { - disable = true; - } - - if (disable) { - button.disable(); - } else { - button.enable(); - } - - }) - }.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/undo.png)"); -// } else { -// $("undoEdition").setStyle("background-image", "url(../images/undo.png)"); -// } -// -// if (event.redoSteps > 0) { -// $("redoEdition").setStyle("background-image", "url(../images/redo.png)"); -// } else { -// $("redoEdition").setStyle("background-image", "url(../images/redo.png)"); -// } -// -// }); - }, - - addButton:function (buttonId, topic, rel, fn) { + _addButton:function (buttonId, topic, rel, fn) { // Register Events ... var button = new mindplot.widget.ToolbarItem(buttonId, function(event) { fn(event); this.clear(); }.bind(this), {topicAction:topic,relAction:rel}); this._toolbarElems.push(button); - }, - - clear : function() { - this._toolbarElems.forEach(function(item) { - item.hide(); - }); - }, - - _save:function (saveElem, designer, saveHistory) { - - // Load map content ... - var mindmap = designer.getMindmap(); - var mindmapProp = designer.getMindmapProperties(); - - // Display save message .. - if (saveHistory) { - $notify("Saving ..."); - saveElem.setStyle('cursor', 'wait'); - } else { - console.log("Saving without history ..."); - } - - // Call persistence manager for saving ... - var persistenceManager = mindplot.PersitenceManager.getInstance(); - persistenceManager.save(mindmap, mindmapProp, saveHistory, { - onSuccess: function() { - if (saveHistory) { - saveElem.setStyle('cursor', 'pointer'); - $notify("Save complete"); - } - }, - onError: function() { - if (saveHistory) { - saveElem.setStyle('cursor', 'pointer'); - $notify("Save could not be completed. Try latter"); - } - } - }); } - }); \ No newline at end of file diff --git a/mindplot/src/main/javascript/widget/ThinkmappingMenu.js b/mindplot/src/main/javascript/widget/ThinkmappingMenu.js new file mode 100644 index 00000000..c2ae64b7 --- /dev/null +++ b/mindplot/src/main/javascript/widget/ThinkmappingMenu.js @@ -0,0 +1,171 @@ +/* + * 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.ThinkmappingMenu = new Class({ + Extends: mindplot.widget.IMenu, + + initialize: function(designer, containerId, mapId) { + this.parent(designer, containerId, mapId); + + var baseUrl = "../css/widget"; + + // Stop event propagation ... + $(this._containerId).addEvent('click', function(event) { + event.stopPropagation(); + return false; + }); + + $(this._containerId).addEvent('dblclick', function(event) { + event.stopPropagation(); + return false; + }); + + // Create panels ... + var designerModel = designer.getModel(); + + // DummyModel + var dummyModel = + { + getValue : function() { + return null; + }, + setValue : function (hex) { + // Do Nothing + } + }; + this._toolbarElems.push(new mindplot.widget.PersonalisePanel('personaliseButton', dummyModel, baseUrl)); + this._toolbarElems.push(new mindplot.widget.AttachPanel('attachButton', dummyModel, baseUrl)); + this._toolbarElems.push(new mindplot.widget.SharePanel('shareButton', dummyModel, baseUrl)); + this._toolbarElems.push(new mindplot.widget.UserPanel('userButton', dummyModel, baseUrl)); + + this.addButton('newButton', false, false, function() { + var reqDialog = new MooDialog.Request('newMapDialog.htm', null, + {'class': 'newModalDialog', + closeButton:true, + destroyOnClose:true, + title:'Nouveau map' + }); + reqDialog.setRequestOptions({ + onRequest: function() { + reqDialog.setContent('loading...'); + } + }); + MooDialog.Request.active = reqDialog; + }); + + this.addButton('importButton', false, false, function() { + var reqDialog = new MooDialog.Request('importMap.htm', null, + {'class': 'importModalDialog', + closeButton:true, + destroyOnClose:true, + title:'Importez votre map' + }); + reqDialog.setRequestOptions({ + onRequest: function() { + reqDialog.setContent('loading...'); + } + }); + MooDialog.Request.active = reqDialog; + }); + this.addButton('headerMapTitle', false, false, function() { + var reqDialog = new MooDialog.Request('renameMap.htm?mapId='+mapId, null, + {'class': 'renameModalDialog', + closeButton:true, + destroyOnClose:true, + title:'Renommez votre map' + }); + reqDialog.setRequestOptions({ + onRequest: function() { + reqDialog.setContent('loading...'); + } + }); + MooDialog.Request.active = reqDialog; + }); + this.addButton('communicateButton', false, false, function() { + var reqDialog = new MooDialog.Request('sharing.htm?mapId='+mapId, null, + {'class': 'communicateModalDialog', + closeButton:true, + destroyOnClose:true, + title:'Collaboration' + }); + reqDialog.setRequestOptions({ + onRequest: function() { + reqDialog.setContent('loading...'); + } + }); + MooDialog.Request.active = reqDialog; + }); + this._addButton('save', false, false, function() { + this._save(saveElem, designer, true); + }.bind(this)); + + 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) { + var disable = false; + if (button.isTopicAction() && button.isRelAction()) { + disable = rels.length == 0 && topics.length == 0; + + } else if (!button.isTopicAction() && !button.isRelAction()) { + disable = false; + } + else if (button.isTopicAction() && topics.length == 0) { + disable = true; + } else if (button.isRelAction() && rels.length == 0) { + disable = true; + } + + if (disable) { + button.disable(); + } else { + button.enable(); + } + + }) + }.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)); + } +})