Jason Tudisco
66fe009fa7
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.
309 lines
7.9 KiB
Plaintext
309 lines
7.9 KiB
Plaintext
<timechain-input>
|
|
|
|
<div class="timechain-input-tempate" if={state.show_tagging}>
|
|
<timechain-tag if={state.show_tagging} ontag="{onTags}" />
|
|
<!-- timechain-input-buttons if={state.show_tagging} onsave="{onSave}" oncancel={onCancel} / -->
|
|
</div>
|
|
|
|
<div id="pasteme" ondblclick="{onSwap}" >
|
|
<p>{state.message}</p>
|
|
</div>
|
|
|
|
<!-- textarea id="pasteme" ondblclick="{onSwap}" if="{content_mime == 'text/plain'}">
|
|
{state.message}
|
|
</textarea -->
|
|
|
|
<script>
|
|
|
|
//If tagging should be one all the time. False if show only after pasting.
|
|
const tagging_always_on = false;
|
|
const debugging = window.debugging;
|
|
|
|
// Include
|
|
const pubsub = require('pubsub-js');
|
|
const empty = require('empty-lite');
|
|
const hash = require('hash.js');
|
|
|
|
|
|
import { nanoid } from 'nanoid'
|
|
import sanitizeHtml from 'sanitize-html';
|
|
import TimechainTag from './timechain-tag.riot'
|
|
import TimechainInputButtons from './timechain-input-buttons.riot';
|
|
import {blobToDataURL} from '../lib/blobconvert';
|
|
import keymage from 'keymage';
|
|
|
|
const {
|
|
TimeChainDataSqliteRecord,
|
|
TimeChainDataSqliteTag,
|
|
TimeChainDataSqliteTagLink
|
|
} = require('../data/sqlite-client');
|
|
|
|
export default {
|
|
state: {
|
|
message:"Paste something in this window.",
|
|
show_tagging: tagging_always_on
|
|
},
|
|
components: {
|
|
TimechainTag,
|
|
TimechainInputButtons
|
|
},
|
|
onBeforeMount(){
|
|
this.tc = 0;
|
|
this.clean_props = ['timestamp','content_text','content_mime','content_type','content_swap','content_tags'];
|
|
},
|
|
onMounted(){
|
|
document.addEventListener('paste', this.pasteEvent.bind(this));
|
|
|
|
this.event_dbreloaded = pubsub.subscribe('database-reloaded', (event,res)=>{
|
|
pubsub.publish('timechain-list-update', true);
|
|
})
|
|
|
|
this.setupKeyEvents();
|
|
},
|
|
/**
|
|
* CLeans up the paste input and get it ready for a new paste
|
|
*/
|
|
cleanFields(){
|
|
this.clean_props.forEach(f=>{
|
|
this[f]=null;
|
|
});
|
|
const el = this.$('#pasteme');
|
|
el.innerHTML = `<p>${this.state.message}</p>`;
|
|
el.classList.remove('paste-html');
|
|
pubsub.publish('tag.clean');
|
|
this.update({show_tagging:tagging_always_on});
|
|
pubsub.publish('timestamp-resume',true);
|
|
},
|
|
setupKeyEvents(){
|
|
//keymage.pushScope('input');
|
|
|
|
const kevents = [];
|
|
|
|
kevents.push( keymage('ctrl-s', this.onSave.bind(this)) );
|
|
kevents.push( keymage('enter', this.onSave.bind(this)) );
|
|
kevents.push( keymage('esc', this.onCancel.bind(this)) );
|
|
|
|
this._keyevents = kevents;
|
|
|
|
},
|
|
onUnmounted(){
|
|
this._keyevents.forEach(f=>{
|
|
f();
|
|
});
|
|
pubsub.unsubscribe(this.event_dbreloaded);
|
|
},
|
|
/**
|
|
* Window paste event has been fire.
|
|
*/
|
|
pasteEvent(e){
|
|
e.preventDefault();
|
|
|
|
if(debugging){
|
|
console.log("Paste Event");
|
|
console.log("Item 1", e.clipboardData.items[0]);
|
|
console.log("Item 2", e.clipboardData.items[1]);
|
|
}
|
|
|
|
let known_type = true;
|
|
let isFile = false;
|
|
const types = e.clipboardData.types;
|
|
|
|
console.log("types",types);
|
|
|
|
if(types.indexOf('Files') > -1){
|
|
|
|
const c = e.clipboardData.items.length;
|
|
|
|
debugging && console.log("FILES!!", c);
|
|
|
|
for(let i=0; i < c ; i++){
|
|
debugging && console.log("Clip Data",i, e.clipboardData.items[i]);
|
|
const t = e.clipboardData.items[i].type;
|
|
|
|
if(t == 'image/jpeg'){
|
|
isFile = true;
|
|
this.isIMAGE(e.clipboardData.items[i], 'image/jpeg');
|
|
break;
|
|
}else if(t == 'image/png'){
|
|
isFile = true;
|
|
this.isIMAGE(e.clipboardData.items[i], 'image/png');
|
|
break;
|
|
}else if(t == 'image/gif'){
|
|
isFile = true;
|
|
this.isIMAGE(e.clipboardData.items[i], 'image/gif');
|
|
}
|
|
}
|
|
|
|
}else if (types.indexOf('text/html') > -1) {
|
|
this.isHTML(e);
|
|
}else if(types.indexOf('text/plain') > -1){
|
|
this.isTEXT(e);
|
|
}else{
|
|
known_type = false;
|
|
}
|
|
|
|
console.log(known_type,this.content,isFile || empty(this.content));
|
|
if(known_type && (isFile || !empty(this.content)) ){
|
|
this.update({show_tagging:true});
|
|
this.$('.tagify__input').focus();
|
|
}else{
|
|
console.log("No reason to show tagging");
|
|
}
|
|
|
|
},
|
|
isHTML(e){
|
|
console.log("Handling HTML");
|
|
const newData = e.clipboardData.getData('text/html');
|
|
const newDataText = e.clipboardData.getData('text/plain');
|
|
|
|
const el = this.$('#pasteme');
|
|
this.pauseTime();
|
|
|
|
el.innerHTML = this.content = newData;
|
|
this.content_text = newDataText;
|
|
this.content_mime = 'text/html';
|
|
|
|
el.classList.add('paste-html');
|
|
|
|
this.content_type = "html";
|
|
this.content_swap = 0;
|
|
this.content_orig = this.content;
|
|
|
|
},
|
|
isTEXT(e){
|
|
console.log("Handling TEXT");
|
|
const data = e.clipboardData.getData('text/plain');
|
|
|
|
const el = this.$('#pasteme');
|
|
|
|
pubsub.publish('timestamp-puase',true);
|
|
this.pauseTime();
|
|
|
|
el.innerText = this.content = data;
|
|
//el.value = this.content = data;
|
|
this.content_mime = 'text/plain';
|
|
|
|
el.classList.add('paste-html');
|
|
|
|
this.content_type = "text";
|
|
this.content_swap = false;
|
|
this.content_orig = this.content;
|
|
},
|
|
isIMAGE(e, mime){
|
|
const el = this.$('#pasteme');
|
|
const f = e.getAsFile();
|
|
|
|
this.content_orig = this.content = f;
|
|
this.content_mime = mime;
|
|
this.content_type = "image";
|
|
this.content_swap = false;
|
|
|
|
blobToDataURL(f,data=>{
|
|
this.content = data;
|
|
el.innerHTML = "<img src='" + data + "' style='max-width:100%'>";
|
|
});
|
|
},
|
|
pauseTime(){
|
|
pubsub.publish('timestamp-puase',true);
|
|
this.timestamp = Math.floor(new Date().getTime());
|
|
pubsub.publish('timestamp-settime',this.timestamp);
|
|
},
|
|
onSwap(){
|
|
console.log("Here we can swap to text");
|
|
|
|
if(this.content_type=='html'){
|
|
const el = this.$('#pasteme');
|
|
if(this.content_swap==0){
|
|
this.content_mime = "text/plain";
|
|
this.content = this.content_text;
|
|
el.innerText = this.content;
|
|
this.content_swap = 1;
|
|
}else if(this.content_swap==1){
|
|
this.content_mime = "text/html";
|
|
this.content = sanitizeHtml(this.content_orig);
|
|
el.innerHTML = this.content;
|
|
this.content_swap = 2;
|
|
}else{
|
|
this.content_mime = "text/html";
|
|
const temp = this.content;
|
|
this.content = this.content_orig;
|
|
this.content_swap = 0;
|
|
el.innerHTML = this.content;
|
|
}
|
|
}
|
|
|
|
if (window.getSelection().empty) { // Chrome
|
|
window.getSelection().empty();
|
|
} else if (window.getSelection().removeAllRanges) { // Firefox
|
|
window.getSelection().removeAllRanges();
|
|
}
|
|
|
|
},
|
|
onTags(tags){
|
|
console.log(++this.tc,tags);
|
|
this.content_tags = tags;
|
|
},
|
|
onCancel(){
|
|
this.cleanFields();
|
|
},
|
|
onSave(){
|
|
debugging && console.log("Save button pressed");
|
|
|
|
if(!this.content) return;
|
|
|
|
const TR = new TimeChainDataSqliteRecord();
|
|
|
|
const ts = Math.floor(new Date().getTime());
|
|
const id = nanoid();
|
|
const hs = hash.sha256().update(this.content).digest('hex');
|
|
|
|
const tags = JSON.parse(this.content_tags);
|
|
|
|
console.log("tags",tags,this.content_tags);
|
|
|
|
debugging && console.log("tags:",tags);
|
|
|
|
TR.add(id,ts,this.content,this.content_mime,hs).then(res=>{
|
|
if(res != 1){
|
|
throw new Error("Not about to save record");
|
|
}
|
|
}).then(()=>{
|
|
if(!tags) return false;
|
|
const TG = new TimeChainDataSqliteTag();
|
|
const tasks = tags.map(t=>{
|
|
return TG.add(t.value);
|
|
});
|
|
|
|
return Promise.all(tasks).then(res=>{
|
|
console.log(res);
|
|
return true;
|
|
});
|
|
}).then(()=>{
|
|
if(!tags) return false;
|
|
const TL = new TimeChainDataSqliteTagLink();
|
|
const tasks = tags.map(t=>{
|
|
return TL.add(id,t.value);
|
|
});
|
|
return Promise.all(tasks).then(res=>{
|
|
console.log(res);
|
|
return true;
|
|
});
|
|
}).then(()=>{
|
|
this.cleanFields();
|
|
}).then(()=>{
|
|
|
|
setTimeout(()=>{
|
|
pubsub.publish('timechain-list-update', true);
|
|
},10);
|
|
|
|
}).catch(err => {
|
|
alert("Error saving data!");
|
|
console.error(err);
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</timechain-input> |