loot/libloot
0
0
Fork 0
mirror of https://github.com/loot/libloot.git synced 2026-07-27 14:16:01 -07:00
Code Issues Packages Projects Releases Wiki Activity

Added search toolbar.

Browse Source 
For #428. Search is functional, though there is no highlighting of
results, and it may interact oddly with filters.
This commit is contained in:
Oliver Hamlet
2015-05-25 18:34:18 +01:00
parent b2e1d21e66
commit fad7422d21
5 changed files with 181 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/report/css/material.css
+1 -1
View File
@@ -26,7 +26,7 @@ html /deep/ paper-button::shadow .button-content ::content a {
}
/* paper-icon-button */
paper-icon-button[disabled] {
html /deep/ paper-icon-button[disabled] {
color: rgba(255, 255, 255, 0.30);
}
resources/report/css/style.css
+6 -1
View File
@@ -61,10 +61,15 @@ core-toolbar, div[drawer] > div:first-child {
color: white;
height: 56px;
}
#mainToolbar {
#mainToolbar,
#searchBar {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
z-index: 1;
}
#mainToolbar:not(.search) + #searchBar,
#mainToolbar.search {
display: none;
}
#gameMenu {
margin-top: -0.5em;
}
resources/report/html/loot-search.html
+158
View File
@@ -0,0 +1,158 @@
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../bower_components/core-tooltip/core-tooltip.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<!--
searchTarget is the ID of the core-list element to search the elements of.
-->
<polymer-element name="loot-search" attributes="searchTarget">
<template>
<style>
core-toolbar {
background: #3F51B5;
color: white;
height: 56px;
}
core-toolbar > * {
top: -3px;
}
paper-input /deep/ paper-input-decorator::shadow .label-text,
paper-input /deep/ input::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.3) !important;
}
.caption {
font-weight: 400;
font-size: 0.857rem;
color: rgba(255, 255, 255, 0.7);
}
.hidden {
display: none;
}
</style>
<core-toolbar>
<core-tooltip label="Press Enter to search." position="bottom" noarrow flex layout horizontal center>
<paper-input id="search" label="Search" flex></paper-input>
</core-tooltip>
<div id="count" class="caption hidden">
{{currentResult}}/{{numResults}}
</div>
<paper-icon-button id="prev" icon="expand-less" disabled></paper-icon-button>
<paper-icon-button id="next" icon="expand-more" disabled></paper-icon-button>
<paper-icon-button id="close" icon="close"></paper-icon-button>
</core-toolbar>
</template>
<script>
Polymer({
currentResult: 0,
results: [],
numResults: 0,
searchTarget: undefined,
resultsChanged: function(oldValue, newValue) {
this.numResults = newValue.length;
if (newValue.length == 0) {
this.shadowRoot.getElementById('prev').setAttribute('disabled', '');
this.shadowRoot.getElementById('next').setAttribute('disabled', '');
} else {
this.shadowRoot.getElementById('prev').removeAttribute('disabled');
this.shadowRoot.getElementById('next').removeAttribute('disabled');
}
},
currentResultChanged: function(oldValue, newValue) {
if (this.results.length > 0) {
if (this.results.length == 1) {
this.shadowRoot.getElementById('prev').setAttribute('disabled', '');
this.shadowRoot.getElementById('next').setAttribute('disabled', '');
} else if (newValue == 1) {
this.shadowRoot.getElementById('prev').setAttribute('disabled', '');
this.shadowRoot.getElementById('next').removeAttribute('disabled');
} else if (newValue == this.results.length) {
this.shadowRoot.getElementById('prev').removeAttribute('disabled');
this.shadowRoot.getElementById('next').setAttribute('disabled', '');
} else {
this.shadowRoot.getElementById('prev').removeAttribute('disabled');
this.shadowRoot.getElementById('next').removeAttribute('disabled');
}
}
},
attached: function() {
this.shadowRoot.getElementById('search').addEventListener('change', this.onSearch, false);
this.shadowRoot.getElementById('prev').addEventListener('click', this.onPrev, false);
this.shadowRoot.getElementById('next').addEventListener('click', this.onNext, false);
this.shadowRoot.getElementById('close').addEventListener('click', this.onClose, false);
},
detached: function() {
this.shadowRoot.getElementById('search').removeEventListener('change', this.onSearch, false);
this.shadowRoot.getElementById('prev').removeEventListener('click', this.onPrev, false);
this.shadowRoot.getElementById('next').removeEventListener('click', this.onNext, false);
this.shadowRoot.getElementById('close').removeEventListener('change', this.onClose, false);
},
onSearch: function(evt) {
var needle = evt.target.value.toLowerCase();
var host = evt.target.parentElement.parentElement.parentNode.host;
host.currentResult = 0;
host.results = [];
host.shadowRoot.getElementById('count').classList.toggle('hidden', !evt.target.value);
if (!evt.target.value) {
return;
}
document.getElementById(host.searchTarget).data.forEach(function(plugin, index){
if (plugin.name.toLowerCase().indexOf(needle) != -1
|| plugin.getCrcString().toLowerCase().indexOf(needle) != -1
|| plugin.version.toLowerCase().indexOf(needle) != -1) {
host.results.push(index);
return;
}
var tags = plugin.getTagStrings();
if (tags.added.toLowerCase().indexOf(needle) != -1
|| tags.removed.toLowerCase().indexOf(needle) != -1) {
host.results.push(index);
return;
}
for (var i = 0; i < plugin.messages.length; ++i) {
if (plugin.messages[i].content[0].str.toLowerCase().indexOf(needle) != -1) {
host.results.push(index);
return;
}
}
});
if (host.results.length > 0) {
host.currentResult = 1;
document.getElementById(host.searchTarget).scrollToItem(host.results[host.currentResult - 1]);
}
},
onPrev: function(evt) {
var host = evt.target.parentElement.parentNode.host;
--host.currentResult;
document.getElementById(host.searchTarget).scrollToItem(host.results[host.currentResult - 1]);
},
onNext: function(evt) {
var host = evt.target.parentElement.parentNode.host;
++host.currentResult;
document.getElementById(host.searchTarget).scrollToItem(host.results[host.currentResult - 1]);
},
onClose: function(evt) {
evt.target.parentElement.parentNode.host.currentResult = 0;
evt.target.parentElement.parentNode.host.results = [];
evt.target.parentElement.parentNode.getElementById('search').value = '';
evt.target.parentElement.parentNode.getElementById('count').classList.toggle('hidden', true);
evt.target.dispatchEvent(new CustomEvent('loot-search-close'));
},
});
</script>
</polymer-element>
resources/report/js/events.js
+10
View File
@@ -646,6 +646,12 @@ function onContentRefresh(evt) {
closeProgressDialog();
}).catch(processCefError);
}
function onSearchOpen(evt) {
document.getElementById('mainToolbar').classList.add('search');
}
function onSearchClose(evt) {
document.getElementById('mainToolbar').classList.remove('search');
}
function setupEventHandlers() {
/*Set up handlers for filters.*/
document.getElementById('hideVersionNumbers').addEventListener('change', onToggleDisplayCSS, false);
@@ -686,6 +692,10 @@ function setupEventHandlers() {
document.getElementById('sidebarTabs').addEventListener('core-select', onSwitchSidebarTab, false);
document.getElementById('jumpToGeneralInfo').addEventListener('click', onJumpToGeneralInfo, false);
document.getElementById('showSearch').addEventListener('click', onSearchOpen, false);
document.getElementById('searchBar').addEventListener('loot-search-close', onSearchClose, false);
/* Set up event handlers for settings dialog. */
var settings = document.getElementById('settingsDialog');
settings.getElementsByClassName('accept')[0].addEventListener('click', onCloseSettingsDialog, false);
resources/report/report.html
+6 -1
View File
@@ -15,6 +15,7 @@
<link rel="import" href="html/loot-message-dialog.html">
<link rel="import" href="html/loot-plugin-item.html">
<link rel="import" href="html/loot-plugin-card.html">
<link rel="import" href="html/loot-search.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-icon/core-icon.html">
@@ -103,6 +104,9 @@
</core-tooltip>
<paper-button id="applySortButton" class="hidden">Apply</paper-button>
<paper-button id="cancelSortButton" class="hidden">Cancel</paper-button>
<core-tooltip label="Search Cards" noarrow>
<paper-icon-button id="showSearch" icon="search"></paper-icon-button>
</core-tooltip>
<paper-menu-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
<paper-dropdown class="dropdown" halign="right">
@@ -150,6 +154,7 @@
</paper-dropdown>
</paper-menu-button>
</core-toolbar>
<loot-search id="searchBar" searchTarget="pluginCardList"></loot-search>
<div id="main" flex layout vertical>
<section id="summary">
<h1>General Information</h1>
@@ -201,7 +206,7 @@
<!-- Generated message <li> elements go here. -->
</ul>
</section>
<core-list flex>
<core-list id="pluginCardList" flex>
<template>
<loot-plugin-card data="{{model}}" id="{{model.id}}" data-active="{{model.isActive}}" data-empty="{{model.isEmpty}}" data-bsa="{{model.loadsBSA}}" data-master="{{model.isMaster}}">
<h1>{{model.name}}</h1>