From fad7422d21c55941a50d3a2bf2e948e88f8737a2 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Mon, 25 May 2015 16:33:56 +0100
Subject: [PATCH] Added search toolbar.

For #428. Search is functional, though there is no highlighting of
results, and it may interact oddly with filters.
---
 resources/report/css/material.css      |   2 +-
 resources/report/css/style.css         |   7 +-
 resources/report/html/loot-search.html | 158 +++++++++++++++++++++++++
 resources/report/js/events.js          |  10 ++
 resources/report/report.html           |   7 +-
 5 files changed, 181 insertions(+), 3 deletions(-)
 create mode 100644 resources/report/html/loot-search.html

diff --git a/resources/report/css/material.css b/resources/report/css/material.css
index 69d5781f..9bd464cb 100644
--- a/resources/report/css/material.css
+++ b/resources/report/css/material.css
@@ -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);
 }
 
diff --git a/resources/report/css/style.css b/resources/report/css/style.css
index 31ff030d..b2875018 100644
--- a/resources/report/css/style.css
+++ b/resources/report/css/style.css
@@ -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;
 }
diff --git a/resources/report/html/loot-search.html b/resources/report/html/loot-search.html
new file mode 100644
index 00000000..043a621b
--- /dev/null
+++ b/resources/report/html/loot-search.html
@@ -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>
diff --git a/resources/report/js/events.js b/resources/report/js/events.js
index 469d34e7..f42719d7 100644
--- a/resources/report/js/events.js
+++ b/resources/report/js/events.js
@@ -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);
diff --git a/resources/report/report.html b/resources/report/report.html
index 6b6ba15f..a0c3b0bd 100644
--- a/resources/report/report.html
+++ b/resources/report/report.html
@@ -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>