vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-11-22 14:17:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Keep improving toolbar.

Browse Source
This commit is contained in:
Paulo Veiga 2011-08-08 20:48:59 -03:00
parent f76e068f7d
commit 234a54b166
9 changed files with 205 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
mindplot/pom.xml
View File

@ -172,7 +172,10 @@
<filelist dir="${basedir}/src/main/javascript/"
files="collaboration/frameworks/brix/BrixFramework.js"/>
<filelist dir="${basedir}/src/main/javascript/"
files="widget/ToolbarItem.js"/>
<filelist dir="${basedir}/src/main/javascript/"
files="widget/ColorPickerPanel.js"/>
<filelist dir="${basedir}/src/main/javascript/"
files="widget/IconPanel.js"/>
<filelist dir="${basedir}/src/main/javascript/"
@ -297,11 +300,14 @@
<include>layout/LayoutManagerFactory-min.js</include>
<include>collaboration/CollaborationManager-min.js</include>
<include>collaboration/frameworks/AbstractCollaborativeFramework-min.js</include>
<include>collaboration/frameworks/AbstractCollaborativeModelFactory-min.js</include>
<include>collaboration/frameworks/AbstractCollaborativeFramework-min.js
</include>
<include>collaboration/frameworks/AbstractCollaborativeModelFactory-min.js
</include>
<include>collaboration/frameworks/brix/model/NodeModel-min.js</include>
<include>collaboration/frameworks/brix/model/Mindmap-min.js</include>
<include>collaboration/frameworks/brix/BrixCollaborativeModelFactory-min.js</include>
<include>collaboration/frameworks/brix/BrixCollaborativeModelFactory-min.js
</include>
<include>collaboration/frameworks/brix/BrixFramework-min.js</include>
<include>footer-min.js</include>

2
mindplot/src/main/javascript/IconGroup.js
View File

