tosijs-ui 1.0.0

package/dist/mapbox.js

@@ -0,0 +1,161 @@
+/*#
+# map
+
+A [mapboxgl](https://docs.mapbox.com/mapbox-gl-js/api/) wrapper.
+
+```js
+const pickStyle = preview.querySelector('select')
+const mapbox = preview.querySelector('xin-map')
+const here = preview.querySelector('button')
+
+pickStyle.addEventListener('change', () => {
+  mapbox.mapStyle = pickStyle.value
+})
+
+function getUserGPSCoordinates() {
+  return new Promise((resolve) => {
+    // Check if geolocation is supported
+    if (!navigator.geolocation) {
+      console.log("Geolocation is not supported by this browser.");
+      resolve(null);
+      return;
+    }
+
+    // Request position with options
+    navigator.geolocation.getCurrentPosition(
+      // Success callback
+      (position) => {
+        resolve({
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude
+        });
+      },
+      // Error callback
+      (error) => {
+        console.log(`Error getting location: ${error.message}`);
+        resolve(null);
+      },
+      // Options
+      {
+        enableHighAccuracy: true,  // Request high accuracy if available
+        timeout: 10000,            // Time to wait for position (10 seconds)
+        maximumAge: 0              // Don't use cached position
+      }
+    );
+  });
+}
+
+here.addEventListener('click', async () => {
+  const location = await getUserGPSCoordinates()
+  if (location) {
+    mapbox.coords = `${location.latitude},${location.longitude},12`
+  }
+})
+```
+```html
+<!-- please don't abuse my mapbox token -->
+<xin-map
+  style="width: 100%; height: 100%"
+  coords="14.0093606,120.995083,17"
+  token="pk.eyJ1IjoicG9kcGVyc29uIiwiYSI6ImNqc2JlbWU0bjA1ZmY0YW5ycHZod3VhbWcifQ.arvqfpOqMgFYkKgQ35UScA"
+  map-style="mapbox://styles/mapbox/streets-v12"
+></xin-map>
+<select>
+  <option selected value="mapbox://styles/mapbox/streets-v12">Streets</option>
+  <option value="mapbox://styles/mapbox/satellite-v9">Satellite</option>
+  <option value="mapbox://styles/mapbox/light-v11">Light</option>
+  <option value="mapbox://styles/mapbox/dark-v11">Dark</option>
+  <option value="mapbox://styles/mapbox/outdoors-v12">Outdoors</option>
+</select>
+<button>
+  <xin-icon icon="mapPin"></xin-icon>
+  <span>Your Location</span>
+</button>
+```
+```css
+.preview button {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.preview select {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+}
+```
+
+There's no need to learn new APIs or write wrappers, just access the element's `map` property
+and [use the standard mapbox APIs directly](https://docs.mapbox.com/api/maps/styles/).
+*/
+import { Component as WebComponent, elements } from 'xinjs';
+import { styleSheet, scriptTag } from './via-tag';
+const { div } = elements;
+export class MapBox extends WebComponent {
+    coords = '65.01715565258993,25.48081004203459,12';
+    content = div({ style: { width: '100%', height: '100%' } });
+    get map() {
+        return this._map;
+    }
+    mapStyle = 'mapbox://styles/mapbox/streets-v12';
+    token = '';
+    static mapboxCSSAvailable;
+    static mapboxAvailable;
+    _map;
+    static styleSpec = {
+        ':host': {
+            display: 'inline-block',
+            position: 'relative',
+            width: '400px',
+            height: '400px',
+            textAlign: 'left',
+        },
+    };
+    constructor() {
+        super();
+        this.initAttributes('coords', 'token', 'mapStyle');
+        if (MapBox.mapboxCSSAvailable === undefined) {
+            MapBox.mapboxCSSAvailable = styleSheet('https://api.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css').catch((e) => {
+                console.error('failed to load mapbox-gl.css', e);
+            });
+            MapBox.mapboxAvailable = scriptTag('https://api.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js').catch((e) => {
+                console.error('failed to load mapbox-gl.js', e);
+            });
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.token) {
+            console.error('mapbox requires an access token which you can provide via the token attribute');
+        }
+    }
+    render() {
+        super.render();
+        if (!this.token) {
+            return;
+        }
+        const { div } = this.parts;
+        const [long, lat, zoom] = this.coords.split(',').map((x) => Number(x));
+        if (this.map) {
+            this.map.remove();
+        }
+        MapBox.mapboxAvailable.then(({ mapboxgl }) => {
+            console.log("%cmapbox may complain about missing css -- don't panic!", 'background: orange; color: black; padding: 0 5px;');
+            mapboxgl.accessToken = this.token;
+            this._map = new mapboxgl.Map({
+                container: div,
+                style: this.mapStyle,
+                zoom,
+                center: [lat, long],
+            });
+            this._map.on('render', () => this._map.resize());
+        });
+    }
+}
+export const mapBox = MapBox.elementCreator({
+    tag: 'xin-map',
+});

