Skip to content

Commit

Permalink
perf(ref): refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@YU000jp
YU000jp committed Jan 19, 2025
1 parent d674546 commit 219037c
Show file tree
Hide file tree
Showing 6 changed files with 147 additions and 84 deletions.
106 changes: 51 additions & 55 deletions src/calendar/boundaries.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { addDays, format, isFriday, isSameDay, isSaturday, isSunday, isThursday,
import { t } from "logseq-l10n"
import { getConfigPreferredDateFormat, getConfigPreferredLanguage } from '..'
import { holidaysWorld, lunarString } from '../lib/holidays'
import { DayShortCode, colorMap, formatRelativeDate, getJournalDayDate, getWeekStartOn, getWeeklyNumberFromDate, getWeeklyNumberString, localizeDayOfWeekString, localizeMonthString, openPageFromPageName, shortDayNames, userColor } from '../lib/lib'
import { DayShortCode, addEventListenerOnce, colorMap, createElementWithClass, formatRelativeDate, getJournalDayDate, getWeekStartOn, getWeeklyNumberFromDate, getWeeklyNumberString, localizeDayOfWeekString, localizeMonthString, openPageFromPageName, shortDayNames, userColor } from '../lib/lib'


let processingFoundBoundaries: boolean = false
Expand All @@ -26,10 +26,10 @@ export const boundariesProcess = async (targetElementName: string, remove: boole
firstElement = parent.document.getElementById("journals") as HTMLDivElement
break
case "is-journals":
firstElement = parent.document.body.querySelector("div#main-content-container div.is-journals.page>div.relative") as HTMLDivElement
firstElement = parent.document.body.querySelector("#main-content-container div.is-journals.page>div.relative") as HTMLDivElement
break
case "weeklyJournal":
firstElement = parent.document.body.querySelector("div#main-content-container div.page.relative>div.relative") as HTMLDivElement
firstElement = parent.document.body.querySelector("#main-content-container div.page.relative>div.relative") as HTMLDivElement
break
default:
firstElement = null
Expand All @@ -52,12 +52,10 @@ export const boundariesProcess = async (targetElementName: string, remove: boole
weekBoundaries.id = 'weekBoundaries'
} else
weekBoundaries = parent.document.getElementById("weekBoundaries") as HTMLDivElement

} else {
weekBoundaries = document.createElement('div')
weekBoundaries.id = 'weekBoundaries'
}

firstElement.insertBefore(weekBoundaries, firstElement.firstChild)

//weekBoundariesにelementを追加する
Expand Down Expand Up @@ -85,56 +83,28 @@ export const boundariesProcess = async (targetElementName: string, remove: boole
return
}

//targetDateを週の初めにする
const startDate: Date = selectStartDate ? selectStartDate :
weekStartsOn === 1
&& logseq.settings?.weekNumberFormat === "ISO(EU) format"
? startOfISOWeek(targetDate)
: startOfWeek(targetDate, { weekStartsOn })

// 次の週を表示するかどうかの判定
const isDayThursday: boolean = isThursday(targetDate)
const isDayFriday: boolean = isFriday(targetDate)
const isDaySaturday: boolean = isSaturday(targetDate)
const flagShowNextWeek: boolean =
//日曜日始まり、木曜、金曜、土曜がtargetDateの場合
(weekStartsOn === 0 && (isDayThursday || isDayFriday || isDaySaturday))
//月曜日始まり、金曜、土曜、日曜がtargetDateの場合
|| (weekStartsOn === 1 && (isDayFriday || isDaySaturday || isSunday(targetDate)))
//土曜日始まり、水曜、木曜、金曜がtargetDateの場合
|| (weekStartsOn === 6 && (isWednesday(targetDate) || isDayThursday || isDayFriday))
? true : false
const days: number[] = flagShowNextWeek === true
? [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13] //次の週を表示する場合
: [-7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6] //次の週を表示しない場合

await daysForEach(days, startDate, boundariesInner, today, targetDate, targetElementName, flagShowNextWeek)
const flagShowNextWeek: boolean = checkIfNextWeekVisible(weekStartsOn, isThursday(targetDate), isFriday(targetDate), isSaturday(targetDate), targetDate)

await createDaysElements(
getWeekOffsetDays(flagShowNextWeek) as number[], //どの週を表示するか
selectStartDate ? //targetDateを週の初めにする
selectStartDate :
weekStartsOn === 1
&& logseq.settings?.weekNumberFormat === "ISO(EU) format"
? startOfISOWeek(targetDate)
: startOfWeek(targetDate, { weekStartsOn }),
boundariesInner,
today,
targetDate,
targetElementName,
flagShowNextWeek
)
weekBoundaries.appendChild(boundariesInner)
}
processingFoundBoundaries = false
}

