Skip to content

Commit 7807997

Browse files
smir-antsmir-ant
committed
pgSQL module + horizontal scroll + firefox bug fix
1 parent dff36c7 commit 7807997

File tree

9 files changed

+147
-32
lines changed

9 files changed

+147
-32
lines changed

‎README.md‎

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<details>
99
<summary>
10-
<picture><img src="https://img.shields.io/badge/общий вес-7.7kB-blue.svg"></picture>
10+
<picture><img src="https://img.shields.io/badge/общий вес-7.5kB-blue.svg"></picture>
1111
</summary>
1212
<!-- Разграничитель -->
1313
<picture>
@@ -45,21 +45,47 @@
4545
- Поддержка <kbd>Tab</kbd> и <kbd>Shift+Tab</kbd>
4646
- Поддержка undo/redo. <sub>Хоть и за счёт использования execCommand, который считается deprecated. Однако аналогов пока нет (<a href="https://github.com/fregante/indent-textarea/issues/30">подробнее</a>). А свою микросистему с памятью через самодельный стек сомнительно внедрять...</sub>
4747
- Поддержка resize <sub>(убери resize:none из css)</sub>
48-
- Богатая система типов:
48+
- Богатая система классификации:
4949

5050
| Класс | Что это | Пример(sql) |
5151
|------------------|---------------------|-------------|
5252
| `.comment` | Комментарии | --abc |
5353
| `.string` | Строки | "abc" |
5454
| `.keyword` | Ключевые слова | SELECT |
55-
| `.variable` | Переменные | @age |
56-
| `.punctuation` | Пунктуация | () |
55+
| `.punctuation` | Пунктуация | ; |
5756
| `.number` | Числа | 123 |
5857
| `.operator` | Оператор | BETWEEN |
5958
| `.boolean` | Булевое значение | FALSE |
6059
| `.function` | Функции | COUNT( |
60+
61+
❗️ Но есть и множество других классов, например
62+
63+
```css
64+
.url, .property, .selector, .rule {/* в css, например */}
65+
66+
.class-name, .regex {/* js. у regex кста есть и вложенные классы :) */}
67+
68+
.attr-value, .attr-name {/* svg */}
69+
```
70+
71+
> [!IMPORTANT]
72+
> js подключается как clike+js
73+
> ```html
74+
><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/components/prism-clike.min.js"></script>
75+
><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/components/prism-javascript.min.js"></script>
76+
> ```
77+
>
78+
> об этом можно легко понять глянув на первые символы `prism-javascript.min.js`:
79+
> ```text
80+
> Prism.languages.javascript=Prism.languages.extend("clike"...)
81+
> ```
82+
83+
---
84+
85+
так как sql модуль prism это не про postgresql, то создал свой модуль `pgSQL.js` с регулярками через chatgpt, ошибки вроде выправил, но не факт что всё 100% идеально.
86+
6187
---
6288
6389
###### js uglified via https://www.uglifyjs.net/
6490
65-
###### css minified via https://www.uglifycss.com/
91+
###### css minified via https://www.uglifycss.com/

‎img/size.png‎

1.73 KB
Loading

‎index.html‎

Lines changed: 56 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,67 @@
1-
<html>
2-
<head>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
34
<meta charset="UTF-8">
45
<meta viewport="width=device-width, initial-scale=1.0">
56
<link rel="stylesheet" href="style.min.css">
67
</head>
78
<body>
89
<div id="container" class="container">
9-
<textarea id="textarea" class="code" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false">SELECT * FROM tablename
10-
WHERE id > 5;</textarea>
10+
<textarea id="codeInput" class="code" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false">DO $$
11+
/* Объявление переменной для хранения минимальной зарплаты */
12+
DECLARE
13+
min_salary INT := 50000;
14+
BEGIN
15+
-- Выбираем сотрудников с зарплатой выше минимальной
16+
PERFORM
17+
SELECT
18+
e.employee_id, -- ID сотрудника
19+
e.first_name || ' ' || e.last_name AS full_name, -- Полное имя (в PostgreSQL используется || для конкатенации)
20+
e.salary, -- Зарплата сотрудника
21+
UPPER(d.department_name) AS department_name, -- Название отдела в верхнем регистре
22+
LENGTH(e.email) AS email_length, -- Длина email
23+
24+
/* Булево значение: проверка, работает ли сотрудник в IT */
25+
CASE
26+
WHEN d.department_name LIKE 'IT%' THEN TRUE -- LIKE для проверки на принадлежность отделу IT (начинается с IT)
27+
ELSE FALSE -- false
28+
END AS is_it_department, -- Проверка на отдел IT
29+
30+
/* CASE для определения, больше ли зарплата среднего значения по отделу */
31+
CASE
32+
WHEN e.salary > (SELECT AVG(e2.salary) FROM employees e2 WHERE e2.department_id = e.department_id)
33+
THEN 'Above average' -- Если зарплата больше средней по отделу
34+
ELSE 'Below average' -- Если зарплата меньше или равна средней
35+
END AS salary_comparison, -- Сравнение зарплаты с средней по отделу
36+
37+
/* Проверка, входит ли сотрудник в конкретные отделы */
38+
CASE
39+
WHEN e.department_id IN (1, 2, 3) THEN 'Key Departments' -- Если отдел входит в указанный список
40+
ELSE 'Other Departments' -- Иначе это другой отдел
41+
END AS department_type,
42+
43+
/* Проверка зарплаты через BETWEEN */
44+
CASE
45+
WHEN e.salary BETWEEN 60000 AND 100000 THEN 'Mid Range Salary' -- Если зарплата в диапазоне
46+
ELSE 'Other Salary Range' -- Иначе другой диапазон
47+
END AS salary_range
48+
49+
FROM
50+
employees e
51+
JOIN
52+
departments d ON e.department_id = d.department_id
53+
WHERE
54+
e.salary IS NOT NULL -- Проверяем, что зарплата не NULL
55+
AND e.salary > min_salary -- Фильтрация по минимальной зарплате
56+
ORDER BY
57+
e.salary DESC; -- Сортировка по убыванию зарплаты
58+
END $$;</textarea>
1159
</div>
1260
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
13-
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/components/prism-sql.min.js"></script>
61+
<!-- sql в prism - это правила T-SQL -->
62+
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/components/prism-sql.min.js"></script> -->
63+
<!-- а меня интересует postgresql (написано при помощи chatgpt, вроде косяки выправил что были, но не уверен что всё на 100% good пока что) -->
64+
<script src="pgSQL.min.js"></script>
1465
<script src="script.min.js"></script>
1566
</body>
1667
</html>

‎pgSQL.js‎

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

‎pgSQL.min.js‎

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

‎script.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1+
/*
2+
подсветка sql кода самодельная
3+
*/
4+
15
document.addEventListener('DOMContentLoaded', () => {
2-
const textarea = document.getElementById('textarea');
6+
const textarea = document.getElementById('codeInput');
37
const container = document.getElementById('container');
48

59
const mirror = document.createElement('pre');
@@ -9,7 +13,7 @@ document.addEventListener('DOMContentLoaded', () => {
913
// Функция копирования стилей
1014
const copyStyles = () => {
1115
const styles = window.getComputedStyle(textarea);
12-
['border', 'fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'padding', 'margin', 'whiteSpace', 'wordWrap']
16+
['border', 'fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'padding', 'borderRadius', 'wordWrap', 'whiteSpace']
1317
.forEach((prop) => mirror.style[prop] = styles[prop]);
1418
mirror.style.borderColor = 'transparent';
1519
};
@@ -122,8 +126,11 @@ document.addEventListener('DOMContentLoaded', () => {
122126

123127
// Подписка на события
124128
textarea.addEventListener('input', syncMirror);
125-
textarea.addEventListener('scroll', () => mirror.scrollTop = textarea.scrollTop);
126-
129+
textarea.addEventListener('scroll', () => {
130+
mirror.scrollTop = textarea.scrollTop; // Синхронизация вертикальной прокрутки
131+
mirror.scrollLeft = textarea.scrollLeft; // Синхронизация горизонтальной прокрутки
132+
syncMirror(); // Обновление подсветки
133+
});
127134

128135

129136
// Инициализация

‎script.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎style.css‎

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,44 @@
44

55
.container {
66
position: relative;
7-
width: fit-content;
7+
width: 600px;
8+
height: 200px;
89
}
910

1011
.code {
1112
resize: none;
12-
width: 500px;
13-
height: 150px;
13+
width: 100%;
14+
height: 100%;
1415

1516
margin: 0;
1617
padding: 15px;
1718
line-height: 1.5rem;
18-
font-size: 1.25rem;
19-
white-space: pre-wrap;
19+
font-size: 1.1rem;
20+
white-space: pre; /* Запрещаем перенос строк */
21+
word-wrap: normal; /* Предотвращаем автоматический перенос слов */
2022

21-
background: transparent;
22-
position: relative;
23+
/* Отключаем эластичную прокрутку (оттягивание после максимальной прокрутки) */
24+
overscroll-behavior: contain;
25+
/* Отключаем плавную прокрутку. хотя вроде не влияет, но пусть будет */
26+
scroll-behavior:auto;
27+
/* на firefox (на macos) прокрутка от краёв никак не синхронизируется и чисто визуально расходится */
28+
/* так что решение №1) color: transparent; caret-color: xxx. Минус: цвет каретки под dark-reader и light/dark темы фиг подгонишь */
29+
/* color: transparent; */
30+
/* caret-color: #ffcc00; */
31+
32+
/* решение №2) говорим firefox что заполнение текст не будет. минусов не будет. */
33+
-webkit-text-fill-color: transparent;
34+
35+
36+
outline: none;
37+
border: 1px solid #80808040;
38+
39+
&:focus {
40+
box-shadow: 0 0 5px #80808080; /* Добавляем тень */
41+
}
2342
}
2443

25-
/* невимая часть, которая всё подсвечивает находясь над textarea */
44+
/* невидимая часть, которая всё подсвечивает находясь над textarea */
2645
.mirror {
2746
position: absolute;
2847
top: 0;
@@ -38,20 +57,22 @@
3857
}
3958

4059
& .string {
41-
color: green;
60+
color: #7ac44d;
4261
}
4362

4463
& .keyword {
45-
color:dodgerblue;
64+
color: #478cd5;
4665
}
4766

4867
& .function {
49-
color:sandybrown;
68+
color: #dd9672;
5069
}
5170

52-
& .variable {}
53-
& .punctuation {}
54-
& .number {}
55-
& .operator {}
56-
& .boolean {}
71+
& .operator {
72+
color:#BC89BD;
73+
}
74+
75+
& .boolean {
76+
color: #e2c85d;
77+
}
5778
}

‎style.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)