From 45b881dd0052126d4cd2b72b48f66db2455567c7 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Tue, 1 Mar 2016 22:27:33 -0500
Subject: [PATCH] drop jqm collapsible

---
 .../emby-collapsible/emby-collapsible.html    | 157 ++++++++++++++++++
 .../components/filterdialog/filterdialog.js   |   5 +-
 .../filterdialog/filterdialog.template.html   |  49 ++----
 dashboard-ui/css/site.css                     |  24 +++
 dashboard-ui/dashboard.html                   |  71 ++++----
 dashboard-ui/manifest.json                    |   6 +-
 dashboard-ui/scripts/site.js                  |   3 +-
 dashboard-ui/scripts/sync.js                  |   9 +-
 8 files changed, 240 insertions(+), 84 deletions(-)
 create mode 100644 dashboard-ui/bower_components/emby-collapsible/emby-collapsible.html

diff --git a/dashboard-ui/bower_components/emby-collapsible/emby-collapsible.html b/dashboard-ui/bower_components/emby-collapsible/emby-collapsible.html
new file mode 100644
index 000000000..4a90e70dd
--- /dev/null
+++ b/dashboard-ui/bower_components/emby-collapsible/emby-collapsible.html
@@ -0,0 +1,157 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-icon/iron-icon.html">
+<link rel="import" href="../paper-button/paper-button.html">
+<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
+<link rel="import" href="../neon-animation/animations/transform-animation.html">
+<link rel="import" href="../iron-collapse/iron-collapse.html">
+
+<iron-iconset-svg name="emby-collapsible-icons" size="24">
+    <svg>
+        <defs>
+            <g id="expand-less"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" /></g>
+            <g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" /></g>
+        </defs>
+    </svg>
+</iron-iconset-svg>
+
+<dom-module id="emby-collapsible">
+    <template>
+        <style>
+            iron-collapse {
+                padding-left: 16px;
+                padding-right: 16px;
+            }
+        </style>
+        <div>
+            <paper-button on-tap="toggleExpand" id="expandButton" class="emby-collapsible-button" style="margin:0;display: flex; justify-content: center; align-items: center;">
+                <h3 class="emby-collapsible-title" title="[[title]]">[[title]]</h3>
+                <iron-icon id="expandIcon" style="margin-left: auto; margin-right: .5em;"></iron-icon>
+            </paper-button>
+            <iron-collapse id="contentCollapse" class="emby-collapsible-content" opened="{{expanded}}">
+                <content></content>
+            </iron-collapse>
+        </div>
+    </template>
+    <script>
+        Polymer({
+            is: 'emby-collapsible',
+            behaviors: [Polymer.NeonAnimationRunnerBehavior],
+            properties: {
+                expanded: {
+                    type: Boolean,
+                    value: false,
+                    notify: true,
+                    observer: '_expandedChanged'
+                },
+                expandMoreTitle: {
+                    type: String,
+                    value: "Show More"
+                },
+                expandLessTitle: {
+                    type: String,
+                    value: "Show Less"
+                },
+                enableRotateAnimation: {
+                    type: Boolean,
+                    value: true
+                },
+                expandMoreIcon: {
+                    type: String,
+                    value: "expand-more"
+                },
+                expandLessIcon: {
+                    type: String,
+                    value: "expand-less"
+                },
+                animationConfig: {
+                    value: function () {
+                        return {
+                            'rotateIcon': {
+                                name: 'transform-animation',
+                                node: this.$.expandIcon,
+                                transformOrigin: "50% 50%",
+                                transformFrom: "rotate(0)",
+                                transformTo: "rotate(180deg)",
+                                timing: { duration: 350 }
+                            }
+                        }
+                    }
+                }
+            },
+            listeners: {
+                'neon-animation-finish': '_onNeonAnimationFinish'
+            },
+            _onNeonAnimationFinish: function () {
+                if (this.expanded) {
+                    this.$.expandIcon.icon = "emby-collapsible-icons:expand-less";
+                }
+                else {
+                    this.$.expandIcon.icon = "emby-collapsible-icons:expand-more";
+                }
+            },
+
+            // Fires when an instance of the element is created
+            created: function () { },
+
+            // Fires when the local DOM has been fully prepared
+            ready: function () {
+                //Set initial icon
+                if (this.expanded) {
+                    this.$.expandIcon.icon = "emby-collapsible-icons:expand-less";
+                }
+                else {
+                    this.$.expandIcon.icon = "emby-collapsible-icons:expand-more";
+                }
+
+                //Set initial title
+                if (this.expanded) {
+                    this.$.expandButton.title = this.expandLessTitle;
+                }
+                else {
+                    this.$.expandButton.title = this.expandMoreTitle;
+                }
+            },
+
+            // Fires when the element was inserted into the document
+            attached: function () { },
+
+            // Fires when the element was removed from the document
+            detached: function () { },
+
+            // Fires when an attribute was added, removed, or updated
+            _expandedChanged: function (newVal, oldVal) {
+
+
+                //If icon is already set no need to animate!
+                if ((newVal && (this.$.expandIcon.icon == "emby-collapsible-icons:expand-less")) || (!newVal && (this.$.expandIcon.icon == "emby-collapsible-icons:expand-more"))) {
+                    return;
+                }
+
+                //Set title
+                if (newVal) {
+                    this.$.expandButton.title = this.expandLessTitle;
+                }
+                else {
+                    this.$.expandButton.title = this.expandMoreTitle;
+                }
+
+                if (this.enableRotateAnimation) {
+                    //Play rotate animation
+                    this.cancelAnimation();
+                    this.playAnimation('rotateIcon');
+                }
+                else {
+                    if (this.expanded) {
+                        this.$.expandIcon.icon = "emby-collapsible-icons:expand-less";
+                    }
+                    else {
+                        this.$.expandIcon.icon = "emby-collapsible-icons:expand-more";
+                    }
+                }
+            },
+            toggleExpand: function () {
+                this.expanded = !this.expanded;
+            }
+        });
+    </script>
+</dom-module>
diff --git a/dashboard-ui/components/filterdialog/filterdialog.js b/dashboard-ui/components/filterdialog/filterdialog.js
index 8d798728e..0baf5dbc1 100644
--- a/dashboard-ui/components/filterdialog/filterdialog.js
+++ b/dashboard-ui/components/filterdialog/filterdialog.js
@@ -1,4 +1,4 @@
-define(['paperdialoghelper', 'events', 'browser', 'paper-checkbox', 'jqmcollapsible', 'css!components/filterdialog/style', 'paper-radio-button', 'paper-radio-group'], function (paperDialogHelper, events, browser) {
+define(['paperdialoghelper', 'events', 'browser', 'paper-checkbox', 'emby-collapsible', 'css!components/filterdialog/style', 'paper-radio-button', 'paper-radio-group'], function (paperDialogHelper, events, browser) {
 
     function renderOptions(context, selector, cssClass, items, isCheckedFn) {
 
@@ -526,9 +526,6 @@
                     setVisibility(dlg, options);
                     document.body.appendChild(dlg);
 
-                    // needed for jqm collapsibles
-                    $(dlg.querySelectorAll('div[data-role="collapsible"]')).collapsible({});
-
                     paperDialogHelper.open(dlg);
 
                     dlg.addEventListener('iron-overlay-closed', resolve);
diff --git a/dashboard-ui/components/filterdialog/filterdialog.template.html b/dashboard-ui/components/filterdialog/filterdialog.template.html
index f4b149ab5..78742d645 100644
--- a/dashboard-ui/components/filterdialog/filterdialog.template.html
+++ b/dashboard-ui/components/filterdialog/filterdialog.template.html
@@ -25,9 +25,7 @@
         </div>
     </div>
     <br />
-    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="airdays hide">
-        <h2>${HeaderAirDays}</h2>
-
+    <emby-collapsible title="${HeaderAirDays}" class="airdays hide">
         <div class="paperCheckboxList">
             <paper-checkbox class="chkAirDays" id="chkSunday" data-filter="Sunday">${OptionSunday}</paper-checkbox>
             <paper-checkbox class="chkAirDays" id="chkMonday" data-filter="Monday">${OptionMonday}</paper-checkbox>
@@ -37,10 +35,8 @@
             <paper-checkbox class="chkAirDays" id="chkFriday" data-filter="Friday">${OptionFriday}</paper-checkbox>
             <paper-checkbox class="chkAirDays" id="chkSaturday" data-filter="Saturday">${OptionSaturday}</paper-checkbox>
         </div>
-    </div>
-    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="features hide">
-        <h2>${HeaderFeatures}</h2>
-
+    </emby-collapsible>
+    <emby-collapsible title="${HeaderFeatures}" class="features hide">
         <div class="paperCheckboxList">
             <paper-checkbox class="chkFeatureFilter" id="chkSubtitle">${OptionHasSubtitles}</paper-checkbox>
             <paper-checkbox class="chkFeatureFilter" id="chkTrailer">${OptionHasTrailer}</paper-checkbox>
@@ -48,7 +44,7 @@
             <paper-checkbox class="chkFeatureFilter" id="chkThemeSong">${OptionHasThemeSong}</paper-checkbox>
             <paper-checkbox class="chkFeatureFilter" id="chkThemeVideo">${OptionHasThemeVideo}</paper-checkbox>
         </div>
-    </div>
+    </emby-collapsible>
 
     <div class="players hide">
         <h2 style="margin-bottom: .25em;">
@@ -61,37 +57,22 @@
             <paper-radio-button class="radioPlayers" name="4">${Option4Player}</paper-radio-button>
         </paper-radio-group>
     </div>
-    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="genreFilters hide">
-        <h2>${HeaderGenres}</h2>
-
+    <emby-collapsible title="${HeaderGenres}" class="genreFilters hide">
         <div class="filterOptions">
         </div>
-    </div>
-
-    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="officialRatingFilters hide">
-        <h2>${HeaderParentalRatings}</h2>
+    </emby-collapsible>
 
+    <emby-collapsible title="${HeaderParentalRatings}" class="officialRatingFilters hide">
         <div class="filterOptions">
         </div>
-    </div>
-
-    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="tagFilters hide">
-        <h2>${HeaderTags}</h2>
+    </emby-collapsible>
 
+    <emby-collapsible title="${HeaderTags}" class="tagFilters hide">
         <div class="filterOptions">
         </div>
-    </div>
-
-    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="tagFilters hide">
-        <h2>${HeaderTags}</h2>
-
-        <div class="filterOptions">
-        </div>
-    </div>
-
-    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="videoTypeFilters hide">
-        <h2>${HeaderVideoTypes}</h2>
+    </emby-collapsible>
 
+    <emby-collapsible title="${HeaderVideoTypes}" class="videoTypeFilters hide">
         <div class="paperCheckboxList">
             <paper-checkbox class="chkVideoTypeFilter chkBluray" data-filter="Bluray">${OptionBluray}</paper-checkbox>
             <paper-checkbox class="chkVideoTypeFilter chkDvd" data-filter="Dvd">${OptionDvd}</paper-checkbox>
@@ -101,12 +82,10 @@
             <paper-checkbox class="chkSDFilter IsHD">${OptionIsSD}</paper-checkbox>
             <paper-checkbox class="chk3DFilter chk3D">${Option3D}</paper-checkbox>
         </div>
-    </div>
-
-    <div data-role="collapsible" data-collapsed="true" data-mini="true" class="yearFilters hide">
-        <h2>${HeaderYears}</h2>
+    </emby-collapsible>
 
+    <emby-collapsible title="${HeaderYears}" class="yearFilters hide">
         <div class="filterOptions">
         </div>
-    </div>
+    </emby-collapsible>
 </div>
\ No newline at end of file
diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css
index c8eb8d467..7c2658ec4 100644
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@@ -1878,3 +1878,27 @@ progress {
 .actionSheetMenuItem:hover {
     background-color: #e8e8e8;
 }
+
+emby-collapsible>.style-scope {
+    margin: .5em 0;
+}
+
+.ui-body-a .emby-collapsible-button {
+    border: 1px solid #ddd;
+    background-color: #f2f2f2;
+    text-transform: none;
+}
+
+.ui-body-a .emby-collapsible-title {
+    margin: .25em 0;
+    color: #000;
+    padding: 0 0 0 .25em;
+    font-weight: 500;
+}
+
+.ui-body-a .emby-collapsible-content {
+    border: 1px solid #ddd;
+    border-width: 0 1px 1px 1px;
+    padding: 1em 1.25em;
+    background-color: #fff;
+}
diff --git a/dashboard-ui/dashboard.html b/dashboard-ui/dashboard.html
index 0a8fa95c5..3294997f9 100644
--- a/dashboard-ui/dashboard.html
+++ b/dashboard-ui/dashboard.html
@@ -4,7 +4,7 @@
     <title>Emby</title>
 </head>
 <body>
-    <div id="dashboardPage" data-role="page" class="page type-interior dashboardHomePage" data-require="jqmcollapsible,scripts/dashboardpage,humanedate,buttonenabled,paper-icon-item,paper-item-body,paper-fab">
+    <div id="dashboardPage" data-role="page" class="page type-interior dashboardHomePage" data-require="scripts/dashboardpage,humanedate,buttonenabled,paper-icon-item,paper-item-body,paper-fab,emby-collapsible">
 
         <div data-role="content">
             <div class="content-primary">
@@ -23,6 +23,8 @@
 
                     <div class="readOnlyContent dashboardHomeLeftColumn">
 
+                        <div>
+                        </div>
                         <div>
                             <h1>${HeaderServerInformation}</h1>
                             <div class="paperList" style="padding:1em;">
@@ -57,15 +59,17 @@
 
                         <p class="supporterIconContainer" style="padding-left: .5em;margin: 1em 0 0;">
                         </p>
-                        <div id="collapsiblePendingInstallations" data-role="collapsible" data-collapsed="false" style="margin-top: 2em; display: none;">
-                            <h3>${HeaderPendingInstallations}</h3>
-                            <p>${LabelComponentsUpdated}</p>
-                            <div id="pendingInstallations">
-                            </div>
-                            <p>${MessagePleaseRestartServerToFinishUpdating}</p>
-                            <div class="btnRestartContainer hide">
-                                <paper-button raised class="submit" onclick="DashboardPage.restart();"><iron-icon icon="refresh"></iron-icon><span>${ButtonRestartNow}</span></paper-button>
-                            </div>
+
+                        <div id="collapsiblePendingInstallations" style="margin-top: 2em; display: none;">
+                            <emby-collapsible title="${HeaderPendingInstallations}" expanded>
+                                <p>${LabelComponentsUpdated}</p>
+                                <div id="pendingInstallations">
+                                </div>
+                                <p>${MessagePleaseRestartServerToFinishUpdating}</p>
+                                <div class="btnRestartContainer hide">
+                                    <paper-button raised class="submit" onclick="DashboardPage.restart();"><iron-icon icon="refresh"></iron-icon><span>${ButtonRestartNow}</span></paper-button>
+                                </div>
+                            </emby-collapsible>
                         </div>
 
                         <div class="activeDevicesCollapsible" style="margin-top: 2em;">
@@ -74,35 +78,32 @@
                             </div>
                         </div>
 
-                        <div id="runningTasksCollapsible" data-role="collapsible" data-collapsed="false" style="margin-top: 1em; display: none;">
-                            <h3>${HeaderRunningTasks}</h3>
-                            <div>
+                        <div id="runningTasksCollapsible" style="margin-top: 2em; display: none;">
+                            <emby-collapsible title="${HeaderRunningTasks}" expanded>
                                 <div id="divRunningTasks">
                                 </div>
-                            </div>
+                            </emby-collapsible>
                         </div>
 
-                        <div data-role="collapsible" data-collapsed="true">
-                            <h3>${HeaderPaths}</h3>
-                            <div>
-                                <p>
-                                    <b>${LabelCache}</b><br />
-                                    <span id="cachePath"></span>
-                                </p>
-                                <p>
-                                    <b>${LabelLogs}</b><br />
-                                    <span id="logPath"></span>
-                                </p>
-                                <p>
-                                    <b>${LabelMetadata}</b><br />
-                                    <span id="metadataPath"></span>
-                                </p>
-                                <p>
-                                    <b>${LabelTranscodingTemporaryFiles}</b><br />
-                                    <span id="transcodingTemporaryPath"></span>
-                                </p>
-                            </div>
-                        </div>
+                        <br />
+                        <emby-collapsible title="${HeaderPaths}">
+                            <p>
+                                <b>${LabelCache}</b><br />
+                                <span id="cachePath"></span>
+                            </p>
+                            <p>
+                                <b>${LabelLogs}</b><br />
+                                <span id="logPath"></span>
+                            </p>
+                            <p>
+                                <b>${LabelMetadata}</b><br />
+                                <span id="metadataPath"></span>
+                            </p>
+                            <p>
+                                <b>${LabelTranscodingTemporaryFiles}</b><br />
+                                <span id="transcodingTemporaryPath"></span>
+                            </p>
+                        </emby-collapsible>
                     </div>
 
                     <div class="readOnlyContent dashboardHomeRightColumn firstDashboardHomeRightColumn">
diff --git a/dashboard-ui/manifest.json b/dashboard-ui/manifest.json
index bf7328395..8b6e28cd0 100644
--- a/dashboard-ui/manifest.json
+++ b/dashboard-ui/manifest.json
@@ -16,13 +16,11 @@
     }
   ],
   "icons": [ {
-    "src": "images/icon-144x144.png",
+    "src": "css/images/touchicon144.png",
     "sizes": "144x144",
     "type": "image/png",
     "density": "3.0"
   }],
   "display": "standalone",
-  "display": "standalone",
-  "theme_color": "#52B54B",
-  "start_image": "images/start-image.png"
+  "theme_color": "#52B54B"
 }
\ No newline at end of file
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index 83eea9f4f..b495f4265 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -1491,7 +1491,7 @@ var AppInfo = {};
         // This doesn't perform well on iOS
         AppInfo.enableHeadRoom = !isIOS;
 
-        AppInfo.supportsDownloading = !(AppInfo.isNativeApp && isIOS);
+        AppInfo.supportsDownloading = !(AppInfo.isNativeApp);
 
         // This currently isn't working on android, unfortunately
         AppInfo.supportsFileInput = !(AppInfo.isNativeApp && isAndroid);
@@ -1842,6 +1842,7 @@ var AppInfo = {};
         define("paper-item-body", ["html!" + bowerPath + "/paper-item/paper-item-body.html"]);
 
         define("paper-collapse-item", ["html!" + bowerPath + "/paper-collapse-item/paper-collapse-item.html"]);
+        define("emby-collapsible", ["html!" + bowerPath + "/emby-collapsible/emby-collapsible.html"]);
 
         define("jstree", [bowerPath + "/jstree/dist/jstree", "css!thirdparty/jstree/themes/default/style.min.css"]);
 
diff --git a/dashboard-ui/scripts/sync.js b/dashboard-ui/scripts/sync.js
index dc0de3f79..80e48a986 100644
--- a/dashboard-ui/scripts/sync.js
+++ b/dashboard-ui/scripts/sync.js
@@ -81,7 +81,7 @@
 
         return new Promise(function (resolve, reject) {
 
-            require(['paper-checkbox', 'paper-input', 'jqmcollapsible'], function () {
+            require(['paper-checkbox', 'paper-input', 'emby-collapsible'], function () {
                 renderFormInternal(options);
                 resolve();
             });
@@ -162,8 +162,7 @@
             dialogOptions.Options.indexOf('ItemLimit') != -1) {
 
             html += '<br/>';
-            html += '<div data-role="collapsible" data-mini="true">';
-            html += '<h2>' + Globalize.translate('HeaderAdvanced') + '</h2>';
+            html += '<emby-collapsible title="' + Globalize.translate('HeaderAdvanced') + '">';
             html += '<div style="padding:0 0 1em;">';
             if (dialogOptions.Options.indexOf('SyncNewContent') != -1) {
                 html += '<br/>';
@@ -179,14 +178,14 @@
                 html += '<div class="fieldDescription">' + Globalize.translate('LabelItemLimitHelp') + '</div>';
                 html += '</div>';
             }
-            html += '</div>';
+            html += '</emby-collapsible>';
             html += '</div>';
         }
 
         //html += '</div>';
         //html += '</div>';
 
-        $(elem).html(html).trigger('create');
+        $(elem).html(html);
 
         $('#selectSyncTarget', elem).on('change', function () {