package/dist/markdown-viewer.d.ts

@@ -0,0 +1,17 @@
+import { Component, ElementCreator } from 'tosijs';
+import { MarkedOptions } from 'marked';
+export declare class MarkdownViewer extends Component {
+    src: string;
+    value: string;
+    content: null;
+    elements: boolean;
+    context: {
+        [key: string]: any;
+    };
+    options: MarkedOptions;
+    constructor();
+    connectedCallback(): void;
+    didRender: (() => void) | (() => Promise<void>);
+    render(): void;
+}
+export declare const markdownViewer: ElementCreator<MarkdownViewer>;

package/dist/markdown-viewer.js

@@ -0,0 +1,173 @@
+import { Component, xin } from 'xinjs';
+import { marked } from 'marked';
+/*#
+# markdown
+
+`<xin-md>` renders markdown using [marked](https://www.npmjs.com/package/marked).
+
+`<xin-md>` renders [markdown](https://www.markdownguide.org/) anywhere, either using the
+`src` attribute to load the file asynchronously, or rendering the text inside it.
+
+```html
+<xin-md>
+## hello
+world
+</xin-md>
+```
+```css
+xin-md {
+  display: block;
+  padding: var(--spacing);
+}
+```
+
+Note that, by default, `<xin-md>` will use its `textContent` (not its `innerHTML`) as its source.
+
+## rendering markdown from a url
+
+Again, like an `<img>` tag, you can simply set a `<xin-md>`'s `src` attribute to a URL pointing
+to markdown source and it will load it asynchronously and render it.
+
+```
+<xin-md src="/path/to/file.md">
+```
+
+## setting its `value`
+
+Or, just set the element's `value` and it will render it for you. You can try
+this in the console, e.g.
+
+```
+$('.preview xin-md').value = 'testing\n\n## this is a test'
+```
+
+## elements
+
+`<xin-md>` also (optionally) allows the embedding of inline HTML elements without blocking markdown
+rendering, so that you can embed specific elements while retaining markdown. You need to explicitly set
+the `elements` property, and for markdown rendering not to be blocked, the html elements need to
+start on a new line and not be indented. E.g.
+
+```html
+<xin-md elements>
+<form>
+### this is a form
+<label>
+fill in this field.
+**It's important!**
+<input>
+</label>
+</form>
+</xin-md>
+```
+
+In this case `<xin-md>` uses its `innerHTML` and not its `textContent`.
+
+## context and template variables
+
+`<xin-md>` also supports **template** values. You need to provide data to the element in the form
+of `context` (an arbitrary object, or a JSON string), and then embed the template text using
+handlebars-style doubled curly braces, e.g. `{{path.to.value}}`.
+
+If no value is found, the original text is passed through.
+
+Finally, note that template substitution occurs *before* markdown transformation, which means you can
+pass context data through to HTML elements.
+
+```html
+<xin-md
+  elements
+  context='{"title": "template example", "foo": {"bar": 17}, "nested": "*work*: {{foo.bar}}"}'
+>
+## {{title}}
+
+The magic number is <input type="number" value={{foo.bar}}>
+
+Oh, and nested templates {{nested}}.
+</xin-md>
+```
+*/
+function populate(basePath, source) {
+    if (source == null) {
+        source = '';
+    }
+    else if (typeof source !== 'string') {
+        source = String(source);
+    }
+    return source.replace(/\{\{([^}]+)\}\}/g, (original, prop) => {
+        const value = xin[`${basePath}${prop.startsWith('[') ? prop : '.' + prop}`];
+        return value === undefined ? original : populate(basePath, String(value));
+    });
+}
+export class MarkdownViewer extends Component {
+    src = '';
+    value = '';
+    content = null;
+    elements = false;
+    context = {};
+    constructor() {
+        super();
+        this.initAttributes('src', 'elements', 'context');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.src !== '') {
+            ;
+            (async () => {
+                const request = await fetch(this.src);
+                this.value = await request.text();
+            })();
+        }
+        else if (this.value === '') {
+            if (this.elements) {
+                this.value = this.innerHTML;
+            }
+            else {
+                this.value = this.textContent != null ? this.textContent : '';
+            }
+        }
+    }
+    didRender = () => {
+        /* do not care */
+    };
+    render() {
+        super.render();
+        xin[this.instanceId] =
+            typeof this.context === 'string' ? JSON.parse(this.context) : this.context;
+        const source = populate(this.instanceId, this.value);
+        if (this.elements) {
+            const chunks = source
+                .split('\n')
+                .reduce((chunks, line) => {
+                if (line.startsWith('<') || chunks.length === 0) {
+                    chunks.push(line);
+                }
+                else {
+                    const lastChunk = chunks[chunks.length - 1];
+                    if (!lastChunk.startsWith('<') || !lastChunk.endsWith('>')) {
+                        chunks[chunks.length - 1] += '\n' + line;
+                    }
+                    else {
+                        chunks.push(line);
+                    }
+                }
+                return chunks;
+            }, []);
+            this.innerHTML = chunks
+                .map((chunk) => chunk.startsWith('<') && chunk.endsWith('>')
+                ? chunk
+                : marked(chunk, { mangle: false, headerIds: false }))
+                .join('');
+        }
+        else {
+            this.innerHTML = marked(source, {
+                mangle: false,
+                headerIds: false,
+            });
+        }
+        this.didRender();
+    }
+}
+export const markdownViewer = MarkdownViewer.elementCreator({
+    tag: 'xin-md',
+});

