dev.2ha.me/temp-clipboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
jimlee
2023-01-10 17:11:39 +08:00
parent 8030d31753
commit aab0134c8e
28 changed files with 1175 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
target/classes/META-INF/temp-clipboard.kotlin_module Normal file
View File

Binary file not shown.

10
target/classes/config/application.yml Normal file
View File

@@ -0,0 +1,10 @@
server:
port: 8081
spring:
servlet:
multipart:
max-request-size: 100MB
max-file-size: 100MB
application:
name: 临时粘贴板

300
target/classes/static/index.html Normal file
View File

@@ -0,0 +1,300 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>临时粘贴板</title>
<link rel="stylesheet" type="text/css" href="./waves.min.css?v=0.7.2">
<style>
body {
width: 100%;
margin: 5px -10px;
padding: 0 5px 0 14px;
position: absolute;
}
/* 输入框 */
.dzm-textarea {
padding: 5px;
border: 1px solid red;
width: 98%;
border-radius: 3px;
position: fixed;
}
/* 输入框为空时显示 placeholder */
.dzm-textarea:empty:before {
content: attr(placeholder);
color: red;
}
/* 输入框获取焦点时移除 placeholder */
.dzm-textarea:focus:before {
content: none;
}
.textcopy {
position: fixed;
height: 40px;
width: 40px;
top: 50%;
right: 1%;
transform: translateX(-50%) translateY(-50%);
}
.textcopy a,
.textcopy a:hover {
background: #01BCFF;
margin: 5px;
right: 10px;
}
.btn {
color: #fff;
}
</style>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./waves.min.js?v=0.7.1"></script>
</head>
<body>
<!-- textarea -->
<div oninput="textInput()" id="textarea" class="dzm-textarea" contenteditable="true" placeholder="请输入内容"
style="resize: both; overflow: auto;"></div>
<label for="copy_content"></label><input id="copy_content" type="text" value="" style="position: fixed;top: -100px;z-index: -10;"/>
<div class="textcopy">
<a class="btn float-buttons waves-effect waves-button waves-float" onclick="copyText()">复制</a>
<a class="btn float-buttons waves-effect waves-button waves-float" onclick="pasteText()">粘贴</a>
<a class="btn float-buttons waves-effect waves-button waves-float" onclick="openUrl()">打开</a>
</div>
<script>
Waves.attach('.flat-buttons', ['waves-button']);
Waves.attach('.float-buttons', ['waves-button', 'waves-float']);
Waves.attach('.float-button-light', ['waves-button', 'waves-float', 'waves-light']);
$(document).on('ready', function () {
Waves.init();
Waves.attach('.drag-ripple', 'waves-block', true);
Waves.attach('#bg-pattern', null, true);
});
const textarea = document.querySelector(".dzm-textarea")
function copyText() {
let nowValue = textarea.innerText;
if (nowValue === "") {
nowValue = document.querySelector("#textarea > img").src
// base64 image
if (nowValue.startsWith("data")) {
let type = nowValue.substring(5, nowValue.indexOf(';'))
let clipboardItemInput
switch (type) {
case "image/png":
clipboardItemInput = new ClipboardItem({
"image/png": nowValue.slice(23),
});
break;
case "image/jpeg":
clipboardItemInput = new ClipboardItem({
"image/jpeg": nowValue.slice(23),
});
break;
case "image/gif":
clipboardItemInput = new ClipboardItem({
"image/gif": nowValue.slice(23),
});
break;
case "application/pdf":
clipboardItemInput = new ClipboardItem({
"application/pdf": nowValue.slice(23),
});
break;
case "application/vnd.ms-excel":
clipboardItemInput = new ClipboardItem({
"application/vnd.ms-excel": nowValue.slice(23),
});
break;
case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
clipboardItemInput = new ClipboardItem({
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": nowValue.slice(23),
});
break;
case "application/vnd.openxmlformats-officedocument.presentationml.presentation":
clipboardItemInput = new ClipboardItem({
"application/vnd.openxmlformats-officedocument.presentationml.presentation": nowValue.slice(23),
});
break;
case "application/vnd.ms-powerpoint":
clipboardItemInput = new ClipboardItem({
"application/vnd.ms-powerpoint": nowValue.slice(23),
});
break;
case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
clipboardItemInput = new ClipboardItem({
"application/vnd.openxmlformats-officedocument.wordprocessingml.document": nowValue.slice(23),
});
break;
case "application/msword":
clipboardItemInput = new ClipboardItem({
"application/msword": nowValue.slice(23),
});
break;
}
if (clipboardItemInput != null) {
navigator.clipboard.write([clipboardItemInput]);
}
} else {
const selection = window.getSelection();
if (selection.rangeCount > 0) selection.removeAllRanges();
const range = document.createRange();
range.selectNode(document.querySelector("#textarea > img")); //传入dom
selection.addRange(range);
document.execCommand("copy"); //copy是复制
selection.removeAllRanges(); //清除缓存
}
} else {
//获取要赋值的input的元素
var inputElement = document.getElementById("copy_content");
// 设置只读，否则移动端会弹出软键盘
inputElement.setAttribute("readonly", "readonly");
//给input框赋值
inputElement.value = textarea.innerText;
//选中input框的内容
inputElement.select();
inputElement.setSelectionRange(0, 9999999999999);
// 执行浏览器复制命令
// document.execCommand("Copy");
navigator.clipboard.writeText(textarea.innerText)
}
}
function pasteText() {
navigator.clipboard.readText()
.then(text => {
textarea.innerText = text
})
}
//
// function appendText() {
// navigator.clipboard.readText()
// .then(text => {
// textarea.innerText = textarea.innerText + text
// })
// }
function openUrl() {
window.open(textarea.innerText)
}
let lastUpdate = null
let lastValue = ""
let saveInterval
window.onload = function () {
loadValue()
// 监听页面状态
document.addEventListener('visibilitychange', function () {
// 页面状态变化为可见时触发
if (document.visibilityState === 'hidden') {
if (lastUpdate != null && Date.now() - lastUpdate > 5000) {
clearInterval(saveInterval)
}
} else if (document.visibilityState === 'visible') {
loadValue()
saveInterval = setInterval(() => {
saveValue()
}, 1000)
}
}
)
saveInterval = setInterval(() => {
saveValue()
}, 1000)
}
function saveValue() {
let nowValue = textarea.innerText;
if (nowValue === "") {
nowValue = textarea.innerHTML
}
if (lastValue !== nowValue && lastUpdate != null && Date.now() - lastUpdate > 3000) {
lastValue = nowValue
var httpRequest = new XMLHttpRequest();// new对象
httpRequest.open('PUT', '/clipboard', true);// get表示请求方式、url请求的地址
httpRequest.setRequestHeader("Content-type", "application/json");//post方式需要设置请求头
var reqParam = {
'value': nowValue,
}
httpRequest.send(JSON.stringify(reqParam));//发送请求 将请求体写在send中
// 返回处理
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState === 4 && httpRequest.status === 200) {
//success
}
};
}
}
function loadValue() {
var httpRequest = new XMLHttpRequest();// new对象
httpRequest.open('GET', window.origin + "/clipboard", true);// get表示请求方式、url请求的地址
httpRequest.send();// 发送请求
// 返回处理
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState === 4 && httpRequest.status === 200) {
if (httpRequest.responseText.startsWith("<img")) {
textarea.innerHTML = httpRequest.responseText
} else {
textarea.innerText = httpRequest.responseText.replaceAll("\n", "")
}
}
}
}
function textInput() {
lastUpdate = Date.now()
}
document.querySelector('#textarea').addEventListener('paste', function (e) {
var cbd = e.clipboardData;
var ua = window.navigator.userAgent;
// 如果是 Safari 直接 return
if (!(e.clipboardData && e.clipboardData.items)) {
return;
}
// Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
if (cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49) {
return;
}
for (var i = 0; i < cbd.items.length; i++) {
var item = cbd.items[i];
if (item.kind === "file") {
var blob = item.getAsFile();
if (blob.size === 0) {
return;
}
var reader = new FileReader();
var imgs = new Image();
imgs.file = blob;
reader.onload = (function (aImg) {
return function (e) {
aImg.src = e.target.result;
// chrome下有Bug显示两张图片，此处为兼容处理
let imgary = $('#textarea > img')
if (imgary.length > 1) {
imgary.eq(-1).remove()
}
};
})(imgs);
reader.readAsDataURL(blob);
document.querySelector("#textarea").innerHTML = ""
document.querySelector('#textarea').appendChild(imgs);
lastUpdate = Date.now()
}
}
}, false);
</script>
</body>
</html>

