From 5439ca56b6382ff37dc626ff025d9a80086d5ca9 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Thu, 30 Jul 2015 11:18:07 -0400
Subject: [PATCH] update controls

---
 dashboard-ui/dashboardgeneral.html            |  46 ++-
 dashboard-ui/itemdetails.html                 |   2 +-
 dashboard-ui/scripts/dashboardgeneral.js      |  19 +-
 dashboard-ui/scripts/site.js                  |   2 +-
 .../thirdparty/paper-button-style.css         |   3 +
 dashboard-ui/vulcanize-in.html                |   1 +
 dashboard-ui/vulcanize-out.html               | 329 ++++++++++++++++++
 7 files changed, 364 insertions(+), 38 deletions(-)

diff --git a/dashboard-ui/dashboardgeneral.html b/dashboard-ui/dashboardgeneral.html
index 414aeb9140..28f50492de 100644
--- a/dashboard-ui/dashboardgeneral.html
+++ b/dashboard-ui/dashboardgeneral.html
@@ -16,24 +16,23 @@
 
                 <form class="dashboardGeneralForm">
 
-                    <ul data-role="listview" class="ulForm">
-                        <li>
-                            <label for="txtServerName">${LabelFriendlyServerName}</label>
-                            <input id="txtServerName" />
-                            <div class="fieldDescription">${LabelFriendlyServerNameHelp}</div>
-                        </li>
-                        <li>
-                            <label for="selectLocalizationLanguage">${LabelPreferredDisplayLanguage}</label>
-                            <select id="selectLocalizationLanguage" data-mini="true"></select>
-                            <div class="fieldDescription">
-                                <div>${LabelPreferredDisplayLanguageHelp}</div>
-                                <div style="margin-top: .25em;">
-                                    <a href="http://emby.media/community/index.php?/topic/5727-join-our-translation-team/" target="_blank">${LabelReadHowYouCanContribute}</a>
-                                </div>
-                            </div>
-                        </li>
-                    </ul>
+                    <div>
+                        <paper-input type="text" id="txtServerName" label="${LabelFriendlyServerName}"></paper-input>
+                        <div class="fieldDescription">${LabelFriendlyServerNameHelp}</div>
 
+                    </div>
+                    <br/><br />
+                    <div>
+                        <label for="selectLocalizationLanguage">${LabelPreferredDisplayLanguage}</label>
+                        <select id="selectLocalizationLanguage" data-mini="true"></select>
+                        <div class="fieldDescription">
+                            <div>${LabelPreferredDisplayLanguageHelp}</div>
+                            <div style="margin-top: .25em;">
+                                <a href="http://emby.media/community/index.php?/topic/5727-join-our-translation-team/" target="_blank">${LabelReadHowYouCanContribute}</a>
+                            </div>
+                        </div>
+                    </div>
+                    <br /><br />
 
                     <div data-role="collapsible">
                         <h2>${HeaderAdvanced}</h2>
@@ -41,11 +40,8 @@
                             <br />
                             <ul data-role="listview" class="ulForm">
                                 <li>
-                                    <label for="txtCachePath">${LabelCachePath}</label>
-                                    <div style="display: inline-block; width: 85%;">
-                                        <input type="text" id="txtCachePath" name="txtCachePath" />
-                                    </div>
-                                    <button id="btnSelectCachePath" type="button" data-icon="search" data-iconpos="notext" data-inline="true">${ButtonSelectDirectory}</button>
+                                    <paper-input type="text" id="txtCachePath" label="${LabelCachePath}" style="display:inline-block;width:85%;"></paper-input>
+                                    <paper-icon-button id="btnSelectCachePath" icon="search">${ButtonSelectDirectory}</paper-icon-button>
                                     <div class="fieldDescription">${LabelCachePathHelp}</div>
                                 </li>
                             </ul>
@@ -60,13 +56,11 @@
 
                             <ul data-role="listview" class="ulForm">
                                 <li>
-                                    <label for="txtLoginDisclaimer">${LabelLoginDisclaimer}</label>
-                                    <input id="txtLoginDisclaimer" type="text" />
+                                    <paper-input type="text" id="txtLoginDisclaimer" label="${LabelLoginDisclaimer}"></paper-input>
                                     <div class="fieldDescription">${LabelLoginDisclaimerHelp}</div>
                                 </li>
                                 <li>
-                                    <label for="txtCustomCss">${LabelCustomCss}</label>
-                                    <textarea id="txtCustomCss" style="font-family:monospace;height:200px!important;overflow-y:auto;"></textarea>
+                                    <paper-textarea id="txtCustomCss" label="${LabelCustomCss}" class="mono"></paper-textarea>
                                     <div class="fieldDescription">${LabelCustomCssHelp}</div>
                                 </li>
                             </ul>
diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html
index 65996cf93a..3b42764b5e 100644
--- a/dashboard-ui/itemdetails.html
+++ b/dashboard-ui/itemdetails.html
@@ -4,7 +4,7 @@
     <title></title>
 </head>
 <body>
-    <div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage lightBackdropPage" data-theme="b" data-require="scripts/itemdetailpage,paperbuttonstyle,tileitemcss,jqmicons,scripts/livetvcomponents">
+    <div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage lightBackdropPage" data-theme="b" data-require="scripts/itemdetailpage,paperbuttonstyle,tileitemcss,scripts/livetvcomponents">
 
         <div class="itemTabs homeTabs" style="display: none;">
             <div class="libraryViewNav scopedLibraryViewNav">
diff --git a/dashboard-ui/scripts/dashboardgeneral.js b/dashboard-ui/scripts/dashboardgeneral.js
index 058ee1bb42..071c56d444 100644
--- a/dashboard-ui/scripts/dashboardgeneral.js
+++ b/dashboard-ui/scripts/dashboardgeneral.js
@@ -13,7 +13,8 @@
 
         refreshPageTitle(page);
 
-        $('#txtServerName', page).val(config.ServerName || '');
+        page.querySelector('#txtServerName').value = config.ServerName || '';
+        page.querySelector('#txtCachePath').value = config.CachePath || '';
 
         $('#selectLocalizationLanguage', page).html(languageOptions.map(function (l) {
 
@@ -23,8 +24,6 @@
 
         currentLanguage = config.UICulture;
 
-        $('#txtCachePath', page).val(config.CachePath || '');
-
         Dashboard.hideLoadingMsg();
     }
 
@@ -44,10 +43,10 @@
 
         ApiClient.getServerConfiguration().done(function (config) {
 
-            config.ServerName = $('#txtServerName', form).val();
+            config.ServerName = form.querySelector('#txtServerName').value;
             config.UICulture = $('#selectLocalizationLanguage', form).val();
 
-            config.CachePath = $('#txtCachePath', form).val();
+            config.CachePath = form.querySelector('#txtCachePath').value;
 
             if (config.UICulture != currentLanguage) {
                 Dashboard.showDashboardRefreshNotification();
@@ -59,8 +58,8 @@
 
                 ApiClient.getNamedConfiguration(brandingConfigKey).done(function (brandingConfig) {
 
-                    brandingConfig.LoginDisclaimer = $('#txtLoginDisclaimer', form).val();
-                    brandingConfig.CustomCss = $('#txtCustomCss', form).val();
+                    brandingConfig.LoginDisclaimer = form.querySelector('#txtLoginDisclaimer').value;
+                    brandingConfig.CustomCss = form.querySelector('#txtCustomCss').value;
 
                     var cssChanged = currentBrandingOptions && brandingConfig.CustomCss != currentBrandingOptions.CustomCss;
 
@@ -91,7 +90,7 @@
                 callback: function (path) {
 
                     if (path) {
-                        $('#txtCachePath', page).val(path);
+                        page.querySelector('#txtCachePath').value = path;
                     }
                     picker.close();
                 },
@@ -124,8 +123,8 @@
 
             currentBrandingOptions = config;
 
-            $('#txtLoginDisclaimer', page).val(config.LoginDisclaimer || '');
-            $('#txtCustomCss', page).val(config.CustomCss || '');
+            page.querySelector('#txtLoginDisclaimer').value = config.LoginDisclaimer || '';
+            page.querySelector('#txtCustomCss').value = config.CustomCss || '';
         });
 
     });
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index b5f920ecce..f50c325887 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -67,7 +67,7 @@ var Dashboard = {
         // These are not needed. Nulling them out can help reduce dom querying when pages are loaded
         $.mobile.nojs = null;
         $.mobile.degradeInputsWithin = null;
-        $.mobile.keepNative = ":jqmData(role='none'),.paper-input";
+        $.mobile.keepNative = ":jqmData(role='none'),.paper-input,textarea.style-scope";
 
         $.mobile.filterHtml = Dashboard.filterHtml;
     },
diff --git a/dashboard-ui/thirdparty/paper-button-style.css b/dashboard-ui/thirdparty/paper-button-style.css
index b2e7c295f5..666dde4f56 100644
--- a/dashboard-ui/thirdparty/paper-button-style.css
+++ b/dashboard-ui/thirdparty/paper-button-style.css
@@ -388,3 +388,6 @@ paper-menu-item {
 .ui-page-theme-b .unfocused-line.paper-input-container {
     background: #858585;
 }
+paper-textarea.mono textarea {
+    font-family: monospace!important;
+}
\ No newline at end of file
diff --git a/dashboard-ui/vulcanize-in.html b/dashboard-ui/vulcanize-in.html
index 8a2261c578..90bc63f63f 100644
--- a/dashboard-ui/vulcanize-in.html
+++ b/dashboard-ui/vulcanize-in.html
@@ -18,6 +18,7 @@
 <link rel="import" href="bower_components/paper-slider/paper-slider.html">
 <link rel="import" href="bower_components/paper-menu/paper-menu.html">
 <link rel="import" href="bower_components/paper-input/paper-input.html">
+<link rel="import" href="bower_components/paper-input/paper-textarea.html">
 <link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="bower_components/paper-item/paper-icon-item.html">
 <link rel="import" href="bower_components/paper-item/paper-item-body.html">
diff --git a/dashboard-ui/vulcanize-out.html b/dashboard-ui/vulcanize-out.html
index edf082abbf..6636e09381 100644
--- a/dashboard-ui/vulcanize-out.html
+++ b/dashboard-ui/vulcanize-out.html
@@ -12355,6 +12355,10 @@ is separate from validation, and `allowed-pattern` does not affect how the input
 
 
 
+
+
+
+
 </head><body><div hidden="" by-vulcanize=""><dom-module id="paper-material" assetpath="bower_components/paper-material/">
   <style>
     :host {
@@ -17490,6 +17494,331 @@ paper-ripple {
 
 })();
 
+</script>
+<dom-module id="iron-autogrow-textarea" assetpath="bower_components/iron-autogrow-textarea/">
+
+  <style>
+    :host {
+      display: inline-block;
+      position: relative;
+      width: 400px;
+      border: 1px solid;
+      padding: 2px;
+      -moz-appearance: textarea;
+      -webkit-appearance: textarea;
+    }
+
+    .mirror-text {
+      visibility: hidden;
+      word-wrap: break-word;
+    }
+
+    textarea {
+      position: relative;
+      outline: none;
+      border: none;
+      resize: none;
+      background: inherit;
+      color: inherit;
+      /* see comments in template */
+      width: 100%;
+      height: 100%;
+      font-size: inherit;
+      font-family: inherit;
+    }
+
+    ::content textarea:invalid {
+      box-shadow: none;
+    }
+
+  </style>
+  <template>
+    
+    <div id="mirror" class="mirror-text" aria-hidden="true">&nbsp;</div>
+
+    
+    <div class="textarea-container fit">
+      <textarea id="textarea" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" required$="[[required]]" rows$="[[rows]]" maxlength$="[[maxlength]]"></textarea>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+
+  Polymer({
+
+    is: 'iron-autogrow-textarea',
+
+    behaviors: [
+      Polymer.IronFormElementBehavior,
+      Polymer.IronValidatableBehavior,
+      Polymer.IronControlState
+    ],
+
+    properties: {
+
+      /**
+       * Use this property instead of `value` for two-way data binding.
+       */
+      bindValue: {
+        observer: '_bindValueChanged',
+        type: String
+      },
+
+      /**
+       * The initial number of rows.
+       *
+       * @attribute rows
+       * @type number
+       * @default 1
+       */
+      rows: {
+        type: Number,
+        value: 1,
+        observer: '_updateCached'
+      },
+
+      /**
+       * The maximum number of rows this element can grow to until it
+       * scrolls. 0 means no maximum.
+       *
+       * @attribute maxRows
+       * @type number
+       * @default 0
+       */
+      maxRows: {
+       type: Number,
+       value: 0,
+       observer: '_updateCached'
+      },
+
+      /**
+       * Bound to the textarea's `autocomplete` attribute.
+       */
+      autocomplete: {
+        type: String,
+        value: 'off'
+      },
+
+      /**
+       * Bound to the textarea's `autofocus` attribute.
+       */
+      autofocus: {
+        type: String,
+        value: 'off'
+      },
+
+      /**
+       * Bound to the textarea's `inputmode` attribute.
+       */
+      inputmode: {
+        type: String
+      },
+
+      /**
+       * Bound to the textarea's `name` attribute.
+       */
+      name: {
+        type: String
+      },
+
+      /**
+       * The value for this input, same as `bindValue`
+       */
+      value: {
+        notify: true,
+        type: String,
+        computed: '_computeValue(bindValue)'
+      },
+
+      /**
+       * Bound to the textarea's `placeholder` attribute.
+       */
+      placeholder: {
+        type: String
+      },
+
+      /**
+       * Bound to the textarea's `readonly` attribute.
+       */
+      readonly: {
+        type: String
+      },
+
+      /**
+       * Set to true to mark the textarea as required.
+       */
+      required: {
+        type: Boolean
+      },
+
+      /**
+       * The maximum length of the input value.
+       */
+      maxlength: {
+        type: Number
+      }
+
+    },
+
+    listeners: {
+      'input': '_onInput'
+    },
+
+    /**
+     * Returns the underlying textarea.
+     * @type HTMLTextAreaElement
+     */
+    get textarea() {
+      return this.$.textarea;
+    },
+
+    /**
+     * Returns true if `value` is valid. The validator provided in `validator`
+     * will be used first, if it exists; otherwise, the `textarea`'s validity
+     * is used.
+     * @return {boolean} True if the value is valid.
+     */
+    validate: function() {
+      // Empty, non-required input is valid.
+      if (!this.required && this.value == '') {
+        this.invalid = false;
+        return true;
+      }
+
+      var valid;
+      if (this.hasValidator()) {
+        valid = Polymer.IronValidatableBehavior.validate.call(this, this.value);
+      } else {
+        valid = this.$.textarea.validity.valid;
+        this.invalid = !valid;
+      }
+      this.fire('iron-input-validate');
+      return valid;
+    },
+
+    _update: function() {
+      this.$.mirror.innerHTML = this._valueForMirror();
+
+      var textarea = this.textarea;
+      // If the value of the textarea was updated imperatively, then we
+      // need to manually update bindValue as well.
+      if (textarea && this.bindValue != textarea.value) {
+        this.bindValue = textarea.value;
+      }
+    },
+
+    _bindValueChanged: function() {
+      var textarea = this.textarea;
+      if (!textarea) {
+        return;
+      }
+
+      textarea.value = this.bindValue;
+      this._update();
+      // manually notify because we don't want to notify until after setting value
+      this.fire('bind-value-changed', {value: this.bindValue});
+    },
+
+    _onInput: function(event) {
+      this.bindValue = event.path ? event.path[0].value : event.target.value;
+      this._update();
+    },
+
+    _constrain: function(tokens) {
+      var _tokens;
+      tokens = tokens || [''];
+      // Enforce the min and max heights for a multiline input to avoid measurement
+      if (this.maxRows > 0 && tokens.length > this.maxRows) {
+        _tokens = tokens.slice(0, this.maxRows);
+      } else {
+        _tokens = tokens.slice(0);
+      }
+      while (this.rows > 0 && _tokens.length < this.rows) {
+        _tokens.push('');
+      }
+      return _tokens.join('<br>') + '&nbsp;';
+    },
+
+    _valueForMirror: function() {
+      var input = this.textarea;
+      if (!input) {
+        return;
+      }
+      this.tokens = (input && input.value) ? input.value.replace(/&/gm, '&amp;').replace(/"/gm, '&quot;').replace(/'/gm, '&#39;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;').split('\n') : [''];
+      return this._constrain(this.tokens);
+    },
+
+    _updateCached: function() {
+      this.$.mirror.innerHTML = this._constrain(this.tokens);
+    },
+
+    _computeValue: function() {
+      return this.bindValue;
+    }
+  })
+</script>
+<dom-module id="paper-textarea" assetpath="bower_components/paper-input/">
+  <template>
+
+    <paper-input-container no-label-float$="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
+
+      <label hidden$="[[!label]]">[[label]]</label>
+
+      <iron-autogrow-textarea id="input" class="paper-input-input" bind-value="{{value}}" autocomplete$="[[autocomplete]]" autofocus$="[[autofocus]]" inputmode$="[[inputmode]]" name$="[[name]]" placeholder$="[[placeholder]]" readonly$="[[readonly]]" required$="[[required]]" maxlength$="[[maxlength]]" autocapitalize$="[[autocapitalize]]"></iron-autogrow-textarea>
+
+      <template is="dom-if" if="[[errorMessage]]">
+        <paper-input-error>[[errorMessage]]</paper-input-error>
+      </template>
+
+      <template is="dom-if" if="[[charCounter]]">
+        <paper-input-char-counter></paper-input-char-counter>
+      </template>
+
+    </paper-input-container>
+
+  </template>
+
+</dom-module>
+
+<script>
+
+(function() {
+
+  Polymer({
+
+    is: 'paper-textarea',
+
+    behaviors: [
+      Polymer.PaperInputBehavior
+    ],
+
+    properties: {
+
+      _ariaLabelledBy: {
+        observer: '_ariaLabelledByChanged',
+        type: String
+      },
+
+      _ariaDescribedBy: {
+        observer: '_ariaDescribedByChanged',
+        type: String
+      }
+
+    },
+
+    _ariaLabelledByChanged: function(ariaLabelledBy) {
+      this.$.input.textarea.setAttribute('aria-labelledby', ariaLabelledBy);
+    },
+
+    _ariaDescribedByChanged: function(ariaDescribedBy) {
+      this.$.input.textarea.setAttribute('aria-describedby', ariaDescribedBy);
+    }
+
+  });
+
+})();
+
 </script>
 <dom-module id="paper-checkbox" assetpath="bower_components/paper-checkbox/">
   <style>