package/dist/match-shortcut.d.ts

@@ -0,0 +1,9 @@
+interface KeyboardEventLike {
+    key: string;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    altKey: boolean;
+    shiftKey: boolean;
+}
+export declare const matchShortcut: (keystroke: KeyboardEventLike, shortcut: string) => boolean;
+export {};

package/dist/match-shortcut.js

@@ -0,0 +1,13 @@
+export const matchShortcut = (keystroke, shortcut) => {
+    shortcut = shortcut.toLocaleLowerCase();
+    const ctrlKey = !!shortcut.match(/\^|ctrl/);
+    const metaKey = !!shortcut.match(/⌘|meta/);
+    const altKey = !!shortcut.match(/⌥|⎇|alt|option/);
+    const shiftKey = !!shortcut.match(/⇧|shift/);
+    const baseKey = shortcut.slice(-1);
+    return (keystroke.key === baseKey &&
+        keystroke.metaKey === metaKey &&
+        keystroke.ctrlKey === ctrlKey &&
+        keystroke.altKey === altKey &&
+        keystroke.shiftKey === shiftKey);
+};

package/dist/match-shortcut.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/match-shortcut.test.js

@@ -0,0 +1,194 @@
+import { test, expect } from 'bun:test';
+import { matchShortcut } from './match-shortcut';
+test('simple shortcuts', () => {
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: false,
+        metaKey: false,
+        key: 'x',
+    }, 'X')).toBe(true);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: false,
+        metaKey: false,
+        key: 'x',
+    }, 'x')).toBe(true);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: false,
+        metaKey: false,
+        key: 'x',
+    }, 'y')).toBe(false);
+});
+test('ctrl keys', () => {
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: true,
+        altKey: false,
+        metaKey: false,
+        key: 'x',
+    }, 'ctrl-x')).toBe(true);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: true,
+        altKey: false,
+        metaKey: false,
+        key: 'x',
+    }, '^X')).toBe(true);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: true,
+        altKey: false,
+        metaKey: false,
+        key: 'x',
+    }, 'x')).toBe(false);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: false,
+        metaKey: false,
+        key: 'x',
+    }, '^X')).toBe(false);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: false,
+        metaKey: true,
+        key: 'x',
+    }, 'ctrl-x')).toBe(false);
+});
+test('meta keys', () => {
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: false,
+        metaKey: true,
+        key: 'x',
+    }, 'meta-x')).toBe(true);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: false,
+        metaKey: true,
+        key: 'x',
+    }, '⌘-X')).toBe(true);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: false,
+        metaKey: true,
+        key: 'x',
+    }, 'x')).toBe(false);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: false,
+        metaKey: false,
+        key: 'x',
+    }, '⌘-X')).toBe(false);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: true,
+        altKey: false,
+        metaKey: false,
+        key: 'x',
+    }, 'meta-x')).toBe(false);
+});
+test('alt keys', () => {
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: true,
+        metaKey: false,
+        key: 'x',
+    }, '⌥x')).toBe(true);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: true,
+        metaKey: false,
+        key: 'x',
+    }, 'alt-X')).toBe(true);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: true,
+        metaKey: false,
+        key: 'x',
+    }, '⎇-x')).toBe(true);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: true,
+        metaKey: false,
+        key: 'x',
+    }, 'option-X')).toBe(true);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: true,
+        metaKey: false,
+        key: 'x',
+    }, 'x')).toBe(false);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: false,
+        metaKey: false,
+        key: 'x',
+    }, 'option-X')).toBe(false);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: true,
+        altKey: false,
+        metaKey: false,
+        key: 'x',
+    }, '⎇x')).toBe(false);
+});
+test('chorded modifiers', () => {
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: true,
+        metaKey: true,
+        key: 'x',
+    }, '⌘⌥x')).toBe(true);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: true,
+        metaKey: true,
+        key: 'x',
+    }, '⌘⌥x')).toBe(true);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: false,
+        metaKey: true,
+        key: 'x',
+    }, '⌘⌥x')).toBe(false);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: false,
+        metaKey: true,
+        key: 'x',
+    }, 'alt-meta-x')).toBe(false);
+    expect(matchShortcut({
+        shiftKey: false,
+        ctrlKey: false,
+        altKey: true,
+        metaKey: false,
+        key: 'x',
+    }, '⌘⌥x')).toBe(false);
+    expect(matchShortcut({
+        shiftKey: true,
+        ctrlKey: false,
+        altKey: true,
+        metaKey: false,
+        key: 'x',
+    }, '⌘⌥x')).toBe(false);
+});