6
target/classes/static/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

8
target/classes/static/waves.min.css vendored Normal file
View File

@@ -0,0 +1,8 @@
/*!
* Waves v0.7.2
* http://fian.my.id/Waves
*
* Copyright 2014 Alfiana E. Sibuea and other contributors
* Released under the MIT license
* https://github.com/fians/Waves/blob/master/LICENSE
*/.waves-effect{position:relative;cursor:pointer;display:inline-block;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.waves-effect .waves-ripple{position:absolute;border-radius:50%;width:100px;height:100px;margin-top:-50px;margin-left:-50px;opacity:0;background:rgba(0,0,0,.2);background:-webkit-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:-o-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:-moz-radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);background:radial-gradient(rgba(0,0,0,.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%);-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;-webkit-transition-property:-webkit-transform,opacity;-moz-transition-property:-moz-transform,opacity;-o-transition-property:-o-transform,opacity;transition-property:transform,opacity;-webkit-transform:scale(0) translate(0,0);-moz-transform:scale(0) translate(0,0);-ms-transform:scale(0) translate(0,0);-o-transform:scale(0) translate(0,0);transform:scale(0) translate(0,0);pointer-events:none}.waves-effect.waves-light .waves-ripple{background:rgba(255,255,255,.4);background:-webkit-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:-o-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:-moz-radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%);background:radial-gradient(rgba(255,255,255,.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%)}.waves-effect.waves-classic .waves-ripple{background:rgba(0,0,0,.2)}.waves-effect.waves-classic.waves-light .waves-ripple{background:rgba(255,255,255,.4)}.waves-notransition{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;transition:none!important}.waves-button,.waves-circle{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(circle,#fff 100%,#000 100%)}.waves-button,.waves-button:hover,.waves-button:visited,.waves-button-input{white-space:nowrap;vertical-align:middle;cursor:pointer;border:none;outline:0;color:inherit;background-color:transparent;font-size:1em;line-height:1em;text-align:center;text-decoration:none;z-index:1}.waves-button{padding:.85em 1.1em;border-radius:.2em}.waves-button-input{margin:0;padding:.85em 1.1em}.waves-input-wrapper{border-radius:.2em;vertical-align:bottom}.waves-input-wrapper.waves-button{padding:0}.waves-input-wrapper .waves-button-input{position:relative;top:0;left:0;z-index:1}.waves-circle{text-align:center;width:2.5em;height:2.5em;line-height:2.5em;border-radius:50%}.waves-float{-webkit-mask-image:none;-webkit-box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12);box-shadow:0 1px 1.5px 1px rgba(0,0,0,.12);-webkit-transition:all 300ms;-moz-transition:all 300ms;-o-transition:all 300ms;transition:all 300ms}.waves-float:active{-webkit-box-shadow:0 8px 20px 1px rgba(0,0,0,.3);box-shadow:0 8px 20px 1px rgba(0,0,0,.3)}.waves-block{display:block}a.waves-effect .waves-ripple{z-index:-1}

10
target/classes/static/waves.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
target/classes/static/waves.min.js.map Normal file
View File

File diff suppressed because one or more lines are too long