Bitcointalk Keep Caret Visible

[Halifat]

I normally use mobile phone to navigate around the forum but anytime I come to make post or make a reply I find it difficult to figure out some things when making my post or reply.

The challenge i normally faced when typing in the reply box, I realized that anytime I'm typing the cursor normally get out of my view especially if the post is long, and as for me I normally zoom the reply box because if I decided to leave it like that i can't be able to see clearly, so I decided to make a tools for myself so that the cursor will be visible even though I zoom the reply box.


What it's does?

It eliminate stress of scrolling side(left /right) with your hand just to see what you're typing and also it makes you focus directly to what you are typing.


How it works?
Get a tempermonkey extension and insert the userscript below.

Code:

// ==UserScript==
// @name         Bitcointalk Keep Caret Visible v2
// @namespace    https://bitcointalk.org/
// @version      2.0
// @description  Keeps the caret visible inside Bitcointalk textareas and scrolls the page to keep the active editor in view.
// @match        https://bitcointalk.org/*
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function () {
    'use strict';

    const CONFIG = {
        textareaMarginLines: 2,
        pageMarginPx: 120,
        smoothPageScroll: true,
        smoothBehavior: 'smooth',
        debug: false
    };

    function log(...args) {
        if (CONFIG.debug) console.log('[BTT Caret]', ...args);
    }

    function isVisible(el) {
        if (!el || !el.isConnected) return false;
        const style = getComputedStyle(el);
        return style.display !== 'none' &&
               style.visibility !== 'hidden' &&
               el.offsetParent !== null;
    }

    function toPxNumber(value, fallback = 0) {
        const n = parseFloat(value);
        return Number.isFinite(n) ? n : fallback;
    }

    function getLineHeight(style) {
        let lh = toPxNumber(style.lineHeight, NaN);
        if (!Number.isFinite(lh)) {
            const fs = toPxNumber(style.fontSize, 16);
            lh = fs * 1.2;
        }
        return lh;
    }

    function copyTextareaStyles(src, dst) {
        const style = getComputedStyle(src);
        const props = [
            'boxSizing',
            'width',
            'height',
            'overflowX',
            'overflowY',

            'borderTopWidth',
            'borderRightWidth',
            'borderBottomWidth',
            'borderLeftWidth',
            'borderStyle',

            'paddingTop',
            'paddingRight',
            'paddingBottom',
            'paddingLeft',

            'fontStyle',
            'fontVariant',
            'fontWeight',
            'fontStretch',
            'fontSize',
            'lineHeight',
            'fontFamily',

            'textAlign',
            'textTransform',
            'textIndent',
            'textDecoration',
            'letterSpacing',
            'wordSpacing',

            'tabSize',
            'MozTabSize',
            'whiteSpace',
            'wordBreak',
            'overflowWrap'
        ];

        props.forEach((prop) => {
            dst.style[prop] = style[prop];
        });

        return style;
    }

    function getCaretCoordinates(textarea, position) {
        const mirror = document.createElement('div');
        const span = document.createElement('span');
        const style = copyTextareaStyles(textarea, mirror);

        mirror.style.position = 'absolute';
        mirror.style.visibility = 'hidden';
        mirror.style.left = '-999999px';
        mirror.style.top = '0';
        mirror.style.whiteSpace = 'pre-wrap';
        mirror.style.wordWrap = 'break-word';
        mirror.style.overflow = 'hidden';

        const value = textarea.value;
        const before = value.slice(0, position);
        const after = value.slice(position);

        mirror.textContent = before;
        span.textContent = after.length ? after[0] : '\u200b';
        mirror.appendChild(span);
        document.body.appendChild(mirror);

        const paddingTop = toPxNumber(style.paddingTop);
        const paddingLeft = toPxNumber(style.paddingLeft);

        const coords = {
            top: span.offsetTop + paddingTop,
            left: span.offsetLeft + paddingLeft
        };

        document.body.removeChild(mirror);
        return coords;
    }

    function keepCaretVisibleInTextarea(textarea) {
        if (!textarea || textarea.selectionStart == null || !isVisible(textarea)) return;

        const style = getComputedStyle(textarea);
        const lineHeight = getLineHeight(style);
        const margin = lineHeight * CONFIG.textareaMarginLines;

        const caret = getCaretCoordinates(textarea, textarea.selectionStart);
        const visibleTop = textarea.scrollTop;
        const visibleBottom = visibleTop + textarea.clientHeight;

        const caretTop = caret.top;
        const caretBottom = caretTop + lineHeight;

        let nextScrollTop = textarea.scrollTop;

        if (caretBottom + margin > visibleBottom) {
            nextScrollTop = Math.max(0, caretBottom - textarea.clientHeight + margin);
        } else if (caretTop - margin < visibleTop) {
            nextScrollTop = Math.max(0, caretTop - margin);
        }

        if (Math.abs(nextScrollTop - textarea.scrollTop) > 1) {
            textarea.scrollTop = nextScrollTop;
        }
    }

    function getViewportTop() {
        return window.pageYOffset || document.documentElement.scrollTop || 0;
    }

    function getViewportBottom() {
        return getViewportTop() + window.innerHeight;
    }

    function scrollPageToKeepTextareaVisible(textarea) {
        if (!textarea || !isVisible(textarea)) return;

        const rect = textarea.getBoundingClientRect();
        const

I stand to be corrected, and I'm open for any new knowledge.

[Upgrade00]

You should show how the extension will be displayed if a user activates it. It's usually not easy for users to trust extensions even if they are posted by very reputable members. If it's not posted by such member and there's no way to see how it will be useful, you will get even less users. Give a detailed graphic of how it will look and help fix the problem you highlighted, even though it's not one that has bothered me much.

I stand to be corrected, and I'm open for any new knowledge.

There's nothing to be corrected for. If it works for you that's all that matters.

[Ambatman]

I haven't really noticed it in PC
Since I'm majorly online here with my mobile
I don't know it feels a little refreshing that there's a problem only unique to PCs.
But like was stated upstairs
Many are skeptical towards extensions (well I am many) and have never used any.

[PX-Z]

You should show how the extension will be displayed if a user activates it. It's usually not easy for users to trust extensions even if they are posted by very reputable members. If it's not posted by such member and there's no way to see how it will be useful, you will get even less users. Give a detailed graphic of how it will look and help fix the problem you highlighted, even though it's not one that has bothered me much.

Yes, at least a screenshot to see how it looks in the browser for people to try because, its easy to describe additional function/feature using a set of images or even just a single image. So OP, it's better to update the OP with image/s.

[Halifat]

You should show how the extension will be displayed if a user activates it. It's usually not easy for users to trust extensions even if they are posted by very reputable members. If it's not posted by such member and there's no way to see how it will be useful, you will get even less users. Give a detailed graphic of how it will look and help fix the problem you highlighted, even though it's not one that has bothered me much.

Yes, at least a screenshot to see how it looks in the browser for people to try because, its easy to describe additional function/feature using a set of images or even just a single image. So OP, it's better to update the OP with image/s.

I have put the sample of how it works, if you look at it closely you can see it is automatically moving sideways which was my aim, so I will be happy if you try it and tell me how you feel when using it.

[mikel_012]

Is it not better if you make a script to make the post writing text box the size of the screen so when you are typing it breaks the line? This way you see everything you are writing instead of having the text area go out of the screen to the right?

Maybe it will help more than just moving the screen to show the cursor.

[SeriouslyGiveaway]

I normally use mobile phone to navigate around the forum but anytime I come to make post or make a reply I find it difficult to figure out some things when making my post or reply.

The challenge i normally faced when typing in the reply box, I realized that anytime I'm typing the cursor normally get out of my view especially if the post is long, and as for me I normally zoom the reply box because if I decided to leave it like that i can't be able to see clearly, so I decided to make a tools for myself so that the cursor will be visible even though I zoom the reply box.

I don't really see this inconvenience but I agree that using mobile for typing is always inconvenient and annoying. It's harder than typing with keyboard on computer or on laptop but it's basic issue of mobile devices without keyboards but with small screens.

From your short video to illustrates how the extension works, I don't really see it is helpful (I am not offending you as I know you spent time for it, and I appreciate that) and somewhat I see it is annoying too. When you're typing, the long line shifts to the right while the left side is missing / trimming, it's really hard to know what I was typing in earliest words of the post.

[Halifat]

Is it not better if you make a script to make the post writing text box the size of the screen so when you are typing it breaks the line? This way you see everything you are writing instead of having the text area go out of the screen to the right?

Maybe it will help more than just moving the screen to show the cursor.

I definitely understand all what you have saying, it is called Auto-fit or Reflow zoom, thank you so much for calling my attention to this notice. This features is found in UC Browser and honestly it was amazing, I will put this in my top list.

I don't really see this inconvenience but I agree that using mobile for typing is always inconvenient and annoying. It's harder than typing with keyboard on computer or on laptop but it's basic issue of mobile devices without keyboards but with small screens.

From your short video to illustrates how the extension works, I don't really see it is helpful (I am not offending you as I know you spent time for it, and I appreciate that) and somewhat I see it is annoying too. When you're typing, the long line shifts to the right while the left side is missing / trimming, it's really hard to know what I was typing in earliest words of the post.

I like your comment because this will motivate me to think deep whenever I'm doing something new for public to access, but i like to disagree with what you said about not seeing what you have written previously, we always speak out from our mind not copying from somewhere else and I expected that if something is coming out from your mind definitely you can be able to reverse it with any difficulties.

[r_victory]

Any tool that makes our lives easier here on the forum is welcome. I avoid using the forum on my smartphone; the experience is terrible, and the possibility of making a mistake when posting is high. I prefer to use my computer for this, but for those who don't have one, this tool will be very useful.

[Mia Chloe]

~snip

Well a fine feasible code is definitely worth some appreciation. But on a realistic scale I don't think I might ever be needing this although it's feasible. When I'm on my PC I can literally see the entire forum as well as navigate without any difficulties. For mobile it's almost same but the difference is just viewpoint.

So long I can manage that view point it will be fine. Some browsers infact are able to adapt to the view point on your device and considering the light weight of SMF forums it's really spot on.

[IjawMan]

I do not commonly get that experience of cursor disappearing from view while typing and maybe it is the browser  am using, and with a desktop site mode the screen view fits in completely on all sides for complete visibility of course.

You took still solves a problem for those users who may be having similar experience as you and they might just find it useful aside that some users are too sensitive about extension modules.

[alegotardo]

Is it not better if you make a script to make the post writing text box the size of the screen so when you are typing it breaks the line? This way you see everything you are writing instead of having the text area go out of the screen to the right?

Maybe it will help more than just moving the screen to show the cursor.

That is what I thought too!
The feature developed by @Halifat is very useful and might make sense when we need to make posts without breaking the lines too much, for example when working with tables, line breaks really only make things more difficult, so it is better to have a fairly wide editing field.

But, I confess that on mobile phones nobody should be messing with tables, so reducing the width of the field seems to be the most sensible thing to do.

In some browsers its possible to redirect the field sizes by double-click at the lower right corner, I do not know why this does npt work natively here in bitcointalk, but an auto size script to screen width would be very useful too.

[Amphenomenon]

I haven't really noticed it in PC
Since I'm majorly online here with my mobile
I don't know it feels a little refreshing that there's a problem only unique to PCs.
But like was stated upstairs
Many are skeptical towards extensions (well I am many) and have never used any.

Actually, Op was referring to a issue on mobile and not PC.
I quite understand the difficult of what Op is saying, been there quite a number of times and it is also among the reason I don't reply to some certain post until I am on my pc but at the moment I'm not planning on using an extension, it  has been long since I used one in fact but this is great between.

[hugeblack]

I haven't tried logging into the forum using a phone, but just browsing gives you a headache, let alone writing long posts. I hope someone finds this useful.
Since you mentioned phone, are there other browsers (besides Kiwi or Yandex) that support user-script?

[BitcoinGirl.Club]

Safe one bro 😏 where’s that PowerGlove don hiding at though?

I haven't tried logging into the forum using a phone, but just browsing gives you a headache, let alone writing long posts. I hope someone finds this useful.
Since you mentioned phone, are there other browsers (besides Kiwi or Yandex) that support user-script?

Bruv, if the forum weren’t moving like it’s stuck in 2009 and actually worked on mobile, I wouldn’t be ghosting for bare long 😤 I’d still be active and causing some madness here, trust me.

[Zoomic]

Is it not better if you make a script to make the post writing text box the size of the screen so when you are typing it breaks the line? This way you see everything you are writing instead of having the text area go out of the screen to the right?

Maybe it will help more than just moving the screen to show the cursor.

If this is achievable, that is the only solution needed and it will be a big improvement or replacement of what Op has done. Op please look into this suggestion, it will make the life of the mobile users easier. Naturally, reading lengthy lines feels frustrating to the eyes, breaking the text to fit the mobile screen or the text box size will be a big improvement.

I haven't tried logging into the forum using a phone, but just browsing gives you a headache, let alone writing long posts. I hope someone finds this useful.
Since you mentioned phone, are there other browsers (besides Kiwi or Yandex) that support user-script?

I have had the experience of posting with the mobile phone. I used it for a long term and felt comfortable with it. But when I finally shifted to using a laptop, posting with mobile now feels like a big punishment.

[TypoTonic]

The challenge i normally faced when typing in the reply box, I realized that anytime I'm typing the cursor normally get out of my view especially if the post is long, and as for me I normally zoom the reply box because if I decided to leave it like that i can't be able to see clearly, so I decided to make a tools for myself so that the cursor will be visible even though I zoom the reply box.

If you can't see the text clearly, why not just increase the font size instead? I think it's a much simpler solution. You will no longer have to zoom because the whole text area would be visible. Maybe you can try it and see if it works for you, just change the font size according to your preference.

Code:

// ==UserScript==
// @name         Bitcointalk Bigger Textarea Font Size
// @namespace    https://bitcointalk.org/
// @version      1.0
// @description  Increase the text size inside Bitcointalk post textarea.
// @match        https://bitcointalk.org/index.php?action=post*
// @match        https://bitcointalk.org/index.php?action=pm;sa=send*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const textarea = document.querySelector('textarea.editor');

    textarea.style.fontSize = '26px';
    textarea.style.lineHeight = '1.6';
})();

[DYING_S0UL]

You should show how the extension will be displayed if a user activates it. It's usually not easy for users to trust extensions even if they are posted by very reputable members. If it's not posted by such member and there's no way to see how it will be useful, you will get even less users. Give a detailed graphic of how it will look and help fix the problem you highlighted, even though it's not one that has bothered me much.

Yes, at least a screenshot to see how it looks in the browser for people to try because, its easy to describe additional function/feature using a set of images or even just a single image. So OP, it's better to update the OP with image/s.

I'm confused as hell as what difficulty OP is referring to, I have no idea..I never had any problems writing posts through mobile view, even with or without the use of extension. It doesn't matter. The texts were clearly visible for me. There is no zoom in zoom out needed for me. So I'm unable to understand what OP is facing. Moreover, using extensions like Bitcointalk mobile quickly fixed several problems related to navigation on mobile devices.

This is my view, through a mobile device...

[PX-Z]

I haven't tried logging into the forum using a phone, but just browsing gives you a headache, let alone writing long posts. I hope someone finds this useful.

This is a case to case bases, most users who are used to use mobile browsers won't have problem pinching to zoom in and out or swipe left or right to see some hidden text since textarea box won't fit on the screen.

Since you mentioned phone, are there other browsers (besides Kiwi or Yandex) that support user-script?

Edge have support fox extensions as well, though not every extension available, but extension for userscripts like tampermonkey can be used there.

[Upgrade00]

This is my view, through a mobile device...

Are you using any scripts or extensions now? When I'm on mobile it is displayed as desktop by default, the icons there are spread out in each line on my browser, including the emojis, and the text field is not designed to fit the screen.

Here is how it looks for me on mobile;



I have to zoom in to the particular part of the text I am typing at and then the screen moves with it as I type more, even returning back when I get to the end of a line, so it's not a lot of zooming in and out, except I'm looking for something particiular in the text.