diff --git a/.changeset/hide-share-fullscreen-buttons.md b/.changeset/hide-share-fullscreen-buttons.md new file mode 100644 index 00000000..5123d0b2 --- /dev/null +++ b/.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 }`. diff --git a/docs/developer-guide.md b/docs/developer-guide.md index e5b13c67..51ed1b1c 100644 --- a/docs/developer-guide.md +++ b/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); diff --git a/packages/yasqe/src/defaults.ts b/packages/yasqe/src/defaults.ts index d06e3c53..05ba72c4 100644 --- a/packages/yasqe/src/defaults.ts +++ b/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, diff --git a/packages/yasqe/src/index.ts b/packages/yasqe/src/index.ts index 3430149b..ab835b8c 100644 --- a/packages/yasqe/src/index.ts +++ b/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 { * 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) => RequestConfig); pluginButtons: (() => HTMLElement[] | HTMLElement) | undefined; highlightSelectionMatches: boolean | { showToken?: RegExp; annotateScrollbar?: boolean }; diff --git a/test/run.ts b/test/run.ts index 91e3494e..2de43d09 100644 --- a/test/run.ts +++ b/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(() => {