From 3a90ed6ac2648970b8ecd60d83bce3bc72fab876 Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Sat, 8 Nov 2014 19:10:31 +0000
Subject: [PATCH] Added <loot-dropdown-menu> custom element.

It's a <paper-dropdown-menu> with a value attribute.
---
 resources/report/css/style.css                |  2 +-
 resources/report/html/loot-dropdown-menu.html | 34 +++++++++++++++++++
 resources/report/js/script.js                 | 22 ++++++------
 resources/report/report.html                  | 15 ++++----
 4 files changed, 54 insertions(+), 19 deletions(-)
 create mode 100644 resources/report/html/loot-dropdown-menu.html

diff --git a/resources/report/css/style.css b/resources/report/css/style.css
index a86dc5e6..15e6ace8 100644
--- a/resources/report/css/style.css
+++ b/resources/report/css/style.css
@@ -242,7 +242,7 @@ plugin-card > ul {
 paper-checkbox {
     padding: 0.5em 1em;
 }
-paper-dropdown-menu {
+loot-dropdown-menu {
     padding-left: 2em;
     top: -0.25em;
 }
diff --git a/resources/report/html/loot-dropdown-menu.html b/resources/report/html/loot-dropdown-menu.html
new file mode 100644
index 00000000..5f3bad62
--- /dev/null
+++ b/resources/report/html/loot-dropdown-menu.html
@@ -0,0 +1,34 @@
+<!--
+<loot-dropdown-menu> is an extension of <paper-dropdown-menu> that gives
+it a <select>-like API. This means:
+
+1. `<paper-item>.value` attributes are used to reference items.
+2. `<loot-dropdown-menu>.value` references the currently selected item.
+
+-->
+
+<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+
+<polymer-element name="loot-dropdown-menu" extends="paper-dropdown-menu">
+    <template>
+        <shadow></shadow>
+    </template>
+    <script>
+    Polymer({
+        value: undefined,
+
+        ready: function() {
+            this.valueattr = 'value';
+        },
+
+        selectedChanged: function(oldValue, newValue) {
+            this.value = newValue;
+        },
+
+        valueChanged: function(oldValue, newValue) {
+            this.selected = newValue;
+        },
+    });
+    </script>
+</polymer-element>
\ No newline at end of file
diff --git a/resources/report/js/script.js b/resources/report/js/script.js
index 5ce304a8..4c0dbba3 100644
--- a/resources/report/js/script.js
+++ b/resources/report/js/script.js
@@ -39,8 +39,8 @@ var loot = {
             /* Highlight game in menu. Could use fa-chevron-right instead. */
             var gameMenuItems = document.getElementById('gameMenu').children;
             for (var i = 0; i < gameMenuItems.length; ++i) {
-                if (gameMenuItems[i].getAttribute('data-folder') == this.folder) {
-                    document.getElementById('gameMenu').selected = i;
+                if (gameMenuItems[i].getAttribute('value') == this.folder) {
+                    document.getElementById('gameMenu').value = this.folder;
                     break;
                 }
             }
@@ -151,14 +151,14 @@ var loot = {
         /* Update the disabled games in the game menu. */
         var gameMenuItems = document.getElementById('gameMenu').children;
         for (var i = 0; i < gameMenuItems.length; ++i) {
-            if (this.installedGames.indexOf(gameMenuItems[i].getAttribute('data-folder')) == -1) {
-                gameMenuItems[i].classList.toggle('disabled', true);
+            if (this.installedGames.indexOf(gameMenuItems[i].getAttribute('value')) == -1) {
+                gameMenuItems[i].setAttribute('disabled', true);
                 gameMenuItems[i].title = 'No install detected';
                 gameMenuItems[i].removeEventListener('click', changeGame, false);
                 gameMenuItems[i].addEventListener('mouseenter', showHoverText, false);
                 gameMenuItems[i].addEventListener('mouseleave', hideHoverText, false);
             } else {
-                gameMenuItems[i].classList.toggle('disabled', false);
+                gameMenuItems[i].removeAttribute('disabled');
                 gameMenuItems[i].title = '';
                 gameMenuItems[i].addEventListener('click', changeGame, false);
                 gameMenuItems[i].removeEventListener('mouseenter', showHoverText, false);
@@ -188,7 +188,7 @@ var loot = {
         /* Now fill with new values. */
         this.settings.games.forEach(function(game){
             var menuItem = document.createElement('paper-item');
-            menuItem.setAttribute('data-folder', game.folder);
+            menuItem.setAttribute('value', game.folder);
             menuItem.setAttribute('label', game.name);
             gameMenu.appendChild(menuItem);
             gameSelect.appendChild(menuItem.cloneNode());
@@ -197,8 +197,8 @@ var loot = {
             gameTable.setReadOnly(row, ['name','folder','type']);
         });
 
-        gameSelect.selected = this.settings.game;
-        document.getElementById('languageSelect').selected = this.settings.language;
+        gameSelect.value = this.settings.game;
+        document.getElementById('languageSelect').value = this.settings.language;
         document.getElementById('enableDebugLogging').checked = this.settings.enableDebugLogging;
         document.getElementById('updateMasterlist').checked = this.settings.updateMasterlist;
         document.getElementById('autoRefresh').checked = this.settings.autoRefresh;
@@ -588,7 +588,7 @@ function changeGame(evt) {
     var request = JSON.stringify({
         name: 'changeGame',
         args: [
-            evt.currentTarget.getAttribute('data-folder')
+            evt.currentTarget.getAttribute('value')
         ]
     });
     loot.query(request).then(function(result){
@@ -1047,9 +1047,9 @@ function closeSettingsDialog(evt) {
         /* Update the JS variable values. */
         var settings = {
             enableDebugLogging: document.getElementById('enableDebugLogging').checked,
-            game: document.getElementById('defaultGameSelect').selected,
+            game: document.getElementById('defaultGameSelect').value,
             games: document.getElementById('gameTable').getRowsData(false),
-            language: document.getElementById('languageSelect').selected,
+            language: document.getElementById('languageSelect').value,
             lastGame: loot.settings.lastGame,
             updateMasterlist: document.getElementById('updateMasterlist').checked,
             filters: loot.settings.filters,
diff --git a/resources/report/report.html b/resources/report/report.html
index 2e106128..21c88925 100644
--- a/resources/report/report.html
+++ b/resources/report/report.html
@@ -13,6 +13,7 @@
     <link rel="import" href="html/plugin-card.html">
     <link rel="import" href="html/editable-table.html">
     <link rel="import" href="html/loot-dialog.html">
+    <link rel="import" href="html/loot-dropdown-menu.html">
 
     <link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
     <link rel="import" href="bower_components/core-icon/core-icon.html">
@@ -48,9 +49,9 @@
             <paper-item id="helpButton" icon="book" label="View Documentation"></paper-item>
             <paper-item id="aboutButton" icon="help" label="About"></paper-item>
         </paper-menu-button>
-        <paper-dropdown-menu id="gameMenu">
+        <loot-dropdown-menu id="gameMenu">
             <!-- Generated game <li> elements go here. -->
-        </paper-dropdown-menu>
+        </loot-dropdown-menu>
         <span flex></span>
         <core-tooltip label="Update Masterlist">
             <paper-icon-button id="updateMasterlistButton" icon="file-download"></paper-icon-button>
@@ -208,16 +209,16 @@ along with LOOT. If not, see &lt;http://www.gnu.org/licenses/&gt;.
     <loot-dialog id="settings" heading="Settings" transition="paper-dialog-transition-center" backdrop autoCloseDisabled>
         <div center horizontal layout>
             <div>Default Game</div>
-            <paper-dropdown-menu id="defaultGameSelect" valueattr="data-folder">
-                <paper-item data-folder="auto" label="Autodetect"></paper-item>
+            <loot-dropdown-menu id="defaultGameSelect">
+                <paper-item value="auto" label="Autodetect"></paper-item>
                 <!-- Game <option> elements go here. -->
-            </paper-dropdown-menu>
+            </loot-dropdown-menu>
         </div>
         <div center horizontal layout>
             <div>Language</div>
-            <paper-dropdown-menu id="languageSelect" valueattr="value">
+            <loot-dropdown-menu id="languageSelect">
                 <!-- Language <option> elements go here. -->
-            </paper-dropdown-menu>
+            </loot-dropdown-menu>
         </div>
         <core-tooltip label="The output is logged to the LOOTDebugLog.txt file." center horizontal layout>
             <paper-checkbox id="enableDebugLogging"></paper-checkbox>