/*! * Copyright 2022, Staffbase GmbH and contributors. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * http://www.apache.org/licenses/LICENSE-2.0 * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ /** * Base class for custom widgets. * * Should be used to extend other custom elements to render their content. * Provides common editing and render capabilities for Staffbase widgets. */ export interface BaseBlock extends HTMLElement { /** * Called when the widget is rendered in a page. * Override this method in order to display your widget contents. * * Default implementation is a noop. * * @param container an `HTMLElement` into which the contents of the widget should be rendered. * Note that this does not necessarily have to be `this` since the base class might * render a title, a div with a border, or other decorations. */ renderBlock(container: HTMLElement): void; /** * Called when the widget is rendered in the WYSIWYG editor. * override this method in order to display your widget preview. * * By default, the editor will display a generic placeholder * with the widget name and icon. * * @param container an `HTMLElement` into which the contents of the widget should be rendered * Note that this does not necessarily have to be `this` since the base class might * render a title, a div with a border, or other decorations. */ renderBlockInEditor(container: HTMLElement): void; /** * Called when the widget is unmounted from the DOM. * * Override this in order to implement your unmount logic. * * @param container an `HTMLElement` which was used previously to render the widget. */ unmountBlock(container: HTMLElement): void; /** * Called when an attribute is changed. * * Override this in order to get notified about new attribute values. * * NOTE: There are attributes that are common to all widgets. They are handled * inside the base block. Therefore, if you override this method, be sure to * call `super.attributeChangedCallback()` inside your implementation, in * order to let the base class know about the arguments that it might be interested in. */ attributeChangedCallback(attrName: string, oldValue: string | undefined, newValue: string | undefined): void; /** * Called after the dialog is closed and the attributes are set on the web component. * * Override this if the attributes are handled with a different logic then the default one. * * @param attributes A map of attributes, as defined in the block definition, which have the * types from the form data * * NOTE: The default implementation turns every value in a string, except arrays and object, which * are converted to base64 encoded data uris in the format `data:text/plain;base64,...` */ parseConfig>(attributes: T): Record; /** * Called when the config dialog is opened. The dialog uses the parsed attributes, to fill * the fields with the existing values. * * Uses the property blockDefinition.attributes to parse each indidividual attribute and * returns it in the format, the configuration form needs. The common attributes are handled * externally * * This method is the counter part of parseConfig, the this must be implemented, if parseConfig * is overriden. * * NOTE: The default implementation converts every string to string, boolean or number and decodes * and parses the data uris to the arrays and objects. Dates are remaining a string! */ parseAttributes>(): T; /** * The content language as defined in the hosting system. Should be used to provide * the correct localization in the widget. * * NOTE: This is not necessarily the same as the UI language, which is defined by the browser. * When a widget is added to a specific content, the content-language attribute gets automatically set * to that language. */ contentLanguage: string; }