Skip to content

Instantly share code, notes, and snippets.

@lockcp
Forked from shodty/README.md
Created January 15, 2022 17:34
Show Gist options
  • Select an option

  • Save lockcp/a42a9d184527fa03caeac321bd167c83 to your computer and use it in GitHub Desktop.

Select an option

Save lockcp/a42a9d184527fa03caeac321bd167c83 to your computer and use it in GitHub Desktop.

Revisions

  1. @shodty shodty revised this gist Feb 4, 2021. 1 changed file with 12 additions and 1 deletion.
    13 changes: 12 additions & 1 deletion roam-sidebar-toggle.js
    Original file line number Diff line number Diff line change
    @@ -6,9 +6,18 @@ const sidebarPressMac = new KeyboardEvent("keydown", {
    bubbles: true, cancelable: true, keyCode: 220, metaKey: true, shiftKey: true
    });

    const sidebarPressUp = new KeyboardEvent("keyup", {
    bubbles: true, cancelable: true, keyCode: 220, ctrlKey: true, shiftKey: true
    });

    const sidebarPressMacUp = new KeyboardEvent("keyup", {
    bubbles: true, cancelable: true, keyCode: 220, metaKey: true, shiftKey: true
    });


    setTimeout(createButton, 1000);



    function createButton() {
    if (!document.getElementById('sideBarDiv')) {
    var spanOne = document.createElement('span');
    @@ -29,4 +38,6 @@ const sidebarPressMac = new KeyboardEvent("keydown", {
    function toggleTheSideBar() {
    document.activeElement.dispatchEvent(sidebarPress);
    document.activeElement.dispatchEvent(sidebarPressMac);
    document.activeElement.dispatchEvent(sidebarPressUp);
    document.activeElement.dispatchEvent(sidebarPressMacUp);
    }
  2. @shodty shodty revised this gist Jan 31, 2021. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions roam-sidebar-toggle.js
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,7 @@ const sidebarPressMac = new KeyboardEvent("keydown", {
    });


    setTimeout(createButton, 200);
    setTimeout(createButton, 1000);

    function createButton() {
    if (!document.getElementById('sideBarDiv')) {
    @@ -20,7 +20,7 @@ const sidebarPressMac = new KeyboardEvent("keydown", {
    toggleSideBar.id = 'sideBarDiv';
    toggleSideBar.classList.add('bp3-icon-menu-open', 'bp3-button', 'bp3-minimal');
    spanTwo.appendChild(toggleSideBar);
    var roamTopbar = document.getElementsByClassName("roam-topbar");
    var roamTopbar = document.getElementsByClassName("rm-files-dropzone");
    roamTopbar[0].childNodes[0].appendChild(spanOne);
    toggleSideBar.onclick = toggleTheSideBar;
    }
  3. @shodty shodty revised this gist Oct 13, 2020. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion README.md
    Original file line number Diff line number Diff line change
    @@ -14,4 +14,6 @@ Grab the code in `roam-sidebar-toggle.js` and drop it in a javascript code block
    Additionally, grab the code in `roam-sidebar-toggle.css` and add it to a CSS code block on a Roam page titled roam/css. This will remove the standard sidebar toggle button inside the right sidebar, freeing up some crucial real estate:
    ```
    ```css```
    ```
    ```

    ![CSS](https://i.imgur.com/oJoXlle.png)
  4. @shodty shodty revised this gist Oct 13, 2020. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,7 @@
    Move the right sidebar toggle to a button in the upper right icon tray.

    ![Demo](https://i.imgur.com/UrmDLMt.gif)

    You can add this to Roam using `{{[[roam/js]]}}`

    Grab the code in `roam-sidebar-toggle.js` and drop it in a javascript code block, nested underneath a `{{[[roam/js]]}}` block:
  5. @shodty shodty revised this gist Oct 13, 2020. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,8 @@ Grab the code in `roam-sidebar-toggle.js` and drop it in a javascript code block
    ```javascript```
    ```

    ![Example](https://i.imgur.com/QldPdYc.png)

    Additionally, grab the code in `roam-sidebar-toggle.css` and add it to a CSS code block on a Roam page titled roam/css. This will remove the standard sidebar toggle button inside the right sidebar, freeing up some crucial real estate:
    ```
    ```css```
  6. @shodty shodty revised this gist Oct 13, 2020. 1 changed file with 24 additions and 24 deletions.
    48 changes: 24 additions & 24 deletions roam-sidebar-toggle.js
    Original file line number Diff line number Diff line change
    @@ -1,32 +1,32 @@
    const sidebarPress = new KeyboardEvent("keydown", {
    bubbles: true, cancelable: true, keyCode: 220, ctrlKey: true, shiftKey: true
    });
    });

    const sidebarPressMac = new KeyboardEvent("keydown", {
    bubbles: true, cancelable: true, keyCode: 220, metaKey: true, shiftKey: true
    });

    setTimeout(createButton, 200);

    function createButton() {
    var spanOne = document.createElement('span');
    spanOne.classList.add('bp3-popover-wrapper');

    var spanTwo = document.createElement('span');
    spanTwo.classList.add('bp3-popover-target');
    spanOne.appendChild(spanTwo);

    var toggleSideBar = document.createElement('span');
    toggleSideBar.id = 'sideBarDiv';
    toggleSideBar.classList.add('bp3-icon-menu-open', 'bp3-button', 'bp3-minimal');
    spanTwo.appendChild(toggleSideBar);

    var roamTopbar = document.getElementsByClassName("roam-topbar");
    roamTopbar[0].childNodes[0].appendChild(spanOne);
    toggleSideBar.onclick = toggleTheSideBar;
    }

    function toggleTheSideBar() {
    document.activeElement.dispatchEvent(sidebarPress);
    document.activeElement.dispatchEvent(sidebarPressMac);
    }
    setTimeout(createButton, 200);

    function createButton() {
    if (!document.getElementById('sideBarDiv')) {
    var spanOne = document.createElement('span');
    spanOne.classList.add('bp3-popover-wrapper');
    var spanTwo = document.createElement('span');
    spanTwo.classList.add('bp3-popover-target');
    spanOne.appendChild(spanTwo);
    var toggleSideBar = document.createElement('span');
    toggleSideBar.id = 'sideBarDiv';
    toggleSideBar.classList.add('bp3-icon-menu-open', 'bp3-button', 'bp3-minimal');
    spanTwo.appendChild(toggleSideBar);
    var roamTopbar = document.getElementsByClassName("roam-topbar");
    roamTopbar[0].childNodes[0].appendChild(spanOne);
    toggleSideBar.onclick = toggleTheSideBar;
    }
    }

    function toggleTheSideBar() {
    document.activeElement.dispatchEvent(sidebarPress);
    document.activeElement.dispatchEvent(sidebarPressMac);
    }
  7. @shodty shodty revised this gist Oct 13, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    You can add this to Roam using `{{[[roam/js]]}}`

    Grab the code in `roam-sidebar-toggle.js` and drop it in a javascript code block:
    Grab the code in `roam-sidebar-toggle.js` and drop it in a javascript code block, nested underneath a `{{[[roam/js]]}}` block:
    ```
    ```javascript```
    ```
  8. @shodty shodty revised this gist Oct 13, 2020. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion README.md
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@ Grab the code in `roam-sidebar-toggle.js` and drop it in a javascript code block
    ```javascript```
    ```

    Additionally, grab the code in `roam-sidebar-toggle.css` and add it to a CSS code block on a Roam page titled roam/css:
    Additionally, grab the code in `roam-sidebar-toggle.css` and add it to a CSS code block on a Roam page titled roam/css. This will remove the standard sidebar toggle button inside the right sidebar, freeing up some crucial real estate:
    ```
    ```css```
    ```
    2 changes: 1 addition & 1 deletion roam-sidebar-toggle.css
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    /* Optionally add this to your roam/css to kill Right sidebar top gap and toggle button within the sidebar as it's no longer necessary */
    /* Optionally add this to your roam/css to kill right sidebar top gap and toggle button within the sidebar as it's no longer necessary */
    #right-sidebar div[style*="padding: 8px;"] {
    padding: 0px !important;
    }
  9. @shodty shodty revised this gist Oct 13, 2020. 3 changed files with 11 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    You can add this to Roam using `{{[[roam/js]]}}`

    Grab the code in `roam-sidebar-toggle.js` and drop it in a javascript code block:
    ```
    ```javascript```
    ```

    Additionally, grab the code in `roam-sidebar-toggle.css` and add it to a CSS code block on a Roam page titled roam/css:
    ```
    ```css```
    ```
    File renamed without changes.
    File renamed without changes.
  10. @shodty shodty created this gist Oct 13, 2020.
    8 changes: 8 additions & 0 deletions RoamSidebarToggle.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    /* Optionally add this to your roam/css to kill Right sidebar top gap and toggle button within the sidebar as it's no longer necessary */
    #right-sidebar div[style*="padding: 8px;"] {
    padding: 0px !important;
    }

    #right-sidebar > div.flex-h-box > button {
    display: none;
    }
    32 changes: 32 additions & 0 deletions RoamSidebarToggle.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    const sidebarPress = new KeyboardEvent("keydown", {
    bubbles: true, cancelable: true, keyCode: 220, ctrlKey: true, shiftKey: true
    });

    const sidebarPressMac = new KeyboardEvent("keydown", {
    bubbles: true, cancelable: true, keyCode: 220, metaKey: true, shiftKey: true
    });

    setTimeout(createButton, 200);

    function createButton() {
    var spanOne = document.createElement('span');
    spanOne.classList.add('bp3-popover-wrapper');

    var spanTwo = document.createElement('span');
    spanTwo.classList.add('bp3-popover-target');
    spanOne.appendChild(spanTwo);

    var toggleSideBar = document.createElement('span');
    toggleSideBar.id = 'sideBarDiv';
    toggleSideBar.classList.add('bp3-icon-menu-open', 'bp3-button', 'bp3-minimal');
    spanTwo.appendChild(toggleSideBar);

    var roamTopbar = document.getElementsByClassName("roam-topbar");
    roamTopbar[0].childNodes[0].appendChild(spanOne);
    toggleSideBar.onclick = toggleTheSideBar;
    }

    function toggleTheSideBar() {
    document.activeElement.dispatchEvent(sidebarPress);
    document.activeElement.dispatchEvent(sidebarPressMac);
    }