From 74c3867454d02d3f0272694765069a48959fbaa2 Mon Sep 17 00:00:00 2001
From: Tieptk <tieptk@hurasoft.com>
Date: Tue, 24 Dec 2024 11:59:33 +0700
Subject: [PATCH] up

---
 tag.html | 240 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 240 insertions(+)
 create mode 100644 tag.html
diff --git a/tag.html b/tag.html
new file mode 100644
index 0000000..d9205ba
--- /dev/null
+++ b/tag.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tag Manager</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+        }
+
+        .textarea {
+            padding: 5px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            width: 100%;
+            max-width: 400px;
+            height: 300px;
+            background: #f9f9f9;
+            position: relative;
+        }
+
+
+
+        @keyframes blink-caret {
+            50% {
+                background-color: transparent
+            }
+        }
+
+        .tag:last-child::before {
+            position: absolute;
+            content: '';
+            right: -5px;
+            display: inline-block;
+            width: 1px;
+            top: 0;
+            background-color: #000;
+            animation: blink-caret .7s steps(1) infinite;
+            height: 25px;
+            vertical-align: bottom
+        }
+
+        .tag {
+            display: inline-block;
+            align-items: center;
+            background-color: #e0e0e0;
+            border-radius: 5px;
+            margin: 5px;
+            padding: 5px;
+            font-size: 13px;
+            position: relative;
+        }
+
+        .remove-tag {
+            background: none;
+            border: none;
+            color: gray;
+            margin-right: 5px;
+            cursor: pointer;
+            text-decoration: none;
+        }
+
+        .remove-tag:hover {
+            color: #d50000;
+        }
+
+        .popup {
+            display: none;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: #fff;
+            padding: 20px;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+            z-index: 1000;
+        }
+
+        .popup h3 {
+            margin: 0 0 10px;
+        }
+
+        .close-btn {
+            margin-top: 10px;
+            padding: 5px 10px;
+            background: #007bff;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        .close-btn:hover {
+            background: #0056b3;
+        }
+
+        .dropdown {
+            display: none;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            width: 100%;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            background: #fff;
+            z-index: 1000;
+            max-height: 150px;
+            overflow-y: auto;
+        }
+
+        .dropdown-item {
+            padding: 5px;
+            cursor: pointer;
+        }
+
+        .dropdown-item:hover {
+            background: #f0f0f0;
+        }
+
+        .dropdown-item .checkmark {
+            position: absolute;
+            right: 10px;
+            display: none;
+        }
+
+        .dropdown-item.selected .checkmark {
+            display: inline;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="textarea" id="textarea">
+        <div class="tags-container" id="tagContainer">
+        </div>
+        <div class="dropdown" id="categoryDropdown">
+        </div>
+    </div>
+
+
+
+    <script>
+        function TagManager() {
+
+            //  tag khởi tạo
+            const initialTags = [
+                { id: 1, name: 'Đệm bông ép Olympia' },
+                { id: 2, name: 'Đệm cao su Olympia' }
+            ];
+
+            //  danh sách danh mục
+            const categoryOptions = [
+                { id: 3, name: 'Đệm foam Olympia' },
+                { id: 4, name: 'Đệm lò xo Olympia' },
+                { id: 5, name: 'Đệm Olympia' }
+            ];
+
+            const tagContainer = document.getElementById('tagContainer'); // holder danh sách tag
+            const categoryDropdown = document.getElementById('categoryDropdown'); // dropdown danh mục
+            const textarea = document.getElementById('textarea'); // textarea container
+
+            // hien thị các tag
+            function renderTags(tags) {
+                tagContainer.innerHTML = tags.map(tag => `
+                    <div class="tag">
+                        <a href="javascript:void(0)" class="remove-tag" data-id="${tag.id}">x</a>
+                        ${tag.name}
+                    </div>`).join('');
+            }
+
+            // thêm tag
+            function addTag(tags, category) {
+                const newTag = { id: category.id, name: category.name };
+                tags.push(newTag);
+                renderTags(tags);
+                renderCategoryDropdown(categoryOptions, tags);
+            }
+
+            // hien thị danh mục
+            function renderCategoryDropdown(categories, selectedTags = []) {
+                categoryDropdown.innerHTML = categories.map(category => `
+                    <div class="dropdown-item ${selectedTags.some(tag => tag.id === category.id) ? 'selected' : ''}" data-id="${category.id}">
+                        ${category.name}
+                        <span class="checkmark">✔</span>
+                    </div>
+                `).join('');
+            }
+
+            // xóa tag
+            function removeTag(tags, id) {
+                const index = tags.findIndex(tag => tag.id === id);
+                if (index !== -1) tags.splice(index, 1);
+                renderTags(tags);
+            }
+
+            // sự kiện tag
+            function handleTagContainerClick(event) {
+                if (event.target.classList.contains('remove-tag')) {
+                    const id = parseInt(event.target.dataset.id, 10);
+                    removeTag(initialTags, id);
+                    categoryDropdown.style.display = 'none';
+                }
+            }
+
+            // sự kiện chọn danh mục
+            function handleCategoryDropdownClick(event) {
+                if (event.target.classList.contains('dropdown-item')) {
+                    const id = parseInt(event.target.dataset.id, 10);
+                    const category = categoryOptions.find(category => category.id === id);
+                    addTag(initialTags, category);
+                    categoryDropdown.style.display = 'none';
+                }
+            }
+
+            // sự kiện click vào textarea
+            function handleTextareaClick(event) {
+                categoryDropdown.style.display = categoryDropdown.style.display === 'block' ? 'none' : 'block';
+            }
+
+            tagContainer.addEventListener('click', handleTagContainerClick);
+            categoryDropdown.addEventListener('click', handleCategoryDropdownClick);
+            textarea.addEventListener('click', handleTextareaClick);
+
+            // chạy hiển thị danh sách tag
+            renderTags(initialTags);
+            renderCategoryDropdown(categoryOptions, initialTags);
+        }
+
+
+        //  chạy
+        TagManager();
+    </script>
+</body>
+
+</html>
\ No newline at end of file
