hrenpack-theme-style 1.0.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +131 -0
- package/dark-theme.d.ts +11 -0
- package/dark-theme.d.ts.map +1 -0
- package/dark-theme.js +29 -0
- package/dark-theme.js.map +1 -0
- package/form.d.ts +2 -0
- package/form.d.ts.map +1 -0
- package/form.js +7 -0
- package/form.js.map +1 -0
- package/input-reversed.d.ts +8 -0
- package/input-reversed.d.ts.map +1 -0
- package/input-reversed.js +32 -0
- package/input-reversed.js.map +1 -0
- package/package.json +4 -7
- package/script.d.ts +7 -0
- package/script.d.ts.map +1 -0
- package/script.js +56 -0
- package/script.js.map +1 -0
package/README.md
ADDED
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
# hrenpack-theme-style
|
|
2
|
+
## Описание
|
|
3
|
+
`hrenpack-theme-style` — это пакет для быстрой настройки тематического оформления веб-сайтов с поддержкой светлой и тёмной темы. Он предоставляет готовые CSS-стили, компоненты для переключения тем и интеграцию с системными настройками пользователя.
|
|
4
|
+
|
|
5
|
+
Пакет идеально подходит для проектов, где требуется гибкое управление цветовыми схемами с минимальными усилиями.
|
|
6
|
+
|
|
7
|
+
## Установка
|
|
8
|
+
|
|
9
|
+
```shell
|
|
10
|
+
npm install hrenpack-theme-style
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Использование
|
|
14
|
+
### Подключение стилей
|
|
15
|
+
Добавьте следующие стили в ваш HTML-файл:
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<!-- Обязательно именно этот id! -->
|
|
19
|
+
<link id="hrenpack-theme-stylesheet" rel="stylesheet" href="node_modules/hrenpack-theme-style/style.css">
|
|
20
|
+
<!-- Или, если не хотите устанавливать пакет -->
|
|
21
|
+
<link id="hrenpack-theme-stylesheet" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hrenpack-theme-style/style.css">
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### Подключение скриптов
|
|
25
|
+
```html
|
|
26
|
+
<!-- Подключите основной скрипт темы -->
|
|
27
|
+
<script type="module" src="node_modules/hrenpack-theme-style/script.js"></script>
|
|
28
|
+
|
|
29
|
+
<!-- Для работы темной темы -->
|
|
30
|
+
<script type="module" src="node_modules/hrenpack-theme-style/dark-theme.js"></script>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Добавление кнопки переключения темы
|
|
34
|
+
Добавьте в HTML-разметку кнопку для переключения между темами:
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<div id="hrenpack-change-theme-div"> <!-- div с таким id не обязателен -->
|
|
38
|
+
<button id="hrenpack-toggle-theme" class="btn-hren">Переключить тему</button>
|
|
39
|
+
</div>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
Кнопка будет автоматически обработана скриптом `dark-theme.js`.
|
|
43
|
+
|
|
44
|
+
## Компоненты
|
|
45
|
+
### Стили
|
|
46
|
+
- `style.css` — базовые стили и CSS-переменные для светлой темы
|
|
47
|
+
|
|
48
|
+
- `style_light.css` — расширение базовых стилей (импортирует `style.css`)
|
|
49
|
+
|
|
50
|
+
- `style_dark.css` — переопределение переменных для тёмной темы
|
|
51
|
+
|
|
52
|
+
### Скрипты
|
|
53
|
+
- `script.js` — основной скрипт пакета
|
|
54
|
+
|
|
55
|
+
- `dark-theme.js` — управление переключением тем, сохранение выбора в `localStorage` и cookies
|
|
56
|
+
|
|
57
|
+
- `input-reversed.js` — утилита для обработки порядка элементов `input` и `label` внутри формы
|
|
58
|
+
|
|
59
|
+
- `form.js` - обработка формы
|
|
60
|
+
|
|
61
|
+
### CSS-переменные
|
|
62
|
+
Пакет использует CSS-переменные для управления цветами. Основные переменные:
|
|
63
|
+
|
|
64
|
+
- `--hrenpack-background` — цвет фона
|
|
65
|
+
|
|
66
|
+
- `--hrenpack-foreground` — цвет текста
|
|
67
|
+
|
|
68
|
+
- `--hrenpack-a-hover-coloк` — цвет ссылок при наведении
|
|
69
|
+
|
|
70
|
+
- `--hrenpack-button-hover-color` — цвет кнопок при наведении
|
|
71
|
+
|
|
72
|
+
- `--hrenpack-fcu-border-color` — цвет границ полей ввода
|
|
73
|
+
|
|
74
|
+
- И многие другие
|
|
75
|
+
|
|
76
|
+
Все переменные переопределяются в `style_dark.css` для тёмной темы.
|
|
77
|
+
|
|
78
|
+
### Классы
|
|
79
|
+
`.btn-hren`
|
|
80
|
+
Стандартная кнопка пакета. Автоматически получает цвета из CSS-переменных.
|
|
81
|
+
|
|
82
|
+
`.btn-hren-ahren`
|
|
83
|
+
Альтернативный стиль кнопки (инвертированные цвета).
|
|
84
|
+
|
|
85
|
+
`.form-control-hrenpack`
|
|
86
|
+
Стилизованное поле ввода.
|
|
87
|
+
|
|
88
|
+
`.form`
|
|
89
|
+
Готовый стиль для форм с градиентным фоном.
|
|
90
|
+
|
|
91
|
+
`.grid-div` и `.grid-panel`
|
|
92
|
+
Сетка для отображения карточек контента.
|
|
93
|
+
|
|
94
|
+
`.singular-panel`, `.panel`
|
|
95
|
+
Панели для выделения контента.
|
|
96
|
+
|
|
97
|
+
## Зависимости
|
|
98
|
+
- `hrenpack_js` (^2.0.5) — базовые утилиты для работы с cookies, темами и DOM
|
|
99
|
+
|
|
100
|
+
## Совместимость
|
|
101
|
+
- Поддерживает современные браузеры (ES2020+)
|
|
102
|
+
|
|
103
|
+
- TypeScript 5.9.3 и выше
|
|
104
|
+
|
|
105
|
+
- Работает в средах с поддержкой модулей ES
|
|
106
|
+
|
|
107
|
+
## Разработка
|
|
108
|
+
Для сборки из исходников:
|
|
109
|
+
|
|
110
|
+
```shell
|
|
111
|
+
git clone https://github.com/MagIlyasDOMA/hrenpack-theme-style.git
|
|
112
|
+
cd hrenpack-theme-style
|
|
113
|
+
npm install
|
|
114
|
+
npx tsc
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
## Лицензия
|
|
118
|
+
#### MIT © MagIlyasDOMA
|
|
119
|
+
|
|
120
|
+
---
|
|
121
|
+
|
|
122
|
+
## Ссылки
|
|
123
|
+
- [GitHub репозиторий](https://github.com/MagIlyasDOMA/hrenpack-theme-style)
|
|
124
|
+
|
|
125
|
+
- [npm пакет](https://www.npmjs.com/package/hrenpack-theme-style)
|
|
126
|
+
|
|
127
|
+
- [Баг-трекер](https://github.com/MagIlyasDOMA/hrenpack-theme-style/issues)
|
|
128
|
+
|
|
129
|
+
---
|
|
130
|
+
|
|
131
|
+
*Примечание: Пакет находится в активной разработке. Пожалуйста, сообщайте об ошибках и предлагайте улучшения через Issues на GitHub.*
|
package/dark-theme.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
declare function getCookie(name: string): string | null;
|
|
2
|
+
declare function setCookie(name: string, value: string, days?: number | null, path?: string): void;
|
|
3
|
+
declare function getScriptSite(script: HTMLScriptElement): string;
|
|
4
|
+
declare function getSystemTheme(): null | string;
|
|
5
|
+
declare const tt_button: HTMLButtonElement;
|
|
6
|
+
declare const stylesheet: HTMLLinkElement;
|
|
7
|
+
declare const cookieTheme: string | null, lsTheme: string | null;
|
|
8
|
+
declare const theme_url_prefix: string;
|
|
9
|
+
declare const theme_light: string, theme_dark: string;
|
|
10
|
+
declare let currentTheme: string;
|
|
11
|
+
//# sourceMappingURL=dark-theme.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dark-theme.d.ts","sourceRoot":"","sources":["dark-theme.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;AACxD,OAAO,UAAU,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;AACnG,OAAO,UAAU,aAAa,CAAC,MAAM,EAAE,iBAAiB,GAAG,MAAM,CAAC;AAClE,OAAO,UAAU,cAAc,IAAI,IAAI,GAAG,MAAM,CAAC;AAEjD,QAAA,MAAM,SAAS,EAAE,iBAAqE,CAAC;AACvF,QAAA,MAAM,UAAU,EAAE,eAAuE,CAAC;AAC1F,QAAA,MAAM,WAAW,eAAuB,EAAE,OAAO,eAAgC,CAAA;AACjF,QAAA,MAAM,gBAAgB,EAAE,MAA8F,CAAA;AACtH,QAAA,MAAM,WAAW,QAAuC,EAAE,UAAU,QAAsC,CAAA;AAC1G,QAAA,IAAI,YAAY,EAAE,MAAM,CAAC"}
|
package/dark-theme.js
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const tt_button = document.querySelector('#hrenpack-toggle-theme');
|
|
3
|
+
const stylesheet = document.querySelector('#hrenpack-theme-stylesheet');
|
|
4
|
+
const cookieTheme = getCookie?.('theme'), lsTheme = localStorage.getItem('theme');
|
|
5
|
+
const theme_url_prefix = getScriptSite(document.currentScript) + '/hrenpack-theme-style/';
|
|
6
|
+
const theme_light = theme_url_prefix + 'style_light.css', theme_dark = theme_url_prefix + 'style_dark.css';
|
|
7
|
+
let currentTheme;
|
|
8
|
+
if (cookieTheme)
|
|
9
|
+
currentTheme = cookieTheme;
|
|
10
|
+
else if (lsTheme)
|
|
11
|
+
currentTheme = lsTheme;
|
|
12
|
+
else
|
|
13
|
+
currentTheme = getSystemTheme() || 'light';
|
|
14
|
+
if (stylesheet) {
|
|
15
|
+
stylesheet.setAttribute('href', currentTheme === 'light' ? theme_light : theme_dark);
|
|
16
|
+
}
|
|
17
|
+
if (tt_button) {
|
|
18
|
+
tt_button.addEventListener('click', () => {
|
|
19
|
+
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
|
20
|
+
localStorage.setItem('theme', newTheme);
|
|
21
|
+
if (stylesheet) {
|
|
22
|
+
stylesheet.setAttribute('href', newTheme === 'light' ? theme_light : theme_dark);
|
|
23
|
+
}
|
|
24
|
+
currentTheme = newTheme;
|
|
25
|
+
btn_hren_update();
|
|
26
|
+
setCookie?.('theme', newTheme);
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
//# sourceMappingURL=dark-theme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dark-theme.js","sourceRoot":"","sources":["dark-theme.ts"],"names":[],"mappings":";AAKA,MAAM,SAAS,GAAsB,QAAQ,CAAC,aAAa,CAAC,wBAAwB,CAAE,CAAC;AACvF,MAAM,UAAU,GAAoB,QAAQ,CAAC,aAAa,CAAC,4BAA4B,CAAE,CAAC;AAC1F,MAAM,WAAW,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;AACjF,MAAM,gBAAgB,GAAW,aAAa,CAAC,QAAQ,CAAC,aAAkC,CAAC,GAAG,wBAAwB,CAAA;AACtH,MAAM,WAAW,GAAG,gBAAgB,GAAG,iBAAiB,EAAE,UAAU,GAAG,gBAAgB,GAAG,gBAAgB,CAAA;AAC1G,IAAI,YAAoB,CAAC;AAEzB,IAAI,WAAW;IACX,YAAY,GAAG,WAAW,CAAC;KAC1B,IAAI,OAAO;IACZ,YAAY,GAAG,OAAO,CAAC;;IAEvB,YAAY,GAAG,cAAc,EAAE,IAAI,OAAO,CAAC;AAE/C,IAAI,UAAU,EAAE,CAAC;IACb,UAAU,CAAC,YAAY,CAAC,MAAM,EAAE,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;AACzF,CAAC;AAED,IAAI,SAAS,EAAE,CAAC;IACZ,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QACrC,MAAM,QAAQ,GAAG,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAC7D,YAAY,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QACxC,IAAI,UAAU,EAAE,CAAC;YACb,UAAU,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;QACrF,CAAC;QACD,YAAY,GAAG,QAAQ,CAAC;QACxB,eAAe,EAAE,CAAC;QAClB,SAAS,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;AACP,CAAC"}
|
package/form.d.ts
ADDED
package/form.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["form.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,yBAAyB,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC"}
|
package/form.js
ADDED
package/form.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form.js","sourceRoot":"","sources":["form.ts"],"names":[],"mappings":";AAEA,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAC/C,MAAM,IAAI,GAA2B,QAAQ,CAAC,aAAa,CACvD,QAAQ,CAAC,aAAc,CAAC,OAAO,CAAC,YAAY,IAAI,OAAO,CAAC,CAAA;IAC5D,IAAI,IAAI;QACJ,yBAAyB,CAAC,IAAI,CAAC,CAAA;AACvC,CAAC,CAAC,CAAA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
interface IsInputFirstOutput {
|
|
2
|
+
input: Node;
|
|
3
|
+
label: Node;
|
|
4
|
+
isFirst: boolean;
|
|
5
|
+
}
|
|
6
|
+
declare function isInputFirst(paragraph: HTMLParagraphElement): IsInputFirstOutput;
|
|
7
|
+
declare function formInputReversed(form: HTMLFormElement): void;
|
|
8
|
+
//# sourceMappingURL=input-reversed.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input-reversed.d.ts","sourceRoot":"","sources":["input-reversed.ts"],"names":[],"mappings":"AAAA,UAAU,kBAAkB;IACxB,KAAK,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;CACpB;AAED,iBAAS,YAAY,CAAC,SAAS,EAAE,oBAAoB,GAAG,kBAAkB,CAmBzE;AAED,iBAAS,iBAAiB,CAAC,IAAI,EAAE,eAAe,QAW/C"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
function isInputFirst(paragraph) {
|
|
3
|
+
const input = paragraph.querySelector('input');
|
|
4
|
+
const label = paragraph.querySelector('label');
|
|
5
|
+
const output = { input: input, label: label, isFirst: false };
|
|
6
|
+
if (input && label) {
|
|
7
|
+
const elements = paragraph.children;
|
|
8
|
+
let inputIndex = -1;
|
|
9
|
+
let labelIndex = -1;
|
|
10
|
+
for (let i = 0; i < elements.length; i++) {
|
|
11
|
+
if (elements[i] === input)
|
|
12
|
+
inputIndex = i;
|
|
13
|
+
if (elements[i] === label)
|
|
14
|
+
labelIndex = i;
|
|
15
|
+
}
|
|
16
|
+
output.isFirst = inputIndex !== -1 && labelIndex !== -1 && inputIndex < labelIndex;
|
|
17
|
+
}
|
|
18
|
+
return output;
|
|
19
|
+
}
|
|
20
|
+
function formInputReversed(form) {
|
|
21
|
+
form.querySelectorAll('p').forEach(paragraph => {
|
|
22
|
+
const { input, label, isFirst } = isInputFirst(paragraph);
|
|
23
|
+
if (isFirst) {
|
|
24
|
+
const wrapper = document.createElement('wrapper');
|
|
25
|
+
wrapper.appendChild(input);
|
|
26
|
+
wrapper.appendChild(label);
|
|
27
|
+
paragraph.appendChild(wrapper);
|
|
28
|
+
paragraph.classList.add('input-reversed');
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
//# sourceMappingURL=input-reversed.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input-reversed.js","sourceRoot":"","sources":["input-reversed.ts"],"names":[],"mappings":";AAMA,SAAS,YAAY,CAAC,SAA+B;IACjD,MAAM,KAAK,GAAG,SAAS,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/C,MAAM,KAAK,GAAG,SAAS,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAG,EAAC,KAAK,EAAE,KAAa,EAAE,KAAK,EAAE,KAAa,EAAE,OAAO,EAAE,KAAK,EAAC,CAAA;IAG3E,IAAI,KAAK,IAAI,KAAK,EAAE,CAAC;QACjB,MAAM,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC;QACpC,IAAI,UAAU,GAAG,CAAC,CAAC,CAAC;QACpB,IAAI,UAAU,GAAG,CAAC,CAAC,CAAC;QAEpB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACvC,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,KAAK;gBAAE,UAAU,GAAG,CAAC,CAAC;YAC1C,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,KAAK;gBAAE,UAAU,GAAG,CAAC,CAAC;QAC9C,CAAC;QAED,MAAM,CAAC,OAAO,GAAG,UAAU,KAAK,CAAC,CAAC,IAAI,UAAU,KAAK,CAAC,CAAC,IAAI,UAAU,GAAG,UAAU,CAAA;IACtF,CAAC;IACD,OAAO,MAAM,CAAA;AACjB,CAAC;AAED,SAAS,iBAAiB,CAAC,IAAqB;IAC5C,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;QAC3C,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;QACxD,IAAI,OAAO,EAAE,CAAC;YACV,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;YAClD,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;YAC1B,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;YAC1B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;YAC9B,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;QAC7C,CAAC;IACL,CAAC,CAAC,CAAA;AACN,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hrenpack-theme-style",
|
|
3
|
-
"version": "
|
|
4
|
-
"main": "index.js",
|
|
3
|
+
"version": "3.0.0",
|
|
5
4
|
"repository": {
|
|
6
5
|
"type": "git",
|
|
7
6
|
"url": "git+https://github.com/MagIlyasDOMA/hrenpack-theme-style.git"
|
|
@@ -10,7 +9,7 @@
|
|
|
10
9
|
"hrenpack",
|
|
11
10
|
"frontend",
|
|
12
11
|
"css",
|
|
13
|
-
|
|
12
|
+
"bootstrap",
|
|
14
13
|
"dark-theme"
|
|
15
14
|
],
|
|
16
15
|
"author": "MagIlyasDOMA",
|
|
@@ -20,10 +19,8 @@
|
|
|
20
19
|
},
|
|
21
20
|
"homepage": "https://github.com/MagIlyasDOMA/hrenpack-theme-style#readme",
|
|
22
21
|
"description": "",
|
|
23
|
-
"dependencies": {
|
|
24
|
-
"hrenpack_js": "^1.0.1"
|
|
25
|
-
},
|
|
26
22
|
"devDependencies": {
|
|
27
|
-
|
|
23
|
+
"typescript": "^5.9.3",
|
|
24
|
+
"hrenpack_js": "^2.0.5"
|
|
28
25
|
}
|
|
29
26
|
}
|
package/script.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
declare const stylesRoot: CSSStyleDeclaration;
|
|
2
|
+
type ButtonArray = NodeListOf<HTMLButtonElement>;
|
|
3
|
+
declare function getButtonColor(button: HTMLButtonElement, isHoverOrActive?: boolean): string;
|
|
4
|
+
declare function getButtonTextColor(button: HTMLButtonElement): string;
|
|
5
|
+
declare function btn_hren_press(): void;
|
|
6
|
+
declare function btn_hren_update(): void;
|
|
7
|
+
//# sourceMappingURL=script.d.ts.map
|
package/script.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"script.d.ts","sourceRoot":"","sources":["script.ts"],"names":[],"mappings":"AAAA,OAAO,CAAC,MAAM,UAAU,EAAE,mBAAmB,CAAC;AAE9C,KAAK,WAAW,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;AAEhD,iBAAS,cAAc,CAAC,MAAM,EAAE,iBAAiB,EAAE,eAAe,GAAE,OAAe,UAUlF;AAED,iBAAS,kBAAkB,CAAC,MAAM,EAAE,iBAAiB,UAIpD;AAED,iBAAS,cAAc,SAgCtB;AAED,iBAAS,eAAe,SAMvB"}
|
package/script.js
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
function getButtonColor(button, isHoverOrActive = false) {
|
|
3
|
+
if (button.classList.contains('btn-hren-ahren')) {
|
|
4
|
+
return isHoverOrActive
|
|
5
|
+
? stylesRoot.getPropertyValue('--hrenpack-button-hover-color')
|
|
6
|
+
: stylesRoot.getPropertyValue('--hrenpack-background');
|
|
7
|
+
}
|
|
8
|
+
else {
|
|
9
|
+
return isHoverOrActive
|
|
10
|
+
? stylesRoot.getPropertyValue('--hrenpack-button-hover-color')
|
|
11
|
+
: stylesRoot.getPropertyValue('--hrenpack-foreground');
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
function getButtonTextColor(button) {
|
|
15
|
+
return button.classList.contains('btn-hren-ahren')
|
|
16
|
+
? stylesRoot.getPropertyValue('--hrenpack-foreground')
|
|
17
|
+
: stylesRoot.getPropertyValue('--hrenpack-background');
|
|
18
|
+
}
|
|
19
|
+
function btn_hren_press() {
|
|
20
|
+
const buttons = document.querySelectorAll('.btn-hren');
|
|
21
|
+
buttons.forEach(button => {
|
|
22
|
+
button.style.backgroundColor = getButtonColor(button);
|
|
23
|
+
button.style.color = getButtonTextColor(button);
|
|
24
|
+
button.addEventListener('mousedown', function () {
|
|
25
|
+
button.style.backgroundColor = stylesRoot.getPropertyValue('--hrenpack-button-pressed-color');
|
|
26
|
+
button.style.color = getButtonTextColor(button);
|
|
27
|
+
});
|
|
28
|
+
button.addEventListener('mouseover', function () {
|
|
29
|
+
button.style.backgroundColor = getButtonColor(button, true);
|
|
30
|
+
button.style.color = getButtonTextColor(button);
|
|
31
|
+
});
|
|
32
|
+
button.addEventListener('mouseout', function () {
|
|
33
|
+
button.style.backgroundColor = getButtonColor(button);
|
|
34
|
+
button.style.color = getButtonTextColor(button);
|
|
35
|
+
});
|
|
36
|
+
button.addEventListener('mouseup', function () {
|
|
37
|
+
button.style.backgroundColor = getButtonColor(button, true);
|
|
38
|
+
button.style.color = getButtonTextColor(button);
|
|
39
|
+
});
|
|
40
|
+
button.addEventListener('mouseleave', function () {
|
|
41
|
+
button.style.backgroundColor = getButtonColor(button);
|
|
42
|
+
button.style.color = getButtonTextColor(button);
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
function btn_hren_update() {
|
|
47
|
+
const buttons = document.querySelectorAll('.btn-hren');
|
|
48
|
+
buttons.forEach(button => {
|
|
49
|
+
button.style.backgroundColor = getButtonColor(button);
|
|
50
|
+
button.style.color = getButtonTextColor(button);
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
window.onload = function () {
|
|
54
|
+
btn_hren_press();
|
|
55
|
+
};
|
|
56
|
+
//# sourceMappingURL=script.js.map
|
package/script.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"script.js","sourceRoot":"","sources":["script.ts"],"names":[],"mappings":";AAIA,SAAS,cAAc,CAAC,MAAyB,EAAE,kBAA2B,KAAK;IAC/E,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC;QAC9C,OAAO,eAAe;YAClB,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,+BAA+B,CAAC;YAC9D,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;IAC/D,CAAC;SAAM,CAAC;QACJ,OAAO,eAAe;YAClB,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,+BAA+B,CAAC;YAC9D,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;IAC/D,CAAC;AACL,CAAC;AAED,SAAS,kBAAkB,CAAC,MAAyB;IACjD,OAAO,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,CAAC;QAC9C,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,uBAAuB,CAAC;QACtD,CAAC,CAAC,UAAU,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;AAC/D,CAAC;AAED,SAAS,cAAc;IACnB,MAAM,OAAO,GAAgB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACpE,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;QAErB,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;QACtD,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC;QAEhD,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE;YACjC,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,UAAU,CAAC,gBAAgB,CAAC,iCAAiC,CAAC,CAAC;YAC9F,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC;QACpD,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE;YACjC,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,cAAc,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;YAC5D,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC;QACpD,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,gBAAgB,CAAC,UAAU,EAAE;YAChC,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;YACtD,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC;QACpD,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE;YAC/B,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,cAAc,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;YAC5D,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC;QACpD,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE;YAClC,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;YACtD,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC;QACpD,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC;AAED,SAAS,eAAe;IACpB,MAAM,OAAO,GAAgB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAA;IACnE,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;QACrB,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;QACtD,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC;IACpD,CAAC,CAAC,CAAA;AACN,CAAC;AAED,MAAM,CAAC,MAAM,GAAG;IACZ,cAAc,EAAE,CAAA;AACpB,CAAC,CAAA"}
|