TopMenu extracted to js class

frontend-js/src/main/js/gui/Legend.js

+"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;

frontend-js/src/main/js/gui/PanelControlElementType.js

@@ -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;

frontend-js/src/main/js/gui/topMenu/TopMenu.js

+"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

frontend-js/src/main/js/minerva.js

@@ -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;

frontend-js/src/test/js/gui/topMenu/TopMenu-test.js

+"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();
+
+  });
+
+});

frontend-js/src/test/js/helper.js

@@ -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;
 };