Badge classes not applied on Moodle 3.8

[haietza]

The badge classes are not being applied in Moodle 3.8. The alert and typography styes work properly.

[haietza]

The "badge" class is applied, but the additional styling class is not, i.e. "badge-primary". It appears to work when the type is specified as "block", however badge styles in Bootstrap are "inline". Thanks for any help you can provide!

[Kathrin84]

Hello @haietza,

thank you for raising this issue. I've tried to understand what you mean with the classes are not applied.

I've tested the plugin with the following setting:

{
    "title": "Success alert",
    "type": "block",
    "classes": "alert alert-success"
} ,
{
    "title": "Badge primary",
    "type": "inline",
    "classes": "badge badge-primary"
} ,
{
    "title": "Badge pill secondary",
    "type": "inline",
    "classes": "badge badge-pill badge-secondary"
} 

My result looks like this:

The only problem I can see here is that there are no rounded borders but this seems to be a problem of Boost and is not caused by this plugin:
https://tracker.moodle.org/browse/MDL-62786

Could you give more precise information on your setup and provide some steps to reproduce.

Thanks and best, Kathrin

[haietza]

Hi @Kathrin84,
The Styles settings we have are:

{
"title": "Badge primary",
"type": "inline",
"classes": "badge badge-primary",
"preview": true
},{
"title": "Badge warning",
"type": "inline",
"classes": "badge badge-warning",
"preview": true
}

When applied to text in the editor, the HTML is:
<div><span class="badge">Badge primary</span></div>
<div><span class="badge">Badge warning</span></div>

The badge-primary and badge-warning classes are not applied to the code.

The result looks like this:

We are using version v3.7-r2 of the plugin with Moodle 3.8.1+ (Build: 20200130) with the Boost theme.

If it is just a setting on our end, any help you can provide would be most appreciated!

[Kathrin84]

Hi @haietza,

thank you very much for the quick response and further information.

I've changed my settings and used the ones you wrote in your comment and also here everything works as expected in my instance:

The classes are applied correctly.

The corresponding setting in the plugin:

{
    "title": "Success alert",
    "type": "block",
    "classes": "alert alert-success"
},
{
"title": "Badge primary",
"type": "inline",
"classes": "badge badge-primary",
"preview": true
},
{
"title": "Badge warning",
"type": "inline",
"classes": "badge badge-warning",
"preview": true
}

I'm using plugin version v3.7-r2 (2019092601) on Moodle 3.8.1+ (Build: 20200207) with theme Boost.

I've got only a little bit newer Moodle version. I don't assume that this should be the cause but to be sure maybe you could update your Moodle instance to the 20200207 build?

[haietza]

@Kathrin84 I'm not sure how it is working for you :( I'm still having problems. I have a local instance running Moodle 20200130 with version 2019092601 of the plugin and it still will not apply the second class. I also have a Moodle instance with no other plugins installed (thinking maybe that was an issue) on version 20200124 and still no joy.

[Kathrin84]

Sorry to come back to you so late. I had to do some other stuff in the meantime.
We still cannot reproduce this, however some more thoughts:

• Did you try to type the rules by hand and don't copy and paste them? Maybe there is some special character which makes some problems?
• Did you try to purge the caches?
• Did you try to alter the order and put the badge-warning before the badge-primary?

[haietza]

@Kathrin84 Yes, I had tried all those cases but I went and tried them again on a new site in a new course. This site has the latest version of Moodle 3.8 and the latest version of the plugin as well. There is something causing the badge-primary class to NOT be applied. I tried to debug the code to see where this occurs but was unable to locate it so far. Can you tell me where that class is actually applied to the content and I can try to debug it on my end? Thank you!

[Kathrin84]

Hi @haietza,

thanks for trying all the things out. It's sad that non of them was the cause...
It's quite mysterious as we simply cannot reproduce this...

Regarding your question:
The place where the styles are applied / changed should be here:
https://github.com/moodleuulm/moodle-atto_styles/blob/master/yui/src/button/js/button.js#L109

[haietza]

@Kathrin84 Thank you for the code reference! When I step through and debug the JS, it applies the styles correctly (not sure how/why!). This discovery did cause me to do something I should have done from the start; try it in a different browser. It works fine in Chrome and Safari; it is not working in Firefox (on a Mac). I know Firefox has some higher security standards, so perhaps that is causing the JS to not finish/work properly?

[Kathrin84]

Hi @haietza,
this is interesting to hear! I'm also working on a Mac and the browsers I use are Safari and Chrome. I'll try this out myself and will discuss it with my colleague.

[davidscotson]

I noticed this problem as well, also on Firefox on Mac.

I tried it with 4 classes, .one .two .three and .four and noticed that it only added .one. If I then use it again then .one gets removed and .two .three .four get added.

The code seems to use a toggleclass so on the second go it's behaving exactly as it should toggling all 4 classes correctly.

Still investigating to see if I can narrow it down further.

In the meantime, I think a workaround will be to add single semantic classes to the Atto plugin like .customstyleforintrotext and then in the theme CSS to map that to whatever visual styles we want rather than add multiple standard bootstrap classes like bg-primary text-danger or whatever. This should help with content upgrades as we can change all uses of the Atto tool, even after they've been saved into the DB. And if we want a new styles we can just add a new classname.