InfinityVAULT Document Insitu Editor Web Component

Document Insitu Editor

Typical tag name: doc-insitu-editor

Exported class: DocInsituEditor

Inheritance: DocInsituEditor <-- (imm-dom stack)

Intended to do in-place editing of single Document properties with a custom input.

Wraps anything with a default slot and listens for insitu-user-save-value and then sets that value into the defined prop attribute on that Document.

Assumes the event detail is { value: 'the_value', cb: function } where the callback is whether or not the update was successful.

Required Assets

imm-dom

External Requirements

(None.)

WC Dependencies

ivc-zs

API

Attributes

Attribute	Default	Enumerators	Usage
`doc`	`null`	N/A	Document HK1 to update.
`prop`	`null`	N/A	Document property to update.

Properties

Property	Type	Default	Usage
(None.)

Events

Event	Detail	Usage
(None.)

Methods

Method	Arguments	Usage
getData		Returns data for `doc` via `m$_get_entry`.

Slots

Slot	Usage
`default`	Place custom input here.

CSS Parts

Part	Usage
(None.)

Example

<link rel="stylesheet" type="text/css" href="/css/sk-root.css">
<script type=module src='/cdn/@encipher-sk/ivcore/esm/doc_create.js'></script>

<div class='example'>
  <ivc-i18n></ivc-i18n>
  <ivc-zs reload-ws></ivc-zs>
  <doc-insitu-editor>
    <input id='example-input' type=text></input>
  </doc-insitu-editor>
  <p id=output></p>
  <script>
  const $input = document.querySelector( 'doc-insitu-editor' ).querySelector( '#example-input' );
  const $output = document.querySelector( '#output' );
  $input.addEventListener( 'change', e => {
    const { target } = e;
    const ce = new CustomEvent( 'insitu-user-save-value', { bubbles: true, detail: { value: target.value, cb: ok => { $output.innerHTML += `Updated with: "${ target.value }". Success? ${ ok }<br/>` } } } );
    target.dispatchEvent( ce );
  });
  </script>
</div>