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

Updated project structure

Browse Source
This commit is contained in:
Nicolai Ort
2021-08-17 20:15:53 +02:00
parent bbdabcb362
commit b1758b9a00
9 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/clipboard.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
src/icon_128.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

107
src/index.html Normal file
View File

@@ -0,0 +1,107 @@
<!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>LinkyLinky</title>
<link rel="stylesheet" href="./tmp.css">
<style>
body {
min-width: 400px;
}
</style>
</head>
<body>
<div class="p-4 flex items-center justify-center bg-white">
<div class="w-full mx-auto">
<h1 class="text-lg text-center">LinkyLinky</h1>
<div class="rounded-md bg-red-100 p-4 hidden" id="error_container">
<div class="flex">
<div class="flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-600" viewBox="0 0 20 20"
fill="currentColor">
<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 class="ml-3">
<p class="text-sm font-medium text-red-800" id="error_text">
</p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button
id="error_dismiss"
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">
<span class="sr-only">Dismiss</span>
<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 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 border rounded-lg w-full px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 bg-gray-50"
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 border-t border-b border-r 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>
<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>
<p class="text-gray-500 text-xs">
Click to copy url to keyboard
</p>
</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>
<script src="./clipboard.min.js"></script>
<script src="./main.js"></script>
</body>
</html>

100
src/main.js Normal file
View File

@@ -0,0 +1,100 @@
//Clipboard stuff
const baseurl = "https://kauft.es";
const btn = document.getElementById("shorturl_copy");
const clipboard = new ClipboardJS(btn);
clipboard.on('success', function (e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
new Notification('Copied Shorturl', {
icon: 'https://git.odit.services/user/avatar/kauft.es/140',
body: `Copied the shorturl to your clipboard: ${e.text}`,
});
});
//Set default url as current tab
chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => {
document.getElementById("target").value = tabs[0].url;
});
// Create button click handler calls the api to create a new short url
document.getElementById("create").onclick = createUrl;
/**
* Calls the api to create a new short url and handels displaying the ui for "created" urls
*/
function createUrl() {
let shorturl = {
target: document.getElementById("target").value,
shortcode: document.getElementById("shortcode").value
};
if (shorturl.shortcode == "" | !shorturl.shortcode) {
delete shorturl.shortcode;
}
fetch(`${baseurl}/api`, {
method: "POST",
body: JSON.stringify(shorturl),
headers: new Headers({
'Content-Type': 'application/json'
})
})
.then(res => {
if (!res.ok) {
handleError(res);
}
else {
res.json()
}
})
.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
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;
/**
* Resets the ui by emtying/resetting all inputs and showing the "default" home ui containers again.
*/
function reset() {
document.getElementById("shorturl").innerText = "";
document.getElementById("shorturl_container").className = "hidden";
document.getElementById("reset").classList.add("hidden");
chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => {
document.getElementById("target").value = tabs[0].url;
document.getElementById("target_container").className = "";
document.getElementById("shortcode_container").className = "";
document.getElementById("create").classList.remove("hidden");
});
}

17
src/manifest.json Normal file
View File

@@ -0,0 +1,17 @@
{
"manifest_version": 2,
"name": "LinkyLinky",
"version": "0.0.1",
"description": "A simple url shortener",
"short_name": "LinkyLinky",
"permissions": [
"tabs",
"notifications"
],
"browser_action": {
"default_popup": "index.html"
},
"icons": {
"128": "icon_128.png"
}
}