BlurryFlurry · February 23, 2025 10:59
diff --git a/texthooker.html b/texthooker.html
 <html>
 <head>
 <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">
 <title>Texthooker</title>
 <style type="text/css">
 body {
    background-color: #202020;
    color: #BCBCBC;
    font-size: 1.5em;
    font-weight: 400;
    line-height: 150%;
    margin: 10% 10% 20% 10%;
    font-family: "Noto Serif JP", "Meiryo", serif;
 }

 .container {
    position: fixed;
    top: 3px;
    right: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
 }

 #counter {
    background-color: rgba(25, 25, 25, 0.8);
    color: #9d9d9d;
    font-size: 0.4em;
    line-height: 100%;
    padding: 5px 8px;
    border-radius: 3px;
 }

 #remove_button {
    background-color: rgba(25, 25, 25, 0.8);
    color: #9d9d9d;
    font-size: 0.4em;
    line-height: 100%;
    padding: 5px 8px;
    border-radius: 3px;
    cursor: pointer;
 }

 #remove_button:hover {
    background-color: rgba(50, 50, 50, 0.8);
 }
 </style>
 </head>
 <body>

 <!-- Container for the counter and remove button -->
 <div class="container">
    <div id="remove_button" title="Remove last line">x</div>
    <div id="counter" title="No. of characters / No. of lines">0 / 0</div>
 </div>

 <!-- jQuery and custom script -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
 <script>
 $(document).ready(function() {
    let oldlines = 0;
    let chars = 0;

    // MutationObserver to detect new lines
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length) {
                const lines = document.getElementsByTagName('p').length;
                const isnew = lines - oldlines;
                if (isnew > 0) {
                    const newline = document.getElementsByTagName('p')[lines - 1].innerHTML;
                    const linechars = newline.length;
                    const newchars = chars + linechars;

                    // Update the counter
                    jQuery('#counter').text(
                        `${newchars.toLocaleString()} / ${lines.toLocaleString()}`
                    );

                    oldlines = lines;
                    chars = newchars;

                    // Auto-scroll logic
                    const LEEWAY = 200;
                    const b = document.body;
                    const offset = b.scrollHeight - b.offsetHeight;
                    const scrollPos = b.scrollTop + offset;
                    const scrollBottom = b.scrollHeight - (b.clientHeight + offset);
                    if (scrollPos >= scrollBottom - LEEWAY) {
                        window.scrollTo(0, document.body.scrollHeight);
                    }
                }
            }
        });
    });
    observer.observe(document.body, { childList: true, subtree: true });

    // Remove last line functionality
    document.getElementById("remove_button").addEventListener("click", function() {
        const remove_lines = document.getElementsByTagName('p').length;
        if (remove_lines > 0) {
            const lastLine = document.getElementsByTagName('p')[remove_lines - 1];
            const lastlen = lastLine.innerHTML.length;
            $(lastLine).remove();

            chars -= lastlen;
            oldlines -= 1;

            // Update the counter
            jQuery('#counter').text(
                `${chars.toLocaleString()} / ${oldlines.toLocaleString()}`
            );
        }
    });
 });
 </script>
 </body>
 </html>
	<html>
	<head>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">
	<title>Texthooker</title>
	<style type="text/css">
	body {
	background-color: #202020;
	color: #BCBCBC;
	font-size: 1.5em;
	font-weight: 400;
	line-height: 150%;
	margin: 10% 10% 20% 10%;
	font-family: "Noto Serif JP", "Meiryo", serif;
	}

	.container {
	position: fixed;
	top: 3px;
	right: 5px;
	display: flex;
	align-items: center;
	gap: 10px;
	}

	#counter {
	background-color: rgba(25, 25, 25, 0.8);
	color: #9d9d9d;
	font-size: 0.4em;
	line-height: 100%;
	padding: 5px 8px;
	border-radius: 3px;
	}

	#remove_button {
	background-color: rgba(25, 25, 25, 0.8);
	color: #9d9d9d;
	font-size: 0.4em;
	line-height: 100%;
	padding: 5px 8px;
	border-radius: 3px;
	cursor: pointer;
	}

	#remove_button:hover {
	background-color: rgba(50, 50, 50, 0.8);
	}
	</style>
	</head>
	<body>

	<!-- Container for the counter and remove button -->
	<div class="container">
	<div id="remove_button" title="Remove last line">x</div>
	<div id="counter" title="No. of characters / No. of lines">0 / 0</div>
	</div>

	<!-- jQuery and custom script -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
	<script>
	$(document).ready(function() {
	let oldlines = 0;
	let chars = 0;

	// MutationObserver to detect new lines
	const observer = new MutationObserver(function(mutations) {
	mutations.forEach(function(mutation) {
	if (mutation.addedNodes.length) {
	const lines = document.getElementsByTagName('p').length;
	const isnew = lines - oldlines;
	if (isnew > 0) {
	const newline = document.getElementsByTagName('p')[lines - 1].innerHTML;
	const linechars = newline.length;
	const newchars = chars + linechars;

	// Update the counter
	jQuery('#counter').text(
	`${newchars.toLocaleString()} / ${lines.toLocaleString()}`
	);

	oldlines = lines;
	chars = newchars;

	// Auto-scroll logic
	const LEEWAY = 200;
	const b = document.body;
	const offset = b.scrollHeight - b.offsetHeight;
	const scrollPos = b.scrollTop + offset;
	const scrollBottom = b.scrollHeight - (b.clientHeight + offset);
	if (scrollPos >= scrollBottom - LEEWAY) {
	window.scrollTo(0, document.body.scrollHeight);
	}
	}
	}
	});
	});
	observer.observe(document.body, { childList: true, subtree: true });

	// Remove last line functionality
	document.getElementById("remove_button").addEventListener("click", function() {
	const remove_lines = document.getElementsByTagName('p').length;
	if (remove_lines > 0) {
	const lastLine = document.getElementsByTagName('p')[remove_lines - 1];
	const lastlen = lastLine.innerHTML.length;
	$(lastLine).remove();

	chars -= lastlen;
	oldlines -= 1;

	// Update the counter
	jQuery('#counter').text(
	`${chars.toLocaleString()} / ${oldlines.toLocaleString()}`
	);
	}
	});
	});
	</script>
	</body>
	</html>