-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
222 additions
and
86 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,65 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Quick Link</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <script src="./background.js"></script> | ||
| <script defer src="./popup.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h2 class="title">Q-Links</h2> | ||
| <p>Add a new link to local storage</p> | ||
|
|
||
| <p>Add a new link to storage</p> | ||
|
|
||
| <!-- Create Form --> | ||
| <form id="user-input" method="POST" enctype="multipart/form-data"> | ||
| <input type="text" name="quick-link-key" placeholder="Quick Text" required/><br/> | ||
| <input type="text" name="quick-link-url" placeholder="Destination URL" required/><br/> | ||
| <input type="text" name="quick-link-key" placeholder="Quick Text" required /><br /> | ||
| <input type="text" name="quick-link-url" placeholder="Destination URL" required /><br /> | ||
| <div id="alert-success"> | ||
| <p>Q-link added successfully.</p> | ||
| </div> | ||
| <div id="alert-error"> | ||
| <p>Something went wrong</p> | ||
| </div> | ||
| <button type="submit" id="submit-button">Create</button> | ||
| </form> | ||
| <br/> | ||
| <!-- <a href="./data.html">Edit</a><br/> --> | ||
| <a id="get-links">View Storage</a><br/> | ||
| </form> | ||
|
|
||
| <!-- Storage Container --> | ||
| <br /> | ||
| <a id="get-links">View Storage</a><br /> | ||
| <div id="storage-container"></div> | ||
| <br/> | ||
| <small><a href="https://stackoverflow.com/a/37105645/12916568" target="_blank">Click here</a> for more details on when stored data is deleted.</small> | ||
|
|
||
| <!-- Edit Form --> | ||
| <form id="edit-form" method="POST" style="display: none;"> | ||
| <input type="text" name="edit-link-key" placeholder="New Quick Text" required /><br /> | ||
| <input type="text" name="edit-link-url" placeholder="New Destination URL" required /><br /> | ||
| <button type="submit" id="edit-button">Save</button> | ||
| <button type="button" id="cancel-edit-button">Cancel</button> | ||
| </form> | ||
|
|
||
| <!-- Link Template --> | ||
| <template id="link-template"> | ||
| <div class="link-item"> | ||
| <div class="top"> | ||
| <span class="link-key"></span> | ||
| <div> | ||
| <button class="edit-button">Edit</button> | ||
| <button class="delete-button">Delete</button> | ||
| </div> | ||
| </div> | ||
| <span class="link-url"></span> | ||
| </div> | ||
| </template> | ||
|
|
||
| <br /> | ||
| <small> | ||
| <a href="https://stackoverflow.com/a/37105645/12916568" target="_blank">Click here</a> for more details on | ||
| when stored data is deleted. | ||
| </small> | ||
|
|
||
| <script src="popup.js"></script> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,51 +1,107 @@ | ||
| const form = document.getElementById("user-input"); | ||
| const alert_success = document.getElementById("alert-success"); | ||
| const alert_error = document.getElementById("alert-error"); | ||
| const storage = document.getElementById("storage-container"); | ||
| storage.style.display = 'none'; | ||
|
|
||
| form.addEventListener("submit", (event) => { | ||
| event.preventDefault(); | ||
| const data = []; | ||
| const key = form.elements["quick-link-key"].value; | ||
| const url = form.elements["quick-link-url"].value; | ||
| data.push(key); | ||
| data.push(url); | ||
| chrome.runtime.sendMessage({ type: 'form_submission', data } , (response) => { | ||
| console.log(response.message); | ||
| }); | ||
| alert_success.style.display = 'block'; | ||
| document.getElementById("user-input").reset(); | ||
| document.addEventListener('DOMContentLoaded', () => { | ||
| const form = document.getElementById("user-input"); | ||
| const alert_success = document.getElementById("alert-success"); | ||
| const storage = document.getElementById("storage-container"); | ||
| const editForm = document.getElementById("edit-form"); | ||
| const editButton = document.getElementById("edit-button"); | ||
| const cancelEditButton = document.getElementById("cancel-edit-button"); | ||
|
|
||
| storage.style.display = 'none'; | ||
| storage.innerHTML = ""; | ||
| }); | ||
| editForm.style.display = 'none'; | ||
|
|
||
| const getLinks = document.getElementById('get-links'); | ||
| getLinks.addEventListener('click', getQuickLinks); | ||
| form.addEventListener("submit", (event) => { | ||
| event.preventDefault(); | ||
| const data = []; | ||
| const key = form.elements["quick-link-key"].value; | ||
| const url = form.elements["quick-link-url"].value; | ||
| data.push(key); | ||
| data.push(url); | ||
| chrome.runtime.sendMessage({ type: 'form_submission', data }, (response) => { | ||
| console.log(response.message); | ||
| }); | ||
| alert_success.style.display = 'block'; | ||
| document.getElementById("user-input").reset(); | ||
| storage.style.display = 'none'; | ||
| storage.innerHTML = ""; | ||
| getLinks.innerHTML = "View Links"; | ||
| }); | ||
|
|
||
| const getLinks = document.getElementById('get-links'); | ||
| getLinks.addEventListener('click', getQuickLinks); | ||
|
|
||
| function getQuickLinks() { | ||
| if (getLinks.innerHTML == "Hide Links") { | ||
| getLinks.innerHTML = "View Links"; | ||
| storage.style.display != 'none'; | ||
| storage.innerHTML = ""; | ||
| } else { | ||
| getLinks.innerHTML = "Hide Links"; | ||
| chrome.storage.sync.get(['redirect_link'], (result) => { | ||
| if (storage.style.display != 'none') { | ||
| storage.innerHTML = ""; | ||
| } | ||
| for (let key in result.redirect_link) { | ||
| const link = document.createElement('p'); | ||
| const bold = document.createElement('span'); | ||
| const breakLine = document.createElement('br'); | ||
| bold.textContent = key; | ||
| link.textContent = result.redirect_link[key]; | ||
| link.prepend(breakLine); | ||
| link.prepend(bold); | ||
| storage.appendChild(link); | ||
| } | ||
| storage.style.display = 'block'; | ||
| cancelEditButton.addEventListener('click', () => { | ||
| editForm.style.display = 'none'; | ||
| storage.style.display = 'block'; | ||
| }); | ||
|
|
||
|
|
||
| function getQuickLinks() { | ||
| if (getLinks.innerHTML == "Hide Links") { | ||
| getLinks.innerHTML = "View Links"; | ||
| storage.style.display != 'none'; | ||
| storage.innerHTML = ""; | ||
|
|
||
| } else { | ||
| getLinks.innerHTML = "Hide Links"; | ||
| chrome.storage.sync.get(['redirect_link'], (result) => { | ||
| if (storage.style.display != 'none') { | ||
| storage.innerHTML = ""; | ||
| } | ||
| for (let key in result.redirect_link) { | ||
| const template = document.getElementById('link-template').content.cloneNode(true); | ||
| const linkItem = template.querySelector('.link-item'); | ||
| template.querySelector('.link-key').textContent = key; | ||
| template.querySelector('.link-url').textContent = result.redirect_link[key]; | ||
|
|
||
| const deleteButton = template.querySelector('.delete-button'); | ||
| deleteButton.addEventListener('click', () => deleteLink(key)); | ||
| deleteButton.addEventListener('mouseover', () => linkItem.classList.add('strike-through')); | ||
| deleteButton.addEventListener('mouseout', () => linkItem.classList.remove('strike-through')); | ||
|
|
||
| template.querySelector('.edit-button').addEventListener('click', () => showEditForm(key, result.redirect_link[key])); | ||
| storage.appendChild(template); | ||
| } | ||
| storage.style.display = 'block'; | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| function showEditForm(key, url) { | ||
| storage.style.display = 'none'; | ||
| editForm.style.display = 'block'; | ||
| editForm.elements["edit-link-key"].value = key; | ||
| editForm.elements["edit-link-url"].value = url; | ||
| editButton.onclick = (event) => { | ||
| event.preventDefault(); | ||
| editLink(key); | ||
| }; | ||
| } | ||
|
|
||
| function editLink(oldKey) { | ||
| const newKey = editForm.elements["edit-link-key"].value; | ||
| const newUrl = editForm.elements["edit-link-url"].value; | ||
| if (newKey && newUrl) { | ||
| chrome.runtime.sendMessage({ | ||
| type: 'edit_submission', | ||
| oldKey: oldKey, | ||
| newKey: newKey, | ||
| newUrl: newUrl | ||
| }, (response) => { | ||
| console.log(response.message); | ||
| editForm.style.display = 'none'; | ||
| storage.style.display = 'block'; | ||
| getQuickLinks(); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| function deleteLink(key) { | ||
| chrome.runtime.sendMessage({ | ||
| type: 'delete_link', | ||
| key: key | ||
| }, (response) => { | ||
| console.log(response.message); | ||
| getQuickLinks(); | ||
| }); | ||
| } | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.