Emo replacing existing classes on links

vibedesign · October 20, 2020, 9:08am

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

paulp · October 20, 2020, 9:29am

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

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

vibedesign · October 20, 2020, 9:34am

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.

halftrainedharry · October 20, 2020, 10:31am

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>';

bahbvee · October 20, 2020, 10:39am

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

github.com

Jako/emo/blob/90c8148f414f579463cab208eb6ef8f174a82f21/core/components/emo/model/emo/emo.class.php#L183


}

// rawurlencode/rawurldecode a possible subject/body
$matches[1] = preg_replace_callback(
    '!(.*\?(subject|body)=)([^\?]*)!iu',
    function ($m) {
        return $m[1] . rawurldecode(rawurlencode($m[3]));
    }, $matches[1]
);

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

// Did we use the same link before?
$key = array_search($trueLink, $this->options['recentLinks']);

// Encrypt the complete link or use previously encrypted link
$crypted = ($key === false) ? $this->encodeBase64($trueLink) : $this->options['addrArray'][$key + 1];

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

vibedesign · October 22, 2020, 9:52am

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

jako · October 22, 2020, 1:58pm

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.

system · October 24, 2020, 1:58pm

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”.