Commit 2d90dc95 authored by Max Bebök's avatar Max Bebök

#54 actor search, added close/open button, shortcut to open it

parent c177d495
......@@ -72,6 +72,12 @@
<div class="btn-group ui-history-controls">
</div>
<div class="btn-group">
<button class="btn btn-default data-tool-openActorSearch">
<span class="icon icon-search"></span>
</button>
</div>
<div class="btn-group" style="position: absolute; right: 80px;">
<button onclick="mainApp.openCredits();" class="btn btn-default btn-theme active" title="Credits" style="width: 80px;">
<span class="icon icon-info-circled"> Credits</span>
......
......@@ -72,6 +72,12 @@
<div class="btn-group ui-history-controls">
</div>
<div class="btn-group">
<button class="btn btn-default data-tool-openActorSearch">
<span class="icon icon-search"></span>
</button>
</div>
<div class="btn-group" style="position: absolute; right: 80px;">
<button onclick="mainApp.openCredits();" class="btn btn-default btn-theme active" title="Credits" style="width: 80px;">
<span class="icon icon-info-circled"> Credits</span>
......
......@@ -49,16 +49,28 @@
#searchWindow-actor .drag-bar {
width: 100%;
height: 24px;
_background-color: #ffbb3c;
font-size: 14px;
height: 26px;
background-color: #353b45;
border: 1px solid #000000;
cursor: move;
color: #929292;
color: #d0a774;
padding-left: 4px;
margin-bottom: 5px;
}
#searchWindow-actor .window-buttons
{
position: absolute;
right: 5px;
}
#searchWindow-actor .window-buttons button
{
height: 24px;
border-width: 0 1px;
}
#searchWindow-actor h5 {
margin-top: 5px;
}
......@@ -111,6 +123,11 @@
<div class="search-header">
<div class="drag-bar">
Actor-Search
<div class="btn-group window-buttons">
<button class="btn btn-default data-tool-close" title="Close">
<span class="icon icon-cancel-squared"></span>
</button>
</div>
</div>
<div>
<input type="text" class="form-control data-searchValue" placeholder='Search...' />
......
......@@ -11,28 +11,48 @@ module.exports = class Actor_Search_GUI
{
constructor(uiNode, actorFinder)
{
this.uiNode = uiNode;
this.actorFinder = actorFinder;
this.windowNode = undefined;
this.actorSearchHtml = new HTML_Loader('html/actor_search.html');
this.isOpen = false;
this.filter = {};
this.searchValue = "";
this._createView(uiNode);
this._initGlobalActions();
this.open();
}
open()
{
if(!this.isOpen)
{
this._createView();
this._initFilters();
this._initActions();
this.isOpen = true;
}
}
close()
{
this.filter = {};
this.searchValue = "";
this._initFilters();
this._initActions();
this.uiNode.innerHTML = "";
this.isOpen = false;
}
/**
* loads and creates the HTML template
* @param {HTMLElement} uiNode target to append to
* creates the HTML from the template and appends it
*/
_createView(uiNode)
_createView()
{
const actorSearchHtml = new HTML_Loader('html/actor_search.html');
uiNode.appendChild(actorSearchHtml.create());
this.uiNode.appendChild(this.actorSearchHtml.create());
this.windowNode = uiNode.querySelector("#searchWindow-actor");
this.windowNode = this.uiNode.querySelector("#searchWindow-actor");
this.dragObj = new Draggable(this.windowNode, {
filterTarget: (target) => target.classList.contains("drag-bar"),
......@@ -41,8 +61,13 @@ module.exports = class Actor_Search_GUI
useGPU: true
});
this.resultNode = uiNode.querySelector(".data-resultTable");
this.resultCount = uiNode.querySelector(".data-resultCount");
this.dragObj.set(
(document.body.clientWidth - this.windowNode.clientWidth) * 0.5,
(document.body.clientHeight - this.windowNode.clientHeight) * 0.5,
);
this.resultNode = this.uiNode.querySelector(".data-resultTable");
this.resultCount = this.uiNode.querySelector(".data-resultCount");
}
/**
......@@ -113,6 +138,7 @@ module.exports = class Actor_Search_GUI
_initActions()
{
this.windowNode.querySelector(".data-tool-selectAll").onclick = () => this._triggerSelectAll();
this.windowNode.querySelector(".data-tool-close").onclick = () => this.close();
this.resultNode.onclick = ev => {
for(const node of ev.path) {
......@@ -131,4 +157,19 @@ module.exports = class Actor_Search_GUI
}
};
}
_initGlobalActions()
{
const actorSearchBtn = document.querySelector(".data-tool-openActorSearch");
if(actorSearchBtn) {
actorSearchBtn.onclick = () => this.open();
}
document.addEventListener("keydown", (ev) => {
if(ev.ctrlKey && ev.key == "f") {
this.close();
this.open();
}
});
}
};
\ No newline at end of file
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