Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tweaks #50

Merged
merged 6 commits into from
Dec 19, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/css/popup.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,9 @@ input::placeholder,
textarea::placeholder {
text-align: center;
}

.dropdown-menu {
max-width: 100vw;
white-space: normal;
overflow: hidden;
}
1 change: 1 addition & 0 deletions src/html/links.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Link Extractor</title>
<link rel="icon" href="../images/logo16.png" sizes="any">
<link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
Expand Down
38 changes: 18 additions & 20 deletions src/html/options.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Link Extractor Options</title>
<link rel="icon" href="../images/logo16.png" sizes="any">
<link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
Expand All @@ -16,14 +17,15 @@
<div class="col-xl-6 col-md-8 col-12 m-auto">
<div class="card" >
<div class="card-body">
<div class="justify-content-center align-items-center d-flex">
<img src="../images/logo48.png" class="img-fluid float-start me-2" title="Link Extractor" alt="Link Extractor" height="48" width="48">
<h1 class="align-middle">Link Extractor</h1>
<div class="d-flex justify-content-center align-items-center">
<img src="../images/logo48.png" class="me-2" height="48" width="48"
alt="Link Extractor" title="Link Extractor">
<h1>Link Extractor</h1>
</div>
<div class="clearfix"></div>
<p class="text-center lead">v<span id="version"></span></p>

<table class="table table-sm table-borderless ">
<table class="table table-sm table-borderless">
<caption class="visually-hidden">Keyboard Shortcuts</caption>
<thead class="visually-hidden"><tr><th>Description</th><th>Shortcut</th></tr></thead>
<tbody>
Expand All @@ -38,10 +40,10 @@ <h1 class="align-middle">Link Extractor</h1>
</tbody>
</table>

<form id="options-form">
<form id="options-form" class="mb-3">
<label for="flags" class="form-label">Regex Flags</label>
<a id="reset-default" class="float-end align-bottom small" role="button">Reset to Default</a>
<input type="text" id="flags" class="form-control" aria-describedby="flagsHelp">
<input type="text" id="flags" class="form-control form-control-sm" aria-describedby="flagsHelp">
<div id="flagsInvalid" class="invalid-feedback">Invalid Regex Flags.</div>
<div id="flagsHelp" class="form-text mb-3">
Flags used when using a filter.
Expand Down Expand Up @@ -77,8 +79,6 @@ <h1 class="align-middle">Link Extractor</h1>
</div>
</form>

<hr>

<form id="filters-form">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Add Filter" aria-label="Filter" id="add-filter" aria-describedby="add-filter-btn">
Expand All @@ -87,18 +87,16 @@ <h1 class="align-middle">Link Extractor</h1>
</button>
</div>
</form>
<div class="table-responsive">
<table id="filters-table" class="table table-sm table-hover bg-transparent">
<caption>Saved Filters</caption>
<thead><tr>
<th scope="col" class="text-center" style="width: 36px;">
<i class="fa-solid fa-trash-can"></i>
</th>
<th scope="col">Filter</th>
</tr></thead>
<tbody></tbody>
</table>
</div>
<table id="filters-table" class="table table-sm table-hover bg-transparent">
<caption>Saved Filters</caption>
<thead><tr>
<th scope="col" class="text-center" style="width: 36px;">
<i class="fa-solid fa-trash-can"></i>
</th>
<th scope="col">Filter</th>
</tr></thead>
<tbody></tbody>
</table>

<div class="text-center mb-3">
<a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
Expand Down
13 changes: 7 additions & 6 deletions src/html/popup.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Link Extractor</title>
<link rel="icon" href="../images/logo16.png" sizes="any">
<link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
Expand All @@ -14,11 +15,11 @@
<div class="container-fluid p-3">
<div class="d-grid g-2 gap-2">
<div class="btn-group btn-group-sm" role="group" aria-label="Button group with nested dropdown">
<a role="button" class="btn btn-success btn-sm" data-filter="">
<a role="button" class="btn btn-sm btn-success" data-filter="">
<i class="fa-solid fa-link me-1"></i> All Links</a>
<div class="btn-group" role="group">
<a role="button" class="btn btn-outline-success btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Filters</a>
<ul id="filters-ul" class="dropdown-menu small">
<a role="button" class="btn btn-sm btn-outline-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Filters</a>
<ul id="filters-ul" class="dropdown-menu">
<li id="no-filters"><a class="dropdown-item" href="../html/options.html">Add Saved Filters</a></li>
</ul>
</div>
Expand Down Expand Up @@ -56,10 +57,10 @@
</form>
</div>

<a class="btn btn-outline-info btn-sm" role="button" href="../html/options.html">
<a class="btn btn-sm btn-outline-info" role="button" href="../html/options.html">
<i class="fa-solid fa-sliders me-1"></i> Options</a>
<div class=" d-flex justify-content-center align-items-center text-center small">
<img class="" src="../images/logo16.png" alt="Link Extractor" width="16" height="16">
<div class="d-flex justify-content-center align-items-center text-center small">
<img class="" src="../images/logo16.png" width="16" height="16" alt="Link Extractor" title="Link Extractor">
<a class="link-offset-2 link-underline link-underline-opacity-0 link-underline-opacity-75-hover mx-2" type="button" rel="noopener"
id="homepage_url" href="">Link Extractor</a> v<span id="version"></span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/js/links.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const dtOptions = {
processing: true,
saveState: true,
bSort: true,
order: [0, 'desc'],
order: [[0, 'asc']],
pageLength: -1,
lengthMenu: [
[10, 25, 50, 100, 250, -1],
Expand Down
3 changes: 2 additions & 1 deletion src/js/options.js
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ function updateTable(data) {
button.setAttribute('role', 'button')
button.addEventListener('click', deleteHost)
const cell1 = row.insertCell()
cell1.classList.add('text-center')
cell1.classList.add('text-center', 'align-middle')
cell1.appendChild(button)

const link = document.createElement('a')
Expand All @@ -125,6 +125,7 @@ function updateTable(data) {
)
link.setAttribute('role', 'button')
const cell2 = row.insertCell()
cell2.classList.add('text-break')
cell2.appendChild(link)
})
}
Expand Down
8 changes: 4 additions & 4 deletions src/js/popup.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ document.getElementById('filter-form').addEventListener('submit', filterForm)
document.getElementById('links-form').addEventListener('submit', linksForm)
document.getElementById('links-text').addEventListener('input', updateLinks)

document
.querySelectorAll('[data-filter]')
.forEach((el) => el.addEventListener('click', filterForm))
document
.querySelectorAll('a[href]')
.forEach((el) => el.addEventListener('click', popupLinks))
document
.querySelectorAll('[data-filter]')
.forEach((el) => el.addEventListener('click', filterForm))
document
.querySelectorAll('#options-form input')
.forEach((el) => el.addEventListener('change', saveOptions))
Expand Down Expand Up @@ -59,7 +59,7 @@ function createFilterLink(number, value = '') {
const a = document.createElement('a')
a.textContent = value
a.dataset.pattern = value
a.classList.add('dropdown-item', 'small')
a.classList.add('dropdown-item', 'small', 'text-break')
a.setAttribute('role', 'button')
a.addEventListener('click', filterForm)
li.appendChild(a)
Expand Down