pgSQL module + horizontal scroll + firefox bug fix

smir-ant · Sep 30, 2024 · 7807997 · 7807997
1 parent dff36c7
commit 7807997
Show file tree

Hide file tree

Showing 9 changed files with 147 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 
 <details>
 <summary>
-<picture><img src="https://img.shields.io/badge/общий вес-7.7kB-blue.svg"></picture>
+<picture><img src="https://img.shields.io/badge/общий вес-7.5kB-blue.svg"></picture>
 </summary>
 <!-- Разграничитель -->
   <picture>
@@ -45,21 +45,47 @@
 - Поддержка <kbd>Tab</kbd> и <kbd>Shift+Tab</kbd>
 - Поддержка undo/redo. <sub>Хоть и за счёт использования execCommand, который считается deprecated. Однако аналогов пока нет (<a href="https://github.com/fregante/indent-textarea/issues/30">подробнее</a>). А свою микросистему с памятью через самодельный стек сомнительно внедрять...</sub>
 - Поддержка resize <sub>(убери resize:none из css)</sub>
-- Богатая система типов:
+- Богатая система классификации:
 
 | Класс            | Что это             | Пример(sql) |
 |------------------|---------------------|-------------|
 | `.comment`       | Комментарии         | --abc       |
 | `.string`        | Строки              | "abc"       |
 | `.keyword`       | Ключевые слова      | SELECT      |
