Add awesome-notifications and webpack to bundle it

.gitignore

@@ -0,0 +1,2 @@
+build
+node_modules

deps.d.ts

@@ -0,0 +1 @@
+declare module 'awesome-notifications';

package.json

@@ -5,13 +5,20 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "deploy": "rimraf ./build && tsc && cp ./build/index.js ~/git/smfdev/web/data/Themes/default/scripts/compose-extras.js"
+    "build": "rimraf ./build && webpack --mode=development && cp ./node_modules/awesome-notifications/dist/style.css ./build/awesome-notifications.css",
+    "devdeploy": "npm run build && cp ./build/bundle.js ~/git/smfdev/web/data/Themes/default/scripts/compose-extras.js && cp ./build/awesome-notifications.css ~/git/smfdev/web/data/Themes/default/css/awesome-notifications.css"
   },
   "author": "viviridian",
   "license": "UNLICENSED",
   "devDependencies": {
     "@types/node": "^14.0.25",
     "rimraf": "^3.0.2",
-    "typescript": "^3.9.7"
+    "ts-loader": "^8.0.1",
+    "typescript": "^3.9.7",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12"
+  },
+  "dependencies": {
+    "awesome-notifications": "^3.1.1"
   }
 }

src/index.ts

@@ -1,7 +1,21 @@
-console.log("hello");
+import AWN from "awesome-notifications"
+let globalOptions =  {}
+let notifier = new AWN(globalOptions);
 
 const image_types = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
 
+// https://stackoverflow.com/a/34278578
+function typeInTextarea(newText: string, el: HTMLTextAreaElement) {
+  const start = el.selectionStart
+  const end = el.selectionEnd
+  const text = el.value
+  const before = text.substring(0, start)
+  const after  = text.substring(end, text.length)
+  el.value = (before + newText + after)
+  el.selectionStart = el.selectionEnd = start + newText.length
+  el.focus()
+}
+
 document.addEventListener('paste', async (e: any) => {
     if (navigator.clipboard === undefined){
         console.log('Cannot intercept paste, navigator.clipboard is undefined.');
@@ -10,6 +24,7 @@ document.addEventListener('paste', async (e: any) => {
 
     if (e.clipboardData.types.includes("Files")){ // Does the clipboard being pasted contain files?
         console.log("it's an imageeee");
+
         for (let i = 0; i < e.clipboardData.items.length; i++){
             let transferItem = e.clipboardData.items[i];
             let file = e.clipboardData.files[i];
@@ -18,19 +33,29 @@ document.addEventListener('paste', async (e: any) => {
             }
 
             //let imageData = await file.arrayBuffer();
-            
-            let form = new FormData();
-            form.append('attachment[]', file);
-            let response = await fetch("/index.php?action=uploadattachment",
-                {
-                    method: 'POST',
-                    credentials: 'same-origin',
-                    body: form
-                });
-            console.log(response);
-            var text = await response.text();
-            console.log(text);
+            let uploadPromise = async () => {
+                let form = new FormData();
+                form.append('attachment[]', file);
+                let response = await fetch("/index.php?action=uploadattachment",
+                    {
+                        method: 'POST',
+                        credentials: 'same-origin',
+                        body: form
+                    });
+                console.log(response);
+                let responseData = await response.json();
+                if (!responseData.ok){
+                    notifier.alert(`Failed to upload your image: ${responseData.error}.`);
+                    return;
+                }
 
+                console.log(responseData);
+                let textArea = document.getElementById("message") as HTMLTextAreaElement;
+                typeInTextarea(responseData.insert_text, textArea);
+                notifier.success("Successfully attached image.");
+            }
+
+            await notifier.asyncBlock(uploadPromise(), null, null, "Uploading image...", {'minDurations': {'async-block': 100}});
         }
     }
     try {

tsconfig.json

@@ -15,7 +15,7 @@
     // "sourceMap": true,                     /* Generates corresponding '.map' file. */
     // "outFile": "./",                       /* Concatenate and emit output to single file. */
     "outDir": "build",                        /* Redirect output structure to the directory. */
-    "rootDir": "src",                         /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    //"rootDir": "src",                         /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "composite": true,                     /* Enable project compilation */
     // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
     // "removeComments": true,                /* Do not emit comments to output. */

webpack.config.js

@@ -0,0 +1,21 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.ts',
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: [ '.ts', '.js' ],
+  },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'build'),
+  },
+};