Notion extension script - enhance notion

index.js

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.notion.so/*
// @grant        none
// @require http://code.jquery.com/jquery-2.2.4.min.js
// ==/UserScript==

(function() {
    'use strict';

    // https://gist.github.com/PizzaBrandon/5709010
    (function(e,f){var b={},g=function(a){b[a]&&(f.clearInterval(b[a]),b[a]=null)};e.fn.waitUntilExists=function(a,h,j){var c=this.selector,d=e(c),k=d.not(function(){return e(this).data("waitUntilExists.found")});"remove"===a?g(c):(k.each(a).data("waitUntilExists.found",!0),h&&d.length?g(c):j||(b[c]=f.setInterval(function(){d.waitUntilExists(a,h,!0)},500)));return d}})(jQuery,window);


    $(function () {
        let scroller = $('.notion-frame .notion-scroller')
        let sidebarContainer = $('.notion-sidebar-container')

        let onContentAvailableListeners = []
        let sidebarListeners = []

        var sidebarIsOpen = null

        //
        //
        //
        var content = $('.notion-page-content')
        content.waitUntilExists(function() {
            onContentAvailableListeners.forEach(function (listener) { listener() })
        })

        //
        // center document on screen
        //

        function modifyScroller(isOpen) {
            var sidebarContainer = $('.notion-sidebar-container')
            var sidebarContainerWidth = sidebarContainer.css('width')

            sidebarIsOpen = isOpen === undefined ? sidebarContainerWidth !== "0px" : isOpen
            // if sidebar is opend, center the content

            if (!sidebarIsOpen) {
                $('body').removeClass('sidebarIsOpen')
                $('body').addClass('sidebarIsClose')
            } else {
                $('body').addClass('sidebarIsOpen')
                $('body').removeClass('sidebarIsClose')
            }

            var scroller = $('.notion-frame .notion-scroller')
            // TODO: better transition
            scroller.css('transition', 'margin 300ms ease-in 0s')
            scroller.css('margin-left', sidebarIsOpen ? 'calc(-323px / 2)' : 'calc(323px / 2)')
            //console.log({ sidebarIsOpen, sidebarContainerWidth, isOpen, scroller })

            sidebarListeners.forEach(function (sidebarListener) { sidebarListener(sidebarIsOpen) })
        }


        sidebarContainer.waitUntilExists(function() {
            modifyScroller()


            $(document).on('click', '.notion-fadein', function () {
                modifyScroller(false);
            })

            $(document).on('click', '.notion-open-sidebar', function () {
                modifyScroller(true);
            })
        })


        //
        // toggle properties
        //

        function renderProperties() {
            var isInit = false
            var isOpen = !sidebarIsOpen
            let propertiesToggleId = 'properties-toggle'
            let propertiesContainerId = 'properties-container'


            let toggleButtonAdded = $('#' + propertiesToggleId).size() != 0
            if (!toggleButtonAdded) {
                scroller.children().eq(1).find('div[role=button]').waitUntilExists(function() {

                    if (!isInit) {
                        let hasProperties = $('.notion-page-view-discussion').index() == 2
                        if (!hasProperties) {
                            return;
                        }
                        let propertiesContainer = $('.notion-frame .notion-scroller').children().eq(1)
                        propertiesContainer.attr('id', propertiesContainerId)


                        if ($('#' + propertiesToggleId).size() == 0) {
                            propertiesContainer.children().addClass('properties-block')


                            propertiesContainer.prepend('<div id="' + propertiesToggleId + '" role="button"><svg viewBox="0 0 14 14" class="hamburgerMenu" style="width: 16px; height: 16px; display: block; fill: rgba(55, 53, 47, 0.8); flex-shrink: 0; backface-visibility: hidden;"><path d="M0,1.25 L14,1.25 L14,2.75 L0,2.75 L0,1.25 Z M0,6.25 L14,6.25 L14,7.75 L0,7.75 L0,6.25 Z M0,11.25 L14,11.25 L14,12.75 L0,12.75 L0,11.25 Z"></path></svg></div>')

                            var buttonStyle = {
                                margin: '0px auto',
                                background: 'white',
                                padding: '8px',
                                border: '1px solid rgba(55, 53, 47, 0.09)',
                                padding: '12px 4px 16px',
                                cursor: 'pointer',
                                paddingLeft: '16px',
                            }

                            var button = $('#' + propertiesToggleId)
                            button.css(buttonStyle)


                            function style() {
                                var propertiesBlock = $('.properties-block')

                                var propertiesStyle = {
                                    padding: '12px 4px 16px',
                                    border: '1px solid rgba(55, 53, 47, 0.09)',
                                }
                                var propertiesOpenStyle = { display: 'block' }
                                var propertiesCloseStyle = { display: 'none' }

                                var containerStyle = {
                                    position: 'fixed',
                                    right: 0,
                                    top: '160px',
                                    background: 'white',
                                    zIndex: 999,
                                    'box-shadow': '-10px -10px 30px 4px rgba(0,0,0,0.1),10px 10px 30px 4px rgba(45,78,255,0.15);',
                                    transition: 'width 160ms ease-in 0s'
                                }
                                var containerOpenStyle = { width: sidebarIsOpen ? '500px' : '500px' } // TODO: big mode 860px
                                var containerCloseStyle = { width: '100px' }

                                var propertiesFinalStyle = {}
                                Object.assign(propertiesFinalStyle, propertiesStyle, isOpen ? propertiesOpenStyle : propertiesCloseStyle)
                                propertiesBlock.css(propertiesFinalStyle)

                                var containerFinalStyle =  {}
                                Object.assign(containerFinalStyle, containerStyle, isOpen ? containerOpenStyle : containerCloseStyle)
                                propertiesContainer.css(containerFinalStyle)
                                isInit = false
                            }


                            style()

                            //sidebarListeners.push(style)

                            button.click(function() {
                                isOpen = !isOpen
                                style()
                            })
                        }
                    }
                })
            }
        }

        onContentAvailableListeners.push(renderProperties)

        //
        // reading mode
        //
        var readingMode = false;

        var readingModeBtnId = 'reading-mode-btn'


        function toggleReadingMode() {
            readingMode = !readingMode

            if (!readingMode) {
                // disable edit to allow use vim keys
                $('[contenteditable=true]').attr('contenteditable', true)
                $('body').removeClass('reading-mode-on')
                $('body').addClass('reading-mode-off')
            } else {
                // disable edit to allow use vim keys
                $('[contenteditable=true]').attr('contenteditable', false)
                $('body').addClass('reading-mode-on')
                $('body').removeClass('reading-mode-off')
            }

            renderReadingModeButton()
        }

        function renderReadingModeButton() {
              let style = {
                position: 'fixed',
                top: 100,
                right: '32px',
                zIndex: 999,
                width: '48px',
                cursor: 'pointer',
                fill: 'black'
            }

            let readingStyle = { fill: 'red' }

            let readingModeBtn = $('#' + readingModeBtnId)
            let finalStyle = {}
            Object.assign(finalStyle, style, readingMode ? readingStyle : {})

            readingModeBtn.css(finalStyle)
        }

        function initReadingModeButton() {

            // from https://www.notion.vip/icons/
            let svgIcon = '<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250.000000 250.000000" preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,250.000000) scale(0.100000,-0.100000)" stroke="none"><path d="M503 2381 c-100 -34 -171 -114 -193 -215 -8 -36 -10 -315 -8 -931 l3 -880 22 -40 c45 -83 134 -145 231 -161 l42 -7 0 52 c0 46 -2 51 -22 51 -38 1 -101 35 -135 73 -59 67 -56 154 5 215 21 21 56 43 78 50 31 9 242 12 858 12 l816 0 0 900 0 900 -822 0 c-764 -1 -827 -2 -875 -19z m1197 -881 l0 -799 -592 -3 -593 -3 -57 -32 -58 -31 0 746 c0 495 4 760 11 785 13 47 77 113 121 126 19 5 276 10 601 10 l567 1 0 -800z m400 0 l0 -800 -150 0 -150 0 0 800 0 800 150 0 150 0 0 -800z"/><path d="M700 266 c0 -307 4 -313 153 -201 48 36 91 65 97 65 6 0 49 -29 97 -65 47 -36 94 -65 103 -65 9 0 24 8 33 18 15 16 17 49 17 250 l0 232 -50 0 -50 0 0 -175 0 -176 -66 51 c-37 27 -75 50 -84 50 -9 0 -47 -23 -84 -50 l-66 -51 0 176 0 175 -50 0 -50 0 0 -234z"/><path d="M1300 200 l0 -50 450 0 450 0 0 50 0 50 -450 0 -450 0 0 -50z"/></g></svg>'
            $('body').prepend('<a href="#" role="button" id="' + readingModeBtnId + '">' + svgIcon + '</a>')

            let readingModeBtn = $('#' + readingModeBtnId)

            readingMode = true
            toggleReadingMode()

            readingModeBtn.click(function () {
                toggleReadingMode()
            })

        }

        onContentAvailableListeners.push(initReadingModeButton)

    });

})();

style.css

.sidebarIsOpen .notion-table_of_contents-block {
    
}

.sidebarIsClose .notion-table_of_contents-block {
    position: fixed!important;
    max-width: 360px!important;
    left: 16px;
    top: 120px;
}