Skip to content

Commit d5548ea

Browse files
oltonolton
committed
Added component log, you can use Metro.log(...), Metro.warn(...), and Metro.error(...), these messages have different color output.
1 parent b29a4f2 commit d5548ea

8 files changed

Lines changed: 143 additions & 30 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@
33
+ [x] Added attribute `data-size` to `analog-clock` component
44
+ [x] Refactored `clock` component, added attributes `data-size`, `data-hour-format=12|24`, improved time calculation
55
+ [x] Fixed `data-on-color`, `data-off-color` for `rating` component
6-
+ [x] Added method `validate()` to `validator` component
6+
+ [x] Added method `validate()` to `validator` component
7+
+ [x] Added component `log`, you can use `Metro.log(...)`, `Metro.warn(...)`, and `Metro.error(...)`, these messages have different color output.

‎examples/log.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6+
<link href="../lib/metro.css" rel="stylesheet">
7+
<link href="../lib/icons.css" rel="stylesheet">
8+
<link href="index.css" rel="stylesheet">
9+
10+
<title>Test Any - Metro UI :: Popular HTML, CSS and JS library</title>
11+
12+
</head>
13+
<body class="cloak h-100-vh">
14+
<nav data-role="appbar" class="border-bottom bd-default" data-expand="true">
15+
<div class="app-bar-item-static no-hover">
16+
<div class="text-leader" id="component-name">Component Name</div>
17+
</div>
18+
<div class="app-bar-item-static no-hover ml-auto">
19+
<input type="checkbox" data-role="theme-switcher"/>
20+
</div>
21+
</nav>
22+
23+
<div class="container h-100 d-flex flex-center">
24+
</div>
25+
26+
<script src="../lib/metro.js"></script>
27+
<script>
28+
window.DEBUG_PAGE = true
29+
Metro.log('Page loaded')
30+
Metro.log('Others', 1, 2, 3)
31+
Metro.warn('warning')
32+
Metro.error('error')
33+
</script>
34+
</body>
35+
</html>

‎examples/validator-{submit}.html‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,9 @@
7878
</DIV>
7979

