From 626ae33c6e2a325535af6e19d3ff54cf13ed8291 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <piotr.gawron@uni.lu>
Date: Wed, 25 Jan 2017 18:19:34 +0100
Subject: [PATCH] basic dialog functionality
---
frontend-js/package.json | 1 +
frontend-js/src/main/js/ServerConnector.js | 8 +--
frontend-js/src/main/js/gui/OverlayPanel.js | 7 ++-
frontend-js/src/main/js/gui/Panel.js | 68 +++++++++++++++++++++
frontend-js/src/test/js/gui/Panel-test.js | 43 +++++++++++++
frontend-js/src/test/js/mocha-config.js | 9 ++-
web/src/main/webapp/index.xhtml | 1 +
7 files changed, 129 insertions(+), 8 deletions(-)
create mode 100644 frontend-js/src/test/js/gui/Panel-test.js
diff --git a/frontend-js/package.json b/frontend-js/package.json
index 8821f0bfc6..432f0545ae 100644
--- a/frontend-js/package.json
+++ b/frontend-js/package.json
@@ -19,6 +19,7 @@
"exorcist": "^0.4.0",
"file-url": "^2.0.0",
"jquery": "3.1.1",
+ "jquery-ui-dist": "^1.12.1",
"jsdom": "^9.9.1",
"jsdom-global": "^2.1.1",
"jshint": "^2.9.4",
diff --git a/frontend-js/src/main/js/ServerConnector.js b/frontend-js/src/main/js/ServerConnector.js
index 3219feb125..2a23da7d1f 100644
--- a/frontend-js/src/main/js/ServerConnector.js
+++ b/frontend-js/src/main/js/ServerConnector.js
@@ -150,12 +150,12 @@ ServerConnector.createGetParams = function(params) {
var sorted = [], key;
for (key in params) {
- if (params.hasOwnProperty(key)) {
- sorted.push(key);
- }
+ if (params.hasOwnProperty(key)) {
+ sorted.push(key);
+ }
}
sorted.sort();
-
+
var result = "";
for (var i = 0; i < sorted.length; i++) {
if (params[sorted[i]]!==undefined) {
diff --git a/frontend-js/src/main/js/gui/OverlayPanel.js b/frontend-js/src/main/js/gui/OverlayPanel.js
index c95826c775..b1b5b6b1f9 100644
--- a/frontend-js/src/main/js/gui/OverlayPanel.js
+++ b/frontend-js/src/main/js/gui/OverlayPanel.js
@@ -139,8 +139,13 @@ OverlayPanel.prototype.createOverlayRow = function(overlay, checked) {
var editTd = document.createElement("td");
var editButton = document.createElement("button");
editButton.onclick = function() {
- throw new Error("Not implemented");
+ var content = document.createElement("div");
+ content.innerHTML = "test";
+ self.openDialog(content, {
+ id : overlay.getId()
+ });
};
+ editButton.innerHTML = "<span class='ui-icon ui-icon-document'></span>";
editTd.appendChild(editButton);
result.appendChild(editTd);
}
diff --git a/frontend-js/src/main/js/gui/Panel.js b/frontend-js/src/main/js/gui/Panel.js
index a76b309a9e..7969add44f 100644
--- a/frontend-js/src/main/js/gui/Panel.js
+++ b/frontend-js/src/main/js/gui/Panel.js
@@ -6,6 +6,7 @@ var GuiConnector = require('../GuiConnector');
var ObjectWithListeners = require('../ObjectWithListeners');
var logger = require('../logger');
+var fun = require('../Functions');
function Panel(params) {
ObjectWithListeners.call(this, params);
@@ -276,4 +277,71 @@ Panel.prototype.getElementByName = function(element, name) {
return undefined;
};
+Panel.prototype.getDialogDiv = function(id) {
+ var dialogs = this.getElementByName(this.getElement(), "dialogs");
+ if (dialogs === undefined) {
+ dialogs = document.createElement("div");
+ dialogs.setAttribute("name", "dialogs");
+ this.getElement().appendChild(dialogs);
+
+ this._dialogs = [];
+ }
+
+ var dialogDiv = this._dialogs[id];
+
+ if (dialogDiv === undefined) {
+ dialogDiv = document.createElement("div");
+ dialogDiv.className = "ui-widget";
+ dialogDiv.setAttribute("name", "dialog-" + id);
+
+ var contentDiv = document.createElement("div");
+ contentDiv.setAttribute("name", "content");
+ dialogDiv.appendChild(contentDiv);
+
+ dialogs.appendChild(dialogDiv);
+
+ this._dialogs[id]=dialogDiv;
+ }
+ return dialogDiv;
+};
+
+Panel.prototype.assignDialogOptions = function(div, params) {
+ var dialog = $(div);
+ for ( var key in params) {
+ if (params.hasOwnProperty(key)) {
+ if (key === "id") {
+ div.setAttribute("name", "dialog-" + params[key]);
+ } else if (key === "modal") {
+ dialog.dialog('option', 'modal', params[key]);
+ } else {
+ throw new Error("Unknown dialog param: " + key + " - " + params[key]);
+ }
+ }
+ }
+};
+
+Panel.prototype.openDialog = function(content, options) {
+ if (options === undefined) {
+ options = {};
+ }
+
+ if (options.id === undefined) {
+ logger.warn("Id of dialog is not defined");
+ }
+
+ var div = this.getDialogDiv(options.id);
+
+ this.assignDialogOptions(div, options);
+
+ var contentDiv = this.getElementByName(div, "content");
+ while (contentDiv.hasChildNodes()) {
+ contentDiv.removeChild(contentDiv.lastChild);
+ }
+ contentDiv.appendChild(content);
+
+
+ $(div).dialog();
+ $(div).dialog("open");
+};
+
module.exports = Panel;
diff --git a/frontend-js/src/test/js/gui/Panel-test.js b/frontend-js/src/test/js/gui/Panel-test.js
new file mode 100644
index 0000000000..2579466646
--- /dev/null
+++ b/frontend-js/src/test/js/gui/Panel-test.js
@@ -0,0 +1,43 @@
+"use strict";
+
+var Helper = require('../helper');
+
+require("../mocha-config.js");
+
+var Alias = require('../../../main/js/map/data/Alias');
+var Panel = require('../../../main/js/gui/Panel');
+
+var chai = require('chai');
+var assert = chai.assert;
+var logger = require('../logger');
+
+describe('SearchPanel', function() {
+
+ var helper;
+ before(function() {
+ helper = new Helper();
+ });
+
+ it('openDialog', function() {
+ var div = helper.createSearchTab();
+
+ var map = helper.createCustomMap();
+
+ var panel = new Panel({
+ element : div,
+ customMap : map
+ });
+
+ var content = document.createElement("div");
+ content.innerHTML = "some content";
+
+ var id = 1;
+ panel.openDialog(content, {
+ id : id
+ });
+
+ assert.ok(panel.getDialogDiv(id).innerHTML.indexOf("some content") >= 0);
+
+ });
+
+});
diff --git a/frontend-js/src/test/js/mocha-config.js b/frontend-js/src/test/js/mocha-config.js
index e1537029e7..41279fa5d0 100644
--- a/frontend-js/src/test/js/mocha-config.js
+++ b/frontend-js/src/test/js/mocha-config.js
@@ -5,6 +5,10 @@ var Cookies = require('js-cookie');
// GLOBAL configuration
+global.navigator = {
+ userAgent : 'node.js'
+ };
+
var jsdom = require('jsdom');
global.document = jsdom.jsdom(undefined);
global.window = document.defaultView;
@@ -13,6 +17,8 @@ global.$ = require('jQuery');
global.jQuery = $;
global.window.$ = $;
+require('jquery-ui-dist/jquery-ui.js')
+
require("bootstrap");
@@ -21,9 +27,6 @@ global.google = require('./google-map-mock');
global.GuiConnector = require('./GuiConnector-mock');
global.ServerConnector = require('./ServerConnector-mock');
-global.navigator = {
- userAgent : 'node.js'
-};
// -----------------------------
diff --git a/web/src/main/webapp/index.xhtml b/web/src/main/webapp/index.xhtml
index ea90c402fa..3abc35faa5 100644
--- a/web/src/main/webapp/index.xhtml
+++ b/web/src/main/webapp/index.xhtml
@@ -21,6 +21,7 @@
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"/>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.min.js" type="text/javascript"/>
+ <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="shortcut icon" href="./resources/images/favicon.png" type="image/png" />
--
GitLab