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

Fix embedded view.

Browse Source
This commit is contained in:
Paulo Veiga
2011-10-16 21:42:02 -03:00
parent cb6302bf50
commit 0133f127b8
26 changed files with 713 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
wise-doc/src/main/webapp/c/export.bin Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 658 B

100
wise-doc/src/main/webapp/c/export.htm Normal file
View File

@@ -0,0 +1,100 @@
<div class="modalDialog">
<!-- Header can be customized -->
<h1>
Export
'sss'</h1>
<div>
<form method="post" id="exportForm" name="exportForm" action="export.bin" style="height:100%;">
<input type="hidden" name="action" value="export">
<input type="hidden" name="mapId" value="3">
<input type="hidden" name="mapSvg" value="">
<table>
<tbody>
<tr>
<td>
<input type="radio" id="svg" name="exportFormat" value="SVG">
<b>
Scalable Vector Graphics (SVG)
</b>
<p>
Scalable Vector Graphics (SVG) is an XML markup language for describing two-dimensional
vector graphics. This format will enable you to print your maps without quality lost at any
resolution.
</p>
</td>
</tr>
<tr>
<td>
<input type="radio" name="exportFormat" value="PDF" id="pdf">
<b>
Portable Document Format (PDF)
</b>
<p>
Get your map as Portable Document Format(PDF) to share use in your presentations.
</p>
</td>
</tr>
<tr>
<td>
<input type="radio" id="freemind" name="exportFormat" value="FREEMIND" checked="checked">
<b>
Freemind (version 0.9.0)
</b>
<p>
FreeMind is a nice desktop mind mapping application that has the great benefit of being
free.
</p>
</td>
</tr>
<tr>
<td>
<input type="radio" name="exportFormat" id="img" value="IMG_EXPORT_FORMAT">
<b>
Image File
</b><select name="imgFormat" id="imgFormat" style="visibility:hidden;margin-left:5px;">
<option>PNG</option>
<option>JPEG</option>
</select>
<p>
Get a graphic representation of your map including all colors and shapes to reuse in
documents or for archiving
</p>
</td>
</tr>
<tr>
<td style="text-align:center;margin-top:10px;">
<input type="button" id="ok" value="Ok" class="btn-primary">
<input type="button" value="Cancel" class="btn-secondary" onclick="MOOdalBox.close();">
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<script type="text/javascript">
$('img').addEvent('click', function(event) {
$('imgFormat').setStyle('visibility', 'visible');
});
$('pdf').addEvent('click', function(event) {
$('imgFormat').setStyle('visibility', 'hidden');
});
$('svg').addEvent('click', function(event) {
$('imgFormat').setStyle('visibility', 'hidden');
});
$('ok').addEvent('click', function(event) {
$('exportForm').submit();
MooDialog.Request.active.close();
});
document.exportForm.mapSvg.value = $("workspaceContainer").innerHTML;
</script>

98
wise-doc/src/main/webapp/c/publish.htm Normal file
View File

@@ -0,0 +1,98 @@
<div class="modalDialog">
<!-- Header can be customized -->
<h1>
Publish
'ddd'
</h1>
<h2>
By publishing the map you make it visible to everyone on the Internet. Copy the code snippets below to integrate
it into your website or blog.
</h2>
<div>
<form method="post" id="publishForm" name="publishForm" action="publish.htm" style="height:100%;">
<input type="hidden" name="actionId" value="save">
<input type="hidden" name="mapId" value="1">
<table style="margin: 10px;">
<colgroup>
<col width="20%">
<col width="80%">
</colgroup>
<tbody>
<tr>
<td>
&nbsp;
</td>
<td>
<input type="checkbox" id="publicViewId" name="publicView" value="true">
Publish map to the Internet
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
<td>
<div id="disabledPanel"
style="position: absolute; background-color: white; opacity: 0.8; width: 600px; height: 155px; left: 10px; visibility: hidden; ">
</div>
</td>
</tr>
<tr>
<td class="formLabel">
URL:
</td>
<td style="padding: 5px;">
<input name="url" value="http://www.wisemapping.com/c/publicView.htm?mapId=1" style="width:400px" readonly="readonly">
</td>
</tr>
<tr>
<td class="formLabel">
Direct Link:
</td>
<td>
<textarea style="width:400px;height:30px;overflow:hidden;" cols="55" rows="3"
readonly="readonly"> &lt;a
href="http://www.wisemapping.com/c/publicView.htm?mapId=1"&gt;ddd&lt;/a&gt;</textarea>
</td>
</tr>
<tr>
<td class="formLabel">
&nbsp;
</td>
<td>
&nbsp;
</td>
</tr>
<tr>
<td class="formLabel" style="width:200px">
For inclusion in blogs and web pages
:
</td>
<td>
<textarea style="width:400px;height:70px;overflow:hidden;" cols="55" rows="5"
readonly="readonly"> &lt;iframe
style="border:0;width:600px;height:400px;border: 1px solid black"
src="http://www.wisemapping.com/c/embeddedView.htm?mapId=1&amp;zoom=1"&gt;
&lt;/iframe&gt;
</textarea>
<p>* Note: You can change embedded map size modifying 'height' and 'width' style properties. You
can also adjust the zoom factor modifying 'zoom' parameter from the URL.</p>
</td>
</tr>
<tr>
<td style="text-align:center;margin-top:30px;" colspan="2">
<input type="submit" id="ok" value="Ok" class="btn-secondary">
<input type="button" value="Cancel" class="btn-primary" id="cancelBtn">
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>

