App info, update default page, various fixes

discoveryjs · Nov 15, 2024 · 76ebbe8 · 76ebbe8
1 parent 435eebc
commit 76ebbe8
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 71 deletions.
diff --git a/src/app.js b/src/app.js
@@ -42,6 +42,12 @@ getSettings().then(settings => {
             applyDarkmodeStyles(darkmode);
         });
 
+        // actions
+        app.defineAction('getSettings', () => getSettings());
+        app.defineAction('setSettings', settings => {
+            chrome.storage.sync.set(settings);
+        });
+
         // sync location
         // Note: should be last since lead to renders
         app.setRouterPreventLocationUpdate(true);

diff --git a/src/content-script.js b/src/content-script.js
@@ -1,6 +1,5 @@
-import { applyContainerStyles, rollbackContainerStyles } from '@discoveryjs/discovery/src/core/utils/container-styles.js';
-import { connectToEmbedApp } from '@discoveryjs/discovery/src/extensions/embed-host.js';
-import { copyText } from '@discoveryjs/discovery/lib/core/utils/copy-text.js';
+import { applyContainerStyles, rollbackContainerStyles, copyText } from '@discoveryjs/discovery/utils';
+import { connectToEmbedApp } from '@discoveryjs/discovery/embed';
 import { getSettings } from './settings.js';
 import { downloadAsFile } from './actions/download-as-file.js';
 

diff --git a/src/discovery/flash-messages.js b/src/discovery/flash-messages.js
@@ -1,7 +1,7 @@
-import { utils } from '@discoveryjs/discovery';
+import { createElement } from '@discoveryjs/discovery/utils';
 
 export default function(host) {
-    const flashMessagesContainer = utils.createElement('div', 'flash-messages-container');
+    const flashMessagesContainer = createElement('div', 'flash-messages-container');
 
     host.dom.container.append(flashMessagesContainer);
 

diff --git a/src/discovery/index.js b/src/discovery/index.js
@@ -10,6 +10,9 @@ import * as pages from './pages';
  */
 export function initDiscovery() {
     const discovery = new App({
+        name: 'JsonDiscovery',
+        description: 'Changing the way to explore JSON',
+        version,
         styles: [{ type: 'link', href: 'discovery.css' }],
         embed: true,
         inspector: true,
@@ -25,39 +28,31 @@ export function initDiscovery() {
     });
 
     discovery.nav.remove('index-page');
-
-    // FIXME: temprorary workaround since discovery reset context on setData()
-    discovery.version = version;
-    discovery.getRenderContext = function() {
-        return {
-            ...App.prototype.getRenderContext.call(this),
-            version: this.version
-        };
-    };
 }
 
 /**
  * Discovery empty page initialization
  */
 export function initAppDiscovery() {
     const discovery = new App({
+        name: 'JsonDiscovery',
+        description: 'Changing the way to explore JSON',
+        version,
         styles: [{ type: 'link', href: 'discovery.css' }],
-        embed: true,
         upload: { clipboard: true },
+        embed: true,
         inspector: true,
         darkmodePersistent: true,
+        extensions: [
+            flashMessages,
+            navbar,
+            pages
+        ],
         setup({ addQueryHelpers }) {
             addQueryHelpers(joraHelpers);
         }
     });
 
-    // FIXME: temprorary workaround since discovery reset context on setData()
-    discovery.version = version;
-    discovery.getRenderContext = function() {
-        return {
-            ...App.prototype.getRenderContext.call(this),
-            version: this.version
-        };
-    };
+    discovery.nav.remove('index-page');
     discovery.renderPage('default');
 }
diff --git a/src/discovery/navbar.js b/src/discovery/navbar.js
@@ -9,7 +9,7 @@ export default host => {
     //
     // Main section
     //
-    host.nav.append({
+    host.nav.prepend({
         when: '#.page != "whatsnew"',
         data: '"hasNews".callAction()',
         whenData: true,
@@ -18,23 +18,23 @@ export default host => {
             host.setPage('whatsnew');
         }
     });
-    host.nav.append({
+    host.nav.prepend({
         when: '#.page = "discovery"',
         content: 'text:"Copy URL"',
         async onClick() {
             copyText(await host.action.call('permalink'));
             host.action.call('flashMessage', 'URL copied to clipboard', 'success');
         }
     });
-    host.nav.append({
+    host.nav.prepend({
         when: '#.page != "default"',
         content: 'text:"Default view"',
         onClick() {
             host.setPage('default');
             history.replaceState(null, null, ' '); // ????
         }
     });
-    host.nav.append({
+    host.nav.prepend({
         when: '#.page != "raw"',
         content: 'text:"Raw JSON"',
         onClick: () => host.setPage('raw'),

diff --git a/src/discovery/pages/default.js b/src/discovery/pages/default.js
@@ -2,50 +2,56 @@ import { copyToClipboardButton, downloadAsFileButton } from './common.js';
 
 export default host => {
     host.page.define('default', {
-        view: 'context',
-        modifiers: {
-            view: 'page-header',
-            data: () => host.raw,
-            content: [
-                copyToClipboardButton,
-                downloadAsFileButton,
-                {
-                    view: 'block',
-                    data: '"getSettings".callAction()',
+        view: 'switch',
+        content: [
+            { when: 'no #.datasets', content: 'preset/welcome-block' },
+            { content: {
+                view: 'context',
+                modifiers: {
+                    view: 'page-header',
+                    data: () => host.raw,
                     content: [
-                        function(el, config, data, context) {
-                            context.expandLevel = data.expandLevel;
-                        },
+                        copyToClipboardButton,
+                        downloadAsFileButton,
                         {
-                            view: 'button',
-                            className: 'collapse-all',
-                            tooltip: 'text:"Collapse all"',
-                            onClick(el, data, { onChange }) {
-                                onChange(1, 'expandLevel');
-                            },
-                            postRender(el, config, data, context) {
-                                context.onChange = config.onChange;
-                            }
-                        },
-                        {
-                            view: 'button',
-                            className: 'expand-all',
-                            tooltip: 'text:"Expand all"',
-                            onClick(el, data, { onChange }) {
-                                onChange(100, 'expandLevel');
-                            },
-                            postRender(el, config, data, context) {
-                                context.onChange = config.onChange;
-                            }
+                            view: 'block',
+                            data: '"getSettings".callAction()',
+                            content: [
+                                function(el, config, data, context) {
+                                    context.expandLevel = data.expandLevel;
+                                },
+                                {
+                                    view: 'button',
+                                    className: 'collapse-all',
+                                    tooltip: 'text:"Collapse all"',
+                                    onClick(el, data, { onChange }) {
+                                        onChange(1, 'expandLevel');
+                                    },
+                                    postRender(el, config, data, context) {
+                                        context.onChange = config.onChange;
+                                    }
+                                },
+                                {
+                                    view: 'button',
+                                    className: 'expand-all',
+                                    tooltip: 'text:"Expand all"',
+                                    onClick(el, data, { onChange }) {
+                                        onChange(100, 'expandLevel');
+                                    },
+                                    postRender(el, config, data, context) {
+                                        context.onChange = config.onChange;
+                                    }
+                                }
+                            ]
                         }
                     ]
+                },
+                content: {
+                    view: 'struct',
+                    expanded: '=+(#.expandLevel or "getSettings".callAction().expandLevel)',
+                    data: '#.data'
                 }
-            ]
-        },
-        content: {
-            view: 'struct',
-            expanded: '=+(#.expandLevel or "getSettings".callAction().expandLevel)',
-            data: '#.data'
-        }
+            } }
+        ]
     });
 };
diff --git a/src/discovery/pages/raw.css b/src/discovery/pages/raw.css
@@ -1,8 +1,11 @@
 .view-raw > .content {
-    word-wrap: break-word;
+    margin: 0;
+    font-family: var(--discovery-monospace-font-family);
+    font-size: 12px;
+    line-height: 18px;
     white-space: pre-wrap;
+    word-wrap: break-word;
     word-break: break-all;
-    margin: 0;
 }
 .view-raw > .content:not(:only-child)::after {
     content: '...';

diff --git a/src/discovery/pages/whatsnew.js b/src/discovery/pages/whatsnew.js
@@ -5,7 +5,7 @@ export default host => {
         try {
             const { whatsnew } = await host.action.call('getSettings');
 
-            return !whatsnew?.[host.version];
+            return !whatsnew?.[host.info.version];
         } catch {
             return false;
         }
@@ -20,7 +20,7 @@ export default host => {
             postRender: () =>
                 host.action.call('setSettings', {
                     whatsnew: {
-                        [host.version]: true
+                        [host.info.version]: true
                     }
                 })
         }