From 43e5b35052cbdad1513d86564b79fc566a8b0609 Mon Sep 17 00:00:00 2001 From: Alexander Vokin Date: Mon, 30 Sep 2024 16:59:01 +0800 Subject: [PATCH 1/7] views changes to add Searchbar --- src/devtools/panel.css | 7 +++++++ src/devtools/views/ProjectList.html | 1 + src/devtools/views/ProjectListItem.html | 2 +- src/devtools/views/SitemapList.html | 1 + 4 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/devtools/panel.css b/src/devtools/panel.css index 02cf403e..404f0119 100644 --- a/src/devtools/panel.css +++ b/src/devtools/panel.css @@ -182,3 +182,10 @@ select[size] { font-style: normal; font-weight: normal; } +.searchbar { + margin: 5px; + &::placeholder { + color: grey; + font-style: italic; + } +} diff --git a/src/devtools/views/ProjectList.html b/src/devtools/views/ProjectList.html index 680e6701..e1210ff7 100644 --- a/src/devtools/views/ProjectList.html +++ b/src/devtools/views/ProjectList.html @@ -1,4 +1,5 @@
+ diff --git a/src/devtools/views/ProjectListItem.html b/src/devtools/views/ProjectListItem.html index 3df96b6d..10b8b51d 100644 --- a/src/devtools/views/ProjectListItem.html +++ b/src/devtools/views/ProjectListItem.html @@ -1,4 +1,4 @@ - + diff --git a/src/devtools/views/SitemapList.html b/src/devtools/views/SitemapList.html index b8933f0c..b4764b8b 100644 --- a/src/devtools/views/SitemapList.html +++ b/src/devtools/views/SitemapList.html @@ -1,4 +1,5 @@
+
{{id}}{{title}}{{title}}
From 7147d25002d1466ddefc9b5a7e37f265ebc898c4 Mon Sep 17 00:00:00 2001 From: Alexander Vokin Date: Mon, 30 Sep 2024 17:00:37 +0800 Subject: [PATCH 2/7] add logic for searchbar --- src/scripts/Controller.js | 47 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/src/scripts/Controller.js b/src/scripts/Controller.js index 00215e25..f6802e54 100644 --- a/src/scripts/Controller.js +++ b/src/scripts/Controller.js @@ -809,6 +809,8 @@ export default class SitemapController { }); $('#viewport').html($projectListPanel); Translator.translatePage(); + + this.initSearchbar('projects'); } getCurrentProjectId() { @@ -854,8 +856,53 @@ export default class SitemapController { $('#viewport').html($sitemapListPanel); Translator.translatePage(); } + this.initSearchbar('sitemaps'); } + initSearchbar(searchbarLocation) { + document.querySelector('.searchbar').addEventListener('input', event => { + let AllRows = []; + try { + if (searchbarLocation === 'sitemaps') { + AllRows = Array.from(document.querySelectorAll('td.id')).map( + td => td.parentElement + ); + AllRows.forEach(row => { + if ( + row + .querySelector('.id') + .innerText.toLowerCase() + .startsWith(event.target.value.toLowerCase()) + ) { + row.style.display = 'table-row'; + } else { + row.style.display = 'none'; + } + }); + } else if (searchbarLocation === 'projects') { + AllRows = Array.from(document.querySelectorAll('td.projTitle')).map( + td => td.parentElement + ); + AllRows.forEach(row => { + if ( + row + .querySelector('td.projTitle') + .innerText.toLowerCase() + .startsWith(event.target.value.toLowerCase()) + ) { + row.style.display = 'table-row'; + } else { + row.style.display = 'none'; + } + }); + } else { + throw { message: "initSearchbar can't understand the type of table" }; + } + } catch (error) { + console.log(error.message); + } + }); + } getSitemapFromMetadataForm() { const metadata = {}; const $form = $('#viewport form'); From a42be7a02a2316b31bf9483eadf9fe6e575abc8c Mon Sep 17 00:00:00 2001 From: Alexander Vokin Date: Mon, 30 Sep 2024 17:09:49 +0800 Subject: [PATCH 3/7] add messages for searchbar placeholder --- src/_locales/en/messages.json | 3 +++ src/_locales/ru/messages.json | 3 +++ src/scripts/Controller.js | 3 +++ 3 files changed, 9 insertions(+) diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index b2da4b8c..027b977f 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -378,5 +378,8 @@ }, "popup_ws_version": { "message": "Web Scraper version: " + }, + "searchbar_placeholder_message": { + "message": "Search..." } } diff --git a/src/_locales/ru/messages.json b/src/_locales/ru/messages.json index cade54ff..065c917d 100644 --- a/src/_locales/ru/messages.json +++ b/src/_locales/ru/messages.json @@ -412,5 +412,8 @@ }, "popup_ws_version": { "message": "Версия Web Scraper: " + }, + "searchbar_placeholder_message": { + "message": "Поиск..." } } diff --git a/src/scripts/Controller.js b/src/scripts/Controller.js index f6802e54..dc700320 100644 --- a/src/scripts/Controller.js +++ b/src/scripts/Controller.js @@ -860,6 +860,9 @@ export default class SitemapController { } initSearchbar(searchbarLocation) { + document.querySelector('input.searchbar').placeholder = Translator.getTranslationByKey( + 'searchbar_placeholder_message' + ); document.querySelector('.searchbar').addEventListener('input', event => { let AllRows = []; try { From 3cd678ac2a55e842ac36281d28c2ccfcf7a888a2 Mon Sep 17 00:00:00 2001 From: Alexander Vokin Date: Tue, 22 Oct 2024 21:17:20 +0800 Subject: [PATCH 4/7] add better logic for searchbar based on regex. Also add highlight for matches --- src/devtools/panel.css | 4 ++ src/scripts/Controller.js | 78 +++++++++++++++++++++------------------ 2 files changed, 46 insertions(+), 36 deletions(-) diff --git a/src/devtools/panel.css b/src/devtools/panel.css index 404f0119..19f0d174 100644 --- a/src/devtools/panel.css +++ b/src/devtools/panel.css @@ -189,3 +189,7 @@ select[size] { font-style: italic; } } +mark { + margin: 0; + padding: 0; +} diff --git a/src/scripts/Controller.js b/src/scripts/Controller.js index dc700320..4ee24f0e 100644 --- a/src/scripts/Controller.js +++ b/src/scripts/Controller.js @@ -865,44 +865,50 @@ export default class SitemapController { ); document.querySelector('.searchbar').addEventListener('input', event => { let AllRows = []; - try { - if (searchbarLocation === 'sitemaps') { - AllRows = Array.from(document.querySelectorAll('td.id')).map( - td => td.parentElement - ); - AllRows.forEach(row => { - if ( - row - .querySelector('.id') - .innerText.toLowerCase() - .startsWith(event.target.value.toLowerCase()) - ) { - row.style.display = 'table-row'; - } else { - row.style.display = 'none'; + const inputText = event.target.value.toLowerCase(); + if (searchbarLocation === 'sitemaps') { + AllRows = Array.from(document.querySelectorAll('td.id')).map( + td => td.parentElement + ); + AllRows.forEach(row => { + const rowText = row.querySelector('.id').innerText.toLowerCase(); + if (rowText.includes(inputText)) { + row.style.display = 'table-row'; + let regex = RegExp(inputText, 'gi'); + if (!inputText) { + regex = /$^/; // will never is valid } - }); - } else if (searchbarLocation === 'projects') { - AllRows = Array.from(document.querySelectorAll('td.projTitle')).map( - td => td.parentElement - ); - AllRows.forEach(row => { - if ( - row - .querySelector('td.projTitle') - .innerText.toLowerCase() - .startsWith(event.target.value.toLowerCase()) - ) { - row.style.display = 'table-row'; - } else { - row.style.display = 'none'; + row.querySelector('td.id').innerHTML = rowText.replace(regex, match => { + return `${match}`; + }); + } else { + row.style.display = 'none'; + } + }); + } else if (searchbarLocation === 'projects') { + AllRows = Array.from(document.querySelectorAll('td.projTitle')).map( + td => td.parentElement + ); + AllRows.forEach(row => { + const rowText = row.querySelector('td.projTitle').innerText; + if (rowText.toLowerCase().includes(inputText)) { + row.style.display = 'table-row'; + let regex = RegExp(inputText, 'gi'); + if (!inputText) { + regex = /$^/; // will never is valid } - }); - } else { - throw { message: "initSearchbar can't understand the type of table" }; - } - } catch (error) { - console.log(error.message); + row.querySelector('td.projTitle').innerHTML = rowText.replace( + regex, + match => { + return `${match}`; + } + ); + } else { + row.style.display = 'none'; + } + }); + } else { + throw { message: "initSearchbar can't understand the type of table" }; } }); } From 0e8676ab5dabbb4ce2abfefe49cb18e25a45ec51 Mon Sep 17 00:00:00 2001 From: Alexander Vokin Date: Tue, 22 Oct 2024 21:28:00 +0800 Subject: [PATCH 5/7] edit placeholder message --- src/_locales/en/messages.json | 4 ++-- src/_locales/ru/messages.json | 4 ++-- src/scripts/Controller.js | 9 ++++++--- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index 027b977f..eabaca3a 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -379,7 +379,7 @@ "popup_ws_version": { "message": "Web Scraper version: " }, - "searchbar_placeholder_message": { - "message": "Search..." + "searchbar_placeholder_message_for_sitemaps": { + "message": "Sitemap id..." } } diff --git a/src/_locales/ru/messages.json b/src/_locales/ru/messages.json index 065c917d..2670e6a8 100644 --- a/src/_locales/ru/messages.json +++ b/src/_locales/ru/messages.json @@ -413,7 +413,7 @@ "popup_ws_version": { "message": "Версия Web Scraper: " }, - "searchbar_placeholder_message": { - "message": "Поиск..." + "searchbar_placeholder_message_for_sitemaps": { + "message": "Id карты обхода..." } } diff --git a/src/scripts/Controller.js b/src/scripts/Controller.js index 4ee24f0e..e87960b5 100644 --- a/src/scripts/Controller.js +++ b/src/scripts/Controller.js @@ -860,13 +860,13 @@ export default class SitemapController { } initSearchbar(searchbarLocation) { - document.querySelector('input.searchbar').placeholder = Translator.getTranslationByKey( - 'searchbar_placeholder_message' - ); document.querySelector('.searchbar').addEventListener('input', event => { let AllRows = []; const inputText = event.target.value.toLowerCase(); if (searchbarLocation === 'sitemaps') { + document.querySelector('input.searchbar').placeholder = + Translator.getTranslationByKey('searchbar_placeholder_message_for_sitemaps'); + AllRows = Array.from(document.querySelectorAll('td.id')).map( td => td.parentElement ); @@ -886,6 +886,9 @@ export default class SitemapController { } }); } else if (searchbarLocation === 'projects') { + document.querySelector('input.searchbar').placeholder = + Translator.getTranslationByKey('projectName') + '...'; + AllRows = Array.from(document.querySelectorAll('td.projTitle')).map( td => td.parentElement ); From e2362b59250a25bef86643df8e145bc082b882e2 Mon Sep 17 00:00:00 2001 From: Alexander Vokin Date: Tue, 22 Oct 2024 21:38:33 +0800 Subject: [PATCH 6/7] placeholder fix --- src/scripts/Controller.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/scripts/Controller.js b/src/scripts/Controller.js index e87960b5..94e1db6a 100644 --- a/src/scripts/Controller.js +++ b/src/scripts/Controller.js @@ -811,6 +811,8 @@ export default class SitemapController { Translator.translatePage(); this.initSearchbar('projects'); + document.querySelector('input.searchbar').placeholder = + Translator.getTranslationByKey('projectName') + '...'; } getCurrentProjectId() { @@ -857,6 +859,9 @@ export default class SitemapController { Translator.translatePage(); } this.initSearchbar('sitemaps'); + document.querySelector('input.searchbar').placeholder = Translator.getTranslationByKey( + 'searchbar_placeholder_message_for_sitemaps' + ); } initSearchbar(searchbarLocation) { @@ -864,9 +869,6 @@ export default class SitemapController { let AllRows = []; const inputText = event.target.value.toLowerCase(); if (searchbarLocation === 'sitemaps') { - document.querySelector('input.searchbar').placeholder = - Translator.getTranslationByKey('searchbar_placeholder_message_for_sitemaps'); - AllRows = Array.from(document.querySelectorAll('td.id')).map( td => td.parentElement ); @@ -886,9 +888,6 @@ export default class SitemapController { } }); } else if (searchbarLocation === 'projects') { - document.querySelector('input.searchbar').placeholder = - Translator.getTranslationByKey('projectName') + '...'; - AllRows = Array.from(document.querySelectorAll('td.projTitle')).map( td => td.parentElement ); From 8bf67e33d4765b6cc53205cb283834accfbd7cc4 Mon Sep 17 00:00:00 2001 From: Alexander Vokin Date: Sat, 26 Oct 2024 22:30:59 +0800 Subject: [PATCH 7/7] refactor initSearchbar: remove bulky if-construction --- src/scripts/Controller.js | 66 ++++++++++++--------------------------- 1 file changed, 20 insertions(+), 46 deletions(-) diff --git a/src/scripts/Controller.js b/src/scripts/Controller.js index 94e1db6a..31f54352 100644 --- a/src/scripts/Controller.js +++ b/src/scripts/Controller.js @@ -810,7 +810,7 @@ export default class SitemapController { $('#viewport').html($projectListPanel); Translator.translatePage(); - this.initSearchbar('projects'); + this.initSearchbar('td.projTitle'); document.querySelector('input.searchbar').placeholder = Translator.getTranslationByKey('projectName') + '...'; } @@ -858,60 +858,34 @@ export default class SitemapController { $('#viewport').html($sitemapListPanel); Translator.translatePage(); } - this.initSearchbar('sitemaps'); + this.initSearchbar('td.id'); document.querySelector('input.searchbar').placeholder = Translator.getTranslationByKey( 'searchbar_placeholder_message_for_sitemaps' ); } - initSearchbar(searchbarLocation) { + initSearchbar(rowSelector) { document.querySelector('.searchbar').addEventListener('input', event => { let AllRows = []; const inputText = event.target.value.toLowerCase(); - if (searchbarLocation === 'sitemaps') { - AllRows = Array.from(document.querySelectorAll('td.id')).map( - td => td.parentElement - ); - AllRows.forEach(row => { - const rowText = row.querySelector('.id').innerText.toLowerCase(); - if (rowText.includes(inputText)) { - row.style.display = 'table-row'; - let regex = RegExp(inputText, 'gi'); - if (!inputText) { - regex = /$^/; // will never is valid - } - row.querySelector('td.id').innerHTML = rowText.replace(regex, match => { - return `${match}`; - }); - } else { - row.style.display = 'none'; - } - }); - } else if (searchbarLocation === 'projects') { - AllRows = Array.from(document.querySelectorAll('td.projTitle')).map( - td => td.parentElement - ); - AllRows.forEach(row => { - const rowText = row.querySelector('td.projTitle').innerText; - if (rowText.toLowerCase().includes(inputText)) { - row.style.display = 'table-row'; - let regex = RegExp(inputText, 'gi'); - if (!inputText) { - regex = /$^/; // will never is valid - } - row.querySelector('td.projTitle').innerHTML = rowText.replace( - regex, - match => { - return `${match}`; - } - ); - } else { - row.style.display = 'none'; + AllRows = Array.from(document.querySelectorAll(rowSelector)).map( + td => td.parentElement + ); + AllRows.forEach(row => { + const rowText = row.querySelector(rowSelector).innerText; + if (rowText.toLowerCase().includes(inputText)) { + row.style.display = 'table-row'; + let regex = RegExp(inputText, 'gi'); + if (!inputText) { + regex = /$^/; // will never is valid and returns [] } - }); - } else { - throw { message: "initSearchbar can't understand the type of table" }; - } + row.querySelector(rowSelector).innerHTML = rowText.replace(regex, match => { + return `${match}`; + }); + } else { + row.style.display = 'none'; + } + }); }); } getSitemapFromMetadataForm() {