From 0101ec2ae7193bb46f9c7bceef5076e3a9ff88c8 Mon Sep 17 00:00:00 2001 From: Paulo Veiga Date: Fri, 3 Feb 2012 21:21:29 -0300 Subject: [PATCH] New steps on page customization. --- mindplot/src/main/javascript/Designer.js | 7 + wise-editor/src/main/webapp/css/embedded.less | 32 ++++ wise-editor/src/main/webapp/css/header.less | 11 ++ .../webapp/css/{embedded.css => viewmode.css} | 3 +- .../src/main/webapp/html/container.html | 51 +++++- .../src/main/webapp/html/container.json | 16 +- wise-editor/src/main/webapp/html/editor.html | 4 +- .../src/main/webapp/html/embedded.html | 171 ++++++++++++++++++ .../src/main/webapp/html/viewmode.html | 2 +- wise-editor/src/main/webapp/js/editor.js | 24 ++- wise-editor/src/main/webapp/js/embedded.css | 135 -------------- 11 files changed, 303 insertions(+), 153 deletions(-) create mode 100644 wise-editor/src/main/webapp/css/embedded.less rename wise-editor/src/main/webapp/css/{embedded.css => viewmode.css} (98%) create mode 100644 wise-editor/src/main/webapp/html/embedded.html delete mode 100644 wise-editor/src/main/webapp/js/embedded.css diff --git a/mindplot/src/main/javascript/Designer.js b/mindplot/src/main/javascript/Designer.js index 1bb21189..844d80a4 100644 --- a/mindplot/src/main/javascript/Designer.js +++ b/mindplot/src/main/javascript/Designer.js @@ -25,6 +25,9 @@ mindplot.Designer = new Class({ this._options = options; + // Set full div elem render area ... + divElement.setStyles(options.size); + // Dispatcher manager ... var commandContext = new mindplot.CommandContext(this); if (!$defined(options.collab) || options.collab == 'standalone') { @@ -54,6 +57,10 @@ mindplot.Designer = new Class({ } this._relPivot = new mindplot.RelationshipPivot(this._workspace, this); + + // Set editor working area ... + this.setViewPort(options.viewPort); + }, _registerEvents : function() { diff --git a/wise-editor/src/main/webapp/css/embedded.less b/wise-editor/src/main/webapp/css/embedded.less new file mode 100644 index 00000000..507d6d4a --- /dev/null +++ b/wise-editor/src/main/webapp/css/embedded.less @@ -0,0 +1,32 @@ +@import "editor.less"; + +/* Overwrite some styles */ + +div#headerInfo{ + height:0; +} +div#header { + height:35px; +} + +div#headerMapTitle,#headerActions,#headerLogo { + display:none; +} + +/* Footer Styles */ +div#footer { + position: absolute; + height: 0px; + width: 100%; + bottom: 0; + left: 0; +} + +div#footerLogo { + height: 65px; + width: 80px; + position: absolute; + background: url(../images/logo-small.png) no-repeat right top; + right: 10px; + top: -50px; +} \ No newline at end of file diff --git a/wise-editor/src/main/webapp/css/header.less b/wise-editor/src/main/webapp/css/header.less index 22350474..4d602ce3 100644 --- a/wise-editor/src/main/webapp/css/header.less +++ b/wise-editor/src/main/webapp/css/header.less @@ -82,3 +82,14 @@ div#headerNotifier { } @import "toolbar.less"; + +div#embFooter { + position: absolute; + height: 35px; + width: 100%; + bottom: 0; + left: 0; + border-top: 1px solid black; + background: #E5E5E5; + font-family: Arial; +} diff --git a/wise-editor/src/main/webapp/css/embedded.css b/wise-editor/src/main/webapp/css/viewmode.css similarity index 98% rename from wise-editor/src/main/webapp/css/embedded.css rename to wise-editor/src/main/webapp/css/viewmode.css index e1912b88..ef5a90eb 100644 --- a/wise-editor/src/main/webapp/css/embedded.css +++ b/wise-editor/src/main/webapp/css/viewmode.css @@ -44,7 +44,8 @@ html { } /* ------------- Footer Styles -------------------------*/ -div#embFooter { +div# + { position: absolute; height: 35px; width: 100%; diff --git a/wise-editor/src/main/webapp/html/container.html b/wise-editor/src/main/webapp/html/container.html index b2dd68e0..6a967d5a 100644 --- a/wise-editor/src/main/webapp/html/container.html +++ b/wise-editor/src/main/webapp/html/container.html @@ -4,18 +4,63 @@ WiseMapping - Embedded Sample + +
+
+

Embedded editor sample

-

Embedded editor sample

+

+ This is a simple example of how WiseMapping can be embedded in a page. + Embedding WiseMapping editor is such simple as copying this line in your page: +

+
<iframe src="embedded.html?confUrl=../html/container.json" width="800" height="600"></iframe>
+

+ The container.json file contains a set of properties that must be configured. Properties: +

+
    +
  • size: Must match with the size of the iframe
    • +
  • zoom: Scale to be applied to the map
    • +
  • readOnly: If the map could be modified.
    • +
  • persistenceManager: Persistence managers to be used. By default, local browser storage is used.
    • +
  • mapId: UUID of the map to be loaded..
    • +
+

+ It's important to point out that embedded.html is a static html page that it's mean to be a template page + for advanced customization. In few words, go ahead and modify it. +

-
- +
+
+ +
diff --git a/wise-editor/src/main/webapp/html/container.json b/wise-editor/src/main/webapp/html/container.json index 6ea27b64..5a9d4b05 100644 --- a/wise-editor/src/main/webapp/html/container.json +++ b/wise-editor/src/main/webapp/html/container.json @@ -1,9 +1,15 @@ { - "readOnly":"false", - "zoom":0.85, - "saveOnLoad":false, + "readOnly":false, + "zoom":1.3, "size":{ "width":800, - "height":600 - } + "height":400 + }, + "viewPort": + { + "width":800, + "height":400 + }, + "persistenceManager": "mindplot.LocalStorageManager", + "mapId": "welcome" } \ No newline at end of file diff --git a/wise-editor/src/main/webapp/html/editor.html b/wise-editor/src/main/webapp/html/editor.html index 8f82c202..8d06c462 100644 --- a/wise-editor/src/main/webapp/html/editor.html +++ b/wise-editor/src/main/webapp/html/editor.html @@ -157,12 +157,14 @@
-
+
diff --git a/wise-editor/src/main/webapp/html/embedded.html b/wise-editor/src/main/webapp/html/embedded.html new file mode 100644 index 00000000..517b626a --- /dev/null +++ b/wise-editor/src/main/webapp/html/embedded.html @@ -0,0 +1,171 @@ + + + + + WiseMapping - Editor + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + diff --git a/wise-editor/src/main/webapp/html/viewmode.html b/wise-editor/src/main/webapp/html/viewmode.html index f2bc4bbe..b00a0f40 100644 --- a/wise-editor/src/main/webapp/html/viewmode.html +++ b/wise-editor/src/main/webapp/html/viewmode.html @@ -8,7 +8,7 @@ - + diff --git a/wise-editor/src/main/webapp/js/editor.js b/wise-editor/src/main/webapp/js/editor.js index da23195d..d8da1898 100644 --- a/wise-editor/src/main/webapp/js/editor.js +++ b/wise-editor/src/main/webapp/js/editor.js @@ -21,13 +21,18 @@ var designer = null; function buildDesigner(options) { var container = $('mindplot'); - container.setStyles(options.size); - designer = new mindplot.Designer(options, container); - designer.setViewPort({ - height: parseInt(window.innerHeight - 70), // Footer and Header - width: parseInt(window.innerWidth) - }); + + // Configure default persistence manager ... + var persistence; + if (options.persistenceManager) { + persistence = eval("new " + options.persistenceManager + "()"); + + } else { + persistence = new mindplot.LocalStorageManager(); + } + mindplot.PersistenceManager.init(persistence); + if (!options.readOnly) { if ($('toolbar')) { @@ -70,7 +75,12 @@ function loadDesignerOptions() { height: parseInt(screen.height), width: parseInt(screen.width) }; - result = {readOnly:false,zoom:0.85,saveOnLoad:true,size:containerSize}; + + var viewPort = { + height: parseInt(window.innerHeight - 70), // Footer and Header + width: parseInt(window.innerWidth) + }; + result = {readOnly:false,zoom:0.85,saveOnLoad:true,size:containerSize,viewPort:viewPort}; } return result; } diff --git a/wise-editor/src/main/webapp/js/embedded.css b/wise-editor/src/main/webapp/js/embedded.css deleted file mode 100644 index 84f4a830..00000000 --- a/wise-editor/src/main/webapp/js/embedded.css +++ /dev/null @@ -1,135 +0,0 @@ -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(../images/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: 0px; - -} - -div#zoomIn { - background: url(../images/zoom-in.png) no-repeat left top; - margin-top: 10px; - margin-left: 10px; -} - -#zoomOut { - background: url(../images/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; - font-family: arial,serif; - font-size: 11px; -} - -div#mapDetails .title { - font-weight: bold; - margin-left: 10px; - margin-right: 3px; - -} \ No newline at end of file