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) {
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;
......@@ -5,8 +5,10 @@
var Promise = require("bluebird");
var Panel = require('./Panel');
var PanelControlElementType = require('./PanelControlElementType');
var logger = require('../logger');
var Functions = require('../Functions');
function AbstractPanel(params) {
......@@ -14,34 +16,36 @@ function AbstractPanel(params) {
var self = this;
if (this.getNavElement() === undefined) {
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._initializeGui();
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(){
return self.searchByQuery();
};
self.getSearchButton().onclick = searchByQuery;
self.getSearchInput().onkeypress = function(event){
searchButton.onclick = searchByQuery;
searchInput.onkeypress = function(event){
if (event.keyCode === 13) {
searchByQuery();
}
};
$(self.getSearchInput()).typeahead({
$(searchInput).typeahead({
minLength: 1,
},{
source: function(query, callback){
......@@ -49,7 +53,7 @@ function AbstractPanel(params) {
}
});
$(self.getSearchInput()).on('typeahead:select', function() {
$(searchInput).on('typeahead:select', function() {
searchByQuery();
});
......@@ -57,87 +61,58 @@ function AbstractPanel(params) {
self.getOverlayDb().addListener("onSearch", function() {
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);
AbstractPanel.prototype.constructor = AbstractPanel;
var searchLabel = Functions.createElement({type:"div",name:"searchLabel"} );
searchQueryDiv.appendChild(searchLabel);
this.setControlElement(PanelControlElementType.SEARCH_LABEL, searchLabel);
AbstractPanel.prototype.setOverlayDb = function(overlayDb){
if (overlayDb === undefined) {
throw new Error("Undefined overlayDb");
}
this._overlayDb = overlayDb;
};
var searchInput = Functions.createElement({type:"input", name:"searchInput",className: "input-field typeahead" });
searchQueryDiv.appendChild(searchInput);
this.setControlElement(PanelControlElementType.SEARCH_INPUT, searchInput);
AbstractPanel.prototype.getOverlayDb = function(){
return this._overlayDb;
};
var searchButton = Functions.createElement({type:"a", className:"searchButton",content:'<img src="resources/images/icons/search.png"/>'});
searchQueryDiv.appendChild(searchButton);
this.setControlElement(PanelControlElementType.SEARCH_BUTTON, searchButton);
AbstractPanel.prototype.getSearchQueryElement = function() {
var children = this.getElement().children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.getAttribute("name") === "searchQuery") {
return child;
}
}
};
var searchResultsDiv = Functions.createElement({type:"div", name:"searchResults", className:"tabbable boxed parentTabs" });
this.getElement().appendChild(searchResultsDiv);
this.setControlElement(PanelControlElementType.SEARCH_RESULTS_DIV, searchResultsDiv);
AbstractPanel.prototype.getSearchResultsElement = function() {
var children = this.getElement().children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.getAttribute("name") === "searchResults") {
return child;
}
}
};
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);
AbstractPanel.prototype.getNavElement = function() {
var searchResultsElement = this.getSearchResultsElement();
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);
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() {
return this.getElementByName(this.getSearchQueryElement(),"searchInput");
AbstractPanel.prototype.setOverlayDb = function(overlayDb){
if (overlayDb === undefined) {
throw new Error("Undefined overlayDb");
}
this._overlayDb = overlayDb;
};
AbstractPanel.prototype.getContentElement = function() {
var searchResultsElement = this.getSearchResultsElement();
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.getOverlayDb = function(){
return this._overlayDb;
};
AbstractPanel.prototype.clearResults = function() {
var navElement = this.getNavElement();
var navElement = this.getControlElement(PanelControlElementType.SEARCH_RESULTS_NAV_TAB);
while (navElement.firstChild) {
navElement.removeChild(navElement.firstChild);
}
var contentElement = this.getContentElement();
var contentElement = this.getControlElement(PanelControlElementType.SEARCH_RESULTS_CONTENT_TAB);
while (contentElement.firstChild) {
contentElement.removeChild(contentElement.firstChild);
}
......@@ -179,8 +154,8 @@ AbstractPanel.prototype.addResultTab = function(query, elements) {
var tabId = this.getPanelName() + "Tab_" + this._tabIdCount;
this._tabIdCount++;
var navElement = this.getNavElement();
var contentElement = this.getContentElement();
var navElement = this.getControlElement(PanelControlElementType.SEARCH_RESULTS_NAV_TAB);
var contentElement = this.getControlElement(PanelControlElementType.SEARCH_RESULTS_CONTENT_TAB);
var navClass = '';
var contentClass = 'tab-pane';
if (navElement.children.length === 0) {
......
......@@ -4,6 +4,7 @@
var logger = require('../logger');
var AbstractDbPanel = require('./AbstractDbPanel');
var PanelControlElementType = require('./PanelControlElementType');
function ChemicalPanel(params) {
params.panelName = "chemical";
......@@ -40,7 +41,8 @@ ChemicalPanel.prototype.createTableElement = function(target, icon) {
ChemicalPanel.prototype.searchByQuery = function() {
var self = this;
var query = self.getSearchInput().value;
var query = self.getControlElement(PanelControlElementType.SEARCH_INPUT).value;
return self.getOverlayDb().searchByQuery(query);
};
......
......@@ -4,6 +4,7 @@
var logger = require('../logger');
var AbstractDbPanel = require('./AbstractDbPanel');
var PanelControlElementType = require('./PanelControlElementType');
function DrugPanel(params) {
params.panelName = "drug";
......@@ -36,7 +37,7 @@ DrugPanel.prototype.createTableElement = function(target, icon) {
DrugPanel.prototype.searchByQuery = function() {
var self = this;
var query = self.getSearchInput().value;
var query = self.getControlElement(PanelControlElementType.SEARCH_INPUT).value;
return self.getOverlayDb().searchByQuery(query);
};
......
......@@ -4,6 +4,7 @@
var logger = require('../logger');
var AbstractDbPanel = require('./AbstractDbPanel');
var PanelControlElementType = require('./PanelControlElementType');
function MiRnaPanel(params) {
params.panelName = "mirna";
......@@ -36,7 +37,7 @@ MiRnaPanel.prototype.createTableElement = function(target, icon) {
MiRnaPanel.prototype.searchByQuery = function() {
var self = this;
var query = self.getSearchInput().value;
var query = self.getControlElement(PanelControlElementType.SEARCH_INPUT).value;
return self.getOverlayDb().searchByQuery(query);
};
......
......@@ -4,6 +4,7 @@
var GuiConnector = require('../GuiConnector');
var AbstractGuiElement = require('./AbstractGuiElement');
var PanelControlElementType = require('./PanelControlElementType');
var logger = require('../logger');
......@@ -16,14 +17,20 @@ function Panel(params) {
self.setElement(params.element);
self.setMap(params.customMap);
self._controlElements = [];
}
Panel.prototype = Object.create(AbstractGuiElement.prototype);
Panel.prototype.constructor = Panel;
Panel.prototype.disablePanel = function(message) {
this.getSearchQueryElement().style.visibility = "hidden";
this.getSearchResultsElement().style.visibility = "hidden";
var self = this;
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");
hideReasonDiv.className = "searchPanel";
......@@ -33,7 +40,7 @@ Panel.prototype.disablePanel = function(message) {
center.appendChild(messageDiv);
hideReasonDiv.appendChild(center);
this.getElement().insertBefore(hideReasonDiv, this.getSearchQueryElement());
self.getElement().insertBefore(hideReasonDiv, searchQueryElement);
};
Panel.prototype.createLabel = function(value) {
......@@ -362,11 +369,11 @@ Panel.prototype.openDialog = function(content, options) {
contentDiv.removeChild(contentDiv.lastChild);
}
contentDiv.appendChild(content);
contentDiv.style.display="block";
contentDiv.style.display = "block";
$(div).dialog({
close : function() {
contentDiv.style.display="none";
contentDiv.style.display = "none";
$(this).dialog('destroy');
}
});
......@@ -376,4 +383,25 @@ Panel.prototype.openDialog = function(content, options) {
$(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;
"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 @@
var AbstractDbPanel = require('./AbstractDbPanel');
var Alias = require('../map/data/Alias');
var PanelControlElementType = require('./PanelControlElementType');
var Reaction = require('../map/data/Reaction');
var logger = require('../logger');
var Functions = require('../Functions');
function SearchPanel(params) {
params.panelName = "search";
AbstractDbPanel.call(this, params);
if (this.getSearchPerfectMatch() === undefined) {
throw new Error("No searchPerfectMatch found in the search panel element");
}
this.createSearchGui();
}
SearchPanel.prototype = Object.create(AbstractDbPanel.prototype);
SearchPanel.prototype.constructor = SearchPanel;
SearchPanel.prototype.getSearchPerfectMatch = function() {
return this.getElementByName(this.getSearchQueryElement(), "searchPerfectMatch");
SearchPanel.prototype.createSearchGui = function() {
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) {
......@@ -34,7 +50,7 @@ SearchPanel.prototype.createTableElement = function(element, icon) {
};
SearchPanel.prototype.createPreamble = function() {
return document.createElement("div");
return document.createElement("div");
};
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",
});
});
});
......@@ -6,6 +6,7 @@ require("../mocha-config.js");
var Chemical = require('../../../main/js/map/data/Chemical');
var ChemicalPanel = require('../../../main/js/gui/ChemicalPanel');
var PanelControlElementType = require('../../../main/js/gui/PanelControlElementType');
var chai = require('chai');
......@@ -88,7 +89,7 @@ describe('ChemicalPanel', function() {
customMap : map
});
panel.getSearchInput().value = "rotenone";
panel.getControlElement(PanelControlElementType.SEARCH_INPUT).value = "rotenone";
return panel.searchByQuery().then(function() {
assert.equal(logger.getWarnings().length, 0);
......
......@@ -6,7 +6,7 @@ require("../mocha-config.js");
var Drug = require('../../../main/js/map/data/Drug');
var DrugPanel = require('../../../main/js/gui/DrugPanel');
var PanelControlElementType = require('../../../main/js/gui/PanelControlElementType');
var chai = require('chai');
var assert = chai.assert;
......@@ -88,7 +88,7 @@ describe('DrugPanel', function() {
customMap : map
});
panel.getSearchInput().value = "aspirin";
panel.getControlElement(PanelControlElementType.SEARCH_INPUT).value = "aspirin";
return panel.searchByQuery().then(function() {
assert.equal(logger.getWarnings().length, 0);
......
......@@ -6,7 +6,7 @@ require("../mocha-config.js");
var MiRna = require('../../../main/js/map/data/MiRna');
var MiRnaPanel = require('../../../main/js/gui/MiRnaPanel');
var PanelControlElementType = require('../../../main/js/gui/PanelControlElementType');
var chai = require('chai');
var assert = chai.assert;
......@@ -88,7 +88,7 @@ describe('MiRnaPanel', function() {
customMap : map
});
panel.getSearchInput().value = "hsa-miR-125a-3p";
panel.getControlElement(PanelControlElementType.SEARCH_INPUT).value = "hsa-miR-125a-3p";
return panel.searchByQuery().then(function() {
assert.equal(logger.getWarnings().length, 0);
......
......@@ -12,7 +12,7 @@ var chai = require('chai');
var assert = chai.assert;
var logger = require('../logger');
describe('SearchPanel', function() {
describe('Panel', function() {
var helper;
before(function() {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment