diff --git a/docs/components/README.md b/docs/components/README.md
index 89d43bb..d294f2a 100644
--- a/docs/components/README.md
+++ b/docs/components/README.md
@@ -1,5 +1,32 @@
# Components
+## Applets `/components/applet`
+* [`` | applet-battery.js](applet/applet-battery.md)
+* `` | applet-cpu.js
+* [`` | applet-network-down.js](applet/applet-network-down.md)
+* [`` | applet-network-rtt.js](applet/applet-network-rtt.md)
+* `` | applet-network.js
+* `` | applet-ram.js
+* `` | applet-sound.js
+
+## Elements `/components/element`
+* `` | element-link-copy.js
+
+## Taskbar `/components/taskbar`
+* `` | taskbar-app.js
+* `` | taskbar-clock.js
+
+## Widgets `/components/widget`
+* `` | widget-clock.js
+* `` | widget-weather.js
+
+# UI `/components/ui`
+* [`` | ui-progress.js](ui/ui-progress.md)
+* [`` | ui-switch.js](ui/ui-switch.md)
+
+## Other `/components`
+* [`` | popup.js](popup.md)
+
## Naming Convention
@@ -33,29 +60,12 @@ File Name: `applet-network-connection.js`
### UI
-* [`` | popup.js](popup.md)
-- [`` | ui-progress.js](ui-progress.md)
-- [`` | ui-switch.js](ui-switch.md)
-
* [`` | calendar.js](calendar.md)
- [`` | chart-square.js](chart-square.md)
* `` | power.js
-### Applets `/components/applet`
-* [`` | applet-battery.js](applet-battery.md)
+### Other
* `` | clock.js
-* `` | applet-cpu.js
-* `` | date.js
-* [`` | applet-network-down.js](applet-network-down.md)
-* [`` | applet-network-rtt.js](applet-network-rtt.md)
-* `` | applet-ram.js
-* `` | applet-sound.js
-* `` | weather.js
-* `` | applet-network.js
-
-
-
-## Naming
-Ensure that the Markdown documentation file has the identical name to the script.
\ No newline at end of file
+* `` | date.js
\ No newline at end of file
diff --git a/docs/components/applet-battery.md b/docs/components/applet/applet-battery.md
similarity index 78%
rename from docs/components/applet-battery.md
rename to docs/components/applet/applet-battery.md
index 8e0f2dd..bb2507e 100644
--- a/docs/components/applet-battery.md
+++ b/docs/components/applet/applet-battery.md
@@ -5,7 +5,7 @@
### Script
```html
-
+
```
diff --git a/docs/components/applet-network-down.md b/docs/components/applet/applet-network-down.md
similarity index 83%
rename from docs/components/applet-network-down.md
rename to docs/components/applet/applet-network-down.md
index 3fa75c2..315a9da 100644
--- a/docs/components/applet-network-down.md
+++ b/docs/components/applet/applet-network-down.md
@@ -5,7 +5,7 @@ This applet uses the navigation.connection API to get downlink speed and display
### Script
```html
-
+
```
diff --git a/docs/components/applet-network-rtt.md b/docs/components/applet/applet-network-rtt.md
similarity index 84%
rename from docs/components/applet-network-rtt.md
rename to docs/components/applet/applet-network-rtt.md
index b988812..29266b8 100644
--- a/docs/components/applet-network-rtt.md
+++ b/docs/components/applet/applet-network-rtt.md
@@ -5,7 +5,7 @@ This applet uses the navigation.connection API to get the round-trip time and di
### Script
```html
-
+
```
### Body
diff --git a/docs/components/popup.md b/docs/components/popup.md
index 7d85908..51abf17 100644
--- a/docs/components/popup.md
+++ b/docs/components/popup.md
@@ -33,13 +33,12 @@
## CSS Variables
-- `--ok-color`: Color of the OK button
-- `--cancel-color`: Color of the Cancel button
-- `--text-color`: Color of the text
-- `--bg-color`: Background color of the popup
-* `--ok-text-color`: Text color of the OK button
-* `--cancel-text-color`: Text color of the Cancel button
-
+- `--color-ok`: Color of the OK button
+- `--color-cancel`: Color of the Cancel button
+- `--color-background`: Background color of the popup
+* `--color-text`: Color of the text
+* `--color-text--ok`: Text color of the OK button
+* `--color-text--cancel`: Text color of the Cancel button
## Attributes
* `position`: positions the popup in the window center
@@ -49,9 +48,9 @@
```
-# Child Components
-- `desktop-popup_yes_no`
-- `desktop-popup_ok`
-- `desktop-popup_info`
-- `desktop-popup_warning`
-- `desktop-popup_error`
+# Variants
+- `desktop-popup--yes-no`
+- `desktop-popup--ok`
+- `desktop-popup--info`
+- `desktop-popup--warning`
+- `desktop-popup--error`
diff --git a/docs/components/ui-progress.md b/docs/components/ui/ui-progress.md
similarity index 90%
rename from docs/components/ui-progress.md
rename to docs/components/ui/ui-progress.md
index 406b50b..9fcc8ff 100644
--- a/docs/components/ui-progress.md
+++ b/docs/components/ui/ui-progress.md
@@ -7,7 +7,7 @@
### Script
```html
-
+
```
diff --git a/docs/components/ui-switch.md b/docs/components/ui/ui-switch.md
similarity index 54%
rename from docs/components/ui-switch.md
rename to docs/components/ui/ui-switch.md
index 39d6a97..6a0ee90 100644
--- a/docs/components/ui-switch.md
+++ b/docs/components/ui/ui-switch.md
@@ -5,7 +5,7 @@
### Script
```html
-
+
```
@@ -19,12 +19,12 @@
## Properties
### CSS
-- `--on-color`: Color of the switch when checked
-- `--off-color`: Color of the switch when unchecked
-- `--knob-color`: Color of the knob
-* `--disabled-on-color`: Color of the switch when checked and disabled
-* `--disabled-off-color`: Color of the switch when unchecked and disabled
-* `--disabled-knob-color`: Color of the knob when disabled
+- `--color-on`: Color of the switch when checked
+- `--color-off`: Color of the switch when unchecked
+- `--color-knob`: Color of the knob
+* `--color-on--disabled`: Color of the switch when checked and disabled
+* `--color-off--disabled`: Color of the switch when unchecked and disabled
+* `--color-knob--disabled`: Color of the knob when disabled
### Attributes
diff --git a/src/components/applet-battery.js b/src/components/applet/applet-battery.js
similarity index 100%
rename from src/components/applet-battery.js
rename to src/components/applet/applet-battery.js
diff --git a/src/components/applet-cpu.js b/src/components/applet/applet-cpu.js
similarity index 100%
rename from src/components/applet-cpu.js
rename to src/components/applet/applet-cpu.js
diff --git a/src/components/applet-network-down.js b/src/components/applet/applet-network-down.js
similarity index 100%
rename from src/components/applet-network-down.js
rename to src/components/applet/applet-network-down.js
diff --git a/src/components/applet-network-rtt.js b/src/components/applet/applet-network-rtt.js
similarity index 100%
rename from src/components/applet-network-rtt.js
rename to src/components/applet/applet-network-rtt.js
diff --git a/src/components/applet-network.js b/src/components/applet/applet-network.js
similarity index 100%
rename from src/components/applet-network.js
rename to src/components/applet/applet-network.js
diff --git a/src/components/applet-ram.js b/src/components/applet/applet-ram.js
similarity index 100%
rename from src/components/applet-ram.js
rename to src/components/applet/applet-ram.js
diff --git a/src/components/applet-sound.js b/src/components/applet/applet-sound.js
similarity index 100%
rename from src/components/applet-sound.js
rename to src/components/applet/applet-sound.js
diff --git a/src/components/element/element-link-copy.js b/src/components/element/element-link-copy.js
new file mode 100644
index 0000000..8a773d6
--- /dev/null
+++ b/src/components/element/element-link-copy.js
@@ -0,0 +1,128 @@
+class ElementLinkCopy extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: 'open' });
+ this.render();
+ }
+
+ connectedCallback() {
+ this.render();
+ }
+
+ css() {
+ return `
+ :host {
+ /* COLORS */
+ --color-background: #ffffff;
+ --color-border: rgba(0, 0, 0, 0.1);
+ --color-text: #0f0f0f;
+ --color-button: #065fd4;
+ --color-button--error: #ff0000;
+ }
+
+ .bar {
+ padding: 8px 4px;
+ background: var(--color-background);
+ border: 1px solid var(--color-border);
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ input {
+ background-color: transparent;
+ border: none;
+ color: var(--color-text);
+ font-size: 14px;
+ margin-left: 16px;
+ min-width: 0;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+
+ .copy-button {
+ background-color: var(--color-button);
+ border: none;
+ border-radius: 18px;
+ color: #fff;
+ cursor: pointer;
+ font-size: 14px;
+ height: 36px;
+ line-height: 36px;
+ margin: 0;
+ padding: 0 16px;
+ }
+
+ .copy-button--failed {
+ background-color: var(--color-button--error);
+ }
+ `;
+ }
+
+ template() {
+ return `
+
+
+
+
+ `;
+ }
+
+ render() {
+ this.shadowRoot.innerHTML = `
+
+ ${this.template()}
+ `;
+
+ this.shadowRoot.querySelector('.share-url').value = this.url;
+ this.shadowRoot.querySelector('.copy-button').addEventListener('click', () => this.copyToClipboard(this.url));
+ }
+
+ copyToClipboard(url) {
+ const button = this.shadowRoot.querySelector('.copy-button');
+ const input = this.shadowRoot.querySelector('.share-url');
+
+ button.disabeld = true;
+ input.select();
+
+ try {
+ navigator.clipboard.writeText(url);
+ button.textContent = 'Copied!';
+ setTimeout(() => {
+ button.textContent = 'Copy';
+ button.disabeld = false;
+ }, 1000);
+ } catch (error) {
+ console.error('Failed to copy: ', error);
+ button.textContent = 'Failed!';
+ button.classList.add('copy-button--failed');
+ setTimeout(() => {
+ button.textContent = 'Copy';
+ button.classList.remove('copy-button--failed');
+ button.disabeld = false;
+ }, 2000);
+ }
+ }
+
+
+
+ static get observedAttributes() {
+ return ['url'];
+ }
+
+ attributeChangedCallback(name, oldValue, newValue) {
+ this.render();
+ }
+
+ set url(url) {
+ this.setAttribute('url', url);
+ }
+
+ get url() {
+ console.log(this.getAttribute('url'));
+ return this.getAttribute('url') || 'https://example.org';
+ }
+}
+
+customElements.define('element-link-copy', ElementLinkCopy);
\ No newline at end of file
diff --git a/src/components/applet/clock.js b/src/components/old/clock.js
similarity index 100%
rename from src/components/applet/clock.js
rename to src/components/old/clock.js
diff --git a/src/components/applet/date.js b/src/components/old/date.js
similarity index 100%
rename from src/components/applet/date.js
rename to src/components/old/date.js
diff --git a/src/components/popup.js b/src/components/popup.js
index ea8e4b6..9431af9 100644
--- a/src/components/popup.js
+++ b/src/components/popup.js
@@ -18,29 +18,29 @@ class Popup extends HTMLElement {
css() {
return `
:host {
- --ok-color: #166fd1;
- --cancel-color: #878181;
- --text-color: white;
- --bg-color: #484444;
+ --color-ok: #166fd1;
+ --color-cancel: #878181;
+ --color-text: white;
+ --color-background: #484444;
- --ok-text-color: var(--text-color);
- --cancel-text-color: var(--text-color);
+ --color-text--ok: var(--text-color);
+ --color-text--cancel: var(--text-color);
}
@media (prefers-color-scheme: light) {
:host {
- --ok-color: #60a844;
- --cancel-color: #cfcfcf;
- --bg-color: #e9e9e9;
- --text-color: #484848;
- --ok-text-color: var(--bg-color);
+ --color-ok: #60a844;
+ --color-cancel: #cfcfcf;
+ --color-background: #e9e9e9;
+ --color-text: #484848;
+ --color-text--ok: var(--color-background);
border: 1px solid #b0b0b0;
}
}
:host {
- color: var(--text-color);
- background-color: var(--bg-color);
+ color: var(--color-text);
+ background-color: var(--color-background);
padding: 20px;
display: flex;
justify-content: center;
@@ -110,8 +110,8 @@ class Popup extends HTMLElement {
font-size: 16px;
}
- button.ok { background-color: var(--ok-color); color: var(--ok-text-color); }
- button.cancel { background-color: var(--cancel-color); color: var(--cancel-text-color); }
+ button.ok { background-color: var(--color-ok); color: var(--color-text--ok); }
+ button.cancel { background-color: var(--color-cancel); color: var(--color-text--cancel); }
${
@@ -209,7 +209,8 @@ class Popup extends HTMLElement {
customElements.define('desktop-popup', Popup);
-/* POPUP VARIANT */
+
+/* POPUP VARIANTS */
class PopupAskYesNo extends Popup {
constructor() {
@@ -219,7 +220,9 @@ class PopupAskYesNo extends Popup {
this.cancel_text = 'No';
}
}
-customElements.define('desktop-popup_yes_no', PopupAskYesNo);
+customElements.define('desktop-popup--yes-no', PopupAskYesNo);
+
+
class PopupInfo extends Popup {
constructor() {
@@ -227,7 +230,9 @@ class PopupInfo extends Popup {
this.icon = '/assets/popup/info.svg';
}
}
-customElements.define('desktop-popup_info', PopupInfo);
+customElements.define('desktop-popup--info', PopupInfo);
+
+
class PopupWarning extends Popup {
constructor() {
@@ -235,7 +240,9 @@ class PopupWarning extends Popup {
this.icon = '/assets/popup/warning.svg';
}
}
-customElements.define('desktop-popup_warning', PopupWarning);
+customElements.define('desktop-popup--warning', PopupWarning);
+
+
class PopupError extends Popup {
constructor() {
@@ -243,4 +250,4 @@ class PopupError extends Popup {
this.icon = '/assets/popup/error.svg';
}
}
-customElements.define('desktop-popup_error', PopupError);
+customElements.define('desktop-popup--error', PopupError);
diff --git a/src/components/taskbar-app.js b/src/components/taskbar/taskbar-app.js
similarity index 100%
rename from src/components/taskbar-app.js
rename to src/components/taskbar/taskbar-app.js
diff --git a/src/components/taskbar/taskbar-clock.js b/src/components/taskbar/taskbar-clock.js
new file mode 100644
index 0000000..669e795
--- /dev/null
+++ b/src/components/taskbar/taskbar-clock.js
@@ -0,0 +1,86 @@
+class TaskbarClock extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: 'open' });
+ this.render();
+ }
+
+ connectedCallback() {
+ this.render();
+ }
+
+ disconnectedCallback() {
+ clearInterval(this.interval);
+ }
+
+ css() {
+ return `
+ :host {
+ --color-text: white;
+ color: var(--color-text);
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ user-select: none;
+ }
+
+ span {
+ font-weight: normal;
+ }
+ `;
+ }
+
+ template() {
+ return `
+ 12:00
+ 20.01.2021
+ `;
+ }
+
+ render() {
+ this.shadowRoot.innerHTML = `
+
+ ${this.template()}
+ `;
+
+ this.update();
+ this.interval = setInterval(this.update, 1000);
+ }
+
+ update = () => {
+ const showSeconds = false;
+
+ const timeElement = this.shadowRoot.querySelector('.time');
+ const dateElement = this.shadowRoot.querySelector('.date');
+
+ const now = new Date();
+ const hours = now.getHours().toString().padStart(2, '0');
+ const minutes = now.getMinutes().toString().padStart(2, '0');
+ const seconds = now.getSeconds().toString().padStart(2, '0');
+
+ let time;
+ if (showSeconds) {
+ time = `${hours}:${minutes}:${seconds}`;
+ } else {
+ time = `${hours}:${minutes}`;
+ }
+
+ timeElement.innerText = time;
+
+
+ const day = now.getDate().toString().padStart(2, '0');
+ const dayName = now.toLocaleDateString('default', { weekday: 'long' });
+
+ const month = (now.getMonth() + 1).toString().padStart(2, '0'); // Note: Months are zero-based
+ const monthName = now.toLocaleDateString('default', { month: 'long' });
+
+ const year = now.getFullYear();
+ const date = `${day}.${month}.${year}`;
+ dateElement.innerText = date;
+
+ this.title = `${dayName}, ${day}. ${monthName} ${year}`;
+ }
+}
+
+customElements.define('taskbar-clock', TaskbarClock);
\ No newline at end of file
diff --git a/src/components/ui-progress.js b/src/components/ui/ui-progress.js
similarity index 100%
rename from src/components/ui-progress.js
rename to src/components/ui/ui-progress.js
diff --git a/src/components/ui-switch.js b/src/components/ui/ui-switch.js
similarity index 88%
rename from src/components/ui-switch.js
rename to src/components/ui/ui-switch.js
index 3d4c78f..6b7c839 100644
--- a/src/components/ui-switch.js
+++ b/src/components/ui/ui-switch.js
@@ -16,19 +16,19 @@ class UISwitch extends HTMLElement {
css() {
return `
:host {
- --on-color: #2196F3;
- --off-color: #ccc;
- --knob-color: #fff;
+ --color-on: #2196F3;
+ --color-off: #ccc;
+ --color-knob: #fff;
- --disabled-on-color: #2178BD;
- --disabled-off-color: #9e9e9e;
- --disabled-knob-color: #fff;
+ --color-on--disabled: #2178BD;
+ --color-off--disabled: #9e9e9e;
+ --color-knob--disabled: #fff;
}
:host([disabled]) {
- --on-color: var(--disabled-on-color);
- --off-color: var(--disabled-off-color);
- --knob-color: var(--disabled-knob-color);
+ --color-on: var(--color-on--disabled);
+ --color-off: var(--color-off--disabled);
+ --color-knob: var(--color-knob--disabled);
}
.switch {
@@ -51,7 +51,7 @@ class UISwitch extends HTMLElement {
left: 0;
right: 0;
bottom: 0;
- background-color: var(--off-color);
+ background-color: var(--color-off);
transition: .4s;
border-radius: 34px;
}
@@ -66,7 +66,7 @@ class UISwitch extends HTMLElement {
width: 26px;
left: 4px;
bottom: 4px;
- background-color: var(--knob-color);
+ background-color: var(--color-knob);
transition: .4s;
border-radius: 50%;
}
@@ -79,7 +79,7 @@ class UISwitch extends HTMLElement {
}
input:checked + .slider {
- background-color: var(--on-color);
+ background-color: var(--color-on);
}
input:checked + .slider:before {
diff --git a/src/components/widget/widget-clock.js b/src/components/widget/widget-clock.js
new file mode 100644
index 0000000..3327588
--- /dev/null
+++ b/src/components/widget/widget-clock.js
@@ -0,0 +1,73 @@
+class WidgetClock extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: 'open' });
+ this.render();
+ }
+
+ connectedCallback() {
+ this.render();
+ }
+
+ disconnectedCallback() {
+ clearInterval(this.interval);
+ }
+
+ css() {
+ return `
+ :host {
+ --color-text: white;
+ color: var(--color-text);
+ }
+
+ .time {
+ /* font-size: 5rem; */
+ font-size: 80px;
+ margin: 0;
+ }
+ .date {
+ /* font-size: 1.25rem; */
+ font-size: 20px;
+ margin: 0;
+ }
+ `;
+ }
+
+ template() {
+ return `
+ 12:00
+ Wednesday 00 April
+ `;
+ }
+
+ render() {
+ this.shadowRoot.innerHTML = `
+
+ ${this.template()}
+ `;
+
+ this.update();
+ this.interval = setInterval(this.update, 1000);
+ }
+
+ update = () => {
+ const showSeconds = false;
+
+ const timeElement = this.shadowRoot.querySelector('.time');
+ const dateElement = this.shadowRoot.querySelector('.date');
+
+ const now = new Date();
+ const hours = now.getHours().toString().padStart(2, '0');
+ const minutes = now.getMinutes().toString().padStart(2, '0');
+ const timeString = `${hours}:${minutes}`;
+ timeElement.textContent = timeString;
+
+ const day = now.getDate().toString().padStart(2, '0');
+ const dayName = now.toLocaleDateString('default', { weekday: 'long' });
+ const monthName = now.toLocaleDateString('default', { month: 'long' });
+ const dateString = `${dayName} ${day} ${monthName}`;
+ dateElement.textContent = dateString;
+ }
+}
+
+customElements.define('widget-clock', WidgetClock);
\ No newline at end of file
diff --git a/src/components/applet/weather.js b/src/components/widget/widget-weather.js
similarity index 96%
rename from src/components/applet/weather.js
rename to src/components/widget/widget-weather.js
index f1cfe00..ca2bb1e 100644
--- a/src/components/applet/weather.js
+++ b/src/components/widget/widget-weather.js
@@ -1,4 +1,4 @@
-class WeatherApplet extends HTMLElement {
+class WidgetWeather extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
@@ -122,7 +122,4 @@ class WeatherApplet extends HTMLElement {
}
}
-customElements.define('applet-weather', WeatherApplet);
-
-
-
+customElements.define('widget-weather', WidgetWeather);
\ No newline at end of file
diff --git a/src/data/index.html b/src/data/index.html
index 620156a..8a26982 100644
--- a/src/data/index.html
+++ b/src/data/index.html
@@ -18,7 +18,7 @@
-
+
@@ -40,13 +40,13 @@ Storage Usage