Merge branch '421-problem-with-openlayers-on-screens-with-h-dpi-probably' into 'master'

Resolve "problem with openlayers on screens with h DPI (probably)"

Closes #421

See merge request piotr.gawron/minerva!312

frontend-js/src/main/css/global.css

@@ -71,7 +71,7 @@
     left: 0
 }
 
-.menuBelt {
+.minerva-top-menu {
     width: 100%;
     min-height: 36px;
     height: auto;
@@ -186,7 +186,7 @@
     -webkit-border-vertical-spacing: 2px;
 }
 
-.mapClass {
+.minerva-map {
     position: absolute;
     top: 36px;
     bottom: 0;
@@ -378,8 +378,13 @@ table.minerva-window-drug-table td {
     border: 1px solid black;
 }
 
+.minerva-root {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
 .minerva-left-panel {
-    display: table-cell;
     position: relative;
     float: left;
     border: none;
@@ -400,6 +405,29 @@ table.minerva-window-drug-table td {
     line-height: 24px;
 }
 
+.minerva-middle-panel {
+    height: 100%;
+    width: 100%;
+}
+
+.minerva-middle-panel > div {
+    height: 100%;
+    width: 100%;
+    position: relative;
+}
+
+.minerva-plugin-split-bar {
+    width: 5px;
+    height: 100%;
+    clear: both;
+    vertical-align: top;
+    border-left: 1px dotted gray;
+    cursor: col-resize;
+}
+
+.minerva-plugin {
+}
+
 .minerva-annotation-row-odd {
     padding: 5px;
     background-color: #EAEAEA;

frontend-js/src/main/js/Functions.js

@@ -260,6 +260,20 @@ Functions.getElementByName = function (element, name) {
   return undefined;
 };
 
+
+/**
+ *
+ * @param {HTMLElement}element
+ * @param {string} name class name
+ * @returns {HTMLElement|undefined}
+ */
+Functions.getElementByClassName = function (element, name) {
+  if (name.indexOf(".") !== 0) {
+    name = "." + name;
+  }
+  return $(name, element)[0];
+};
+
 /**
  *
  * @param {Object} params

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

@@ -147,55 +147,46 @@ function insertGoogleAnalyticsCode() {
 function createDivStructure(element) {
   var tableDiv = functions.createElement({
     type: "div",
-    style: "display: table; width:100%; height: 100%"
+    className: "minerva-root"
   });
   element.appendChild(tableDiv);
   var leftPanelDiv = functions.createElement({
     type: "div",
-    name: "leftPanelDiv",
     className: "minerva-left-panel"
   });
   tableDiv.appendChild(leftPanelDiv);
   var middlePanelDiv = functions.createElement({
     type: "div",
-    style: "display: table-cell;height:100%;width:100%;",
-    name: "minerva-middle-panel"
+    className: "minerva-middle-panel"
   });
   tableDiv.appendChild(middlePanelDiv);
 
-  var middlePanelContainerDiv = functions.createElement({
-    type: "div",
-    style: "height:100%;width:100%;position:relative"
-  });
+  //this container is required because google maps API modifies DOM and it will crash
+  var middlePanelContainerDiv = functions.createElement({type: "div"});
   middlePanelDiv.appendChild(middlePanelContainerDiv);
 
   var splitBar = functions.createElement({
     type: "div",
-    name: "minerva-plugin-split-bar",
-    style: "width:5px;height:100%;clear: both;display: table-cell;vertical-align:top;border-left:1px dotted gray;cursor:col-resize",
+    className: "minerva-plugin-split-bar",
     content: "&nbsp"
   });
-  element.appendChild(splitBar);
+  tableDiv.appendChild(splitBar);
 
   var rightPanelDiv = functions.createElement({
     type: "div",
-    className: "minerva-plugin",
-    style: "display: table-cell;",
-    name: "minerva-plugin-div"
+    className: "minerva-plugin"
   });
-  element.appendChild(rightPanelDiv);
+  tableDiv.appendChild(rightPanelDiv);
 
   var menuDiv = functions.createElement({
     type: "div",
-    name: "menuDiv",
-    className: "menuBelt"
+    className: "minerva-top-menu"
   });
   middlePanelContainerDiv.appendChild(menuDiv);
 
   var mapDiv = functions.createElement({
     type: "div",
-    name: "mapDiv",
-    className: "mapClass"
+    className: "minerva-map"
   });
   middlePanelContainerDiv.appendChild(mapDiv);
 
@@ -273,13 +264,13 @@ function modifyParamsForTouchTable(params) {
 }
 
 function assignSplitBarHandler(customMap, pluginManager) {
-  var splitBar = $('[name="minerva-plugin-split-bar"]');
-  var rightPanelDiv = $('[name="minerva-plugin-div"]');
+  var splitBar = $('.minerva-plugin-split-bar');
+  var rightPanelDiv = $('.minerva-plugin');
   var mouseDownHandler = function (e) {
     e.preventDefault();
     //TODO should use global size (but element size)
     var x = $("body").width() - e.pageX;
-    $(rightPanelDiv).css("width", x);
+    $(rightPanelDiv).css("flex", "0 0 " + x + "px");
     customMap.getMapCanvas().triggerListeners('resize');
     return pluginManager.callListeners("onResize");
   };
@@ -299,9 +290,8 @@ function create(params) {
   }
   params.setServerConnector(ServerConnector);
   initGlobals(params);
-  params.getElement().style.display = "table";
-  params.getElement().innerHTML = "<div style='vertical-align:middle;display:table-cell;text-align: center'>"
-    + "<img src='resources/images/icons/ajax-loader.gif'/>" + "</div>";
+  params.getElement().innerHTML = "<div style='position:relative; width:100%;height:100%'>"
+    + "<img src='resources/images/icons/ajax-loader.gif' style='position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;'/>" + "</div>";
 
   // make sure that we are logged in
   return ServerConnector.createSession().then(function () {
@@ -321,7 +311,7 @@ function create(params) {
       promise = functions.loadScript("https://maps.google.com/maps/api/js?libraries=drawing&key=" + params.getConfiguration().getOption(ConfigurationType.GOOGLE_MAPS_API_KEY).getValue());
     }
     return promise;
-  }).then(function(){
+  }).then(function () {
     var element = params.getElement();
 
     verifyBrowser();
@@ -330,7 +320,7 @@ function create(params) {
 
     params.getElement().innerHTML = "";
     createDivStructure(element);
-    params.setElement(functions.getElementByName(element, "mapDiv"));
+    params.setElement(functions.getElementByClassName(element, "minerva-map"));
 
     customMap = new CustomMap(params);
 
@@ -340,12 +330,12 @@ function create(params) {
     });
 
     leftPanel = new LeftPanel({
-      element: functions.getElementByName(element, "leftPanelDiv"),
+      element: functions.getElementByClassName(element, "minerva-left-panel"),
       customMap: customMap
     });
 
     var pluginManager = new PluginManager({
-      element: functions.getElementByName(element, "minerva-plugin-div"),
+      element: functions.getElementByClassName(element, "minerva-plugin"),
       map: customMap,
       project: params.getProject(),
       configuration: params.getConfiguration()
@@ -354,7 +344,7 @@ function create(params) {
     assignSplitBarHandler(customMap, pluginManager);
 
     topMenu = new TopMenu({
-      element: functions.getElementByName(element, "menuDiv"),
+      element: functions.getElementByClassName(element, "minerva-top-menu"),
       customMap: customMap
     });