<jinn-window>

Jinn-window wraps jsPanel into a webcomponent.

Kudos to the jsPanel team for providing such a great window component.

Installation

npm i jinn-window

Usage

<script type="module">
  import 'jinn-window/jinn-window.js';
</script>

<jinn-window name="foo"></jinn-window>

jinn-window attributes

| Attribute | Description | Default | | --------- | -----------| ------- | | name | set the name of the window | - | | title | set the title of the window | - | | open | opens the window on page load. Marker attribute | - | | position | optional position of window. see below | center | | snap | snaps window to corners or centers of each border | true | | headercontrols | a list icon names to show on toolbar for resizing the window | minimize, smallify, close | | size | space-separated width + height e.g. '100 50' | auto (fit content) |

position

Allows to position a window initially. One of the following values is allowed:

• 'center'
• 'left-top'
• 'center-top'
• 'right-top'
• 'right-center'
• 'right-bottom'
• 'center-bottom'
• 'left-bottom'
• 'left-center' Default value: none

headercontrols

One of:

• smallify - shrink to header
• minimize - minimze to bottom of page
• normalize - restore last size
• maximize - take the full page
• close - close button
• closeonly - shortcut for only close button
• none - no controls at all

Events

window-opened

| Param | Description | | ---- | ---- | | name | the name of the window just being opened | | title | the title of the window just being opened |

Examples

Bind it on a button

<jinn-window name="42"></jinn-window>
<button id="openLeft">Open Left</button>

<script type="text/javascript">
  const openButton = document.getElementById("openLeft");
    const win = document.querySelector("jinn-window[name='42']");

  openButton.addEventListener("click", (e) => {
    win.open();
  });

  win.addEventListener("window-opened", (e) => {
    console.log("window-opened", e.detail)
  });
</script>

Open a green window with a fixed size in the center on pageload

<jinn-window name="5"  open position="center" size="150 50" title="center"><div class="center-box">center</div></jinn-window>

Consider the demo-page for more examples

Testing with Web Test Runner

To execute a single test run:

npm run test

To run the tests in interactive watch mode run:

npm run test:watch

Tooling configs

For most of the tools, the configuration is in the package.json to minimize the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo with web-dev-server

npm start

To run a local development server that serves the basic demo located in demo/index.html