カードリストで未読のみを表示する
code:script.js
(function() {
// https://scrapbox.io/XXX/?somethingParam=value
if (!window.location.href.match(/^https:\/\/scrapbox\.io\/^/+\/?(\?.*)?$/)) {
return;
}
const urlParams = new URLSearchParams(window.location.search);
const showOnlyUnreadCardPage = urlParams.get('showOnlyUnreadCardPage');
// Trueがあれば未読のみ表示。Falseか何もセットがなければ全て表示する。
const initialState = showOnlyUnreadCardPage === 'true';
const style = document.createElement('style');
style.textContent = `
.unread-filter {
display: flex;
align-items: center;
margin-right: 20px;
padding: 6px 10px 3px;
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 25px;
margin-top: 8px;
margin-right: 8px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:checked + .slider:before {
transform: translateX(23px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
`;
document.head.appendChild(style);
const switchHtml = `
<div class="unread-filter">
<label class="switch">
<input type="checkbox" id="unreadSwitch" ${initialState ? 'checked' : ''}>
<span class="slider round"></span>
</label>
<span>未読のみ</span>
</div>
`;
const flexBox = document.querySelector('.flex-box');
if (flexBox) {
flexBox.insertAdjacentHTML('afterbegin', switchHtml);
}
function filterCards() {
const unreadSwitch = document.getElementById('unreadSwitch');
const cards = document.querySelectorAll('.page-list li.page-list-item');
cards.forEach(card => {
if (unreadSwitch.checked) {
if (card.classList.contains('unread')) {
card.style.display = '';
} else {
card.style.display = 'none';
console.log(card);
}
} else {
card.style.display = ''; // Show all cards
}
});
}
unreadSwitch.addEventListener('change', filterCards);
filterCards();
})();