8080
<DIV class="row no-gap border-top bd-blue border-size-2 mt-2 py-2">
81-
<DIV class="cell-2 pl-7">
81+
<DIV class="form-actions border-none">
8282
<BUTTON id="SUBMIT" type="button" onClick="onBeforeSubmit(this.form);"
83-
class="button medium bg-sat-cyan bg-cyan-hover fg-white"><SPAN class="icon mif-checkmark" ></SPAN>Conferma</BUTTON>
83+
class="bg-sat-cyan bg-cyan-hover fg-white"><SPAN class="icon mif-checkmark" ></SPAN>Conferma</BUTTON>
8484
<button>Submit</button>
8585
</DIV>
8686
</DIV>
@@ -91,28 +91,28 @@
9191
<script src="../lib/metro.js"></script>
9292
<script>
9393
function onBeforeSubmit(pForm) {
94-
95-
Metro.dialog.create({
96-
title: "INSERT",
97-
content: "Confermi l'inserimento nel DB?",
98-
defaultActions: false,
99-
customButtons: [{
100-
text: "Si",
101-
cls: "js-dialog-close alert medium",
102-
onclick: function() {
103-
if ($(pForm).data('validator').validate()) {
94+
const validator = $(pForm).data('validator');
95+
if (validator?.validate()) {
96+
Metro.dialog.create({
97+
title: "INSERT",
98+
content: "Confermi l'inserimento nel DB?",
99+
defaultActions: false,
100+
customButtons: [{
101+
text: "Si",
102+
cls: "js-dialog-close alert medium",
103+
onclick: function () {
104104
pForm.submit();
105105
}
106-
}},
107-
{
108-
text: "No",
109-
cls: "js-dialog-close medium",
110-
onclick: function() {
111-
return false;
112-
}
113-
}]
114-
});
115-
106+
},
107+
{
108+
text: "No",
109+
cls: "js-dialog-close medium",
110+
onclick: function () {
111+
return false;
112+
}
113+
}]
114+
});
115+
}
116116
}
117117
</script>
118118
</body>

‎lib/metro.js‎

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝
99

1010
* Metro UI v5.1.19 Components Library (https://metroui.org.ua)
11-
* Build: 20.09.2025, 19:17:17
11+
* Build: 30.09.2025, 19:15:15
1212
* Copyright 2012-2025 by Serhii Pimenov
1313
* Licensed under MIT
1414
*/
@@ -11497,7 +11497,7 @@
1149711497
(($7) => {
1149811498
"use strict";
1149911499
globalThis["__version__"] = "5.1.19";
11500-
globalThis["__build_time__"] = "20.09.2025, 19:17:17";
11500+
globalThis["__build_time__"] = "30.09.2025, 19:15:15";
1150111501
const meta_init = $7.meta("metro:init").attr("content");
1150211502
const meta_cloak = $7.meta("metro:cloak").attr("content");
1150311503
const meta_cloak_duration = $7.meta("metro:cloak_duration").attr("content");
@@ -11844,7 +11844,7 @@
1184411844
const normalizeComponentName2 = (name2) => typeof name2 !== "string" ? void 0 : name2.replace(/-/g, "").toLowerCase();
1184511845
const Metro2 = {
1184611846
version: "5.1.19",
11847-
build_time: "20.09.2025, 19:17:17",
11847+
build_time: "30.09.2025, 19:15:15",
1184811848
buildNumber: 0,
1184911849
isTouchable: isTouch3,
1185011850
fullScreenEnabled: document.fullscreenEnabled,
@@ -33913,6 +33913,42 @@ ${err.message}`);
3391333913
});
3391433914
})(Metro, Dom);
3391533915

33916+
// source/components/log/log.js
33917+
((Metro2) => {
33918+
const DEBUG_LABEL_INFO = "INFO";
33919+
const DEBUG_LABEL_ERROR = "ERROR";
33920+
const DEBUG_LABEL_WARNING = "WARN";
33921+
function showLog(type, ...rest) {
33922+
const time = (/* @__PURE__ */ new Date()).toLocaleString();
33923+
const [m5, ...others] = rest;
33924+
if (window.DEBUG_PAGE) {
33925+
switch (type) {
33926+
case "info":
33927+
console.log.apply(null, [`[${DEBUG_LABEL_INFO}] (${time}) ${m5}`, ...others]);
33928+
break;
33929+
case "warn":
33930+
console.log.apply(null, [`%c[${DEBUG_LABEL_WARNING}] (${time}) ${m5}`, ...others, "color: orange;"]);
33931+
break;
33932+
case "error":
33933+
console.log.apply(null, [`%c[${DEBUG_LABEL_ERROR}] (${time}) ${m5}`, ...others, "color: red;"]);
33934+
break;
33935+
}
33936+
}
33937+
}
33938+
function log(...rest) {
33939+
showLog.apply(null, ["info", ...rest]);
33940+
}
33941+
function warn(...rest) {
33942+
showLog.apply(null, ["warn", ...rest]);
33943+
}
33944+
function error(...rest) {
33945+
showLog.apply(null, ["error", ...rest]);
33946+
}
33947+
Metro2.log = log;
33948+
Metro2.warn = warn;
33949+
Metro2.error = error;
33950+
})(Metro);
33951+
3391633952
// source/components/marquee/marquee.js
3391733953
((Metro2, $7) => {
3391833954
"use strict";

‎lib/metro.js.map‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎source/components/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ import "./lightbox/index.js";
8888
import "./linked-block/index.js";
8989
import "./list/index.js";
9090
import "./listview/index.js";
91+
import "./log/index.js";
9192
import "./marquee/index.js";
9293
import "./master/index.js";
9394
import "./media-player/index.js";

‎source/components/log/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import "./log.js";

‎source/components/log/log.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
((Metro) => {
2+
const DEBUG_LABEL_INFO = "INFO";
3+
const DEBUG_LABEL_ERROR = "ERROR";
4+
const DEBUG_LABEL_WARNING = "WARN";
5+
6+
function showLog(type, ...rest) {
7+
const time = new Date().toLocaleString();
8+
const [m, ...others] = rest;
9+
if (window.DEBUG_PAGE) {
10+
switch (type) {
11+
case "info":
12+
console.log.apply(null, [`[${DEBUG_LABEL_INFO}] (${time}) ${m}`, ...others]);
13+
break;
14+
case "warn":
15+
console.log.apply(null, [`%c[${DEBUG_LABEL_WARNING}] (${time}) ${m}`, ...others, "color: orange;"]);
16+
break;
17+
case "error":
18+
console.log.apply(null, [`%c[${DEBUG_LABEL_ERROR}] (${time}) ${m}`, ...others, "color: red;"]);
19+
break;
20+
}
21+
}
22+
}
23+
24+
function log(...rest) {
25+
showLog.apply(null, ["info", ...rest]);
26+
}
27+
28+
function warn(...rest) {
29+
showLog.apply(null, ["warn", ...rest]);
30+
}
31+
32+
function error(...rest) {
33+
showLog.apply(null, ["error", ...rest]);
34+
}
35+
36+
Metro.log = log;
37+
Metro.warn = warn;
38+
Metro.error = error;
39+
})(Metro);

0 commit comments

Comments
 (0)