From d884f146b3c6b21d9547a65f0d13c9c46914c254 Mon Sep 17 00:00:00 2001 From: pr3cast Date: Fri, 18 Mar 2022 21:46:01 -0400 Subject: [PATCH 1/4] Fix weekly-view view targeting for new Notion databases --- repo/weekly-view/client.mjs | 36 ++++++++++++++++++++++++------------ 1 file changed, 24 insertions(+), 12 deletions(-) diff --git a/repo/weekly-view/client.mjs b/repo/weekly-view/client.mjs index 74a71c7..62ccb14 100644 --- a/repo/weekly-view/client.mjs +++ b/repo/weekly-view/client.mjs @@ -4,39 +4,51 @@ * (https://notion-enhancer.github.io/) under the MIT license */ -'use strict'; +"use strict"; export default async function ({ web }, db) { - const pageSelector = '.notion-page-content', - calendarSelector = '.notion-calendar-view', - viewSelector = '.notion-collection-view-select:not([data-weekly-view])', + const pageSelector = ".notion-page-content", + calendarSelector = ".notion-calendar-view", + collectionSelector = + ".notion-page-content > .notion-selectable.notion-collection_view-block", + viewSelector = ":scope>div>div>div>div>div", todaySelector = '.notion-calendar-view-day[style*="background"]', weekSelector = '[style^="position: relative; display: flex; height: "]', toolbarBtnSelector = - '.notion-calendar-view > :first-child > :first-child > :first-child > :nth-last-child(2)'; + ".notion-calendar-view > :first-child > :first-child > :first-child > :nth-last-child(2)"; const transformCalendarView = () => { const $page = document.querySelector(pageSelector); - document.querySelectorAll(viewSelector).forEach(async ($view) => { - if ($view.innerText.toLowerCase() !== 'weekly') return; - const $calendar = $view.parentElement.parentElement.parentElement.parentElement; + document.querySelectorAll(collectionSelector).forEach(async ($view) => { + + const currentText = [].slice.call($view.querySelector(viewSelector).children).filter((e) => e.children[0].style.borderBottomWidth.toString() === "2px" )[0].innerText.toLowerCase(); + + if (currentText !== "weekly") + return; + + const $calendar = + $view.parentElement.parentElement.parentElement.parentElement; if (!$calendar.querySelector(todaySelector)) { $calendar.querySelector(toolbarBtnSelector).click(); } await new Promise((res, rej) => requestAnimationFrame(res)); if ($page) { for (const $week of $calendar.querySelectorAll(weekSelector)) { - if (!$week.querySelector(todaySelector)) $week.style.height = '0'; + if (!$week.querySelector(todaySelector)) { + $week.style.height = "0"; + $week.style.display = "none"; + } } } else { - const $weekContainer = $calendar.querySelector(weekSelector).parentElement; + const $weekContainer = + $calendar.querySelector(weekSelector).parentElement; for (const $week of $calendar.querySelectorAll(weekSelector)) { if ($week.querySelector(todaySelector)) { $weekContainer.style.maxHeight = $week.style.height; break; } else { - $week.style.height = '0'; - $week.style.opacity = '0'; + $week.style.height = "0"; + $week.style.opacity = "0"; } } } From 58d3030bf57ee873c57b1964d617d91d0af58a7b Mon Sep 17 00:00:00 2001 From: pr3cast Date: Mon, 21 Mar 2022 14:38:44 -0400 Subject: [PATCH 2/4] Clean up and comment new weekly-view client code --- repo/weekly-view/client.mjs | 47 ++++++++++++++++++++++++------------- 1 file changed, 31 insertions(+), 16 deletions(-) diff --git a/repo/weekly-view/client.mjs b/repo/weekly-view/client.mjs index 62ccb14..452e7af 100644 --- a/repo/weekly-view/client.mjs +++ b/repo/weekly-view/client.mjs @@ -4,26 +4,43 @@ * (https://notion-enhancer.github.io/) under the MIT license */ -"use strict"; +'use strict'; export default async function ({ web }, db) { - const pageSelector = ".notion-page-content", - calendarSelector = ".notion-calendar-view", + const pageSelector = '.notion-page-content', + calendarSelector = '.notion-calendar-view', collectionSelector = - ".notion-page-content > .notion-selectable.notion-collection_view-block", - viewSelector = ":scope>div>div>div>div>div", + '.notion-page-content > .notion-selectable.notion-collection_view-block', + viewSelector = ':scope>div>div>div>div>div', todaySelector = '.notion-calendar-view-day[style*="background"]', weekSelector = '[style^="position: relative; display: flex; height: "]', toolbarBtnSelector = - ".notion-calendar-view > :first-child > :first-child > :first-child > :nth-last-child(2)"; + '.notion-calendar-view > :first-child > :first-child > :first-child > :nth-last-child(2)'; const transformCalendarView = () => { const $page = document.querySelector(pageSelector); - document.querySelectorAll(collectionSelector).forEach(async ($view) => { + document.querySelectorAll(collectionSelector).forEach(async ($view) => { // Get view controls children nodes, convert to array, filter out non-text + const viewNodes = [] + .slice.call($view.querySelector(viewSelector).children) + .filter(node => node.tagName.toLowerCase().match(/(div|span)/g)); + let currentText; - const currentText = [].slice.call($view.querySelector(viewSelector).children).filter((e) => e.children[0].style.borderBottomWidth.toString() === "2px" )[0].innerText.toLowerCase(); - - if (currentText !== "weekly") + // Find current view by analyzing children (which changes on viewport) + if (viewNodes.length === 1) + { + // Mobile: Simple dropdown button (like legacy), text is current view + currentText = viewNodes[0].innerText.toLowerCase(); + } else { + // Wide/Desktop: Tabs listed, current view indicated by border style + currentText = viewNodes + // Find selected view by border style (possibly fragile) + .filter((e) => e.children[0].style.borderBottomWidth.toString() === '2px' )[0] + // Format + .innerText.toLowerCase(); + } + + // Check if view is weekly + if (currentText !== 'weekly') return; const $calendar = @@ -34,10 +51,8 @@ export default async function ({ web }, db) { await new Promise((res, rej) => requestAnimationFrame(res)); if ($page) { for (const $week of $calendar.querySelectorAll(weekSelector)) { - if (!$week.querySelector(todaySelector)) { - $week.style.height = "0"; - $week.style.display = "none"; - } + if (!$week.querySelector(todaySelector)) + $week.style.visibility = 'hidden'; } } else { const $weekContainer = @@ -47,8 +62,8 @@ export default async function ({ web }, db) { $weekContainer.style.maxHeight = $week.style.height; break; } else { - $week.style.height = "0"; - $week.style.opacity = "0"; + $week.style.height = '0'; + $week.style.opacity = '0'; } } } From b921a2f86a3199a92eaef3f020477134109dbc4f Mon Sep 17 00:00:00 2001 From: pr3cast Date: Mon, 21 Mar 2022 15:06:40 -0400 Subject: [PATCH 3/4] Fix code consistentcy in weekly-view client --- repo/weekly-view/client.mjs | 36 +++++++++++++++++------------------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/repo/weekly-view/client.mjs b/repo/weekly-view/client.mjs index 452e7af..7b1afd4 100644 --- a/repo/weekly-view/client.mjs +++ b/repo/weekly-view/client.mjs @@ -9,21 +9,22 @@ export default async function ({ web }, db) { const pageSelector = '.notion-page-content', calendarSelector = '.notion-calendar-view', - collectionSelector = - '.notion-page-content > .notion-selectable.notion-collection_view-block', - viewSelector = ':scope>div>div>div>div>div', + viewSelector = + '.notion-page-content > .notion-selectable.notion-collection_view-block', + viewControlSelector = ':scope>div>div>div>div>div', todaySelector = '.notion-calendar-view-day[style*="background"]', weekSelector = '[style^="position: relative; display: flex; height: "]', toolbarBtnSelector = - '.notion-calendar-view > :first-child > :first-child > :first-child > :nth-last-child(2)'; + '.notion-calendar-view > :first-child > :first-child > :first-child > :nth-last-child(2)'; const transformCalendarView = () => { const $page = document.querySelector(pageSelector); - document.querySelectorAll(collectionSelector).forEach(async ($view) => { // Get view controls children nodes, convert to array, filter out non-text + document.querySelectorAll(viewSelector).forEach(async ($view) => { + let currentText; + // Get view controls children nodes, convert to array, filter out non-text const viewNodes = [] - .slice.call($view.querySelector(viewSelector).children) + .slice.call($view.querySelector(viewControlSelector).children) .filter(node => node.tagName.toLowerCase().match(/(div|span)/g)); - let currentText; // Find current view by analyzing children (which changes on viewport) if (viewNodes.length === 1) @@ -34,36 +35,33 @@ export default async function ({ web }, db) { // Wide/Desktop: Tabs listed, current view indicated by border style currentText = viewNodes // Find selected view by border style (possibly fragile) - .filter((e) => e.children[0].style.borderBottomWidth.toString() === '2px' )[0] - // Format + .filter((e) => e.children[0].style.borderBottomWidth.toString() === '2px')[0] .innerText.toLowerCase(); } - - // Check if view is weekly - if (currentText !== 'weekly') - return; + + if (currentText !== 'weekly') return; - const $calendar = - $view.parentElement.parentElement.parentElement.parentElement; + const $calendar = $view.parentElement.parentElement.parentElement.parentElement; if (!$calendar.querySelector(todaySelector)) { $calendar.querySelector(toolbarBtnSelector).click(); } await new Promise((res, rej) => requestAnimationFrame(res)); if ($page) { for (const $week of $calendar.querySelectorAll(weekSelector)) { - if (!$week.querySelector(todaySelector)) + if (!$week.querySelector(todaySelector)) { + $week.style.height = 0; $week.style.visibility = 'hidden'; + } } } else { - const $weekContainer = - $calendar.querySelector(weekSelector).parentElement; + const $weekContainer = $calendar.querySelector(weekSelector).parentElement; for (const $week of $calendar.querySelectorAll(weekSelector)) { if ($week.querySelector(todaySelector)) { $weekContainer.style.maxHeight = $week.style.height; break; } else { $week.style.height = '0'; - $week.style.opacity = '0'; + $week.style.visibility = 'hidden'; } } } From fbc9709b66e1d3fb6a24cb40dcbcfc4297f356d9 Mon Sep 17 00:00:00 2001 From: pr3cast Date: Mon, 21 Mar 2022 15:18:25 -0400 Subject: [PATCH 4/4] Fix more code consistency in weekly-view --- repo/weekly-view/client.mjs | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/repo/weekly-view/client.mjs b/repo/weekly-view/client.mjs index 7b1afd4..426f5ba 100644 --- a/repo/weekly-view/client.mjs +++ b/repo/weekly-view/client.mjs @@ -22,20 +22,20 @@ export default async function ({ web }, db) { document.querySelectorAll(viewSelector).forEach(async ($view) => { let currentText; // Get view controls children nodes, convert to array, filter out non-text - const viewNodes = [] + const $viewNodes = [] .slice.call($view.querySelector(viewControlSelector).children) .filter(node => node.tagName.toLowerCase().match(/(div|span)/g)); // Find current view by analyzing children (which changes on viewport) - if (viewNodes.length === 1) + if ($viewNodes.length === 1) { // Mobile: Simple dropdown button (like legacy), text is current view - currentText = viewNodes[0].innerText.toLowerCase(); + currentText = $viewNodes[0].innerText.toLowerCase(); } else { // Wide/Desktop: Tabs listed, current view indicated by border style - currentText = viewNodes + currentText = $viewNodes // Find selected view by border style (possibly fragile) - .filter((e) => e.children[0].style.borderBottomWidth.toString() === '2px')[0] + .filter(($e) => $e.children[0].style.borderBottomWidth.toString() === '2px')[0] .innerText.toLowerCase(); }