added experimental combined normalize/copy-button

assets/js/app.js

@@ -17,10 +17,14 @@ import {Socket} from "phoenix"
 import NProgress from "nprogress"
 import {LiveSocket} from "phoenix_live_view"
 
+import '@babel/polyfill'
+import { copy_func } from  './buttons'
+
 let Hooks = {}
 Hooks.SnippetInput = {
   updated(){
     this.el.value = this.el.dataset.updatedVal
+    copy_func()
   }
 }
 
@@ -38,13 +42,3 @@ liveSocket.connect()
 // >> liveSocket.enableDebug()
 // >> liveSocket.enableLatencySim(1000)
 window.liveSocket = liveSocket
-
-document.querySelector("button[id='copy-button']").onclick = function(){
-  var ta = document.querySelector("textarea[name='snippet']")
-  var start = ta.selectionStart
-  var end = ta.selectionEnd
-  ta.select()
-  document.execCommand("copy");
-  ta.selectionStart = start
-  ta.selectionEnd = end
-}

assets/js/buttons.js

@@ -0,0 +1,25 @@
+
+var copy_on_update
+
+export async function copy_func(now){
+  console.info([document, copy_on_update, now, "copy_func() executed"])
+  if ( copy_on_update || now ){
+    var ta = document.querySelector("textarea[name='snippet']")
+    ta.focus()
+    try {
+      await navigator.clipboard.writeText(ta.value)
+    } catch (error) {
+      console.error(error)
+    }
+    copy_on_update =  false
+  }
+}
+
+document.querySelector("button[id='normcop']").onclick = function(ev){
+  copy_func(true)
+  copy_on_update =  true
+}
+
+document.querySelector("button[id='copy-button']").onclick = function(ev){
+  copy_func(true)
+}

assets/package-lock.json

@@ -829,6 +829,16 @@
         "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
+    "@babel/polyfill": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.10.4.tgz",
+      "integrity": "sha512-8BYcnVqQ5kMD2HXoHInBH7H1b/uP3KdnwCYXOqFnXqguOyuu443WXusbIUbWEfY3Z0Txk0M1uG/8YuAMhNl6zg==",
+      "dev": true,
+      "requires": {
+        "core-js": "^2.6.5",
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
     "@babel/preset-env": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.10.4.tgz",
@@ -2244,6 +2254,12 @@
         }
       }
     },
+    "core-js": {
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+      "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==",
+      "dev": true
+    },
     "core-js-compat": {
       "version": "3.6.5",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.6.5.tgz",

assets/package.json

@@ -15,6 +15,7 @@
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
+    "@babel/polyfill": "^7.10.1",
     "babel-loader": "^8.0.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.4.2",

lib/clip_web/live/board_live.ex

@@ -11,7 +11,7 @@ defmodule ClipWeb.BoardLive do
         <textarea type="text" name="snippet" data-updated-val="<%= @snippet %>" phx-hook="SnippetInput" autocomplete="off"><%= @snippet %></textarea>
       </form>
       <!-- Current content: < %= @snippet %><br> -->
-        <button phx-click="normalize">+4930112 -> 0004930112#</button> <button id="copy-button">copy</button>
+        <button phx-click="normalize">+4930112 -> 0004930112#</button> <button id="copy-button">copy</button> <button id="normcop" phx-click="normalize">+4930112 -> 0004930112# + copy (experimental)</button>
     """
   end