popup-timer/script.js

// Picture-in-picture
document.getElementById("pip-enabled").checked = pipEnabled();
document.getElementById("pip-enabled").oninput = function(event) {
	setPipEnabled(event.target.checked);
}

// Open new window when clicking create
document.getElementById("create").onclick = function(event) {
	if (pipEnabled()) {
		event.target.disabled = true;

		openPipWindow(createLink("popup"), 250, 100).then(function() {
			event.target.disabled = false;
		});

		return;
	}

	var popup = window.open(
		createLink("popup"),
		"PopupTimer" + Date.now(),
		"popup,width=250,height=100,menubar=no,toolbar=no,location=no,status=no,resizable=no,scrollbars=no"
	);

	// Probably not going to work on any modern browser but worth a try
	popup.onblur = function() {
		popup.focus();
	}

};

// When clicking Create bookmark
document.getElementById("bookmark").onclick = function(event) {
	if (event.target.classList.contains("disabled")) return;

	// Some older browsers include built-in functions for adding a bookmark, attempt to use this if user didn't perform shift click
	if (!event.shiftKey) {

		var link = createLink("link");
		var title = document.getElementById("name").value;

		// Internet explorer
		if (window.external && typeof window.external.AddFavorite === "function") {

			window.external.AddFavorite(link, title);
			showBookmarkAdded();
			return;

			// Old Firefox, SeaMonkey
		} else if (window.sidebar && typeof window.sidebar.addPanel === "function") {

			window.sidebar.addPanel(title, link, "");
			showBookmarkAdded();
			return;

		}

	}

	// Show bookmark instructions in new tab
	window.open(
		createLink("bookmark"),
		"_blank",
		""
	);

}

// Show a green "Bookmark added" message for a second
function showBookmarkAdded() {

	var bookmarkBtn = document.getElementById("bookmark");
	bookmarkBtn.innerHTML = "<i class='fas fa-check'></i> <b>Bookmark added</b>";
	bookmarkBtn.style.color = "#66BB6A";
	bookmarkBtn.classList.add("disabled");

	setTimeout(function() {

		bookmarkBtn.innerText = "Create bookmark";
		bookmarkBtn.style.color = "inherit";
		bookmarkBtn.classList.remove("disabled");

	}, 1000);

}

// When clicking Timer/Stopwatch
[].slice.call(document.querySelectorAll("#popup-type td")).forEach(function(elem) {
	elem.onclick = function(event) {

		var elem = event.target;
		if (elem.classList.contains("selected")) return;
		elem.classList.add("selected");

		switch (elem.id) {
			case "timer":
				document.getElementById("stopwatch").classList.remove("selected");
				document.getElementById("input-timer").style.display = "block";
				document.getElementById("name").value = "Timer";
				break;
			case "stopwatch":
				document.getElementById("timer").classList.remove("selected");
				document.getElementById("input-timer").style.display = "none";
				document.getElementById("name").value = "Stopwatch";
				break;
		}

		document.getElementById("input-common").style.display = "block";
		document.getElementById("advanced").style.display = "block";
		document.getElementById("welcome").style.display = "none";
		document.getElementById("pip").style.display = pipSupported() ? "block" : "none";

		var linkElem = document.getElementById("link");
		linkElem.innerText = createLink("link");
		linkElem.style.display = "inline-block";

		document.getElementById("bookmark-type").innerText = elem.id;

	}
});

// Disable buttons on invalid input
[].slice.call(document.getElementsByTagName("#input-timer input, #input-common input")).forEach(function(input) {
	input.oninput = function(event) {

		var createBtn = document.getElementById("create");
		var bookmarkBtn = document.getElementById("bookmark");
		var isInvalid = document.querySelectorAll("input:invalid").length > 0;

		if (isInvalid) {
			createBtn.disabled = true;
			bookmarkBtn.classList.add("disabled");
		} else {
			createBtn.disabled = false;
			bookmarkBtn.classList.remove("disabled");
			document.getElementById("link").innerText = createLink("link");
		}

	}
});

// Copy link to clipboard when clicked
document.getElementById("link").onclick = function() {

	var link = createLink("link");
	var linkElem = document.getElementById("link");

	// Catch is called both on promise rejection (insufficient permissons) and if the function doesn't exist
	try {

		navigator.clipboard.writeText(link);
		linkShowMessage("Copied to clipboard!", "#66BB6A");

	} catch(e) {
		try {

			// Alternatively, just select the text and copy it
			var range = document.createRange();
			range.setStart(linkElem, 0);
			range.setEnd(linkElem, 1);

			var selection = window.getSelection();
			selection.removeAllRanges();
			selection.addRange(range);

			document.execCommand("copy");

			linkShowMessage("Copied to clipboard!", "#66BB6A");

		} catch(e) {
			// Browser doesn't support copying
			console.error(e);
			linkShowMessage("Couldn't copy link :(", "#EF5350");
		}
	}

}

// Displays a message where the link is for one second
function linkShowMessage(message, color) {

	var linkElem = document.getElementById("link");

	linkElem.style.backgroundColor = color;
	linkElem.style.width = linkElem.offsetWidth + "px";
	linkElem.style.color = "white";
	linkElem.style.fontFamily = "helvetica, arial, sans-serif";
	linkElem.style.fontWeight = "bold";
	linkElem.innerText = message;

	setTimeout(function() {
		linkElem.style.backgroundColor = "#E0E0E0";
		linkElem.style.color = "black";
		linkElem.style.fontFamily = "'Jetbrains Mono', monospace";
		linkElem.style.width = "auto";
		linkElem.style.fontWeight = "normal";
		linkElem.innerText = createLink("link");
	}, 1000);

}

function createLink(type) {

	// Get user input
	var input = {};
	["hours", "minutes", "seconds", "name"].forEach(function(name) {
		input[name] = document.getElementById(name).value;
	});
	["autostart", "beep"].forEach(function(name) {
		input[name] = !!document.getElementById(name).checked;
	});
	if (document.getElementById("timer").classList.contains("selected")) input.type = "timer";
	else input.type = "stopwatch";

	// Create URL
	var url = location.protocol + "//" + location.host + "/" + type + "?type=" + input.type + "&name=" + encodeURIComponent(input.name) + "&autostart=" + input.autostart;
	if (input.type === "timer") url += "&h=" + input.hours + "&m=" + input.minutes + "&s=" + input.seconds + "&beep=" + input.beep;
	return url;

}