pin-diary-3

Translated and paraphrased version:

/villagepump/pin-diary-3 borrowed from 20210910

• Modifications:
  • Instead of pinning the diary page, pin the weekly page.
• 20230513
  • Discontinued, migrated to pin-diary-6-weekly.

---

code

• global variables script.js

const targetProject = 'blu3mo';
let updateTimer;

• main code script.js

const handleChange = () => {
	console.log("handleChange");
	if (scrapbox.Layout === "list" && scrapbox.Project.name === targetProject) {
		startObserve();
	} else {
		endObserve();
	}
}
 
// initialize
handleChange();
scrapbox.addListener("layout:changed", () => handleChange());

• Change the date page to Pin Page. script.js

function pinDiary() {
  console.log("pin1");
  if (scrapbox.Layout !== "list") return;
  if (isValidPostion()) return;
  
  const diaryCard = getDiaryCard();
  
  // Reset pinning temporarily
  removePin(diaryCard);
  
  const cards = cardList();
  // Number of pinned cards
  // Get the count before pinning to the date page
  const pins = cards
    .getElementsByClassName('page-list-item grid-style-item pin')
    .length; 
  
  // Add pinning to the DOM
  appendPin(diaryCard);
  // Move the date page to always be before the non-pinned pages
  cards.insertBefore(diaryCard, cards.children[pins]);
}
 

• Monitor updates to the page list script.js

function startObserve() {
  endObserve();
  console.log("pin0");
  updateTimer = setInterval(pinDiary, 1000);
}
function endObserve() {
  clearInterval(updateTimer);
}

utilities script.js

function toPageTitle(date) {
  return `~${date.getFullYear()}${zero(date.getMonth() + 1)}${zero(date.getDate())}`;
}
function zero(n) {
  return String(n).padStart(2, '0');
}

DOM operations script.js

function cardList() {
  return document
    .getElementsByClassName('page-list')?.[0]
    ?.getElementsByClassName('grid')?.[0]; 
}
 
/** Get the diary page
 *
 * Create a new one if it doesn't exist
 */
function getDiaryCard() {
  deleteGeneratedCards();
  const currentDate = new Date();
  const nextSunday = new Date();
  nextSunday.setDate(currentDate.getDate() + (7-currentDate.getDay())%7);
  const pageTitle = toPageTitle(nextSunday);
  const path = `/${targetProject}/${encodeURIComponent(pageTitle)}`;
  const cards = cardList();
  
  return cards
    .querySelector(`li.page-list-item a[href="${path}"]`)
    ?.parentNode
    ?? createEmptyPageCard(pageTitle, path);
}
 
/** Check if the diary page is pinned in the correct position
 *
 * Conditions:
 * - It has the `.pin` class
 * - There are no non-pinned cards between the first card and the diary page card
 */
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++) {
    if (!cards.children[i].classList.contains("pin")) return false;
  }
  return true;
}
 
function appendPin(card) {
  card.getElementsByClassName('hover')?.[0]
    ?.insertAdjacentHTML('afterend', '<div class="pin"></div>');
  card.classList.add('pin');
}
function removePin(card) {
  card.getElementsByClassName('pin')?.[0]?.remove();
  card.classList.remove('pin');
}
 
/** Delete all cards created by this script */
function deleteGeneratedCards() {
  document.querySelectorAll('li[data-id="pin-diary-card"]')
    .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;
}

/shokai/Perform post-processing of UserScript when moving to another project (event version) script.js

scrapbox.on('project:changed', () => {
	// Even if you move from the top page to the top page, layout:changed is not called, so call handleChange here
	handleChange()
})