diff --git a/source/components/form/api-button.mjs b/source/components/form/api-button.mjs index 0b562502d581a567938419e47134f0acd6e9a1ba..4845d7df89ef632784177165a0dd7f117a957447 100644 --- a/source/components/form/api-button.mjs +++ b/source/components/form/api-button.mjs @@ -74,6 +74,10 @@ const containerElementSymbol = Symbol("containerElement"); * @copyright schukai GmbH * @memberOf Monster.Components.Form * @summary A button that opens a popper element with possible actions. + * @fires Monster.Components.Form.event:monster-button-set + * @fires Monster.Components.Form.event:monster-api-button-click + * @fires Monster.Components.Form.event:monster-api-button-successful + * @fires Monster.Components.Form.event:monster-api-button-failed */ class ApiButton extends ActionButton { /** diff --git a/source/components/form/events.mjs b/source/components/form/events.mjs index a775172aab3a2f1c52bdddbd4731bdc3578a92ed..d922fd300bfe68a7b88e8df57506a02b4c9408c5 100644 --- a/source/components/form/events.mjs +++ b/source/components/form/events.mjs @@ -82,3 +82,36 @@ * @event event:monster-button-clicked * @type {object} */ + +/** + * content fetched event + * + * @memberOf Monster.Components.Form + * @event event:monster-button-set + * @type {object} + */ + +/** + * content fetched event + * + * @memberOf Monster.Components.Form + * @event event:monster-api-button-click + * @type {object} + */ + +/** + * content fetched event + * + * @memberOf Monster.Components.Form + * @event event:monster-api-button-successful + * @type {object} + */ + +/** + * content fetched event + * + * @memberOf Monster.Components.Form + * @event event:monster-api-button-failed + * @type {object} + */ + diff --git a/source/components/layout/events.mjs b/source/components/layout/events.mjs new file mode 100644 index 0000000000000000000000000000000000000000..e72dfcdae08cff899e03eadddbc356f629a1f58d --- /dev/null +++ b/source/components/layout/events.mjs @@ -0,0 +1,16 @@ +/** + * Copyright schukai GmbH and contributors 2023. All Rights Reserved. + * Node module: @schukai/monster + * This file is licensed under the AGPLv3 License. + * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html + */ + +/** + * This event is fired when a dimension of a control is changed. + * + * @memberOf Monster.Components.Layout + * @event event:monster-dimension-changed + * @type {object} + * @property {Object} control control + * @property {string} details[].dimension + */ diff --git a/source/components/layout/split-screen.mjs b/source/components/layout/split-screen.mjs index 3fcabedacb13a65e6c773973270eba8923f11b12..7d6e06c897245c64f9f714552eb5d6e005872740 100644 --- a/source/components/layout/split-screen.mjs +++ b/source/components/layout/split-screen.mjs @@ -9,6 +9,7 @@ import { registerCustomElement, } from "../../dom/customelement.mjs"; import "../notify/notify.mjs"; +import {fireCustomEvent} from "../../dom/events.mjs"; import {Observer} from "../../types/observer.mjs"; import {SplitScreenStyleSheet} from "./stylesheet/split-screen.mjs"; import {instanceSymbol} from "../../constants.mjs"; @@ -85,6 +86,7 @@ const TYPE_HORIZONTAL = "horizontal"; * @copyright schukai GmbH * @memberOf Monster.Components.Layout * @summary A simple split screen layout + * @fires Monster.Components.Layout.event:monster-dimension-changed */ class SplitScreen extends CustomElement { @@ -123,6 +125,23 @@ class SplitScreen extends CustomElement { }, }); } + + fullStartScreen() { + this.setDimension("100%"); + return this; + } + + fullEndScreen() { + this.setDimension("0%"); + return this; + } + + resetScreen() { + this.setDimension(this.getOption("dimension").initial); + return this; + } + + setContent(html) { this.setOption("content", html); @@ -182,6 +201,7 @@ class SplitScreen extends CustomElement { /** * Set the dimensions of the panel based on the split type. + * @fires Monster.Components.Layout.event:monster-dimension-changed */ function applyPanelDimensions() { @@ -203,6 +223,12 @@ function applyPanelDimensions() { this[splitScreenElementSymbol].classList.remove("vertical"); } + + fireCustomEvent(this, "monster-dimension-changed", { + controller: this, + dimension: dimension + }); + } @@ -373,12 +399,12 @@ function initEventHandler() { function getTemplate() { // language=HTML return ` - <div data-monster-role="split-screen" part="container"> + <div data-monster-role="split-screen" part="control"> <div data-monster-role="startPanel" class="panel" part="startPanel"> <slot name="start"></slot> </div> <div data-monster-role="dragger" part="dragger"> - <div data-monster-role="handle"></div> + <div data-monster-role="handle" part="handle"></div> </div> <div data-monster-role="endPanel" class="panel" part="endPanel"> <slot name="end"></slot>