Select all or Copy button in a box

Get help developing custom BBCodes or request one.
Myng
Registered User
Posts: 12
Joined: Sat Sep 16, 2023 3:56 pm

Re: Select all or Copy button in a box

Post by Myng »

Mixlight - eStriKe wrote: Fri Sep 22, 2023 12:02 pm ok , try this :

Code: Select all

<div style="padding: 10px; border: 1px solid #000000; background-color: #131a24; margin: 10px 0; margin-left: 30px; margin-right: 30px;">
    <div class="box-container">
        <div class="code-header">
            <button class="select-button" onclick="selectBoxText(this)">Alles auswählen</button>
        </div>
        <box id="box">{TEXT}</box>
    </div>
</div>
<script>
    // Call the conversion function and selectBoxText when the page loads
    window.onload = function() {
        convertListTagsToUL();
        selectBoxText(document.querySelector('.select-button'));
    }

    function selectBoxText(button) {
        const boxElement = button.parentElement.parentElement.querySelector('box');
        const range = document.createRange();
        range.selectNodeContents(boxElement);

        const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    }

    function convertListTagsToUL() {
        const boxElement = document.querySelector('box');
        if (boxElement) {
            const text = boxElement.innerHTML;
            const htmlWithLists = text.replace(/\[list\]([\s\S]*?)\[\/list\]/g, '<ul>$1</ul>');
            boxElement.innerHTML = htmlWithLists;
        }
    }
</script>

result :

test uuu.PNG
It works wonderfully. Thank you for your patience and time spent on this!
User avatar
Mixlight - eStriKe
Registered User
Posts: 61
Joined: Fri Aug 10, 2018 8:47 am

Re: Select all or Copy button in a box

Post by Mixlight - eStriKe »

You welcome , for those who want here is the copy code version of it :

BBcode Usage :

Code: Select all

[php]{TEXT}[/php]
HTML replacement :

Code: Select all

<div class="box-container">
    <div class="code-header">
        <span class="code-title">Code:</span>
        <button class="copy-button" onclick="copyToClipboard(this)">Copy this code</button>
    </div>
    <box id="box">{TEXT}</box>
</div>
<script>
    // Call the conversion function and copyToClipboard when the page loads
    window.onload = function() {
        convertListTagsToUL();
    }

    function copyToClipboard(button) {
        const boxElement = button.parentElement.parentElement.querySelector('box');
        const range = document.createRange();
        range.selectNodeContents(boxElement);

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

        // Copy the selected text to the clipboard
        document.execCommand('copy');

        // Deselect the text
        selection.removeAllRanges();

        // Update the button text
        button.innerText = 'Code Copied!';
        setTimeout(() => {
            button.innerText = 'Copy this code';
        }, 1500);
    }

    function convertListTagsToUL() {
        const boxElement = document.querySelector('box');
        if (boxElement) {
            const text = boxElement.innerHTML;
            const htmlWithLists = text.replace(/\[list\]([\s\S]*?)\[\/list\]/g, '<ul>$1</ul>');
            boxElement.innerHTML = htmlWithLists;
        }
    }
</script>
Now to make it look nice go to /public_html/forum/styles/your-style/theme/stylesheet.css and add at the bottom of the document this

Code: Select all

  /* CSS for the box container */
    .box-container {
        border: 1px solid rgb(138, 130, 118);
        background-color: rgb(16, 21, 27);
        margin: 10px 0;
        margin-left: 30px;
        margin-right: 30px;
        border-radius: 5px;
        padding: 10px;
    }

    /* CSS for the code header */
    .code-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    /* CSS for the code title */
    .code-title {
        font-weight: bold;
        color: #ffffff;
        margin-right: 10px;
    }

    /* CSS for the copy button */
    .copy-button {
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
        border-radius: 3px;
    }

    /* CSS for the code box */
    box {
        display: block;
        background-color: #282828;
        color: #c0c0c0;
        border: 1px solid #444;
        border-radius: 5px;
        padding: 10px;
        white-space: pre-wrap;
    }
the result :
bbcode nice.PNG
You do not have the required permissions to view the files attached to this post.
User avatar
Sniper_E
Registered User
Posts: 1173
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey

Re: Select all or Copy button in a box

Post by Sniper_E »

Thank you eStriKe for this bbcode it's great. It works just like the [code] bbcode but much better.

Using [code] you click Select all to highlight the code then right click the highlighted code and select copy.
With this bbcode it's just one click and you're off running. Great job man!
And on top of that it will wrap the text on those long lines so you can see all of the codes.

Being it was like the code bbcode I made the bbcode usage: [ccode={SIMPLETEXT}]{TEXT}[/ccode]
Then replaced the html replacement Code: with {SIMPLETEXT} That way I could name the title.

Results from this Impressive bbcode:
Image

See? You programmers out there need us stylist to make your stuff look nice. :D
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:

Return to “Custom BBCode Development and Requests”