Commit c2bd066e authored by Piotr Gawron's avatar Piotr Gawron
Browse files

basic plugin functionality that allows to register plugin

parent a800e638
......@@ -22,8 +22,8 @@
"browserify": "^13.1.1",
"chai": "^3.5.0",
"clean-css-cli": "^4.1.10",
"del": "^3.0.0",
"datatables.net": "^1.10.13",
"del": "^3.0.0",
"exorcist": "^0.4.0",
"file-url": "^2.0.0",
"istanbul": "0.4.5",
......
......@@ -11,6 +11,7 @@ var logger = require('../../logger');
function GuiUtils(configuration) {
var self = this;
self.setConfiguration(configuration);
self._tabIdCounter = 0;
}
GuiUtils.prototype = Object.create(AbstractGuiElement.prototype);
......@@ -376,7 +377,7 @@ GuiUtils.prototype.createAliasElement = function (params) {
div.appendChild(self.createParamLine("Formula: ", alias.getFormula()));
div.appendChild(self.createArrayParamLine("Former symbols: ", alias.getFormerSymbols()));
div.appendChild(self.createPostTranslationalModifications("PostTranslational modifications: ", alias
.getOther('modifications')));
.getOther('modifications')));
div.appendChild(self.createParamLine("Charge: ", alias.getCharge()));
div.appendChild(self.createArrayParamLine("Synonyms: ", alias.getSynonyms()));
div.appendChild(self.createLabelText(alias.getDescription()));
......@@ -416,7 +417,7 @@ GuiUtils.prototype.createModifiersLine = function (label, value) {
return result;
};
GuiUtils.prototype.createTabMenuObject = function(params) {
GuiUtils.prototype.createTabMenuObject = function (params) {
var name = params.name;
var id = params.id;
var navigationBar = params.navigationBar;
......@@ -434,7 +435,7 @@ GuiUtils.prototype.createTabMenuObject = function(params) {
if (name !== undefined) {
navLink.innerHTML = name;
}
navLink.onclick = function() {
navLink.onclick = function () {
$(this).tab('show');
};
navLi.appendChild(navLink);
......@@ -444,7 +445,7 @@ GuiUtils.prototype.createTabMenuObject = function(params) {
return navLi;
};
GuiUtils.prototype.createTabContentObject = function(params) {
GuiUtils.prototype.createTabContentObject = function (params) {
var navigationObject = params.navigationObject;
var tabId = params.id;
var result = document.createElement("div");
......@@ -460,4 +461,81 @@ GuiUtils.prototype.createTabContentObject = function(params) {
return result;
};
GuiUtils.prototype.createTabDiv = function (params) {
var tabDiv = Functions.createElement({
type: "div",
name: "tabView",
className: "tabbable boxed parentTabs"
});
var tabMenuDiv = Functions.createElement({
type: "ul",
className: "nav nav-tabs"
});
tabDiv.appendChild(tabMenuDiv);
var tabContentDiv = Functions.createElement({
type: "div",
className: "tab-content"
});
tabDiv.appendChild(tabContentDiv);
if (params !== undefined && params.element !== undefined) {
params.element.appendChild(tabDiv);
}
return {
element: tabDiv,
menu: tabMenuDiv,
content: tabContentDiv,
tabId: params.id
}
};
GuiUtils.prototype.createTab = function (params) {
var self = this;
var tabData = params.tabData;
var tabId = tabData.tabId + "_tab_" + self._tabIdCounter;
self._tabIdCounter++;
var navClass = '';
var contentClass = 'tab-pane';
if (tabData.menu.children.length === 0) {
navClass = "active";
contentClass = "tab-pane active";
}
var navLi = document.createElement("li");
navLi.className = navClass;
var navLink = document.createElement("a");
navLink.href = "#" + tabId;
navLink.innerHTML = params.title;
navLink.onclick = function () {
$(this).tab('show');
};
navLi.appendChild(navLink);
tabData.menu.appendChild(navLi);
var contentDiv = document.createElement("div");
contentDiv.style.height = "100%";
contentDiv.className = contentClass;
contentDiv.id = tabId;
if (Functions.isDomElement(params.content)) {
contentDiv.appendChild(params.content);
} else {
contentDiv.innerHTML = params.content;
}
tabData.content.appendChild(contentDiv);
return {
title: navLink,
content: contentDiv
}
};
module.exports = GuiUtils;
......@@ -21,13 +21,13 @@ var Functions = require('../../Functions');
var logger = require('../../logger');
function LeftPanel(params) {
AbstractGuiElement.call(this, params);
var self = this;
AbstractGuiElement.call(this, params);
var self = this;
this._tabIdCount = 0;
this._panels = [];
this._tabIdCount = 0;
this._panels = [];
self._createPanelGui();
self._createPanelGui();
}
......@@ -35,297 +35,281 @@ LeftPanel.prototype = Object.create(AbstractGuiElement.prototype);
LeftPanel.prototype.constructor = LeftPanel;
LeftPanel.prototype._createPanelGui = function () {
var self = this;
var panels = self.getPanelsDefinition();
var headerDiv = Functions.createElement({
type: "div",
id: "headerPanel"
});
var header = new Header({
element: headerDiv,
customMap: self.getMap(),
});
self.getElement().appendChild(headerDiv);
var loginDialogDiv = Functions.createElement({
type: "div",
name: "loginDialog",
style: "display:none",
});
self.getElement().appendChild(loginDialogDiv);
this.setLoginDialog(new LoginDialog({
element: loginDialogDiv,
customMap: self.getMap(),
}));
var tabDiv = Functions.createElement({
type: "div",
name: "tabView",
className: "tabbable boxed parentTabs"
});
self.getElement().appendChild(tabDiv);
var tabMenuDiv = Functions.createElement({
type: "ul",
className: "nav nav-tabs"
});
tabDiv.appendChild(tabMenuDiv);
var tabContentDiv = Functions.createElement({
type: "div",
className: "tab-content"
});
tabDiv.appendChild(tabContentDiv);
self.setHeader(header);
var elementInfoDiv = Functions.createElement({
name: "elementInfoDiv",
type: "div",
style: "background-color:#f3f3f3",
className: "minerva-element-info-div",
});
self.elementInfoDiv = elementInfoDiv;
for (var i = 0; i < panels.length; i++) {
self.addTab(panels[i], tabMenuDiv, tabContentDiv);
}
var self = this;
var panels = self.getPanelsDefinition();
var headerDiv = Functions.createElement({
type: "div",
id: "headerPanel"
});
var header = new Header({
element: headerDiv,
customMap: self.getMap()
});
self.getElement().appendChild(headerDiv);
var loginDialogDiv = Functions.createElement({
type: "div",
name: "loginDialog",
style: "display:none"
});
self.getElement().appendChild(loginDialogDiv);
this.setLoginDialog(new LoginDialog({
element: loginDialogDiv,
customMap: self.getMap()
}));
var guiUtils = self.getGuiUtils();
var tabData = guiUtils.createTabDiv({
element: self.getElement(),
id: "left_panel"
});
self.setHeader(header);
var elementInfoDiv = Functions.createElement({
name: "elementInfoDiv",
type: "div",
style: "background-color:#f3f3f3",
className: "minerva-element-info-div"
});
self.elementInfoDiv = elementInfoDiv;
for (var i = 0; i < panels.length; i++) {
self.addTab(panels[i], tabData);
}
};
LeftPanel.prototype.getPanelsDefinition = function () {
return [{
name: "SEARCH",
className: "fa-search",
panelClass: SearchPanel,
}, {
name: "OVERLAYS",
className: "fa-th-list",
panelClass: OverlayPanel,
}, {
name: "SUBMAPS",
className: "fa-sitemap",
panelClass: SubmapPanel,
}, {
name: "INFO",
className: "fa-info",
panelClass: ProjectInfoPanel,
}];
return [{
name: "SEARCH",
className: "fa-search",
panelClass: SearchPanel
}, {
name: "OVERLAYS",
className: "fa-th-list",
panelClass: OverlayPanel
}, {
name: "SUBMAPS",
className: "fa-sitemap",
panelClass: SubmapPanel
}, {
name: "INFO",
className: "fa-info",
panelClass: ProjectInfoPanel
}];
};
LeftPanel.prototype.hideTab = function (panel) {
var self = this;
var panelDefinitions = self.getPanelsDefinition();
for (var i = 0; i < panelDefinitions.length; i++) {
if (panel instanceof panelDefinitions[i].panelClass) {
var liElement = $("li:has(a[href='#left_panel_tab_" + i + "'])", $(self.getElement()))[0];
if (liElement !== undefined) {
liElement.style.display = "none";
} else {
logger.warn("Cannot find tab link for panel: " + panel.getPanelName());
}
}
var self = this;
var panelDefinitions = self.getPanelsDefinition();
for (var i = 0; i < panelDefinitions.length; i++) {
if (panel instanceof panelDefinitions[i].panelClass) {
var liElement = $("li:has(a[href='#left_panel_tab_" + i + "'])", $(self.getElement()))[0];
if (liElement !== undefined) {
liElement.style.display = "none";
} else {
logger.warn("Cannot find tab link for panel: " + panel.getPanelName());
}
}
}
};
LeftPanel.prototype.init = function () {
var self = this;
var self = this;
var promises = [];
for (var i = 0; i < self._panels.length; i++) {
promises.push(self._panels[i].init());
}
promises.push(self.getHeader().init());
var initEvents = new Promise(function (resolve) {
self.getMap().addListener("onBioEntityClick", function (e) {
return self.showElementDetails(e.arg);
});
self.getMap().getOverlayByName("search").addListener("onSearch", function (e) {
if (e.arg.type === AbstractDbOverlay.QueryType.SEARCH_BY_COORDINATES) {
return self.showElementDetails(e.arg.identifiedElements[0][0]);
} else {
return self.showElementDetails(undefined);
}
});
resolve();
var promises = [];
for (var i = 0; i < self._panels.length; i++) {
promises.push(self._panels[i].init());
}
promises.push(self.getHeader().init());
var initEvents = new Promise(function (resolve) {
self.getMap().addListener("onBioEntityClick", function (e) {
return self.showElementDetails(e.arg);
});
self.getMap().getOverlayByName("search").addListener("onSearch", function (e) {
if (e.arg.type === AbstractDbOverlay.QueryType.SEARCH_BY_COORDINATES) {
return self.showElementDetails(e.arg.identifiedElements[0][0]);
} else {
return self.showElementDetails(undefined);
}
});
promises.push(initEvents);
resolve();
});
promises.push(initEvents);
promises.push(self.getLoginDialog().init());
return Promise.all(promises);
return Promise.all(promises);
};
LeftPanel.prototype.showElementDetails = function (element) {
var self = this;
var div = self.elementInfoDiv;
if (!$(div).hasClass("ui-dialog-content")) {
$(div).dialog({
resizable: false,
width: $(self.getElement()).width(),
height: 200,
beforeclose: function () {
$(this).dialog('option', 'position', [$(this).offset().left, $(this).offset().top]);
$(this).dialog('option', 'width', $(this).width());
$(this).dialog('option', 'height', $(this).height());
},
position: {
my: "left bottom",
at: "left bottom",
of: $(self.getElement())
}
}).siblings('.ui-dialog-titlebar').css("background", "gray");
}
var openTabName = $("[name='tabView'] > ul li.active a > .maintabdiv")[0].innerHTML;
var searchTabName = $("[name='tabView'] > ul li.active a > .maintabdiv")[1].innerHTML;
var isPanelHidden = (self.getElement().style.display === "none");
if (isPanelHidden) {
openTabName = undefined;
}
var self = this;
var div = self.elementInfoDiv;
if (!$(div).hasClass("ui-dialog-content")) {
$(div).dialog({
resizable: false,
width: $(self.getElement()).width(),
height: 200,
beforeclose: function () {
$(this).dialog('option', 'position', [$(this).offset().left, $(this).offset().top]);
$(this).dialog('option', 'width', $(this).width());
$(this).dialog('option', 'height', $(this).height());
},
position: {
my: "left bottom",
at: "left bottom",
of: $(self.getElement())
}
}).siblings('.ui-dialog-titlebar').css("background", "gray");
}
var openTabName = $("[name='tabView'] > ul li.active a > .maintabdiv")[0].innerHTML;
var searchTabName = $("[name='tabView'] > ul li.active a > .maintabdiv")[1].innerHTML;
var isPanelHidden = (self.getElement().style.display === "none");
if (isPanelHidden) {
openTabName = undefined;
}
if (element !== undefined && openTabName !== undefined && (openTabName.indexOf("SEARCH") === -1 || searchTabName !== "GENERIC")) {
var model = self.getMap().getSubmapById(element.getModelId()).getModel();
return model.getByIdentifiedElement(element, true).then(function (bioEntity) {
div.innerHTML = "";
div.appendChild(self.prepareElementDetailsContent(bioEntity));
$(div).dialog("open");
$(div).dialog("option", "title", self.getElementTitle(bioEntity));
$(div).scrollTop(0);
});
} else {
$(div).dialog("close");
return Promise.resolve();
}
$(div).dialog("open");
$(div).dialog("option", "title", self.getElementTitle(bioEntity));
$(div).scrollTop(0);
});
} else {
$(div).dialog("close");
return Promise.resolve();
}
};
LeftPanel.prototype.prepareElementDetailsContent = function (bioEntity) {
var guiUtils = new GuiUtils(this.getMap().getConfiguration());
guiUtils.setMap(this.getMap());
if (bioEntity instanceof Reaction) {
return guiUtils.createReactionElement({
reaction: bioEntity,
showTitle: false,
});
} else if (bioEntity instanceof Alias) {
return guiUtils.createAliasElement({
alias: bioEntity,
showTitle: false,
});
} else if (bioEntity instanceof PointData) {
return Functions.createElement({
type: "div"
});
} else {
throw new Error("Unknown element type:" + bioEntity);
}
var guiUtils = this.getGuiUtils();
if (bioEntity instanceof Reaction) {
return guiUtils.createReactionElement({
reaction: bioEntity,
showTitle: false
});
} else if (bioEntity instanceof Alias) {
return guiUtils.createAliasElement({
alias: bioEntity,
showTitle: false
});
} else if (bioEntity instanceof PointData) {
return Functions.createElement({
type: "div"
});
} else {
throw new Error("Unknown element type:" + bioEntity);
}
};
LeftPanel.prototype.getGuiUtils = function () {
var self = this;
if (self._guiUtils === undefined) {
self._guiUtils = new GuiUtils(self.getMap().getConfiguration());
self._guiUtils.setMap(self.getMap());
}
return self._guiUtils;
};
LeftPanel.prototype.getElementTitle = function (bioEntity) {
if (bioEntity instanceof Reaction) {
return bioEntity.getType() + ": " + bioEntity.getReactionId();
} else if (bioEntity instanceof Alias) {
return bioEntity.getType() + ": " + bioEntity.getName();
} else if (bioEntity instanceof PointData) {
return "POINT: " + bioEntity.getId();
} else {
throw new Error("Unknown element type:" + bioEntity);
}
if (bioEntity instanceof Reaction) {
return bioEntity.getType() + ": " + bioEntity.getReactionId();
} else if (bioEntity instanceof Alias) {
return bioEntity.getType() + ": " + bioEntity.getName();
} else if (bioEntity instanceof PointData) {
return "POINT: " + bioEntity.getId();
} else {
throw new Error("Unknown element type:" + bioEntity);
}
};
LeftPanel.prototype.addTab = function (params, navElement, contentElement) {
var self = this;
LeftPanel.prototype.addTab = function (params, tabData) {
var self = this;
var name = params.name;
var name = params.name;
if (name !== undefined) {
if (name.length > 12) {
name = name.substring(0, 10) + "...";
}
} else {
name = "";
}
var tabId = "left_panel_tab_" + this._tabIdCount;
self._tabIdCount++;
var navClass = '';
var contentClass = 'tab-pane';
if (navElement.children.length === 0) {
navClass = "active";
contentClass = "tab-pane active";
}
var guiUtils = self.getGuiUtils();
var data = guiUtils.createTab({
tabData: tabData,
title: '<div class="maintabdiv"><i class="fa ' + params.className + ' maintab"></i><br>' + name
+ '</div>',
content: ""
});
this._panels.push(new params.panelClass({
element: data.content,
customMap: self.getMap(),
parent: self
}));
var navLi = document.createElement("li");
navLi.className = navClass;
var navLink = document.createElement("a");
navLink.href = "#" + tabId;
if (name !== undefined) {
if (name.length > 12) {
name = name.substring(0, 10) + "...";
}
} else {
name = "";
}
// add this when we want to have triangle below
// '<div class="tngContainer"><div class="tng"></div></div>'
navLink.innerHTML = '<div class="maintabdiv"><i class="fa ' + params.className + ' maintab"></i><br>' + name
+ '</div>';
navLink.onclick = function () {
$(this).tab('show');
};
navLi.appendChild(navLink);
navElement