Skip to content
Snippets Groups Projects
Commit 93e18ecb authored by Piotr Gawron's avatar Piotr Gawron
Browse files

TopMenu extracted to js class

parent e4f8907c
No related branches found
No related tags found
1 merge request!5Frontend refactor
"use strict";
/* exported logger */
var AbstractGuiElement = require('./AbstractGuiElement');
var Functions = require('../Functions');
var logger = require('../logger');
function Legend(params) {
AbstractGuiElement.call(this, params);
}
Legend.prototype = Object.create(AbstractGuiElement.prototype);
Legend.prototype.constructor = Legend;
Legend.prototype.hide = function() {
this.getElement().style.display = "none";
};
Legend.prototype.show = function() {
this.getElement().style.display = "block";
};
module.exports = Legend;
......@@ -29,10 +29,10 @@ var PanelControlElementType = {
USER_TAB_SURNAME_TEXT : "USER_TAB_SURNAME_TEXT",
USER_TAB_EMAIL_TEXT : "USER_TAB_EMAIL_TEXT",
USER_TAB_LOGOUT_BUTTON : "USER_TAB_LOGOUT_BUTTON",
SUBMAP_TABLE : "SUBMAP_TABLE",
SUBMAP_DIV : "SUBMAP_DIV",
INFO_DIV : "INFO_DIV",
INFO_PROJECT_NAME_TEXT : "INFO_PROJECT_NAME_TEXT",
INFO_PROJECT_VERSION_TEXT : "INFO_PROJECT_VERSION_TEXT",
......@@ -40,7 +40,16 @@ var PanelControlElementType = {
INFO_PROJECT_PUBLICATIONS_TEXT : "INFO_PROJECT_PUBLICATIONS_TEXT",
INFO_PROJECT_SHOW_PUBLICATIONS_BUTTON : "INFO_PROJECT_SHOW_PUBLICATIONS_BUTTON",
INFO_PROJECT_GET_ORIGINAL_FILE_BUTTON : "INFO_PROJECT_GET_ORIGINAL_FILE_BUTTON",
MENU_LEGEND_CHECKBOX : "MENU_LEGEND_CHECKBOX",
MENU_HIDE_LEFT_PANEL_BUTTON : "MENU_HIDE_LEFT_PANEL_BUTTON",
MENU_HIDE_LEFT_PANEL_BUTTON_ICON : "MENU_HIDE_LEFT_PANEL_BUTTON_ICON",
MENU_COMMENTS_CHECKBOX : "MENU_COMMENTS_CHECKBOX",
MENU_REFRESH_COMMENTS_BUTTON : "MENU_REFRESH_COMMENTS_BUTTON",
MENU_CLEAR_BUTTON : "MENU_CLEAR_BUTTON",
OVERVIEW_DIALOG_DIV : "OVERVIEW_DIALOG_DIV",
MENU_SHOW_OVERVIEW_BUTTON : "MENU_SHOW_OVERVIEW_BUTTON",
MENU_VERSION_DIV: "MENU_VERSION_DIV",
};
module.exports = PanelControlElementType;
"use strict";
/* exported logger */
var AbstractGuiElement = require('../AbstractGuiElement');
var OverviewDialog = require('../OverviewDialog');
var PanelControlElementType = require('../PanelControlElementType');
var Functions = require('../../Functions');
var logger = require('../../logger');
function TopMenu(params) {
AbstractGuiElement.call(this, params);
var self = this;
self._createGui();
}
TopMenu.prototype = Object.create(AbstractGuiElement.prototype);
TopMenu.prototype.constructor = TopMenu;
TopMenu.prototype._createGui = function() {
var self = this;
var overviewDialogDiv = Functions.createElement({
type : "div",
name : "overviewDialog"
});
self.getElement().appendChild(overviewDialogDiv);
self.setControlElement(PanelControlElementType.OVERVIEW_DIALOG_DIV, overviewDialogDiv);
var hideButtonDiv = Functions.createElement({
type : "div",
className : "headerHideDivButton"
});
self.getElement().appendChild(hideButtonDiv);
var hideButton = Functions.createElement({
type : "button",
className : "headerHideButton",
name : "hideButton",
});
hideButtonDiv.appendChild(hideButton);
self.setControlElement(PanelControlElementType.MENU_HIDE_LEFT_PANEL_BUTTON, hideButton);
var hideButtonIcon = Functions.createElement({
type : "i",
className : "fa fa-chevron-left",
name : "hideButtonIcon",
});
hideButton.appendChild(hideButtonIcon);
self.setControlElement(PanelControlElementType.MENU_HIDE_LEFT_PANEL_BUTTON_ICON, hideButtonIcon);
var versionDiv = Functions.createElement({
type : "div",
className: "headerTextBold",
name : "versionDiv"
});
self.getElement().appendChild(versionDiv);
self.setControlElement(PanelControlElementType.MENU_VERSION_DIV, versionDiv);
var showOverviewDiv = Functions.createElement({
type : "div",
style : "float: left;",
});
self.getElement().appendChild(showOverviewDiv);
var showOverviewButton = Functions.createElement({
type : "button",
className : "overview_button",
name : "showOverviewButton",
content : "<i class='fa fa-sitemap' style='font-size:18px; font-weight:400; padding-right:10px;'/>SHOW OVERVIEW",
style : "display:none",
});
showOverviewDiv.appendChild(showOverviewButton);
self.setControlElement(PanelControlElementType.MENU_SHOW_OVERVIEW_BUTTON, showOverviewButton);
var rightHeaderMenuDiv = Functions.createElement({
type : "div",
className : "rightHeaderMenu",
});
self.getElement().appendChild(rightHeaderMenuDiv);
var div4checkboxes = Functions.createElement({
type : "div",
className : "div4checkboxes",
});
rightHeaderMenuDiv.appendChild(div4checkboxes);
var legendCheckbox = Functions.createElement({
type : "input",
inputType : "checkbox",
name : "legendCheckbox",
});
div4checkboxes.appendChild(legendCheckbox);
self.setControlElement(PanelControlElementType.MENU_LEGEND_CHECKBOX, legendCheckbox);
div4checkboxes.appendChild(Functions.createElement({
type : "label",
content : "LEGEND",
}));
var commentCheckbox = Functions.createElement({
type : "input",
inputType : "checkbox",
name : "commentCheckbox",
});
div4checkboxes.appendChild(commentCheckbox);
self.setControlElement(PanelControlElementType.MENU_COMMENTS_CHECKBOX, commentCheckbox);
div4checkboxes.appendChild(Functions.createElement({
type : "label",
content : "COMMENTS",
}));
var refreshCommentButton = Functions.createElement({
type : "button",
className : "overview_button",
name : "refreshCommentButton",
content : "<i class='fa fa-refresh' style='font-size:21px; font-weight:400;'></i>",
style : "display:none",
});
div4checkboxes.appendChild(refreshCommentButton);
self.setControlElement(PanelControlElementType.MENU_REFRESH_COMMENTS_BUTTON, refreshCommentButton);
var clearButton = Functions.createElement({
type : "button",
className : "overview_button",
name : "clearButton",
content : "<i class='fa fa-times' style='font-size:18px; font-weight:300; padding-right:10px;'></i>CLEAR",
});
rightHeaderMenuDiv.appendChild(clearButton);
self.setControlElement(PanelControlElementType.MENU_CLEAR_BUTTON, clearButton);
};
TopMenu.prototype.init = function() {
var self = this;
self.getControlElement(PanelControlElementType.MENU_LEGEND_CHECKBOX).onclick = function() {
var legend = self.getLegend();
if (this.checked) {
legend.show();
} else {
legend.hide();
}
};
var hideButton = self.getControlElement(PanelControlElementType.MENU_HIDE_LEFT_PANEL_BUTTON);
var icon = self.getControlElement(PanelControlElementType.MENU_HIDE_LEFT_PANEL_BUTTON_ICON);
hideButton.onclick = function() {
if (icon.className.indexOf("fa-chevron-left") >= 0) {
icon.className = "fa fa-chevron-right";
self.getLeftPanel().hide();
} else {
icon.className = "fa fa-chevron-left";
self.getLeftPanel().show();
}
google.maps.event.trigger(self.getMap().getGoogleMap(), 'resize');
};
var project = self.getMap().getProject();
self.getControlElement(PanelControlElementType.MENU_VERSION_DIV).innerHTML = project.getVersion();
var commentCheckbox = self.getControlElement(PanelControlElementType.MENU_COMMENTS_CHECKBOX);
var refreshCommentButton = self.getControlElement(PanelControlElementType.MENU_REFRESH_COMMENTS_BUTTON);
commentCheckbox.onclick = function() {
ServerConnector.getSessionData(project).setShowComments(commentCheckbox.checked);
if (commentCheckbox.checked) {
refreshCommentButton.style.display = 'inline';
} else {
refreshCommentButton.style.display = 'none';
}
return self.getMap().refreshComments();
};
refreshCommentButton.onclick = (function() {
return function() {
self.getMap().refreshComments();
return false;
};
})();
var clearButton = self.getControlElement(PanelControlElementType.MENU_CLEAR_BUTTON);
clearButton.onclick = (function() {
return function() {
self.getMap().clearData();
return false;
};
})();
if (project.getTopOverviewImage() !== undefined && project.getTopOverviewImage() !== null) {
var overviewDialog = new OverviewDialog({
customMap : self.getMap(),
element : self.getControlElement(PanelControlElementType.OVERVIEW_DIALOG_DIV)
});
var showOverviewButton = self.getControlElement(PanelControlElementType.MENU_SHOW_OVERVIEW_BUTTON);
showOverviewButton.onclick = (function() {
return function() {
overviewDialog.showOverview();
return false;
};
})();
showOverviewButton.style.display = "";
}
if (ServerConnector.getSessionData().getShowComments()) {
self.getControlElement(PanelControlElementType.MENU_COMMENTS_CHECKBOX).checked = true;
return self.getMap().refreshComments();
} else {
return Promise.resolve();
}
};
TopMenu.prototype.setLegend = function(legend) {
this._legend = legend;
};
TopMenu.prototype.getLegend = function() {
return this._legend;
};
TopMenu.prototype.setLeftPanel = function(leftPanel) {
this._leftPanel = leftPanel;
};
TopMenu.prototype.getLeftPanel = function() {
return this._leftPanel;
};
module.exports = TopMenu;
\ No newline at end of file
......@@ -7,10 +7,11 @@ var DbOverlayCollection = require('./map/overlay/DbOverlayCollection');
var ConfigurationType = require('./ConfigurationType');
var ControlType = require('./map/ControlType');
var CustomMap = require('./map/CustomMap');
var OverviewDialog = require('./gui/OverviewDialog');
var SearchDbOverlay = require('./map/overlay/SearchDbOverlay');
var LeftPanel = require('./gui/leftPanel/LeftPanel');
var TopMenu = require('./gui/topMenu/TopMenu');
var Legend = require('./gui/Legend');
var OriginalGuiConnector = require('./GuiConnector');
var OriginalServerConnector = require('./ServerConnector');
......@@ -155,6 +156,19 @@ function create(params) {
element : document.getElementById("leftPanel"),
customMap : result
});
var topMenu = new TopMenu({
element : document.getElementById("menuBelt"),
customMap : result
});
var legend = new Legend({
element : document.getElementById("legend"),
customMap : result
});
topMenu.setLegend(legend);
topMenu.setLeftPanel(leftPanel);
return new Promise(function(resolve, reject) {
insertGoogleAnalyticsCode(result).then(function(){
......@@ -162,81 +176,8 @@ function create(params) {
}).then(function(){
return createLegend(document.getElementById("legend"));
}).then(function(){
document.getElementsByName("legendCheckbox")[0].onclick = function(){
var legend = document.getElementById("legend");
if (this.checked) {
legend.style.display="block";
} else {
legend.style.display="none";
}
};
var hideButton = document.getElementsByName("hideButton")[0];
var icon = document.getElementsByName("hideButtonIcon")[0];
hideButton.onclick = function(){
if (icon.className.indexOf("fa-chevron-left")>=0) {
icon.className = "fa fa-chevron-right";
leftPanel.hide();
} else {
icon.className = "fa fa-chevron-left";
leftPanel.show();
}
google.maps.event.trigger(result.getGoogleMap(), 'resize');
};
var project = params.project;
if (project===undefined) {
project = params.getProject();
}
document.getElementsByName("versionDiv")[0].innerHTML=project.getVersion();
var commentCheckbox = document.getElementsByName("commentCheckbox")[0];
var refreshCommentButton = document.getElementsByName("refreshCommentButton")[0];
commentCheckbox.onclick = function() {
ServerConnector.getSessionData(project).setShowComments(commentCheckbox.checked);
if (commentCheckbox.checked) {
refreshCommentButton.style.display = 'inline';
} else {
refreshCommentButton.style.display = 'none';
}
return result.refreshComments();
};
refreshCommentButton.onclick = (function() {
return function() {
result.refreshComments();
return false;
};
})();
var clearButton = document.getElementsByName("clearButton")[0];
clearButton.onclick = (function() {
return function() {
result.clearData();
return false;
};
})();
if (project.getTopOverviewImage()!== undefined && project.getTopOverviewImage()!== null) {
var overviewDialog = new OverviewDialog({
customMap: result,
element: document.getElementsByName("overviewDialog")[0]
});
var showOverviewButton = document.getElementsByName("showOverviewButton")[0];
showOverviewButton.onclick = (function() {
return function() {
overviewDialog.showOverview();
return false;
};
})();
showOverviewButton.style.display="";
}
if (ServerConnector.getSessionData().getShowComments()) {
result.getControl(ControlType.COMMENT_CHECKBOX).checked=true;
return result.refreshComments();
} else {
return Promise.resolve();
}}).then(function(){
return topMenu.init();
}).then(function(){
if (GuiConnector.getParams["layout"] !== undefined) {
var layouts = params.project.getModel().getLayouts();
var found = false;
......
"use strict";
/* exported logger */
var Helper = require('../../helper');
require('../../mocha-config.js');
var TopMenu = require('../../../../main/js/gui/topMenu/TopMenu');
var chai = require('chai');
var assert = chai.assert;
var logger = require('../../logger');
describe('TopMenu', function() {
var helper;
before(function() {
helper = new Helper();
});
it('constructor', function() {
var map = helper.createCustomMap();
new TopMenu({
element : testDiv,
customMap : map
});
assert.equal(logger.getWarnings().length, 0);
});
it('init', function() {
var map = helper.createCustomMap();
var topMenu = new TopMenu({
element : testDiv,
customMap : map
});
return topMenu.init();
});
});
......@@ -30,45 +30,7 @@ function Helper() {
Helper.prototype.createMenuDiv = function() {
var result = document.createElement("div");
var hideDiv = document.createElement("div");
result.appendChild(hideDiv);
var versionDiv = document.createElement("div");
versionDiv.setAttribute("name", "versionDiv");
result.appendChild(versionDiv);
var button = document.createElement("button");
button.setAttribute("name", "hideButton");
hideDiv.appendChild(button);
var icon = document.createElement("i");
icon.className = "fa fa-chevron-left";
icon.setAttribute("name", "hideButtonIcon");
button.appendChild(icon);
var legendCheckbox = document.createElement("input");
legendCheckbox.setAttribute("type", "checkbox");
legendCheckbox.setAttribute("name", "legendCheckbox");
result.appendChild(legendCheckbox);
var commentCheckbox = document.createElement("input");
commentCheckbox.setAttribute("type", "checkbox");
commentCheckbox.setAttribute("name", "commentCheckbox");
result.appendChild(commentCheckbox);
var refreshCommentButton = document.createElement("button");
refreshCommentButton.setAttribute("name", "refreshCommentButton");
result.appendChild(refreshCommentButton);
var clearButton = document.createElement("button");
clearButton.setAttribute("name", "clearButton");
result.appendChild(clearButton);
var showOverviewButton = document.createElement("button");
showOverviewButton.setAttribute("name", "showOverviewButton");
result.appendChild(showOverviewButton);
result.id="menuBelt";
return result;
};
......
File added
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment