Fixed raw css, copy via clipboard API (#61)

* Fixed raw css, copy via clipboard API

* Fixed lints

* Moved flash message to the right bottom corner

* CHANGELOG

* Flash message refactored

* Flash message refactored v2

* Flash message refactored v3

Author: exdis

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.9.1 (08-11-2020)
+
+* Fixed `raw` mode css
+* Improved raw copy to clipboard performance
+* Flash message moved to the right bottom corner
+
 ## 1.9.0 (07-11-2020)
 
 * "Download JSON" button

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "jsondiscovery",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "DiscoveryJson",
   "author": "[email protected]",
   "license": "MIT",

package.json

@@ -19,6 +19,7 @@ table, caption, th, td, tr {
 .view-raw {
     word-wrap: break-word;
     white-space: pre-wrap;
+    word-break: break-all;
 }
 
 .view-fieldset {
@@ -40,9 +41,9 @@ table, caption, th, td, tr {
     line-height: 34px;
 }
 
-.view-flash-message {
+.flash-messages-container {
     position: fixed;
-    top: 20px;
+    bottom: 20px;
     right: 20px;
 }
 

src/content/index.css

@@ -75,7 +75,7 @@ export function init(getSettings) {
  * @returns {Discovery}
  */
 export function initDiscovery(options) {
-    const { Widget, router, complexViews } = require('@discoveryjs/discovery/dist/discovery.umd.js');
+    const { Widget, router, complexViews, utils } = require('@discoveryjs/discovery/dist/discovery.umd.js');
     const settingsPage = require('../settings').default;
     const isolateStyleMarker = require('./index.css');
 
@@ -89,6 +89,22 @@ export function initDiscovery(options) {
     discovery.apply(router);
     discovery.apply(complexViews);
 
+    discovery.flashMessagesContainer = utils.createElement('div', 'flash-messages-container');
+    discovery.dom.container.append(discovery.flashMessagesContainer);
+    discovery.flashMessage = (text, type) => {
+        const fragment = document.createDocumentFragment();
+
+        discovery.view.render(fragment, {
+            view: `alert-${type}`,
+            content: 'text'
+        }, text).then(() => {
+            const el = fragment.firstChild;
+
+            discovery.flashMessagesContainer.append(el);
+            setTimeout(() => el.remove(), 750);
+        });
+    };
+
     settingsPage(discovery);
 
     discovery.page.define('default', [
@@ -105,9 +121,7 @@ export function initDiscovery(options) {
         el.textContent = raw;
     }, { tag: 'pre' });
 
-    discovery.page.define('raw', [{
-        view: 'raw'
-    }]);
+    discovery.page.define('raw', 'raw');
 
     discovery.nav.append({
         content: 'text:"Index"',
@@ -141,22 +155,16 @@ export function initDiscovery(options) {
     });
     discovery.nav.append({
         content: 'text:"Copy raw"',
-        onClick: function() {
+        onClick: async function() {
             const { raw } = discovery.context;
-            const div = document.createElement('div');
-            div.innerHTML = raw;
-            const rawText = div.textContent;
-            const el = document.createElement('textarea');
-            el.value = rawText;
-            document.body.appendChild(el);
-            el.select();
-            document.execCommand('copy');
-            document.body.removeChild(el);
-
-            this.textContent = 'Copied!';
-            setTimeout(() => {
-                this.textContent = 'Copy raw';
-            }, 700);
+
+            try {
+                await navigator.clipboard.writeText(raw);
+            } catch (err) {
+                console.error(err); // eslint-disable-line no-console
+            }
+
+            discovery.flashMessage('Copied!', 'success');
         },
         when: () => {
             if (discovery.pageId === 'raw') {

src/content/init.js

@@ -22,17 +22,6 @@ export default discovery => {
         discovery.view.render(el, content, data, context);
     });
 
-    discovery.view.define('flash-message', function(el, config) {
-        const { message } = config;
-        const { text, type } = message;
-        const view = 'alert' + (type ? `-${type}` : '');
-
-        discovery.view.render(el, {
-            view,
-            content: 'text:"' + text + '"'
-        });
-    });
-
     let detachToggleDarkMode = () => {};
 
     const modifiers = [
@@ -81,7 +70,7 @@ export default discovery => {
     ].map(content => ({ view: 'fieldset', content }));
 
     discovery.page.define('settings', function(el, data, context) {
-        const { settings, message } = context;
+        const { settings } = context;
 
         discovery.view.render(el, [
             'h1:"Settings"',
@@ -97,13 +86,8 @@ export default discovery => {
                         }
                     }
                 ]
-            },
-            {
-                view: 'flash-message',
-                when: 'message',
-                message
             }
-        ], { message }, settings);
+        ], {}, settings);
     });
 
     /**
@@ -120,37 +104,12 @@ export default discovery => {
                 safari.extension.dispatchMessage('setSettings', settings);
             }
 
-            flashMessage({ settings }, 'Options saved.', 'success');
+            discovery.flashMessage('Options saved.', 'success');
         } else {
-            flashMessage({ settings }, errors.join(' '), 'danger');
+            discovery.flashMessage(errors.join(' '), 'danger');
         }
     }
 
-    /**
-     * Creates flash info-message
-     * @param {Object} data
-     * @param {string} text
-     * @param {string} type
-     */
-    function flashMessage(data, text, type) {
-        const message = {
-            text,
-            type
-        };
-
-        discovery.setData(
-            discovery.data,
-            Object.assign(discovery.context, data, { message })
-        );
-
-        setTimeout(() => {
-            discovery.setData(
-                discovery.data,
-                Object.assign(discovery.context, data, { message: null })
-            );
-        }, 750);
-    }
-
     /**
      * Validates settings
      * @param {Object} settings