@matdata/yasgui 5.0.1 → 5.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasgui",
   "description": "Yet Another SPARQL GUI",
-  "version": "5.0.1",
+  "version": "5.2.0",
   "main": "build/yasgui.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",

package/src/PersistentConfig.ts

@@ -1,5 +1,5 @@
 import { Storage as YStorage } from "@matdata/yasgui-utils";
-import Yasgui from "./";
+import Yasgui, { EndpointButton } from "./";
 import * as Tab from "./Tab";
 export var storageNamespace = "triply";
 export interface PersistedJson {
@@ -10,6 +10,7 @@ export interface PersistedJson {
   lastClosedTab: { index: number; tab: Tab.PersistedJson } | undefined;
   prefixes?: string;
   autoCaptureEnabled?: boolean;
+  customEndpointButtons?: EndpointButton[];
 }
 function getDefaults(): PersistedJson {
   return {
@@ -20,6 +21,7 @@ function getDefaults(): PersistedJson {
     lastClosedTab: undefined,
     prefixes: "",
     autoCaptureEnabled: true,
+    customEndpointButtons: [],
   };
 }
 
@@ -152,6 +154,13 @@ export default class PersistentConfig {
     this.persistedJson.autoCaptureEnabled = enabled;
     this.toStorage();
   }
+  public getCustomEndpointButtons(): EndpointButton[] {
+    return this.persistedJson.customEndpointButtons || [];
+  }
+  public setCustomEndpointButtons(buttons: EndpointButton[]) {
+    this.persistedJson.customEndpointButtons = buttons;
+    this.toStorage();
+  }
   public static clear() {
     const storage = new YStorage(storageNamespace);
     storage.removeNamespace();

package/src/Tab.ts

@@ -9,6 +9,17 @@ import * as shareLink from "./linkUtils";
 import EndpointSelect from "./endpointSelect";
 import "./tab.scss";
 import { getRandomId, default as Yasgui, YasguiRequestConfig } from "./";
+
+// Layout orientation toggle icons
+const HORIZONTAL_LAYOUT_ICON = `<svg viewBox="0 0 24 24" class="svgImg">
+  <rect x="2" y="4" width="9" height="16" stroke="currentColor" stroke-width="2" fill="none"/>
+  <rect x="13" y="4" width="9" height="16" stroke="currentColor" stroke-width="2" fill="none"/>
+</svg>`;
+
+const VERTICAL_LAYOUT_ICON = `<svg viewBox="0 0 24 24" class="svgImg">
+  <rect x="2" y="2" width="20" height="8" stroke="currentColor" stroke-width="2" fill="none"/>
+  <rect x="2" y="12" width="20" height="10" stroke="currentColor" stroke-width="2" fill="none"/>
+</svg>`;
 export interface PersistedJsonYasr extends YasrPersistentConfig {
   responseSummary: Parser.ResponseSummary;
 }
@@ -57,12 +68,16 @@ export class Tab extends EventEmitter {
   private yasqeWrapperEl: HTMLDivElement | undefined;
   private yasrWrapperEl: HTMLDivElement | undefined;
   private endpointSelect: EndpointSelect | undefined;
+  private endpointButtonsContainer: HTMLDivElement | undefined;
   private settingsModal?: TabSettingsModal;
+  private currentOrientation: "vertical" | "horizontal";
+  private orientationToggleButton?: HTMLButtonElement;
   constructor(yasgui: Yasgui, conf: PersistedJson) {
     super();
     if (!conf || conf.id === undefined) throw new Error("Expected a valid configuration to initialize tab with");
     this.yasgui = yasgui;
     this.persistentJson = conf;
+    this.currentOrientation = this.yasgui.config.orientation || "vertical";
   }
   public name() {
     return this.persistentJson.name;
@@ -81,6 +96,9 @@ export class Tab extends EventEmitter {
     this.rootEl.setAttribute("role", "tabpanel");
     this.rootEl.setAttribute("aria-labelledby", "tab-" + this.persistentJson.id);
 
+    // Apply orientation class
+    addClass(this.rootEl, `orientation-${this.currentOrientation}`);
+
     // We group controlbar and Yasqe, so that users can easily .appendChild() to the .editorwrapper div
     // to add a div that goes alongside the controlbar and editor, while YASR still goes full width
     // Useful for adding an infos div that goes alongside the editor without needing to rebuild the whole Yasgui class
@@ -99,6 +117,7 @@ export class Tab extends EventEmitter {
 
     //yasr
     this.yasrWrapperEl = document.createElement("div");
+    this.yasrWrapperEl.className = "yasrWrapperEl";
 
     this.initTabSettingsMenu();
     this.rootEl.appendChild(editorWrapper);
@@ -222,10 +241,63 @@ export class Tab extends EventEmitter {
   }
   private initControlbar() {
     this.initEndpointSelectField();
+    this.initOrientationToggle();
+    this.initEndpointButtons();
     if (this.yasgui.config.endpointInfo && this.controlBarEl) {
       this.controlBarEl.appendChild(this.yasgui.config.endpointInfo());
     }
   }
+
+  private initOrientationToggle() {
+    if (!this.controlBarEl) return;
+
+    this.orientationToggleButton = document.createElement("button");
+    this.orientationToggleButton.className = "tabContextButton orientationToggle";
+    this.orientationToggleButton.setAttribute("aria-label", "Toggle layout orientation");
+    this.orientationToggleButton.title = "Toggle layout orientation";
+
+    this.updateOrientationToggleIcon();
+
+    this.orientationToggleButton.addEventListener("click", () => {
+      this.toggleOrientation();
+    });
+
+    this.controlBarEl.appendChild(this.orientationToggleButton);
+  }
+
+  private updateOrientationToggleIcon() {
+    if (!this.orientationToggleButton) return;
+
+    // Show the icon for the layout we'll switch TO (not the current layout)
+    this.orientationToggleButton.innerHTML =
+      this.currentOrientation === "vertical" ? HORIZONTAL_LAYOUT_ICON : VERTICAL_LAYOUT_ICON;
+    this.orientationToggleButton.title =
+      this.currentOrientation === "vertical" ? "Switch to horizontal layout" : "Switch to vertical layout";
+  }
+
+  public toggleOrientation() {
+    if (!this.rootEl) return;
+
+    // Remove old orientation class
+    removeClass(this.rootEl, `orientation-${this.currentOrientation}`);
+
+    // Toggle orientation
+    this.currentOrientation = this.currentOrientation === "vertical" ? "horizontal" : "vertical";
+
+    // Add new orientation class
+    addClass(this.rootEl, `orientation-${this.currentOrientation}`);
+
+    // Update button icon
+    this.updateOrientationToggleIcon();
+
+    // Refresh components to adjust to new layout
+    if (this.yasqe) {
+      this.yasqe.refresh();
+    }
+    if (this.yasr) {
+      this.yasr.refresh();
+    }
+  }
   public getYasqe() {
     return this.yasqe;
   }
@@ -253,6 +325,54 @@ export class Tab extends EventEmitter {
     });
   }
 
+  private initEndpointButtons() {
+    if (!this.controlBarEl) throw new Error("Need to initialize wrapper elements before drawing endpoint buttons");
+
+    // Create container if it doesn't exist
+    if (!this.endpointButtonsContainer) {
+      this.endpointButtonsContainer = document.createElement("div");
+      addClass(this.endpointButtonsContainer, "endpointButtonsContainer");
+      this.controlBarEl.appendChild(this.endpointButtonsContainer);
+    }
+
+    this.refreshEndpointButtons();
+  }
+
+  public refreshEndpointButtons() {
+    if (!this.endpointButtonsContainer) return;
+
+    // Clear existing buttons
+    this.endpointButtonsContainer.innerHTML = "";
+
+    // Merge config buttons with custom user buttons
+    const configButtons = this.yasgui.config.endpointButtons || [];
+    const customButtons = this.yasgui.persistentConfig.getCustomEndpointButtons();
+    const allButtons = [...configButtons, ...customButtons];
+
+    if (allButtons.length === 0) {
+      // Hide container if no buttons
+      this.endpointButtonsContainer.style.display = "none";
+      return;
+    }
+
+    // Show container
+    this.endpointButtonsContainer.style.display = "flex";
+
+    allButtons.forEach((buttonConfig) => {
+      const button = document.createElement("button");
+      addClass(button, "endpointButton");
+      button.textContent = buttonConfig.label;
+      button.title = `Set endpoint to ${buttonConfig.endpoint}`;
+      button.setAttribute("aria-label", `Set endpoint to ${buttonConfig.endpoint}`);
+
+      button.addEventListener("click", () => {
+        this.setEndpoint(buttonConfig.endpoint);
+      });
+
+      this.endpointButtonsContainer!.appendChild(button);
+    });
+  }
+
   private checkEndpointForCors(endpoint: string) {
     if (this.yasgui.config.corsProxy && !(endpoint in Yasgui.corsEnabled)) {
       const askUrl = new URL(endpoint);
@@ -356,8 +476,13 @@ export class Tab extends EventEmitter {
   }
 
   private initYasqe() {
+    // Set theme based on current yasgui theme
+    const currentTheme = this.yasgui.getTheme();
+    const cmTheme = currentTheme === "dark" ? "material-palenight" : "default";
+
     const yasqeConf: Partial<YasqeConfig> = {
       ...this.yasgui.config.yasqe,
+      theme: cmTheme,
       value: this.persistentJson.yasqe.value,
       editorHeight: this.persistentJson.yasqe.editorHeight ? this.persistentJson.yasqe.editorHeight : undefined,
       persistenceId: null, //yasgui handles persistent storing

package/src/TabElements.scss

@@ -18,6 +18,33 @@ $minTabHeight: 35px;
       border-bottom: 2px solid transparent;
       box-sizing: border-box;
     }
+    .themeToggle {
+      cursor: pointer;
+      height: 100%;
+      margin-left: auto;
+      margin-right: 10px;
+      padding: 6px 8px;
+      background: transparent;
+      border: none;
+      color: var(--yasgui-button-text, #505050);
+      fill: var(--yasgui-button-text, #505050);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+
+      &:hover {
+        color: var(--yasgui-button-hover, #000);
+        fill: var(--yasgui-button-hover, #000);
+        background: var(--yasgui-bg-secondary, #f7f7f7);
+      }
+
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
     .addTab {
       cursor: pointer;
       height: 100%;
@@ -80,7 +107,7 @@ $minTabHeight: 35px;
       }
       &.active a {
         border-bottom-color: $activeColor;
-        color: #555;
+        color: var(--yasgui-text-primary, #555);
       }
       input {
         display: none;
@@ -100,7 +127,7 @@ $minTabHeight: 35px;
       }
       a {
         font-weight: 600;
-        color: color.adjust(#555, $lightness: 20%);
+        color: var(--yasgui-text-secondary, color.adjust(#555, $lightness: 20%));
         font-size: 15px;
         line-height: 1.5rem;
         font-weight: 500;
@@ -110,17 +137,17 @@ $minTabHeight: 35px;
         overflow: hidden;
         &:hover {
           border-bottom-color: $hoverColor;
-          color: #555;
+          color: var(--yasgui-text-primary, #555);
         }
         &:focus {
           border-bottom-color: #faa857;
-          color: #555;
+          color: var(--yasgui-text-primary, #555);
         }
         .closeTab {
-          color: #000;
+          color: var(--yasgui-text-primary, #000);
           margin-left: 7px;
           font-size: 15px;
-          text-shadow: 0 1px 0 #fff;
+          text-shadow: 0 1px 0 var(--yasgui-bg-primary, #fff);
           opacity: 0.2;
           font-weight: 700;
           padding: 2px;

package/src/TabElements.ts

@@ -3,6 +3,15 @@ import TabContextMenu from "./TabContextMenu";
 import { hasClass, addClass, removeClass } from "@matdata/yasgui-utils";
 import sortablejs from "sortablejs";
 import "./TabElements.scss";
+
+// Theme toggle icons
+const MOON_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
+  <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/>
+</svg>`;
+
+const SUN_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
+  <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
+</svg>`;
 export interface TabList {}
 export class TabListEl {
   private tabList: TabList;

package/src/TabSettingsModal.scss

@@ -1,3 +1,28 @@
+.themeToggle {
+  cursor: pointer;
+  background: transparent;
+  color: inherit;
+  border: none;
+  padding: 6px 8px;
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  &:active {
+    opacity: 0.5;
+  }
+}
+
 .tabPrefixButton {
   cursor: pointer;
   background: transparent;
@@ -35,7 +60,7 @@
 }
 
 .tabSettingsModal {
-  background: white;
+  background: var(--yasgui-bg-primary, white);
   border-radius: 8px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   max-width: 800px;
@@ -51,12 +76,13 @@
   justify-content: space-between;
   align-items: center;
   padding: 20px;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--yasgui-border-color, #e0e0e0);
 
   h2 {
     margin: 0;
     font-size: 20px;
     font-weight: 600;
+    color: var(--yasgui-text-primary, #000);
   }
 
   .closeButton {
@@ -65,13 +91,13 @@
     font-size: 32px;
     line-height: 1;
     cursor: pointer;
-    color: #666;
+    color: var(--yasgui-text-secondary, #666);
     padding: 0;
     width: 32px;
     height: 32px;
 
     &:hover {
-      color: #333;
+      color: var(--yasgui-text-primary, #333);
     }
   }
 }
@@ -86,7 +112,7 @@
   display: flex;
   gap: 10px;
   margin-bottom: 20px;
-  border-bottom: 2px solid #e0e0e0;
+  border-bottom: 2px solid var(--yasgui-border-color, #e0e0e0);
 }
 
 .modalTabButton {
@@ -96,18 +122,18 @@
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
-  color: #666;
+  color: var(--yasgui-text-secondary, #666);
   border-bottom: 3px solid transparent;
   margin-bottom: -2px;
   transition: all 0.2s;
 
   &:hover {
-    color: #337ab7;
+    color: var(--yasgui-accent-color, #337ab7);
   }
 
   &.active {
-    color: #337ab7;
-    border-bottom-color: #337ab7;
+    color: var(--yasgui-accent-color, #337ab7);
+    border-bottom-color: var(--yasgui-accent-color, #337ab7);
   }
 }
 
@@ -128,11 +154,12 @@
   margin-bottom: 8px;
   font-size: 14px;
   display: block;
+  color: var(--yasgui-text-primary, #000);
 }
 
 .settingsHelp {
   font-size: 12px;
-  color: #666;
+  color: var(--yasgui-text-secondary, #666);
   margin-bottom: 10px;
   font-style: italic;
 }
@@ -140,13 +167,15 @@
 .settingsSelect {
   width: 100%;
   padding: 8px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--yasgui-input-border, #ccc);
   border-radius: 4px;
   font-size: 14px;
+  background-color: var(--yasgui-bg-secondary, white);
+  color: var(--yasgui-text-primary, #000);
 
   &:focus {
     outline: none;
-    border-color: #337ab7;
+    border-color: var(--yasgui-input-focus, #337ab7);
     box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.1);
   }
 }
@@ -154,17 +183,19 @@
 .prefixTextarea {
   width: 100%;
   padding: 10px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--yasgui-input-border, #ccc);
   border-radius: 4px;
   font-family: monospace;
   font-size: 13px;
   resize: vertical;
   box-sizing: border-box;
   min-height: 200px;
+  background-color: var(--yasgui-bg-secondary, white);
+  color: var(--yasgui-text-primary, #000);
 
   &:focus {
     outline: none;
-    border-color: #337ab7;
+    border-color: var(--yasgui-input-focus, #337ab7);
     box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.1);
   }
 }
@@ -186,12 +217,13 @@
     font-size: 14px;
     user-select: none;
     margin: 0;
+    color: var(--yasgui-text-primary, #000);
   }
 }
 
 .modalFooter {
   padding: 15px 20px;
-  border-top: 1px solid #e0e0e0;
+  border-top: 1px solid var(--yasgui-border-color, #e0e0e0);
   display: flex;
   justify-content: flex-end;
   gap: 10px;
@@ -208,19 +240,121 @@
 }
 
 .primaryButton {
-  background: #337ab7;
+  background: var(--yasgui-accent-color, #337ab7);
   color: white;
 
   &:hover {
-    background: #286090;
+    background: var(--yasgui-link-hover, #286090);
   }
 }
 
 .secondaryButton {
-  background: #e0e0e0;
-  color: #333;
+  background: var(--yasgui-bg-tertiary, #e0e0e0);
+  color: var(--yasgui-text-primary, #333);
 
   &:hover {
-    background: #d0d0d0;
+    background: var(--yasgui-border-color, #d0d0d0);
+  }
+}
+
+.endpointButtonsList {
+  margin: 15px 0;
+  border: 1px solid var(--yasgui-border-color, #ddd);
+  border-radius: 4px;
+  padding: 10px;
+  background: var(--yasgui-bg-secondary, #f7f7f7);
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.endpointButtonItem {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  margin-bottom: 8px;
+  background: var(--yasgui-bg-primary, #fff);
+  border: 1px solid var(--yasgui-border-color, #ddd);
+  border-radius: 3px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .buttonLabel {
+    font-weight: 600;
+    min-width: 100px;
+    color: var(--yasgui-text-primary, #333);
+  }
+
+  .buttonEndpoint {
+    flex: 1;
+    margin-left: 10px;
+    color: var(--yasgui-text-secondary, #666);
+    font-size: 13px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .removeButton {
+    margin-left: auto;
+    background: transparent;
+    border: none;
+    color: var(--yasgui-error-color, #d32f2f);
+    font-size: 20px;
+    cursor: pointer;
+    padding: 0 8px;
+    line-height: 1;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+}
+
+.emptyMessage {
+  color: var(--yasgui-text-muted, #999);
+  font-style: italic;
+  text-align: center;
+  padding: 20px;
+}
+
+.addEndpointButtonForm {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+
+  input {
+    flex: 1;
+    padding: 8px 12px;
+    border: 1px solid var(--yasgui-border-color, #ddd);
+    border-radius: 3px;
+    background: var(--yasgui-bg-primary, #fff);
+    color: var(--yasgui-text-primary, #333);
+    font-size: 14px;
+
+    &:focus {
+      outline: none;
+      border-color: var(--yasgui-accent-color, #337ab7);
+    }
+
+    &::placeholder {
+      color: var(--yasgui-text-muted, #999);
+    }
+  }
+
+  .addEndpointButton {
+    padding: 8px 16px;
+    background: var(--yasgui-accent-color, #337ab7);
+    color: white;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 14px;
+    white-space: nowrap;
+
+    &:hover {
+      background: var(--yasgui-link-hover, #286090);
+    }
   }
 }