Skip to content
Snippets Groups Projects
Verified Commit 9bfa77dc authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

fix(notify): update small issues #269

parent 556bc3b3
No related branches found
No related tags found
No related merge requests found
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>optimize message and notify #269</title>
<script src="269.mjs" type="module"></script>
</head>
<body>
<h1>optimize message and notify #269</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/269">Issue #269</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main >
<monster-notify id="notify" data-monster-option-classes-control="inline">
</monster-notify>
</main>
</body>
</html>
/**
* @file development/issues/open/269.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/269
* @description optimize message and notify
* @issue 269
*/
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/link.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/theme.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/notify/notify.mjs";
import "../../../source/components/notify/message.mjs";
const notify = document.getElementById('notify');
notify.push("sdfsdfsdf")
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.upload.addEventListener('progress', (e) => {
if (e.lengthComputable) {
const percentComplete = (e.loaded / e.total) * 100;
console.log(`Upload-Fortschritt: ${percentComplete}%`);
}
});
const formData = new FormData();
xhr.send(formData);
...@@ -71,7 +71,7 @@ const scrollableEventHandlerSymbol = Symbol("scrollableEventHandler"); ...@@ -71,7 +71,7 @@ const scrollableEventHandlerSymbol = Symbol("scrollableEventHandler");
/** /**
* A TableOfContent * A TableOfContent
* *
* @fragments /fragments/components/form/table-of-content/ * @fragments /fragments/components/form/table-of-content
* *
* @example /examples/components/form/table-of-content-simple * @example /examples/components/form/table-of-content-simple
* *
......
...@@ -66,35 +66,17 @@ const mouseleaveEventHandlerSymbol = Symbol("mouseleaveEventHandler"); ...@@ -66,35 +66,17 @@ const mouseleaveEventHandlerSymbol = Symbol("mouseleaveEventHandler");
const removeEventHandlerSymbol = Symbol("removeEventHandler"); const removeEventHandlerSymbol = Symbol("removeEventHandler");
/** /**
* This CustomControl creates a notification element with a variety of options. * A Message is a notification element that can be used to display messages to the user.
* *
* <img src="./images/message.png"> * @fragments /fragments/components/notify/message
* *
* Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library. * @example /examples/components/notify/message-simple
* *
* You can create this control either by specifying the HTML tag `<monster-notify-message />` directly in the HTML * @issue https://localhost.alvine.dev:8443/development/issues/closed/269.html
* *
* ```html
* <monster-notify-message></monster-notify-message>
* ```
*
* or using Javascript via the `document.createElement('monster-notify');` method.
*
* ```javascript
* import '@schukai/monster/source/components/notify/message.js';
* document.createElement('monster-notify-message');
* ```
*
* @externalExample ../../../example/components/notify/message.mjs
* @startuml message.png
* skinparam monochrome true
* skinparam shadowing false
* HTMLElement <|-- CustomElement
* CustomElement <|-- Message
* @enduml
* @since 1.0.0 * @since 1.0.0
* @copyright schukai GmbH * @copyright schukai GmbH
* @summary A highly configurable select control * @summary The message is a notification element that can be used to display messages to the user. Typically, it is only used in conjunction with the notify container.
*/ */
class Message extends CustomElement { class Message extends CustomElement {
/** /**
...@@ -117,14 +99,13 @@ class Message extends CustomElement { ...@@ -117,14 +99,13 @@ class Message extends CustomElement {
* })),'application/json',true).toString() * })),'application/json',true).toString()
* ``` * ```
* *
* @property {string} templates Template definitions
* @property {Object} templates Template definitions * @property {Object} templates Template definitions
* @property {integer} timeout time in milliseconds until the message should be removed. The timeout can be disabled via the feature `disappear`.
* @property {Object} features
* @property {boolean} features.close show close button
* @property {boolean} features.disappear automatically remove the message after the timeout
* @property {string} templates.main Main template * @property {string} templates.main Main template
* * @property {number} timeout The time in milliseconds after which the message disappears
* @property {Object} features The features of the message
* @property {boolean} features.close Whether the message can be closed
* @property {boolean} features.disappear Whether the message disappears after a certain time
* @property {string} content The content of the message
*/ */
get defaults() { get defaults() {
return Object.assign( return Object.assign(
...@@ -141,7 +122,6 @@ class Message extends CustomElement { ...@@ -141,7 +122,6 @@ class Message extends CustomElement {
main: getTemplate(), main: getTemplate(),
}, },
}, },
initOptionsFromArguments.call(this),
); );
} }
...@@ -152,7 +132,7 @@ class Message extends CustomElement { ...@@ -152,7 +132,7 @@ class Message extends CustomElement {
[assembleMethodSymbol]() { [assembleMethodSymbol]() {
super[assembleMethodSymbol](); super[assembleMethodSymbol]();
initControlReferences.call(this); initControlReferences.call(this);
initEventhandler.call(this); initEventHandler.call(this);
return this; return this;
} }
...@@ -244,30 +224,6 @@ function stopFadeout() { ...@@ -244,30 +224,6 @@ function stopFadeout() {
} }
} }
/**
* This attribute can be used to pass a URL to this select.
*
* @private
* @return {object}
*/
function initOptionsFromArguments() {
const options = {};
const timeout = this.getAttribute(ATTRIBUTE_PREFIX + "timeout");
if (isString(timeout)) {
try {
options["timeout"] = parseInt(timeout, 10);
} catch (e) {
this.setAttribute(
ATTRIBUTE_ERRORMESSAGE,
this.getAttribute(ATTRIBUTE_ERRORMESSAGE + ", " + e.toString()),
);
}
}
return options;
}
/** /**
* @private * @private
* @return {Message} * @return {Message}
...@@ -289,7 +245,7 @@ function initControlReferences() { ...@@ -289,7 +245,7 @@ function initControlReferences() {
/** /**
* @private * @private
*/ */
function initEventhandler() { function initEventHandler() {
/** /**
* @param {Event} event * @param {Event} event
*/ */
......
...@@ -45,44 +45,18 @@ const containerElementSymbol = Symbol("containerElement"); ...@@ -45,44 +45,18 @@ const containerElementSymbol = Symbol("containerElement");
const queueSymbol = Symbol("queue"); const queueSymbol = Symbol("queue");
/** /**
* This CustomControl creates a notification element with a variety of options. * The Notify control
* *
* <img src="./images/notify.png"> * @fragments /fragments/components/notify/notify
* *
* Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library. * @example /examples/components/notify/notify-simple
* @example /examples/components/notify/notify-inline
* *
* You can create this control either by specifying the HTML tag `<monster-notify />` directly in the HTML * @issue https://localhost.alvine.dev:8443/development/issues/closed/269.html
*
* ```html
* <monster-notify></monster-notify>
* ```
*
* or using Javascript via the `document.createElement('monster-notify');` method.
*
* ```js
* import '@schukai/monster/source/components/notify/notify.js';
* document.createElement('monster-notify');
* ```
*
* ## Events
*
* The CustomEvent has the property [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail).
*
* ```
* node.addEventListener('monster-notify-message',(e)=>console.log(e.detail))
* ```
*
* @externalExample ../../../example/components/notify/notify.mjs
* @startuml notify.png
* skinparam monochrome true
* skinparam shadowing false
* HTMLElement <|-- CustomElement
* CustomElement <|-- Notify
* @enduml
* *
* @since 1.0.0 * @since 1.0.0
* @copyright schukai GmbH * @copyright schukai GmbH
* @summary A highly configurable select control * @summary The Notify control is a notification container that can be used to display messages to the user.
*/ */
class Notify extends CustomElement { class Notify extends CustomElement {
constructor() { constructor() {
...@@ -91,24 +65,12 @@ class Notify extends CustomElement { ...@@ -91,24 +65,12 @@ class Notify extends CustomElement {
} }
/** /**
* The defaults can be set either directly in the object or via an attribute in the HTML tag. * @property {string} orientation The orientation of the notify element. Allowed values for horizontal orientation are "left", "center", "right". Allowed values for vertical orientation are "top" and "bottom".
* The value of the attribute `data-monster-options` in the HTML tag must be a JSON string. * @property {object} templates The templates of the notify element.
* * @property {string} templates.main The main template of the notify element.
* ```html * @property {object} classes The classes of the notify element.
* <monster-notify data-monster-options="{}"></monster-notify> * @property {string} classes.container The container class of the notify element.
* ``` * @property {string} classes.control The control class of the notify element.
*
* Since 1.18.0 the JSON can be specified as a DataURI.
*
* ```
* new Monster.Types.DataUrl(btoa(JSON.stringify({
* orientation: 'right top'
* })),'application/json',true).toString()
* ```
*
* @property {string} templates Template definitions
* @property {Object} templates Template definitions
* @property {string} templates.main Main template
*/ */
get defaults() { get defaults() {
return Object.assign( return Object.assign(
...@@ -119,13 +81,15 @@ class Notify extends CustomElement { ...@@ -119,13 +81,15 @@ class Notify extends CustomElement {
templates: { templates: {
main: getTemplate(), main: getTemplate(),
}, },
classes: {
container: "",
control: "center"
}
}, },
initOptionsFromArguments.call(this),
); );
} }
/** /**
*
* @return {Notify} * @return {Notify}
*/ */
[assembleMethodSymbol]() { [assembleMethodSymbol]() {
...@@ -142,7 +106,6 @@ class Notify extends CustomElement { ...@@ -142,7 +106,6 @@ class Notify extends CustomElement {
} }
/** /**
*
* @return {string} * @return {string}
*/ */
static getTag() { static getTag() {
...@@ -158,9 +121,8 @@ class Notify extends CustomElement { ...@@ -158,9 +121,8 @@ class Notify extends CustomElement {
} }
/** /**
* * @param {Massage|String} message
* @param {Monster.Components.Notify.Massage|String} message * @return {Notify}
* @return {Monster.Components.Notify.Notify}
*/ */
push(message) { push(message) {
let messageElement = message; let messageElement = message;
...@@ -188,22 +150,6 @@ class Notify extends CustomElement { ...@@ -188,22 +150,6 @@ class Notify extends CustomElement {
} }
} }
/**
* This attribute can be used to pass a URL to this select.
*
* ```
* <monster-select data-monster-url="https://example.com/"></monster-select>
* ```
*
* @private
* @return {object}
*/
function initOptionsFromArguments() {
const options = {};
return options;
}
/** /**
* @private * @private
* @return {Select} * @return {Select}
...@@ -229,10 +175,10 @@ function initControlReferences() { ...@@ -229,10 +175,10 @@ function initControlReferences() {
function getTemplate() { function getTemplate() {
// language=HTML // language=HTML
return ` return `
<div data-monster-role="control" part="control" class="center" <div data-monster-role="control" part="control"
data-monster-attributes="data-monster-orientation path:orientation"> data-monster-attributes="data-monster-orientation path:orientation, class path:classes.control">
<div data-monster-role="container"> <div data-monster-attributes="class path:classes.container" part="container"
</div> data-monster-role="container"></div>
</div> </div>
`; `;
} }
......
...@@ -19,7 +19,6 @@ div[data-monster-role=control] { ...@@ -19,7 +19,6 @@ div[data-monster-role=control] {
max-height: 100vH; max-height: 100vH;
margin: 0; margin: 0;
position: absolute;
top: 0; top: 0;
right: 0; right: 0;
...@@ -31,6 +30,14 @@ div[data-monster-role=control] { ...@@ -31,6 +30,14 @@ div[data-monster-role=control] {
} }
div[data-monster-role=control]:not(.inline) {
position: absolute;
}
div[data-monster-role=control].inline {
--monster-message-border-shadow: none;
}
[data-monster-role=control][data-monster-orientation*=left] { [data-monster-role=control][data-monster-orientation*=left] {
left: 0; left: 0;
right: auto; right: auto;
...@@ -65,11 +72,9 @@ div[data-monster-role=control] { ...@@ -65,11 +72,9 @@ div[data-monster-role=control] {
width: 100%; width: 100%;
} }
[data-monster-role=message] { [data-monster-role=message] {
display: flex; display: flex;
pointer-events: auto;
user-select: text; user-select: text;
width: 100%; width: 100%;
max-height: 200px; max-height: 200px;
...@@ -98,7 +103,7 @@ div[data-monster-role=control] { ...@@ -98,7 +103,7 @@ div[data-monster-role=control] {
font-size: .875rem; font-size: .875rem;
pointer-events: auto; pointer-events: auto;
box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%); box-shadow: var(--monster-message-border-shadow, 0 0.5rem 1rem rgb(0 0 0 / 15%));
} }
...@@ -109,8 +114,8 @@ div[data-monster-role=control] { ...@@ -109,8 +114,8 @@ div[data-monster-role=control] {
[data-monster-role=message].fadeout { [data-monster-role=message].fadeout {
transition: all 0.2s cubic-bezier(1, -0.04, 0, 1.03); transition: all 0.2s cubic-bezier(1, -0.04, 0, 1.03);
max-height: 0; max-height: 0;
margin-top: 0px; margin-top: 0;
margin-bottom: 0px; margin-bottom: 0;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
border: 0; border: 0;
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
import {addAttributeToken} from "../../../dom/attributes.mjs"; import {addAttributeToken} from "../../../dom/attributes.mjs";
import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs"; import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
export { NotifyStyleSheet }; export {NotifyStyleSheet}
/** /**
* @private * @private
...@@ -22,17 +22,10 @@ export { NotifyStyleSheet }; ...@@ -22,17 +22,10 @@ export { NotifyStyleSheet };
const NotifyStyleSheet = new CSSStyleSheet(); const NotifyStyleSheet = new CSSStyleSheet();
try { try {
NotifyStyleSheet.insertRule( NotifyStyleSheet.insertRule(`
`
@layer notify { @layer notify {
.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=control]{align-items:flex-start;border:0;box-sizing:border-box;display:flex;flex-direction:row;justify-content:space-between;margin:0;max-height:100vH;pointer-events:none;position:absolute;right:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:25rem;z-index:var(--monster-z-index-modal-overlay)}[data-monster-role=control][data-monster-orientation*=left]{left:0;right:auto}[data-monster-role=control][data-monster-orientation*=right]{left:auto;right:0}[data-monster-role=control][data-monster-orientation*=center]{left:50%;transform:translate(-50%)}[data-monster-role=control][data-monster-orientation*=bottom]{align-items:flex-end;bottom:0}[data-monster-role=control][data-monster-orientation*=top]{align-items:flex-start;top:0}[data-monster-role=container]{width:100%}[data-monster-role=message]{background-clip:padding-box;background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-message-border-color,rgba(0,0,0,.1));border-radius:var(--monster-message-border-radius,.25rem);border-style:var(--monster-message-border-style,solid);border-width:var(--monster-message-border-width,1px);box-shadow:0 .5rem 1rem rgba(0,0,0,.15);color:var(--monster-color-primary-1);display:flex;font-size:.875rem;margin:var(--monster-message-margin-top,15px) var(--monster-message-margin-right,5px) var(--monster-message-margin-bottom,0) var(--monster-message-margin-left,0);max-height:200px;max-width:100%;overflow:hidden;padding:var(--monster-message-padding-top,5px) var(--monster-message-padding-right,5px) var(--monster-message-padding-bottom,5px) var(--monster-message-padding-left,5px);pointer-events:auto;position:relative;text-overflow:ellipsis;-webkit-user-select:text;-moz-user-select:text;user-select:text;width:100%}[data-monster-role=message]:first-child{margin-top:0}[data-monster-role=message].fadeout{border:0;margin-bottom:0;margin-top:0;max-height:0;padding-bottom:0;padding-top:0;transition:all .2s cubic-bezier(1,-.04,0,1.03)} .block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=control]{align-items:flex-start;border:0;box-sizing:border-box;display:flex;flex-direction:row;justify-content:space-between;margin:0;max-height:100vH;pointer-events:none;right:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:25rem;z-index:var(--monster-z-index-modal-overlay)}div[data-monster-role=control]:not(.inline){position:absolute}div[data-monster-role=control].inline{--monster-message-border-shadow:none}[data-monster-role=control][data-monster-orientation*=left]{left:0;right:auto}[data-monster-role=control][data-monster-orientation*=right]{left:auto;right:0}[data-monster-role=control][data-monster-orientation*=center]{left:50%;transform:translate(-50%)}[data-monster-role=control][data-monster-orientation*=bottom]{align-items:flex-end;bottom:0}[data-monster-role=control][data-monster-orientation*=top]{align-items:flex-start;top:0}[data-monster-role=container]{width:100%}[data-monster-role=message]{background-clip:padding-box;background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-message-border-color,rgba(0,0,0,.1));border-radius:var(--monster-message-border-radius,.25rem);border-style:var(--monster-message-border-style,solid);border-width:var(--monster-message-border-width,1px);box-shadow:var(--monster-message-border-shadow,0 .5rem 1rem rgba(0,0,0,.15));color:var(--monster-color-primary-1);display:flex;font-size:.875rem;margin:var(--monster-message-margin-top,15px) var(--monster-message-margin-right,5px) var(--monster-message-margin-bottom,0) var(--monster-message-margin-left,0);max-height:200px;max-width:100%;overflow:hidden;padding:var(--monster-message-padding-top,5px) var(--monster-message-padding-right,5px) var(--monster-message-padding-bottom,5px) var(--monster-message-padding-left,5px);pointer-events:auto;position:relative;text-overflow:ellipsis;-webkit-user-select:text;-moz-user-select:text;user-select:text;width:100%}[data-monster-role=message]:first-child{margin-top:0}[data-monster-role=message].fadeout{border:0;margin-bottom:0;margin-top:0;max-height:0;padding-bottom:0;padding-top:0;transition:all .2s cubic-bezier(1,-.04,0,1.03)}
}`, }`, 0);
0,
);
} catch (e) { } catch (e) {
addAttributeToken( addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment