@webwriter/wui v0.0.3

wui components

ui overlay plugins for WebWriter Widgets

currently available:

• helpSystem:

WebWriter HelpSystem

HelpOverlay - HelpPopup

Installation Either install locally by downloading this project and run npm i "path/to/folder" or install via npm i "@webwriter/wui".

Usage 1. Use the help System by importing both classes and adding them to your scopedElements like so:

import { HelpOverlay, HelpPopup } from "@webwriter/wui/dist/helpSystem/helpSystem.js";

"webwriter-helpoverlay": HelpOverlay,
"webwriter-helppopup": HelpPopup,

2. Add helpSystem tags to the top of your DOM. You need one helpOverlay containing as many helpPopups as you like. The popups need to be slotted and connected to the DOM Element that you want to describe by putting its id into the target attribute. Shown below is an example with a single popup.

import {html, css} from "lit"
import {LitElementWw} from "@webwriter/lit"
import {customElement, property} from "lit/decorators.js"

import { HelpOverlay, HelpPopup } from "@webwriter/wui/dist/helpSystem/helpSystem.js";

@customElement("cool-widget")
export default class CoolWidget extends LitElementWw {

    static get scopedElements() {
        return {
            "webwriter-helpoverlay": HelpOverlay,
            "webwriter-helppopup": HelpPopup,
        };
    }

    render() {
        return html`
            <webwriter-helpoverlay>
                <webwriter-helppopup
                    slot="popupContainer"
                    target="cool-id"
                >
                    <div slot="content">
                        <h4>help heading<h4>
                        <p>some help</p>
                    </div>
                </webwriter-helppopup>
            <webwriter-helpoverlay>

            <div style="width: 50vw, height: 50vh">
                <p id="cool-id">my content</p>
            </div>
        `
    }
}

Customization You can customize the looks of your popups by varying the content of the div element inside the popup tag. There is some styling applied by default, though it should still be possible to use your own with the style attribute.