@ -169,7 +169,7 @@ mindplot.IconGroup = new Class({
this.options.nativeElem.addEventListener('dblclick', function(event) {
// Avoid node creation ...
if ($defined(event.stopPropagation)) {
event.stopPropagation(true);
event.stopPropagation();
} else {
event.cancelBubble = true;
}

49
mindplot/src/main/javascript/widget/ColorPickerPanel.js Normal file
View File

@ -0,0 +1,49 @@
/*
* 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.ColorPicker = new Class({
Extends: mindplot.widget.ToolbarItem,
initialize : function(buttonId, model) {
this.parent(buttonId, model);
this._mooRainbow = new MooRainbow(buttonId, {
id: buttonId,
imgPath: '../images/',
startColor: [255, 255, 255],
onInit: function() {
this.fireEvent("show");
}.bind(this),
onChange: function(color) {
this.getModel().setValue(color.hex);
},
onComplete: function() {
this.hide();
}.bind(this)
});
},
show : function() {
this.parent();
this._mooRainbow.show();
},
hide : function() {
this.parent();
this._mooRainbow.hide();
}
});

26
mindplot/src/main/javascript/widget/IconPanel.js
View File

@ -17,7 +17,8 @@
*/
mindplot.widget.IconPanel = new Class({
Implements:[Options,Events],
Extends:mindplot.widget.ToolbarItem,
Implements:[Options],
options:{
width:253,
initialWidth:0,
@ -28,17 +29,14 @@ mindplot.widget.IconPanel = new Class({
},
initialize:function(buttonId, model) {
this._buttonId = buttonId;
this._model = model;
this.parent(buttonId, model);
this.options.content = this._build();
this.init();
},
init:function() {
var panel = new Element('div');
var buttonElem = $(this._buttonId);
var buttonElem = this.getButtonElem();
var coord = buttonElem.getCoordinates();
var top = buttonElem.getTop() + coord.height + 2;
@ -68,9 +66,7 @@ mindplot.widget.IconPanel = new Class({
},
show:function() {
this.fireEvent("show");
$(this._buttonId).className = 'buttonActive';
this.parent();
if (this.options.state == 'close') {
if (!$defined(this.options.panel)) {
this.init();
@ -90,25 +86,25 @@ mindplot.widget.IconPanel = new Class({
},
hide:function() {
this.parent();
if (this.options.state == 'open') {
// Magic, disappear effect ;)
this.options.panel.setStyles({border: '1px solid transparent', opacity:0});
this.registerOpenPanel();
this.options.state = 'close';
$(this._buttonId).className = 'button';
}
},
registerOpenPanel:function() {
$(this._buttonId).removeEvents('click');
$(this._buttonId).addEvent('click', function() {
this.getButtonElem().removeEvents('click');
this.getButtonElem().addEvent('click', function() {
this.show();
}.bind(this));
},
registerClosePanel:function() {
$(this._buttonId).removeEvents('click');
$(this._buttonId).addEvent('click', function() {
this.getButtonElem().removeEvents('click');
this.getButtonElem().addEvent('click', function() {
this.hide();
}.bind(this));
} ,
@ -131,7 +127,7 @@ mindplot.widget.IconPanel = new Class({
img.src = mindplot.ImageIcon.prototype._getImageUrl(iconId);
img.addEvent('click', function() {
this._model.setValue(img.id);
this.getModel().setValue(img.id);
}.bind(this));
count = count + 1;

169
mindplot/src/main/javascript/widget/Menu.js
View File

@ -17,11 +17,25 @@
*/
mindplot.widget.Menu = new Class({
initialize : function(designer) {
initialize : function(designer, containerId) {
$assert(designer, "designer can not be null");
$assert(containerId, "containerId can not be null");
// Init variables ...
this._designer = designer;
this._toolbarElems = [];
this._colorPickers = [];
this._containerId = containerId;
// Stop event propagation ...
$(this._containerId).addEvent('click', function(event) {
event.stopPropagation();
});
$(this._containerId).addEvent('dblclick', function(event) {
event.stopPropagation();
});
// Create panels ...
var fontFamilyModel = {
getValue: function() {
var nodes = designer.getSelectedNodes();
@ -36,11 +50,7 @@ mindplot.widget.Menu = new Class({
}
};
var fontFamilyPanel = new mindplot.widget.FontFamilyPanel("fontFamily", fontFamilyModel);
fontFamilyPanel.addEvent('show', function() {
this.clear()
}.bind(this));
this._toolbarElems.push(fontFamilyPanel);
this._toolbarElems.push(new mindplot.widget.FontFamilyPanel("fontFamily", fontFamilyModel));
var fontSizeModel = {
getValue: function() {
@ -54,11 +64,7 @@ mindplot.widget.Menu = new Class({
designer.setFontSize2SelectedNode(value);
}
};
var fontSizePanel = new mindplot.widget.FontSizePanel("fontSize", fontSizeModel);
fontSizePanel.addEvent('show', function() {
this.clear()
}.bind(this));
this._toolbarElems.push(fontSizePanel);
this._toolbarElems.push(new mindplot.widget.FontSizePanel("fontSize", fontSizeModel));
var topicShapeModel = {
getValue: function() {
@ -72,11 +78,7 @@ mindplot.widget.Menu = new Class({
designer.setShape2SelectedNode(value);
}
};
var topicShapePanel = new mindplot.widget.TopicShapePanel("topicShape", topicShapeModel);
topicShapePanel.addEvent('show', function() {
this.clear()
}.bind(this));
this._toolbarElems.push(topicShapePanel);
this._toolbarElems.push(new mindplot.widget.TopicShapePanel("topicShape", topicShapeModel));
// Create icon panel dialog ...
var topicIconModel = {
@ -87,63 +89,51 @@ mindplot.widget.Menu = new Class({
designer.addIconType2SelectedNode(value);
}
};
var iconPanel = new mindplot.widget.IconPanel('topicIcon', topicIconModel);
iconPanel.addEvent('show', function() {
this._toolbarElems.push(new mindplot.widget.IconPanel('topicIcon', topicIconModel));
// Topic color item ...
var topicColorModel =
{
getValue : function() {
return null;
},
setValue : function (hex) {
designer.setBackColor2SelectedNode(hex);
}
};
this._toolbarElems.push(new mindplot.widget.ColorPicker('topicColor', topicColorModel));
// Border color item ...
var borderColorModel =
{
getValue : function() {
return null;
},
setValue : function (hex) {
designer.setBorderColor2SelectedNode(hex);
}
};
this._toolbarElems.push(new mindplot.widget.ColorPicker('topicBorder', borderColorModel));
// Font color item ...
var fontColorModel =
{
getValue : function() {
return null;
},
setValue : function (hex) {
designer.setFontColor2SelectedNode(hex);
}
};
var fontColorPicker = new mindplot.widget.ColorPicker('fontColor', fontColorModel);
this._toolbarElems.push(fontColorPicker);
// Register on close events ...
this._toolbarElems.forEach(function(elem) {
elem.addEvent('show', function() {
this.clear()
}.bind(this));
this._toolbarElems.push(iconPanel);
var colorPickerOptions = {
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)
};
var topicColorPicker = new MooRainbow('topicColor', colorPickerOptions);
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);
}.bind(this));
// Register Events ...
@ -163,21 +153,6 @@ mindplot.widget.Menu = new Class({
designer.redo();
});
designer.addEventListener("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)");
}
});
$('addTopic').addEvent('click', function(event) {
designer.createSiblingForSelectedNode();
});
@ -209,6 +184,21 @@ mindplot.widget.Menu = new Class({
designer.setStyle2SelectedNode();
});
designer.addEventListener("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)");
}
});
},
@ -216,10 +206,5 @@ mindplot.widget.Menu = new Class({
this._toolbarElems.forEach(function(elem) {
elem.hide();
});
this._colorPickers.forEach(function(elem) {
$clear(elem);
elem.hide();
});
}
});

49
mindplot/src/main/javascript/widget/ToolbarItem.js Normal file
View File

@ -0,0 +1,49 @@
/*
* 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.ToolbarItem = 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._buttonId = buttonId;
},
getModel : function() {
return this._model;
},
getButtonElem : function() {
var elem = $(this._buttonId);
$assert(elem,"Could not find element for " + this._buttonId);
return elem;
}.protect(),
show : function() {
this.fireEvent('show');
// Mark the button as active...
this.getButtonElem().className = 'buttonActive';
},
hide : function() {
this.fireEvent('hide');
this.getButtonElem().className = 'button';
}
});

28
mindplot/src/main/javascript/widget/ToolbarPanel.js
View File

@ -17,24 +17,19 @@
*/
mindplot.widget.ToolbarPanel = new Class({
Implements:[Events],
Extends: mindplot.widget.ToolbarItem,
initialize : function(buttonId, model) {
$assert(buttonId, "buttonId can not be null");
$assert(model, "model can not be null");
this._model = model;
this._buttonId = buttonId;
this._panelId = this.initPanel(buttonId);
this.parent(buttonId, model);
this._panelId = this.initPanel();
},
buildPanel : function() {
throw "Method must be implemented";
}.protect(),
initPanel: function (buttonId) {
$assert(buttonId, "buttonId can not be null");
initPanel: function () {
var panelElem = this.buildPanel();
var buttonElem = $(buttonId);
var buttonElem = this.getButtonElem();
// Add panel content ..
panelElem.setStyle('display', 'none');
@ -45,14 +40,13 @@ mindplot.widget.ToolbarPanel = new Class({
menuElems.forEach(function(elem) {
elem.addEvent('click', function(event) {
var value = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
this._model.setValue(value);
this.getModel().setValue(value);
this.hide();
event.stopPropagation();
}.bind(this));
}.bind(this));
// Font family event handling ....
buttonElem.addEvent('click', function() {
buttonElem.addEvent('click', function(event) {
// Is the panel being displayed ?
if (this.isVisible()) {
@ -66,10 +60,10 @@ mindplot.widget.ToolbarPanel = new Class({
},
show : function() {
this.fireEvent('show');
this.parent();
var menuElems = $(this._panelId).getElements('div');
var value = this._model.getValue();
var value = this.getModel().getValue();
menuElems.forEach(function(elem) {
var elemValue = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
if (elemValue == value)
@ -79,13 +73,11 @@ mindplot.widget.ToolbarPanel = new Class({
});
$(this._panelId).setStyle('display', 'block');
// Mark the button as active...
$(this._buttonId).className = 'buttonActive';
},
hide : function() {
this.parent();
$(this._panelId).setStyle('display', 'none');
$(this._buttonId).className = 'button';
},

2
wise-doc/src/main/webapp/html/editor.html
View File

@ -5,7 +5,7 @@
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<![endif]-->
<script type="text/javascript" src="http://docs.google.com/brix/static/api/js/jsapi.nocache.js"></script>
<!--<script type="text/javascript" src="http://docs.google.com/brix/static/api/js/jsapi.nocache.js"></script>-->
<!-- Internet Explorer 8 Hack -->
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<title>WiseMapping - Editor </title>

2
wise-doc/src/main/webapp/js/editor.js
View File

@ -187,7 +187,7 @@ function afterMindpotLibraryLoading() {
designer.save(null, false)
}
};
var menu = new mindplot.widget.Menu(designer);
var menu = new mindplot.widget.Menu(designer,'toolbar');
// If a node has focus, focus can be move to another node using the keys.
designer._cleanScreen = function() {