Skip to content

Instantly share code, notes, and snippets.

@dkapila
Last active September 29, 2020 00:02
Show Gist options
  • Save dkapila/7936a30a06b3b3982d2fe85ddf31ba0d to your computer and use it in GitHub Desktop.
Save dkapila/7936a30a06b3b3982d2fe85ddf31ba0d to your computer and use it in GitHub Desktop.
Adds back forward buttons in Roam - useful when using it as an app
;(function () {
// Don't show navigation controls on mobile
if(/Android|iPhone/i.test(navigator.userAgent)){
return;
}
// Only show navigation controls when using Roam in app mode
if ((window.navigator.standalone == true) || (window.matchMedia('(display-mode: standalone)').matches)) {
const navigation_controls = document.createElement("div");
navigation_controls.id = 'roam-navigation-controls';
navigation_controls.style.display = 'block';
navigation_controls.setAttribute("style", "display: block; left: 2px; width: 35px; max-width: 35px!important; top: 40px; position: relative; z-index: 100000;");
const navigation_controls_back = document.createElement("i");
navigation_controls_back.id = 'roam-navigation-controls_back';
navigation_controls_back.style.display = 'block';
navigation_controls_back.setAttribute('style', "margin-bottom:2px;border: solid black;border-width: 0 3px 3px 0;display: inline-block;position: relative;padding: 5px;transform: rotate(135deg);-webkit-transform: rotate(135deg);cursor: pointer;")
navigation_controls_back.onclick = () => {
window.history.back();
}
navigation_controls_back.title = 'Go back';
const navigation_controls_forward = document.createElement("i");
navigation_controls_forward.id = 'roam-navigation-controls_forward';
navigation_controls_forward.style.display = 'block';
navigation_controls_forward.setAttribute('style', "margin-bottom:2px;border: solid black;border-width: 0 3px 3px 0;display: inline-block;position: relative;padding: 5px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);cursor: pointer;")
navigation_controls_forward.onclick = () => {
window.history.forward();
}
navigation_controls_forward.title = 'Go forward';
const toolbar_container = document.querySelector('.roam-topbar');
const toolbar_container_flex_box = toolbar_container.querySelector('.flex-h-box');
toolbar_container_flex_box.prepend(navigation_controls);
document.getElementById("roam-navigation-controls").appendChild(navigation_controls_back);
document.getElementById("roam-navigation-controls").appendChild(navigation_controls_forward);
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment