Nietzsche's Preposterous Moustache

    mvdom-xp
    TypeScript icon, indicating that this package has built-in type declarations

    0.9.2 • Public • Published

    Experimental / Exploration APIs on top of mvdom core.

    • Those APIs might change a lot, and for external teams, it is recommended to copy/paste (i.e. Cherrypick) what is needed.
    • We will try to keep the semver rules when breaking APIs, but no garantee.
    • At this point, minimum documentation and unit testing at this point (beside the private applications we are building wit it)
    • Mostly made to be used with TypeScript, but should work with pure JavaScript.

    Note: Some of those APIs might move to mvdom core at some point, and will be deprecated/removed for this module.

    Doc

    style

    Convenient method for applying styling one or more html elements with a set of css properties. Uses

    import {style} from 'mvdom-xp';
     
    const el: HTMLElement = ...;
    style(el, {
      color: 'red',
      width: '100%'
    });
     
    style(els,  {
      color: 'red',
      width: '100%'
    }); // works with array

    attr

    Extract attribute values:

    // extract single value
    const val: string | null = attr(el, 'name');
    // extract array of value for a single el
    const [name, label] = attr(el, ['name', 'label']);
    // extract single attribute from multiple els
    const names: (string | null)[] = attr(els,'name');
    // extract and array of (values) for the array of els
    const names: [string | null][][] = attr(els, ['name', 'label']);

    Set attribute values:

    // set singloe value
    attr(el, 'name', 'username'); // can use el.setAttribute('name','username') as well
    attr(el, {name: 'username', placeholder: 'Enter username'});
    // set the same attribute to all of the element
    attr(els, {checked: true, readonly: ''}); // true will set empty attribute (i.e. same as '' as value)

    css

    Set one or more css value based on the key property.

    // value == null or === false, the class name key is removed, otherwise it is added. 
    css(el, {prime: true, sel: '', 'dark-mode': false, 'mobile-mode': null } );
    // <.. class="prime sel" 

    dnd (Drag And Drop core API)

    Enable a one or more HTMLElements (via on-demand CSS selector bindings) drag and drop logic.

    Note: Compared to most if not all Drag and Drop JS Libraries, the css selector is on demand, meaning it is one binding on the container, and it is only when the drag trigger events get initiated that the selector is ran. This gives great flexibility and performance benefits (.e.g, O(1) binding vs O(n))

    const containerEl: HTMLElement = ...;
     
    draggable(containerEl, '.item', { // DragController
      onStart: (evt: { source: HTMLElement, handle: HTMLElement }) => void {
        // ...
      },
     
        onDrag: (evt: DragEventDetail) => void {
        // ...
      }, 
     
        /** Called when the drag event end (e.g., mouseup), return true to remove the handle and false for custom handle management. */
        onEnd: (evt: DragEventDetail) => boolean | Promise<boolean> {
        // ...
      }
    });
     

    Install

    npm i mvdom-xp

    DownloadsWeekly Downloads

    1

    Version

    0.9.2

    License

    MIT

    Unpacked Size

    54.6 kB

    Total Files

    23

    Last publish

    Collaborators

    • jeremychone