Keep improving toolbar.

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

View File

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

View File

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

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();
}
});

View File

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

View File

@ -17,11 +17,25 @@
*/ */
mindplot.widget.Menu = new Class({ 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._designer = designer;
this._toolbarElems = []; 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 = { var fontFamilyModel = {
getValue: function() { getValue: function() {
var nodes = designer.getSelectedNodes(); var nodes = designer.getSelectedNodes();
@ -36,11 +50,7 @@ mindplot.widget.Menu = new Class({
} }
}; };
var fontFamilyPanel = new mindplot.widget.FontFamilyPanel("fontFamily", fontFamilyModel); this._toolbarElems.push(new mindplot.widget.FontFamilyPanel("fontFamily", fontFamilyModel));
fontFamilyPanel.addEvent('show', function() {
this.clear()
}.bind(this));
this._toolbarElems.push(fontFamilyPanel);
var fontSizeModel = { var fontSizeModel = {
getValue: function() { getValue: function() {
@ -54,11 +64,7 @@ mindplot.widget.Menu = new Class({
designer.setFontSize2SelectedNode(value); designer.setFontSize2SelectedNode(value);
} }
}; };
var fontSizePanel = new mindplot.widget.FontSizePanel("fontSize", fontSizeModel); this._toolbarElems.push(new mindplot.widget.FontSizePanel("fontSize", fontSizeModel));
fontSizePanel.addEvent('show', function() {
this.clear()
}.bind(this));
this._toolbarElems.push(fontSizePanel);
var topicShapeModel = { var topicShapeModel = {
getValue: function() { getValue: function() {
@ -72,11 +78,7 @@ mindplot.widget.Menu = new Class({
designer.setShape2SelectedNode(value); designer.setShape2SelectedNode(value);
} }
}; };
var topicShapePanel = new mindplot.widget.TopicShapePanel("topicShape", topicShapeModel); this._toolbarElems.push(new mindplot.widget.TopicShapePanel("topicShape", topicShapeModel));
topicShapePanel.addEvent('show', function() {
this.clear()
}.bind(this));
this._toolbarElems.push(topicShapePanel);
// Create icon panel dialog ... // Create icon panel dialog ...
var topicIconModel = { var topicIconModel = {
@ -87,63 +89,51 @@ mindplot.widget.Menu = new Class({
designer.addIconType2SelectedNode(value); designer.addIconType2SelectedNode(value);
} }
}; };
var iconPanel = new mindplot.widget.IconPanel('topicIcon', topicIconModel); this._toolbarElems.push(new mindplot.widget.IconPanel('topicIcon', topicIconModel));
iconPanel.addEvent('show', function() {
// 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() this.clear()
}.bind(this)); }.bind(this));
this._toolbarElems.push(iconPanel); }.bind(this));
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);
// Register Events ... // Register Events ...
@ -163,21 +153,6 @@ mindplot.widget.Menu = new Class({
designer.redo(); 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) { $('addTopic').addEvent('click', function(event) {
designer.createSiblingForSelectedNode(); designer.createSiblingForSelectedNode();
}); });
@ -209,6 +184,21 @@ mindplot.widget.Menu = new Class({
designer.setStyle2SelectedNode(); 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) { this._toolbarElems.forEach(function(elem) {
elem.hide(); elem.hide();
}); });
this._colorPickers.forEach(function(elem) {
$clear(elem);
elem.hide();
});
} }
}); });

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';
}
});

View File

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

View File

@ -5,7 +5,7 @@
<!--[if lt IE 9]> <!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta http-equiv="X-UA-Compatible" content="chrome=1">
<![endif]--> <![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 --> <!-- Internet Explorer 8 Hack -->
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<title>WiseMapping - Editor </title> <title>WiseMapping - Editor </title>

View File

@ -187,7 +187,7 @@ function afterMindpotLibraryLoading() {
designer.save(null, false) 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. // If a node has focus, focus can be move to another node using the keys.
designer._cleanScreen = function() { designer._cleanScreen = function() {