diff --git a/README.md b/README.md index 74b6b71..d56840b 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ or a built-in feature like [userChrome.css](https://www.userchrome.org/).) 8. optional: modify the `resources/user.css` files to your liking. 9. run `customiser.py` to build changes. -done: run notion and enjoy +done: run notion and enjoy. **oh no, now my app won't open!** @@ -77,7 +77,7 @@ to add these to the web version, copy lines 43 - 87 from `user.css` into your cs - **close to tray**: close window to tray rather than closing outright on click of `⨉`. does not apply if multiple notion windows are open. (default: false) -## styling +### styling due to `customiser.py` setting up a direct link to `resources/user.css`, changes will be applied instantly on notion reload @@ -230,3 +230,12 @@ as it is a per-table-column style, unlike all others here, it must be prepended padding-right: 10px !important; } ``` + +## other details + +i have an unhealthy habit of avoiding capital letters. nothing enforces this, i just do it. + +the notion logo belongs entirely to the notion team, and was sourced from their +[media kit](https://www.notion.so/Media-Kit-205535b1d9c4440497a3d7a2ac096286). + +if you have any questions, check [my website](https://dragonwocky.me/) for contact details. diff --git a/docs/changelog.html b/docs/changelog.html index 13c4fa0..1acf436 100644 --- a/docs/changelog.html +++ b/docs/changelog.html @@ -1,15 +1,15 @@ changelog | notion enhancer

notion enhancer

-
-

+
+

changelog

if something is crossed out, then it is no longer a feature included by default, but can still easily be enabled by following instructions in the docs.

-
-

+
+

v0.5.0 (wip)

    @@ -24,8 +24,8 @@ improved: scrollbar colours that fit better with notion's theming.

    (forked by @dragonwocky.)

-
-

+
+

v0.4.1 (2020-02-13)

    @@ -36,8 +36,8 @@ improved: scrollbar colours that fit better with notion's theming.
-
-

+
+

v0.4.0

    @@ -50,8 +50,8 @@ improved: scrollbar colours that fit better with notion's theming.
-
-

+
+

v0.3.0

    @@ -64,8 +64,8 @@ improved: scrollbar colours that fit better with notion's theming.
-
-

+
+

v0.2.0

    @@ -75,8 +75,8 @@ improved: scrollbar colours that fit better with notion's theming.
-
-

+
+

v0.1.0

    diff --git a/docs/docs.js b/docs/docs.js index 48374c4..10f5650 100644 --- a/docs/docs.js +++ b/docs/docs.js @@ -1,5 +1,5 @@ /* - * Documentative Scripts + * Documentative * (c) 2020 dragonwocky * (https://dragonwocky.me/) under the MIT license */ @@ -16,125 +16,109 @@ class Scrollnav { throw Error('scrollnav: only 1 instance per page allowed!'); Scrollnav.prototype.INITIATED = true; + this.ID; + this.ticking = []; this._menu = menu; this._content = content; - this._sections = [...this._menu.querySelectorAll('ul li a')] - .map(el => { - try { - return this._content.querySelector(el.getAttribute('href')) - .parentElement; - } catch { - return null; - } - }) - .filter(el => el); - this._topheading = this._sections[0].children[0]; + this._links = []; + this._sections = [...this._menu.querySelectorAll('ul li a')].reduce( + (list, link) => { + if (!link.getAttribute('href').startsWith('#')) return list; + let section = this._content.querySelector(link.getAttribute('href')); + if (!section) return list; - this._scrolling = []; - this.build(); - } - async build() { - this._content.addEventListener('scroll', this.scrollwatcher.bind(this)); - - window.onhashchange = this.hashwatcher.bind(this); - [...this._menu.querySelectorAll('ul li a')] - .filter(el => el.getAttribute('href').startsWith('#')) - .forEach(el => { - el.onclick = async ev => { + this._links.push(link); + link.onclick = async ev => { ev.preventDefault(); - this.set(el.getAttribute('href')); - this.scroll(() => { - let offset = this._content.querySelector(el.getAttribute('href')) - .parentElement.offsetTop; - if (offset < this._content.clientHeight / 2) offset = 0; - this._content.scroll({ - top: offset, - behavior: 'smooth' - }); - }); + const ID = link.getAttribute('href'); + this.highlightHeading(ID); + this.scrollContent(ID); + this.setHash(ID); }; - }); - this.set(); - this.showmenu(); - await this.scroll(() => { - const ID = location.hash || '#' + this._topheading.id; - try { - this._content.querySelector(ID).parentElement.scrollIntoView(true); - } catch { - location.hash = ''; + return [...list, section]; + }, + [] + ); + this._topheading = `#${this._sections[0].id}`; + + window.onhashchange = this.watchHash.bind(this); + this._content.addEventListener('scroll', ev => { + if (!this.ticking.length) { + this.ticking.push(1); + requestAnimationFrame(() => { + this.watchScroll(ev); + this.ticking.pop(); + }); } }); + + this.set(null, false); + return this; } - set(ID) { - if (!ID || typeof ID !== 'string') - ID = location.hash || this._topheading.id; - if (!ID.startsWith('#')) ID = '#' + ID; - if (!this._menu.querySelector(`[href="${ID}"]`)) - ID = '#' + this._topheading.id; - clearTimeout(this.hashloc); - this.hashloc = setTimeout(() => { - this._menu - .querySelectorAll('ul li a') - .forEach(el => - el.getAttribute('href') === ID - ? el.classList.add('active') - : el.classList.remove('active') - ); - if (history.replaceState) { - history.replaceState( - null, - null, - ID === '#' + this._topheading.id ? '#' : ID - ); - if (ID === '#' + this._topheading.id) - this._content.scroll({ - top: 0, - behavior: 'smooth' - }); - } else this._content.querySelector(ID).parentElement.scrollIntoView(true); - }, 100); + set(ID, smooth) { + this.highlightHeading(ID); + this.scrollMenu(ID, smooth); + this.scrollContent(ID, smooth); + this.setHash(ID); } - scroll(func) { - return new Promise((resolve, reject) => { - try { - this._scrolling.push(true); - func(); - setTimeout(() => { - this._scrolling.pop(); - resolve(true); - }, 750); - } catch (err) { - reject(err); - } + + parseID(ID) { + if (!ID || typeof ID !== 'string') ID = location.hash || this._topheading; + if (!ID.startsWith('#')) ID = `#${ID}`; + if (!this._links.find(el => el.getAttribute('href') === ID)) + ID = this._topheading; + this.ID = ID; + return ID; + } + highlightHeading(ID) { + this.parseID(ID); + this._links.forEach(el => + el.getAttribute('href') === this.ID + ? el.classList.add('active') + : el.classList.remove('active') + ); + return true; + } + + watchHash(ev) { + ev.preventDefault(); + if (ev.newURL !== ev.oldURL) { + this.set(); + } + } + setHash(ID) { + if (!history.replaceState) return false; + this.parseID(ID); + history.replaceState(null, null, ID === this._topheading ? '#' : this.ID); + return true; + } + + scrollContent(ID, smooth = true) { + this.ticking.push(1); + this.parseID(ID); + let offset = this._sections.find(el => `#${el.id}` === this.ID).offsetTop; + if (offset < this._content.clientHeight / 2) offset = 0; + this._content.scroll({ + top: offset, + behavior: smooth ? 'smooth' : 'auto' }); + setTimeout(() => this.ticking.pop(), 1000); + return true; } - showmenu(ID) { - if (!ID || typeof ID !== 'string') - ID = location.hash || this._topheading.id; - if (!ID.startsWith('#')) ID = '#' + ID; - if (!this._menu.querySelector(`[href="${ID}"]`)) - ID = '#' + this._topheading.id; - let offset = this._menu.querySelector(`[href="${ID}"]`).parentElement + scrollMenu(ID, smooth = true) { + this.parseID(ID); + let offset = this._links.find(el => el.getAttribute('href') === this.ID) .offsetTop; if (offset < this._menu.clientHeight / 2) offset = 0; - clearTimeout(this.menupos); this._menu.scroll({ top: offset, - behavior: 'smooth' + behavior: smooth ? 'smooth' : 'auto' }); + return true; } - - hashwatcher(ev) { - ev.preventDefault(); - if (ev.newURL === ev.oldURL) return; - this.set(); - this.showmenu(); - } - - scrollwatcher() { - if (this._scrolling.length) return; + watchScroll(ev) { const viewport = this._content.clientHeight, ID = this._sections.reduce( (carry, el) => { @@ -159,17 +143,25 @@ class Scrollnav { return pixels > carry[0] ? [pixels, el] : carry; }, [0, null] - )[1].children[0].id; - - this.set(ID); - this.showmenu(ID); + )[1].id; + this.ID = ID; + this.scrollMenu(this.ID); + clearTimeout(this.afterScroll); + this.afterScroll = setTimeout( + () => void (this.highlightHeading(this.ID) && this.setHash(this.ID)), + 100 + ); } } +let constructed = false; const construct = () => { + if (document.readyState !== 'complete' || constructed) return false; + constructed = true; + if ( location.pathname.endsWith('index.html') && - window.location.protocol !== 'file:' + window.location.protocol === 'https:' ) location.replace('./' + location.hash); @@ -197,6 +189,5 @@ const construct = () => { } }; -if (document.readyState === 'complete') { - construct(); -} else document.addEventListener('DOMContentLoaded', construct); +construct(); +document.addEventListener('readystatechange', construct); diff --git a/docs/index.html b/docs/index.html index 73c5939..b7930c6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,14 +1,14 @@ -notion enhancer

    notion enhancer

    +notion enhancer

    notion enhancer

    -
    -

    +
    +

    notion enhancer

    an enhancer/customiser for the all-in-one productivity workspace notion.so

    -
    -

    +
    +

    installation

    currently, only win10 is supported. it is possible to run this script via the wsl to modify the win10 notion app.

    @@ -27,7 +27,7 @@ even if you are running the script from the wsl).
  • optional: modify the resources/user.css files to your liking.
  • run customiser.py to build changes.
    • -

    done: run notion and enjoy

    +

    done: run notion and enjoy.

    oh no, now my app won't open!

    1. kill any notion tasks in the task manager (ctrl+shift+esc).
      2. @@ -37,8 +37,8 @@ even if you are running the script from the wsl).
    -
    -

    +
    +

    this is a fork

    credit where credit is due, this was originally made by Uzver (github: @TarasokUA, @@ -46,14 +46,14 @@ telegram: UserFromUkraine, discord: U

    he has approved my go-ahead with this fork, as he himself no longer wishes to continue development on the project.

    -
    -

    +
    +

    features

    -
    -

    +
    +

    titlebar

    default windows titlebar/frame has been replaced by one more fitting to the theme of the app.

    @@ -65,8 +65,8 @@ find the relevant button (read the comments) and replace its icon with your chos replacing element.innerHTML = '▢'; with element.innerHTML = '🙄';).

    -
    -

    +
    +

    nicer scrollbars

    i mean, yeah. get rid of those ugly default scrollbars and use nice inconspicuous @@ -74,8 +74,8 @@ ones that actually look as if they're part of notion.

    to add these to the web version, copy lines 43 - 87 from user.css into your css customiser.

    -
    -

    +
    +

    hotkeys

      @@ -89,8 +89,8 @@ to your preference. you will need to run or re-run customiser.py af
    -
    -

    +
    +

    tray

      @@ -104,10 +104,10 @@ on click of ⨉. does not apply if multiple notion windows are open
    -
    -

    +
    +

    styling -

    +

    due to customiser.py setting up a direct link to resources/user.css, changes will be applied instantly on notion reload (no need to re-run customiser.py every time you want to change some styles).

    @@ -116,8 +116,8 @@ changes will be applied instantly on notion reload (e.g. the '+ new' table row) it is recommended that you prepend each selector with [data-block-id='ID'] (video tutorial on fetching IDs).

    -
    -

    +
    +

    wider page view 

    .notion-peek-renderer > div:nth-child(2) {
@@ -125,8 +125,8 @@ changes will be applied instantly on notion reload
 }
    -
    -

    +
    +

    thinner cover image 

    [style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;'] {
@@ -138,8 +138,8 @@ changes will be applied instantly on notion reload
 }
    -
    -

    +
    +

    table columns below 100px

    not recommended! this is unreliable and will cause bugs. @@ -163,8 +163,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended }

    -
    -

    +
    +

    hide '+ new' table row 

    .notion-table-view-add-row {
@@ -172,8 +172,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
 }
    -
    -

    +
    +

    hide calculations table row 

    .notion-table-view-add-row + div {
@@ -181,8 +181,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
 }
    -
    -

    +
    +

    hide '+ new' board row 

    .notion-board-group
@@ -191,8 +191,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
 }
    -
    -

    +
    +

    hide board view hidden columns 

    .notion-board-view > [data-block-id] > div:nth-last-child(2),
@@ -201,8 +201,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
 }
    -
    -

    +
    +

    hide board view 'add a group' 

    .notion-board-view > [data-block-id] > div:last-child,
@@ -211,8 +211,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
 }
    -
    -

    +
    +

    centre-align table column headers 

    .notion-table-view-header-cell > div > div {
@@ -220,8 +220,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
 }
    -
    -

    +
    +

    smaller table column header icons 

    [style^='display: flex; position: absolute; background: rgb(47, 52, 55); z-index: 82; height: 33px; color: rgba(255, 255, 255, 0.6);']
@@ -233,8 +233,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
 }
    -
    -

    +
    +

    remove icons from table column headers 

    .notion-table-view-header-cell [style^='margin-right: 6px;'] {
@@ -242,8 +242,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
 }
    -
    -

    +
    +

    removing/decreasing side padding for tables 

    [style^='flex-shrink: 0; flex-grow: 1; width: 100%; max-width: 100%; display: flex; align-items: center; flex-direction: column; font-size: 16px; color: rgba(255, 255, 255, 0.9); padding: 0px 96px 30vh;']
@@ -261,8 +261,8 @@ as it is a per-table-column style, unlike all others here, it must be prepended
 }
    -
    -

    +
    +

    removing/decreasing side padding for boards 

    .notion-board-view {
@@ -270,5 +270,15 @@ as it is a per-table-column style, unlike all others here, it must be prepended
   padding-right: 10px !important;
 }
    +
    +
    +

    + other details +

    +

    i have an unhealthy habit of avoiding capital letters. nothing enforces this, i just do it.

    +

    the notion logo belongs entirely to the notion team, and was sourced from their +media kit.

    +

    if you have any questions, check my website for contact details.

    +

    \ No newline at end of file