@matdata/yasqe 5.13.0 → 5.15.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasqe",
   "description": "Yet Another SPARQL Query Editor",
-  "version": "5.13.0",
+  "version": "5.15.0",
   "main": "build/yasqe.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",

package/src/index.ts

@@ -61,6 +61,9 @@ export class Yasqe extends CodeMirror {
   private queryBtn: HTMLButtonElement | undefined;
   private saveBtn: HTMLButtonElement | undefined;
   private fullscreenBtn: HTMLButtonElement | undefined;
+  private hamburgerBtn: HTMLButtonElement | undefined;
+  private hamburgerMenu: HTMLDivElement | undefined;
+  private shareBtn: HTMLButtonElement | undefined;
   private isFullscreen: boolean = false;
   private horizontalResizeWrapper?: HTMLDivElement;
   private snippetsBar?: HTMLDivElement;
@@ -318,6 +321,7 @@ export class Yasqe extends CodeMirror {
       shareLinkWrapper.setAttribute("aria-label", "Share query");
       shareLinkWrapper.appendChild(shareIcon);
       buttons.appendChild(shareLinkWrapper);
+      this.shareBtn = shareLinkWrapper;
       shareLinkWrapper.addEventListener("click", (event: MouseEvent) => showSharePopup(event));
       shareLinkWrapper.addEventListener("keydown", (event: KeyboardEvent) => {
         if (event.code === "Enter") {
@@ -463,6 +467,7 @@ export class Yasqe extends CodeMirror {
         urlBtn.className = "yasqe_btn yasqe_btn-sm yasqe_shareBtn";
         buttonContainer.appendChild(urlBtn);
         urlBtn.onclick = async () => {
+          if (!this.config.createShareableLink) return;
           const url = this.config.createShareableLink(this);
           await copyToClipboard(url, "URL");
         };
@@ -478,6 +483,7 @@ export class Yasqe extends CodeMirror {
             shortenBtn.disabled = true;
             shortenBtn.innerText = "Shortening...";
             try {
+              if (!this.config.createShareableLink) return;
               const longUrl = this.config.createShareableLink(this);
               const shortUrl = await createShortLink(this, longUrl);
               await copyToClipboard(shortUrl, "Shortened URL");
@@ -533,9 +539,25 @@ export class Yasqe extends CodeMirror {
         // Position popup after layout is complete
         const positionPopup = () => {
           if (!popup) return;
-          const sharePos = shareLinkWrapper.getBoundingClientRect();
-          popup.style.top = shareLinkWrapper.offsetTop + sharePos.height + "px";
-          popup.style.left = shareLinkWrapper.offsetLeft + shareLinkWrapper.clientWidth - popup.clientWidth + "px";
+          const buttonsRect = buttons.getBoundingClientRect();
+          const popupHeight = popup.offsetHeight || 300; // Estimated height
+          const viewportHeight = window.innerHeight;
+          const spaceAbove = buttonsRect.top;
+          const spaceBelow = viewportHeight - buttonsRect.bottom;
+
+          // If there's enough space above (with some padding), position above
+          // Otherwise position below (will use scrolling if needed)
+          if (spaceAbove >= popupHeight + 20) {
+            popup.style.bottom = (buttons.clientHeight || 46) + "px";
+            popup.style.top = "auto";
+            popup.style.right = "0px";
+          } else {
+            // Not enough space above, use fixed positioning at top of viewport
+            popup.style.position = "fixed";
+            popup.style.bottom = "auto";
+            popup.style.top = "20px";
+            popup.style.right = "20px";
+          }
         };
 
         if (typeof window !== "undefined" && typeof window.requestAnimationFrame === "function") {
@@ -609,6 +631,130 @@ export class Yasqe extends CodeMirror {
     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)
+     */
+    this.hamburgerBtn = document.createElement("button");
+    addClass(this.hamburgerBtn, "yasqe_hamburgerButton");
+    const hamburgerIcon = document.createElement("i");
+    addClass(hamburgerIcon, "fas");
+    addClass(hamburgerIcon, "fa-bars");
+    hamburgerIcon.setAttribute("aria-hidden", "true");
+    this.hamburgerBtn.appendChild(hamburgerIcon);
+    this.hamburgerBtn.title = "More options";
+    this.hamburgerBtn.setAttribute("aria-label", "More options");
+    this.hamburgerBtn.setAttribute("aria-expanded", "false");
+    buttons.appendChild(this.hamburgerBtn);
+
+    // Create hamburger menu
+    this.hamburgerMenu = document.createElement("div");
+    this.hamburgerMenu.className = "yasqe_hamburgerMenu";
+    buttons.appendChild(this.hamburgerMenu);
+
+    // Add menu items
+    if (this.config.createShareableLink) {
+      const shareItem = document.createElement("button");
+      shareItem.className = "yasqe_hamburgerMenuItem";
+      const shareIconMenu = document.createElement("i");
+      addClass(shareIconMenu, "fas");
+      addClass(shareIconMenu, "fa-share-nodes");
+      shareIconMenu.setAttribute("aria-hidden", "true");
+      shareItem.appendChild(shareIconMenu);
+      const shareLabel = document.createElement("span");
+      shareLabel.textContent = "Share";
+      shareItem.appendChild(shareLabel);
+      shareItem.onclick = () => {
+        this.closeHamburgerMenu();
+        this.shareBtn?.click();
+      };
+      this.hamburgerMenu.appendChild(shareItem);
+    }
+
+    const saveItem = document.createElement("button");
+    saveItem.className = "yasqe_hamburgerMenuItem";
+    const saveIconMenu = document.createElement("i");
+    addClass(saveIconMenu, "fas");
+    addClass(saveIconMenu, "fa-save");
+    saveIconMenu.setAttribute("aria-hidden", "true");
+    saveItem.appendChild(saveIconMenu);
+    const saveLabel = document.createElement("span");
+    saveLabel.textContent = "Save";
+    saveItem.appendChild(saveLabel);
+    saveItem.onclick = () => {
+      this.closeHamburgerMenu();
+      this.emit("saveManagedQuery");
+    };
+    this.hamburgerMenu.appendChild(saveItem);
+
+    if (this.config.showFormatButton) {
+      const formatItem = document.createElement("button");
+      formatItem.className = "yasqe_hamburgerMenuItem";
+      const formatIconMenu = document.createElement("i");
+      addClass(formatIconMenu, "fas");
+      addClass(formatIconMenu, "fa-align-left");
+      formatIconMenu.setAttribute("aria-hidden", "true");
+      formatItem.appendChild(formatIconMenu);
+      const formatLabel = document.createElement("span");
+      formatLabel.textContent = "Format";
+      formatItem.appendChild(formatLabel);
+      formatItem.onclick = () => {
+        this.closeHamburgerMenu();
+        this.format();
+      };
+      this.hamburgerMenu.appendChild(formatItem);
+    }
+
+    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) => {
+      e.stopPropagation();
+      this.toggleHamburgerMenu();
+    };
+
+    // Close hamburger menu when clicking outside
+    document.addEventListener("click", (e) => {
+      if (
+        this.hamburgerMenu &&
+        this.hamburgerBtn &&
+        !this.hamburgerMenu.contains(e.target as Node) &&
+        !this.hamburgerBtn.contains(e.target as Node)
+      ) {
+        this.closeHamburgerMenu();
+      }
+    });
+  }
+
+  private toggleHamburgerMenu() {
+    if (!this.hamburgerMenu || !this.hamburgerBtn) return;
+    const isActive = this.hamburgerMenu.classList.contains("active");
+    if (isActive) {
+      this.closeHamburgerMenu();
+    } else {
+      addClass(this.hamburgerMenu, "active");
+      this.hamburgerBtn.setAttribute("aria-expanded", "true");
+    }
+  }
+
+  private closeHamburgerMenu() {
+    if (!this.hamburgerMenu || !this.hamburgerBtn) return;
+    removeClass(this.hamburgerMenu, "active");
+    this.hamburgerBtn.setAttribute("aria-expanded", "false");
   }
   public toggleFullscreen() {
     this.isFullscreen = !this.isFullscreen;
@@ -1830,7 +1976,7 @@ export interface Config extends Partial<CodeMirror.EditorConfiguration> {
    * By default, this feature is enabled, and the only the query value is appended to the link.
    * ps. This function should return an object which is parseable by jQuery.param (http://api.jquery.com/jQuery.param/)
    */
-  createShareableLink: (yasqe: Yasqe) => string;
+  createShareableLink: ((yasqe: Yasqe) => string) | undefined | null;
   createShortLink: ((yasqe: Yasqe, longLink: string) => Promise<string>) | undefined;
   consumeShareLink: ((yasqe: Yasqe) => void) | undefined | null;
   /**

package/src/scss/buttons.scss

@@ -3,10 +3,10 @@
   $queryButtonHeight: 40px;
 
   .yasqe_btn {
-    color: #333;
+    color: var(--yasgui-text-primary, #333);
     border: 1px solid transparent;
-    background-color: #fff;
-    border-color: #ccc;
+    background-color: var(--yasgui-bg-primary, #fff);
+    border-color: var(--yasgui-border-color, #ccc);
     border-width: 1px;
     display: inline-block;
     text-align: center;
@@ -33,8 +33,8 @@
 
     &:hover {
       outline: 0;
-      background-color: #ebebeb;
-      border-color: #adadad;
+      background-color: var(--yasgui-bg-secondary, #ebebeb);
+      border-color: var(--yasgui-text-muted, #adadad);
     }
 
     &:focus,
@@ -46,10 +46,10 @@
     }
 
     &.btn_icon:focus {
-      color: #333;
+      color: var(--yasgui-text-primary, #333);
       border: 1px solid transparent;
-      background-color: #fff;
-      border-color: #ccc;
+      background-color: var(--yasgui-bg-primary, #fff);
+      border-color: var(--yasgui-border-color, #ccc);
     }
 
     &.yasqe_btn-sm {
@@ -62,7 +62,7 @@
 
   .yasqe_buttons {
     position: absolute;
-    top: 10px;
+    bottom: 10px;
     right: 20px;
     z-index: 5;
 
@@ -77,7 +77,7 @@
       margin-left: 8px;
       height: 36px;
       width: 36px;
-      color: #505050;
+      color: var(--yasgui-text-secondary, #505050);
 
       i {
         font-size: 20px;
@@ -96,22 +96,25 @@
       position: absolute;
       padding: 12px;
       margin-left: 0px;
-      background-color: #fff;
-      border: 1px solid #e3e3e3;
+      background-color: var(--yasgui-bg-primary, #fff);
+      border: 1px solid var(--yasgui-border-color, #e3e3e3);
       border-radius: 4px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       width: auto;
       min-width: 300px;
       max-width: 400px;
+      max-height: calc(100vh - 100px);
+      overflow-y: auto;
       height: auto;
       display: flex;
       flex-direction: column;
       gap: 8px;
+      z-index: 10001;
 
       .yasqe_sharePopup_title {
         font-weight: 600;
         font-size: 14px;
-        color: #333;
+        color: var(--yasgui-text-primary, #333);
         margin-bottom: 4px;
       }
 
@@ -301,7 +304,7 @@
       margin-left: 8px;
       height: 36px;
       width: 36px;
-      color: #505050;
+      color: var(--yasgui-text-secondary, #505050);
 
       i {
         font-size: 20px;
@@ -323,7 +326,7 @@
       margin-left: 8px;
       height: 36px;
       width: 36px;
-      color: #505050;
+      color: var(--yasgui-text-secondary, #505050);
 
       i {
         font-size: 20px;
@@ -345,7 +348,7 @@
       margin-left: 8px;
       height: 36px;
       width: 36px;
-      color: #505050;
+      color: var(--yasgui-text-secondary, #505050);
 
       i {
         font-size: 20px;
@@ -359,6 +362,95 @@
         color: #337ab7;
       }
     }
+
+    .yasqe_hamburgerButton {
+      display: none;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      background: none;
+      cursor: pointer;
+      padding: 6px;
+      margin-left: 8px;
+      height: 36px;
+      width: 36px;
+      color: var(--yasgui-text-secondary, #505050);
+
+      i {
+        font-size: 20px;
+      }
+
+      &:hover {
+        color: #337ab7;
+      }
+
+      &[aria-expanded="true"] {
+        color: #337ab7;
+      }
+    }
+
+    .yasqe_hamburgerMenu {
+      display: none;
+      position: absolute;
+      bottom: 46px;
+      right: 0;
+      background-color: var(--yasgui-bg-primary, #fff);
+      border: 1px solid var(--yasgui-border-color, #e3e3e3);
+      border-radius: 4px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      padding: 4px;
+      min-width: 180px;
+      z-index: 10000;
+
+      &.active {
+        display: block;
+      }
+
+      .yasqe_hamburgerMenuItem {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        width: 100%;
+        padding: 10px 12px;
+        border: none;
+        background: none;
+        text-align: left;
+        cursor: pointer;
+        font-size: 14px;
+        color: var(--yasgui-text-primary, #333);
+        border-radius: 2px;
+
+        i {
+          font-size: 16px;
+          width: 20px;
+          color: var(--yasgui-text-secondary, #505050);
+        }
+
+        &:hover {
+          background-color: var(--yasgui-bg-secondary, #f0f0f0);
+        }
+
+        &:active {
+          background-color: var(--yasgui-bg-tertiary, #e0e0e0);
+        }
+      }
+    }
+  }
+
+  // Responsive: Show hamburger menu on smaller screens
+  @media (max-width: 768px) {
+    .yasqe_buttons {
+      .yasqe_share,
+      .yasqe_saveButton,
+      .yasqe_formatButton,
+      .yasqe_fullscreenButton {
+        display: none !important;
+      }
+
+      .yasqe_hamburgerButton {
+        display: inline-flex;
+      }
+    }
   }
 
   &.fullscreen {
@@ -368,7 +460,7 @@
     right: 0;
     bottom: 0;
     z-index: 9998;
-    background: white;
+    background: var(--yasgui-bg-primary, white);
     margin: 0;
     padding-top: 100px;
 
@@ -378,7 +470,7 @@
 
     .yasqe_buttons {
       position: fixed;
-      top: 110px;
+      bottom: 40px;
       right: 20px;
       z-index: 10000;
     }