From 6c051fca8bbd94bb17d2f8886708acf7b1dac7d3 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <piotr.gawron@uni.lu>
Date: Thu, 13 Apr 2017 14:31:11 +0200
Subject: [PATCH] refactor on comment dialog
---
frontend-js/src/main/js/gui/CommentDialog.js | 87 +++++++++----------
frontend-js/src/main/js/gui/Legend.js | 1 -
frontend-js/src/main/js/map/CustomMap.js | 17 ++--
.../src/test/js/gui/CommentDialog-test.js | 14 ++-
frontend-js/src/test/js/map/CustomMap-test.js | 8 +-
.../components/map/feedbackDialog.xhtml | 12 ---
6 files changed, 69 insertions(+), 70 deletions(-)
delete mode 100644 web/src/main/webapp/WEB-INF/components/map/feedbackDialog.xhtml
diff --git a/frontend-js/src/main/js/gui/CommentDialog.js b/frontend-js/src/main/js/gui/CommentDialog.js
index bf03298de0..cbc0c3a0b1 100644
--- a/frontend-js/src/main/js/gui/CommentDialog.js
+++ b/frontend-js/src/main/js/gui/CommentDialog.js
@@ -2,11 +2,29 @@
var Promise = require("bluebird");
+var AbstractGuiElement = require('./AbstractGuiElement');
var Alias = require('../map/data/Alias');
var Reaction = require('../map/data/Reaction');
var logger = require('../logger');
var Functions = require('../Functions');
+function CommentDialog(params) {
+ AbstractGuiElement.call(this, params);
+ var self = this;
+ self._createGui();
+ $(self.getElement()).dialog({
+ autoOpen : false,
+ resizable : false,
+ width : window.innerWidth / 2,
+ height : window.innerHeight / 2,
+ });
+}
+
+CommentDialog.prototype = Object.create(AbstractGuiElement.prototype);
+CommentDialog.prototype.constructor = CommentDialog;
+
+CommentDialog.GENERAL = "<General>";
+
function createRow(elements) {
var row = document.createElement('tr');
for (var i = 0; i < elements.length; i++) {
@@ -17,11 +35,28 @@ function createRow(elements) {
return row;
}
-function CommentDialog(element, customMap) {
+CommentDialog.prototype.open = function(types) {
+ var self = this;
+ self.setTypes([ CommentDialog.GENERAL ]);
+
+ var promises = [ CommentDialog.GENERAL ];
+ for (var i = 0; i < types.length; i++) {
+ var ie = types[i];
+ if (ie.getType() === "ALIAS") {
+ promises.push(self.getMap().getSubmodelById(ie.getModelId()).getModel().getAliasById(ie.getId(), true));
+ } else if (ie.getType() === "REACTION") {
+ promises.push(self.getMap().getSubmodelById(ie.getModelId()).getModel().getReactionById(ie.getId(), true));
+ } else {
+ throw new Error("Unknown element type: " + ie.getType());
+ }
+ }
+ return Promise.all(promises).then(function(elements) {
+ self.setTypes(elements);
+ });
+};
+CommentDialog.prototype._createGui = function(types) {
var self = this;
- this.setElement(element);
- this.setMap(customMap);
var table = document.createElement('table');
var typeLabel = document.createElement('label');
@@ -82,7 +117,7 @@ function CommentDialog(element, customMap) {
table.appendChild(createRow([ sendButton ]));
- element.appendChild(table);
+ self.getElement().appendChild(table);
typeOptions.onchange = function() {
var option = self.getSelectedType();
@@ -114,46 +149,6 @@ function CommentDialog(element, customMap) {
}
detailDiv.innerHTML = text;
};
-
-}
-
-CommentDialog.GENERAL = "<General>";
-
-
-CommentDialog.prototype.setMap = function(map) {
- this._map = map;
-};
-
-CommentDialog.prototype.getMap = function() {
- return this._map;
-};
-
-CommentDialog.prototype.setElement = function(element) {
- this._element = element;
-};
-
-CommentDialog.prototype.getElement = function() {
- return this._element;
-};
-
-CommentDialog.prototype.open = function(types) {
- var self = this;
- self.setTypes([ CommentDialog.GENERAL ]);
-
- var promises = [ CommentDialog.GENERAL ];
- for (var i = 0; i < types.length; i++) {
- var ie = types[i];
- if (ie.getType() === "ALIAS") {
- promises.push(self.getMap().getSubmodelById(ie.getModelId()).getModel().getAliasById(ie.getId(), true));
- } else if (ie.getType() === "REACTION") {
- promises.push(self.getMap().getSubmodelById(ie.getModelId()).getModel().getReactionById(ie.getId(), true));
- } else {
- throw new Error("Unknown element type: " + ie.getType());
- }
- }
- return Promise.all(promises).then(function(elements) {
- self.setTypes(elements);
- });
};
CommentDialog.prototype.setTypes = function(types) {
var typeOptions = this.getTypeOptions();
@@ -285,4 +280,8 @@ CommentDialog.prototype.addComment = function() {
});
};
+CommentDialog.prototype.destroy = function() {
+ $(this.getElement()).dialog("destroy");
+};
+
module.exports = CommentDialog;
diff --git a/frontend-js/src/main/js/gui/Legend.js b/frontend-js/src/main/js/gui/Legend.js
index 777241f625..76363ef3b2 100644
--- a/frontend-js/src/main/js/gui/Legend.js
+++ b/frontend-js/src/main/js/gui/Legend.js
@@ -3,7 +3,6 @@
/* exported logger */
var AbstractGuiElement = require('./AbstractGuiElement');
-var Functions = require('../Functions');
var logger = require('../logger');
diff --git a/frontend-js/src/main/js/map/CustomMap.js b/frontend-js/src/main/js/map/CustomMap.js
index 1b38f0d04f..11c1615c05 100644
--- a/frontend-js/src/main/js/map/CustomMap.js
+++ b/frontend-js/src/main/js/map/CustomMap.js
@@ -56,10 +56,6 @@ function CustomMap(options) {
// list of reference genomes
this._referenceGenome = [];
- var commentDialog = new CommentDialog(document.getElementById("feedbackContent"), this);
-
- this.setCommentDialog(commentDialog);
-
if (options.isCustomTouchInterface()) {
this._touchInterface = new TouchMap(this);
}
@@ -1310,9 +1306,6 @@ CustomMap.prototype.getControl = function(type) {
CustomMap.prototype.setCommentDialog = function(commentDialog) {
this._commentDialog = commentDialog;
- commentDialog.close = function(){
- jsfCommentDialog.hide();
- };
};
CustomMap.prototype.getCommentDialog = function() {
@@ -1322,7 +1315,14 @@ CustomMap.prototype.getCommentDialog = function() {
CustomMap.prototype.openCommentDialog = function() {
var self = this;
return ServerConnector.getClosestElementsByCoordinates({modelId:this.getActiveSubmapId(), coordinates:this.getActiveSubmapClickCoordinates()}).then(function(elements){
- return self.getCommentDialog().open(elements);
+ var commentDialog = self.getCommentDialog();
+ if (commentDialog===undefined) {
+ commentDialog = new CommentDialog({element:document.getElementById("feedbackContent"), customMap:self});
+ self.setCommentDialog(commentDialog);
+ }
+ self.setCommentDialog(commentDialog);
+
+ return commentDialog.open(elements);
});
};
@@ -1403,5 +1403,4 @@ CustomMap.prototype.getSubmaps = function(){
return submaps;
};
-
module.exports = CustomMap;
diff --git a/frontend-js/src/test/js/gui/CommentDialog-test.js b/frontend-js/src/test/js/gui/CommentDialog-test.js
index 92095d66b3..8952c66fc3 100644
--- a/frontend-js/src/test/js/gui/CommentDialog-test.js
+++ b/frontend-js/src/test/js/gui/CommentDialog-test.js
@@ -20,13 +20,23 @@ describe('CommentDialog', function() {
it('contructor', function() {
var map = helper.createCustomMap();
- new CommentDialog(testDiv, map);
+ var dialog = new CommentDialog({
+ element : testDiv,
+ customMap : map
+ });
assert.ok(testDiv.innerHTML);
assert.equal(logger.getWarnings().length, 0);
+ dialog.destroy();
});
it('getName', function() {
- var dialog = new CommentDialog(testDiv);
+ var map = helper.createCustomMap();
+
+ var dialog = new CommentDialog({
+ element : testDiv,
+ customMap : map
+ });
assert.ok(dialog.getName() !== undefined);
+ dialog.destroy();
});
});
diff --git a/frontend-js/src/test/js/map/CustomMap-test.js b/frontend-js/src/test/js/map/CustomMap-test.js
index c923b6fbd8..1c23b69053 100644
--- a/frontend-js/src/test/js/map/CustomMap-test.js
+++ b/frontend-js/src/test/js/map/CustomMap-test.js
@@ -580,6 +580,8 @@ describe('CustomMap', function() {
map.getCommentDialog().setSelectedType(2);
selected = map.getCommentDialog().getSelectedType();
assert.notOk(selected === "<General>");
+ }).then(function() {
+ map.getCommentDialog().destroy();
});
});
@@ -590,6 +592,8 @@ describe('CustomMap', function() {
map.setActiveSubmapClickCoordinates(new google.maps.Point(2, 12));
return map.openCommentDialog().then(function() {
return map.getCommentDialog().addComment();
+ }).then(function() {
+ map.getCommentDialog().destroy();
});
});
@@ -641,9 +645,9 @@ describe('CustomMap', function() {
var submodel = helper.createModel();
options.getProject().getModel().addSubmodel(submodel);
-
+
var map = new CustomMap(options);
-
+
map.openSubmodel(submodel.getId());
});
diff --git a/web/src/main/webapp/WEB-INF/components/map/feedbackDialog.xhtml b/web/src/main/webapp/WEB-INF/components/map/feedbackDialog.xhtml
deleted file mode 100644
index ce04a24bc9..0000000000
--- a/web/src/main/webapp/WEB-INF/components/map/feedbackDialog.xhtml
+++ /dev/null
@@ -1,12 +0,0 @@
-<html xmlns="http://www.w3.org/1999/xhtml"
- xmlns:h="http://java.sun.com/jsf/html"
- xmlns:f="http://java.sun.com/jsf/core"
- xmlns:ui="http://java.sun.com/jsf/facelets"
- xmlns:c="http://java.sun.com/jsp/jstl/core"
- xmlns:p="http://primefaces.org/ui">
-
- <p:dialog id="feedbackDialog" header="Comment" widgetVar="jsfCommentDialog" modal="true" >
- <div id="feedbackContent"/>
- </p:dialog>
-
-</html>
--
GitLab