v-clipboard refactoring (#550)

package.json

@@ -34,7 +34,7 @@
     "portal-vue": "^2.1.7",
     "redoc": "^2.0.0-rc.65",
     "sanitize-html": "^2.7.0",
-    "v-clipboard": "3.0.0-next.1",
+    "v-clipboard": "^3.0.0-next.1",
     "vue": "^2.6.10",
     "vue-codemirror": "^4.0.6",
     "vue-codemirror-lite": "^1.0.4",

src/components/Dialogs/RawJsonViewer.vue

@@ -43,7 +43,9 @@
               v-bind="attrs"
               v-on="on"
               v-else
-              v-clipboard="handleCopyClick"
+              @click="() => {
+                copy(handleCopyClick())
+              }"
               class="mr-4 text--secondary"
             >
               <v-icon small class="mr-1">mdi-content-copy</v-icon>Copy
@@ -54,9 +56,9 @@
               class="px-4"
               v-for="(item, index) in ['parameter', 'storage', 'code', 'all']"
               :key="index"
-              @click="() => {}"
-              v-clipboard="() => getSection(item)"
-              v-clipboard:success="showClipboardOK"
+              @click="() => {
+                copy(getSection(item))
+              }"
             >
               <v-list-item-title class="text-capitalize">{{
                 item
@@ -67,8 +69,9 @@
         <v-btn
           v-else
           class="mr-4 text--secondary"
-          v-clipboard="() => JSON.stringify(data, null, '  ')"
-          v-clipboard:success="showClipboardOK"
+          @click="() => {
+            copy(JSON.stringify(data, null, '  '))
+          }"
           text
         >
           <v-icon small class="mr-1">mdi-content-copy</v-icon>Copy
@@ -108,6 +111,7 @@
 import { mapActions } from "vuex";
 import VueJsonPretty from "vue-json-pretty";
 import {keysToCamel} from "../../utils/object";
+import { copyToClipboard } from "../../utils/clipboard";
 import '@/styles/vue-json-pretty.css';
 
 const BIG_SIZE_JSON_SYMBOLS = 10000;
@@ -151,7 +155,7 @@ export default {
     renderingStep: 1,
   }),
   methods: {
-    ...mapActions(["showError", "showClipboardOK"]),
+    ...mapActions(["showError", "showClipboardOK", "showClipboardFail"]),
     close() {
       this.$emit("input", false);
     },
@@ -160,6 +164,9 @@ export default {
         return this.raw
       }
     },
+    copy(text, successMessage, failMessage) {
+      copyToClipboard(text, this.showClipboardOK.bind(null, successMessage), this.showClipboardFail.bind(null, failMessage));
+    },
     isTokenMetadata() {
       return this.type.toLowerCase() === 'token metadata';
     },
@@ -170,11 +177,11 @@ export default {
       if (section && Array.isArray(this.data)) {
         for (var i = 0; i < this.data.length; i++) {
           if (this.data[i].prim === section) {
-            return this.data[i];
+            return JSON.stringify(this.data[i]);
           }
         }
       }
-      return this.data;
+      return JSON.stringify(this.data);
     },
     parseData(data) {
       return this.isTokenMetadata() ? keysToCamel(data) : data;
@@ -213,9 +220,9 @@ export default {
     }
   },
   updated() {
-      if (this.show) {
-          this.$refs.rawJsonDialog.show();
-      }
+    if (this.show) {
+        this.$refs.rawJsonDialog.show();
+    }
   },
   watch: {
     show(newValue) {

src/components/ValueInspector.vue

@@ -10,7 +10,9 @@
       readonly
       :label="label"
       :value="value"
-      @click="copyText(value)"
+      @click="() => {
+        copy(value)
+      }"
     ></v-textarea>
     <v-text-field
       v-else
@@ -19,14 +21,18 @@
       readonly
       filled
       :label="label"
-      @click="copyText(value)"
+      @click="() => {
+        copy(value)
+      }"
     ></v-text-field>
 
     <v-btn
         text
         small
         link
-        @click.prevent.stop="copyText(value)"
+        @click.prevent.stop="() => {
+          copy(value)
+        }"
         :class="isPreFormatted ? 'pl-0 mt-4' : ''"
     >
       <v-icon small class="mr-1">mdi-content-copy</v-icon>