package/dist/menu.d.ts

@@ -0,0 +1,60 @@
+import { Component, PartsMap } from 'tosijs';
+import { FloatPosition } from './pop-float';
+import { SvgIcon } from './icons';
+export type ActionCallback = () => void | Promise<void>;
+export interface MenuAction {
+    caption: string;
+    shortcut?: string;
+    checked?: () => boolean;
+    enabled?: () => boolean;
+    action: ActionCallback | string;
+    icon?: string | Element;
+}
+export interface SubMenu {
+    caption: string;
+    checked?: () => boolean;
+    enabled?: () => boolean;
+    menuItems: MenuItem[];
+    icon?: string | Element;
+}
+export type MenuSeparator = null;
+export type MenuItem = MenuAction | SubMenu | MenuSeparator;
+export declare const createMenuAction: (item: MenuAction, options: PopMenuOptions) => HTMLElement;
+export declare const createSubMenu: (item: SubMenu, options: PopMenuOptions) => HTMLElement;
+export declare const createMenuItem: (item: MenuItem, options: PopMenuOptions) => HTMLElement;
+export declare const menu: (options: PopMenuOptions) => HTMLDivElement;
+interface PoppedMenu {
+    target: HTMLElement;
+    menu: HTMLElement;
+}
+export declare const removeLastMenu: (depth?: number) => PoppedMenu | undefined;
+export interface PopMenuOptions {
+    target: HTMLElement;
+    menuItems: MenuItem[];
+    width?: string | number;
+    position?: FloatPosition;
+    submenuDepth?: number;
+    submenuOffset?: {
+        x: number;
+        y: number;
+    };
+    localized?: boolean;
+}
+export declare const popMenu: (options: PopMenuOptions) => void;
+interface XinMenuParts extends PartsMap {
+    trigger: HTMLButtonElement;
+    icon: SvgIcon;
+}
+export declare class XinMenu extends Component<XinMenuParts> {
+    menuItems: MenuItem[];
+    menuWidth: string;
+    localized: boolean;
+    showMenu: (event: Event) => void;
+    content: () => HTMLButtonElement;
+    handleShortcut: (event: KeyboardEvent) => Promise<void>;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+export declare const xinMenu: import("tosijs").ElementCreator<Component<PartsMap>>;
+export {};