23
wise-doc/src/main/webapp/css/editor2.css
View File

@@ -704,7 +704,7 @@ div#small_error_icon {
/** */
/* Modal dialogs definitions */
.tagItModalDialog, .historyModalDialog, .shareItModalDialog {
.tagItModalDialog, .historyModalDialog, .shareItModalDialog, .exportModalDialog, .publishModalDialog {
position: fixed;
top: 50%;
left: 50%;
@@ -733,7 +733,11 @@ div#small_error_icon {
width: 500px;
}
.tagItModalDialog .title, .historyModalDialog .title, .shareItModalDialog .title {
.publishModalDialog {
width: 600px;
}
.tagItModalDialog .title, .historyModalDialog .title, .shareItModalDialog .title, .exportModalDialog .title, .publishModalDialog .title {
position: absolute;
top: 0;
left: 0;
@@ -758,6 +762,14 @@ div#small_error_icon {
height: 300px;
}
.exportItModalDialog .content {
height: 280px;
}
.publishModalDialog .content {
height: 330px;
}
.modalDialog h1 {
font-size: 14px;
}
@@ -767,4 +779,9 @@ div#small_error_icon {
margin: 5px;
}
td.formLabel {
text-align: right;
padding: 2px 10px;
font-weight: bolder;
vertical-align: top;
}

133
wise-doc/src/main/webapp/css/embedded.css Normal file
View File

@@ -0,0 +1,133 @@
html {
overflow: hidden;
}
#waitDialog {
position: absolute;
top: 10px;
left: 10px;
height: 100px;
}
#firstHeader {
width: 100%;
}
#subHeader {
position: absolute;
width: 100%;
height: 55px;
top: 30px;
}
#loadingContainer {
position: relative;
top: 80px;
height: 120px; /*background: whitesmoke;*/
background: #FEFEFE;
opacity: .99;
padding: 15px;
width: 100%;
border: 1px solid;
border-color: #a9a9a9;
}
#loadingContainer .loadingText {
position: relative;
top: 50%;
margin-top: -35px;
font-size: 30px;
font-weight: bold;
vertical-align: text-bottom;
height: 30px;
float: left;
}
#loadingContainer .loadingIcon {
position: relative;
background: url(../images/ajax-loader2.gif) no-repeat;
top: 25px;
height: 100px;
width: 70px;
float: left;
clear: both;
}
/* ------------- Footer Styles -------------------------*/
div#embFooter {
position: absolute;
height: 35px;
width: 100%;
bottom: 0;
left: 0;
border-top: 1px solid black;
background: #E5E5E5;
}
div#logo {
height: 65px;
width: 80px;
position: absolute;
background: url(../nicons/logo-small.png) no-repeat right top;
right: 10px;
top: -10px;
}
.button {
width: 20px;
height: 20px;
float: left;
cursor: pointer;
white-space: nowrap;
margin: 1px;
}
.button:hover {
float: left;
cursor: pointer;
border: 1px solid black;
border-top-color: white;
border-left-color: white;
margin: 0;
}
div#zoomIn {
background: url(../nicons/zoom-in.png) no-repeat left top;
margin-top: 10px;
margin-left: 10px;
}
#zoomOut {
background: url(../nicons/zoom-out.png) no-repeat left top;;
margin-top: 10px;
margin-left: 5px;
}
div#mindplot {
position: relative;
top: 0;
left: 0;
width: 100%;
}
div#mapContainer {
border-bottom: 1px solid black;
padding-bottom: 40px;
height: 400px;
width: 100%;
}
div#mapDetails {
float: right;
padding-top: 10px;
margin-right: 100px;
}
div#mapDetails .title {
font-weight: bold;
margin-left: 10px;
margin-right: 3px;
}

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

