v0.1.2 更新:增加屏蔽管理
v0.2.1 更新:修复无法显示屏蔽的问题,更新屏蔽按钮位置
配图只作参考,并非针对~
沸点早该有个屏蔽功能了,然鹅官方一直不加。
忍无可忍,自己操刀就是干!
可以屏蔽单独某条沸点,也可以屏蔽某人全部沸点。
操作位置如图所示。
油猴脚本地址: greasyfork.org/zh-CN/scrip…
下面是代码
v0.2.1
(function() {
'use strict'
const iStyle = `
.jj-block-dialog {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.25)
}
.jj-block-dialog-box {
position: relative;
width: 520px;
background: #fff;
padding: 20px;
margin: 8% auto 0
}
.jj-block-dialog-box .close {
position: absolute;
right: -15px;
top: -15px;
width: 26px;
height: 26px;
font-size: 26px;
text-align: center;
line-height: 26px;
color: #666;
background: #fff;
border-radius: 50%;
border: 1px solid #ccc;
transform: rotateZ(45deg);
cursor: pointer;
user-select: none;
}
.jj-block-dialog-box label {
font-size: 16px;
}
.jj-block-dialog-box textarea {
height: 70px;
margin: 10px 0;
padding: 5px;
}
`
/**
* 拿到vue
*/
const JJ = document.querySelector('#juejin').__vue__
/**
* 清除空值
*/
const cleanArray = arr => {
return arr.filter(v => v && v.trim())
}
/**
* 获取缓存数据
*/
const getLocal = key => {
return cleanArray(JSON.parse(localStorage.getItem(key)))
}
/**
* 设置缓存数据
*/
const setLocal = (key, val) => {
return localStorage.setItem(key, JSON.stringify(val))
}
/**
* 过滤列表数据
*/
const filterList = () => {
const pinItem = document.querySelectorAll('.pin')
let blockList = getLocal('BLOCK_LIST') || []
let blockUser = getLocal('BLOCK_USER') || []
for (const v of Array.from(pinItem)) {
const vInfo = v.__vue__.pin
if (
blockList.includes(vInfo.id) ||
blockUser.includes(vInfo.user.user_id)
) {
v.classList.add('hidden')
continue
}
v.classList.remove('hidden')
const action = v.querySelector('.action-box')
if (action && !action.classList.contains('is-append')) {
const blockEl = document.createElement('div')
const bKey = Object.keys(action.firstElementChild.dataset)[0]
blockEl.dataset[bKey] = ''
blockEl.classList = 'share-action action'
action.appendChild(blockEl)
const blockTitle = document.createElement('div')
blockTitle.textContent = '屏蔽'
blockTitle.dataset[bKey] = ''
blockTitle.classList = 'action-title-box'
blockTitle.style = 'flex:1;height:100%;font-size:13px;color:#8a93a0'
blockEl.appendChild(blockTitle)
const blockPanel = document.createElement('div')
blockPanel.dataset[bKey] = ''
blockPanel.classList = 'share-panel shadow hidden'
blockEl.appendChild(blockPanel)
blockTitle.onclick = () => {
blockPanel.classList.toggle('hidden')
}
const addElement = (label, cb) => {
const el = document.createElement('div')
el.textContent = label
el.dataset[bKey] = ''
el.classList = 'share-item'
el.style = 'font-size:13px;color:#8a93a0;text-align:center'
el.onclick = cb
blockPanel.appendChild(el)
}
addElement('屏蔽此条', () => {
blockList.push(vInfo.id)
setLocal('BLOCK_LIST', blockList)
v.classList.add('hidden')
})
addElement('屏蔽此人', () => {
blockUser.push(vInfo.user.user_id)
setLocal('BLOCK_USER', blockUser)
v.classList.add('hidden')
filterList()
})
addElement('查看已屏蔽', () => {
blockList = getLocal('BLOCK_LIST') || []
blockUser = getLocal('BLOCK_USER') || []
let dialog = document.querySelector('.jj-block-dialog')
if (dialog) {
document.body.removeChild(dialog)
}
dialog = document.createElement('div')
dialog.classList = 'jj-block-dialog'
dialog.innerHTML = `
<div class="jj-block-dialog-box">
<span id="jj-block-close" class="close">+</span>
<label>已屏蔽的沸点</label>
<textarea id="jj-block-list">${blockList.join(',')}</textarea>
<label>已屏蔽的用户</label>
<textarea id="jj-block-user">${blockUser.join(',')}</textarea>
<button id="jj-block-update">更新</button>
<span>多条数据用逗号(,)隔开,留空则不屏蔽任何沸点和用户</span>
</div>
`
const style = document.createElement('style')
style.textContent = iStyle
document.head.append(style)
document.body.append(dialog)
const _ = el => document.querySelector(el) || null
_('#jj-block-close').onclick = () => {
document.body.removeChild(dialog)
}
_('#jj-block-update').onclick = () => {
const blockList = _('#jj-block-list').value.split(',')
const blockUser = _('#jj-block-user').value.split(',')
setLocal('BLOCK_LIST', blockList)
setLocal('BLOCK_USER', blockUser)
document.body.removeChild(dialog)
filterList()
JJ.$alertMsg('屏蔽列表已更新')
}
})
action.classList.add('is-append')
}
}
}
/**
* 监听并过滤
*/
const watchPin = () => {
const target = document.querySelector('.pin-list-view, .pin-content')
const config = { childList: true, subtree: true }
const observer = new MutationObserver(() => {
filterList()
})
observer.observe(target, config)
}
JJ.$router.afterEach(() => watchPin())
watchPin()
})()