zhouxy108/wisemapping-open-source
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor menu.

Browse Source
This commit is contained in:
Paulo Veiga
2011-08-07 18:59:20 -03:00
parent d08505371f
commit 2db8cd5c96
14 changed files with 553 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
wise-doc/src/main/webapp/css/editor.css
View File

@@ -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;
}

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

@@ -14,7 +14,7 @@
<!--<script type='text/javascript' src='../js/wiseLibrary.js'></script>-->
<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>-->
<script type='text/javascript' src='../js/mootools-core-1.3.2-full-compat.js'></script>
<script type='text/javascript' src='../js/mootools-more-1.3.2.1-yui.js'></script>
@@ -22,7 +22,6 @@
<script type='text/javascript' src='../../../../../wise-webapp/src/main/webapp/js/windoo.js'></script>
<!--<script type='text/javascript' src='../js/wiseEditorLibrary.js'></script>-->
<script type='text/javascript' src='../../../../../wise-webapp/src/main/webapp/js/IconPanel.js'></script>
<script type='text/javascript' src='../../../../../wise-webapp/src/main/webapp/js/mooRainbow.js'></script>
<script type='text/javascript' src='../../../../../core-js/target/classes/core.js'></script>
@@ -113,30 +112,6 @@
<div id="paletteHeader"></div>
</div>
<div id="fontFamilyPanel" class="toolbarPanel">
<div id="times" class="toolbarPanelLink" style="font-family:times;">Times</div>
<div id="arial" class="toolbarPanelLink" style="font-family:arial;">Arial</div>
<div id="tahoma" class="toolbarPanelLink" style="font-family:tahoma;">Tahoma</div>
<div id="verdana" class="toolbarPanelLink" style="font-family:verdana;">Verdana</div>
</div>
<div id="fontSizePanel" class="toolbarPanel">
<div id="small" class="toolbarPanelLink" style="font-size:8px">Small</div>
<div id="normal" class="toolbarPanelLink" style="font-size:12px">Normal</div>
<div id="large" class="toolbarPanelLink" style="font-size:15px">Large</div>
<div id="huge" class="toolbarPanelLink" style="font-size:24px">Huge</div>
</div>
<div id="topicShapePanel" class="toolbarPanel">
<div id="rectagle" class="toolbarPanelLink"><img src="../images/shape-rectangle.png" alt="Rectangle" width="40"
height="25"></div>
<div id="rounded_rectagle" class="toolbarPanelLink"><img src="../images/shape-rectangle-rounded.png"
alt="Rounded Rectangle" width="40" height="25"></div>
<div id="line" class="toolbarPanelLink"><img src="../images/shape-line.png" alt="Line" width="40" height="7"></div>
<div id="elipse" class="toolbarPanelLink"><img src="../images/shape-elipse.png" alt="Elipse" width="40" height="25">
</div>
</div>
<div id="actionsContainer">
</div>

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

@@ -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 ##################################