tosijs-ui 1.0.1 → 1.0.2

package/dist/track-drag.js

@@ -1,143 +0,0 @@
-import { elements } from 'xinjs';
-/*#
-# trackDrag
-
-Sometimes you want to track a mouse-drag or touch-drag operation without messing around.
-This is how the resizeable columns in `<xin-table>` work.
-
-Just call `trackDrag(event, (dx, dy, event) => { ... })` and you'll get updates on corresponding events until
-you return `true` from the event-handler (or, in the case of `touch` events, the last `touch` ends).
-For mouse events, a "tracker" element is thrown up in front of everything for the event.
-
-```html
-<p>
-  Try dragging the squares…<br>
-  (You can drag them separately with multi-touch!)
-</p>
-<div class="draggable" style="top: 20px; left: 40px; background: #f008"></div>
-<div class="draggable" style="left: 40%; bottom: 30%; background: #0f08"></div>
-<div class="draggable" style="bottom: 30px; right: 10px; background: #00f8"></div>
-```
-```css
-.preview {
-  touch-action: none;
-}
-
-.draggable {
-  content: ' ';
-  position: absolute;
-  width: 50px;
-  height: 50px;
-  cursor: move;
-}
-
-.preview p {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translateX(-50%) translateY(-50%);
-}
-```
-```js
-const { trackDrag } = xinjsui
-
-function dragItem(event) {
-  const draggable = event.target
-  if (draggable.classList.contains('draggable')) {
-    const x = draggable.offsetLeft
-    const y = draggable.offsetTop
-    trackDrag(event, (dx, dy, event) => {
-      draggable.style.left = (x + dx) + 'px'
-      draggable.style.top = (y + dy) + 'px'
-      draggable.style.bottom = 'auto'
-      draggable.style.right = 'auto'
-      return event.type === 'mouseup'
-    })
-  }
-}
-
-preview.addEventListener('mousedown', dragItem )
-preview.addEventListener('touchstart', dragItem, { passive: true } )
-```
-
-For `touch` events, `dx` and `dy` are based on tracking `event.changedTouches[0]` which
-is almost certainly what you want.
-
-To handle multi-touch gestures you will need to track the touches yourself.
-
-## bringToFront
-
-`bringToFront(element: HTMLElement, selector = 'body *')`  gives the element the highest
-`z-index` of any element matching the selector (which is passed to findHighestZ).
-
-## findHighestZ
-
-`findHighestZ(selector = 'body *'): number` returns the the highest `z-index` of any element
-matching `selector`.
-*/
-const TRACKER = elements.div({
-    style: {
-        content: ' ',
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-    },
-});
-const PASSIVE = { passive: true };
-export const trackDrag = (event, callback, cursor = 'move') => {
-    const isTouchEvent = event.type.startsWith('touch');
-    if (!isTouchEvent) {
-        const origX = event.clientX;
-        const origY = event.clientY;
-        TRACKER.style.cursor = cursor;
-        bringToFront(TRACKER);
-        document.body.append(TRACKER);
-        const wrappedCallback = (event) => {
-            const dx = event.clientX - origX;
-            const dy = event.clientY - origY;
-            if (callback(dx, dy, event) === true) {
-                TRACKER.removeEventListener('mousemove', wrappedCallback);
-                TRACKER.removeEventListener('mouseup', wrappedCallback);
-                TRACKER.remove();
-            }
-        };
-        TRACKER.addEventListener('mousemove', wrappedCallback, PASSIVE);
-        TRACKER.addEventListener('mouseup', wrappedCallback, PASSIVE);
-    }
-    else if (event instanceof TouchEvent) {
-        const touch = event.changedTouches[0];
-        const touchId = touch.identifier;
-        const origX = touch.clientX;
-        const origY = touch.clientY;
-        const target = event.target;
-        let dx = 0;
-        let dy = 0;
-        const wrappedCallback = (event) => {
-            const touch = [...event.touches].find((touch) => touch.identifier === touchId);
-            if (touch !== undefined) {
-                dx = touch.clientX - origX;
-                dy = touch.clientY - origY;
-            }
-            if (event.type === 'touchmove') {
-                event.stopPropagation();
-                event.preventDefault();
-            }
-            if (callback(dx, dy, event) === true || touch === undefined) {
-                target.removeEventListener('touchmove', wrappedCallback);
-                target.removeEventListener('touchend', wrappedCallback);
-                target.removeEventListener('touchcancel', wrappedCallback);
-            }
-        };
-        target.addEventListener('touchmove', wrappedCallback);
-        target.addEventListener('touchend', wrappedCallback, PASSIVE);
-        target.addEventListener('touchcancel', wrappedCallback, PASSIVE);
-    }
-};
-export const findHighestZ = (selector = 'body *') => [...document.querySelectorAll(selector)]
-    .map((elt) => parseFloat(getComputedStyle(elt).zIndex))
-    .reduce((z, highest) => (isNaN(z) || Number(z) < highest ? highest : Number(z)), 0);
-export const bringToFront = (element, selector = 'body *') => {
-    element.style.zIndex = String(findHighestZ(selector) + 1);
-};

