add back/forward/refresh/print buttons to the toolbar in preview

DESCRIPTION

@@ -1,7 +1,7 @@
 Package: litedown
 Type: Package
 Title: A Lightweight Version of R Markdown
-Version: 0.2.2
+Version: 0.2.3
 Authors@R: c(
    person("Yihui", "Xie", role = c("aut", "cre"), email = "[email protected]", comment = c(ORCID = "0000-0003-0645-5666")),
    person()

NEWS.md

@@ -1,5 +1,6 @@
 # CHANGES IN litedown VERSION 0.3
 
+- Added back/forward/refresh/print buttons to the toolbar in the `litedown::roam()` preview interface.
 
 # CHANGES IN litedown VERSION 0.2
 

inst/resources/server.css

@@ -3,15 +3,14 @@
   width: 100%;
   order: -1;
 }
-.pencil, .save {
-  text-decoration: none;
-  font-size: 1.5em;
-  font-style: normal;
+.buttons {
   float: right;
-  margin-left: .5em;
-}
-li .pencil {
-  float: none;
+  a {
+    text-decoration: none;
+    font-size: 1.2em;
+    font-style: normal;
+    margin-left: .5em;
+  }
 }
 td .pencil {
   font-size: inherit;

inst/resources/server.js

@@ -29,8 +29,27 @@
   chapters.forEach(el => {
     const u = el.dataset.source;
     u && !el.querySelector('.pencil') &&
-      el.insertAdjacentHTML('afterbegin', `<a href="?path=${u}" title="Open ${u}">✎</a>`);
+      el.insertAdjacentHTML('afterbegin', `<span class="buttons"><a href="?path=${u}" title="Open ${u}">✎</a></span>`);
   });
+  const nav = d.querySelector('.nav-path, .title h1');
+  const btn = d.createElement('span'); btn.className = 'buttons';
+  ['back', 'forward', 'refresh', 'print'].forEach((action, i) => {
+    if (btn.querySelector(`.${action}`)) return;
+    const a = d.createElement('a');
+    a.href = '#'; a.title = action[0].toUpperCase() + action.slice(1); a.className = action;
+    a.innerText = ['←', '→', '⟳', '⧉'][i];
+    a.onclick = e => {
+      e.preventDefault();
+      action === 'print' ? window.print() : (
+        action === 'refresh' ? location.reload() : history[action]()
+      );
+    };
+    btn.append(a);
+  });
+  if (nav) {
+    nav.querySelectorAll('a[href="#"]').forEach(a => btn.append(a));
+    nav.append(btn);
+  }
   // add classes and events to edit buttons
   d.querySelectorAll('a[href]').forEach(a => {
     if (a.innerText !== '✎' || a.classList.contains('pencil')) return;