From 66fe009fa79e81a41aa0cf55e8a0ef452c623490 Mon Sep 17 00:00:00 2001
From: Jason Tudisco <tudisco@tudisco.biz>
Date: Sun, 3 Apr 2022 17:00:21 -0500
Subject: [PATCH] Adding small lib for toast messages. Adding ability to save
 gif.. but gif never come through with copy paste. Just html with gif urls.
 Adding ability to right click on content and put on clipboard.

---
 package.json                    |  5 +--
 src/lib/toast.js                | 15 +++++++++
 src/ui/timechain-input.riot     |  5 ++-
 src/ui/timechain-item-menu.riot | 14 +++++++++
 src/ui/timechain-list.riot      | 54 +++++++++++++++++++++++++++++++--
 start.js                        | 11 ++++++-
 6 files changed, 98 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/toast.js
 create mode 100644 src/ui/timechain-item-menu.riot

diff --git a/package.json b/package.json
index 9a6f9d4..47ed154 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "time-chain",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "timechain",
   "author": "Jaosn Tudisco",
   "license": "UNLICENSED",
@@ -52,6 +52,7 @@
     "nanoid": "^3.2.0",
     "pubsub-js": "^1.9.4",
     "riot": "^6.1.2",
-    "sanitize-html": "^2.6.1"
+    "sanitize-html": "^2.6.1",
+    "sweetalert2": "^11.4.8"
   }
 }
diff --git a/src/lib/toast.js b/src/lib/toast.js
new file mode 100644
index 0000000..584b747
--- /dev/null
+++ b/src/lib/toast.js
@@ -0,0 +1,15 @@
+import Swal from 'sweetalert2'
+
+const Toast = Swal.mixin({
+    toast: true,
+    position: 'top-end',
+    showConfirmButton: false,
+    timer: 3000,
+    timerProgressBar: true,
+    didOpen: (toast) => {
+        toast.addEventListener('mouseenter', Swal.stopTimer)
+        toast.addEventListener('mouseleave', Swal.resumeTimer)
+    }
+});
+
+module.exports = {Toast};
\ No newline at end of file
diff --git a/src/ui/timechain-input.riot b/src/ui/timechain-input.riot
index 244a1f3..28918bc 100644
--- a/src/ui/timechain-input.riot
+++ b/src/ui/timechain-input.riot
@@ -126,8 +126,11 @@
 							break;
 						}else if(t == 'image/png'){
 							isFile = true;
-							this.isIMAGE(e.clipboardData.items[i], 'image/png')
+							this.isIMAGE(e.clipboardData.items[i], 'image/png');
 							break;
+						}else if(t == 'image/gif'){
+							isFile = true;
+							this.isIMAGE(e.clipboardData.items[i], 'image/gif');
 						}
 					}
 
diff --git a/src/ui/timechain-item-menu.riot b/src/ui/timechain-item-menu.riot
new file mode 100644
index 0000000..ab30ce1
--- /dev/null
+++ b/src/ui/timechain-item-menu.riot
@@ -0,0 +1,14 @@
+<timechain-item-menu>
+
+
+    <script>
+
+        export default {
+
+            
+
+        }
+
+    </script>
+
+</timechain-item-menu>
\ No newline at end of file
diff --git a/src/ui/timechain-list.riot b/src/ui/timechain-list.riot
index 4dc2f97..6778212 100644
--- a/src/ui/timechain-list.riot
+++ b/src/ui/timechain-list.riot
@@ -9,7 +9,7 @@
 	<div class="top-gradient"></div>
 	<div class="timechain-list">
 
-		<div class="timechange-item" each="{r in state.records}" key="{r.uuid}" if="{!state.loading}">
+		<div class="timechange-item item-{r.iid}" data-iid="{r.iid}" each="{r in state.records}" key="{r.uuid}" if="{!state.loading}" oncontextmenu="{onContextMenu}">
 
 			<div class="timechain-timestamp">
 				<timestamp-static time={r.timestamp} />
@@ -28,7 +28,7 @@
 			</div>
 
 			<div class="timechain-item-image" if="{r.imageURL}">
-				<img src="{r.imageURL}" style="max-width:100%">
+				<img src="{r.imageURL}" style="max-width:100%" >
 			</div>
 
 		</div>
@@ -49,6 +49,9 @@
 
 		import TimechainTag from './timechain-tag.riot'
 
+		import {dataURLtoBlob} from '../lib/blobconvert.js'
+		import {Toast} from '../lib/toast.js'
+
 
 		const {
 			TimeChainDataSqliteRecord
@@ -91,6 +94,7 @@
 
 				TR.find(search,null,100,0).then(records=>{
 					console.log("Records", records);
+					if(records) records.data.forEach(r=>r.iid=this.uid());
 					this.update({records:records.data,loading:false});
 				}).then(()=>{
 					this.processImages();
@@ -125,6 +129,52 @@
 				this.loadRecords({
 					tags:search
 				})
+			},
+
+			onContextMenu(e){
+				const t = e.target.closest('.timechange-item');
+				const id = t.dataset.iid;
+				const record = this.state.records.find(r=>r.iid==id);
+				console.log("Right click", id, record);
+
+				if(!record) return;
+
+
+				if(record.mime && record.mime.includes('image/')){
+					const b = dataURLtoBlob(record.content);
+
+					console.log(b);
+
+					const items = { [b.type]: b };
+					const clipboardItem = new ClipboardItem(items);
+					navigator.clipboard.write([clipboardItem]).then(()=>{
+						Toast.fire({
+							icon: 'success',
+  							title: 'Copied to clipboard'
+						})
+					});
+
+
+				}else if(record.mime && (record.mime == 'text/html' || record.mime == 'text/plain')){
+					const t = record.mime;
+					const b = new Blob([record.content], {type:t});
+
+					console.log(t);
+					console.log(b);
+
+					const data = [new ClipboardItem({ [t]: b })];
+					navigator.clipboard.write(data).then(()=>{
+						Toast.fire({
+							icon: 'success',
+  							title: 'Copied to clipboard'
+						})
+					});
+					
+				}else{
+					alert("Can't copy");
+				}
+
+				
 			}
 
 		}
diff --git a/start.js b/start.js
index fbff7bf..60ddba8 100644
--- a/start.js
+++ b/start.js
@@ -3,7 +3,16 @@ import './src/css/tagify.scss'
 
 import App from './src/ui/app.riot'
 
-import { component } from 'riot'
+import { component, install } from 'riot'
+
+let id = 0
+
+install(function(component) {
+  // all components will pass through here
+  component.uid = ()=>{
+    return ++id;
+  }
+})
 
 window.debugging = true