MODX Community

Emo replacing existing classes on links

I’m using the emo extra to obfuscate e-mail addresses on my website but it looks like it’s replacing all existing classes on the a-tag with emo_address. Is this intented behaviour?

// template code:
<a class="button icon fa-envelope-o" href="mailto:[[+email]]">[[+email]]</a>

// frontend output:
<a class="emo_address" href="mailto:example@mail.com">example@mail.com</a>

This obviously makes styling a little difficult…

MODX 2.7.3-pl

I think you need to wrap the links you don’t want including in the below:

<!-- emo-exclude --> and <!-- /emo-exclude -->

Well, I don’t want those emails to be exluded, as they are email addresses displayed in the front-end. But I would like the links to retain the classes I gave them.

Maybe you could wrap your links in a span tag with your own classes or do something similar:

<span class="button icon fa-envelope-o"><a href="mailto:[[+email]]">[[+email]]</a></span>

Otherwise you have to change the code of the extra. Replace these lines in emo.class.php with something like this:

//extract own classes
$classes = '';
if(preg_match('/class=\"([^"]+)/iu', $matches[0], $class_match)) {
	$classes = ' ' . $class_match[1];
}

// Create html of the true link
$trueLink = '<a class="emo_address' . $classes . '" href="mailto:' . $matches[1] . '">' .
	htmlspecialchars_decode(htmlentities($matches[2], ENT_NOQUOTES, 'UTF-8'), ENT_NOQUOTES) .
	'</a>';

Looks like emo is replacing the whole <a> with a hardcoded class, so yes i guess its intended.

Maybe you could save the old classes and adding them in after replacing the link. I dont really know how this extra works so forgive me if im wrong.

https://github.com/Jako/emo/blob/90c8148f414f579463cab208eb6ef8f174a82f21/source/js/emo.js#L35

// Decrypt all email addresses
function emo_replace() {
    for (var i = 1; i < emo_addresses.length; i++) {
        var id = '_emoaddrId' + i;
        var elem = document.getElementById(id);
        if (elem) {
            if (elem.firstChild) {
                // Save old classes here?
                elem.removeChild(elem.firstChild);
            }
            elem.innerHTML = decrypt_string(i);
            // Add old classes here?
        }
    }

EDIT: @halftrainedharry was faster and i guess works better :slight_smile:

1 Like

Thank you all for your inputs! @halftrainedharry 's version works great and I think would be a great addition to the extra in a future version @jako :wink:

I have added this to the package. Thanks!

But it would help, if those improvements would lead directly to a pull request in the extra repository.

1 Like

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.