/**
* Create an HTML element with specified classes.
* @param tagName The type of element to create.
* @param classNames The classes to add to the element.
* @returns The created HTML element.
*/
const createElementWithClass = (tagName: string, ...classNames: string[]): HTMLElement => {
const element = document.createElement(tagName)
element.classList.add(...classNames)
return element
}

/**
* Add an event listener to an element that will be executed only once.
* @param element The element to add the event listener to.
* @param event The event type to listen for.
* @param handler The event handler function.
*/
const addEventListenerOnce = (element: HTMLElement, event: string, handler: EventListenerOrEventListenerObject) => {
element.addEventListener(event, handler, { once: true })
}

const daySideWeekNumber = (date: Date, boundariesInner: HTMLDivElement) => {
const { year, weekString, quarter } = getWeeklyNumberFromDate(date, logseq.settings?.weekNumberFormat === "US format" ? 0 : 1) // 週番号を取得する
Expand All @@ -149,6 +119,7 @@ const daySideWeekNumber = (date: Date, boundariesInner: HTMLDivElement) => {
boundariesInner.appendChild(weekNumberElement)
}


const daySideMonth = (date: Date, boundariesInner: HTMLDivElement, monthDuplicate: Date | null): Date => {
const sideMonthElement = createElementWithClass('span', 'daySide')
//monthDuplicateが存在したら、dateの6日後を代入する
Expand All @@ -171,8 +142,8 @@ const daySideMonth = (date: Date, boundariesInner: HTMLDivElement, monthDuplicat
}


// 週のスクロール
const daySideScroll = (index: number, boundariesInner: HTMLDivElement, targetElementName: string, startDate: Date) => {
// 週の上下スクロールボタン
const weekScrollButtons = (index: number, boundariesInner: HTMLDivElement, targetElementName: string, startDate: Date) => {
const sideScrollElement = createElementWithClass('span', 'daySide', 'daySideScroll')
sideScrollElement.innerText = index === 6 ? '↑' : '↓'
sideScrollElement.title = index === 6 ? t("Previous week") : t("Next week")
Expand All @@ -186,8 +157,8 @@ const daySideScroll = (index: number, boundariesInner: HTMLDivElement, targetEle
}


// 1日ずつの処理
const daysForEach = async (days: number[], startDate: Date, boundariesInner: HTMLDivElement, today: Date, targetDate: Date, targetElementName: string, flagShowNextWeek: boolean) => {
// 1日ずつ区画を作成する
const createDaysElements = async (days: number[], startDate: Date, boundariesInner: HTMLDivElement, today: Date, targetDate: Date, targetElementName: string, flagShowNextWeek: boolean) => {
let monthDuplicate: Date | null = null
const preferredDateFormat = await getConfigPreferredDateFormat()
//ミニカレンダー作成 1日ずつ処理
Expand Down Expand Up @@ -292,12 +263,13 @@ const daysForEach = async (days: number[], startDate: Date, boundariesInner: HTM
//週番号を表示する場合
if (logseq.settings!.booleanBoundariesShowWeekNumber === true)
daySideWeekNumber(dayDate, boundariesInner)
daySideScroll(index, boundariesInner, targetElementName, startDate)
weekScrollButtons(index, boundariesInner, targetElementName, startDate)
}
}
}
}


// 日誌のページが存在するかどうかのインディケーターを表示する
const indicator = async (targetPageName: string, dayOfMonthElement: HTMLSpanElement) => {
const existsPage = await logseq.Editor.getPage(targetPageName) as { file: PageEntity["file"] } | null
Expand All @@ -308,12 +280,33 @@ const indicator = async (targetPageName: string, dayOfMonthElement: HTMLSpanElem
dayOfMonthElement.appendChild(indicatorElement)
}


// 週末の色を適用する
const applyWeekendColor = (dayCell: HTMLElement, day: DayShortCode) => {
const color = colorMap[logseq.settings!["userWeekend" + day] as string]
if (color) dayCell.style.color = color
}

// 日誌のページを開く

//次の週を表示するかどうかの判定
const checkIfNextWeekVisible = (weekStartsOn: number, isDayThursday: boolean, isDayFriday: boolean, isDaySaturday: boolean, targetDate: Date): boolean =>
//日曜日始まり、木曜、金曜、土曜がtargetDateの場合
(weekStartsOn === 0 && (isDayThursday || isDayFriday || isDaySaturday))
//月曜日始まり、金曜、土曜、日曜がtargetDateの場合
|| (weekStartsOn === 1 && (isDayFriday || isDaySaturday || isSunday(targetDate)))
//土曜日始まり、水曜、木曜、金曜がtargetDateの場合
|| (weekStartsOn === 6 && (isWednesday(targetDate) || isDayThursday || isDayFriday))
? true : false


//どの週を表示するか
const getWeekOffsetDays = (flagShowNextWeek: boolean): number[] =>
flagShowNextWeek === true ?
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13] //次の週を表示する場合
: [-7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6] //次の週を表示しない場合


// 日誌のページを開く function
export function openPageToSingleDay(pageName: string): (this: HTMLSpanElement, ev: MouseEvent) => any {
return async (event) => {
if (event.shiftKey) {//Shiftキーを押しながらクリックした場合は、サイドバーでページを開く
Expand All @@ -332,7 +325,10 @@ export function openPageToSingleDay(pageName: string): (this: HTMLSpanElement, e
logseq.App.pushState('page', { name: pageName })//ページが存在しない場合も作成される
}
}


export const removeBoundaries = () => {
const weekBoundaries = parent.document.getElementById("weekBoundaries") as HTMLDivElement | null
if (weekBoundaries) weekBoundaries.remove()
}

4 changes: 2 additions & 2 deletions src/dailyJournalDetails.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { addDays, format, getWeekOfMonth, isSaturday, isSunday, subDays } from "date-fns"
import { t } from "logseq-l10n"
import { HolidayUtil, Lunar } from "lunar-typescript"
import { getConfigPreferredDateFormat, getConfigPreferredLanguage, querySelectorAllTitle } from "."
import { getConfigPreferredDateFormat, getConfigPreferredLanguage, fetchJournalTitles } from "."
import { exportHolidaysBundle } from "./lib/holidays"
import { createLinkMonthlyLink, createSettingButton, formatRelativeDate, getDayOfWeekName, getQuarter, getRelativeTimeHtml, getWeeklyNumberFromDate, getWeeklyNumberString, getWeekNumberHtml, localizeMonthString, openPageFromPageName, userColor } from "./lib/lib"

Expand Down Expand Up @@ -213,7 +213,7 @@ export const removeTitleQuery = () => {
// observer
export const observer = new MutationObserver(async (): Promise<void> => {
observer.disconnect()
await querySelectorAllTitle(logseq.settings!.booleanBesideJournalTitle as boolean)
await fetchJournalTitles(logseq.settings!.booleanBesideJournalTitle as boolean)
setTimeout(() => observerMain(), 800)
})

Expand Down
34 changes: 18 additions & 16 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,9 +122,9 @@ const main = async () => {

if (logseq.settings!.booleanBoundariesAll === true
&& logseq.settings!.booleanJournalsBoundaries === true)
boundaries("journals")
invokeBoundaryHandler("journals")

querySelectorAllTitle(logseq.settings!.booleanBesideJournalTitle as boolean)
fetchJournalTitles(logseq.settings!.booleanBesideJournalTitle as boolean)

setTimeout(() => observerMain(), 1800) //スクロール用
}, 200)
Expand All @@ -141,22 +141,22 @@ const main = async () => {
&& template === "/page/:name")
//page only
//div.is-journals
setTimeout(() => boundaries("is-journals"), 20)
setTimeout(() => invokeBoundaryHandler("is-journals"), 20)
else
if (logseq.settings!.booleanJournalsBoundaries === true
&& template === "/")
//journals only
//div#journals
setTimeout(() => boundaries("journals"), 20)
setTimeout(() => invokeBoundaryHandler("journals"), 20)

setTimeout(() => querySelectorAllTitle(logseq.settings!.booleanBesideJournalTitle as boolean), 50)
setTimeout(() => fetchJournalTitles(logseq.settings!.booleanBesideJournalTitle as boolean), 50)
})

logseq.App.onPageHeadActionsSlotted(() => {
if (processingCheck) return
processingCheck = true
setTimeout(() => processingCheck = false, 80) //処理ロックの解除
setTimeout(() => querySelectorAllTitle(logseq.settings!.booleanBesideJournalTitle as boolean), 50)
setTimeout(() => fetchJournalTitles(logseq.settings!.booleanBesideJournalTitle as boolean), 50)
})


Expand All @@ -170,11 +170,11 @@ const main = async () => {
if ((await logseq.Editor.getCurrentPage() as { id: EntityID } | null) !== null)
//page only
//div.is-journals
setTimeout(() => boundaries("is-journals"), 10)
setTimeout(() => invokeBoundaryHandler("is-journals"), 10)
else
//journals only
//div#journals
setTimeout(() => boundaries("journals"), 10)
setTimeout(() => invokeBoundaryHandler("journals"), 10)
}
})

Expand All @@ -183,7 +183,7 @@ const main = async () => {
logseq.App.onSidebarVisibleChanged(({ visible }) => {
if (visible === true)
setTimeout(() =>
querySelectorAllTitle(logseq.settings!.booleanBesideJournalTitle as boolean), 100)
fetchJournalTitles(logseq.settings!.booleanBesideJournalTitle as boolean), 100)
})


Expand Down Expand Up @@ -236,14 +236,15 @@ const main = async () => {
// クエリーセレクターでタイトルを取得する
let processingTitleQuery: boolean = false

export const querySelectorAllTitle = async (enable: boolean): Promise<void> => {
// Journal Titlesが変化したときに実行
export const fetchJournalTitles = async (enable: boolean): Promise<void> => {
if (processingTitleQuery) return
processingTitleQuery = true
try {
setTimeout(() => processingTitleQuery = false, 300) //boundaries 実行ロックの解除
//Journalsの場合は複数
parent.document.body.querySelectorAll("div#main-content-container div:is(.journal,.is-journals,.page) h1.title:not([data-checked])")
.forEach(async (titleElement) => await checkJournalTitle(titleElement as HTMLElement))
.forEach(async (titleElement) => await validateJournalTitle(titleElement as HTMLElement))
} finally {
processingTitleQuery = false // 確実にフラグを解除
}
Expand All @@ -253,7 +254,7 @@ export const querySelectorAllTitle = async (enable: boolean): Promise<void> => {
// Journal Titleの処理
let processingJournalTitlePage: Boolean = false

const checkJournalTitle = async (titleElement: HTMLElement) => {
const validateJournalTitle = async (titleElement: HTMLElement) => {
if (!titleElement.textContent
|| processingJournalTitlePage === true
|| titleElement.nextElementSibling?.className === "showWeekday") return // check if element already has date info
Expand All @@ -275,7 +276,7 @@ const checkJournalTitle = async (titleElement: HTMLElement) => {
&& title.match(/^(\d{4})/) !== null // titleの先頭が2024から始まる場合のみチェックする
) {
let match: RegExpMatchArray | null = null
if (match = await (async () => {
if (match = await (() => {
switch (logseq.settings!.weekNumberOptions) {
case "YYYY-Www":
return title.match(/^(\d{4})-[wW](\d{2})$/) // "YYYY-Www"
Expand Down Expand Up @@ -318,7 +319,7 @@ const checkJournalTitle = async (titleElement: HTMLElement) => {
// titleElementのクラスにjournal-titleまたはtitleが含まれている場合
&& (titleElement.classList.contains("journal-title") === true
|| titleElement.classList.contains("title") === true))
moveTitleElement(titleElement) //titleElementの後ろにdateInfoElementを追加し、スペース確保しておく
moveForPageTitleElement(titleElement) //titleElementの後ろにdateInfoElementを追加し、スペース確保しておく
else {
// Daily Journal Detailsの処理
setTimeout(async () => { // 遅延処理
Expand All @@ -342,7 +343,8 @@ const checkJournalTitle = async (titleElement: HTMLElement) => {
//boundaries 実行ロックのため
let processingBoundaries: boolean = false

export const boundaries = (targetElementName: string, remove?: boolean) => {
// Boundaries(2行カレンダー)を呼び出す
export const invokeBoundaryHandler = (targetElementName: string, remove?: boolean) => {
if (processingBoundaries) return
processingBoundaries = true
try {
Expand All @@ -354,7 +356,7 @@ export const boundaries = (targetElementName: string, remove?: boolean) => {



const moveTitleElement = (titleElement: HTMLElement) => {
const moveForPageTitleElement = (titleElement: HTMLElement) => {
const dateInfoElement: HTMLSpanElement = document.createElement("span")
dateInfoElement.classList.add("showWeekday")
titleElement.insertAdjacentElement("afterend", dateInfoElement)
Expand Down
15 changes: 15 additions & 0 deletions src/journals/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,5 +50,20 @@ export const journalInsertTemplate = async (uuid: string, templateName: string,
else
logseq.UI.showMsg(`Template "${templateName}" does not exist.`, 'warning', { timeout: 2000 })
}
export const clearEleAll = (selector: string) => {
const ele = parent.document.body.querySelectorAll(selector) as NodeListOf<HTMLElement>
ele.forEach((e) => e.remove())
}

export const clearEle = (selector: string) => {
const ele = parent.document.getElementById(selector) as HTMLElement | null
if (ele) ele.remove()
}

export const hideMainContent = (selector: string) => {
const ele = parent.document.querySelector(selector) as HTMLElement
if (ele)
ele.style.display = "none"
}


Loading

0 comments on commit 219037c

Please sign in to comment.