pin-diary-3

改変点

日記ページではなく、週間ページをピン留めに

20230513

-.icon

code

global variables

code:script.js

const targetProject = 'blu3mo';

let updateTimer;

main code

code:script.js

const handleChange = () => {

console.log("handleChange");

scrapbox.Layout === "list" && scrapbox.Project.name === targetProject ?

startObserve() : endObserve();

}

// initialize

handleChange();

scrapbox.addListener("layout:changed", () => handleChange());

code:script.js

function pinDiary() {

console.log("pin1");

if (scrapbox.Layout !== "list") return;

if (isValidPostion()) return;

const diaryCard = getDiaryCard();

// 一旦pin留めをリセットする

removePin(diaryCard);

const cards = cardList();

// Pinしたカードの数

// 日付ページにPinする前の数を取得しておく

const pins = cards

.getElementsByClassName('page-list-item grid-style-item pin')

.length;

// DOMにPin留めをつける

appendPin(diaryCard);

//日付ページが常にPinなしページの前に来るように移動する

}

ページリストの更新を監視する

code:script.js

function startObserve() {

endObserve();

console.log("pin0");

updateTimer = setInterval(pinDiary, 1000);

}

function endObserve() {

clearInterval(updateTimer);

}

utilities

code:script.js

function toPageTitle(date) {

}

function zero(n) {

return String(n).padStart(2, '0');

}

DOM operations

code:script.js

function cardList() {

return document

}

/** 日記ページを取得する

*

* なければ新しく作る

*/

function getDiaryCard() {

deleteGeneratedCards();

const currentDate = new Date();

const nextSunday = new Date();

nextSunday.setDate(currentDate.getDate() + (7-currentDate.getDay())%7);

const pageTitle = toPageTitle(nextSunday);

const cards = cardList();

return cards

?.parentNode

?? createEmptyPageCard(pageTitle, path);

}

/** 日記ページが所定の位置にPin留めされているかどうかを調べる

*

* 条件

* - 最初のカードから日記ページのカードまでの間にpinなしカードが存在しない

*/

function isValidPostion() {

const card = getDiaryCard();

if (!card.classList.contains("pin")) return false;

const cards = cardList();

const length = cards.getElementsByClassName('page-list-item grid-style-item pin').length;

for (let i = 0; i < length; i++) {

}

return true;

}

function appendPin(card) {

?.insertAdjacentHTML('afterend', '<div class="pin"></div>');

card.classList.add('pin');

}

function removePin(card) {

card.classList.remove('pin');

}

/** このscriptで作成したカードを全部消す */

function deleteGeneratedCards() {

.forEach(card => card.remove());

}

function createEmptyPageCard(title, path) {

const card = document.createElement('li');

card.dataset.id = "pin-diary-card";

card.classList.add("page-list-item", "grid-style-item");

card.style.opacity = "0.7";

card.insertAdjacentHTML('beforeend',

`<a href="${path}" rel="route">

<div class="hover"></div>

<div class="content">

<div class="header">

<div class="title">${title}</div>

</div>

<div class="description">

<div class="line-img">

<div></div><div></div><div></div><div></div><div></div>

</div>

</div>

</div>

</a>`);

return card;

}

code:script.js

scrapbox.on('project:changed', () => {

//トップページからトップページに移動してもlayout:changedは呼ばれないので、ここでhandleChangeをかける

handleChange()

})