Rewrite admin/includes/js/admin.js without using jQuery.

admin/admin.php

@@ -36,7 +36,7 @@ function bogo_admin_enqueue_scripts( $hook_suffix ) {
 	}
 
 	wp_enqueue_script( 'bogo-admin',
-		plugins_url( 'admin/includes/js/admin.js', BOGO_PLUGIN_BASENAME ),
+		plugins_url( 'admin/includes/js/admin.min.js', BOGO_PLUGIN_BASENAME ),
 		array( 'jquery' ), BOGO_VERSION, true
 	);
 

admin/includes/ts/admin.ts

@@ -0,0 +1,121 @@
+interface bogoObject {
+    langName: any;
+    availableLanguages: any;
+    apiSettings: any;
+    currentPost: any;
+    l10n: any;
+    pagenow: any;
+}
+
+declare var bogo: bogoObject;
+
+(function () {
+
+    if (typeof bogo === 'undefined' || bogo === null) {
+        return;
+    }
+
+    bogo.langName = function (locale: any) {
+        return bogo.availableLanguages[locale] || '';
+    };
+
+    bogo.apiSettings.getRoute = function (path: any) {
+        let url = bogo.apiSettings.root;
+        url = url.replace(bogo.apiSettings.namespace, bogo.apiSettings.namespace + path);
+
+        return url;
+    };
+
+    const bogo_add_translation = document.querySelector('#bogo-add-translation');
+
+    if (bogo_add_translation) {
+
+        bogo_add_translation.addEventListener('click', function () {
+
+            if (!bogo.currentPost.postId) {
+                return;
+            }
+
+            const locale: any = (<HTMLInputElement>document.querySelector('#bogo-translations-to-add')).value;
+            const rest_url: any = bogo.apiSettings.getRoute('/posts/' + bogo.currentPost.postId + '/translations/' + locale);
+            const spinner_element: any = document.querySelector('#bogo-add-translation').nextElementSibling;
+
+            spinner_element.style.visibility = 'visible';
+
+            const httpRequest = new XMLHttpRequest();
+            httpRequest.onreadystatechange = function (data) {
+
+                if (httpRequest.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
+
+                    if (httpRequest.status == 200) {
+
+                        const response = JSON.parse(httpRequest.response);
+                        const post = response[locale];
+
+                        if (!post) {
+                            return;
+                        }
+
+                        // The element into which appending will be done
+                        const element = document.getElementById('bogo-translations');
+
+                        // The element to be appended
+                        let child = document.createElement('LI');
+                        let output = post.title.rendered;
+                        output += ' <span class="screen-reader-text">' + bogo.l10n.targetBlank + '</span>';
+                        child.innerHTML = '<a href="' + post.edit_link + '" target="_blank" rel="noopener noreferrer">' + output + '</a> [' + bogo.availableLanguages[locale] + ']';
+
+                        // append
+                        element.appendChild(child);
+
+                        // remove appended option
+                        document.querySelector('#bogo-translations-to-add option[value="' + locale + '"]').remove();
+
+                        const langs: any = document.querySelector('#bogo-translations-to-add');
+
+                        if (!langs.options.length) {
+                            document.querySelector('#bogo-add-translation-actions').remove();
+                        }
+                    }
+
+                    spinner_element.style.visibility = 'hidden';
+                }
+            }
+
+            httpRequest.open('POST', rest_url);
+            httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+            httpRequest.setRequestHeader('X-WP-Nonce', bogo.apiSettings.nonce);
+            httpRequest.send();
+
+        });
+    }
+
+    if ('bogo-texts' == bogo.pagenow) {
+
+        window.onbeforeunload = function (event: any) {
+            let changed = false;
+
+            document.querySelectorAll("#bogo-terms-translation input[type=text]").forEach((text: any) => {
+                if (text.defaultValue != text.value) {
+                    changed = true;
+                }
+            });
+
+            if (changed) {
+                event.returnValue = bogo.l10n.saveAlert;
+                return bogo.l10n.saveAlert;
+            }
+        };
+
+        const bogo_terms = (<HTMLInputElement>document.querySelector('#bogo-terms-translation'));
+        bogo_terms.addEventListener('submit', function () {
+            window.onbeforeunload = function () {
+            };
+        });
+
+        const select_local = (<HTMLInputElement>document.querySelector('#select-locale'));
+        select_local.addEventListener('change', function () {
+          window.location.href = 'admin.php?page=bogo-texts&locale=' + select_local.value;
+        });
+    }
+})();

gulpfile.js

@@ -0,0 +1,29 @@
+'use strict';
+
+// Load plugins
+const gulp = require('gulp');
+const rename = require('gulp-rename');
+const uglify = require('gulp-uglify');
+const ts = require('gulp-typescript');
+
+// JS task
+function js() {
+  return gulp.src([
+    './admin/includes/ts/*.ts',
+  ]).pipe(ts({
+    noImplicitAny: true,
+  })).pipe(uglify()).pipe(rename({
+    suffix: '.min',
+  })).pipe(gulp.dest('./admin/includes/js'));
+}
+
+// Watch files
+function watchFiles() {
+  gulp.watch(['./admin/includes/ts/*'], js);
+}
+
+// Define complex tasks
+const build = gulp.series(gulp.parallel(js));
+const watch = gulp.series(build, gulp.parallel(watchFiles));
+
+exports.watch = watch;

package.json

@@ -25,6 +25,15 @@
   },
   "homepage": "https://github.com/takayukister/bogo#readme",
   "devDependencies": {
-    "@wordpress/scripts": "6.1.0"
+    "@wordpress/scripts": "6.1.0",
+    "@types/jquery": "^3.3.38",
+    "gulp": "^4.0.2",
+    "gulp-rename": "1.4.0",
+    "gulp-uglify": "3.0.2"
+  },
+  "dependencies": {
+    "@wordpress/api-fetch": "^3.14.0",
+    "gulp-typescript": "^6.0.0-alpha.1",
+    "typescript": "^3.8.3"
   }
 }