kauft.es/linkylinky-chrome
4
0
Fork 0
Code Issues 2 Pull Requests 1 Projects Releases 6 Wiki Activity

Compare commits

base: kauft.es:bbdabcb362c44007afa66bb3df984e5cd0e1819a
Branches Tags
kauft.es:main
kauft.es:renovate/tailwindcss-3.x-lockfile
kauft.es:0.3.1
kauft.es:0.3.0
kauft.es:0.2.0
kauft.es:0.1.2
kauft.es:0.1.1
kauft.es:0.1.0
..
compare: kauft.es:9d0e64ff24937b2ab4731b6f8a2555635bbdba47
Branches Tags
kauft.es:renovate/tailwindcss-3.x-lockfile
kauft.es:main
kauft.es:0.3.1
kauft.es:0.3.0
kauft.es:0.2.0
kauft.es:0.1.2
kauft.es:0.1.1
kauft.es:0.1.0

No commits in common. "bbdabcb362c44007afa66bb3df984e5cd0e1819a" and "9d0e64ff24937b2ab4731b6f8a2555635bbdba47" have entirely different histories.
bbdabcb362 ... 9d0e64ff24

3 changed files with 69 additions and 140 deletions
Show Stats Expand all files Collapse all files

3
README.md
View File

@ -25,8 +25,7 @@ TODO: -->
- [x] Notify on copy - [x] Notify on copy
- [x] Generate another url - [x] Generate another url
- [ ] Project Logo™ - [ ] Project Logo™
- [x] Basic error handling - [ ] Finalize styling
- [x] Finalize styling
## Credits ## Credits
* ClipboardJS by Zeno Rocha licensed under MIT - Website: https://clipboardjs.com/ - Repo: https://github.com/zenorocha/clipboard.js * ClipboardJS by Zeno Rocha licensed under MIT - Website: https://clipboardjs.com/ - Repo: https://github.com/zenorocha/clipboard.js

112
index.html
View File

@ -18,87 +18,55 @@
<div class="p-4 flex items-center justify-center bg-white"> <div class="p-4 flex items-center justify-center bg-white">
<div class="w-full mx-auto"> <div class="w-full mx-auto">
<h1 class="text-lg text-center">LinkyLinky</h1> <h1 class="text-lg text-center">LinkyLinky</h1>
<div>
<div class="rounded-md bg-red-100 p-4 hidden" id="error_container"> <div id="target_container">
<div class="flex"> <div class="mt-1 flex rounded-md shadow-sm">
<div class="flex-shrink-0"> <input type="url" name="target" id="target" required
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-600" viewBox="0 0 20 20" class="flex-1 min-w-0 block rounded-lg w-full px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300"
fill="currentColor"> placeholder="target url" />
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
clip-rule="evenodd" />
</svg>
</div> </div>
<div class="ml-3"> </div>
<p class="text-sm font-medium text-red-800" id="error_text"> <div id="shortcode_container">
<div class="mt-1 flex rounded-md shadow-sm">
<span
class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
https://kauf.es/
</span>
<input type="text" name="shortcode" id="shortcode"
class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300"
placeholder="custom url" />
</div>
</div>
<div class="hidden" name="shorturl_container" id="shorturl_container">
<div class="inline-flex w-full" id="shorturl_copy" data-clipboard-target="#shorturl">
<p name="shorturl" id="shorturl" class:bg-green-200={copied}
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2">
link
</p> </p>
</div> <div
<div class="ml-auto pl-3"> class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 mt-1 cursor-pointer">
<div class="-mx-1.5 -my-1.5"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<button <path fill="none" d="M0 0h24v24H0z" />
id="error_dismiss" <path fill="currentColor"
class="inline-flex bg-red-100 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600"> d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z" />
<span class="sr-only">Dismiss</span> </svg>
<svg class="h-5 w-5" x-description="Heroicon name: x" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
</div> </div>
</div> </div>
</div> <p class="text-gray-500 text-xs">
</div> Click to copy url to keyboard
<div id="target_container">
<div class="mt-1 flex rounded-md shadow-sm">
<input type="url" name="target" id="target" required
class="flex-1 min-w-0 block rounded-lg w-full px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300"
placeholder="target url" />
</div>
</div>
<div id="shortcode_container">
<div class="mt-1 flex rounded-md shadow-sm">
<span
class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
https://kauf.es/
</span>
<input type="text" name="shortcode" id="shortcode"
class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300"
placeholder="custom url" />
</div>
</div>
<div class="hidden" name="shorturl_container" id="shorturl_container">
<div class="inline-flex w-full" id="shorturl_copy" data-clipboard-target="#shorturl">
<p name="shorturl" id="shorturl" class:bg-green-200={copied}
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2">
link
</p> </p>
<div
class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 mt-1 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z" />
<path fill="currentColor"
d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z" />
</svg>
</div>
</div> </div>
<p class="text-gray-500 text-xs"> <button type="submit" id="create"
Click to copy url to keyboard class="mt-1 w-full items-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
</p> Create
</button>
<button type="button" id="reset"
class="hidden mt-1 w-full items-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Reset
</button>
</div> </div>
<button type="submit" id="create"
class="mt-1 w-full items-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Create
</button>
<button type="button" id="reset"
class="hidden mt-1 w-full items-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Reset
</button>
</div> </div>
</div> </div>
</div>
<script src="./clipboard.min.js"></script> <script src="./clipboard.min.js"></script>
<script src="./main.js"></script> <script src="./main.js"></script>

