@matdata/yasqe 5.14.0 → 5.16.0

package/package.json

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

package/src/__tests__/share-test.ts

@@ -105,7 +105,7 @@ describe("Share Functionality", () => {
         "    }",
         '    ContentType = "application/x-www-form-urlencoded"',
         '    Body = "query=SELECT"',
-        '    OutFile = "result.json"',
+        '    OutFile = "sparql-generated.json"',
         "}",
         "",
         "Invoke-WebRequest @params",
@@ -117,6 +117,37 @@ describe("Share Functionality", () => {
       expect(psString).to.include("Headers");
       expect(psString).to.include("OutFile");
       expect(psString).to.include("Accept");
+      expect(psString).to.include("sparql-generated");
+    });
+
+    it("should format PowerShell commands with here-string for query", () => {
+      const query = "SELECT * WHERE { ?s ?p ?o }";
+      const lines = [
+        '$query = @"',
+        query,
+        '"@',
+        "",
+        "$params = @{",
+        '    Uri = "https://example.com/sparql"',
+        '    Method = "Post"',
+        "    Headers = @{",
+        '        "Accept" = "application/sparql-results+json"',
+        "    }",
+        '    ContentType = "application/x-www-form-urlencoded"',
+        '    Body = "query=$([System.Net.WebUtility]::UrlEncode($query))"',
+        '    OutFile = "sparql-generated.json"',
+        "}",
+        "",
+        "Invoke-WebRequest @params",
+      ];
+      const psString = lines.join("\n");
+
+      expect(psString).to.include('$query = @"');
+      expect(psString).to.include('"@');
+      expect(psString).to.include(query);
+      expect(psString).to.include('Body = "query=$([System.Net.WebUtility]::UrlEncode($query))"');
+      expect(psString).to.not.include('Body = "query=`$query"'); // Should NOT escape the variable
+      expect(psString).to.include("sparql-generated");
     });
 
     it("should format wget commands with proper line breaks", () => {

package/src/index.ts

@@ -46,6 +46,10 @@ export interface Yasqe {
   off(eventName: "autocompletionClose", handler: (instance: Yasqe) => void): void;
   on(eventName: "resize", handler: (instance: Yasqe, newSize: string) => void): void;
   off(eventName: "resize", handler: (instance: Yasqe, newSize: string) => void): void;
+  on(eventName: "saveManagedQuery", handler: () => void): void;
+  off(eventName: "saveManagedQuery", handler: () => void): void;
+  on(eventName: "downloadRqFile", handler: () => void): void;
+  off(eventName: "downloadRqFile", handler: () => void): void;
   on(eventName: string, handler: () => void): void;
 }
 
@@ -59,8 +63,11 @@ export class Yasqe extends CodeMirror {
   private abortController: AbortController | undefined;
   private queryStatus: "valid" | "error" | undefined;
   private queryBtn: HTMLButtonElement | undefined;
-  private saveBtn: HTMLButtonElement | undefined;
+  private saveBtnWrapper: HTMLDivElement | 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 +325,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 +471,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 +487,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 +543,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") {
@@ -548,24 +574,42 @@ export class Yasqe extends CodeMirror {
     }
 
     /**
-     * Draw save button (THIRD)
+     * Draw save buttons (THIRD)
      */
-    const saveBtn = document.createElement("button");
-    addClass(saveBtn, "yasqe_saveButton");
-    const saveIcon = document.createElement("i");
-    addClass(saveIcon, "fas");
-    addClass(saveIcon, "fa-save");
-    saveIcon.setAttribute("aria-hidden", "true");
-    saveBtn.appendChild(saveIcon);
-    saveBtn.onclick = () => {
-      // Call the managed query save function if available
+    const saveBtnWrapper = document.createElement("div");
+    addClass(saveBtnWrapper, "yasqe_saveWrapper");
+    saveBtnWrapper.style.display = "none"; // Hidden by default, shown when workspace is configured
+    this.saveBtnWrapper = saveBtnWrapper;
+
+    const saveManagedBtn = document.createElement("button");
+    addClass(saveManagedBtn, "yasqe_saveManagedButton");
+    const saveManagedIcon = document.createElement("i");
+    addClass(saveManagedIcon, "fas");
+    addClass(saveManagedIcon, "fa-database");
+    saveManagedIcon.setAttribute("aria-hidden", "true");
+    saveManagedBtn.appendChild(saveManagedIcon);
+    saveManagedBtn.title = "Save as managed query";
+    saveManagedBtn.setAttribute("aria-label", "Save as managed query");
+    saveManagedBtn.onclick = () => {
       this.emit("saveManagedQuery");
     };
-    saveBtn.title = "Save managed query (Ctrl+S)";
-    saveBtn.setAttribute("aria-label", "Save managed query");
-    saveBtn.style.display = "none"; // Hidden by default, shown when workspace is configured
-    this.saveBtn = saveBtn;
-    buttons.appendChild(saveBtn);
+    saveBtnWrapper.appendChild(saveManagedBtn);
+
+    const saveRqBtn = document.createElement("button");
+    addClass(saveRqBtn, "yasqe_saveRqButton");
+    const saveRqIcon = document.createElement("i");
+    addClass(saveRqIcon, "fas");
+    addClass(saveRqIcon, "fa-file-download");
+    saveRqIcon.setAttribute("aria-hidden", "true");
+    saveRqBtn.appendChild(saveRqIcon);
+    saveRqBtn.title = "Save as .rq file";
+    saveRqBtn.setAttribute("aria-label", "Save as .rq file");
+    saveRqBtn.onclick = () => {
+      this.emit("downloadRqFile");
+    };
+    saveBtnWrapper.appendChild(saveRqBtn);
+
+    buttons.appendChild(saveBtnWrapper);
 
     /**
      * Draw format btn (FOURTH)
@@ -609,6 +653,146 @@ 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 saveManagedItem = document.createElement("button");
+    saveManagedItem.className = "yasqe_hamburgerMenuItem";
+    const saveManagedIconMenu = document.createElement("i");
+    addClass(saveManagedIconMenu, "fas");
+    addClass(saveManagedIconMenu, "fa-database");
+    saveManagedIconMenu.setAttribute("aria-hidden", "true");
+    saveManagedItem.appendChild(saveManagedIconMenu);
+    const saveManagedLabel = document.createElement("span");
+    saveManagedLabel.textContent = "Save as managed query";
+    saveManagedItem.appendChild(saveManagedLabel);
+    saveManagedItem.onclick = () => {
+      this.closeHamburgerMenu();
+      this.emit("saveManagedQuery");
+    };
+    this.hamburgerMenu.appendChild(saveManagedItem);
+
+    const saveRqItem = document.createElement("button");
+    saveRqItem.className = "yasqe_hamburgerMenuItem";
+    const saveRqIconMenu = document.createElement("i");
+    addClass(saveRqIconMenu, "fas");
+    addClass(saveRqIconMenu, "fa-file-download");
+    saveRqIconMenu.setAttribute("aria-hidden", "true");
+    saveRqItem.appendChild(saveRqIconMenu);
+    const saveRqLabel = document.createElement("span");
+    saveRqLabel.textContent = "Save as .rq file";
+    saveRqItem.appendChild(saveRqLabel);
+    saveRqItem.onclick = () => {
+      this.closeHamburgerMenu();
+      this.emit("downloadRqFile");
+    };
+    this.hamburgerMenu.appendChild(saveRqItem);
+
+    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;
@@ -1407,8 +1591,8 @@ export class Yasqe extends CodeMirror {
   }
 
   public setSaveButtonVisible(visible: boolean) {
-    if (this.saveBtn) {
-      this.saveBtn.style.display = visible ? "inline-flex" : "none";
+    if (this.saveBtnWrapper) {
+      this.saveBtnWrapper.style.display = visible ? "inline-flex" : "none";
     }
   }
 
@@ -1830,7 +2014,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;
       }
 
@@ -290,7 +293,37 @@
       }
     }
 
-    .yasqe_saveButton {
+    .yasqe_saveWrapper {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      vertical-align: middle;
+      margin-left: 8px;
+
+      .yasqe_saveManagedButton,
+      .yasqe_saveRqButton {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        background: none;
+        cursor: pointer;
+        padding: 6px;
+        height: 36px;
+        width: 36px;
+        color: var(--yasgui-text-secondary, #505050);
+
+        i {
+          font-size: 20px;
+        }
+
+        &:hover {
+          color: #337ab7;
+        }
+      }
+    }
+
+    .yasqe_formatButton {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -301,7 +334,7 @@
       margin-left: 8px;
       height: 36px;
       width: 36px;
-      color: #505050;
+      color: var(--yasgui-text-secondary, #505050);
 
       i {
         font-size: 20px;
@@ -312,7 +345,7 @@
       }
     }
 
-    .yasqe_formatButton {
+    .yasqe_fullscreenButton {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -323,19 +356,23 @@
       margin-left: 8px;
       height: 36px;
       width: 36px;
-      color: #505050;
+      color: var(--yasgui-text-secondary, #505050);
 
       i {
         font-size: 20px;
       }
 
+      .fullscreenExitIcon {
+        display: none;
+      }
+
       &:hover {
         color: #337ab7;
       }
     }
 
-    .yasqe_fullscreenButton {
-      display: inline-flex;
+    .yasqe_hamburgerButton {
+      display: none;
       align-items: center;
       justify-content: center;
       border: none;
@@ -345,20 +382,83 @@
       margin-left: 8px;
       height: 36px;
       width: 36px;
-      color: #505050;
+      color: var(--yasgui-text-secondary, #505050);
 
       i {
         font-size: 20px;
       }
 
-      .fullscreenExitIcon {
-        display: none;
+      &:hover {
+        color: #337ab7;
       }
 
-      &:hover {
+      &[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_saveWrapper,
+      .yasqe_formatButton,
+      .yasqe_fullscreenButton {
+        display: none !important;
+      }
+
+      .yasqe_hamburgerButton {
+        display: inline-flex;
+      }
+    }
   }
 
   &.fullscreen {
@@ -368,7 +468,7 @@
     right: 0;
     bottom: 0;
     z-index: 9998;
-    background: white;
+    background: var(--yasgui-bg-primary, white);
     margin: 0;
     padding-top: 100px;
 
@@ -378,7 +478,7 @@
 
     .yasqe_buttons {
       position: fixed;
-      top: 110px;
+      bottom: 40px;
       right: 20px;
       z-index: 10000;
     }