Split of js to comply with chrome
This commit is contained in:
parent
8a07f0efad
commit
78af0c8c72
64
index.html
64
index.html
|
@ -6,7 +6,7 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>LinkyLinky</title>
|
<title>LinkyLinky</title>
|
||||||
<link rel="stylesheet" href="https://tailwindui.com/css/components-v2.css">
|
<link rel="stylesheet" href="./tailwind.css">
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
min-width: 300px;
|
min-width: 300px;
|
||||||
|
@ -19,20 +19,19 @@
|
||||||
<div class="w-full max-w-xs mx-auto">
|
<div class="w-full max-w-xs mx-auto">
|
||||||
<h1 class="text-lg text-center">LinkyLinky</h1>
|
<h1 class="text-lg text-center">LinkyLinky</h1>
|
||||||
<div>
|
<div>
|
||||||
<label for="company_website" class="block text-sm font-medium text-gray-700">
|
<div id="shortcode_container">
|
||||||
Custom Shorturl
|
<div class="mt-1 flex rounded-md shadow-sm">
|
||||||
</label>
|
<span
|
||||||
<div class="mt-1 flex rounded-md shadow-sm">
|
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">
|
||||||
<span
|
https://kauf.es/
|
||||||
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">
|
</span>
|
||||||
https://kauf.es/
|
<input type="text" name="shortcode" id="shortcode"
|
||||||
</span>
|
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"
|
||||||
<input type="text" name="shortcode" id="shortcode"
|
placeholder="custom url" />
|
||||||
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"
|
</div>
|
||||||
placeholder="custom url" />
|
|
||||||
</div>
|
</div>
|
||||||
<div class="hidden" name="shorturl_container" id="shorturl_container">
|
<div class="hidden" name="shorturl_container" id="shorturl_container">
|
||||||
<div class="inline-flex" id="shorturl_copy" data-clipboard-target="#shorturl">
|
<div class="inline-flex w-full" id="shorturl_copy" data-clipboard-target="#shorturl">
|
||||||
<p name="shorturl" id="shorturl" class:bg-green-200={copied}
|
<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">
|
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
|
link
|
||||||
|
@ -50,45 +49,20 @@
|
||||||
Click to copy url to keyboard
|
Click to copy url to keyboard
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" onclick="createUrl()"
|
<button type="button" id="create"
|
||||||
class="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>
|
||||||
|
<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>
|
</div>
|
||||||
|
|
||||||
<script src="./clipboard.min.js"></script>
|
<script src="./clipboard.min.js"></script>
|
||||||
<script>
|
<script src="./main.js"></script>
|
||||||
//Clipboard stuff
|
|
||||||
const baseurl = "https://kauft.es";
|
|
||||||
const btn = document.getElementById("shorturl_copy");
|
|
||||||
const clipboard = new ClipboardJS(btn);
|
|
||||||
|
|
||||||
// Calls the api to create a new short url
|
|
||||||
function createUrl() {
|
|
||||||
shorturl = {
|
|
||||||
target: window.location.href,
|
|
||||||
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 => res.json())
|
|
||||||
.then(res => {
|
|
||||||
document.getElementById("shorturl").innerText=res.url;
|
|
||||||
document.getElementById("shorturl_container").className="";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
|
@ -0,0 +1,49 @@
|
||||||
|
//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('Notification title', {
|
||||||
|
icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
|
||||||
|
body: 'Hey there! You\'ve been notified!',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById("create").onclick = createUrl;
|
||||||
|
// Calls the api to create a new short url
|
||||||
|
function createUrl() {
|
||||||
|
shorturl = {
|
||||||
|
target: window.location.href,
|
||||||
|
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 => res.json())
|
||||||
|
.then(res => {
|
||||||
|
document.getElementById("shorturl").innerText = res.url;
|
||||||
|
document.getElementById("shorturl_container").className = "";
|
||||||
|
document.getElementById("shortcode_container").className = "hidden";
|
||||||
|
document.getElementById("create").classList.add("hidden");
|
||||||
|
document.getElementById("reset").classList.remove("hidden");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("reset").onclick = reset;
|
||||||
|
function reset() {
|
||||||
|
document.getElementById("shorturl").innerText = "";
|
||||||
|
document.getElementById("shortcode_container").className = "";
|
||||||
|
document.getElementById("shorturl_container").className = "hidden";
|
||||||
|
document.getElementById("reset").classList.add("hidden");
|
||||||
|
document.getElementById("create").classList.remove("hidden");
|
||||||
|
}
|
Loading…
Reference in New Issue