fix clipboard in safari; fix primary button styling

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 bitbof (bitbof.com)
+Copyright (c) 2024 bitbof (bitbof.com)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -92,6 +92,6 @@ Klecks and Kleki are community funded. [Donate today](https://kleki.com/donate/)
 
 # License
 
-bitbof © 2023 - Released under the MIT License. Icons by bitbof are public domain (excluding the Klecks logo, bitbof logo).
+bitbof © 2024 - Released under the MIT License. Icons by bitbof are public domain (excluding the Klecks logo, bitbof logo).
 
 If you wish to say you're using "Kleki" and use its branding you must acquire a license from bitbof. You are free to say you're using "Klecks".

src/app/script/klecks/ui/modals/clipboard-dialog.ts

@@ -35,36 +35,55 @@ export function clipboardDialog (
         height: isSmall ? 300 : 350,
         canvas: fullCanvas,
         isNotCopy: false,
+        onChange: () => setTimeout(() => updateBlob()),
     });
     BB.css(cropCopy.getEl(), {
         marginTop: '10px',
         marginLeft: '-20px',
     });
     div.append(cropCopy.getEl());
 
-    function toClipboard () {
-        const imgURL = cropCopy.getCroppedCanvas().toDataURL('image/png');
-        setTimeout(async function () {
-            try {
-                const data = await fetch(imgURL);
-                const blob = await data.blob();
-                await (navigator.clipboard as any).write([
-                    new ClipboardItem({
-                        [blob.type]: blob,
-                    } as any), // todo check is possible?
-                ]);
-                setTimeout(function () {
-                    output.out(LANG('cropcopy-copied'), true);
-                }, 200);
-            } catch (err) {
-                console.error((err as Error).name, (err as Error).message);
-            }
-        }, 0);
+    let blob: Blob | undefined = undefined;
+
+    // Safari doesn't allow any async operations between user interaction (click) and navigator.clipboard.write.
+    // It throws "NotAllowedError: the request is not allowed by the user agent or the platform in the current context,
+    // possibly because the user denied permission."
+    // So, we try to prepare blob beforehand.
+    let cropTimeout: ReturnType<typeof setTimeout> | undefined;
+    function updateBlob () {
+        if (!clipboardItemIsSupported) {
+            return;
+        }
+        clearTimeout(cropTimeout);
+        cropTimeout = setTimeout(() => {
+            cropCopy.getCroppedCanvas().toBlob((result) => {
+                blob = result ?? undefined;
+            }, 'image/png');
+        }, 50);
+    }
+
+    async function toClipboard () {
+        if (!blob) {
+            return;
+        }
+        try {
+            await (navigator.clipboard as any).write([
+                new ClipboardItem({
+                    [blob.type]: blob,
+                }),
+            ]);
+            setTimeout(function () {
+                output.out(LANG('cropcopy-copied'), true);
+            }, 200);
+        } catch (err) {
+            console.error((err as Error).name, (err as Error).message);
+            return;
+        }
     }
 
     const keyListener = new BB.KeyListener({
         onDown: function (keyStr, KeyEvent, comboStr) {
-            if (comboStr === 'ctrl+c') {
+            if (['ctrl+c', 'cmd+c'].includes(comboStr)) {
                 toClipboard();
                 closeFunc && closeFunc();
             }

src/app/style/dark.scss

@@ -131,6 +131,15 @@ body.kl-theme-dark {
     pointer-events: none;
   }
 
+  .kl-button-primary {
+    background: var(--kl-color);
+    color: #fff;
+
+    &:hover {
+      background-image: linear-gradient(to top, var(--kl-color) -50%, var(--active-highlight-color) 150%);
+    }
+  }
+
   button:not(.kl-button-primary, .kl-button-cancel) img:not(.dark-no-invert) {
     filter: invert(1) hue-rotate(180deg);
   }