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

feat(log): update the apearance of the log #270

parent 4ff01da7
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 1672 additions and 917 deletions
development/issues/open/270.html 0 → 100644
+ 24
− 0
View file @ f8e9bcbb
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>update and optimize data-bind #270</title>
<script src="./270.mjs" type="module"></script>
</head>
<body>
<h1>update and optimize data-bind #270</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/270">Issue #270</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<monster-log id="Bai3A">
</monster-log>
</main>
</body>
</html>
development/issues/open/270.mjs 0 → 100644
+ 46
− 0
View file @ f8e9bcbb
/**
* @file development/issues/open/270.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/270
* @description update and optimize data-bind
* @issue 270
*/
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/state/log.mjs";
import {Entry} from "../../../source/components/state/log/entry.mjs";
const element = document.getElementById('Bai3A')
element.addEntry(new Entry({title: "Test", message: "Test", user: "Administrator", date: new Date()}))
const for10MinutesDate = new Date();
for10MinutesDate.setMinutes(for10MinutesDate.getMinutes() - 10);
element.addEntry(new Entry({title: "Test", message: "Test" , user: "Hans Meier", date: for10MinutesDate}))
const for1HourAnd16MinutesDate = new Date();
for1HourAnd16MinutesDate.setHours(for1HourAnd16MinutesDate.getHours() - 1);
for1HourAnd16MinutesDate.setMinutes(for1HourAnd16MinutesDate.getMinutes() - 16);
element.addEntry(new Entry({title: "Test", message: "Test", user: "Administrator", date: for1HourAnd16MinutesDate}))
const for10Days5HoursAnd30MinutesDate = new Date();
for10Days5HoursAnd30MinutesDate.setDate(for10Days5HoursAnd30MinutesDate.getDate() - 10);
for10Days5HoursAnd30MinutesDate.setHours(for10Days5HoursAnd30MinutesDate.getHours() - 5);
for10Days5HoursAnd30MinutesDate.setMinutes(for10Days5HoursAnd30MinutesDate.getMinutes() - 30);
element.addEntry(new Entry({title: "Test", message: "Test", user: "Fritz Müller", date: for10Days5HoursAnd30MinutesDate}))
const for1Year2MonthsAnd3DaysDate = new Date();
for1Year2MonthsAnd3DaysDate.setFullYear(for1Year2MonthsAnd3DaysDate.getFullYear() - 1);
for1Year2MonthsAnd3DaysDate.setMonth(for1Year2MonthsAnd3DaysDate.getMonth() - 2);
for1Year2MonthsAnd3DaysDate.setDate(for1Year2MonthsAnd3DaysDate.getDate() - 3);
element.addEntry(new Entry({title: "Test", message: "Test", user: "Administrator", date: for1Year2MonthsAnd3DaysDate}))
source/components/datatable/datasource/rest.mjs
+ 17
− 0
View file @ f8e9bcbb
......@@ -81,6 +81,9 @@ const filterObserverSymbol = Symbol("filterObserver");
* @copyright schukai GmbH
* @summary A rest api datasource
*/
class Rest extends Datasource {
/**
* the constructor of the class
......@@ -453,6 +456,13 @@ function initFilter() {
filterControl.attachObserver(this[filterObserverSymbol]);
}
/**
* @private
* @param json
* @param response
* @param filterControl
* @returns {Promise<never>|Promise<Awaited<unknown>>}
*/
function handleIntersectionObserver(json, response, filterControl) {
const path = new Pathfinder(json);
......@@ -495,6 +505,9 @@ function initAutoInit() {
});
}
/**
* @private
*/
function initEventHandler() {
this[intersectionObserverHandlerSymbol] = (entries) => {
entries.forEach((entry) => {
......@@ -515,6 +528,9 @@ function initEventHandler() {
};
}
/**
* @private
*/
function initIntersectionObserver() {
this.classList.add("intersection-observer");
......@@ -528,6 +544,7 @@ function initIntersectionObserver() {
this[intersectionObserverHandlerSymbol],
options,
);
this[intersectionObserverObserverSymbol].observe(this);
}
......
source/components/state/log.mjs
+ 46
− 43
View file @ f8e9bcbb
......@@ -21,7 +21,7 @@ import {
} from "../../dom/customelement.mjs";
import { LogStyleSheet } from "./stylesheet/log.mjs";
import { Entry } from "./log/entry.mjs";
import { validateInstance } from "../../types/validate.mjs";
import {validateInstance, validateString} from "../../types/validate.mjs";
import "./state.mjs";
export { Log };
......@@ -39,14 +39,16 @@ const logElementSymbol = Symbol("logElement");
const emptyStateElementSymbol = Symbol("emptyStateElement");
/**
* A Log component
* A log entry
*
* @fragments /fragments/components/layout/collapse/
* @fragments /fragments/components/state/log
*
* @example /examples/components/state/log-simple
*
* @since 3.74.0
* @copyright schukai GmbH
* @summary A Log component to show a log message.
*/
* @summary The log entry is a single entry in the log.
**/
class Log extends CustomElement {
/**
* @return {void}
......@@ -116,7 +118,7 @@ class Log extends CustomElement {
/**
* Add an entry to the log
* @param entry
* @param {Entry} entry
* @return {Log}
*/
addEntry(entry) {
......@@ -133,15 +135,19 @@ class Log extends CustomElement {
/**
* Add a log message
* @param message
* @param date
*
* @param {string} message
* @param {Date} date
* @return {Log}
* @throws {TypeError} message is not a string
*/
addMessage(message, date) {
if (!date) {
date = new Date();
}
validateString(message);
this.addEntry(
new Entry({
message: message,
......@@ -213,43 +219,40 @@ function initEventHandler() {
*/
function getTemplate() {
// language=HTML
return `
<template id="entry">
<li data-monster-role="entry">
<span></span>
<div data-monster-replace="path:entry.title"
data-monster-attributes="class path:entry.title | ?:title:hidden"></div>
<div data-monster-replace="path:entry.message"
data-monster-attributes="class path:entry.message | ?:message:hidden"></div>
<div data-monster-replace="path:entry.user"
data-monster-attributes="class path:entry.user | ?:user:hidden"></div>
<div data-monster-attributes="class path:entry.date | is-set | ?:datetime:hidden">
<span data-monster-replace="path:entry.date | date"></span>
<span data-monster-replace="path:entry.date | time"></span>
</div>
</li>
</template>
<div part="control" data-monster-role="control">
<div data-monster-role="empty-state" data-monster-attributes="class path:entries | has-entries | ?:hidden:">
<monster-state>
<div part="visual">
<svg width="4rem" height="4rem" viewBox="0 -12 512.00032 512"
xmlns="http://www.w3.org/2000/svg">
<path d="m455.074219 172.613281 53.996093-53.996093c2.226563-2.222657 3.273438-5.367188 2.828126-8.480469-.441407-3.113281-2.328126-5.839844-5.085938-7.355469l-64.914062-35.644531c-4.839844-2.65625-10.917969-.886719-13.578126 3.953125-2.65625 4.84375-.890624 10.921875 3.953126 13.578125l53.234374 29.230469-46.339843 46.335937-166.667969-91.519531 46.335938-46.335938 46.839843 25.722656c4.839844 2.65625 10.921875.890626 13.578125-3.953124 2.660156-4.839844.890625-10.921876-3.953125-13.578126l-53.417969-29.335937c-3.898437-2.140625-8.742187-1.449219-11.882812 1.695313l-54 54-54-54c-3.144531-3.144532-7.988281-3.832032-11.882812-1.695313l-184.929688 101.546875c-2.757812 1.515625-4.644531 4.238281-5.085938 7.355469-.445312 3.113281.601563 6.257812 2.828126 8.480469l53.996093 53.996093-53.996093 53.992188c-2.226563 2.226562-3.273438 5.367187-2.828126 8.484375.441407 3.113281 2.328126 5.839844 5.085938 7.351562l55.882812 30.6875v102.570313c0 3.652343 1.988282 7.011719 5.1875 8.769531l184.929688 101.542969c1.5.824219 3.15625 1.234375 4.8125 1.234375s3.3125-.410156 4.8125-1.234375l184.929688-101.542969c3.199218-1.757812 5.1875-5.117188 5.1875-8.769531v-102.570313l55.882812-30.683594c2.757812-1.515624 4.644531-4.242187 5.085938-7.355468.445312-3.113282-.601563-6.257813-2.828126-8.480469zm-199.074219 90.132813-164.152344-90.136719 164.152344-90.140625 164.152344 90.140625zm-62.832031-240.367188 46.332031 46.335938-166.667969 91.519531-46.335937-46.335937zm-120.328125 162.609375 166.667968 91.519531-46.339843 46.339844-166.671875-91.519531zm358.089844 184.796875-164.929688 90.5625v-102.222656c0-5.523438-4.476562-10-10-10s-10 4.476562-10 10v102.222656l-164.929688-90.5625v-85.671875l109.046876 59.878907c1.511718.828124 3.167968 1.234374 4.808593 1.234374 2.589844 0 5.152344-1.007812 7.074219-2.929687l54-54 54 54c1.921875 1.925781 4.484375 2.929687 7.074219 2.929687 1.640625 0 3.296875-.40625 4.808593-1.234374l109.046876-59.878907zm-112.09375-46.9375-46.339844-46.34375 166.667968-91.515625 46.34375 46.335938zm0 0"/>
<path d="m404.800781 68.175781c2.628907 0 5.199219-1.070312 7.070313-2.933593 1.859375-1.859376 2.929687-4.4375 2.929687-7.066407 0-2.632812-1.070312-5.210937-2.929687-7.070312-1.859375-1.863281-4.441406-2.929688-7.070313-2.929688-2.640625 0-5.210937 1.066407-7.070312 2.929688-1.871094 1.859375-2.929688 4.4375-2.929688 7.070312 0 2.628907 1.058594 5.207031 2.929688 7.066407 1.859375 1.863281 4.441406 2.933593 7.070312 2.933593zm0 0"/>
<path d="m256 314.925781c-2.628906 0-5.210938 1.066407-7.070312 2.929688-1.859376 1.867187-2.929688 4.4375-2.929688 7.070312 0 2.636719 1.070312 5.207031 2.929688 7.078125 1.859374 1.859375 4.441406 2.921875 7.070312 2.921875s5.210938-1.0625 7.070312-2.921875c1.859376-1.871094 2.929688-4.441406 2.929688-7.078125 0-2.632812-1.070312-5.203125-2.929688-7.070312-1.859374-1.863281-4.441406-2.929688-7.070312-2.929688zm0 0"/>
</svg>
</div>
<div part="content" monster-replace="path:labels.nothingToReport">
There is nothing to report yet.
</div>
</monster-state>
return `<template id="entry">
<li data-monster-role="entry">
<span data-monster-replace="path:entry.user"
data-monster-attributes="class path:entry.user | ?:user:hidden"></span>
<span data-monster-replace="path:entry.title"
data-monster-attributes="class path:entry.title | ?:title:hidden"></span>
<span data-monster-replace="path:entry.message"
data-monster-attributes="class path:entry.message | ?:message:hidden"></span>
<span data-monster-replace="path:entry.date | time-ago" data-monster-attributes="title path:entry.date | datetime"></span>
</li>
</template>
<div part="control" data-monster-role="control">
<div data-monster-role="empty-state" data-monster-attributes="class path:entries | has-entries | ?:hidden:">
<monster-state>
<div part="visual">
<svg width="4rem" height="4rem" viewBox="0 -12 512.00032 512"
xmlns="http://www.w3.org/2000/svg">
<path d="m455.074219 172.613281 53.996093-53.996093c2.226563-2.222657 3.273438-5.367188 2.828126-8.480469-.441407-3.113281-2.328126-5.839844-5.085938-7.355469l-64.914062-35.644531c-4.839844-2.65625-10.917969-.886719-13.578126 3.953125-2.65625 4.84375-.890624 10.921875 3.953126 13.578125l53.234374 29.230469-46.339843 46.335937-166.667969-91.519531 46.335938-46.335938 46.839843 25.722656c4.839844 2.65625 10.921875.890626 13.578125-3.953124 2.660156-4.839844.890625-10.921876-3.953125-13.578126l-53.417969-29.335937c-3.898437-2.140625-8.742187-1.449219-11.882812 1.695313l-54 54-54-54c-3.144531-3.144532-7.988281-3.832032-11.882812-1.695313l-184.929688 101.546875c-2.757812 1.515625-4.644531 4.238281-5.085938 7.355469-.445312 3.113281.601563 6.257812 2.828126 8.480469l53.996093 53.996093-53.996093 53.992188c-2.226563 2.226562-3.273438 5.367187-2.828126 8.484375.441407 3.113281 2.328126 5.839844 5.085938 7.351562l55.882812 30.6875v102.570313c0 3.652343 1.988282 7.011719 5.1875 8.769531l184.929688 101.542969c1.5.824219 3.15625 1.234375 4.8125 1.234375s3.3125-.410156 4.8125-1.234375l184.929688-101.542969c3.199218-1.757812 5.1875-5.117188 5.1875-8.769531v-102.570313l55.882812-30.683594c2.757812-1.515624 4.644531-4.242187 5.085938-7.355468.445312-3.113282-.601563-6.257813-2.828126-8.480469zm-199.074219 90.132813-164.152344-90.136719 164.152344-90.140625 164.152344 90.140625zm-62.832031-240.367188 46.332031 46.335938-166.667969 91.519531-46.335937-46.335937zm-120.328125 162.609375 166.667968 91.519531-46.339843 46.339844-166.671875-91.519531zm358.089844 184.796875-164.929688 90.5625v-102.222656c0-5.523438-4.476562-10-10-10s-10 4.476562-10 10v102.222656l-164.929688-90.5625v-85.671875l109.046876 59.878907c1.511718.828124 3.167968 1.234374 4.808593 1.234374 2.589844 0 5.152344-1.007812 7.074219-2.929687l54-54 54 54c1.921875 1.925781 4.484375 2.929687 7.074219 2.929687 1.640625 0 3.296875-.40625 4.808593-1.234374l109.046876-59.878907zm-112.09375-46.9375-46.339844-46.34375 166.667968-91.515625 46.34375 46.335938zm0 0"/>
<path d="m404.800781 68.175781c2.628907 0 5.199219-1.070312 7.070313-2.933593 1.859375-1.859376 2.929687-4.4375 2.929687-7.066407 0-2.632812-1.070312-5.210937-2.929687-7.070312-1.859375-1.863281-4.441406-2.929688-7.070313-2.929688-2.640625 0-5.210937 1.066407-7.070312 2.929688-1.871094 1.859375-2.929688 4.4375-2.929688 7.070312 0 2.628907 1.058594 5.207031 2.929688 7.066407 1.859375 1.863281 4.441406 2.933593 7.070312 2.933593zm0 0"/>
<path d="m256 314.925781c-2.628906 0-5.210938 1.066407-7.070312 2.929688-1.859376 1.867187-2.929688 4.4375-2.929688 7.070312 0 2.636719 1.070312 5.207031 2.929688 7.078125 1.859374 1.859375 4.441406 2.921875 7.070312 2.921875s5.210938-1.0625 7.070312-2.921875c1.859376-1.871094 2.929688-4.441406 2.929688-7.078125 0-2.632812-1.070312-5.203125-2.929688-7.070312-1.859374-1.863281-4.441406-2.929688-7.070312-2.929688zm0 0"/>
</svg>
</div>
<div data-monster-role="entries">
<ul data-monster-insert="entry path:entries">
</ul>
<div part="content" data-monster-replace="path:labels.nothingToReport">
There is nothing to report yet.
</div>
</div>
</monster-state>
</div>
<div data-monster-role="entries">
<ul data-monster-insert="entry path:entries">
</ul>
</div>
</div>
`;
}
......
source/components/state/log/entry.mjs
+ 4
− 4
View file @ f8e9bcbb
......@@ -66,10 +66,10 @@ class Entry extends Base {
*/
get internalDefaults() {
return {
title: undefined,
message: undefined,
user: undefined,
date: undefined,
title: null,
message: null,
user: null,
date: null,
};
}
......
source/components/state/style/log.pcss
+ 18
− 67
View file @ f8e9bcbb
......@@ -8,21 +8,16 @@
@import "../../style/mixin/hover.pcss";
[data-monster-role=entries] {
overflow: hidden;
padding: 10px 0 40px 60px;
& ul {
list-style-type: none;
margin: 0;
padding: 0;
padding: 0 0 0 1.8rem;
position: relative;
top: 0
}
& ul:last-of-type {
top: 2rem;
}
& ul:before {
content: "";
display: block;
......@@ -31,81 +26,37 @@
border: 1px dashed var(--monster-color-primary-2);
position: absolute;
top: 0;
left: 30px
left: 1rem;
}
.title {
font-weight: bold;
}
& ul li {
margin: 20px 60px 60px;
margin: 0;
position: relative;
padding: 10px 20px;
color: var(--monster-color-primary-2);
background-color: var(--monster-bg-color-primary-2);
padding: 0.1rem 0.3rem;
color: var(--monster-color-primary-1);
background-color: var(--monster-bg-color-primary-1);
border-radius: 5px;
}
& ul li > span {
content: "";
display: block;
width: 0;
height: 100%;
border: 1px solid var(--monster-color-primary-2);
position: absolute;
top: 0;
left: -30px
}
& ul li > span:before, & ul li > span:after {
& ul li:before {
content: "";
display: block;
width: 10px;
height: 10px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--monster-bg-color-primary-2);
border: 2px solid var(--monster-color-primary-2);
position: absolute;
left: -7.5px
}
& ul li > span:before {
top: -10px
}
& ul li > span:after {
top: 95%
}
& .title {
text-transform: uppercase;
margin-bottom: 5px
}
& .message:first-letter {
}
& .user {
margin-top: 10px;
font-style: italic;
text-align: right;
margin-right: 20px;
font-size: 0.8rem;
}
& .datetime span {
background: var(--monster-bg-color-primary-3);
border: 1px solid var(--monster-color-primary-2);
position: absolute;
left: -100px;
color: var(--monster-color-primary-1);
background-color: var(--monster-bg-color-primary-1);
font-size: 0.5rem;
left: -0.9rem;
top: 0.6rem;
}
& .datetime span:first-child {
top: -16px
}
& .datetime span:last-child {
top: 94%
}
}
\ No newline at end of file
source/components/state/stylesheet/log.mjs
+ 7
− 14
View file @ f8e9bcbb
......@@ -10,10 +10,10 @@
* For more information about purchasing a commercial license, please contact schukai GmbH.
*/
import { addAttributeToken } from "../../../dom/attributes.mjs";
import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
import {addAttributeToken} from "../../../dom/attributes.mjs";
import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
export { LogStyleSheet };
export {LogStyleSheet}
/**
* @private
......@@ -22,17 +22,10 @@ export { LogStyleSheet };
const LogStyleSheet = new CSSStyleSheet();
try {
LogStyleSheet.insertRule(
`
LogStyleSheet.insertRule(`
@layer log {
[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}.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=entries]{overflow:hidden;padding:10px 0 40px 60px}[data-monster-role=entries] ul{list-style-type:none;margin:0;padding:0;position:relative;top:0}[data-monster-role=entries] ul:last-of-type{top:2rem}[data-monster-role=entries] ul:before{border:1px dashed var(--monster-color-primary-2);content:\"\";display:block;height:100%;left:30px;position:absolute;top:0;width:0}[data-monster-role=entries] ul li{background-color:var(--monster-bg-color-primary-2);border-radius:5px;color:var(--monster-color-primary-2);margin:20px 60px 60px;padding:10px 20px;position:relative}[data-monster-role=entries] ul li>span{border:1px solid var(--monster-color-primary-2);content:\"\";display:block;height:100%;left:-30px;position:absolute;top:0;width:0}[data-monster-role=entries] ul li>span:after,[data-monster-role=entries] ul li>span:before{background:var(--monster-bg-color-primary-2);border:2px solid var(--monster-color-primary-2);border-radius:50%;content:\"\";display:block;height:10px;left:-7.5px;position:absolute;width:10px}[data-monster-role=entries] ul li>span:before{top:-10px}[data-monster-role=entries] ul li>span:after{top:95%}[data-monster-role=entries] .title{margin-bottom:5px;text-transform:uppercase}[data-monster-role=entries] .user{font-size:.8rem;font-style:italic;margin-right:20px;margin-top:10px;text-align:right}[data-monster-role=entries] .datetime span{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);font-size:.5rem;left:-100px;position:absolute}[data-monster-role=entries] .datetime span:first-child{top:-16px}[data-monster-role=entries] .datetime span:last-child{top:94%}
}`,
0,
);
[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}.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=entries] ul{list-style-type:none;margin:0;padding:0 0 0 1.8rem;position:relative;top:0}[data-monster-role=entries] ul:before{border:1px dashed var(--monster-color-primary-2);content:\"\";display:block;height:100%;left:1rem;position:absolute;top:0;width:0}[data-monster-role=entries] .title{font-weight:700}[data-monster-role=entries] ul li{background-color:var(--monster-bg-color-primary-1);border-radius:5px;color:var(--monster-color-primary-1);margin:0;padding:.1rem .3rem;position:relative}[data-monster-role=entries] ul li:before{background:var(--monster-bg-color-primary-3);border:1px solid var(--monster-color-primary-2);border-radius:50%;content:\"\";display:block;height:5px;left:-.9rem;position:absolute;top:.6rem;width:5px}
}`, 0);
} catch (e) {
addAttributeToken(
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
}
source/data/transformer.mjs
+ 806
− 789
View file @ f8e9bcbb
This diff is collapsed.
source/i18n/time-ago.mjs 0 → 100644
+ 671
− 0
View file @ f8e9bcbb
This diff is collapsed.
test/cases/i18n/time-ago.mjs 0 → 100644
+ 33
− 0
View file @ f8e9bcbb
import {expect} from "chai"
import {formatTimeAgo} from "../../../source/i18n/time-ago.mjs";
describe('formatTimeAgo', () => {
it('returns "just now" for times less than a second ago', () => {
const now = new Date();
expect(formatTimeAgo(now, 'en')).to.equal('just now');
});
it('returns "in 1 second" for one second in the future', () => {
const oneSecondFuture = new Date(Date.now() + 1000);
expect(formatTimeAgo(oneSecondFuture, 'en')).to.equal('in 1 second');
});
it('returns "1 second ago" for one second in the past', () => {
const oneSecondPast = new Date(Date.now() - 1000);
expect(formatTimeAgo(oneSecondPast, 'en')).to.equal('1 second ago');
});
it('returns "in 1 minute, 30 seconds" for 90 seconds in the future', () => {
const ninetySecondsFuture = new Date(Date.now() + 90000);
expect(formatTimeAgo(ninetySecondsFuture, 'en')).to.equal('in 1 minute and 30 seconds');
});
it('returns "1 minute, 30 seconds ago" for 90 seconds in the past', () => {
const ninetySecondsPast = new Date(Date.now() - 90000);
expect(formatTimeAgo(ninetySecondsPast, 'en')).to.equal('1 minute and 30 seconds ago');
});
// Weitere Tests können hinzugefügt werden
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment