feat(yasqe): add showShareButton and showFullscreenButton options

The developer guide listed a showShareButton option that did not exist,
and the fullscreen button could not be hidden at all. Both options
default to true and also hide the matching mobile menu items.

Closes #251

Author: MathiasVDA

.changeset/hide-share-fullscreen-buttons.md

@@ -0,0 +1,5 @@
+---
+"@matdata/yasqe": minor
+---
+
+New `showShareButton` and `showFullscreenButton` options hide the Share and Fullscreen buttons of the editor, also in the mobile menu and the Ctrl+K search. In Yasgui, set them under `yasqe`, for example `yasqe: { showShareButton: false, showFullscreenButton: false }`.

docs/developer-guide.md

@@ -813,8 +813,13 @@ interface YasqeConfig {
                              // shows Run in its query bar; `yasqe: { showQueryButton: false }`
                              // in the Yasgui config hides that Run button too
 
-  // Show share button
-  showShareButton: boolean;  // default: false
+  // Show the Share button (and its item in the mobile menu).
+  // Setting createShareableLink to null also hides it
+  showShareButton: boolean;  // default: true
+
+  // Show the Fullscreen button (and its item in the mobile menu).
+  // F11 still toggles the fullscreen editor
+  showFullscreenButton: boolean;  // default: true
 
   // Persistent storage ID
   persistenceId?: string | ((yasqe: Yasqe) => string);

packages/yasqe/src/defaults.ts

@@ -124,6 +124,8 @@ SELECT * WHERE {
     persistencyExpire: 60 * 60 * 24 * 30,
 
     showQueryButton: true,
+    showShareButton: true,
+    showFullscreenButton: true,
 
     hintConfig: {},
     resizeable: true,

packages/yasqe/src/index.ts

@@ -385,7 +385,7 @@ export class Yasqe extends EditorFacade {
     /**
      * draw share link button (SECOND)
      */
-    if (this.config.createShareableLink) {
+    if (this.config.createShareableLink && this.config.showShareButton) {
       const shareIcon = document.createElement("i");
       addClass(shareIcon, "fas");
       addClass(shareIcon, "fa-share-nodes");
@@ -723,26 +723,28 @@ export class Yasqe extends EditorFacade {
     /**
      * Draw fullscreen btn (SIXTH)
      */
-    this.fullscreenBtn = document.createElement("button");
-    addClass(this.fullscreenBtn, "yasqe_fullscreenButton");
-    const fullscreenIcon = document.createElement("i");
-    addClass(fullscreenIcon, "fas");
-    addClass(fullscreenIcon, "fa-expand");
-    addClass(fullscreenIcon, "fullscreenIcon");
-    fullscreenIcon.setAttribute("aria-hidden", "true");
-    this.fullscreenBtn.appendChild(fullscreenIcon);
-    const fullscreenExitIcon = document.createElement("i");
-    addClass(fullscreenExitIcon, "fas");
-    addClass(fullscreenExitIcon, "fa-compress");
-    addClass(fullscreenExitIcon, "fullscreenExitIcon");
-    fullscreenExitIcon.setAttribute("aria-hidden", "true");
-    this.fullscreenBtn.appendChild(fullscreenExitIcon);
-    this.fullscreenBtn.onclick = () => {
-      this.toggleFullscreen();
-    };
-    this.fullscreenBtn.title = "Toggle fullscreen (F11)";
-    this.fullscreenBtn.setAttribute("aria-label", "Toggle fullscreen");
-    buttons.appendChild(this.fullscreenBtn);
+    if (this.config.showFullscreenButton) {
+      this.fullscreenBtn = document.createElement("button");
+      addClass(this.fullscreenBtn, "yasqe_fullscreenButton");
+      const fullscreenIcon = document.createElement("i");
+      addClass(fullscreenIcon, "fas");
+      addClass(fullscreenIcon, "fa-expand");
+      addClass(fullscreenIcon, "fullscreenIcon");
+      fullscreenIcon.setAttribute("aria-hidden", "true");
+      this.fullscreenBtn.appendChild(fullscreenIcon);
+      const fullscreenExitIcon = document.createElement("i");
+      addClass(fullscreenExitIcon, "fas");
+      addClass(fullscreenExitIcon, "fa-compress");
+      addClass(fullscreenExitIcon, "fullscreenExitIcon");
+      fullscreenExitIcon.setAttribute("aria-hidden", "true");
+      this.fullscreenBtn.appendChild(fullscreenExitIcon);
+      this.fullscreenBtn.onclick = () => {
+        this.toggleFullscreen();
+      };
+      this.fullscreenBtn.title = "Toggle fullscreen (F11)";
+      this.fullscreenBtn.setAttribute("aria-label", "Toggle fullscreen");
+      buttons.appendChild(this.fullscreenBtn);
+    }
 
     /**
      * Draw hamburger menu button and dropdown (for mobile)
@@ -765,7 +767,7 @@ export class Yasqe extends EditorFacade {
     buttons.appendChild(this.hamburgerMenu);
 
     // Add menu items
-    if (this.config.createShareableLink) {
+    if (this.shareBtn) {
       const shareItem = document.createElement("button");
       shareItem.className = "yasqe_hamburgerMenuItem";
       const shareIconMenu = document.createElement("i");
@@ -851,21 +853,23 @@ export class Yasqe extends EditorFacade {
       this.hamburgerMenu.appendChild(mapItem);
     }
 
-    const fullscreenItem = document.createElement("button");
-    fullscreenItem.className = "yasqe_hamburgerMenuItem";
-    const fullscreenIconMenu = document.createElement("i");
-    addClass(fullscreenIconMenu, "fas");
-    addClass(fullscreenIconMenu, "fa-expand");
-    fullscreenIconMenu.setAttribute("aria-hidden", "true");
-    fullscreenItem.appendChild(fullscreenIconMenu);
-    const fullscreenLabel = document.createElement("span");
-    fullscreenLabel.textContent = "Fullscreen";
-    fullscreenItem.appendChild(fullscreenLabel);
-    fullscreenItem.onclick = () => {
-      this.closeHamburgerMenu();
-      this.toggleFullscreen();
-    };
-    this.hamburgerMenu.appendChild(fullscreenItem);
+    if (this.config.showFullscreenButton) {
+      const fullscreenItem = document.createElement("button");
+      fullscreenItem.className = "yasqe_hamburgerMenuItem";
+      const fullscreenIconMenu = document.createElement("i");
+      addClass(fullscreenIconMenu, "fas");
+      addClass(fullscreenIconMenu, "fa-expand");
+      fullscreenIconMenu.setAttribute("aria-hidden", "true");
+      fullscreenItem.appendChild(fullscreenIconMenu);
+      const fullscreenLabel = document.createElement("span");
+      fullscreenLabel.textContent = "Fullscreen";
+      fullscreenItem.appendChild(fullscreenLabel);
+      fullscreenItem.onclick = () => {
+        this.closeHamburgerMenu();
+        this.toggleFullscreen();
+      };
+      this.hamburgerMenu.appendChild(fullscreenItem);
+    }
 
     // Toggle hamburger menu
     this.hamburgerBtn.onclick = (e) => {
@@ -2522,6 +2526,14 @@ export interface Config extends Omit<EditorOptions, "extraKeys"> {
    * Show the Run button in the editor. Yasgui sets this to false: it shows its own Run button in the query bar.
    */
   showQueryButton: boolean;
+  /**
+   * Show the Share button (and its item in the mobile menu). Setting `createShareableLink` to null also hides it.
+   */
+  showShareButton: boolean;
+  /**
+   * Show the Fullscreen button (and its item in the mobile menu). F11 still toggles fullscreen.
+   */
+  showFullscreenButton: boolean;
   requestConfig: RequestConfig<Yasqe> | ((yasqe: Yasqe) => RequestConfig<Yasqe>);
   pluginButtons: (() => HTMLElement[] | HTMLElement) | undefined;
   highlightSelectionMatches: boolean | { showToken?: RegExp; annotateScrollbar?: boolean };

test/run.ts

@@ -84,6 +84,37 @@ describe("Yasqe", function () {
     await page.keyboard.up("Control");
   }
 
+  describe("Editor buttons", function () {
+    function countButtons() {
+      return page.evaluate(() => {
+        const wrapper = window.yasqe.getWrapperElement();
+        return {
+          share: wrapper.querySelectorAll(".yasqe_share").length,
+          fullscreen: wrapper.querySelectorAll(".yasqe_fullscreenButton").length,
+          menu: Array.from(wrapper.querySelectorAll(".yasqe_hamburgerMenuItem span")).map((el) => el.textContent),
+        };
+      });
+    }
+    it("shows the share and fullscreen buttons by default", async function () {
+      const buttons = await countButtons();
+      expect(buttons.share).to.equal(1);
+      expect(buttons.fullscreen).to.equal(1);
+      expect(buttons.menu).to.include.members(["Share", "Fullscreen"]);
+    });
+    it("hides them with showShareButton and showFullscreenButton", async function () {
+      await page.evaluate(() => {
+        const el = document.createElement("div");
+        document.body.appendChild(el);
+        window.yasqe = new window.Yasqe(el, { showShareButton: false, showFullscreenButton: false });
+      });
+      const buttons = await countButtons();
+      expect(buttons.share).to.equal(0);
+      expect(buttons.fullscreen).to.equal(0);
+      expect(buttons.menu).to.not.include.members(["Share"]);
+      expect(buttons.menu).to.not.include.members(["Fullscreen"]);
+    });
+  });
+
   describe("Autoformatting", function () {
     it("With literal", async function () {
       const value = await page.evaluate(() => {