Compare commits

...

9 Commits

2 changed files with 22 additions and 7 deletions

View File

@ -9,16 +9,23 @@
<link rel="stylesheet" href="./tailwind.css"> <link rel="stylesheet" href="./tailwind.css">
<style> <style>
body { body {
min-width: 300px; min-width: 400px;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="p-8 flex items-center justify-center bg-white"> <div class="p-4 flex items-center justify-center bg-white">
<div class="w-full max-w-xs 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>
<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 id="shortcode_container">
<div class="mt-1 flex rounded-md shadow-sm"> <div class="mt-1 flex rounded-md shadow-sm">
<span <span
@ -49,7 +56,7 @@
Click to copy url to keyboard Click to copy url to keyboard
</p> </p>
</div> </div>
<button type="button" id="create" <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"> 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 Create
</button> </button>

14
main.js
View File

@ -11,12 +11,16 @@ clipboard.on('success', function (e) {
}); });
}); });
//Set default url
chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => {
document.getElementById("target").value = tabs[0].url;
});
// 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;
function createUrl() { function createUrl() {
chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => {
let shorturl = { let shorturl = {
target: tabs[0].url, target: document.getElementById("target").value,
shortcode: document.getElementById("shortcode").value shortcode: document.getElementById("shortcode").value
}; };
@ -35,11 +39,11 @@ function createUrl() {
.then(res => { .then(res => {
document.getElementById("shorturl").innerText = res.url; document.getElementById("shorturl").innerText = res.url;
document.getElementById("shorturl_container").className = ""; document.getElementById("shorturl_container").className = "";
document.getElementById("target_container").className = "hidden";
document.getElementById("shortcode_container").className = "hidden"; document.getElementById("shortcode_container").className = "hidden";
document.getElementById("create").classList.add("hidden"); document.getElementById("create").classList.add("hidden");
document.getElementById("reset").classList.remove("hidden"); document.getElementById("reset").classList.remove("hidden");
}); });
});
} }
@ -47,8 +51,12 @@ function createUrl() {
document.getElementById("reset").onclick = reset; document.getElementById("reset").onclick = reset;
function reset() { function reset() {
document.getElementById("shorturl").innerText = ""; document.getElementById("shorturl").innerText = "";
document.getElementById("target_container").className = "";
document.getElementById("shortcode_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"); document.getElementById("create").classList.remove("hidden");
chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => {
document.getElementById("target").value = tabs[0].url;
});
} }