Select content from codebox [phpBB3, PunBB]

As you might know this, by default all codeboxes do not have select all feature so if you want to select full content of it, you need to drag down which is tedious job. With this script you can add a button and select all of the content inside it.

Before click (follow the arrow where to click):


After the click:


How to implement this?

Go to AP > Modules > Javascript management and make a new script. Name it "Select all code in codebox" and for placement choose "In the topics".

Paste this code there and save:

phpBB3

Code:

$(document).ready(function() {
  // Iterate over all .codebox elements to ensure each has its own "Select all" functionality
  $("dl.codebox").each(function() {
    var dtElement = $(this).find("dt");
    
    // Create an anchor element for "Select all"
    var selectAllLink = $("<a>", {
      href: "#",
      text: "Select all",
      css: {
        "margin-left": "10px", // Add some space between "Code:" and "Select all"
        "color": "#a0947e",     // Set the text color
        "float": "right"        // Float the link to the right
      }
    });
    
    // Append the link to the <dt> element
    dtElement.append(selectAllLink);
    
    // Add event listener to handle the "Select all" functionality
    selectAllLink.on("click", function(e) {
      e.preventDefault(); // Prevent default link behavior
      
      // Select the content inside <code> tag within the current <dd>
      var codeElement = $(this).closest("dl.codebox").find("dd code").get(0); // Get the specific <code> tag in this .codebox
      
      // Create a range object
      var range = document.createRange();
      range.selectNodeContents(codeElement);
      
      // Get the current selection and clear any existing selections
      var selection = window.getSelection();
      selection.removeAllRanges();
      
      // Add the new range to the selection
      selection.addRange(range);
    });
  });
});

PunBB

Code:

// Function to select the code content
function selectCode(e) {  
    var doc = document,
        text = $(e).closest("dl").find(".cont_code, code").get(0),
        range, selection;

    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

// Function to initialize the select button
$(function() {
    $("dl.codebox:not(.spoiler, .hidecode) > dd.code, dl.codebox:not(.spoiler, .hidecode) > dd > code")
        .closest("dl")
        .find('dt')
        .append('<span onClick="selectCode(this)" class="selectCode">Select Content</span>');
    
    // Add CSS for the .selectCode span
    const style = document.createElement('style');
    style.innerHTML = `
        span.selectCode {
            float: right;       /* Float to the right */
            margin-right: 20px; /* Space from the right */
            cursor: pointer;    /* Pointer cursor for the clickable span */
        }
    `;
    document.head.appendChild(style);
});

:yeahhh:

There is already a tutorial for that

https://help.forumotion.com/t93456-select-content-button

Niko wrote:There is already a tutorial for that

https://help.forumotion.com/t93456-select-content-button

Oh, I didn't know. Thanks.

As this is already a thing we will lock and trash this topic.

Topic moved to the garbage. Please read our forum rules: ESF General Rules