From 2db8cd5c9631f6ace2e44615f1eee9b4148e2678 Mon Sep 17 00:00:00 2001 From: Paulo Veiga Date: Sun, 7 Aug 2011 18:59:20 -0300 Subject: [PATCH] Refactor menu. --- mindplot/pom.xml | 12 + .../src/main/javascript/MindmapDesigner.js | 2 +- mindplot/src/main/javascript/header.js | 3 +- .../main/javascript/widget/FontFamilyPanel.js | 37 +++ .../main/javascript/widget/FontSizePanel.js | 37 +++ .../src/main/javascript/widget/IconPanel.js | 141 +++++++++++ mindplot/src/main/javascript/widget/Menu.js | 150 +++++++++++ .../main/javascript/widget/ToolbarPanel.js | 89 +++++++ .../main/javascript/widget/TopicShapePanel.js | 37 +++ wise-doc/src/main/webapp/css/editor.css | 43 ++-- wise-doc/src/main/webapp/html/editor.html | 27 +- wise-doc/src/main/webapp/js/editor.js | 232 +----------------- wise-webapp/src/main/webapp/js/IconPanel.js | 128 ---------- wise-webapp/src/main/webapp/js/editor.js | 61 +---- 14 files changed, 553 insertions(+), 446 deletions(-) create mode 100644 mindplot/src/main/javascript/widget/FontFamilyPanel.js create mode 100644 mindplot/src/main/javascript/widget/FontSizePanel.js create mode 100644 mindplot/src/main/javascript/widget/IconPanel.js create mode 100644 mindplot/src/main/javascript/widget/Menu.js create mode 100644 mindplot/src/main/javascript/widget/ToolbarPanel.js create mode 100644 mindplot/src/main/javascript/widget/TopicShapePanel.js delete mode 100644 wise-webapp/src/main/webapp/js/IconPanel.js diff --git a/mindplot/pom.xml b/mindplot/pom.xml index d8d7f267..24435b0a 100644 --- a/mindplot/pom.xml +++ b/mindplot/pom.xml @@ -156,6 +156,18 @@ files="layout/FreeMindLayoutManager.js"/> + + + + + + diff --git a/mindplot/src/main/javascript/MindmapDesigner.js b/mindplot/src/main/javascript/MindmapDesigner.js index 9e52b993..faf33d16 100644 --- a/mindplot/src/main/javascript/MindmapDesigner.js +++ b/mindplot/src/main/javascript/MindmapDesigner.js @@ -681,7 +681,7 @@ mindplot.MindmapDesigner = new Class({ } }, - addImage2SelectedNode : function(iconType) { + addIconType2SelectedNode : function(iconType) { var validSelectedObjects = this._getValidSelectedObjectsIds(); var topicsIds = validSelectedObjects.nodes; if (topicsIds.length > 0) { diff --git a/mindplot/src/main/javascript/header.js b/mindplot/src/main/javascript/header.js index 81710eeb..28cb8e70 100644 --- a/mindplot/src/main/javascript/header.js +++ b/mindplot/src/main/javascript/header.js @@ -25,4 +25,5 @@ var mindplot = {}; mindplot.util = {}; mindplot.commands = {}; -mindplot.layout = {}; \ No newline at end of file +mindplot.layout = {}; +mindplot.widget = {}; \ No newline at end of file diff --git a/mindplot/src/main/javascript/widget/FontFamilyPanel.js b/mindplot/src/main/javascript/widget/FontFamilyPanel.js new file mode 100644 index 00000000..9d5f5421 --- /dev/null +++ b/mindplot/src/main/javascript/widget/FontFamilyPanel.js @@ -0,0 +1,37 @@ +/* + * 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.FontFamilyPanel = new Class({ + Extends : mindplot.widget.ToolbarPanel, + initialize : function(buttonId, model) { + this.parent(buttonId, model); + }, + + buildPanel: function() { + + var content = new Element("div", {'class':'toolbarPanel','id':'fontFamilyPanel'}); + content.innerHTML = '' + + '' + + '
Arial
' + + '
Tahoma
' + + '
Verdana
'; + + return content; + + } +}); \ No newline at end of file diff --git a/mindplot/src/main/javascript/widget/FontSizePanel.js b/mindplot/src/main/javascript/widget/FontSizePanel.js new file mode 100644 index 00000000..34b30120 --- /dev/null +++ b/mindplot/src/main/javascript/widget/FontSizePanel.js @@ -0,0 +1,37 @@ +/* + * 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.FontSizePanel = new Class({ + Extends : mindplot.widget.ToolbarPanel, + initialize : function(buttonId, model) { + this.parent(buttonId, model); + }, + + buildPanel: function() { + + var content = new Element("div", {'class':'toolbarPanel','id':'fontSizePanel'}); + content.innerHTML = '' + + '
Small
' + + '
Normal
' + + '
Large
' + + '
Huge
'; + + return content; + + } +}); \ No newline at end of file diff --git a/mindplot/src/main/javascript/widget/IconPanel.js b/mindplot/src/main/javascript/widget/IconPanel.js new file mode 100644 index 00000000..24195717 --- /dev/null +++ b/mindplot/src/main/javascript/widget/IconPanel.js @@ -0,0 +1,141 @@ +/* + * 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.IconPanel = new Class({ + Implements:[Options,Events], + options:{ + width:253, + initialWidth:0, + height:200, + panel:null, + onStart:Class.empty, + state:'close' + }, + + initialize:function(buttonId, model) { + this._buttonId = buttonId; + this._model = model; + + this.options.content = this._build(); + this.init(); + + }, + + init:function() { + var panel = new Element('div'); + var buttonElem = $(this._buttonId); + + var coord = buttonElem.getCoordinates(); + var top = buttonElem.getTop() + coord.height + 2; + var left = buttonElem.getLeft(); + + panel.setStyles({ + width:this.options.initialWidth, + height:0,position:'absolute', + top:top, + left:left, + background:'#e5e5e5', + border:'1px solid #BBB4D6', + zIndex:20, + overflow:'hidden'} + ); + + this.options.panel = panel; + this.options.content.inject(panel); + + this.options.content.addEvent('click', function() { + this.hide(); + }.bind(this)); + + panel.setStyle('opacity', 0); + panel.inject($(document.body)); + this.registerOpenPanel(); + }, + + show:function() { + this.fireEvent("show"); + if (this.options.state == 'close') { + if (!$defined(this.options.panel)) { + this.init(); + } + + var panel = this.options.panel; + panel.setStyles({ + border: '1px solid #636163', + opacity:100, + height:this.options.height, + width:this.options.width + }); + this.fireEvent('onStart'); + this.registerClosePanel(); + this.options.state = 'open'; + + } + }, + + hide:function() { + if (this.options.state == 'open') { + // Magic, disappear effect ;) + this.options.panel.setStyles({border: '1px solid transparent', opacity:0}); + this.registerOpenPanel(); + this.options.state = 'close'; + } + }, + + registerOpenPanel:function() { + $(this._buttonId).removeEvents('click'); + $(this._buttonId).addEvent('click', function() { + this.show(); + }.bind(this)); + }, + + registerClosePanel:function() { + $(this._buttonId).removeEvents('click'); + $(this._buttonId).addEvent('click', function() { + this.hide(); + }.bind(this)); + } , + + _build : function() { + var content = new Element('div').setStyles({width:253,height:200,padding:5}); + var count = 0; + for (var i = 0; i < mindplot.ImageIcon.prototype.ICON_FAMILIES.length; i = i + 1) { + var familyIcons = mindplot.ImageIcon.prototype.ICON_FAMILIES[i].icons; + for (var j = 0; j < familyIcons.length; j = j + 1) { + // Separate icons by line ... + var familyContent; + if ((count % 12) == 0) { + familyContent = new Element('div').inject(content); + } + + var iconId = familyIcons[j]; + var img = new Element('img').setStyles({width:16,height:16,padding:"0px 2px"}).inject(familyContent); + img.id = iconId; + img.src = mindplot.ImageIcon.prototype._getImageUrl(iconId); + + img.addEvent('click', function() { + this._model.setValue(img.id); + }.bind(this)); + + count = count + 1; + } + } + return content; + } + +}); \ No newline at end of file diff --git a/mindplot/src/main/javascript/widget/Menu.js b/mindplot/src/main/javascript/widget/Menu.js new file mode 100644 index 00000000..8205d1a6 --- /dev/null +++ b/mindplot/src/main/javascript/widget/Menu.js @@ -0,0 +1,150 @@ +/* + * 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.Menu = new Class({ + initialize : function(designer) { + this._designer = designer; + this._toolbarElems = []; + this._colorPickers = []; + + var fontFamilyModel = { + getValue: function() { + var nodes = designer.getSelectedNodes(); + var length = nodes.length; + if (length == 1) { + return nodes[0].getFontFamily(); + } + }, + + setValue: function(value) { + designer.setFont2SelectedNode(value); + + } + }; + var fontFamilyPanel = new mindplot.widget.FontFamilyPanel("fontFamily", fontFamilyModel); + fontFamilyPanel.addEvent('show',function(){this.clear()}.bind(this)); + this._toolbarElems.push(fontFamilyPanel); + + var fontSizeModel = { + getValue: function() { + var nodes = designer.getSelectedNodes(); + var length = nodes.length; + if (length == 1) { + return nodes[0].getFontSize(); + } + }, + setValue: function(value) { + designer.setFontSize2SelectedNode(value); + } + }; + var fontSizePanel = new mindplot.widget.FontSizePanel("fontSize", fontSizeModel); + fontSizePanel.addEvent('show',function(){this.clear()}.bind(this)); + this._toolbarElems.push(fontSizePanel); + + var topicShapeModel = { + getValue: function() { + var nodes = designer.getSelectedNodes(); + var length = nodes.length; + if (length == 1) { + return nodes[0].getShapeType(); + } + }, + setValue: function(value) { + designer.setShape2SelectedNode(value); + } + }; + var topicShapePanel = new mindplot.widget.TopicShapePanel("topicShape", topicShapeModel); + topicShapePanel.addEvent('show',function(){this.clear()}.bind(this)); + this._toolbarElems.push(topicShapePanel); + + // Create icon panel dialog ... + var topicIconModel = { + getValue: function() { + return null; + }, + setValue: function(value) { + designer.addIconType2SelectedNode(value); + } + }; + var iconPanel = new mindplot.widget.IconPanel('topicIcon', topicIconModel); + iconPanel.addEvent('show',function(){this.clear()}.bind(this)); + this._toolbarElems.push(iconPanel); + + + var topicColorPicker = new MooRainbow('topicColor', { + id: 'topicColor', + imgPath: '../images/', + startColor: [255, 255, 255], + onInit: function() { + this.clear(); + }.bind(this), + + onChange: function(color) { + designer.setBackColor2SelectedNode(color.hex); + }, + onComplete: function() { + this.clear(); + }.bind(this) + }); + this._colorPickers.push(topicColorPicker); + + var borderColorPicker = new MooRainbow('topicBorder', { + id: 'topicBorder', + imgPath: '../images/', + startColor: [255, 255, 255], + onInit: function() { + this.clear(); + }.bind(this), + onChange: function(color) { + designer.setBorderColor2SelectedNode(color.hex); + }, + onComplete: function() { + this.clear(); + }.bind(this) + + }); + this._colorPickers.push(borderColorPicker); + + var fontColorPicker = new MooRainbow('fontColor', { + id: 'fontColor', + imgPath: '../images/', + startColor: [255, 255, 255], + onInit: function() { + this.clear(); + }.bind(this), + onChange: function(color) { + designer.setFontColor2SelectedNode(color.hex); + }, + onComplete: function() { + this.clear(); + }.bind(this) + }); + this._colorPickers.push(fontColorPicker); + }, + + clear : function() { + this._toolbarElems.forEach(function(elem) { + elem.hide(); + }); + + this._colorPickers.forEach(function(elem) { + $clear(elem); + elem.hide(); + }); + } +}); \ No newline at end of file diff --git a/mindplot/src/main/javascript/widget/ToolbarPanel.js b/mindplot/src/main/javascript/widget/ToolbarPanel.js new file mode 100644 index 00000000..17df4b6d --- /dev/null +++ b/mindplot/src/main/javascript/widget/ToolbarPanel.js @@ -0,0 +1,89 @@ +/* + * 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.ToolbarPanel = new Class({ + Implements:[Events], + initialize : function(buttonId, model) { + $assert(buttonId, "buttonId can not be null"); + $assert(model, "model can not be null"); + this._model = model; + this._panelId = this.initPanel(buttonId); + }, + + buildPanel : function() { + throw "Method must be implemented"; + }.protect(), + + initPanel: function (buttonId) { + $assert(buttonId, "buttonId can not be null"); + + var panelElem = this.buildPanel(); + var buttonElem = $(buttonId); + + // Add panel content .. + panelElem.setStyle('display', 'none'); + panelElem.inject(buttonElem); + + // Register on toolbar elements ... + var menuElems = panelElem.getElements('div'); + menuElems.forEach(function(elem) { + elem.addEvent('click', function() { + var value = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id; + this._model.setValue(value); + this.hide(); + }.bind(this)); + }.bind(this)); + + // Font family event handling .... + buttonElem.addEvent('click', function() { + + // Is the panel being displayed ? + if (this.isVisible()) { + this.hide(); + } else { + this.show(); + } + + }.bind(this)); + return panelElem.id; + }, + + show : function() { + this.fireEvent('show'); + + var menuElems = $(this._panelId).getElements('div'); + var value = this._model.getValue(); + menuElems.forEach(function(elem) { + var elemValue = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id; + if (elemValue == value) + elem.className = "toolbarPanelLinkSelectedLink"; + else + elem.className = "toolbarPanelLink"; + }); + $(this._panelId).setStyle('display', 'block'); + + }, + + hide : function() { + $(this._panelId).setStyle('display', 'none'); + }, + + isVisible : function() { + return $(this._panelId).getStyle('display') == 'block'; + } +}); \ No newline at end of file diff --git a/mindplot/src/main/javascript/widget/TopicShapePanel.js b/mindplot/src/main/javascript/widget/TopicShapePanel.js new file mode 100644 index 00000000..c693d6e4 --- /dev/null +++ b/mindplot/src/main/javascript/widget/TopicShapePanel.js @@ -0,0 +1,37 @@ +/* + * 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.TopicShapePanel = new Class({ + Extends : mindplot.widget.ToolbarPanel, + initialize : function(buttonId, model) { + this.parent(buttonId, model); + }, + + buildPanel: function() { + + var content = new Element("div", {'class':'toolbarPanel','id':'topicShapePanel'}); + content.innerHTML = '' + + '
Rectangle
' + + '
Rounded Rectangle
' + + '
Line
' + + ''; + + return content; + + } +}); \ No newline at end of file diff --git a/wise-doc/src/main/webapp/css/editor.css b/wise-doc/src/main/webapp/css/editor.css index f7c25515..28ae4ea8 100644 --- a/wise-doc/src/main/webapp/css/editor.css +++ b/wise-doc/src/main/webapp/css/editor.css @@ -24,7 +24,7 @@ html { top: 30px; } -#waitingContainer,#errorContainer { +#waitingContainer, #errorContainer { position: relative; top: 80px; height: 120px; /*background: whitesmoke;*/ @@ -33,7 +33,7 @@ html { padding: 15px; width: 100%; border: 1px solid; - border-color:#a9a9a9; + border-color: #a9a9a9; } @@ -62,7 +62,7 @@ html { vertical-align: text-bottom; height: 30px; float: right; - padding-left:120px; + padding-left: 120px; } #waitingContainer .loadingIcon { @@ -157,6 +157,11 @@ div#toolbar .button { margin: 0 2px 2px 2px; cursor: pointer; text-align: center; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -o-user-select: none; + user-select: none; } div#toolbar .comboButton { @@ -189,7 +194,7 @@ div#toolbar .toolbarLabel { top: 55%; text-align: center; width: 34px; - height: 36px; + height: 10px; font-size: 10px; } @@ -249,15 +254,15 @@ div#redoEdition { #export { background: url(../images/file_export.png) no-repeat center top; - position:relative; + position: relative; } #exportAnchor { - position:absolute; - width:100%; - height:100%; - top:0; - left:0; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; } div#zoomIn { @@ -379,7 +384,13 @@ div#fontColor { display: none; position: absolute; z-index: 4; - top: 71px; + top: 53px; + text-align: left; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -o-user-select: none; + user-select: none; } div.toolbarPanelLink { @@ -721,21 +732,21 @@ div#small_error_icon { } div#toolbar .topicRelation { - width:56px; + width: 56px; background: url(../images/topic_relationship.png) no-repeat center top; z-index: 4; } div#toolbar .topicRelation:hover { - width:56px; + width: 56px; background: url(../images/topic_relationship.png) no-repeat center top; z-index: 4; } -div#toolbar .relationshiplabel{ - width:56px; +div#toolbar .relationshiplabel { + width: 56px; } .nicEdit-main { - outline:none; + outline: none; } \ No newline at end of file diff --git a/wise-doc/src/main/webapp/html/editor.html b/wise-doc/src/main/webapp/html/editor.html index ee040a3d..0a180e30 100644 --- a/wise-doc/src/main/webapp/html/editor.html +++ b/wise-doc/src/main/webapp/html/editor.html @@ -14,7 +14,7 @@ - + @@ -22,7 +22,6 @@ - @@ -113,30 +112,6 @@
-
- - - - -
- -
- - - - -
- -
- - - - -
-
diff --git a/wise-doc/src/main/webapp/js/editor.js b/wise-doc/src/main/webapp/js/editor.js index 97d668f0..59807818 100644 --- a/wise-doc/src/main/webapp/js/editor.js +++ b/wise-doc/src/main/webapp/js/editor.js @@ -177,14 +177,11 @@ function afterMindpotLibraryLoading() { }); } - var iconChooser = buildIconChooser(); - iconPanel = new IconPanel({button:$('topicIcon'), onStart:cleanScreenEvent, content:iconChooser}); - - // Register Events ... - $(document).addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer)); - $("ffoxWorkarroundInput").addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer)); - + // Register Key Events ... + $(document).addEvent('keydown', designer.keyEventHandler.bind(designer)); + $("ffoxWorkarroundInput").addEvent('keydown', designer.keyEventHandler.bind(designer)); + // Register toolbar events ... $('zoomIn').addEvent('click', function(event) { designer.zoomIn(); }); @@ -224,38 +221,6 @@ function afterMindpotLibraryLoading() { designer.deleteCurrentNode(); }); - var context = this; - var colorPicker1 = new MooRainbow('topicColor', { - id: 'topicColor', - imgPath: '../images/', - startColor: [255, 255, 255], - onInit: function(color) { - cleanScreenEvent.bind(context).attempt(); - setCurrentColorPicker.attempt(colorPicker1, context); - }, - onChange: function(color) { - designer.setBackColor2SelectedNode(color.hex); - }, - onComplete: function(color) { - removeCurrentColorPicker.attempt(colorPicker1, context); - } - }); - var colorPicker2 = new MooRainbow('topicBorder', { - id: 'topicBorder', - imgPath: '../images/', - startColor: [255, 255, 255], - onInit: function(color) { - cleanScreenEvent.bind(context).attempt(); - setCurrentColorPicker.attempt(colorPicker2, context); - }, - onChange: function(color) { - designer.setBorderColor2SelectedNode(color.hex); - }, - onComplete: function(color) { - removeCurrentColorPicker.attempt(colorPicker2, context); - } - }); - $('topicLink').addEvent('click', function() { designer.addLink2SelectedNode(); @@ -278,35 +243,19 @@ function afterMindpotLibraryLoading() { designer.setStyle2SelectedNode(); }); - var colorPicker3 = new MooRainbow('fontColor', { - id: 'fontColor', - imgPath: '../images/', - startColor: [255, 255, 255], - onInit: function(color) { - cleanScreenEvent.bind(context).attempt(); - setCurrentColorPicker.attempt(colorPicker3, context); - }, - onChange: function(color) { - designer.setFontColor2SelectedNode(color.hex); - }, - onComplete: function(color) { - removeCurrentColorPicker.attempt(colorPicker3, context); - } - }); - // To prevent the user from leaving the page with changes ... window.onbeforeunload = function () { if (designer.needsSave()) { designer.save(null, false) } }; + var menu = new mindplot.widget.Menu(designer); - // Build panels ... - fontFamilyPanel(); - shapeTypePanel(); - fontSizePanel(); + // If a node has focus, focus can be move to another node using the keys. + designer._cleanScreen = function(){menu.clear()}; - // If not problem has arisen, close the dialog ... + + // If not problem has arisen, close the dialog ... var closeDialog = function() { if (!window.hasUnexpectedErrors) { @@ -315,43 +264,6 @@ function afterMindpotLibraryLoading() { }.delay(500); } -function buildIconChooser() { - var content = new Element('div').setStyles({width:253,height:200,padding:5}); - var count = 0; - for (var i = 0; i < mindplot.ImageIcon.prototype.ICON_FAMILIES.length; i = i + 1) { - var familyIcons = mindplot.ImageIcon.prototype.ICON_FAMILIES[i].icons; - for (var j = 0; j < familyIcons.length; j = j + 1) { - // Separate icons by line ... - var familyContent; - if ((count % 12) == 0) { - familyContent = new Element('div').inject(content); - } - - - var iconId = familyIcons[j]; - var img = new Element('img').setStyles({width:16,height:16,padding:"0px 2px"}).inject(familyContent); - img.id = iconId; - img.src = mindplot.ImageIcon.prototype._getImageUrl(iconId); - img.addEvent('click', function(event, id) { - designer.addImage2SelectedNode(this.id); - }.bindWithEvent(img)); - count = count + 1; - } - - } - - return content; -} - - -function setCurrentColorPicker(colorPicker) { - this.currentColorPicker = colorPicker; -} - -function removeCurrentColorPicker(colorPicker) { - $clear(this.currentColorPicker); -} - function buildMindmapDesigner() { // Initialize message logger ... @@ -373,132 +285,6 @@ function buildMindmapDesigner() { designer = new mindplot.MindmapDesigner(editorProperties, container); designer.loadFromXML(mapId, mapXml); - - // If a node has focus, focus can be move to another node using the keys. - designer._cleanScreen = cleanScreenEvent.bind(this); -} - -function createColorPalette(container, onSelectFunction, event) { - cleanScreenEvent(); - _colorPalette = new core.ColorPicker(); - _colorPalette.onSelect = function(color) { - onSelectFunction.call(this, color); - cleanScreenEvent(); - }; - - // dojo.event.kwConnect({srcObj: this._colorPalette,srcFunc:"onColorSelect",targetObj:this._colorPalette, targetFunc:"onSelect", once:true}); - var mouseCoords = core.Utils.getMousePosition(event); - var colorPaletteElement = $("colorPalette"); - colorPaletteElement.setStyle('left', (mouseCoords.x - 80) + "px"); - colorPaletteElement.setStyle('display', "block"); -}; - -function cleanScreenEvent() { - if (this.currentColorPicker) { - this.currentColorPicker.hide(); - } - $("fontFamilyPanel").setStyle('display', "none"); - $("fontSizePanel").setStyle('display', "none"); - $("topicShapePanel").setStyle('display', "none"); - iconPanel.close(); -} - -function fontFamilyPanel() { - var supportedFonts = ['times','arial','tahoma','verdana']; - var updateFunction = function(value) { - value = value.charAt(0).toUpperCase() + value.substring(1, value.length); - designer.setFont2SelectedNode(value); - }; - - var onFocusValue = function(selectedNode) { - return selectedNode.getFontFamily(); - }; - - buildPanel('fontFamily', 'fontFamilyPanel', supportedFonts, updateFunction, onFocusValue); -} - -function shapeTypePanel() { - var shapeTypePanel = ['rectagle','rounded_rectagle','line','elipse']; - var updateFunction = function(value) { - designer.setShape2SelectedNode(value.replace('_', ' ')); - }; - - var onFocusValue = function(selectedNode) { - - return selectedNode.getShapeType().replace(' ', '_'); - }; - - buildPanel('topicShape', 'topicShapePanel', shapeTypePanel, updateFunction, onFocusValue); -} - -function fontSizePanel() { - var shapeTypePanel = ['small','normal','large','huge']; - var map = {small:'6',normal:'8',large:'10',huge:'15'}; - var updateFunction = function(key) { - var value = map[key]; - designer.setFontSize2SelectedNode(value); - }; - - var onFocusValue = function(selectedNode) { - var fontSize = selectedNode.getFontSize(); - var result = ""; - if (fontSize <= 6) { - result = 'small'; - } else if (fontSize <= 8) { - result = 'normal'; - } else if (fontSize <= 10) { - result = 'large'; - } else if (fontSize >= 15) { - result = 'huge'; - } - return result; - }; - buildPanel('fontSize', 'fontSizePanel', shapeTypePanel, updateFunction, onFocusValue); -} - -function buildPanel(buttonElemId, elemLinksContainer, elemLinkIds, updateFunction, onFocusValue) { - // Font family event handling .... - $(buttonElemId).addEvent('click', function(event) { - var container = $(elemLinksContainer); - var isRendered = container.getStyle('display') == 'block'; - cleanScreenEvent(); - - // Restore default css. - for (var i = 0; i < elemLinkIds.length; i++) { - var elementId = elemLinkIds[i]; - $(elementId).className = 'toolbarPanelLink'; - } - - // Select current element ... - var nodes = designer.getSelectedNodes(); - var lenght = nodes.length; - if (lenght == 1) { - var selectedNode = nodes[0]; - var selectedElementId = onFocusValue(selectedNode); - selectedElementId = selectedElementId.toLowerCase(); - var selectedElement = $(selectedElementId); - selectedElement.className = 'toolbarPanelLinkSelectedLink'; - } - - container.setStyle('display', 'block'); - - var mouseCoords = core.Utils.getMousePosition(event); - if (!isRendered) { - container.setStyle('left', (mouseCoords.x - 10) + "px"); - } - }); - - var fontOnClick = function(event) { - var value = this.getAttribute('id'); - updateFunction(value); - cleanScreenEvent(); - }; - - // Register event listeners on elements ... - for (var i = 0; i < elemLinkIds.length; i++) { - var elementId = elemLinkIds[i]; - $(elementId).addEvent('click', fontOnClick.bind($(elementId))); - } } //######################### Libraries Loading ################################## diff --git a/wise-webapp/src/main/webapp/js/IconPanel.js b/wise-webapp/src/main/webapp/js/IconPanel.js deleted file mode 100644 index f585393c..00000000 --- a/wise-webapp/src/main/webapp/js/IconPanel.js +++ /dev/null @@ -1,128 +0,0 @@ -/* - * 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. - */ - -var IconPanel = new Class({ - Implements:[Options,Events], - options:{ - width:253, - initialWidth:0, - height:200, - content:null, - panel:null, - button:null, - onStart:Class.empty, - state:'close' - }, - - initialize:function(options) { - this.setOptions(options); - if ($defined(this.options.button)) { - this.init(); - } - }, - - setButton:function(button) { - this.options.button = button; - }, - - init:function() { - var panel = new Element('div'); - var coord = this.options.button.getCoordinates(); - var top = this.options.button.getTop() + coord.height + 2; - var left = this.options.button.getLeft(); - panel.setStyles({ - width:this.options.initialWidth, - height:0,position:'absolute', - top:top, - left:left, - background:'#e5e5e5', - border:'1px solid #BBB4D6', - zIndex:20, - overflow:'hidden'} - ); - - this.options.panel = panel; - this.options.content.inject(panel); - - this.options.content.addEvent('click', function(event) { - this.close(); - }.bind(this)); - - panel.setStyle('opacity', 0); - panel.inject($(document.body)); - this.registerOpenPanel(); - }, - - open:function() { - if (this.options.state == 'close') { - if (!$defined(this.options.panel)) { - this.init(); - } - - var panel = this.options.panel; - panel.setStyles({border: '1px solid #636163', opacity:100}); - this.fireEvent('onStart'); - - // Resize dialog to show a cool effect ;) - panel.set('morph', {duration: 'long', transition: 'bounce:out'}); - panel.morph({ - height:[0,this.options.height], - width:[this.options.initialWidth, this.options.width] - }); - panel.addEvent('complete', function() { - this.registerClosePanel(); - }.bind(this)); - - this.options.state = 'open'; - - } - }, - - close:function() { - if (this.options.state == 'open') { - - // Magic, disappear effect ;) - var panel = this.options.panel; - panel.set('morph', {duration: 'long', transition: 'bounce:in'}); - panel.morph({ - height:[this.options.height,0], - width:[this.options.width, this.options.initialWidth] - }); - panel.addEvent('complete', function() { - this.options.panel.setStyles({border: '1px solid transparent', opacity:0}); - this.registerOpenPanel(); - }.bind(this)); - - this.options.state = 'close'; - } - }, - - registerOpenPanel:function() { - this.options.button.removeEvents('click'); - this.options.button.addEvent('click', function(event) { - this.open(); - }.bindWithEvent(this)); - }, - - registerClosePanel:function() { - this.options.button.removeEvents('click'); - this.options.button.addEvent('click', function(event) { - this.close(); - }.bindWithEvent(this)); - } -}); \ No newline at end of file diff --git a/wise-webapp/src/main/webapp/js/editor.js b/wise-webapp/src/main/webapp/js/editor.js index 2a957ac9..40bac79b 100644 --- a/wise-webapp/src/main/webapp/js/editor.js +++ b/wise-webapp/src/main/webapp/js/editor.js @@ -184,8 +184,12 @@ function afterMindpotLibraryLoading() { }); } - var iconChooser = buildIconChooser(); - iconPanel = new IconPanel({button:$('topicIcon'), onStart:cleanScreenEvent, content:iconChooser}); + // Crate icon panel dialog ... + iconPanel = new mindplot.widget.IconPanel({button:$('topicIcon'), onStart:cleanScreenEvent}); + iconPanel.addEvent("selected", function(event) { + designer.addIconType2SelectedNode(event.iconType); + }); + // Register Events ... $(document).addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer)); $("ffoxWorkarroundInput").addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer)); @@ -399,9 +403,9 @@ function afterMindpotLibraryLoading() { } } // Build panels ... - fontFamilyPanel(); - shapeTypePanel(); - fontSizePanel(); + var fontPanel = new mindplot.widget.FontFamilyPanel(); +// shapeTypePanel(); +// fontSizePanel(); // If not problem has occured, I close the dialod ... var closeDialog = function() { @@ -412,36 +416,6 @@ function afterMindpotLibraryLoading() { }.delay(500); } -function buildIconChooser() { - var content = new Element('div').setStyles({width:253,height:200,padding:5}); - var count = 0; - for (var i = 0; i < mindplot.ImageIcon.prototype.ICON_FAMILIES.length; i = i + 1) { - var familyIcons = mindplot.ImageIcon.prototype.ICON_FAMILIES[i].icons; - for (var j = 0; j < familyIcons.length; j = j + 1) { - // Separate icons by line ... - var familyContent; - if ((count % 12) == 0) { - familyContent = new Element('div').inject(content); - } - - - var iconId = familyIcons[j]; - var img = new Element('img').setStyles({width:16,height:16,padding:"0px 2px"}).inject(familyContent); - img.id = iconId; - img.src = mindplot.ImageIcon.prototype._getImageUrl(iconId); - img.addEvent('click', function(event, id) { - designer.addImage2SelectedNode(this.id); - }.bindWithEvent(img)); - count = count + 1; - } - - } - - return content; -} -; - - function setCurrentColorPicker(colorPicker) { this.currentColorPicker = colorPicker; } @@ -486,8 +460,7 @@ function buildMindmapDesigner() { }.delay(1000) } -} -; +}; function createColorPalette(container, onSelectFunction, event) { cleanScreenEvent(); @@ -515,20 +488,6 @@ function cleanScreenEvent() { iconPanel.close(); } -function fontFamilyPanel() { - var supportedFonts = ['times','arial','tahoma','verdana']; - var updateFunction = function(value) { - value = value.charAt(0).toUpperCase() + value.substring(1, value.length); - designer.setFont2SelectedNode(value); - }; - - var onFocusValue = function(selectedNode) { - return selectedNode.getFontFamily(); - }; - - buildPanel('fontFamily', 'fontFamilyPanel', supportedFonts, updateFunction, onFocusValue); -} - function shapeTypePanel() { var shapeTypePanel = ['rectagle','rounded_rectagle','line','elipse']; var updateFunction = function(value) {