package/dist/version.js

@@ -1 +0,0 @@
-export const version = '0.9.15';

package/dist/via-tag.js

@@ -1,102 +0,0 @@
-/*#
-# scriptTag & styleSheet
-
-## scriptTag
-
-If you need to load an old school (cjs) javascript or css library via cdn then use these two functions.
-
-`xinjs-ui` uses this library to implement the `<xin-code>`, `<xin-lottie>`, and `<xin-map>`
-elements.
-
-`scriptTag()` and `styleSheet()` return promises that resolve `globalThis` when the module in question
-has loaded and otherwise behave as much like `import()` as possible.
-
-This example uses `scriptTag` and `styleSheet` to load [quilljs](https://quilljs.com) on-the-fly.
-
-```js
-const { elements } = xinjs
-const { scriptTag, styleSheet } = xinjsui
-
-const toolbarOptions = [
-  [{ header: [1, 2, 3, 4, false] }],
-  ['blockquote', 'code-block'],
-  [{ 'align': [] }],
-  ['bold', 'italic', 'strike'],
-  ['link', 'image', 'video'],
-  [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
-  [{ 'indent': '-1'}, { 'indent': '+1' }],
-  ['clean']
-]
-
-;(async () => {
-  await Promise.all([
-    styleSheet('https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.core.css'),
-    styleSheet('https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css'),
-  ])
-
-  const container = elements.div()
-  const { Quill } = await scriptTag('https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js')
-  preview.append(container)
-
-  const quill = new Quill(container, {
-    debug: 'info',
-    modules: {
-      toolbar: toolbarOptions,
-    },
-    theme: 'snow',
-  })
-})()
-```
-
-Note that `scriptTag` will resolve `globalThis` so it behaves as much like async `import()`
-as possible.
-
-As an aside:
-
-`<xin-lottie>` is implemented in such a way that if you've preloaded the module
-(e.g. via a script tag or packaging) it won't load it again, which affords offline
-use.
-
-There's no point for `<xin-map>` since it won't work without connectivity anyway.
-
-## styleSheet
-
-styleSheet creates a `<link>` tag for a specified css file.
-
-Using `styleSheet`:
-
-    styleSheet('../path/to/style.css')
-
-This is awaitable, if you care. The stylesheet `<link>` will only be inserted _once_.
-*/
-import { elements } from 'xinjs';
-const loadedScripts = {};
-export function scriptTag(src, existingSymbolName) {
-    if (loadedScripts[src] === undefined) {
-        if (existingSymbolName !== undefined) {
-            const existing = globalThis[existingSymbolName];
-            loadedScripts[src] = Promise.resolve({ [existingSymbolName]: existing });
-        }
-        const scriptElt = elements.script({ src });
-        document.head.append(scriptElt);
-        loadedScripts[src] = new Promise((resolve) => {
-            scriptElt.onload = () => resolve(globalThis);
-        });
-    }
-    return loadedScripts[src];
-}
-const loadedStyleSheets = {};
-export function styleSheet(href) {
-    if (loadedStyleSheets[href] === undefined) {
-        const linkElement = elements.link({
-            rel: 'stylesheet',
-            type: 'text/css',
-            href,
-        });
-        document.head.append(linkElement);
-        loadedStyleSheets[href] = new Promise((resolve) => {
-            linkElement.onload = resolve;
-        });
-    }
-    return loadedStyleSheets[href];
-}