Skip to content

Commit

Permalink
Add Form and Tooltips
Browse files Browse the repository at this point in the history
  • Loading branch information
@smashedr
smashedr committed Sep 14, 2024
1 parent 3f25351 commit d6fdabb
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 30 deletions.
53 changes: 32 additions & 21 deletions src/html/links.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,29 +59,40 @@ <h2 id="links">Links <span class="badge bg-success-subtle"><span id="links-count
</div>
</div> <!-- links-buttons -->

<div class="my-3">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="reType" id="reNormal" value="normal" checked>
<label class="form-check-label" for="reNormal">Normal</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="reType" id="reRegex" value="regex">
<label class="form-check-label" for="reRegex">Normal w/ Regex</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="reType" id="reGroups" value="groups">
<label class="form-check-label" for="reGroups">Regex w/ Match Groups</label>
</div>
<form id="findReplace" name="findReplace" class="my-2">
<a class="link-body-emphasis" data-bs-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<i class="fa-solid fa-magnifying-glass pe-2"></i>Find and Replace
</a>
<div id="collapseExample" class="collapse">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="reType" id="reNormal" value="normal" checked>
<label class="form-check-label me-1" for="reNormal">Normal</label>
<i class="fa-solid fa-circle-info" data-bs-toggle="tooltip" data-bs-placement="bottom"
data-bs-title="Normal Text Find and Replace"></i>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="reType" id="reRegex" value="regex">
<label class="form-check-label me-1" for="reRegex">Normal w/ Regex</label>
<i class="fa-solid fa-circle-info" data-bs-toggle="tooltip" data-bs-placement="bottom"
data-bs-title="Normal Regex Find and Replace"></i>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="reType" id="reGroups" value="groups">
<label class="form-check-label me-1" for="reGroups">Regex w/ Match Groups</label>
<i class="fa-solid fa-circle-info" data-bs-toggle="tooltip" data-bs-placement="bottom"
data-bs-title="Regex Find and Replace w/ Match Groups: $1, $2, etc."></i>
</div>

<div class="input-group">
<span class="input-group-text">Find</span>
<input id="reFind" type="text" class="form-control" placeholder="Find" aria-label="Find">
<span class="input-group-text">Replace</span>
<input id="reReplace" type="text" class="form-control" placeholder="Replace" aria-label="Replace">
<button id="reExecute" class="btn btn-outline-warning" type="button">Execute</button>
<button id="reReset" class="btn btn-outline-danger" type="button">Reset</button>
<div class="input-group">
<span class="input-group-text">Find</span>
<input id="reFind" name="reFind" type="text" class="form-control" placeholder="Find" aria-label="Find">
<span class="input-group-text">Replace</span>
<input id="reReplace" name="reReplace" type="text" class="form-control" placeholder="Replace" aria-label="Replace">
<button class="btn btn-outline-warning" type="submit">Execute</button>
<button id="reReset" class="btn btn-outline-danger" type="button">Reset</button>
</div>
</div>
</div>
</form>

<div class="table-wrapper">
<table id="links-table" class="table table-sm table-striped table-hover small w-100" data-counter="links-count">
Expand Down
25 changes: 16 additions & 9 deletions src/js/links.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { openURL, textFileDownload } from './exports.js'

window.addEventListener('keydown', handleKeyboard)
document.addEventListener('DOMContentLoaded', initLinks)
document.getElementById('reExecute').addEventListener('click', reExecuteClick)
document.getElementById('findReplace').addEventListener('submit', findReplace)
document.getElementById('reReset').addEventListener('click', reResetClick)
document
.querySelectorAll('.copy-links')
Expand All @@ -15,6 +15,9 @@ document
document
.querySelectorAll('.open-in-tabs')
.forEach((el) => el.addEventListener('click', openLinksClick))
document
.querySelectorAll('[data-bs-toggle="tooltip"]')
.forEach((el) => new bootstrap.Tooltip(el))

const urlParams = new URLSearchParams(window.location.search)

Expand Down Expand Up @@ -310,20 +313,24 @@ function dtVisibility(e, settings, column, state) {
}

/**
* Execute Regex Click Callback
* @function reExecuteClick
* @param {MouseEvent} event
* Find and Replace Submit Callback
* @function findReplace
* @param {SubmitEvent} event
*/
async function reExecuteClick(event) {
console.debug('reExecuteClick:', event)
async function findReplace(event) {
console.debug('findReplace:', event)
event.preventDefault()
const { options } = await chrome.storage.sync.get(['options'])
const find = document.getElementById('reFind').value
const replace = document.getElementById('reReplace').value
// const find = document.getElementById('reFind').value
const find = event.target.elements.reFind.value
// const replace = document.getElementById('reReplace').value
const replace = event.target.elements.reReplace.value
console.debug('find:', find)
console.debug('replace:', replace)
const re = new RegExp(find, options.flags)
console.debug('re:', re)
const type = document.querySelector('input[name="reType"]:checked').value
// const type = document.querySelector('input[name="reType"]:checked').value
const type = event.target.elements.reType.value
console.debug('type:', type)
const links = document.getElementById('links-body').querySelectorAll('a')
for (const link of links) {
Expand Down

0 comments on commit d6fdabb

Please sign in to comment.