Initial Commit
This commit is contained in:
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Dependencies
|
||||
node_modules/
|
||||
|
||||
# Logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Environment files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Coverage and temp output
|
||||
coverage/
|
||||
*.tmp
|
||||
*.temp
|
||||
|
||||
# OS / editor files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
.vscode/
|
||||
.idea/
|
||||
70
css/base/alert.css
Normal file
70
css/base/alert.css
Normal file
@@ -0,0 +1,70 @@
|
||||
.y2k-alert {
|
||||
width: min(92vw, 360px);
|
||||
color: var(--y2k-text);
|
||||
background: var(--y2k-surface);
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--y2k-border-light) var(--y2k-border-dark) var(--y2k-border-dark) var(--y2k-border-light);
|
||||
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.22);
|
||||
font-family: var(--y2k-font);
|
||||
}
|
||||
|
||||
.y2k-alert__titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
color: var(--y2k-title-text);
|
||||
background: linear-gradient(90deg, var(--y2k-title-start), var(--y2k-title-end));
|
||||
}
|
||||
|
||||
.y2k-alert__title {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.y2k-alert__content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.y2k-alert__text {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.y2k-alert__input {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--y2k-border-dark);
|
||||
padding: 6px 8px;
|
||||
font-family: var(--y2k-font);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.y2k-alert__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.y2k-alert--info {
|
||||
border-left: 4px solid var(--y2k-type-info);
|
||||
}
|
||||
|
||||
.y2k-alert--warning {
|
||||
border-left: 4px solid var(--y2k-type-warning);
|
||||
}
|
||||
|
||||
.y2k-alert--error {
|
||||
border-left: 4px solid var(--y2k-type-error);
|
||||
}
|
||||
|
||||
.y2k-alert--success {
|
||||
border-left: 4px solid var(--y2k-type-success);
|
||||
}
|
||||
31
css/base/base.css
Normal file
31
css/base/base.css
Normal file
@@ -0,0 +1,31 @@
|
||||
:root {
|
||||
--y2k-font: "Tahoma", "Verdana", sans-serif;
|
||||
--y2k-bg: rgba(0, 0, 0, 0.18);
|
||||
--y2k-surface: #f3f3f3;
|
||||
--y2k-border-light: #ffffff;
|
||||
--y2k-border-dark: #5a5a5a;
|
||||
--y2k-title-start: #1d4f9a;
|
||||
--y2k-title-end: #3b7ad0;
|
||||
--y2k-title-text: #ffffff;
|
||||
--y2k-text: #111111;
|
||||
--y2k-button-bg: #e3e3e3;
|
||||
--y2k-button-text: #111111;
|
||||
--y2k-button-border-light: #ffffff;
|
||||
--y2k-button-border-dark: #6d6d6d;
|
||||
--y2k-focus: #0a6cff;
|
||||
--y2k-type-info: #2f5ca8;
|
||||
--y2k-type-warning: #d08900;
|
||||
--y2k-type-error: #b62828;
|
||||
--y2k-type-success: #288c39;
|
||||
}
|
||||
|
||||
.y2k-alert-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
background: var(--y2k-bg);
|
||||
z-index: 9999;
|
||||
}
|
||||
27
css/base/buttons.css
Normal file
27
css/base/buttons.css
Normal file
@@ -0,0 +1,27 @@
|
||||
.y2k-btn {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--y2k-button-border-light) var(--y2k-button-border-dark) var(--y2k-button-border-dark) var(--y2k-button-border-light);
|
||||
background: var(--y2k-button-bg);
|
||||
color: var(--y2k-button-text);
|
||||
padding: 4px 12px;
|
||||
font-family: var(--y2k-font);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.y2k-btn:active {
|
||||
border-color: var(--y2k-button-border-dark) var(--y2k-button-border-light) var(--y2k-button-border-light) var(--y2k-button-border-dark);
|
||||
}
|
||||
|
||||
.y2k-btn:focus-visible,
|
||||
.y2k-alert__input:focus-visible {
|
||||
outline: 2px solid var(--y2k-focus);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.y2k-btn--close {
|
||||
min-width: 28px;
|
||||
padding: 2px 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
5
css/themes/generic/theme.css
Normal file
5
css/themes/generic/theme.css
Normal file
@@ -0,0 +1,5 @@
|
||||
:root {
|
||||
--y2k-title-start: #4457d9;
|
||||
--y2k-title-end: #1a2d8f;
|
||||
--y2k-bg: rgba(20, 20, 20, 0.22);
|
||||
}
|
||||
11
css/themes/win98/theme.css
Normal file
11
css/themes/win98/theme.css
Normal file
@@ -0,0 +1,11 @@
|
||||
:root {
|
||||
--y2k-font: "MS Sans Serif", "Tahoma", sans-serif;
|
||||
--y2k-surface: #c0c0c0;
|
||||
--y2k-border-light: #ffffff;
|
||||
--y2k-border-dark: #808080;
|
||||
--y2k-title-start: #000080;
|
||||
--y2k-title-end: #1084d0;
|
||||
--y2k-title-text: #ffffff;
|
||||
--y2k-button-bg: #c0c0c0;
|
||||
--y2k-button-border-dark: #808080;
|
||||
}
|
||||
12
css/themes/winxp/theme.css
Normal file
12
css/themes/winxp/theme.css
Normal file
@@ -0,0 +1,12 @@
|
||||
:root {
|
||||
--y2k-font: "Tahoma", "Verdana", sans-serif;
|
||||
--y2k-surface: #ece9d8;
|
||||
--y2k-border-light: #ffffff;
|
||||
--y2k-border-dark: #7f9db9;
|
||||
--y2k-title-start: #0a246a;
|
||||
--y2k-title-end: #3a6ea5;
|
||||
--y2k-title-text: #ffffff;
|
||||
--y2k-button-bg: #f0f4ff;
|
||||
--y2k-button-border-dark: #7f9db9;
|
||||
--y2k-focus: #3257d6;
|
||||
}
|
||||
139
dist/y2k-alerts-generic.css
vendored
Normal file
139
dist/y2k-alerts-generic.css
vendored
Normal file
@@ -0,0 +1,139 @@
|
||||
:root {
|
||||
--y2k-font: "Tahoma", "Verdana", sans-serif;
|
||||
--y2k-bg: rgba(0, 0, 0, 0.18);
|
||||
--y2k-surface: #f3f3f3;
|
||||
--y2k-border-light: #ffffff;
|
||||
--y2k-border-dark: #5a5a5a;
|
||||
--y2k-title-start: #1d4f9a;
|
||||
--y2k-title-end: #3b7ad0;
|
||||
--y2k-title-text: #ffffff;
|
||||
--y2k-text: #111111;
|
||||
--y2k-button-bg: #e3e3e3;
|
||||
--y2k-button-text: #111111;
|
||||
--y2k-button-border-light: #ffffff;
|
||||
--y2k-button-border-dark: #6d6d6d;
|
||||
--y2k-focus: #0a6cff;
|
||||
--y2k-type-info: #2f5ca8;
|
||||
--y2k-type-warning: #d08900;
|
||||
--y2k-type-error: #b62828;
|
||||
--y2k-type-success: #288c39;
|
||||
}
|
||||
|
||||
.y2k-alert-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
background: var(--y2k-bg);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
|
||||
.y2k-alert {
|
||||
width: min(92vw, 360px);
|
||||
color: var(--y2k-text);
|
||||
background: var(--y2k-surface);
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--y2k-border-light) var(--y2k-border-dark) var(--y2k-border-dark) var(--y2k-border-light);
|
||||
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.22);
|
||||
font-family: var(--y2k-font);
|
||||
}
|
||||
|
||||
.y2k-alert__titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
color: var(--y2k-title-text);
|
||||
background: linear-gradient(90deg, var(--y2k-title-start), var(--y2k-title-end));
|
||||
}
|
||||
|
||||
.y2k-alert__title {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.y2k-alert__content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.y2k-alert__text {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.y2k-alert__input {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--y2k-border-dark);
|
||||
padding: 6px 8px;
|
||||
font-family: var(--y2k-font);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.y2k-alert__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.y2k-alert--info {
|
||||
border-left: 4px solid var(--y2k-type-info);
|
||||
}
|
||||
|
||||
.y2k-alert--warning {
|
||||
border-left: 4px solid var(--y2k-type-warning);
|
||||
}
|
||||
|
||||
.y2k-alert--error {
|
||||
border-left: 4px solid var(--y2k-type-error);
|
||||
}
|
||||
|
||||
.y2k-alert--success {
|
||||
border-left: 4px solid var(--y2k-type-success);
|
||||
}
|
||||
|
||||
|
||||
.y2k-btn {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--y2k-button-border-light) var(--y2k-button-border-dark) var(--y2k-button-border-dark) var(--y2k-button-border-light);
|
||||
background: var(--y2k-button-bg);
|
||||
color: var(--y2k-button-text);
|
||||
padding: 4px 12px;
|
||||
font-family: var(--y2k-font);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.y2k-btn:active {
|
||||
border-color: var(--y2k-button-border-dark) var(--y2k-button-border-light) var(--y2k-button-border-light) var(--y2k-button-border-dark);
|
||||
}
|
||||
|
||||
.y2k-btn:focus-visible,
|
||||
.y2k-alert__input:focus-visible {
|
||||
outline: 2px solid var(--y2k-focus);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.y2k-btn--close {
|
||||
min-width: 28px;
|
||||
padding: 2px 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
--y2k-title-start: #4457d9;
|
||||
--y2k-title-end: #1a2d8f;
|
||||
--y2k-bg: rgba(20, 20, 20, 0.22);
|
||||
}
|
||||
1
dist/y2k-alerts-generic.min.css
vendored
Normal file
1
dist/y2k-alerts-generic.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
:root{--y2k-font:"Tahoma","Verdana",sans-serif;--y2k-bg:rgba(0,0,0,0.18);--y2k-surface:#f3f3f3;--y2k-border-light:#ffffff;--y2k-border-dark:#5a5a5a;--y2k-title-start:#1d4f9a;--y2k-title-end:#3b7ad0;--y2k-title-text:#ffffff;--y2k-text:#111111;--y2k-button-bg:#e3e3e3;--y2k-button-text:#111111;--y2k-button-border-light:#ffffff;--y2k-button-border-dark:#6d6d6d;--y2k-focus:#0a6cff;--y2k-type-info:#2f5ca8;--y2k-type-warning:#d08900;--y2k-type-error:#b62828;--y2k-type-success:#288c39}.y2k-alert-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--y2k-bg);z-index:9999}.y2k-alert{width:min(92vw,360px);color:var(--y2k-text);background:var(--y2k-surface);border-style:solid;border-width:2px;border-color:var(--y2k-border-light) var(--y2k-border-dark) var(--y2k-border-dark) var(--y2k-border-light);box-shadow:4px 4px 0 rgba(0,0,0,0.22);font-family:var(--y2k-font)}.y2k-alert__titlebar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;color:var(--y2k-title-text);background:linear-gradient(90deg,var(--y2k-title-start),var(--y2k-title-end))}.y2k-alert__title{margin:0;font-size:14px;font-weight:700;line-height:1}.y2k-alert__content{padding:12px}.y2k-alert__text{margin:0;font-size:14px;line-height:1.4}.y2k-alert__input{width:100%;margin-top:12px;box-sizing:border-box;border:1px solid var(--y2k-border-dark);padding:6px 8px;font-family:var(--y2k-font);font-size:14px}.y2k-alert__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.y2k-alert--info{border-left:4px solid var(--y2k-type-info)}.y2k-alert--warning{border-left:4px solid var(--y2k-type-warning)}.y2k-alert--error{border-left:4px solid var(--y2k-type-error)}.y2k-alert--success{border-left:4px solid var(--y2k-type-success)}.y2k-btn{border-style:solid;border-width:2px;border-color:var(--y2k-button-border-light) var(--y2k-button-border-dark) var(--y2k-button-border-dark) var(--y2k-button-border-light);background:var(--y2k-button-bg);color:var(--y2k-button-text);padding:4px 12px;font-family:var(--y2k-font);font-size:13px;cursor:pointer}.y2k-btn:active{border-color:var(--y2k-button-border-dark) var(--y2k-button-border-light) var(--y2k-button-border-light) var(--y2k-button-border-dark)}.y2k-btn:focus-visible,.y2k-alert__input:focus-visible{outline:2px solid var(--y2k-focus);outline-offset:1px}.y2k-btn--close{min-width:28px;padding:2px 8px;line-height:1}:root{--y2k-title-start:#4457d9;--y2k-title-end:#1a2d8f;--y2k-bg:rgba(20,20,20,0.22)}
|
||||
145
dist/y2k-alerts-win98.css
vendored
Normal file
145
dist/y2k-alerts-win98.css
vendored
Normal file
@@ -0,0 +1,145 @@
|
||||
:root {
|
||||
--y2k-font: "Tahoma", "Verdana", sans-serif;
|
||||
--y2k-bg: rgba(0, 0, 0, 0.18);
|
||||
--y2k-surface: #f3f3f3;
|
||||
--y2k-border-light: #ffffff;
|
||||
--y2k-border-dark: #5a5a5a;
|
||||
--y2k-title-start: #1d4f9a;
|
||||
--y2k-title-end: #3b7ad0;
|
||||
--y2k-title-text: #ffffff;
|
||||
--y2k-text: #111111;
|
||||
--y2k-button-bg: #e3e3e3;
|
||||
--y2k-button-text: #111111;
|
||||
--y2k-button-border-light: #ffffff;
|
||||
--y2k-button-border-dark: #6d6d6d;
|
||||
--y2k-focus: #0a6cff;
|
||||
--y2k-type-info: #2f5ca8;
|
||||
--y2k-type-warning: #d08900;
|
||||
--y2k-type-error: #b62828;
|
||||
--y2k-type-success: #288c39;
|
||||
}
|
||||
|
||||
.y2k-alert-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
background: var(--y2k-bg);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
|
||||
.y2k-alert {
|
||||
width: min(92vw, 360px);
|
||||
color: var(--y2k-text);
|
||||
background: var(--y2k-surface);
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--y2k-border-light) var(--y2k-border-dark) var(--y2k-border-dark) var(--y2k-border-light);
|
||||
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.22);
|
||||
font-family: var(--y2k-font);
|
||||
}
|
||||
|
||||
.y2k-alert__titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
color: var(--y2k-title-text);
|
||||
background: linear-gradient(90deg, var(--y2k-title-start), var(--y2k-title-end));
|
||||
}
|
||||
|
||||
.y2k-alert__title {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.y2k-alert__content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.y2k-alert__text {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.y2k-alert__input {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--y2k-border-dark);
|
||||
padding: 6px 8px;
|
||||
font-family: var(--y2k-font);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.y2k-alert__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.y2k-alert--info {
|
||||
border-left: 4px solid var(--y2k-type-info);
|
||||
}
|
||||
|
||||
.y2k-alert--warning {
|
||||
border-left: 4px solid var(--y2k-type-warning);
|
||||
}
|
||||
|
||||
.y2k-alert--error {
|
||||
border-left: 4px solid var(--y2k-type-error);
|
||||
}
|
||||
|
||||
.y2k-alert--success {
|
||||
border-left: 4px solid var(--y2k-type-success);
|
||||
}
|
||||
|
||||
|
||||
.y2k-btn {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--y2k-button-border-light) var(--y2k-button-border-dark) var(--y2k-button-border-dark) var(--y2k-button-border-light);
|
||||
background: var(--y2k-button-bg);
|
||||
color: var(--y2k-button-text);
|
||||
padding: 4px 12px;
|
||||
font-family: var(--y2k-font);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.y2k-btn:active {
|
||||
border-color: var(--y2k-button-border-dark) var(--y2k-button-border-light) var(--y2k-button-border-light) var(--y2k-button-border-dark);
|
||||
}
|
||||
|
||||
.y2k-btn:focus-visible,
|
||||
.y2k-alert__input:focus-visible {
|
||||
outline: 2px solid var(--y2k-focus);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.y2k-btn--close {
|
||||
min-width: 28px;
|
||||
padding: 2px 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
--y2k-font: "MS Sans Serif", "Tahoma", sans-serif;
|
||||
--y2k-surface: #c0c0c0;
|
||||
--y2k-border-light: #ffffff;
|
||||
--y2k-border-dark: #808080;
|
||||
--y2k-title-start: #000080;
|
||||
--y2k-title-end: #1084d0;
|
||||
--y2k-title-text: #ffffff;
|
||||
--y2k-button-bg: #c0c0c0;
|
||||
--y2k-button-border-dark: #808080;
|
||||
}
|
||||
1
dist/y2k-alerts-win98.min.css
vendored
Normal file
1
dist/y2k-alerts-win98.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
:root{--y2k-font:"Tahoma","Verdana",sans-serif;--y2k-bg:rgba(0,0,0,0.18);--y2k-surface:#f3f3f3;--y2k-border-light:#ffffff;--y2k-border-dark:#5a5a5a;--y2k-title-start:#1d4f9a;--y2k-title-end:#3b7ad0;--y2k-title-text:#ffffff;--y2k-text:#111111;--y2k-button-bg:#e3e3e3;--y2k-button-text:#111111;--y2k-button-border-light:#ffffff;--y2k-button-border-dark:#6d6d6d;--y2k-focus:#0a6cff;--y2k-type-info:#2f5ca8;--y2k-type-warning:#d08900;--y2k-type-error:#b62828;--y2k-type-success:#288c39}.y2k-alert-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--y2k-bg);z-index:9999}.y2k-alert{width:min(92vw,360px);color:var(--y2k-text);background:var(--y2k-surface);border-style:solid;border-width:2px;border-color:var(--y2k-border-light) var(--y2k-border-dark) var(--y2k-border-dark) var(--y2k-border-light);box-shadow:4px 4px 0 rgba(0,0,0,0.22);font-family:var(--y2k-font)}.y2k-alert__titlebar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;color:var(--y2k-title-text);background:linear-gradient(90deg,var(--y2k-title-start),var(--y2k-title-end))}.y2k-alert__title{margin:0;font-size:14px;font-weight:700;line-height:1}.y2k-alert__content{padding:12px}.y2k-alert__text{margin:0;font-size:14px;line-height:1.4}.y2k-alert__input{width:100%;margin-top:12px;box-sizing:border-box;border:1px solid var(--y2k-border-dark);padding:6px 8px;font-family:var(--y2k-font);font-size:14px}.y2k-alert__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.y2k-alert--info{border-left:4px solid var(--y2k-type-info)}.y2k-alert--warning{border-left:4px solid var(--y2k-type-warning)}.y2k-alert--error{border-left:4px solid var(--y2k-type-error)}.y2k-alert--success{border-left:4px solid var(--y2k-type-success)}.y2k-btn{border-style:solid;border-width:2px;border-color:var(--y2k-button-border-light) var(--y2k-button-border-dark) var(--y2k-button-border-dark) var(--y2k-button-border-light);background:var(--y2k-button-bg);color:var(--y2k-button-text);padding:4px 12px;font-family:var(--y2k-font);font-size:13px;cursor:pointer}.y2k-btn:active{border-color:var(--y2k-button-border-dark) var(--y2k-button-border-light) var(--y2k-button-border-light) var(--y2k-button-border-dark)}.y2k-btn:focus-visible,.y2k-alert__input:focus-visible{outline:2px solid var(--y2k-focus);outline-offset:1px}.y2k-btn--close{min-width:28px;padding:2px 8px;line-height:1}:root{--y2k-font:"MS Sans Serif","Tahoma",sans-serif;--y2k-surface:#c0c0c0;--y2k-border-light:#ffffff;--y2k-border-dark:#808080;--y2k-title-start:#000080;--y2k-title-end:#1084d0;--y2k-title-text:#ffffff;--y2k-button-bg:#c0c0c0;--y2k-button-border-dark:#808080}
|
||||
146
dist/y2k-alerts-winxp.css
vendored
Normal file
146
dist/y2k-alerts-winxp.css
vendored
Normal file
@@ -0,0 +1,146 @@
|
||||
:root {
|
||||
--y2k-font: "Tahoma", "Verdana", sans-serif;
|
||||
--y2k-bg: rgba(0, 0, 0, 0.18);
|
||||
--y2k-surface: #f3f3f3;
|
||||
--y2k-border-light: #ffffff;
|
||||
--y2k-border-dark: #5a5a5a;
|
||||
--y2k-title-start: #1d4f9a;
|
||||
--y2k-title-end: #3b7ad0;
|
||||
--y2k-title-text: #ffffff;
|
||||
--y2k-text: #111111;
|
||||
--y2k-button-bg: #e3e3e3;
|
||||
--y2k-button-text: #111111;
|
||||
--y2k-button-border-light: #ffffff;
|
||||
--y2k-button-border-dark: #6d6d6d;
|
||||
--y2k-focus: #0a6cff;
|
||||
--y2k-type-info: #2f5ca8;
|
||||
--y2k-type-warning: #d08900;
|
||||
--y2k-type-error: #b62828;
|
||||
--y2k-type-success: #288c39;
|
||||
}
|
||||
|
||||
.y2k-alert-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
background: var(--y2k-bg);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
|
||||
.y2k-alert {
|
||||
width: min(92vw, 360px);
|
||||
color: var(--y2k-text);
|
||||
background: var(--y2k-surface);
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--y2k-border-light) var(--y2k-border-dark) var(--y2k-border-dark) var(--y2k-border-light);
|
||||
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.22);
|
||||
font-family: var(--y2k-font);
|
||||
}
|
||||
|
||||
.y2k-alert__titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
color: var(--y2k-title-text);
|
||||
background: linear-gradient(90deg, var(--y2k-title-start), var(--y2k-title-end));
|
||||
}
|
||||
|
||||
.y2k-alert__title {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.y2k-alert__content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.y2k-alert__text {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.y2k-alert__input {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--y2k-border-dark);
|
||||
padding: 6px 8px;
|
||||
font-family: var(--y2k-font);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.y2k-alert__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.y2k-alert--info {
|
||||
border-left: 4px solid var(--y2k-type-info);
|
||||
}
|
||||
|
||||
.y2k-alert--warning {
|
||||
border-left: 4px solid var(--y2k-type-warning);
|
||||
}
|
||||
|
||||
.y2k-alert--error {
|
||||
border-left: 4px solid var(--y2k-type-error);
|
||||
}
|
||||
|
||||
.y2k-alert--success {
|
||||
border-left: 4px solid var(--y2k-type-success);
|
||||
}
|
||||
|
||||
|
||||
.y2k-btn {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--y2k-button-border-light) var(--y2k-button-border-dark) var(--y2k-button-border-dark) var(--y2k-button-border-light);
|
||||
background: var(--y2k-button-bg);
|
||||
color: var(--y2k-button-text);
|
||||
padding: 4px 12px;
|
||||
font-family: var(--y2k-font);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.y2k-btn:active {
|
||||
border-color: var(--y2k-button-border-dark) var(--y2k-button-border-light) var(--y2k-button-border-light) var(--y2k-button-border-dark);
|
||||
}
|
||||
|
||||
.y2k-btn:focus-visible,
|
||||
.y2k-alert__input:focus-visible {
|
||||
outline: 2px solid var(--y2k-focus);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.y2k-btn--close {
|
||||
min-width: 28px;
|
||||
padding: 2px 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
--y2k-font: "Tahoma", "Verdana", sans-serif;
|
||||
--y2k-surface: #ece9d8;
|
||||
--y2k-border-light: #ffffff;
|
||||
--y2k-border-dark: #7f9db9;
|
||||
--y2k-title-start: #0a246a;
|
||||
--y2k-title-end: #3a6ea5;
|
||||
--y2k-title-text: #ffffff;
|
||||
--y2k-button-bg: #f0f4ff;
|
||||
--y2k-button-border-dark: #7f9db9;
|
||||
--y2k-focus: #3257d6;
|
||||
}
|
||||
1
dist/y2k-alerts-winxp.min.css
vendored
Normal file
1
dist/y2k-alerts-winxp.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
:root{--y2k-font:"Tahoma","Verdana",sans-serif;--y2k-bg:rgba(0,0,0,0.18);--y2k-surface:#f3f3f3;--y2k-border-light:#ffffff;--y2k-border-dark:#5a5a5a;--y2k-title-start:#1d4f9a;--y2k-title-end:#3b7ad0;--y2k-title-text:#ffffff;--y2k-text:#111111;--y2k-button-bg:#e3e3e3;--y2k-button-text:#111111;--y2k-button-border-light:#ffffff;--y2k-button-border-dark:#6d6d6d;--y2k-focus:#0a6cff;--y2k-type-info:#2f5ca8;--y2k-type-warning:#d08900;--y2k-type-error:#b62828;--y2k-type-success:#288c39}.y2k-alert-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--y2k-bg);z-index:9999}.y2k-alert{width:min(92vw,360px);color:var(--y2k-text);background:var(--y2k-surface);border-style:solid;border-width:2px;border-color:var(--y2k-border-light) var(--y2k-border-dark) var(--y2k-border-dark) var(--y2k-border-light);box-shadow:4px 4px 0 rgba(0,0,0,0.22);font-family:var(--y2k-font)}.y2k-alert__titlebar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;color:var(--y2k-title-text);background:linear-gradient(90deg,var(--y2k-title-start),var(--y2k-title-end))}.y2k-alert__title{margin:0;font-size:14px;font-weight:700;line-height:1}.y2k-alert__content{padding:12px}.y2k-alert__text{margin:0;font-size:14px;line-height:1.4}.y2k-alert__input{width:100%;margin-top:12px;box-sizing:border-box;border:1px solid var(--y2k-border-dark);padding:6px 8px;font-family:var(--y2k-font);font-size:14px}.y2k-alert__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.y2k-alert--info{border-left:4px solid var(--y2k-type-info)}.y2k-alert--warning{border-left:4px solid var(--y2k-type-warning)}.y2k-alert--error{border-left:4px solid var(--y2k-type-error)}.y2k-alert--success{border-left:4px solid var(--y2k-type-success)}.y2k-btn{border-style:solid;border-width:2px;border-color:var(--y2k-button-border-light) var(--y2k-button-border-dark) var(--y2k-button-border-dark) var(--y2k-button-border-light);background:var(--y2k-button-bg);color:var(--y2k-button-text);padding:4px 12px;font-family:var(--y2k-font);font-size:13px;cursor:pointer}.y2k-btn:active{border-color:var(--y2k-button-border-dark) var(--y2k-button-border-light) var(--y2k-button-border-light) var(--y2k-button-border-dark)}.y2k-btn:focus-visible,.y2k-alert__input:focus-visible{outline:2px solid var(--y2k-focus);outline-offset:1px}.y2k-btn--close{min-width:28px;padding:2px 8px;line-height:1}:root{--y2k-font:"Tahoma","Verdana",sans-serif;--y2k-surface:#ece9d8;--y2k-border-light:#ffffff;--y2k-border-dark:#7f9db9;--y2k-title-start:#0a246a;--y2k-title-end:#3a6ea5;--y2k-title-text:#ffffff;--y2k-button-bg:#f0f4ff;--y2k-button-border-dark:#7f9db9;--y2k-focus:#3257d6}
|
||||
139
dist/y2k-alerts.css
vendored
Normal file
139
dist/y2k-alerts.css
vendored
Normal file
@@ -0,0 +1,139 @@
|
||||
:root {
|
||||
--y2k-font: "Tahoma", "Verdana", sans-serif;
|
||||
--y2k-bg: rgba(0, 0, 0, 0.18);
|
||||
--y2k-surface: #f3f3f3;
|
||||
--y2k-border-light: #ffffff;
|
||||
--y2k-border-dark: #5a5a5a;
|
||||
--y2k-title-start: #1d4f9a;
|
||||
--y2k-title-end: #3b7ad0;
|
||||
--y2k-title-text: #ffffff;
|
||||
--y2k-text: #111111;
|
||||
--y2k-button-bg: #e3e3e3;
|
||||
--y2k-button-text: #111111;
|
||||
--y2k-button-border-light: #ffffff;
|
||||
--y2k-button-border-dark: #6d6d6d;
|
||||
--y2k-focus: #0a6cff;
|
||||
--y2k-type-info: #2f5ca8;
|
||||
--y2k-type-warning: #d08900;
|
||||
--y2k-type-error: #b62828;
|
||||
--y2k-type-success: #288c39;
|
||||
}
|
||||
|
||||
.y2k-alert-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
background: var(--y2k-bg);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
|
||||
.y2k-alert {
|
||||
width: min(92vw, 360px);
|
||||
color: var(--y2k-text);
|
||||
background: var(--y2k-surface);
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--y2k-border-light) var(--y2k-border-dark) var(--y2k-border-dark) var(--y2k-border-light);
|
||||
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.22);
|
||||
font-family: var(--y2k-font);
|
||||
}
|
||||
|
||||
.y2k-alert__titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
color: var(--y2k-title-text);
|
||||
background: linear-gradient(90deg, var(--y2k-title-start), var(--y2k-title-end));
|
||||
}
|
||||
|
||||
.y2k-alert__title {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.y2k-alert__content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.y2k-alert__text {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.y2k-alert__input {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--y2k-border-dark);
|
||||
padding: 6px 8px;
|
||||
font-family: var(--y2k-font);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.y2k-alert__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.y2k-alert--info {
|
||||
border-left: 4px solid var(--y2k-type-info);
|
||||
}
|
||||
|
||||
.y2k-alert--warning {
|
||||
border-left: 4px solid var(--y2k-type-warning);
|
||||
}
|
||||
|
||||
.y2k-alert--error {
|
||||
border-left: 4px solid var(--y2k-type-error);
|
||||
}
|
||||
|
||||
.y2k-alert--success {
|
||||
border-left: 4px solid var(--y2k-type-success);
|
||||
}
|
||||
|
||||
|
||||
.y2k-btn {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: var(--y2k-button-border-light) var(--y2k-button-border-dark) var(--y2k-button-border-dark) var(--y2k-button-border-light);
|
||||
background: var(--y2k-button-bg);
|
||||
color: var(--y2k-button-text);
|
||||
padding: 4px 12px;
|
||||
font-family: var(--y2k-font);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.y2k-btn:active {
|
||||
border-color: var(--y2k-button-border-dark) var(--y2k-button-border-light) var(--y2k-button-border-light) var(--y2k-button-border-dark);
|
||||
}
|
||||
|
||||
.y2k-btn:focus-visible,
|
||||
.y2k-alert__input:focus-visible {
|
||||
outline: 2px solid var(--y2k-focus);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.y2k-btn--close {
|
||||
min-width: 28px;
|
||||
padding: 2px 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
--y2k-title-start: #4457d9;
|
||||
--y2k-title-end: #1a2d8f;
|
||||
--y2k-bg: rgba(20, 20, 20, 0.22);
|
||||
}
|
||||
229
dist/y2k-alerts.js
vendored
Normal file
229
dist/y2k-alerts.js
vendored
Normal file
@@ -0,0 +1,229 @@
|
||||
// CONSTANTS
|
||||
((global) => {
|
||||
|
||||
global.Y2K = {
|
||||
TYPE_INFO: "info",
|
||||
TYPE_WARNING: "warning",
|
||||
TYPE_ERROR: "error",
|
||||
TYPE_SUCCESS: "success"
|
||||
};
|
||||
|
||||
})(window);
|
||||
|
||||
|
||||
((global) => {
|
||||
|
||||
function createElement(tagName, attributes, text) {
|
||||
var element = document.createElement(tagName);
|
||||
var attrs = attributes || {};
|
||||
var keys = Object.keys(attrs);
|
||||
|
||||
for (var i = 0; i < keys.length; i += 1) {
|
||||
element.setAttribute(keys[i], attrs[keys[i]]);
|
||||
}
|
||||
|
||||
if (text !== undefined && text !== null) {
|
||||
element.textContent = text;
|
||||
}
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
function appendChildren(parent, children) {
|
||||
for (var i = 0; i < children.length; i += 1) {
|
||||
parent.appendChild(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
global.Y2KDom = {
|
||||
createElement: createElement,
|
||||
appendChildren: appendChildren
|
||||
};
|
||||
|
||||
})(window);
|
||||
|
||||
|
||||
((global) => {
|
||||
|
||||
var Y2K = global.Y2K;
|
||||
var createElement = global.Y2KDom.createElement;
|
||||
var appendChildren = global.Y2KDom.appendChildren;
|
||||
|
||||
class y2kAlert extends EventTarget {
|
||||
constructor(title, type, message, options) {
|
||||
super();
|
||||
this.title = title || "Alert";
|
||||
this.type = type || Y2K.TYPE_INFO;
|
||||
this.message = message || "";
|
||||
this.options = options || {};
|
||||
this.isVisible = false;
|
||||
this.inputElement = null;
|
||||
this.overlayElement = null;
|
||||
this.dialogElement = null;
|
||||
this.submitButton = null;
|
||||
this.closeButton = null;
|
||||
|
||||
this._build();
|
||||
this._bindEvents();
|
||||
}
|
||||
|
||||
_build() {
|
||||
this.overlayElement = createElement("div", {
|
||||
class: "y2k-alert-overlay"
|
||||
});
|
||||
|
||||
this.dialogElement = createElement("section", {
|
||||
class: "y2k-alert y2k-alert--" + this.type,
|
||||
role: "dialog",
|
||||
"aria-modal": "true",
|
||||
"aria-label": this.title
|
||||
});
|
||||
|
||||
var titleBar = createElement("header", {
|
||||
class: "y2k-alert__titlebar"
|
||||
});
|
||||
|
||||
var titleElement = createElement("h2", {
|
||||
class: "y2k-alert__title"
|
||||
}, this.title);
|
||||
|
||||
this.closeButton = createElement("button", {
|
||||
class: "y2k-btn y2k-btn--close",
|
||||
type: "button",
|
||||
"aria-label": "Close alert"
|
||||
}, "x");
|
||||
|
||||
appendChildren(titleBar, [titleElement, this.closeButton]);
|
||||
|
||||
var content = createElement("div", {
|
||||
class: "y2k-alert__content"
|
||||
});
|
||||
|
||||
var textElement = createElement("p", {
|
||||
class: "y2k-alert__text"
|
||||
}, this.message);
|
||||
|
||||
content.appendChild(textElement);
|
||||
|
||||
if (this.options.input) {
|
||||
var inputConfig = typeof this.options.input === "object" ? this.options.input : {};
|
||||
this.inputElement = createElement("input", {
|
||||
class: "y2k-alert__input",
|
||||
type: inputConfig.type || "text",
|
||||
placeholder: inputConfig.placeholder || ""
|
||||
});
|
||||
|
||||
if (inputConfig.value) {
|
||||
this.inputElement.setAttribute("value", inputConfig.value);
|
||||
}
|
||||
|
||||
content.appendChild(this.inputElement);
|
||||
}
|
||||
|
||||
var actions = createElement("footer", {
|
||||
class: "y2k-alert__actions"
|
||||
});
|
||||
|
||||
this.submitButton = createElement("button", {
|
||||
class: "y2k-btn",
|
||||
type: "button"
|
||||
}, this.options.submitText || "OK");
|
||||
|
||||
actions.appendChild(this.submitButton);
|
||||
appendChildren(content, [actions]);
|
||||
appendChildren(this.dialogElement, [titleBar, content]);
|
||||
this.overlayElement.appendChild(this.dialogElement);
|
||||
}
|
||||
|
||||
_bindEvents() {
|
||||
var self = this;
|
||||
|
||||
this.closeButton.addEventListener("click", function () {
|
||||
self.close("close-button");
|
||||
});
|
||||
|
||||
this.submitButton.addEventListener("click", function () {
|
||||
self.submit();
|
||||
});
|
||||
|
||||
if (this.inputElement) {
|
||||
this.inputElement.addEventListener("keydown", function (event) {
|
||||
if (event.key === "Enter") {
|
||||
self.submit();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
show(parent) {
|
||||
var mountPoint = parent || document.body;
|
||||
if (!this.isVisible) {
|
||||
mountPoint.appendChild(this.overlayElement);
|
||||
this.isVisible = true;
|
||||
}
|
||||
|
||||
if (this.inputElement) {
|
||||
this.inputElement.focus();
|
||||
} else {
|
||||
this.submitButton.focus();
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
hide() {
|
||||
if (this.isVisible && this.overlayElement.parentNode) {
|
||||
this.overlayElement.parentNode.removeChild(this.overlayElement);
|
||||
}
|
||||
|
||||
this.isVisible = false;
|
||||
return this;
|
||||
}
|
||||
|
||||
close(reason) {
|
||||
this.hide();
|
||||
this.dispatchEvent(new CustomEvent("close", {
|
||||
detail: {
|
||||
reason: reason || "close"
|
||||
}
|
||||
}));
|
||||
return this;
|
||||
}
|
||||
|
||||
submit() {
|
||||
var value = this.inputElement ? this.inputElement.value : null;
|
||||
this.dispatchEvent(new CustomEvent("submit", {
|
||||
detail: {
|
||||
value: value,
|
||||
title: this.title,
|
||||
message: this.message,
|
||||
type: this.type
|
||||
}
|
||||
}));
|
||||
this.hide();
|
||||
return this;
|
||||
}
|
||||
|
||||
static quick(title, type, message, options) {
|
||||
var alertInstance = new y2kAlert(title, type, message, options);
|
||||
alertInstance.show();
|
||||
return alertInstance;
|
||||
}
|
||||
}
|
||||
|
||||
global.y2kAlert = y2kAlert;
|
||||
|
||||
})(window);
|
||||
|
||||
|
||||
((global) => {
|
||||
|
||||
global.Y2KAlerts = {
|
||||
y2kAlert: global.y2kAlert,
|
||||
Y2K: global.Y2K,
|
||||
quick: function (title, type, message, options) {
|
||||
return global.y2kAlert.quick(title, type, message, options);
|
||||
}
|
||||
};
|
||||
|
||||
})(window);
|
||||
1
dist/y2k-alerts.min.css
vendored
Normal file
1
dist/y2k-alerts.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
:root{--y2k-font:"Tahoma","Verdana",sans-serif;--y2k-bg:rgba(0,0,0,0.18);--y2k-surface:#f3f3f3;--y2k-border-light:#ffffff;--y2k-border-dark:#5a5a5a;--y2k-title-start:#1d4f9a;--y2k-title-end:#3b7ad0;--y2k-title-text:#ffffff;--y2k-text:#111111;--y2k-button-bg:#e3e3e3;--y2k-button-text:#111111;--y2k-button-border-light:#ffffff;--y2k-button-border-dark:#6d6d6d;--y2k-focus:#0a6cff;--y2k-type-info:#2f5ca8;--y2k-type-warning:#d08900;--y2k-type-error:#b62828;--y2k-type-success:#288c39}.y2k-alert-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--y2k-bg);z-index:9999}.y2k-alert{width:min(92vw,360px);color:var(--y2k-text);background:var(--y2k-surface);border-style:solid;border-width:2px;border-color:var(--y2k-border-light) var(--y2k-border-dark) var(--y2k-border-dark) var(--y2k-border-light);box-shadow:4px 4px 0 rgba(0,0,0,0.22);font-family:var(--y2k-font)}.y2k-alert__titlebar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;color:var(--y2k-title-text);background:linear-gradient(90deg,var(--y2k-title-start),var(--y2k-title-end))}.y2k-alert__title{margin:0;font-size:14px;font-weight:700;line-height:1}.y2k-alert__content{padding:12px}.y2k-alert__text{margin:0;font-size:14px;line-height:1.4}.y2k-alert__input{width:100%;margin-top:12px;box-sizing:border-box;border:1px solid var(--y2k-border-dark);padding:6px 8px;font-family:var(--y2k-font);font-size:14px}.y2k-alert__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.y2k-alert--info{border-left:4px solid var(--y2k-type-info)}.y2k-alert--warning{border-left:4px solid var(--y2k-type-warning)}.y2k-alert--error{border-left:4px solid var(--y2k-type-error)}.y2k-alert--success{border-left:4px solid var(--y2k-type-success)}.y2k-btn{border-style:solid;border-width:2px;border-color:var(--y2k-button-border-light) var(--y2k-button-border-dark) var(--y2k-button-border-dark) var(--y2k-button-border-light);background:var(--y2k-button-bg);color:var(--y2k-button-text);padding:4px 12px;font-family:var(--y2k-font);font-size:13px;cursor:pointer}.y2k-btn:active{border-color:var(--y2k-button-border-dark) var(--y2k-button-border-light) var(--y2k-button-border-light) var(--y2k-button-border-dark)}.y2k-btn:focus-visible,.y2k-alert__input:focus-visible{outline:2px solid var(--y2k-focus);outline-offset:1px}.y2k-btn--close{min-width:28px;padding:2px 8px;line-height:1}:root{--y2k-title-start:#4457d9;--y2k-title-end:#1a2d8f;--y2k-bg:rgba(20,20,20,0.22)}
|
||||
1
dist/y2k-alerts.min.js
vendored
Normal file
1
dist/y2k-alerts.min.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
((global) => { global.Y2K = { TYPE_INFO: "info", TYPE_WARNING: "warning", TYPE_ERROR: "error", TYPE_SUCCESS: "success" }; })(window); ((global) => { function createElement(tagName, attributes, text) { var element = document.createElement(tagName); var attrs = attributes || {}; var keys = Object.keys(attrs); for (var i = 0; i < keys.length; i += 1) { element.setAttribute(keys[i], attrs[keys[i]]); } if (text !== undefined && text !== null) { element.textContent = text; } return element; } function appendChildren(parent, children) { for (var i = 0; i < children.length; i += 1) { parent.appendChild(children[i]); } } global.Y2KDom = { createElement: createElement, appendChildren: appendChildren }; })(window); ((global) => { var Y2K = global.Y2K; var createElement = global.Y2KDom.createElement; var appendChildren = global.Y2KDom.appendChildren; class y2kAlert extends EventTarget { constructor(title, type, message, options) { super(); this.title = title || "Alert"; this.type = type || Y2K.TYPE_INFO; this.message = message || ""; this.options = options || {}; this.isVisible = false; this.inputElement = null; this.overlayElement = null; this.dialogElement = null; this.submitButton = null; this.closeButton = null; this._build(); this._bindEvents(); } _build() { this.overlayElement = createElement("div", { class: "y2k-alert-overlay" }); this.dialogElement = createElement("section", { class: "y2k-alert y2k-alert--" + this.type, role: "dialog", "aria-modal": "true", "aria-label": this.title }); var titleBar = createElement("header", { class: "y2k-alert__titlebar" }); var titleElement = createElement("h2", { class: "y2k-alert__title" }, this.title); this.closeButton = createElement("button", { class: "y2k-btn y2k-btn--close", type: "button", "aria-label": "Close alert" }, "x"); appendChildren(titleBar, [titleElement, this.closeButton]); var content = createElement("div", { class: "y2k-alert__content" }); var textElement = createElement("p", { class: "y2k-alert__text" }, this.message); content.appendChild(textElement); if (this.options.input) { var inputConfig = typeof this.options.input === "object" ? this.options.input : {}; this.inputElement = createElement("input", { class: "y2k-alert__input", type: inputConfig.type || "text", placeholder: inputConfig.placeholder || "" }); if (inputConfig.value) { this.inputElement.setAttribute("value", inputConfig.value); } content.appendChild(this.inputElement); } var actions = createElement("footer", { class: "y2k-alert__actions" }); this.submitButton = createElement("button", { class: "y2k-btn", type: "button" }, this.options.submitText || "OK"); actions.appendChild(this.submitButton); appendChildren(content, [actions]); appendChildren(this.dialogElement, [titleBar, content]); this.overlayElement.appendChild(this.dialogElement); } _bindEvents() { var self = this; this.closeButton.addEventListener("click", function () { self.close("close-button"); }); this.submitButton.addEventListener("click", function () { self.submit(); }); if (this.inputElement) { this.inputElement.addEventListener("keydown", function (event) { if (event.key === "Enter") { self.submit(); } }); } } show(parent) { var mountPoint = parent || document.body; if (!this.isVisible) { mountPoint.appendChild(this.overlayElement); this.isVisible = true; } if (this.inputElement) { this.inputElement.focus(); } else { this.submitButton.focus(); } return this; } hide() { if (this.isVisible && this.overlayElement.parentNode) { this.overlayElement.parentNode.removeChild(this.overlayElement); } this.isVisible = false; return this; } close(reason) { this.hide(); this.dispatchEvent(new CustomEvent("close", { detail: { reason: reason || "close" } })); return this; } submit() { var value = this.inputElement ? this.inputElement.value : null; this.dispatchEvent(new CustomEvent("submit", { detail: { value: value, title: this.title, message: this.message, type: this.type } })); this.hide(); return this; } static quick(title, type, message, options) { var alertInstance = new y2kAlert(title, type, message, options); alertInstance.show(); return alertInstance; } } global.y2kAlert = y2kAlert; })(window); ((global) => { global.Y2KAlerts = { y2kAlert: global.y2kAlert, Y2K: global.Y2K, quick: function (title, type, message, options) { return global.y2kAlert.quick(title, type, message, options); } }; })(window);
|
||||
71
examples/generic.html
Normal file
71
examples/generic.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Y2K Alerts - Generic</title>
|
||||
<link rel="stylesheet" href="../dist/y2k-alerts-generic.css" />
|
||||
<style>
|
||||
body {
|
||||
font-family: Tahoma, Verdana, sans-serif;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Generic Theme</h1>
|
||||
<div class="controls">
|
||||
<button id="show-warning">Show Warning</button>
|
||||
<button id="show-input">Show Input Alert</button>
|
||||
</div>
|
||||
|
||||
<script src="../dist/y2k-alerts.js"></script>
|
||||
<script>
|
||||
var warningButton = document.getElementById("show-warning");
|
||||
var inputButton = document.getElementById("show-input");
|
||||
|
||||
warningButton.addEventListener("click", function () {
|
||||
var alertInstance = new y2kAlert(
|
||||
"Storage Warning",
|
||||
Y2K.TYPE_WARNING,
|
||||
"Disk space is running low."
|
||||
);
|
||||
|
||||
alertInstance.addEventListener("submit", function (event) {
|
||||
console.log("submit", event.detail);
|
||||
});
|
||||
|
||||
alertInstance.addEventListener("close", function (event) {
|
||||
console.log("close", event.detail);
|
||||
});
|
||||
|
||||
alertInstance.show();
|
||||
});
|
||||
|
||||
inputButton.addEventListener("click", function () {
|
||||
var alertInstance = new y2kAlert(
|
||||
"Enter Name",
|
||||
Y2K.TYPE_INFO,
|
||||
"Please type your name:",
|
||||
{
|
||||
input: {
|
||||
placeholder: "Name"
|
||||
},
|
||||
submitText: "Save"
|
||||
}
|
||||
);
|
||||
|
||||
alertInstance.addEventListener("submit", function (event) {
|
||||
console.log("Input value:", event.detail.value);
|
||||
});
|
||||
|
||||
alertInstance.show();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
30
examples/win98.html
Normal file
30
examples/win98.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Y2K Alerts - Win98 Theme</title>
|
||||
<link rel="stylesheet" href="../dist/y2k-alerts-win98.css" />
|
||||
<style>
|
||||
body {
|
||||
font-family: "MS Sans Serif", Tahoma, sans-serif;
|
||||
padding: 24px;
|
||||
background: #008080;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button id="show-alert">Show Win98 Alert</button>
|
||||
|
||||
<script src="../dist/y2k-alerts.js"></script>
|
||||
<script>
|
||||
document.getElementById("show-alert").addEventListener("click", function () {
|
||||
y2kAlert.quick(
|
||||
"Legacy Notice",
|
||||
Y2K.TYPE_SUCCESS,
|
||||
"Operation completed successfully."
|
||||
);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
41
examples/winxp.html
Normal file
41
examples/winxp.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Y2K Alerts - WinXP Theme</title>
|
||||
<link rel="stylesheet" href="../dist/y2k-alerts-winxp.css" />
|
||||
<style>
|
||||
body {
|
||||
font-family: Tahoma, Verdana, sans-serif;
|
||||
padding: 24px;
|
||||
background: #3a6ea5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button id="show-alert">Show WinXP Alert</button>
|
||||
|
||||
<script src="../dist/y2k-alerts.js"></script>
|
||||
<script>
|
||||
document.getElementById("show-alert").addEventListener("click", function () {
|
||||
var alertInstance = new y2kAlert(
|
||||
"Confirmation",
|
||||
Y2K.TYPE_INFO,
|
||||
"Do you want to continue?",
|
||||
{
|
||||
input: {
|
||||
placeholder: "Type yes"
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
alertInstance.addEventListener("submit", function (event) {
|
||||
console.log("User input:", event.detail.value);
|
||||
});
|
||||
|
||||
alertInstance.show();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
11
js/constants.js
Normal file
11
js/constants.js
Normal file
@@ -0,0 +1,11 @@
|
||||
// CONSTANTS
|
||||
((global) => {
|
||||
|
||||
global.Y2K = {
|
||||
TYPE_INFO: "info",
|
||||
TYPE_WARNING: "warning",
|
||||
TYPE_ERROR: "error",
|
||||
TYPE_SUCCESS: "success"
|
||||
};
|
||||
|
||||
})(window);
|
||||
30
js/dom.js
Normal file
30
js/dom.js
Normal file
@@ -0,0 +1,30 @@
|
||||
((global) => {
|
||||
|
||||
function createElement(tagName, attributes, text) {
|
||||
var element = document.createElement(tagName);
|
||||
var attrs = attributes || {};
|
||||
var keys = Object.keys(attrs);
|
||||
|
||||
for (var i = 0; i < keys.length; i += 1) {
|
||||
element.setAttribute(keys[i], attrs[keys[i]]);
|
||||
}
|
||||
|
||||
if (text !== undefined && text !== null) {
|
||||
element.textContent = text;
|
||||
}
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
function appendChildren(parent, children) {
|
||||
for (var i = 0; i < children.length; i += 1) {
|
||||
parent.appendChild(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
global.Y2KDom = {
|
||||
createElement: createElement,
|
||||
appendChildren: appendChildren
|
||||
};
|
||||
|
||||
})(window);
|
||||
11
js/index.js
Normal file
11
js/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
((global) => {
|
||||
|
||||
global.Y2KAlerts = {
|
||||
y2kAlert: global.y2kAlert,
|
||||
Y2K: global.Y2K,
|
||||
quick: function (title, type, message, options) {
|
||||
return global.y2kAlert.quick(title, type, message, options);
|
||||
}
|
||||
};
|
||||
|
||||
})(window);
|
||||
171
js/y2k-alert.js
Normal file
171
js/y2k-alert.js
Normal file
@@ -0,0 +1,171 @@
|
||||
((global) => {
|
||||
|
||||
var Y2K = global.Y2K;
|
||||
var createElement = global.Y2KDom.createElement;
|
||||
var appendChildren = global.Y2KDom.appendChildren;
|
||||
|
||||
class y2kAlert extends EventTarget {
|
||||
constructor(title, type, message, options) {
|
||||
super();
|
||||
this.title = title || "Alert";
|
||||
this.type = type || Y2K.TYPE_INFO;
|
||||
this.message = message || "";
|
||||
this.options = options || {};
|
||||
this.isVisible = false;
|
||||
this.inputElement = null;
|
||||
this.overlayElement = null;
|
||||
this.dialogElement = null;
|
||||
this.submitButton = null;
|
||||
this.closeButton = null;
|
||||
|
||||
this._build();
|
||||
this._bindEvents();
|
||||
}
|
||||
|
||||
_build() {
|
||||
this.overlayElement = createElement("div", {
|
||||
class: "y2k-alert-overlay"
|
||||
});
|
||||
|
||||
this.dialogElement = createElement("section", {
|
||||
class: "y2k-alert y2k-alert--" + this.type,
|
||||
role: "dialog",
|
||||
"aria-modal": "true",
|
||||
"aria-label": this.title
|
||||
});
|
||||
|
||||
var titleBar = createElement("header", {
|
||||
class: "y2k-alert__titlebar"
|
||||
});
|
||||
|
||||
var titleElement = createElement("h2", {
|
||||
class: "y2k-alert__title"
|
||||
}, this.title);
|
||||
|
||||
this.closeButton = createElement("button", {
|
||||
class: "y2k-btn y2k-btn--close",
|
||||
type: "button",
|
||||
"aria-label": "Close alert"
|
||||
}, "x");
|
||||
|
||||
appendChildren(titleBar, [titleElement, this.closeButton]);
|
||||
|
||||
var content = createElement("div", {
|
||||
class: "y2k-alert__content"
|
||||
});
|
||||
|
||||
var textElement = createElement("p", {
|
||||
class: "y2k-alert__text"
|
||||
}, this.message);
|
||||
|
||||
content.appendChild(textElement);
|
||||
|
||||
if (this.options.input) {
|
||||
var inputConfig = typeof this.options.input === "object" ? this.options.input : {};
|
||||
this.inputElement = createElement("input", {
|
||||
class: "y2k-alert__input",
|
||||
type: inputConfig.type || "text",
|
||||
placeholder: inputConfig.placeholder || ""
|
||||
});
|
||||
|
||||
if (inputConfig.value) {
|
||||
this.inputElement.setAttribute("value", inputConfig.value);
|
||||
}
|
||||
|
||||
content.appendChild(this.inputElement);
|
||||
}
|
||||
|
||||
var actions = createElement("footer", {
|
||||
class: "y2k-alert__actions"
|
||||
});
|
||||
|
||||
this.submitButton = createElement("button", {
|
||||
class: "y2k-btn",
|
||||
type: "button"
|
||||
}, this.options.submitText || "OK");
|
||||
|
||||
actions.appendChild(this.submitButton);
|
||||
appendChildren(content, [actions]);
|
||||
appendChildren(this.dialogElement, [titleBar, content]);
|
||||
this.overlayElement.appendChild(this.dialogElement);
|
||||
}
|
||||
|
||||
_bindEvents() {
|
||||
var self = this;
|
||||
|
||||
this.closeButton.addEventListener("click", function () {
|
||||
self.close("close-button");
|
||||
});
|
||||
|
||||
this.submitButton.addEventListener("click", function () {
|
||||
self.submit();
|
||||
});
|
||||
|
||||
if (this.inputElement) {
|
||||
this.inputElement.addEventListener("keydown", function (event) {
|
||||
if (event.key === "Enter") {
|
||||
self.submit();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
show(parent) {
|
||||
var mountPoint = parent || document.body;
|
||||
if (!this.isVisible) {
|
||||
mountPoint.appendChild(this.overlayElement);
|
||||
this.isVisible = true;
|
||||
}
|
||||
|
||||
if (this.inputElement) {
|
||||
this.inputElement.focus();
|
||||
} else {
|
||||
this.submitButton.focus();
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
hide() {
|
||||
if (this.isVisible && this.overlayElement.parentNode) {
|
||||
this.overlayElement.parentNode.removeChild(this.overlayElement);
|
||||
}
|
||||
|
||||
this.isVisible = false;
|
||||
return this;
|
||||
}
|
||||
|
||||
close(reason) {
|
||||
this.hide();
|
||||
this.dispatchEvent(new CustomEvent("close", {
|
||||
detail: {
|
||||
reason: reason || "close"
|
||||
}
|
||||
}));
|
||||
return this;
|
||||
}
|
||||
|
||||
submit() {
|
||||
var value = this.inputElement ? this.inputElement.value : null;
|
||||
this.dispatchEvent(new CustomEvent("submit", {
|
||||
detail: {
|
||||
value: value,
|
||||
title: this.title,
|
||||
message: this.message,
|
||||
type: this.type
|
||||
}
|
||||
}));
|
||||
this.hide();
|
||||
return this;
|
||||
}
|
||||
|
||||
static quick(title, type, message, options) {
|
||||
var alertInstance = new y2kAlert(title, type, message, options);
|
||||
alertInstance.show();
|
||||
return alertInstance;
|
||||
}
|
||||
}
|
||||
|
||||
global.y2kAlert = y2kAlert;
|
||||
|
||||
})(window);
|
||||
@@ -22,8 +22,10 @@
|
||||
"license": "Apache-2.0",
|
||||
"author": "Daniel Legt",
|
||||
"type": "commonjs",
|
||||
"main": "index.js",
|
||||
"main": "dist/y2k-alerts.js",
|
||||
"style": "dist/y2k-alerts.css",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
"build": "node scripts/build.js",
|
||||
"test": "npm run build"
|
||||
}
|
||||
}
|
||||
|
||||
93
scripts/build.js
Normal file
93
scripts/build.js
Normal file
@@ -0,0 +1,93 @@
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
|
||||
const ROOT_DIR = path.resolve(__dirname, "..");
|
||||
const DIST_DIR = path.join(ROOT_DIR, "dist");
|
||||
const BASE_CSS_DIR = path.join(ROOT_DIR, "css", "base");
|
||||
const THEMES_DIR = path.join(ROOT_DIR, "css", "themes");
|
||||
const JS_DIR = path.join(ROOT_DIR, "js");
|
||||
|
||||
const BASE_CSS_FILES = ["base.css", "alert.css", "buttons.css"];
|
||||
const JS_FILES = ["constants.js", "dom.js", "y2k-alert.js", "index.js"];
|
||||
|
||||
function ensureDir(dirPath) {
|
||||
fs.mkdirSync(dirPath, { recursive: true });
|
||||
}
|
||||
|
||||
function readFiles(folder, files) {
|
||||
return files
|
||||
.map((file) => fs.readFileSync(path.join(folder, file), "utf8"))
|
||||
.join("\n\n");
|
||||
}
|
||||
|
||||
function minifyCss(css) {
|
||||
return css
|
||||
.replace(/\/\*[\s\S]*?\*\//g, "")
|
||||
.replace(/\s+/g, " ")
|
||||
.replace(/\s*([{}:;,])\s*/g, "$1")
|
||||
.replace(/;}/g, "}")
|
||||
.trim();
|
||||
}
|
||||
|
||||
function minifyJs(js) {
|
||||
return js
|
||||
.replace(/\/\*[\s\S]*?\*\//g, "")
|
||||
.replace(/^\s*\/\/.*$/gm, "")
|
||||
.replace(/\s+/g, " ")
|
||||
.trim();
|
||||
}
|
||||
|
||||
function buildCss() {
|
||||
const baseCss = readFiles(BASE_CSS_DIR, BASE_CSS_FILES);
|
||||
const themeFolders = fs
|
||||
.readdirSync(THEMES_DIR, { withFileTypes: true })
|
||||
.filter((entry) => entry.isDirectory())
|
||||
.map((entry) => entry.name)
|
||||
.sort();
|
||||
|
||||
themeFolders.forEach((themeName) => {
|
||||
const themePath = path.join(THEMES_DIR, themeName);
|
||||
const themeFiles = fs
|
||||
.readdirSync(themePath)
|
||||
.filter((file) => file.endsWith(".css"))
|
||||
.sort();
|
||||
|
||||
const themeCss = readFiles(themePath, themeFiles);
|
||||
const output = `${baseCss}\n\n${themeCss}`;
|
||||
|
||||
const distFile = path.join(DIST_DIR, `y2k-alerts-${themeName}.css`);
|
||||
const distMinFile = path.join(DIST_DIR, `y2k-alerts-${themeName}.min.css`);
|
||||
|
||||
fs.writeFileSync(distFile, output, "utf8");
|
||||
fs.writeFileSync(distMinFile, minifyCss(output), "utf8");
|
||||
});
|
||||
|
||||
const genericFile = path.join(DIST_DIR, "y2k-alerts-generic.css");
|
||||
const genericMinFile = path.join(DIST_DIR, "y2k-alerts-generic.min.css");
|
||||
|
||||
if (fs.existsSync(genericFile)) {
|
||||
fs.copyFileSync(genericFile, path.join(DIST_DIR, "y2k-alerts.css"));
|
||||
}
|
||||
|
||||
if (fs.existsSync(genericMinFile)) {
|
||||
fs.copyFileSync(genericMinFile, path.join(DIST_DIR, "y2k-alerts.min.css"));
|
||||
}
|
||||
}
|
||||
|
||||
function buildJs() {
|
||||
const jsBundle = readFiles(JS_DIR, JS_FILES);
|
||||
const distFile = path.join(DIST_DIR, "y2k-alerts.js");
|
||||
const distMinFile = path.join(DIST_DIR, "y2k-alerts.min.js");
|
||||
|
||||
fs.writeFileSync(distFile, jsBundle, "utf8");
|
||||
fs.writeFileSync(distMinFile, minifyJs(jsBundle), "utf8");
|
||||
}
|
||||
|
||||
function build() {
|
||||
ensureDir(DIST_DIR);
|
||||
buildCss();
|
||||
buildJs();
|
||||
console.log("Built y2k-alerts assets in dist/");
|
||||
}
|
||||
|
||||
build();
|
||||
Reference in New Issue
Block a user