-| `.variable`      | Переменные          | @age        |
-| `.punctuation`   | Пунктуация          | ()          |
+| `.punctuation`   | Пунктуация          | ;           |
 | `.number`        | Числа               | 123         |
 | `.operator`      | Оператор            | BETWEEN     |
 | `.boolean`       | Булевое значение    | FALSE       |
 | `.function`      | Функции             | COUNT(      |
+
+❗️ Но есть и множество других классов, например 
+
+```css
+.url, .property, .selector, .rule {/* в css, например */}
+
+.class-name, .regex {/* js. у regex кста есть и вложенные классы :) */}
+
+.attr-value, .attr-name {/* svg */}
+```
+
+> [!IMPORTANT]
+> js подключается как clike+js
+> ```html
+><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/components/prism-clike.min.js"></script>
+><script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/components/prism-javascript.min.js"></script>
+> ```
+>
+> об этом можно легко понять глянув на первые символы `prism-javascript.min.js`:
+> ```text
+> Prism.languages.javascript=Prism.languages.extend("clike"...)
+> ```
+
+---
+
+так как sql модуль prism это не про postgresql, то создал свой модуль `pgSQL.js` с регулярками через chatgpt, ошибки вроде выправил, но не факт что всё 100% идеально.
+
 ---
 
 ###### js uglified via https://www.uglifyjs.net/
  
-###### css minified via https://www.uglifycss.com/
+###### css minified via https://www.uglifycss.com/
diff --git a/img/size.png b/img/size.png
diff --git a/index.html b/index.html
@@ -1,16 +1,67 @@
-<html>
-    <head>
+<!DOCTYPE html>
+<html lang="en">
+<head>
         <meta charset="UTF-8">
         <meta viewport="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" href="style.min.css">
     </head>
     <body>
         <div id="container" class="container">
-            <textarea id="textarea" class="code" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false">SELECT * FROM tablename 
-WHERE id > 5;</textarea>
+            <textarea id="codeInput" class="code" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false">DO $$
+/* Объявление переменной для хранения минимальной зарплаты */
+DECLARE 
+    min_salary INT := 50000;
+BEGIN
+    -- Выбираем сотрудников с зарплатой выше минимальной
+    PERFORM
+    SELECT 
+        e.employee_id,  -- ID сотрудника
+        e.first_name || ' ' || e.last_name AS full_name,  -- Полное имя (в PostgreSQL используется || для конкатенации)
+        e.salary,  -- Зарплата сотрудника
+        UPPER(d.department_name) AS department_name,  -- Название отдела в верхнем регистре
+        LENGTH(e.email) AS email_length,  -- Длина email
+
+        /* Булево значение: проверка, работает ли сотрудник в IT */
+        CASE 
+            WHEN d.department_name LIKE 'IT%' THEN TRUE  -- LIKE для проверки на принадлежность отделу IT (начинается с IT)
+            ELSE FALSE  -- false
+        END AS is_it_department,  -- Проверка на отдел IT
+
+        /* CASE для определения, больше ли зарплата среднего значения по отделу */
+        CASE 
+            WHEN e.salary > (SELECT AVG(e2.salary) FROM employees e2 WHERE e2.department_id = e.department_id)
+            THEN 'Above average'  -- Если зарплата больше средней по отделу
+            ELSE 'Below average'  -- Если зарплата меньше или равна средней
+        END AS salary_comparison,  -- Сравнение зарплаты с средней по отделу
+
+        /* Проверка, входит ли сотрудник в конкретные отделы */
+        CASE 
+            WHEN e.department_id IN (1, 2, 3) THEN 'Key Departments'  -- Если отдел входит в указанный список
+            ELSE 'Other Departments'  -- Иначе это другой отдел
+        END AS department_type,
+
+        /* Проверка зарплаты через BETWEEN */
+        CASE 
+            WHEN e.salary BETWEEN 60000 AND 100000 THEN 'Mid Range Salary'  -- Если зарплата в диапазоне
+            ELSE 'Other Salary Range'  -- Иначе другой диапазон
+        END AS salary_range
+
+    FROM 
+        employees e
+    JOIN 
+        departments d ON e.department_id = d.department_id
+    WHERE 
+        e.salary IS NOT NULL  -- Проверяем, что зарплата не NULL
+        AND e.salary > min_salary  -- Фильтрация по минимальной зарплате
+    ORDER BY 
+        e.salary DESC;  -- Сортировка по убыванию зарплаты
+END $$;</textarea>
         </div>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/components/prism-sql.min.js"></script>
+        <!-- sql в prism - это правила T-SQL -->
+        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/components/prism-sql.min.js"></script> -->
+        <!-- а меня интересует postgresql (написано при помощи chatgpt, вроде косяки выправил что были, но не уверен что всё на 100% good пока что) -->
+         <script src="pgSQL.min.js"></script>
         <script src="script.min.js"></script>
     </body>
 </html>
diff --git a/pgSQL.js b/pgSQL.js
diff --git a/pgSQL.min.js b/pgSQL.min.js
diff --git a/script.js b/script.js
@@ -1,5 +1,9 @@
+/* 
+подсветка sql кода самодельная
+*/
+
 document.addEventListener('DOMContentLoaded', () => {
-    const textarea = document.getElementById('textarea');
+    const textarea = document.getElementById('codeInput');
     const container = document.getElementById('container');
 
     const mirror = document.createElement('pre');
@@ -9,7 +13,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // Функция копирования стилей
     const copyStyles = () => {
         const styles = window.getComputedStyle(textarea);
-        ['border', 'fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'padding', 'margin', 'whiteSpace', 'wordWrap']
+        ['border', 'fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'padding', 'borderRadius', 'wordWrap', 'whiteSpace']
             .forEach((prop) => mirror.style[prop] = styles[prop]);
         mirror.style.borderColor = 'transparent';
     };
@@ -122,8 +126,11 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Подписка на события
     textarea.addEventListener('input', syncMirror);
-    textarea.addEventListener('scroll', () => mirror.scrollTop = textarea.scrollTop);
-
+    textarea.addEventListener('scroll', () => {
+        mirror.scrollTop = textarea.scrollTop;   // Синхронизация вертикальной прокрутки
+        mirror.scrollLeft = textarea.scrollLeft; // Синхронизация горизонтальной прокрутки
+        syncMirror();                            // Обновление подсветки
+    });
 
 
     // Инициализация

diff --git a/script.min.js b/script.min.js
diff --git a/style.css b/style.css
@@ -4,25 +4,44 @@
 
 .container {
     position: relative;
-    width: fit-content;
+    width: 600px;
+    height: 200px;
 }
 
 .code {
     resize: none;
-    width: 500px;
-    height: 150px;
+    width: 100%;
+    height: 100%;
 
     margin: 0;
     padding: 15px;
     line-height: 1.5rem;
-    font-size: 1.25rem;
-    white-space: pre-wrap;
+    font-size: 1.1rem;
+    white-space: pre; /* Запрещаем перенос строк */
+    word-wrap: normal; /* Предотвращаем автоматический перенос слов */
 
-    background: transparent;
-    position: relative;
+    /* Отключаем эластичную прокрутку (оттягивание после максимальной прокрутки) */
+    overscroll-behavior: contain;
+    /* Отключаем плавную прокрутку. хотя вроде не влияет, но пусть будет */
+    scroll-behavior:auto; 
+    /* на firefox (на macos) прокрутка от краёв никак не синхронизируется и чисто визуально расходится */
+    /* так что решение №1) color: transparent; caret-color: xxx. Минус: цвет каретки под dark-reader и light/dark темы фиг подгонишь */
+    /* color: transparent;   */
+    /* caret-color: #ffcc00; */
+
+    /* решение №2) говорим firefox что заполнение текст не будет. минусов не будет. */
+    -webkit-text-fill-color: transparent;
+
+
+    outline: none;
+    border: 1px solid #80808040;
+
+    &:focus {
+        box-shadow: 0 0 5px #80808080; /* Добавляем тень */
+    }
 }
 
-/* невимая часть, которая всё подсвечивает находясь над textarea */
+/* невидимая часть, которая всё подсвечивает находясь над textarea */
 .mirror {
     position: absolute;
     top: 0;
@@ -38,20 +57,22 @@
     }
 
     & .string {
-        color: green;
+        color: #7ac44d;
     }
 
     & .keyword {
-        color:dodgerblue;
+        color: #478cd5;
     }
 
     & .function {
-        color:sandybrown;
+        color: #dd9672;
     }
 
-    & .variable {}
-    & .punctuation {}
-    & .number {}
-    & .operator {}
-    & .boolean {}
+    & .operator {
+        color:#BC89BD;
+    }
+
+    & .boolean {
+        color: #e2c85d;
+    }
 }
diff --git a/style.min.css b/style.min.css