add theme
This commit is contained in:
332
themes/butterfly/source/js/rightmenu.js
Normal file
332
themes/butterfly/source/js/rightmenu.js
Normal file
@@ -0,0 +1,332 @@
|
||||
function setMask() {//设置遮罩层
|
||||
if (document.getElementsByClassName("rmMask")[0] !== undefined) {
|
||||
return document.getElementsByClassName("rmMask")[0];
|
||||
}
|
||||
mask = document.createElement('div');
|
||||
mask.className = "rmMask";
|
||||
mask.style.width = window.innerWidth + 'px';
|
||||
mask.style.height = window.innerHeight + 'px';
|
||||
mask.style.background = '#fff';
|
||||
mask.style.opacity = '.0';
|
||||
mask.style.position = 'fixed';
|
||||
mask.style.top = '0';
|
||||
mask.style.left = '0';
|
||||
mask.style.zIndex = 998;
|
||||
document.body.appendChild(mask);
|
||||
document.getElementById("rightMenu").style.zIndex = 19198;
|
||||
return mask;
|
||||
}
|
||||
|
||||
function insertAtCursor(myField, myValue) {
|
||||
|
||||
//IE 浏览器
|
||||
if (document.selection) {
|
||||
myField.focus();
|
||||
sel = document.selection.createRange();
|
||||
sel.text = myValue;
|
||||
sel.select();
|
||||
}
|
||||
|
||||
//FireFox、Chrome等
|
||||
else if (myField.selectionStart || myField.selectionStart === '0') {
|
||||
var startPos = myField.selectionStart;
|
||||
var endPos = myField.selectionEnd;
|
||||
|
||||
// 保存滚动条
|
||||
var restoreTop = myField.scrollTop;
|
||||
myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
|
||||
|
||||
if (restoreTop > 0) {
|
||||
myField.scrollTop = restoreTop;
|
||||
}
|
||||
|
||||
myField.focus();
|
||||
myField.selectionStart = startPos + myValue.length;
|
||||
myField.selectionEnd = startPos + myValue.length;
|
||||
} else {
|
||||
myField.value += myValue;
|
||||
myField.focus();
|
||||
}
|
||||
}
|
||||
|
||||
let rmf = {};
|
||||
rmf.showRightMenu = function (isTrue, x = 0, y = 0) {
|
||||
let $rightMenu = $('#rightMenu');
|
||||
$rightMenu.css('top', x + 'px').css('left', y + 'px');
|
||||
|
||||
if (isTrue) {
|
||||
$rightMenu.show();
|
||||
} else {
|
||||
$rightMenu.hide();
|
||||
}
|
||||
}
|
||||
rmf.switchDarkMode = function () {
|
||||
const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
|
||||
if (nowMode === 'light') {
|
||||
activateDarkMode()
|
||||
saveToLocal.set('theme', 'dark', 2)
|
||||
GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
|
||||
} else {
|
||||
activateLightMode()
|
||||
saveToLocal.set('theme', 'light', 2)
|
||||
GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
|
||||
}
|
||||
// handle some cases
|
||||
typeof utterancesTheme === 'function' && utterancesTheme()
|
||||
typeof FB === 'object' && window.loadFBComment()
|
||||
window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
|
||||
switchPostChart();
|
||||
};
|
||||
|
||||
rmf.copyWordsLink = function () {
|
||||
const decodedUrl = decodeURIComponent(window.location.href); // 解码 URL
|
||||
navigator.clipboard.writeText(decodedUrl)
|
||||
.then(() => {
|
||||
Snackbar.show({
|
||||
text: '链接复制成功！快去分享吧！',
|
||||
pos: 'top-right',
|
||||
showAction: false
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
rmf.switchReadMode = function () {
|
||||
const $body = document.body
|
||||
$body.classList.add('read-mode')
|
||||
const newEle = document.createElement('button')
|
||||
newEle.type = 'button'
|
||||
newEle.className = 'fas fa-sign-out-alt exit-readmode'
|
||||
$body.appendChild(newEle)
|
||||
|
||||
function clickFn() {
|
||||
$body.classList.remove('read-mode')
|
||||
newEle.remove()
|
||||
newEle.removeEventListener('click', clickFn)
|
||||
}
|
||||
|
||||
newEle.addEventListener('click', clickFn)
|
||||
}
|
||||
|
||||
//复制选中文字
|
||||
rmf.copySelect = function () {
|
||||
navigator.clipboard.writeText(document.getSelection().toString()).then(() => {
|
||||
Snackbar.show({
|
||||
text: '已复制选中文字！',
|
||||
pos: 'top-right',
|
||||
showAction: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
//回到顶部
|
||||
rmf.scrollToTop = function () {
|
||||
document.getElementsByClassName("menus_items")[1].setAttribute("style", "");
|
||||
document.getElementById("name-container").setAttribute("style", "display:none");
|
||||
btf.scrollToDest(0, 500);
|
||||
}
|
||||
rmf.translate = function () {
|
||||
document.getElementById("translateLink").click();
|
||||
}
|
||||
rmf.searchinThisPage = () => {
|
||||
let mask = setMask(); // 确保 mask 元素存在于 document.body 中
|
||||
document.getElementsByClassName("local-search-box--input")[0].value = window.getSelection().toString();
|
||||
document.getElementsByClassName("search")[0].click();
|
||||
var evt = document.createEvent("HTMLEvents");
|
||||
evt.initEvent("input", false, false);
|
||||
document.getElementsByClassName("local-search-box--input")[0].dispatchEvent(evt);
|
||||
|
||||
// 在尝试移除 mask 元素之前检查它是否存在于 document.body 中
|
||||
if (document.body.contains(mask)) {
|
||||
document.body.removeChild(mask);
|
||||
}
|
||||
}
|
||||
|
||||
document.body.addEventListener('touchmove', function (e) {
|
||||
|
||||
}, {passive: false});
|
||||
|
||||
function popupMenu() {
|
||||
//window.oncontextmenu=function(){return false;}
|
||||
window.oncontextmenu = function (event) {
|
||||
Snackbar.show({
|
||||
text: '按住 Ctrl 再点击右键，即可恢复原界面哦',
|
||||
pos: 'bottom-left',
|
||||
showAction: false
|
||||
});
|
||||
if (event.ctrlKey || document.body.clientWidth < 900) return true;
|
||||
$('.rightMenu-group.hide').hide();
|
||||
if (document.getSelection().toString()) {
|
||||
$('#menu-text').show();
|
||||
}
|
||||
if (document.getElementById('post')) {
|
||||
$('#menu-post').show();
|
||||
} else {
|
||||
if (document.getElementById('page')) {
|
||||
$('#menu-post').show();
|
||||
}
|
||||
}
|
||||
var el = window.document.body;
|
||||
el = event.target;
|
||||
var a = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w\-._~:\/?#[\]@!$&'*+,;=]+$/
|
||||
if (a.test(window.getSelection().toString()) && el.tagName !== "A") {
|
||||
$('#menu-too').show()
|
||||
}
|
||||
if (el.tagName === 'A') {
|
||||
$('#menu-to').show()
|
||||
rmf.open = function () {
|
||||
if (el.href.indexOf("http://") === -1 && el.href.indexOf("https://") === -1 || el.href.indexOf("blog.june-pj.cn") !== -1) {
|
||||
pjax.loadUrl(el.href)
|
||||
} else {
|
||||
location.href = el.href
|
||||
}
|
||||
}
|
||||
rmf.openWithNewTab = function () {
|
||||
window.open(el.href);
|
||||
// window.location.reload();
|
||||
}
|
||||
rmf.copyLink = function () {
|
||||
const url = el.href;
|
||||
navigator.clipboard.writeText(url);
|
||||
Snackbar.show({
|
||||
text: '链接复制成功！快去分享吧！',
|
||||
pos: 'top-right',
|
||||
showAction: false
|
||||
});
|
||||
};
|
||||
}
|
||||
if (el.tagName === 'IMG') {
|
||||
$('#menu-img').show()
|
||||
rmf.openWithNewTab = function () {
|
||||
window.open(el.src);
|
||||
// window.location.reload();
|
||||
}
|
||||
rmf.click = function () {
|
||||
el.click()
|
||||
}
|
||||
rmf.copyLink = function () {
|
||||
const url = el.src
|
||||
navigator.clipboard.writeText(url);
|
||||
Snackbar.show({
|
||||
text: '链接复制成功！快去分享吧！',
|
||||
pos: 'top-right',
|
||||
showAction: false
|
||||
});
|
||||
}
|
||||
rmf.saveAs = function () {
|
||||
var a = document.createElement('a');
|
||||
a.href = el.src;
|
||||
// 获取图片的文件名部分
|
||||
a.download = el.src.split('/').pop(); // 使用图片的文件名作为下载文件名
|
||||
a.style.display = 'none'; // 隐藏下载链接
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
}
|
||||
} else if (el.tagName === "TEXTAREA" || el.tagName === "INPUT") {
|
||||
$('#menu-paste').show();
|
||||
// rmf.paste=function(){
|
||||
// input.addEventListener('paste', async event => {
|
||||
// event.preventDefault();
|
||||
// const text = await navigator.clipboard.readText();
|
||||
// el.value+=text;
|
||||
// });
|
||||
// }
|
||||
rmf.paste = function () {
|
||||
navigator.permissions
|
||||
.query({
|
||||
name: 'clipboard-read'
|
||||
})
|
||||
.then(result => {
|
||||
if (result.state === 'granted' || result.state === 'prompt') {
|
||||
//读取剪贴板
|
||||
navigator.clipboard.readText().then(text => {
|
||||
console.log(text)
|
||||
insertAtCursor(el, text)
|
||||
})
|
||||
} else {
|
||||
Snackbar.show({
|
||||
text: '请允许读取剪贴板！',
|
||||
pos: 'top-center',
|
||||
showAction: false,
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
let pageX = event.clientX + 10;
|
||||
let pageY = event.clientY;
|
||||
let rmWidth = $('#rightMenu').width();
|
||||
let rmHeight = $('#rightMenu').height();
|
||||
if (pageX + rmWidth > window.innerWidth) {
|
||||
pageX -= rmWidth + 10;
|
||||
}
|
||||
if (pageY + rmHeight > window.innerHeight) {
|
||||
pageY -= pageY + rmHeight - window.innerHeight;
|
||||
}
|
||||
mask = setMask();
|
||||
window.onscroll = () => {
|
||||
rmf.showRightMenu(false);
|
||||
window.onscroll = () => {
|
||||
}
|
||||
if (document.body.contains(mask)) {
|
||||
document.body.removeChild(mask);
|
||||
}
|
||||
}
|
||||
|
||||
$(".rightMenu-item").click(() => {
|
||||
if (document.body.contains(mask)) {
|
||||
document.body.removeChild(mask);
|
||||
}
|
||||
});
|
||||
|
||||
$(window).resize(() => {
|
||||
rmf.showRightMenu(false);
|
||||
if (document.body.contains(mask)) {
|
||||
document.body.removeChild(mask);
|
||||
}
|
||||
});
|
||||
|
||||
mask.onclick = () => {
|
||||
if (document.body.contains(mask)) {
|
||||
document.body.removeChild(mask);
|
||||
}
|
||||
};
|
||||
|
||||
rmf.showRightMenu(true, pageY, pageX);
|
||||
return false;
|
||||
};
|
||||
|
||||
window.addEventListener('click', function () {
|
||||
rmf.showRightMenu(false);
|
||||
});
|
||||
}
|
||||
|
||||
if (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
|
||||
popupMenu()
|
||||
}
|
||||
const box = document.documentElement
|
||||
|
||||
function addLongtabListener(target, callback) {
|
||||
let timer = 0 // 初始化timer
|
||||
|
||||
target.ontouchstart = () => {
|
||||
timer = 0 // 重置timer
|
||||
timer = setTimeout(() => {
|
||||
callback();
|
||||
timer = 0
|
||||
}, 380) // 超时器能成功执行，说明是长按
|
||||
}
|
||||
|
||||
target.ontouchmove = () => {
|
||||
clearTimeout(timer) // 如果来到这里，说明是滑动
|
||||
timer = 0
|
||||
}
|
||||
|
||||
target.ontouchend = () => { // 到这里如果timer有值，说明此触摸时间不足380ms，是点击
|
||||
if (timer) {
|
||||
clearTimeout(timer)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
addLongtabListener(box, popupMenu)
|
||||
Reference in New Issue
Block a user