Update MetadataViewer

Author: softworkz

MetadataViewer/Html/metadataviewer.js

@@ -1,4 +1,4 @@
-define(['dialogHelper', 'paper-fab', 'paper-input', 'paper-checkbox', 'detailtablecss'], function (paperDialogHelper) {
+define(['dialogHelper', 'detailtablecss', 'emby-button', 'emby-select', 'formDialogStyle'], function (dialogHelper) {
 
     var currentItem;
     var currentItemType;
@@ -13,7 +13,7 @@
 
         ApiClient.getJSON(ApiClient.getUrl('Items/' + item.Id + '/MetadataRaw', { language: lang })).then(function (table) {
 
-            var htmlLookup = '<table data-role="table" class="stripedTable ui-responsive table-stroke detailTable">';
+            var htmlLookup = '<table class="detailTable">';
 
             for (var i = 0; i < table.LookupData.length; i++) {
 
@@ -24,28 +24,29 @@
                 }
                 else {
 
-                    htmlLookup += '<tr style="vertical-align: top"><td>' + row.Key + '</td>';
+                    htmlLookup += '<tr style="vertical-align: top"><td style="width: 7em;">' + row.Key + '</td>';
                     htmlLookup += '<td>' + row.Value + '</td></tr>';
                 }
             }
 
             htmlLookup += '</table>';
             page.querySelector('#searchCriteria').innerHTML = htmlLookup;
 
-            var html = '<table data-role="table" data-mode="reflow" class="stripedTable ui-responsive table-stroke detailTable" style="table-layout: fixed">';
+            var html = '<table class="detailTable" style="table-layout: fixed">';
             html += '<thead><th />';
 
-            for (var i = 0; i < table.Headers.length; i++) {
+            for (i = 0; i < table.Headers.length; i++) {
                 html += '<th>' + table.Headers[i] + '</th>';
             }
 
             html += '</thead>';
-            html += '<tbody>';
+            html += '<tbody style="vertical-align: top">';
 
-            for (var i = 0; i < table.Rows.length; i++) {
+            for (i = 0; i < table.Rows.length; i++) {
 
-                var row = table.Rows[i];
-                html += '<tr style="vertical-align: top"><td>' + row.Caption + '</td>';
+                row = table.Rows[i];
+                html += '<tr><td style="overflow-x:hidden; text-overflow:ellipsis;">';
+                html += row.Caption + '</td>';
 
                 for (var n = 0; n < row.Values.length; n++) {
                     html += '<td>' + (row.Values[n] == null ? '' : row.Values[n]) + '</td>';
@@ -62,76 +63,71 @@
         });
     }
 
-    function onDialogClosed() {
+    return {
+        show: function (itemId) {
+            return new Promise(function (resolve, reject) {
 
-        Dashboard.hideLoadingMsg();
-        currentDeferred.resolveWith(null, [hasChanges]);
-    }
+                var xhr = new XMLHttpRequest();
+                xhr.open('GET', 'components/metadataviewer/metadataviewer.template.html', true);
 
-    function showEditor(itemId) {
+                xhr.onload = function (e) {
 
-        var xhr = new XMLHttpRequest();
-        xhr.open('GET', 'components/metadataviewer/metadataviewer.template.html', true);
+                    var template = this.response;
 
-        xhr.onload = function (e) {
+                    ApiClient.getItem(Dashboard.getCurrentUserId(), itemId).then(function (item) {
 
-            var template = this.response;
+                        var dlg = dialogHelper.createDialog({
+                            size: 'large'
+                        });
 
-            ApiClient.getItem(Dashboard.getCurrentUserId(), itemId).then(function (item) {
+                        //dlg.classList.add('ui-body-b');
+                        //dlg.classList.add('background-theme-b');
+                        dlg.classList.add('formDialog');
 
-                var dlg = paperDialogHelper.createDialog({
-                    size: 'large'
-                });
+                        var html = '';
 
-                dlg.classList.add('ui-body-b');
-                dlg.classList.add('background-theme-b');
-                dlg.classList.add('popupEditor');
+                        html += Globalize.translateDocument(template);
 
-                var html = '';
+                        dlg.innerHTML = html;
+                        document.body.appendChild(dlg);
 
-                html += '<h2 class="dialogHeader">';
-                html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
-                html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + item.Name + '</div>';
-                html += '</h2>';
+                        dlg.querySelector('.formDialogHeaderTitle').innerHTML = "Raw Metadata for: " + item.Name;
 
-                html += '<div class="editorContent">';
-                html += Globalize.translateDocument(template);
-                html += '</div>';
+                        dialogHelper.open(dlg);
 
-                dlg.innerHTML = html;
-                document.body.appendChild(dlg);
+                        dlg.addEventListener('close', function () {
 
-                paperDialogHelper.open(dlg);
+                            Dashboard.hideLoadingMsg();
 
-                dlg.querySelector('.btnCloseDialog').addEventListener('click', function (e) {
+                            if (dlg.submitted) {
+                                resolve();
+                            } else {
+                                reject();
+                            }
+                        });
 
-                    paperDialogHelper.close(dlg);
-                });
+                        dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
 
-                dlg.querySelector('#selectLanguage').addEventListener('change', function (e) {
+                            dialogHelper.close(dlg);
+                        });
 
-                    showMetadataTable(dlg, item);
-                });
+                        dlg.querySelector('#selectLanguage').addEventListener('change', function (e) {
 
-                dlg.addEventListener('iron-overlay-closed', function () {
+                            showMetadataTable(dlg, item);
+                        });
 
-                    Dashboard.hideLoadingMsg();
-                });
+                        dlg.addEventListener('iron-overlay-closed', function () {
 
-                dlg.classList.add('metadataViewer');
+                            Dashboard.hideLoadingMsg();
+                        });
 
-                showMetadataTable(dlg, item);
-            });
-        }
+                        dlg.classList.add('metadataViewer');
 
-        xhr.send();
-    }
-
-    return {
-        show: function (itemId) {
-            return new Promise(function (resolve, reject) {
+                        showMetadataTable(dlg, item);
+                    });
+                };
 
-                showEditor(itemId);
+                xhr.send();
             });
         }
     };