@@ -80,10 +86,11 @@
 </template>
 
 <script>
-import Michelson from "@/components/Michelson.vue";
+import {mapActions} from "vuex";
 import isIpfs from "is-ipfs";
+import Michelson from "@/components/Michelson.vue";
+import { copyToClipboard } from "@/utils/clipboard";
 import { checkAddress, matchAddress, isSrAddress } from "@/utils/tz.js";
-import {mapActions} from "vuex";
 
 export default {
   name: "ValueInspector",
@@ -122,18 +129,9 @@ export default {
     },
   },
   methods: {
-    ...mapActions(["showClipboardOK"]),
-    copyText(text) {
-      if (navigator.clipboard && navigator.clipboard.writeText) {
-        navigator.clipboard.writeText(text).then(() => this.showClipboardOK());
-      } else {
-        try {
-          window.clipboardData.setData("Text", text);
-          this.showClipboardOK();
-        } catch (e) {
-          //
-        }
-      }
+    ...mapActions(["showClipboardOK", "showClipboardFail"]),
+    copy(text, successMessage, failMessage) {
+      copyToClipboard(text, this.showClipboardOK.bind(null, successMessage), this.showClipboardFail.bind(null, failMessage));
     },
     handleAddress(span) {
       const address = matchAddress(span);

src/components/schema/schemaDialog/SchemaCmdLine.vue

@@ -6,8 +6,9 @@
         <v-spacer></v-spacer>
         <v-btn
             class="mr-4 text--secondary"
-            v-clipboard="() => cmdLine"
-            v-clipboard:success="showClipboardOk"
+            @click="() => {
+              copy(cmdLine)
+            }"
             text
         >
           <v-icon small class="mr-1">mdi-content-copy</v-icon>Copy
@@ -34,6 +35,9 @@
 </template>
 
 <script>
+import {mapActions} from "vuex";
+import { copyToClipboard } from "@/utils/clipboard";
+
 export default {
   name: "SchemaCmdLine",
   props: {
@@ -81,6 +85,10 @@ export default {
     }
   },
   methods: {
+    ...mapActions(["showClipboardOK", "showClipboardFail"]),
+    copy(text, successMessage, failMessage) {
+      copyToClipboard(text, this.showClipboardOK.bind(null, successMessage), this.showClipboardFail.bind(null, failMessage));
+    },
     isNumber(evt) {
       const charCode = (evt.which) ? evt.which : evt.keyCode;
       if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {

src/store/index.js

@@ -32,14 +32,23 @@ export default new Vuex.Store({
     showWarning({ commit }, value) {
       commit('setWarning', value);
     },
-    showClipboardWarning({ commit }) {
-      commit('setWarning', 'Copied! Text might be truncated due to its size');
-    },
-    showClipboardOK({ commit }) {
-      commit('setSuccess', 'Copied to the clipboard')
-    },
-    showClipboardFail({ dispatch}) {
-      dispatch('showError', 'Failed to save to the clipboard')
+    showClipboardWarning({ commit }, text) {
+      if (!text) {
+        text = 'Copied! Text might be truncated due to its size!'
+      }
+      commit('setWarning', text);
+    },
+    showClipboardOK({ commit }, text) {
+      if (!text) {
+        text = 'Copied to the clipboard!'
+      }
+      commit('setSuccess', text)
+    },
+    showClipboardFail({ dispatch}, text) {
+      if (!text) {
+        text = 'Failed to save to the clipboard!'
+      }
+      dispatch('showError', text)
     },
     showSuccess({ commit }, value) {
       commit('setSuccess', value)

src/utils/clipboard.js

@@ -0,0 +1,9 @@
+export function copyToClipboard(text, showOK, showFail) {
+    navigator.clipboard
+    .writeText(text)
+    .then(() => showOK())
+    .catch((err) => {
+        console.log(err);
+        showFail();
+    });
+}

src/views/constant/ConstantTab.vue

@@ -9,8 +9,9 @@
           <v-spacer></v-spacer>
           <v-btn
               class="mr-1 text--secondary"
-              v-clipboard="getValueToCopy"
-              v-clipboard:success="showSuccessCopy"
+              @click="() => {
+                copy(getValueToCopy())
+              }"
               small
               text
           >
@@ -49,11 +50,12 @@
 <script>
 import {mapActions} from "vuex";
 import ConstantInfo from "./ConstantInfo";
-import ReferenceContract from "@/views/constant/ReferenceContract";
 import Michelson from "@/components/Michelson";
-import {toTitleCase} from "@/utils/string";
 import RawJsonViewer from "@/components/Dialogs/RawJsonViewer.vue";
+import { copyToClipboard } from "@/utils/clipboard";
 import {downloadFileFormContent} from "@/utils/download";
+import {toTitleCase} from "@/utils/string";
+import ReferenceContract from "@/views/constant/ReferenceContract";
 
 export default {
   name: "NetworkTab",
@@ -87,18 +89,21 @@ export default {
     }
   },
   methods: {
-    ...mapActions(["showClipboardOK", "showClipboardWarning"]),
+    ...mapActions(["showClipboardOK", "showClipboardFail"]),
     async getConstantInfo() {
       this.loading = true;
       this.constantInfo = await this.api.getConstant(this.$route.params.network, this.$route.params.address);
       this.loading = false;
     },
+    copy(text, successMessage, failMessage) {
+      copyToClipboard(text, this.showSuccessCopy.bind(null, successMessage), this.showClipboardFail.bind(null, failMessage));
+    },
     getValueToCopy() {
       return this.constantInfo.code;
     },
-    showSuccessCopy() {
+    showSuccessCopy(successMessage) {
       if (this.constantInfo.code.length) {
-        this.showClipboardOK();
+        this.showClipboardOK(successMessage);
       }
     },
     downloadFile() {

src/views/contract/CodeTab.vue

@@ -30,8 +30,9 @@
 
             <v-btn
                 class="mr-1 text--secondary"
-                v-clipboard="getValueToCopy"
-                v-clipboard:success="showSuccessCopy"
+                @click="() => {
+                  copy(getValueToCopy())
+                }"
                 small
                 text
             >
@@ -73,6 +74,7 @@ import ErrorState from "@/components/ErrorState.vue";
 import RawJsonViewer from "@/components/Dialogs/RawJsonViewer.vue";
 import {downloadFileFormContent} from "@/utils/download";
 import UsingConstantsDialog from "@/components/UsingConstantsDialog";
+import { copyToClipboard } from "@/utils/clipboard";
 
 export default {
   props: {
@@ -130,10 +132,13 @@ export default {
     clearInterval(this.renderingInterval);
   },
   methods: {
-    ...mapActions(["showError", "showClipboardOK", "showClipboardWarning"]),
-    showSuccessCopy() {
+    ...mapActions(["showError", "showClipboardOK", "showClipboardWarning", "showClipboardFail"]),
+    copy(text, successMessage, failMessage) {
+      copyToClipboard(text, this.showSuccessCopy.bind(null, successMessage), this.showClipboardFail.bind(null, failMessage));
+    },
+    showSuccessCopy(successMessage) {
       if (this.selectedCode.length <= this.freezingAmount) {
-        this.showClipboardOK();
+        this.showClipboardOK(successMessage);
       }
     },
     getValueToCopy() {

src/views/contract/StorageTab.vue

@@ -48,12 +48,9 @@
               </v-tooltip>
               <v-btn
                 v-if="rawStorage && raw"
-                @click="
-              () => {
-                $clipboard(rawStorage);
-                showClipboardOK();
-              }
-            "
+                @click="() => {
+                  copy(rawStorage)
+                }"
                 class="ml-2"
                 small
                 text
@@ -137,6 +134,7 @@ import RawJsonViewer from "@/components/Dialogs/RawJsonViewer.vue";
 import MiguelTreeView from "@/components/MiguelTreeView.vue";
 import TypeDef from "@/views/contract/TypeDef.vue";
 import {shortcutOnly} from "../../utils/tz";
+import { copyToClipboard } from "../../utils/clipboard";
 
 export default {
   name: "StorageTab",
@@ -213,7 +211,10 @@ export default {
     },
   },
   methods: {
-    ...mapActions(["showError", "showClipboardOK"]),
+    ...mapActions(["showError", "showClipboardOK", "showClipboardFail"]),
+    copy(text, successMessage, failMessage) {
+      copyToClipboard(text, this.showClipboardOK.bind(null, successMessage), this.showClipboardFail.bind(null, failMessage));
+    },
     getStorage(force = false) {
       if (this.storage) {
         this.raw = false;