Skip to content

Commit c0124d7

Browse files
committed
snippets in history
1 parent 2630b63 commit c0124d7

File tree

3 files changed

+38
-97
lines changed

3 files changed

+38
-97
lines changed

examples/GUI/demo.css

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -471,7 +471,7 @@ footer a:hover {
471471
}
472472

473473
.query-history.show {
474-
max-height: 300px;
474+
max-height: 400px;
475475
height: auto;
476476
opacity: 1;
477477
visibility: visible;
@@ -500,6 +500,15 @@ footer a:hover {
500500
background: rgba(255, 255, 255, 0.05);
501501
}
502502

503+
.history-item.snippet {
504+
background: rgba(43, 106, 74, 0.1);
505+
border-left: 3px solid var(--accent-green);
506+
}
507+
508+
.history-item.snippet:hover {
509+
background: rgba(43, 106, 74, 0.2);
510+
}
511+
503512
.history-query {
504513
font-family: 'JetBrains Mono', monospace;
505514
font-size: 0.85em;

examples/GUI/gui.js

Lines changed: 27 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,7 @@ const elements = {
1313
queryHistoryElm: document.getElementById('queryHistory'),
1414
toggleHistoryBtn: document.getElementById('toggleHistory'),
1515
resultsTabs: document.getElementById('resultsTabs'),
16-
newTabBtn: document.getElementById('newTabBtn'),
17-
snippetsToggleBtn: document.getElementById('toggleSnippets'),
18-
snippetsMenuElm: document.getElementById('snippetsMenu')
16+
newTabBtn: document.getElementById('newTabBtn')
1917
};
2018

2119
// State
@@ -41,25 +39,13 @@ const sqlSnippets = {
4139
name: 'Blog App Schema',
4240
sql: "-- Complete Blog Application Schema\n\n-- Users table\nDROP TABLE IF EXISTS users;\nCREATE TABLE users (\n id INTEGER PRIMARY KEY,\n username TEXT NOT NULL UNIQUE,\n email TEXT UNIQUE,\n password_hash TEXT NOT NULL,\n created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n);\n\n-- Insert sample users\nINSERT INTO users (username, email, password_hash, created_at) VALUES\n ('alice', 'alice@example.com', 'hash1', '2022-01-10'),\n ('bob', 'bob@example.com', 'hash2', '2022-01-15'),\n ('carol', 'carol@example.com', 'hash3', '2022-02-20');\n\n-- Posts table\nDROP TABLE IF EXISTS posts;\nCREATE TABLE posts (\n id INTEGER PRIMARY KEY,\n user_id INTEGER NOT NULL,\n title TEXT NOT NULL,\n content TEXT NOT NULL,\n published BOOLEAN DEFAULT 0,\n created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE\n);\n\n-- Insert sample posts\nINSERT INTO posts (user_id, title, content, published, created_at) VALUES\n (1, 'First Post', 'This is my first post content', 1, '2022-01-12'),\n (1, 'Second Post', 'This is another post by Alice', 1, '2022-01-18'),\n (2, 'Hello World', 'Bob\\'s first post content', 1, '2022-01-20'),\n (3, 'Introduction', 'Hello from Carol', 1, '2022-02-25'),\n (2, 'Draft Post', 'This is a draft', 0, '2022-02-28');\n\n-- Comments table\nDROP TABLE IF EXISTS comments;\nCREATE TABLE comments (\n id INTEGER PRIMARY KEY,\n post_id INTEGER NOT NULL,\n user_id INTEGER NOT NULL,\n content TEXT NOT NULL,\n created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE,\n FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE\n);\n\n-- Insert sample comments\nINSERT INTO comments (post_id, user_id, content, created_at) VALUES\n (1, 2, 'Great post!', '2022-01-13'),\n (1, 3, 'I agree with Bob', '2022-01-14'),\n (3, 1, 'Welcome Bob!', '2022-01-21'),\n (4, 2, 'Nice to meet you Carol', '2022-02-26');\n\n-- Query: Show posts with comment counts\nSELECT \n p.id, \n p.title, \n u.username as author,\n COUNT(c.id) as comment_count\nFROM posts p\nJOIN users u ON p.user_id = u.id\nLEFT JOIN comments c ON c.post_id = p.id\nWHERE p.published = 1\nGROUP BY p.id\nORDER BY p.created_at DESC;"
4341
},
44-
'e-commerce': {
45-
name: 'E-commerce Schema',
46-
sql: "-- E-commerce Database Schema\n\n-- Products table\nDROP TABLE IF EXISTS products;\nCREATE TABLE products (\n id INTEGER PRIMARY KEY,\n name TEXT NOT NULL,\n description TEXT,\n price DECIMAL(10,2) NOT NULL,\n stock_quantity INTEGER NOT NULL DEFAULT 0,\n category TEXT\n);\n\n-- Insert sample products\nINSERT INTO products (name, description, price, stock_quantity, category) VALUES\n ('Smartphone', 'Latest model smartphone', 699.99, 50, 'Electronics'),\n ('Laptop', 'High performance laptop', 1299.99, 25, 'Electronics'),\n ('Headphones', 'Noise cancelling headphones', 199.99, 100, 'Electronics'),\n ('T-shirt', 'Cotton t-shirt', 19.99, 200, 'Clothing'),\n ('Jeans', 'Blue denim jeans', 49.99, 150, 'Clothing');\n\n-- Customers table\nDROP TABLE IF EXISTS customers;\nCREATE TABLE customers (\n id INTEGER PRIMARY KEY,\n name TEXT NOT NULL,\n email TEXT UNIQUE,\n address TEXT,\n created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n);\n\n-- Insert sample customers\nINSERT INTO customers (name, email, address) VALUES\n ('John Doe', 'john@example.com', '123 Main St'),\n ('Jane Smith', 'jane@example.com', '456 Oak Ave'),\n ('Mike Johnson', 'mike@example.com', '789 Pine Rd');\n\n-- Orders table\nDROP TABLE IF EXISTS orders;\nCREATE TABLE orders (\n id INTEGER PRIMARY KEY,\n customer_id INTEGER NOT NULL,\n order_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n status TEXT DEFAULT 'pending',\n total DECIMAL(10,2) NOT NULL,\n FOREIGN KEY (customer_id) REFERENCES customers(id)\n);\n\n-- Insert sample orders\nINSERT INTO orders (customer_id, order_date, status, total) VALUES\n (1, '2023-01-15', 'completed', 919.98),\n (2, '2023-01-20', 'completed', 1299.99),\n (3, '2023-02-01', 'processing', 249.98),\n (1, '2023-02-15', 'pending', 199.99);\n\n-- Order items table\nDROP TABLE IF EXISTS order_items;\nCREATE TABLE order_items (\n id INTEGER PRIMARY KEY,\n order_id INTEGER NOT NULL,\n product_id INTEGER NOT NULL,\n quantity INTEGER NOT NULL,\n price DECIMAL(10,2) NOT NULL,\n FOREIGN KEY (order_id) REFERENCES orders(id),\n FOREIGN KEY (product_id) REFERENCES products(id)\n);\n\n-- Insert sample order items\nINSERT INTO order_items (order_id, product_id, quantity, price) VALUES\n (1, 1, 1, 699.99),\n (1, 3, 1, 199.99),\n (2, 2, 1, 1299.99),\n (3, 4, 5, 19.99),\n (3, 5, 3, 49.99),\n (4, 3, 1, 199.99);\n\n-- Query: Show customer orders with items\nSELECT \n c.name as customer,\n o.id as order_id,\n o.order_date,\n o.status,\n p.name as product,\n oi.quantity,\n oi.price,\n (oi.quantity * oi.price) as subtotal\nFROM customers c\nJOIN orders o ON c.id = o.customer_id\nJOIN order_items oi ON o.id = oi.order_id\nJOIN products p ON oi.product_id = p.id\nORDER BY o.order_date DESC, c.name;"
47-
},
4842
'recursive-query': {
4943
name: 'Recursive Query',
5044
sql: "-- Employee Hierarchy with Recursive CTE\n\n-- Create employees table with manager relationship\nDROP TABLE IF EXISTS employees;\nCREATE TABLE employees (\n id INTEGER PRIMARY KEY,\n name TEXT NOT NULL,\n title TEXT NOT NULL,\n manager_id INTEGER,\n salary NUMERIC,\n FOREIGN KEY (manager_id) REFERENCES employees(id)\n);\n\n-- Insert sample hierarchical data\nINSERT INTO employees (id, name, title, manager_id, salary) VALUES\n (1, 'Mark Johnson', 'CEO', NULL, 250000),\n (2, 'Sarah Williams', 'CTO', 1, 180000),\n (3, 'Michael Brown', 'CFO', 1, 175000),\n (4, 'Patricia Davis', 'Engineering Director', 2, 150000),\n (5, 'Robert Wilson', 'Finance Director', 3, 145000),\n (6, 'Linda Miller', 'Senior Developer', 4, 120000),\n (7, 'James Taylor', 'Senior Developer', 4, 120000),\n (8, 'Elizabeth Anderson', 'Accountant', 5, 95000),\n (9, 'David Thomas', 'Junior Developer', 6, 85000),\n (10, 'Jennifer Jackson', 'Junior Developer', 7, 85000);\n\n-- Recursive query to show employee hierarchy\nWITH RECURSIVE employee_hierarchy AS (\n -- Base case: top-level employees (no manager)\n SELECT \n id, \n name, \n title, \n manager_id, \n salary,\n 0 AS level,\n name AS path\n FROM employees\n WHERE manager_id IS NULL\n \n UNION ALL\n \n -- Recursive case: employees with managers\n SELECT \n e.id, \n e.name, \n e.title, \n e.manager_id, \n e.salary,\n eh.level + 1 AS level,\n eh.path || ' > ' || e.name AS path\n FROM employees e\n JOIN employee_hierarchy eh ON e.manager_id = eh.id\n)\n\n-- Query the hierarchy\nSELECT \n id,\n printf('%.' || (level * 4) || 's%s', '', name) AS employee,\n title,\n level,\n salary,\n path\nFROM employee_hierarchy\nORDER BY path;"
5145
},
52-
'complex-subquery': {
53-
name: 'Complex Subqueries',
54-
sql: "-- Complex Subqueries Example\n\n-- Create sample tables\nDROP TABLE IF EXISTS departments;\nCREATE TABLE departments (\n id INTEGER PRIMARY KEY,\n name TEXT NOT NULL\n);\n\nDROP TABLE IF EXISTS employees;\nCREATE TABLE employees (\n id INTEGER PRIMARY KEY,\n name TEXT NOT NULL,\n department_id INTEGER,\n salary NUMERIC,\n hire_date DATE,\n FOREIGN KEY (department_id) REFERENCES departments(id)\n);\n\nDROP TABLE IF EXISTS projects;\nCREATE TABLE projects (\n id INTEGER PRIMARY KEY,\n name TEXT NOT NULL,\n budget NUMERIC\n);\n\nDROP TABLE IF EXISTS employee_projects;\nCREATE TABLE employee_projects (\n employee_id INTEGER,\n project_id INTEGER,\n hours_worked NUMERIC,\n PRIMARY KEY (employee_id, project_id),\n FOREIGN KEY (employee_id) REFERENCES employees(id),\n FOREIGN KEY (project_id) REFERENCES projects(id)\n);\n\n-- Insert sample data\nINSERT INTO departments (id, name) VALUES\n (1, 'Engineering'),\n (2, 'Marketing'),\n (3, 'Finance'),\n (4, 'HR');\n\nINSERT INTO employees (id, name, department_id, salary, hire_date) VALUES\n (1, 'Alice Smith', 1, 85000, '2020-01-15'),\n (2, 'Bob Johnson', 2, 72000, '2019-03-20'),\n (3, 'Carol Williams', 1, 92000, '2018-11-07'),\n (4, 'Dave Brown', 3, 115000, '2017-05-12'),\n (5, 'Eve Davis', 1, 110000, '2021-08-30'),\n (6, 'Frank Miller', 2, 68000, '2020-04-18'),\n (7, 'Grace Wilson', 3, 95000, '2019-12-01'),\n (8, 'Henry Garcia', 4, 75000, '2021-02-15');\n\nINSERT INTO projects (id, name, budget) VALUES\n (1, 'Website Redesign', 150000),\n (2, 'Mobile App', 200000),\n (3, 'Database Migration', 100000),\n (4, 'Marketing Campaign', 80000);\n\nINSERT INTO employee_projects (employee_id, project_id, hours_worked) VALUES\n (1, 1, 120), (1, 2, 80),\n (2, 4, 150),\n (3, 1, 100), (3, 2, 120), (3, 3, 40),\n (4, 3, 60),\n (5, 2, 180), (5, 3, 30),\n (6, 4, 140),\n (7, 3, 80);\n\n-- Complex query 1: Find employees who work on projects with a budget greater than average\nSELECT DISTINCT e.name, e.salary\nFROM employees e\nJOIN employee_projects ep ON e.id = ep.employee_id\nWHERE ep.project_id IN (\n SELECT id FROM projects WHERE budget > (\n SELECT AVG(budget) FROM projects\n )\n)\nORDER BY e.salary DESC;\n\n-- Complex query 2: Find departments with employees who have above-average salaries\nSELECT \n d.name AS department,\n COUNT(*) AS employee_count,\n ROUND(AVG(e.salary), 2) AS avg_salary\nFROM departments d\nJOIN employees e ON d.id = e.department_id\nWHERE e.salary > (\n SELECT AVG(salary) FROM employees\n)\nGROUP BY d.id\nORDER BY avg_salary DESC;\n\n-- Complex query 3: Find employees who work on the most projects\nSELECT \n e.name,\n COUNT(ep.project_id) AS project_count,\n SUM(ep.hours_worked) AS total_hours\nFROM employees e\nJOIN employee_projects ep ON e.id = ep.employee_id\nGROUP BY e.id\nHAVING COUNT(ep.project_id) = (\n SELECT MAX(project_count)\n FROM (\n SELECT COUNT(project_id) AS project_count\n FROM employee_projects\n GROUP BY employee_id\n )\n)\nORDER BY total_hours DESC;"
55-
},
5646
'window-functions': {
5747
name: 'Window Functions',
58-
sql: "-- Window Functions Example\n\n-- Create sales table\nDROP TABLE IF EXISTS sales;\nCREATE TABLE sales (\n id INTEGER PRIMARY KEY,\n salesperson TEXT NOT NULL,\n region TEXT NOT NULL,\n amount NUMERIC NOT NULL,\n sale_date DATE NOT NULL\n);\n\n-- Insert sample data\nINSERT INTO sales (salesperson, region, amount, sale_date) VALUES\n ('Alice', 'North', 12500, '2023-01-05'),\n ('Bob', 'South', 8700, '2023-01-10'),\n ('Carol', 'East', 15200, '2023-01-12'),\n ('Dave', 'West', 7300, '2023-01-15'),\n ('Alice', 'North', 9800, '2023-02-03'),\n ('Bob', 'South', 11600, '2023-02-08'),\n ('Carol', 'East', 14100, '2023-02-15'),\n ('Dave', 'West', 9200, '2023-02-20'),\n ('Alice', 'North', 16700, '2023-03-05'),\n ('Bob', 'South', 10300, '2023-03-12'),\n ('Carol', 'East', 12800, '2023-03-18'),\n ('Dave', 'West', 8500, '2023-03-25');\n\n-- Window function queries\n\n-- 1. Running total of sales by salesperson\nSELECT\n salesperson,\n region,\n sale_date,\n amount,\n SUM(amount) OVER (\n PARTITION BY salesperson \n ORDER BY sale_date\n ) AS running_total\nFROM sales\nORDER BY salesperson, sale_date;\n\n-- 2. Rank salespeople by amount within each region\nSELECT\n region,\n salesperson,\n amount,\n RANK() OVER (\n PARTITION BY region \n ORDER BY amount DESC\n ) AS region_rank\nFROM sales\nORDER BY region, region_rank;\n\n-- 3. Calculate moving average of last 2 sales\nSELECT\n salesperson,\n sale_date,\n amount,\n AVG(amount) OVER (\n PARTITION BY salesperson \n ORDER BY sale_date \n ROWS BETWEEN 1 PRECEDING AND CURRENT ROW\n ) AS moving_avg_2\nFROM sales\nORDER BY salesperson, sale_date;\n\n-- 4. Compare each sale to the previous sale\nSELECT\n salesperson,\n sale_date,\n amount,\n LAG(amount, 1) OVER (\n PARTITION BY salesperson \n ORDER BY sale_date\n ) AS previous_amount,\n amount - LAG(amount, 1) OVER (\n PARTITION BY salesperson \n ORDER BY sale_date\n ) AS amount_change\nFROM sales\nORDER BY salesperson, sale_date;"
59-
},
60-
'json-functions': {
61-
name: 'JSON Functions',
62-
sql: "-- SQLite JSON Functions Example\n\n-- Create table with JSON data\nDROP TABLE IF EXISTS users;\nCREATE TABLE users (\n id INTEGER PRIMARY KEY,\n name TEXT NOT NULL,\n profile JSON\n);\n\n-- Insert sample data with JSON\nINSERT INTO users (name, profile) VALUES\n ('Alice', '{\"age\": 28, \"city\": \"New York\", \"skills\": [\"Python\", \"SQL\", \"JavaScript\"], \"contact\": {\"email\": \"alice@example.com\", \"phone\": \"555-1234\"}}'),\n ('Bob', '{\"age\": 35, \"city\": \"San Francisco\", \"skills\": [\"Java\", \"C++\", \"Ruby\"], \"contact\": {\"email\": \"bob@example.com\", \"phone\": \"555-5678\"}}'),\n ('Carol', '{\"age\": 42, \"city\": \"Chicago\", \"skills\": [\"SQL\", \"R\", \"Tableau\"], \"contact\": {\"email\": \"carol@example.com\"}}'),\n ('Dave', '{\"age\": 31, \"city\": \"Boston\", \"skills\": [\"Python\", \"SQL\"], \"contact\": {\"email\": \"dave@example.com\", \"phone\": \"555-9012\"}}');\n\n-- JSON queries\n\n-- 1. Extract simple values\nSELECT\n name,\n json_extract(profile, '$.age') AS age,\n json_extract(profile, '$.city') AS city\nFROM users\nORDER BY age;\n\n-- 2. Filter based on JSON values\nSELECT name, profile\nFROM users\nWHERE json_extract(profile, '$.age') > 30\nORDER BY json_extract(profile, '$.age');\n\n-- 3. Check for array elements\nSELECT name\nFROM users\nWHERE json_extract(profile, '$.skills') LIKE '%SQL%'\nORDER BY name;\n\n-- 4. Extract nested values\nSELECT\n name,\n json_extract(profile, '$.contact.email') AS email,\n json_extract(profile, '$.contact.phone') AS phone\nFROM users\nORDER BY name;\n\n-- 5. Count array elements\nSELECT\n name,\n json_array_length(json_extract(profile, '$.skills')) AS skill_count\nFROM users\nORDER BY skill_count DESC;"
48+
sql: "-- Window Functions Example\n\n-- Create sales table\nDROP TABLE IF EXISTS sales;\nCREATE TABLE sales (\n id INTEGER PRIMARY KEY,\n salesperson TEXT NOT NULL,\n region TEXT NOT NULL,\n amount NUMERIC NOT NULL,\n sale_date DATE NOT NULL\n);\n\n-- Insert sample data\nINSERT INTO sales (salesperson, region, amount, sale_date) VALUES\n ('Alice', 'North', 12500, '2023-01-05'),\n ('Bob', 'South', 8700, '2023-01-10'),\n ('Carol', 'East', 15200, '2023-01-12'),\n ('Dave', 'West', 7300, '2023-01-15'),\n ('Alice', 'North', 9800, '2023-02-03'),\n ('Bob', 'South', 11600, '2023-02-08'),\n ('Carol', 'East', 14100, '2023-02-15'),\n ('Dave', 'West', 9200, '2023-02-20'),\n ('Alice', 'North', 16700, '2023-03-05'),\n ('Bob', 'South', 10300, '2023-03-12'),\n ('Carol', 'East', 12800, '2023-03-18'),\n ('Dave', 'West', 8500, '2023-03-25');\n\n-- Window function queries\n\n-- 1. Running total of sales by salesperson\nSELECT\n salesperson,\n region,\n sale_date,\n amount,\n SUM(amount) OVER (\n PARTITION BY salesperson \n ORDER BY sale_date\n ) AS running_total\nFROM sales\nORDER BY salesperson, sale_date;"
6349
}
6450
};
6551

@@ -74,7 +60,7 @@ worker.postMessage({ action: 'open' });
7460
initResizer();
7561
initTabs();
7662
initKeyboardShortcuts();
77-
initSnippetsMenu();
63+
initQueryHistory();
7864

7965
// Error handling
8066
function handleError(e) {
@@ -644,7 +630,12 @@ function createHistoryItem(item) {
644630
const historyClone = historyTemplate.content.cloneNode(true);
645631
const historyItem = historyClone.querySelector('.history-item');
646632

647-
const timeString = item.timestamp.toLocaleTimeString();
633+
// Add snippet class if it's a snippet
634+
if (item.isSnippet) {
635+
historyItem.classList.add('snippet');
636+
}
637+
638+
const timeString = item.isSnippet ? `Example: ${item.snippetName}` : item.timestamp.toLocaleTimeString();
648639
const queryPreview = truncateString(item.query, 60);
649640

650641
const queryPreviewEl = document.createElement('span');
@@ -671,12 +662,6 @@ function truncateString(str, maxLength) {
671662
}
672663

673664
function toggleQueryHistory() {
674-
// Don't open history if there are no items
675-
if (!elements.queryHistoryElm.classList.contains('show') && state.queryHistory.length === 0) {
676-
showNotification('No query history yet');
677-
return;
678-
}
679-
680665
const historyElement = elements.queryHistoryElm;
681666
const isVisible = historyElement.classList.contains('show');
682667

@@ -696,6 +681,24 @@ function closeQueryHistory() {
696681
elements.queryHistoryElm.classList.remove('show');
697682
}
698683

684+
// Initialize query history with snippets
685+
function initQueryHistory() {
686+
// Add snippets to history in reverse order so the most basic ones appear at the top
687+
const snippetEntries = Object.entries(sqlSnippets);
688+
for (let i = snippetEntries.length - 1; i >= 0; i--) {
689+
const [id, snippet] = snippetEntries[i];
690+
state.queryHistory.push({
691+
query: snippet.sql,
692+
timestamp: new Date(Date.now() - i * 60000), // Stagger timestamps
693+
executionTime: 0,
694+
isSnippet: true,
695+
snippetName: snippet.name
696+
});
697+
}
698+
699+
updateHistoryUI();
700+
}
701+
699702
// Toggle history button
700703
elements.toggleHistoryBtn.addEventListener('click', toggleQueryHistory);
701704

@@ -767,62 +770,3 @@ function addShortcutInfo(container, title, keyText) {
767770

768771
container.appendChild(shortcut);
769772
}
770-
771-
// Initialize snippets menu
772-
function initSnippetsMenu() {
773-
if (!elements.snippetsToggleBtn || !elements.snippetsMenuElm) return;
774-
775-
// Create snippet menu items
776-
for (const [id, snippet] of Object.entries(sqlSnippets)) {
777-
const item = document.createElement('div');
778-
item.className = 'snippet-item';
779-
item.textContent = snippet.name;
780-
item.dataset.snippetId = id;
781-
782-
item.addEventListener('click', () => {
783-
editor.setValue(snippet.sql);
784-
toggleSnippetsMenu();
785-
});
786-
787-
elements.snippetsMenuElm.appendChild(item);
788-
}
789-
790-
// Toggle button event
791-
elements.snippetsToggleBtn.addEventListener('click', toggleSnippetsMenu);
792-
793-
// Close menu when clicking outside
794-
document.addEventListener('click', function(e) {
795-
if (elements.snippetsMenuElm.classList.contains('show') &&
796-
!elements.snippetsMenuElm.contains(e.target) &&
797-
e.target !== elements.snippetsToggleBtn) {
798-
closeSnippetsMenu();
799-
}
800-
});
801-
802-
// Close menu when pressing Escape
803-
document.addEventListener('keydown', function(e) {
804-
if (e.key === 'Escape' && elements.snippetsMenuElm.classList.contains('show')) {
805-
closeSnippetsMenu();
806-
}
807-
});
808-
}
809-
810-
function toggleSnippetsMenu() {
811-
const menuElement = elements.snippetsMenuElm;
812-
const isVisible = menuElement.classList.contains('show');
813-
814-
if (!isVisible) {
815-
// Position the menu
816-
const toggleBtnRect = elements.snippetsToggleBtn.getBoundingClientRect();
817-
menuElement.style.top = `${toggleBtnRect.bottom + 5}px`;
818-
menuElement.style.right = `${window.innerWidth - toggleBtnRect.right}px`;
819-
}
820-
821-
menuElement.classList.toggle('show');
822-
elements.snippetsToggleBtn.classList.toggle('active');
823-
}
824-
825-
function closeSnippetsMenu() {
826-
elements.snippetsMenuElm.classList.remove('show');
827-
elements.snippetsToggleBtn.classList.remove('active');
828-
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy