Blue Mege add search

Был добавлен поиск по умениям у синего мага.
Murakumo-JP · Nov 19, 2024 · 79f1d98 · 79f1d98
1 parent c3a72f4
commit 79f1d98
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 3 deletions.
diff --git a/Assets/css/index.css b/Assets/css/index.css
@@ -784,4 +784,28 @@ li.jobguide_menu_list:hover > ul.jobguide_sub_menu {
 }
 #sortText {
 	padding-right: 5px;
+}
+
+/* search */
+.search {
+	background: var(--tank-color);
+	margin: 5px;
+	border-radius: 5px;
+	color: white;
+	font-size: 12px;
+}
+.search a {
+	line-height: 32px;
+	padding: 0 10px;
+}
+#searchInput {
+	border: 0;
+	background: var(--tank-AltColor);
+	height: 25px;
+	color: white;
+	border-radius: 10px;
+	padding: 0 15px;
+}
+input::placeholder {
+	color: white;
 }
diff --git a/Assets/js/main.js b/Assets/js/main.js
@@ -201,7 +201,7 @@ function WarningFunctions() {
 }
 WarningFunctions();
 // Debug
-let DebugEnabled = false; 
+let DebugEnabled = true; 
 
 function DebugFunctions() {
     if (!DebugEnabled) return;
@@ -230,4 +230,39 @@ function DebugFunctions() {
         }
     });
 }
-DebugFunctions();
+DebugFunctions();
+
+// Search
+function toggleSearch() {
+	const tbody = document.querySelector('tbody[data-search]');
+	const searchContainer = document.querySelector('.search');
+
+	if (tbody?.dataset.search === "true") {
+		 searchContainer.style.display = '';
+	} else {
+		 searchContainer.style.display = 'none';
+	}
+}
+
+function searchTable(event) {
+	const query = event.target.value.toLowerCase();
+	const tbody = document.querySelector('tbody[data-search="true"]');
+
+	if (!tbody) return;
+
+	tbody.querySelectorAll('tr').forEach(row => {
+		 const skillName = row.querySelector('.skill p strong')?.textContent.toLowerCase() || '';
+
+		 row.style.display = skillName.includes(query) ? '' : 'none';
+	});
+}
+
+function initSearch() {
+	toggleSearch();
+
+	const searchInput = document.getElementById('searchInput');
+	if (searchInput) {
+		 searchInput.addEventListener('input', searchTable);
+	}
+}
+initSearch();
diff --git a/Page/BLU.html b/Page/BLU.html
@@ -429,6 +429,10 @@ <h3 class="job_sub_title">Основные цели</h3>
                <!-- Content Wrapper -->
                <div class="job_content_wrapper">
                   <h2 class="job_title">Активные и пассивные умения</h2>
+                  <div class="search">
+                     <a>Поиск по умениям:</a>
+                     <input type="text" id="searchInput" placeholder="Введите название умения..."/>
+                  </div>
                   <h3 class="job_sub_title" id="anchor_pvp_onlyaction">Активные умения</h3>
                   <table class="job_table">
                      <colgroup>
@@ -455,7 +459,7 @@ <h3 class="job_sub_title" id="anchor_pvp_onlyaction">Активные умени
                            <th><p><span>Эффект</span></p></th>
                         </tr>
                      </thead>
-                     <tbody class="job_tbody">
+                     <tbody class="job_tbody" data-search="true">
                         <tr id="action_01" db-skill-limited="Action 01"></tr>
                         <tr id="action_02" db-skill-limited="Action 02"></tr>
                         <tr id="action_03" db-skill-limited="Action 03"></tr>