94
main.js
View File

@ -11,90 +11,52 @@ clipboard.on('success', function (e) {
}); });
}); });
//Set default url as current tab //Set default url
chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => { chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => {
document.getElementById("target").value = tabs[0].url; document.getElementById("target").value = tabs[0].url;
}); });
// Create button click handler calls the api to create a new short url // Calls the api to create a new short url
document.getElementById("create").onclick = createUrl; document.getElementById("create").onclick = createUrl;
/**
* Calls the api to create a new short url and handels displaying the ui for "created" urls
*/
function createUrl() { function createUrl() {
let shorturl = { let shorturl = {
target: document.getElementById("target").value, target: document.getElementById("target").value,
shortcode: document.getElementById("shortcode").value shortcode: document.getElementById("shortcode").value
}; };
if (shorturl.shortcode == "" | !shorturl.shortcode) { if (shorturl.shortcode == "" | !shorturl.shortcode) {
delete shorturl.shortcode; delete shorturl.shortcode;
} }
fetch(`${baseurl}/api`, { fetch(`${baseurl}/api`, {
method: "POST", method: "POST",
body: JSON.stringify(shorturl), body: JSON.stringify(shorturl),
headers: new Headers({ headers: new Headers({
'Content-Type': 'application/json' 'Content-Type': 'application/json'
})
}) })
}) .then(res => res.json())
.then(res => { .then(res => {
if (!res.ok) { document.getElementById("shorturl").innerText = res.url;
handleError(res); document.getElementById("shorturl_container").className = "";
} document.getElementById("target_container").className = "hidden";
else { document.getElementById("shortcode_container").className = "hidden";
res.json() document.getElementById("create").classList.add("hidden");
} document.getElementById("reset").classList.remove("hidden");
}) });
.then(res => {
document.getElementById("shorturl").innerText = res.url;
document.getElementById("shorturl_container").className = "";
document.getElementById("target_container").className = "hidden";
document.getElementById("shortcode_container").className = "hidden";
document.getElementById("create").classList.add("hidden");
document.getElementById("reset").classList.remove("hidden");
});
} }
//Add error dismiss event handler //Resets the UI
document.getElementById("error_dismiss").onclick = () => {
document.getElementById("error_container").classList.add("hidden");
};
/**
* Display alerts for errors (only handling 400 correctly r/n)
* @param {response} res The fetch response object
*/
function handleError(res) {
if (res.status == 400) {
res.text().then((body) => {
document.getElementById("error_text").innerText = body;
document.getElementById("error_container").classList.remove("hidden");
})
}
else {
console.log(res);
document.getElementById("error_text").innerText = "An unknown error occured (see console for more details)";
document.getElementById("error_container").classList.remove("hidden");
}
}
//Add ui reset error handler
document.getElementById("reset").onclick = reset; document.getElementById("reset").onclick = reset;
/**
* Resets the ui by emtying/resetting all inputs and showing the "default" home ui containers again.
*/
function reset() { function reset() {
document.getElementById("shorturl").innerText = ""; document.getElementById("shorturl").innerText = "";
document.getElementById("target_container").className = "";
document.getElementById("shortcode_container").className = "";
document.getElementById("shorturl_container").className = "hidden"; document.getElementById("shorturl_container").className = "hidden";
document.getElementById("reset").classList.add("hidden"); document.getElementById("reset").classList.add("hidden");
document.getElementById("create").classList.remove("hidden");
chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => { chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => {
document.getElementById("target").value = tabs[0].url; document.getElementById("target").value = tabs[0].url;
document.getElementById("target_container").className = "";
document.getElementById("shortcode_container").className = "";
document.getElementById("create").classList.remove("hidden");
}); });
} }