@@ -113,9 +113,6 @@
});
</script>
<div id="colorPalette">
<div id="paletteHeader"></div>
</div>
<div id="header">
<div id="headerInfo">

4
wise-doc/src/main/webapp/html/embeddde.html
View File

@@ -1,4 +0,0 @@
<div>
algo..
</div>

111
wise-doc/src/main/webapp/html/embedded.htm Normal file
View File

@@ -0,0 +1,111 @@
<!DOCTYPE HTML>
<%@ include file="/jsp/init.jsp" %>
<html>
<head>
<title>WiseMapping - Editor </title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<!--[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='../js/less-1.1.3.min.js'></script>
<link rel="stylesheet" type="text/css" href="../css/embedded.css"/>
<script type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools-yui-compressed.js'></script>
<script type='text/javascript'
src='/mindplot/src/main/javascript/libraries/mootools/mootools-more-1.3.2.1-yui.js'></script>
<script type='text/javascript' src='/core-js/target/classes/core.js'></script>
<script type="text/javascript">
var mapId = '${mindmap.id}';
var mapXml = '<map name="38298" version="pela"><topic central="true" text="test\nThis is working ?" id="1"/></map>';
var mindReady = false;
$(document).addEvent('loadcomplete', function(resource) {
mindReady = resource == 'mind' ? true : mindReady;
if (mindReady) {
collab = 'standalone';
//var editorProperties = {zoom:0.85,saveOnLoad:true,collab:'standalone'};
var isTryMode = false;
designer = buildDesigner();
var domDocument = core.Utils.createDocumentFromText(mapXml);
var serializer = mindplot.XMLMindmapSerializerFactory.getSerializerFromDocument(domDocument);
var mindmap = serializer.loadFromDom(domDocument, mapId);
// Now, load the map ...
designer.loadMap(mindmap);
// If not problem has arisen, close the dialog ...
if (!window.hasUnexpectedErrors) {
waitDialog.deactivate();
}
$('zoomIn').addEvent('click',function(){
designer.zoomIn();
});
$('zoomOut').addEvent('click',function(){
designer.zoomOut();
});
}
});
</script>
</head>
<body>
<div id="waitDialog" style="display:none">
<div id="waitingContainer">
<div class="loadingIcon"></div>
<div class="loadingText">
Loading ...
</div>
</div>
</div>
<div id="errorDialog" style="display:none">
<div id="errorContainer">
<div class="loadingIcon"></div>
<div class="loadingText">
Unexpected error loading your map :(
</div>
</div>
</div>
<script type="text/javascript">
var waitDialog = new core.WaitDialog();
waitDialog.activate(true, $("waitDialog"));
$(window).addEvent("error", function(event) {
// Show error dialog ...
waitDialog.changeContent($("errorDialog"), false);
return false;
});
</script>
<div id="mapContainer">
<div id="mindplot"></div>
<div id="embFooter">
<a href="${pageContext.request.contextPath}/c/home.htm" target="new">
<div id="logo"></div>
</a>
<div id="zoomIn" class="button"></div>
<div id="zoomOut" class="button"></div>
<div id="mapDetails">
<span class="title"><spring:message code="CREATOR"/>:</span><span>${mindmap.creator}</span>
<span class="title"><spring:message code="DESCRIPTION"/>:</span><span>${mindmap.description}</span>
</div>
</div>
</div>
<script type="text/javascript" src="../js/editor.js"></script>
</body>
</html>

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

@@ -29,16 +29,18 @@ function buildDesigner() {
var editorProperties = {zoom:0.85,saveOnLoad:true,collab:collab};
designer = new mindplot.Designer(editorProperties, container);
designer.setViewPort({
height: parseInt(window.innerHeight-70), // Footer and Header
height: parseInt(window.innerHeight - 70), // Footer and Header
width: parseInt(window.innerWidth)
});
var menu = new mindplot.widget.Menu(designer, 'toolbar',mapId);
if ($('toolbar')) {
var menu = new mindplot.widget.Menu(designer, 'toolbar', mapId);
// If a node has focus, focus can be move to another node using the keys.
designer._cleanScreen = function() {
menu.clear()
};
// If a node has focus, focus can be move to another node using the keys.
designer._cleanScreen = function() {
menu.clear()
};
}
return designer;
}