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

@@ -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"
   }
 }

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};

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');
 						}
 					}
 

src/ui/timechain-item-menu.riot

@@ -0,0 +1,14 @@
+<timechain-item-menu>
+
+
+    <script>
+
+        export default {
+
+            
+
+        }
+
+    </script>
+
+</timechain-item-menu>

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");
+				}
+
+				
 			}
 
 		}

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