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

javascript create search panels

parent 03f5960f
...@@ -225,4 +225,24 @@ Functions.getElementByName = function(element, name) { ...@@ -225,4 +225,24 @@ Functions.getElementByName = function(element, name) {
return undefined; return undefined;
}; };
Functions.createElement = function(params) {
var result = document.createElement(params.type);
if (params.id !== null && params.id !== undefined) {
result.id = params.id;
}
if (params.name !== null && params.name !== undefined) {
result.setAttribute("name", params.name);
}
if (params.className !== null && params.className !== undefined) {
result.className = params.className;
}
if (params.inputType !== null && params.inputType !== undefined) {
result.type = params.inputType;
}
if (params.content !== null && params.content !== undefined) {
result.innerHTML = params.content;
}
return result;
};
module.exports = Functions; module.exports = Functions;
...@@ -5,8 +5,10 @@ ...@@ -5,8 +5,10 @@
var Promise = require("bluebird"); var Promise = require("bluebird");
var Panel = require('./Panel'); var Panel = require('./Panel');
var PanelControlElementType = require('./PanelControlElementType');
var logger = require('../logger'); var logger = require('../logger');
var Functions = require('../Functions');
function AbstractPanel(params) { function AbstractPanel(params) {
...@@ -14,34 +16,36 @@ function AbstractPanel(params) { ...@@ -14,34 +16,36 @@ function AbstractPanel(params) {
var self = this; var self = this;
if (this.getNavElement() === undefined) { this._initializeGui();
throw new Error("No nav-tabs div found in the search panel element");
}
if (this.getContentElement() === undefined) {
throw new Error("No tab-content div found in the search panel element");
}
if (this.getSearchButton() === undefined) {
throw new Error("No searchButton found in the search panel element");
}
if (this.getSearchInput() === undefined) {
throw new Error("No searchInput found in the search panel element");
}
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(){
var self = this;
var searchButton = self.getControlElement(PanelControlElementType.SEARCH_BUTTON);
var searchInput =self.getControlElement(PanelControlElementType.SEARCH_INPUT);
var searchByQuery = function(){ var searchByQuery = function(){
return self.searchByQuery(); return self.searchByQuery();
}; };
self.getSearchButton().onclick = searchByQuery;
self.getSearchInput().onkeypress = function(event){ searchButton.onclick = searchByQuery;
searchInput.onkeypress = function(event){
if (event.keyCode === 13) { if (event.keyCode === 13) {
searchByQuery(); searchByQuery();
} }
}; };
$(self.getSearchInput()).typeahead({ $(searchInput).typeahead({
minLength: 1, minLength: 1,
},{ },{
source: function(query, callback){ source: function(query, callback){
...@@ -49,7 +53,7 @@ function AbstractPanel(params) { ...@@ -49,7 +53,7 @@ function AbstractPanel(params) {
} }
}); });
$(self.getSearchInput()).on('typeahead:select', function() { $(searchInput).on('typeahead:select', function() {
searchByQuery(); searchByQuery();
}); });
...@@ -57,87 +61,58 @@ function AbstractPanel(params) { ...@@ -57,87 +61,58 @@ function AbstractPanel(params) {
self.getOverlayDb().addListener("onSearch", function() { self.getOverlayDb().addListener("onSearch", function() {
return self.refreshSearchResults(); return self.refreshSearchResults();
}); });
};
this._tabIdCount = 0; AbstractPanel.prototype._initializeGui = function(){
} var searchQueryDiv = Functions.createElement({type:"div", name:"searchQuery", className:"searchPanel" });
this.getElement().appendChild(searchQueryDiv);
this.setControlElement(PanelControlElementType.SEARCH_DIV, searchQueryDiv);
AbstractPanel.prototype = Object.create(Panel.prototype); var searchLabel = Functions.createElement({type:"div",name:"searchLabel"} );
AbstractPanel.prototype.constructor = AbstractPanel; searchQueryDiv.appendChild(searchLabel);
this.setControlElement(PanelControlElementType.SEARCH_LABEL, searchLabel);
AbstractPanel.prototype.setOverlayDb = function(overlayDb){ var searchInput = Functions.createElement({type:"input", name:"searchInput",className: "input-field typeahead" });
if (overlayDb === undefined) { searchQueryDiv.appendChild(searchInput);
throw new Error("Undefined overlayDb"); this.setControlElement(PanelControlElementType.SEARCH_INPUT, searchInput);
}
this._overlayDb = overlayDb;
};
AbstractPanel.prototype.getOverlayDb = function(){ var searchButton = Functions.createElement({type:"a", className:"searchButton",content:'<img src="resources/images/icons/search.png"/>'});
return this._overlayDb; searchQueryDiv.appendChild(searchButton);
}; this.setControlElement(PanelControlElementType.SEARCH_BUTTON, searchButton);
AbstractPanel.prototype.getSearchQueryElement = function() { var searchResultsDiv = Functions.createElement({type:"div", name:"searchResults", className:"tabbable boxed parentTabs" });
var children = this.getElement().children; this.getElement().appendChild(searchResultsDiv);
for (var i = 0; i < children.length; i++) { this.setControlElement(PanelControlElementType.SEARCH_RESULTS_DIV, searchResultsDiv);
var child = children[i];
if (child.getAttribute("name") === "searchQuery") {
return child;
}
}
};
AbstractPanel.prototype.getSearchResultsElement = function() { var searchResultsNavTabDiv = Functions.createElement({type:"ul", className:"nav nav-tabs", content:'<li class="active"><a href="#set1"/></li>'} );
var children = this.getElement().children; searchResultsDiv.appendChild(searchResultsNavTabDiv);
for (var i = 0; i < children.length; i++) { this.setControlElement(PanelControlElementType.SEARCH_RESULTS_NAV_TAB, searchResultsNavTabDiv);
var child = children[i];
if (child.getAttribute("name") === "searchResults") {
return child;
}
}
};
AbstractPanel.prototype.getNavElement = function() { var searchResultsContentTabDiv = Functions.createElement({type:"div", className:"tab-content", content: '<div class="tab-pane fade active in" name="set1" id="set1"/>'});
var searchResultsElement = this.getSearchResultsElement(); searchResultsDiv.appendChild(searchResultsContentTabDiv);
this.setControlElement(PanelControlElementType.SEARCH_RESULTS_CONTENT_TAB, searchResultsContentTabDiv);
if (searchResultsElement) {
var children = searchResultsElement.children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.className.indexOf("nav-tabs") !== -1) {
return child;
}
}
}
}; };
AbstractPanel.prototype.getSearchButton = function() {
return this.getElementByName(this.getSearchQueryElement(),"searchButton");
};
AbstractPanel.prototype.getSearchInput = function() { AbstractPanel.prototype.setOverlayDb = function(overlayDb){
return this.getElementByName(this.getSearchQueryElement(),"searchInput"); if (overlayDb === undefined) {
throw new Error("Undefined overlayDb");
}
this._overlayDb = overlayDb;
}; };
AbstractPanel.prototype.getContentElement = function() { AbstractPanel.prototype.getOverlayDb = function(){
var searchResultsElement = this.getSearchResultsElement(); return this._overlayDb;
if (searchResultsElement) {
var children = searchResultsElement.children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.className.indexOf("tab-content") !== -1) {
return child;
}
}
}
}; };
AbstractPanel.prototype.clearResults = function() { AbstractPanel.prototype.clearResults = function() {
var navElement = this.getNavElement(); var navElement = this.getControlElement(PanelControlElementType.SEARCH_RESULTS_NAV_TAB);
while (navElement.firstChild) { while (navElement.firstChild) {
navElement.removeChild(navElement.firstChild); navElement.removeChild(navElement.firstChild);
} }
var contentElement = this.getContentElement(); var contentElement = this.getControlElement(PanelControlElementType.SEARCH_RESULTS_CONTENT_TAB);
while (contentElement.firstChild) { while (contentElement.firstChild) {
contentElement.removeChild(contentElement.firstChild); contentElement.removeChild(contentElement.firstChild);
} }
...@@ -179,8 +154,8 @@ AbstractPanel.prototype.addResultTab = function(query, elements) { ...@@ -179,8 +154,8 @@ AbstractPanel.prototype.addResultTab = function(query, elements) {
var tabId = this.getPanelName() + "Tab_" + this._tabIdCount; var tabId = this.getPanelName() + "Tab_" + this._tabIdCount;
this._tabIdCount++; this._tabIdCount++;
var navElement = this.getNavElement(); var navElement = this.getControlElement(PanelControlElementType.SEARCH_RESULTS_NAV_TAB);
var contentElement = this.getContentElement(); var contentElement = this.getControlElement(PanelControlElementType.SEARCH_RESULTS_CONTENT_TAB);
var navClass = ''; var navClass = '';
var contentClass = 'tab-pane'; var contentClass = 'tab-pane';
if (navElement.children.length === 0) { if (navElement.children.length === 0) {
......
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
var logger = require('../logger'); var logger = require('../logger');
var AbstractDbPanel = require('./AbstractDbPanel'); var AbstractDbPanel = require('./AbstractDbPanel');
var PanelControlElementType = require('./PanelControlElementType');
function ChemicalPanel(params) { function ChemicalPanel(params) {
params.panelName = "chemical"; params.panelName = "chemical";
...@@ -40,7 +41,8 @@ ChemicalPanel.prototype.createTableElement = function(target, icon) { ...@@ -40,7 +41,8 @@ ChemicalPanel.prototype.createTableElement = function(target, icon) {
ChemicalPanel.prototype.searchByQuery = function() { ChemicalPanel.prototype.searchByQuery = function() {
var self = this; var self = this;
var query = self.getSearchInput().value; var query = self.getControlElement(PanelControlElementType.SEARCH_INPUT).value;
return self.getOverlayDb().searchByQuery(query); return self.getOverlayDb().searchByQuery(query);
}; };
......
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
var logger = require('../logger'); var logger = require('../logger');
var AbstractDbPanel = require('./AbstractDbPanel'); var AbstractDbPanel = require('./AbstractDbPanel');
var PanelControlElementType = require('./PanelControlElementType');
function DrugPanel(params) { function DrugPanel(params) {
params.panelName = "drug"; params.panelName = "drug";
...@@ -36,7 +37,7 @@ DrugPanel.prototype.createTableElement = function(target, icon) { ...@@ -36,7 +37,7 @@ DrugPanel.prototype.createTableElement = function(target, icon) {
DrugPanel.prototype.searchByQuery = function() { DrugPanel.prototype.searchByQuery = function() {
var self = this; var self = this;
var query = self.getSearchInput().value; var query = self.getControlElement(PanelControlElementType.SEARCH_INPUT).value;
return self.getOverlayDb().searchByQuery(query); return self.getOverlayDb().searchByQuery(query);
}; };
......
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
var logger = require('../logger'); var logger = require('../logger');
var AbstractDbPanel = require('./AbstractDbPanel'); var AbstractDbPanel = require('./AbstractDbPanel');
var PanelControlElementType = require('./PanelControlElementType');
function MiRnaPanel(params) { function MiRnaPanel(params) {
params.panelName = "mirna"; params.panelName = "mirna";
...@@ -36,7 +37,7 @@ MiRnaPanel.prototype.createTableElement = function(target, icon) { ...@@ -36,7 +37,7 @@ MiRnaPanel.prototype.createTableElement = function(target, icon) {
MiRnaPanel.prototype.searchByQuery = function() { MiRnaPanel.prototype.searchByQuery = function() {
var self = this; var self = this;
var query = self.getSearchInput().value; var query = self.getControlElement(PanelControlElementType.SEARCH_INPUT).value;
return self.getOverlayDb().searchByQuery(query); return self.getOverlayDb().searchByQuery(query);
}; };
......
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
var GuiConnector = require('../GuiConnector'); var GuiConnector = require('../GuiConnector');
var AbstractGuiElement = require('./AbstractGuiElement'); var AbstractGuiElement = require('./AbstractGuiElement');
var PanelControlElementType = require('./PanelControlElementType');
var logger = require('../logger'); var logger = require('../logger');
...@@ -16,14 +17,20 @@ function Panel(params) { ...@@ -16,14 +17,20 @@ function Panel(params) {
self.setElement(params.element); self.setElement(params.element);
self.setMap(params.customMap); self.setMap(params.customMap);
self._controlElements = [];
} }
Panel.prototype = Object.create(AbstractGuiElement.prototype); Panel.prototype = Object.create(AbstractGuiElement.prototype);
Panel.prototype.constructor = Panel; Panel.prototype.constructor = Panel;
Panel.prototype.disablePanel = function(message) { Panel.prototype.disablePanel = function(message) {
this.getSearchQueryElement().style.visibility = "hidden"; var self = this;
this.getSearchResultsElement().style.visibility = "hidden";
var searchQueryElement = self.getControlElement(PanelControlElementType.SEARCH_DIV);
var searchResultsElement = self.getControlElement(PanelControlElementType.SEARCH_RESULTS_DIV);
searchQueryElement.style.visibility = "hidden";
searchResultsElement.style.visibility = "hidden";
var hideReasonDiv = document.createElement("div"); var hideReasonDiv = document.createElement("div");
hideReasonDiv.className = "searchPanel"; hideReasonDiv.className = "searchPanel";
...@@ -33,7 +40,7 @@ Panel.prototype.disablePanel = function(message) { ...@@ -33,7 +40,7 @@ Panel.prototype.disablePanel = function(message) {
center.appendChild(messageDiv); center.appendChild(messageDiv);
hideReasonDiv.appendChild(center); hideReasonDiv.appendChild(center);
this.getElement().insertBefore(hideReasonDiv, this.getSearchQueryElement()); self.getElement().insertBefore(hideReasonDiv, searchQueryElement);
}; };
Panel.prototype.createLabel = function(value) { Panel.prototype.createLabel = function(value) {
...@@ -362,11 +369,11 @@ Panel.prototype.openDialog = function(content, options) { ...@@ -362,11 +369,11 @@ Panel.prototype.openDialog = function(content, options) {
contentDiv.removeChild(contentDiv.lastChild); contentDiv.removeChild(contentDiv.lastChild);
} }
contentDiv.appendChild(content); contentDiv.appendChild(content);
contentDiv.style.display="block"; contentDiv.style.display = "block";
$(div).dialog({ $(div).dialog({
close : function() { close : function() {
contentDiv.style.display="none"; contentDiv.style.display = "none";
$(this).dialog('destroy'); $(this).dialog('destroy');
} }
}); });
...@@ -376,4 +383,25 @@ Panel.prototype.openDialog = function(content, options) { ...@@ -376,4 +383,25 @@ Panel.prototype.openDialog = function(content, options) {
$(div).dialog("open"); $(div).dialog("open");
}; };
Panel.prototype.setControlElement = function(type, element) {
if (type === null || type === undefined) {
throw new Error("Unknown controle element type");
}
if (PanelControlElementType[type] === undefined) {
throw new Error("Unknown controle element type: " + type);
}
this._controlElements[type] = element;
};
Panel.prototype.getControlElement = function(type) {
if (type === null || type === undefined) {
throw new Error("Unknown controle element type");
}
if (PanelControlElementType[type] === undefined) {
throw new Error("Unknown controle element type: " + type);
}
return this._controlElements[type];
};
module.exports = Panel; module.exports = Panel;
"use strict";
var PanelControlElementType = {
SEARCH_DIV : "SEARCH_DIV",
SEARCH_LABEL : "SEARCH_LABEL",
SEARCH_INPUT : "SEARCH_INPUT",
SEARCH_BUTTON : "SEARCH_BUTTON",
SEARCH_RESULTS_DIV : "SEARCH_RESULTS_DIV",
SEARCH_RESULTS_NAV_TAB : "SEARCH_RESULTS_NAV_TAB",
SEARCH_RESULTS_CONTENT_TAB : "SEARCH_RESULTS_CONTENT_TAB",
SEARCH_PERFECT_MATCH_CHECKBOX : "SEARCH_PERFECT_MATCH_CHECKBOX",
};
module.exports = PanelControlElementType;
...@@ -4,23 +4,39 @@ ...@@ -4,23 +4,39 @@
var AbstractDbPanel = require('./AbstractDbPanel'); var AbstractDbPanel = require('./AbstractDbPanel');
var Alias = require('../map/data/Alias'); var Alias = require('../map/data/Alias');
var PanelControlElementType = require('./PanelControlElementType');
var Reaction = require('../map/data/Reaction'); var Reaction = require('../map/data/Reaction');
var logger = require('../logger'); var logger = require('../logger');
var Functions = require('../Functions');
function SearchPanel(params) { function SearchPanel(params) {
params.panelName = "search"; params.panelName = "search";
AbstractDbPanel.call(this, params); AbstractDbPanel.call(this, params);
if (this.getSearchPerfectMatch() === undefined) { this.createSearchGui();
throw new Error("No searchPerfectMatch found in the search panel element");
}
} }
SearchPanel.prototype = Object.create(AbstractDbPanel.prototype); SearchPanel.prototype = Object.create(AbstractDbPanel.prototype);
SearchPanel.prototype.constructor = SearchPanel; SearchPanel.prototype.constructor = SearchPanel;
SearchPanel.prototype.getSearchPerfectMatch = function() { SearchPanel.prototype.createSearchGui = function() {
return this.getElementByName(this.getSearchQueryElement(), "searchPerfectMatch"); var searchDiv = this.getControlElement(PanelControlElementType.SEARCH_DIV);
var perfectMatchCheckbox = Functions.createElement({
type : "input",
name : "searchPerfectMatch",
inputType : "checkbox",
});
searchDiv.appendChild(perfectMatchCheckbox);
this.setControlElement(PanelControlElementType.SEARCH_PERFECT_MATCH_CHECKBOX, perfectMatchCheckbox);
var perfectMatchLabel = Functions.createElement({
type : "span",
content : "PERFECT MATCH"
});
searchDiv.appendChild(perfectMatchCheckbox);
}; };
SearchPanel.prototype.createTableElement = function(element, icon) { SearchPanel.prototype.createTableElement = function(element, icon) {
...@@ -34,7 +50,7 @@ SearchPanel.prototype.createTableElement = function(element, icon) { ...@@ -34,7 +50,7 @@ SearchPanel.prototype.createTableElement = function(element, icon) {
}; };
SearchPanel.prototype.createPreamble = function() { SearchPanel.prototype.createPreamble = function() {
return document.createElement("div"); return document.createElement("div");
}; };
SearchPanel.prototype.createReactionElement = function(reaction) { SearchPanel.prototype.createReactionElement = function(reaction) {
......
"use strict";
/* exported logger */
var Helper = require('../helper');
require("../mocha-config.js");
var AbstractDbPanel = require('../../../main/js/gui/AbstractDbPanel');
var chai = require('chai');
var assert = chai.assert;
var logger = require('../logger');
describe('AbstractDbPanel', function() {
var helper;
before(function() {
helper = new Helper();
});
it('contructor', function() {
var div = document.createElement("div");
var map = helper.createCustomMap();
map.registerSource(helper.createSearchDbOverlay(map))
var panel = new AbstractDbPanel({
element : div,
customMap : map,
panelName : "search",