Click to Copy 4 Better Frontend Link

The Better Frontend Link Module of Regular Labs provides easy access to the frontend equivalent of the page you're editing (article, category...) and  parent pages of the current item, such as the parent category pages of the article. 

To copy those links for further usage, you can right-click the link, find the correct entry in the context menu and copy the link. Or open the link in a new tab and then copy the link there. Both methods are annoying.

Click-to-copy is one of the main features of the Improved Frontend Links Module.

If you prefer the original version, you can create a template override for the default layout. Most people are familiar with template overrides for the Front-end, but they work in the administrator as well:

• create a folder administrator/templates/atum/html/mod_betterfrontendlink (atum is the default administrator template, replace it if you are using a different one)
• create a file administrator/templates/atum/html/mod_betterfrontendlink/default.php
• copy the code below into that file

<?php

/**
 * 
 * @author     Bram <This email address is being protected from spambots. You need JavaScript enabled to view it.>
 * @copyright  2024  Bram Brambring
 * @license    GNU General Public License version 2 or later
 * 
 * 
 * Click to copy for the Better Frontend Link Module By Peter van Westen from  regularlabs.com Copyright © 2023 Regular Labs All Rights Reserved
 */

defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;

//Load jQuery
HTMLHelper::_('jquery.framework');

// Load the Bootstrap Dropdown
HTMLHelper::_('bootstrap.dropdown', '.dropdown-toggle');


$app = Factory::getApplication();
$doc = $app->getDocument();
$wa = $doc->getWebAssetManager();


$wa->addInlineScript("
$(function() {
    $('span.flcopylink').on('click',flcopylink);

function flcopylink(event) {
    event.preventDefault();
    var href = $(this).data('href');
  if ( href ) {
    navigator.clipboard.writeText(href);
    $(this).addClass('clicked');
    setTimeout(() => {
        $(this).removeClass('clicked');
    },1000
    )
  }
  return false;
  }
});
");


$wa->addInlineStyle("
.flcopylink.clicked  {
   opacity:0.5;
 
 }

 .flcopylink.clicked:before  {
  content:'Copied!';
  margin-right:3px;
  
  }
.flcopylink  {
   cursor:pointer;
   transition:.5s;
}

.flcopylink i {
    margin-left:3px;
}
.flcontainer {
    z-index:999;
}
");

?>
<div class="header-item-content flcontainer">
    <div class="dropdown-toggle d-flex align-items-center ps-0 py-0 rl-webkit-no-appearance" data-bs-toggle="dropdown" type="button">
        <div class="header-item-icon">
            <span class="text-warning icon-angle-down" aria-hidden="true"></span>
        </div>
        <div class="header-item-text">
            <?php echo  Text::_('Frontend'); ?>
        </div>
    </div>
    <div class="dropdown-menu dropdown-menu-end">
        <?php foreach ($links as $link) : ?>
            <a class="dropdown-item" href="/<?php echo $link->url; ?>" target="_blank">
                <span class="text-warning  icon-<?php echo $link->icon ?? 'external-link-alt'; ?>" aria-hidden="true"></span>
                <span class="d-flex justify-content-between w-100">
                    <span><?php echo Text::_($link->name); ?></span>
                    <span title="Click to copy" data-href="<?php echo $link->url; ?>" class="flcopylink badge bg-dark ms-2"><?php echo Text::_($link->type); ?></span>
                </span>
            </a>
        <?php endforeach; ?>
    </div>
</div>