From b37ecd8c2c99382196eff0054ea28eb08fd05cdd Mon Sep 17 00:00:00 2001 From: Paulo Veiga Date: Wed, 1 Feb 2012 20:31:40 -0300 Subject: [PATCH] Finish embedded view implementation. --- core-js/pepe.txy | 1 - distribution/assembly/standalone-editor.xml | 3 +- mindplot/src/main/javascript/Designer.js | 29 +-- mindplot/src/main/javascript/MainTopic.js | 4 +- mindplot/src/main/javascript/Topic.js | 9 +- mindplot/src/main/javascript/widget/Menu.js | 13 +- wise-editor/pom.xml | 1 - wise-editor/src/main/webapp/css/embedded.css | 36 +++- wise-editor/src/main/webapp/html/editor.html | 37 +--- wise-editor/src/main/webapp/html/embedded.htm | 111 ---------- .../src/main/webapp/html/fulleditor.html | 203 ++++++++++++++++++ .../src/main/webapp/html/viewmode.html | 74 +++++++ wise-editor/src/main/webapp/js/editor.js | 18 +- wise-editor/src/main/webapp/js/embedded.css | 135 ++++++++++++ .../src/main/webapp/images/favicon.ico | 0 15 files changed, 488 insertions(+), 186 deletions(-) delete mode 100644 core-js/pepe.txy delete mode 100644 wise-editor/src/main/webapp/html/embedded.htm create mode 100644 wise-editor/src/main/webapp/html/fulleditor.html create mode 100644 wise-editor/src/main/webapp/html/viewmode.html create mode 100644 wise-editor/src/main/webapp/js/embedded.css create mode 100644 wise-webapp/src/main/webapp/images/favicon.ico diff --git a/core-js/pepe.txy b/core-js/pepe.txy deleted file mode 100644 index 2f259b79..00000000 --- a/core-js/pepe.txy +++ /dev/null @@ -1 +0,0 @@ -s \ No newline at end of file diff --git a/distribution/assembly/standalone-editor.xml b/distribution/assembly/standalone-editor.xml index d533f396..b4e5268d 100644 --- a/distribution/assembly/standalone-editor.xml +++ b/distribution/assembly/standalone-editor.xml @@ -30,7 +30,8 @@ js/editor.js js/less*.js js/mootools*.js - html/* + html/editor.html + html/viewmode.html diff --git a/mindplot/src/main/javascript/Designer.js b/mindplot/src/main/javascript/Designer.js index 6a90a692..a33320d6 100644 --- a/mindplot/src/main/javascript/Designer.js +++ b/mindplot/src/main/javascript/Designer.js @@ -18,14 +18,16 @@ mindplot.Designer = new Class({ Extends: Events, - initialize: function(profile, divElement) { - $assert(profile, "profile must be defined"); - $assert(profile.zoom, "zoom must be defined"); + initialize: function(options, divElement) { + $assert(options, "options must be defined"); + $assert(options.zoom, "zoom must be defined"); $assert(divElement, "divElement must be defined"); + this._options = options; + // Dispatcher manager ... var commandContext = new mindplot.CommandContext(this); - if (profile.collab == 'standalone') { + if (options.collab == 'standalone') { this._actionDispatcher = new mindplot.StandaloneActionDispatcher(commandContext); } else { this._actionDispatcher = new mindplot.BrixActionDispatcher(commandContext); @@ -36,7 +38,7 @@ mindplot.Designer = new Class({ }.bind(this)); mindplot.ActionDispatcher.setInstance(this._actionDispatcher); - this._model = new mindplot.DesignerModel(profile); + this._model = new mindplot.DesignerModel(options); // Init Screen manager.. var screenManager = new mindplot.ScreenManager(divElement); @@ -46,7 +48,7 @@ mindplot.Designer = new Class({ this._eventBussDispatcher = new mindplot.layout.EventBusDispatcher(this.getModel()); // Register events - if (!profile.readOnly) { + if (!this.isReadOnly()) { this._registerEvents(); this._dragManager = this._buildDragManager(this._workspace); } @@ -151,17 +153,17 @@ mindplot.Designer = new Class({ this._workspace.setZoom(model.getZoom(), true); }, - _buildNodeGraph : function(model) { + _buildNodeGraph : function(model, readOnly) { var workspace = this._workspace; // Create node graph ... - var topic = mindplot.NodeGraph.create(model); + var topic = mindplot.NodeGraph.create(model, {readOnly:readOnly}); // Append it to the workspace ... this.getModel().addTopic(topic); // Add Topic events ... - if (!this._readOnly) { + if (!readOnly) { // If a node had gained focus, clean the rest of the nodes ... topic.addEvent('mousedown', function(event) { this.onObjectFocusEvent(topic, event); @@ -171,8 +173,7 @@ mindplot.Designer = new Class({ if (topic.getType() != mindplot.model.INodeModel.CENTRAL_TOPIC_TYPE) { // Central Topic doesn't support to be dragged - var dragger = this._dragManager; - dragger.add(topic); + this._dragManager.add(topic); } } @@ -464,6 +465,10 @@ mindplot.Designer = new Class({ this._actionDispatcher._actionRunner.redo(); }, + isReadOnly : function() { + return this._options.readOnly; + }, + _nodeModelToNodeGraph : function(nodeModel, isVisible) { $assert(nodeModel, "Node model can not be null"); var children = nodeModel.getChildren().slice(); @@ -471,7 +476,7 @@ mindplot.Designer = new Class({ return a.getOrder() - b.getOrder() }); - var nodeGraph = this._buildNodeGraph(nodeModel); + var nodeGraph = this._buildNodeGraph(nodeModel, this.isReadOnly()); if (isVisible) { nodeGraph.setVisibility(isVisible); diff --git a/mindplot/src/main/javascript/MainTopic.js b/mindplot/src/main/javascript/MainTopic.js index 033aadba..ca2aaeb0 100644 --- a/mindplot/src/main/javascript/MainTopic.js +++ b/mindplot/src/main/javascript/MainTopic.js @@ -243,6 +243,4 @@ mindplot.MainTopic = new Class({ return '#023BB9'; } -}); - -mindplot.MainTopic.DEFAULT_MAIN_TOPIC_HEIGHT = 18; +}); \ No newline at end of file diff --git a/mindplot/src/main/javascript/Topic.js b/mindplot/src/main/javascript/Topic.js index d383472f..93e103d9 100644 --- a/mindplot/src/main/javascript/Topic.js +++ b/mindplot/src/main/javascript/Topic.js @@ -19,8 +19,8 @@ mindplot.Topic = new Class({ Extends:mindplot.NodeGraph, - initialize : function(model) { - this.parent(model); + initialize : function(model, options) { + this.parent(model, options); this._textEditor = new mindplot.MultilineTextEditor(this); this._children = []; @@ -35,15 +35,12 @@ mindplot.Topic = new Class({ this.setPosition(pos); } - // @Todo: Hack to remove ... // Register events for the topic ... - if (!designer._readOnly) { - + if (!options.readOnly) { this._registerEvents(); } }, - _registerEvents : function() { this.setMouseEventsEnabled(true); diff --git a/mindplot/src/main/javascript/widget/Menu.js b/mindplot/src/main/javascript/widget/Menu.js index f63533c9..d7e56316 100644 --- a/mindplot/src/main/javascript/widget/Menu.js +++ b/mindplot/src/main/javascript/widget/Menu.js @@ -403,10 +403,13 @@ mindplot.widget.Menu = new Class({ _addButton:function (buttonId, topic, rel, fn) { // Register Events ... - var button = new mindplot.widget.ToolbarItem(buttonId, function(event) { - fn(event); - this.clear(); - }.bind(this), {topicAction:topic,relAction:rel}); - this._toolbarElems.push(button); + if ($(buttonId)) { + + var button = new mindplot.widget.ToolbarItem(buttonId, function(event) { + fn(event); + this.clear(); + }.bind(this), {topicAction:topic,relAction:rel}); + this._toolbarElems.push(button); + } } }); \ No newline at end of file diff --git a/wise-editor/pom.xml b/wise-editor/pom.xml index 83f7dde7..05a94fc7 100644 --- a/wise-editor/pom.xml +++ b/wise-editor/pom.xml @@ -80,7 +80,6 @@ - diff --git a/wise-editor/src/main/webapp/css/embedded.css b/wise-editor/src/main/webapp/css/embedded.css index f07e27be..a95fd159 100644 --- a/wise-editor/src/main/webapp/css/embedded.css +++ b/wise-editor/src/main/webapp/css/embedded.css @@ -112,13 +112,6 @@ div#mindplot { width: 100%; } -div#mapContainer { - border-bottom: 1px solid black; - padding-bottom: 40px; - height: 400px; - width: 100%; -} - div#mapDetails { float: right; padding-top: 10px; @@ -130,4 +123,31 @@ div#mapDetails .title { font-weight: bold; margin-left: 10px; margin-right: 3px; -} \ No newline at end of file +} + +.notesTip { + background-color: #dfcf3c; + padding: 5px 15px; + color: #666666; + /*font-weight: bold;*/ + /*width: 100px;*/ + font-size: 13px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); +} + +.linkTip { + background-color: #dfcf3c; + padding: 5px 15px; + color: #666666; + /*font-weight: bold;*/ + /*width: 100px;*/ + font-size: 13px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); +} + diff --git a/wise-editor/src/main/webapp/html/editor.html b/wise-editor/src/main/webapp/html/editor.html index 1641bf60..301e5f81 100644 --- a/wise-editor/src/main/webapp/html/editor.html +++ b/wise-editor/src/main/webapp/html/editor.html @@ -14,17 +14,19 @@ + + + - - - @@ -94,11 +93,9 @@
diff --git a/wise-editor/src/main/webapp/html/embedded.htm b/wise-editor/src/main/webapp/html/embedded.htm deleted file mode 100644 index 44be4659..00000000 --- a/wise-editor/src/main/webapp/html/embedded.htm +++ /dev/null @@ -1,111 +0,0 @@ - - -<%@ include file="/jsp/init.jsp" %> - - - - WiseMapping - Editor - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - - - -
-
-
- :${mindmap.creator} - :${mindmap.description} -
-
-
- - - diff --git a/wise-editor/src/main/webapp/html/fulleditor.html b/wise-editor/src/main/webapp/html/fulleditor.html new file mode 100644 index 00000000..9f939570 --- /dev/null +++ b/wise-editor/src/main/webapp/html/fulleditor.html @@ -0,0 +1,203 @@ + + + + + WiseMapping - Editor + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + + + + + + +
+ + + diff --git a/wise-editor/src/main/webapp/html/viewmode.html b/wise-editor/src/main/webapp/html/viewmode.html new file mode 100644 index 00000000..e50dfbb2 --- /dev/null +++ b/wise-editor/src/main/webapp/html/viewmode.html @@ -0,0 +1,74 @@ + + + + + + WiseMapping - View + + + + + + + + + + + + + + +
+
+
+ +
+
+
+ Author: Paulo Veiga + Description: View Mode +
+
+
+ + + diff --git a/wise-editor/src/main/webapp/js/editor.js b/wise-editor/src/main/webapp/js/editor.js index 6f3c7f46..361c0281 100644 --- a/wise-editor/src/main/webapp/js/editor.js +++ b/wise-editor/src/main/webapp/js/editor.js @@ -18,7 +18,7 @@ var designer = null; -function buildDesigner() { +function buildDesigner(viewMode) { var container = $('mindplot'); container.setStyles({ @@ -26,20 +26,22 @@ function buildDesigner() { width: parseInt(screen.width) }); - var editorProperties = {zoom:0.85,saveOnLoad:true,collab:collab}; + var editorProperties = {zoom:0.85,saveOnLoad:true,collab:'standalone',readOnly:viewMode}; designer = new mindplot.Designer(editorProperties, container); designer.setViewPort({ height: parseInt(window.innerHeight - 70), // Footer and Header width: parseInt(window.innerWidth) }); - if ($('toolbar')) { - var menu = new mindplot.widget.Menu(designer, 'toolbar', mapId); + if (!viewMode) { + 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; } diff --git a/wise-editor/src/main/webapp/js/embedded.css b/wise-editor/src/main/webapp/js/embedded.css new file mode 100644 index 00000000..84f4a830 --- /dev/null +++ b/wise-editor/src/main/webapp/js/embedded.css @@ -0,0 +1,135 @@ +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 diff --git a/wise-webapp/src/main/webapp/images/favicon.ico b/wise-webapp/src/main/webapp/images/favicon.ico new file mode 100644 index 00000000..e69de29b