diff --git a/frontend-js/src/main/js/GuiConnector.js b/frontend-js/src/main/js/GuiConnector.js index 6ec2765271b5c45240e337fe3844710a35c4a5d9..c90b252dfc3a48c735e1b480e9d3c1f1d5698b29 100644 --- a/frontend-js/src/main/js/GuiConnector.js +++ b/frontend-js/src/main/js/GuiConnector.js @@ -24,7 +24,7 @@ GuiConnector.yPos = 0; GuiConnector.init = function() { var self = this; - + // bootstrap tab initialization $("ul.nav-tabs a").click(function(e) { e.preventDefault(); @@ -48,15 +48,17 @@ GuiConnector.init = function() { }); }); - self._windowResizeEvents = []; + if (self._windowResizeEvents === undefined) { + self._windowResizeEvents = []; - if (window.onresize !== null) { - self.addWindowResizeEvent(window.onresize); - } + if (window.onresize !== null && window.onresize !== undefined) { + self.addWindowResizeEvent(window.onresize); + } - window.onresize = function() { - for (var i = 0; i < self._windowResizeEvents.length; i++) { - self._windowResizeEvents[i](); + window.onresize = function() { + for (var i = 0; i < self._windowResizeEvents.length; i++) { + self._windowResizeEvents[i](); + } } } }; diff --git a/frontend-js/src/main/js/gui/leftPanel/AbstractDbPanel.js b/frontend-js/src/main/js/gui/leftPanel/AbstractDbPanel.js index 7ccde8901bc33e9df583e658179bbcee709c7d29..4c7b937b7b0bb93bcd137e0149c40ea3ec83dd4b 100644 --- a/frontend-js/src/main/js/gui/leftPanel/AbstractDbPanel.js +++ b/frontend-js/src/main/js/gui/leftPanel/AbstractDbPanel.js @@ -10,108 +10,148 @@ var PanelControlElementType = require('../PanelControlElementType'); var logger = require('../../logger'); var Functions = require('../../Functions'); - function AbstractPanel(params) { Panel.call(this, params); - var self = this; this._initializeGui(); - this.setOverlayDb (self.getMap().getOverlayByName(params.panelName)); + this.setOverlayDb(self.getMap().getOverlayByName(params.panelName)); this._createEventHandlers(); this._tabIdCount = 0; + } AbstractPanel.prototype = Object.create(Panel.prototype); AbstractPanel.prototype.constructor = AbstractPanel; - -AbstractPanel.prototype._createEventHandlers = function(){ +AbstractPanel.prototype._createEventHandlers = function() { var self = this; var searchButton = self.getControlElement(PanelControlElementType.SEARCH_BUTTON); - var searchInput =self.getControlElement(PanelControlElementType.SEARCH_INPUT); + var searchInput = self.getControlElement(PanelControlElementType.SEARCH_INPUT); - var searchByQuery = function(){ + var searchByQuery = function() { return self.searchByQuery(); }; - searchButton.onclick = searchByQuery; - searchInput.onkeypress = function(event){ + searchInput.onkeypress = function(event) { if (event.keyCode === 13) { - searchByQuery(); + searchByQuery(); } }; - $(searchInput).typeahead({ - minLength: 1, - },{ - source: function(query, callback){ + minLength : 1, + }, { + source : function(query, callback) { callback(self.getAutocomplete(query)); } }); $(searchInput).on('typeahead:select', function() { - searchByQuery(); + searchByQuery(); }); - self.getOverlayDb().addListener("onSearch", function() { return self.refreshSearchResults(); }); + + GuiConnector.addWindowResizeEvent(function() { + self.onresize(); + }); + + $("a[href='#"+self.getElement().id+"']").on('shown.bs.tab', function(e) { + self.onresize(); + }); + }; -AbstractPanel.prototype._initializeGui = function(){ - var searchQueryDiv = Functions.createElement({type:"div", name:"searchQuery", className:"searchPanel" }); +AbstractPanel.prototype._initializeGui = function() { + var searchQueryDiv = Functions.createElement({ + type : "div", + name : "searchQuery", + className : "searchPanel" + }); this.getElement().appendChild(searchQueryDiv); this.setControlElement(PanelControlElementType.SEARCH_DIV, searchQueryDiv); - var searchLabel = Functions.createElement({type:"div",name:"searchLabel", content:"SEARCH:"} ); + var searchLabel = Functions.createElement({ + type : "div", + name : "searchLabel", + content : "SEARCH:" + }); searchQueryDiv.appendChild(searchLabel); this.setControlElement(PanelControlElementType.SEARCH_LABEL, searchLabel); - var searchInputDiv = Functions.createElement({type:"div",style: "display:table"}); + var searchInputDiv = Functions.createElement({ + type : "div", + style : "display:table" + }); searchQueryDiv.appendChild(searchInputDiv); - var searchInputCell = Functions.createElement({type:"div",style: "display:table-cell"}); + var searchInputCell = Functions.createElement({ + type : "div", + style : "display:table-cell" + }); searchInputDiv.appendChild(searchInputCell); - - var searchInput = Functions.createElement({type:"input", name:"searchInput",className: "input-field typeahead" }); + + var searchInput = Functions.createElement({ + type : "input", + name : "searchInput", + className : "input-field typeahead" + }); searchInputCell.appendChild(searchInput); this.setControlElement(PanelControlElementType.SEARCH_INPUT, searchInput); - var searchButtonCell = Functions.createElement({type:"div",style: "display:table-cell"}); + var searchButtonCell = Functions.createElement({ + type : "div", + style : "display:table-cell" + }); searchInputDiv.appendChild(searchButtonCell); - - var searchButton = Functions.createElement({type:"a", className:"searchButton",content:'<img src="resources/images/icons/search.png"/>'}); - searchButton.href="#"; + + var searchButton = Functions.createElement({ + type : "a", + className : "searchButton", + content : '<img src="resources/images/icons/search.png"/>' + }); + searchButton.href = "#"; searchButtonCell.appendChild(searchButton); this.setControlElement(PanelControlElementType.SEARCH_BUTTON, searchButton); - var searchResultsDiv = Functions.createElement({type:"div", name:"searchResults", className:"tabbable boxed parentTabs" }); + var searchResultsDiv = Functions.createElement({ + type : "div", + name : "searchResults", + className : "tabbable boxed parentTabs" + }); this.getElement().appendChild(searchResultsDiv); this.setControlElement(PanelControlElementType.SEARCH_RESULTS_DIV, searchResultsDiv); - var searchResultsNavTabDiv = Functions.createElement({type:"ul", className:"nav nav-tabs", content:'<li class="active"><a href="#set1"/></li>'} ); + var searchResultsNavTabDiv = Functions.createElement({ + type : "ul", + className : "nav nav-tabs", + content : '<li class="active"><a href="#set1"/></li>' + }); searchResultsDiv.appendChild(searchResultsNavTabDiv); this.setControlElement(PanelControlElementType.SEARCH_RESULTS_NAV_TAB, searchResultsNavTabDiv); - var searchResultsContentTabDiv = Functions.createElement({type:"div", className:"tab-content", content: '<div class="tab-pane fade active in" name="set1" id="set1"/>'}); + var searchResultsContentTabDiv = Functions.createElement({ + type : "div", + className : "tab-content", + content : '<div class="tab-pane fade active in" name="set1" id="set1"/>' + }); searchResultsDiv.appendChild(searchResultsContentTabDiv); this.setControlElement(PanelControlElementType.SEARCH_RESULTS_CONTENT_TAB, searchResultsContentTabDiv); }; - -AbstractPanel.prototype.setOverlayDb = function(overlayDb){ +AbstractPanel.prototype.setOverlayDb = function(overlayDb) { if (overlayDb === undefined) { - throw new Error("Undefined overlayDb for panel: "+this.getPanelName()); + throw new Error("Undefined overlayDb for panel: " + this.getPanelName()); } this._overlayDb = overlayDb; }; -AbstractPanel.prototype.getOverlayDb = function(){ +AbstractPanel.prototype.getOverlayDb = function() { return this._overlayDb; }; @@ -137,18 +177,15 @@ AbstractPanel.prototype.refreshSearchResults = function() { for (var i = 0; i < queries.length; i++) { promises.push(searchDb.getElementsByQuery(queries[i])); } - return new Promise(function(resolve, reject){ - return Promise.all(promises).then(function(results) { - for (var i = 0; i < queries.length; i++) { - self.addResultTab(queries[i], results[i]); - } - resolve(); - }).catch(reject); + return Promise.all(promises).then(function(results) { + for (var i = 0; i < queries.length; i++) { + self.addResultTab(queries[i], results[i]); + } + self.onresize(); }); }; - AbstractPanel.prototype.getAutocomplete = function() { logger.warn("Get autocomplete not implemented"); }; @@ -194,7 +231,8 @@ AbstractPanel.prototype.addResultTab = function(query, elements) { var contentDiv = document.createElement("div"); contentDiv.className = "pre-scrollable " + contentClass; - contentDiv.style.height = "100%"; + contentDiv.style.maxHeight = "10px"; + contentDiv.id = tabId; contentElement.appendChild(contentDiv); @@ -249,4 +287,26 @@ AbstractPanel.prototype.createTargetRow = function(target, icon) { return result; }; +AbstractPanel.prototype.onresize = function() { + var self = this; + var footerPosition = window.innerHeight; + if (self.getParent() !== undefined) { + footerPosition = $(self.getParent().getFooter().getElement()).offset().top; + } + + //compute the width (we can only compute it for visible elements) + var size = 100000; + + $(".pre-scrollable", self.getElement()).each(function(index, element) { + if ($(element).is(":visible")) { + size = Math.min(size, footerPosition - $(element).offset().top) + } + }); + if (size !== 100000) { + $(".pre-scrollable", self.getElement()).each(function(index, element) { + $(element).css('max-height', size); + }); + } +}; + module.exports = AbstractPanel; diff --git a/frontend-js/src/main/js/gui/leftPanel/LeftPanel.js b/frontend-js/src/main/js/gui/leftPanel/LeftPanel.js index 23bf3b85ac3009eec0aec7ca0988fbda4ec50962..a9b7aaeeccb9aa9a6ab64c90c834bd45b41c778a 100644 --- a/frontend-js/src/main/js/gui/leftPanel/LeftPanel.js +++ b/frontend-js/src/main/js/gui/leftPanel/LeftPanel.js @@ -99,11 +99,11 @@ LeftPanel.prototype._createPanelGui = function() { var footerDiv = Functions.createElement({ type : "div", }); - new Footer({ + self.getElement().appendChild(footerDiv); + self.setFooter(new Footer({ element : footerDiv, customMap : self.getMap(), - }); - self.getElement().appendChild(footerDiv); + })); for (var i = 0; i < panels.length; i++) { self.addTab(panels[i], tabMenuDiv, tabContentDiv); @@ -163,6 +163,7 @@ LeftPanel.prototype.addTab = function(params, navElement, contentElement) { this._panels.push(new params.panelClass({ element : contentDiv, customMap : self.getMap(), + parent : self, })); }; @@ -173,4 +174,12 @@ LeftPanel.prototype.show = function() { this.getElement().style.display = "block"; }; +LeftPanel.prototype.setFooter = function(footer) { + this._footer = footer; +}; + +LeftPanel.prototype.getFooter = function() { + return this._footer; +}; + module.exports = LeftPanel; diff --git a/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js b/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js index 30e1c5b843e223c437ee92d69c408cb6d23eacc5..bc913c5257417b5a8202281f675acfdf05d160de 100644 --- a/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js +++ b/frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js @@ -15,6 +15,7 @@ function OverlayPanel(params) { var self = this; + $(self.getElement()).addClass("pre-scrollable"); self._createOverlayPanelGui(); var addButton = this.getControlElement(PanelControlElementType.OVERLAY_ADD_OVERLAY_BUTTON); @@ -26,6 +27,14 @@ function OverlayPanel(params) { var titleElement = this.getControlElement(PanelControlElementType.OVERLAY_CUSTOM_OVERLAY_TITLE); self.setCustomOverlaysMessage(titleElement.innerHTML); + GuiConnector.addWindowResizeEvent(function() { + self.onresize(); + }); + + $("a[href='#"+self.getElement().id+"']").on('shown.bs.tab', function(e) { + self.onresize(); + }); + self.refresh(); } @@ -292,6 +301,7 @@ OverlayPanel.prototype.refresh = function() { } } + self.onresize(); return null; }); }; @@ -417,6 +427,26 @@ OverlayPanel.prototype.openAddOverlayDialog = function() { }); }; +OverlayPanel.prototype.onresize = function() { + var self = this; + var footerPosition = window.innerHeight; + if (self.getParent() !== undefined) { + footerPosition = $(self.getParent().getFooter().getElement()).offset().top; + } + + var element = self.getElement(); + + + // compute the width (we can only compute it for visible elements) + if ($(element).is(":visible")) { + $(element).css('max-height', 10); + + var size = footerPosition - $(element).offset().top; + $(element).css('max-height', size); + } +}; + + OverlayPanel.prototype.init = function() { this.refresh(); }; diff --git a/frontend-js/src/main/js/gui/leftPanel/Panel.js b/frontend-js/src/main/js/gui/leftPanel/Panel.js index 05df3b489b16d998767f6d8b523fa48e62c73e2e..d115067795dbb9cf1782d88e38370c69b74518ec 100644 --- a/frontend-js/src/main/js/gui/leftPanel/Panel.js +++ b/frontend-js/src/main/js/gui/leftPanel/Panel.js @@ -16,6 +16,8 @@ function Panel(params) { self.setPanelName(params.panelName); + this.setParent(params.parent); + } Panel.prototype = Object.create(AbstractGuiElement.prototype); @@ -376,7 +378,6 @@ Panel.prototype.openDialog = function(content, options) { $(div).dialog("open"); }; - Panel.prototype.createTableRow = function(elements) { var row = Functions.createElement({ type : "div", @@ -398,4 +399,12 @@ Panel.prototype.init = function() { throw new Error(this.getPanelName() + " Not implemented"); }; +Panel.prototype.setParent = function(parent) { + this._parent = parent; +}; + +Panel.prototype.getParent = function() { + return this._parent; +}; + module.exports = Panel; diff --git a/frontend-js/src/main/js/minerva.js b/frontend-js/src/main/js/minerva.js index f21151fa300cd736dfa680f136d14fb64fa0f220..2d5bf4c2d19e95f656c41b5363490678c8bf4163 100644 --- a/frontend-js/src/main/js/minerva.js +++ b/frontend-js/src/main/js/minerva.js @@ -144,7 +144,7 @@ function create(params) { if (global.GuiConnector === undefined) { global.GuiConnector = OriginalGuiConnector; global.ServerConnector = OriginalServerConnector; - if (params.debug) { + if (params.isDebug()) { logger.setLevel("debug"); } else { logger.setLevel("info"); @@ -241,6 +241,10 @@ function create(params) { if (submodelId !== undefined) { result.openSubmodel(submodelId); } + + if (params.isDebug()) { + global.leftPanel = leftPanel; + } return result; }); diff --git a/frontend-js/src/test/js/mocha-config.js b/frontend-js/src/test/js/mocha-config.js index 880c5de972918543123ff628a49278c8a8775700..b00b230602cce1bf6e212a4de69957cc4bdf9671 100644 --- a/frontend-js/src/test/js/mocha-config.js +++ b/frontend-js/src/test/js/mocha-config.js @@ -77,6 +77,7 @@ before(function() { }); beforeEach(function() { + window.onresize = undefined; logger.flushBuffer();