Native UI

main.js

@@ -114,12 +114,68 @@ function altText() {
     alert(altText);
 }
 
-function copyClipboard() {
-    // TODO: screen capture API: https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API
-}
+if ('webkit' in window && 'messageHandlers' in window.webkit) {
+  let _promiseId = 0;
+  let _promises = new Map();
 
-function saveImage() {
-    // TODO: screen capture API: https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API
+  window.webkit.messageHandlers._nativePromiseResolved.addEventListener('message', (event) => {
+    const [id] = event.detail;
+    const [resolve,] = _promises.get(id) ?? [];
+    if (!resolve) return;
+    _promises.delete(id);
+    resolve();
+  });
+
+  window.webkit.messageHandlers._nativePromiseRejected.addEventListener('message', (event) => {
+    const [id] = event.detail;
+    const [,reject] = _promises.get(id) ?? [];
+    if (!reject) return;
+    _promises.delete(id);
+    reject();
+  });
+
+  function copyClipboard() {
+    return new Promise((resolve, reject) => {
+      const thisPromiseId = ++promiseId;
+
+      _promises.set(thisPromiseId, [resolve, reject]);
+
+      const schedule = document.getElementById('schedule');
+      const boundingRect = getBoundingClientRect();
+
+      window.webkit.messageHandlers.copySnapshot.postMessage([
+        thisPromiseId,
+        'clipboard',
+        boundingRect.x,
+        boundingRect.y,
+        boundingRect.width,
+        boundingRect.height,
+      ]);
+    });
+  }
+
+  function saveImage() {
+    return new Promise((resolve, reject) => {
+      const thisPromiseId = ++promiseId;
+
+      _promises.set(thisPromiseId, [resolve, reject]);
+
+      const schedule = document.getElementById('schedule');
+      const boundingRect = getBoundingClientRect();
+
+      window.webkit.messageHandlers.copySnapshot.postMessage([
+        thisPromiseId,
+        'file',
+        boundingRect.x,
+        boundingRect.y,
+        boundingRect.width,
+        boundingRect.height,
+      ]);
+    });
+  }
+
+  document.getElementById('clipboard').removeAttribute('disabled');
+  document.getElementById('save-image').removeAttribute('disabled');
 }
 
 function exportJSON() {