Replacing Cog with FontAwesome Icon

[Alanna 🥀🖤]

trinityblair-test.boards.net/

FontAwesome recently updated so it uses SVG instead, meh, so the normal script I use to replace the COG icon on profiles and posts isn't working anymore?

Posts: <script>
$('.post-options.button').addClass('fas fa-cog"');
$('.post-options.button').text('');
$('.post-options.button').removeClass('button status');
</script>

Conversations: <script>
$('.message-options.button').addClass('fas fa-cog"');
$('.message-options.button').text('');
$('.message-options.button').removeClass('img');
</script>

Profiles: <script>
$('#options-container.button').addClass('fas fa-cog');
$('#options-container.button').text('');
$('#options-container.button').removeClass('options-container button');
</script>

[Alanna 🥀🖤]

Bump?

[Chris]

Mar 11, 2018 19:19:43 GMT -8 @khristian said:

trinityblair-test.boards.net/

FontAwesome recently updated so it uses SVG instead, meh, so the normal script I use to replace the COG icon on profiles and posts isn't working anymore?

Posts: <script>
$('.post-options.button').addClass('fas fa-cog"');
$('.post-options.button').text('');
$('.post-options.button').removeClass('button status');
</script>

Conversations: <script>
$('.message-options.button').addClass('fas fa-cog"');
$('.message-options.button').text('');
$('.message-options.button').removeClass('img');
</script>

Profiles: <script>
$('#options-container.button').addClass('fas fa-cog');
$('#options-container.button').text('');
$('#options-container.button').removeClass('options-container button');
</script>

I would first try to get rid of the typo in the script:

$('.post-options.button').addClass('fas fa-cog"');

If I dynamically edit the script to remove the typo during page load then the cog icon appears

    

[Alanna 🥀🖤]

Oops. Well, I have the icon appearing as well before too, but it wasn't clickable either?

[Chris]

It operates normally for me, can you try in an alternate browser or in incognito mode to see if it is clickable for you then?

[Alanna 🥀🖤]

Mar 22, 2018 21:30:35 GMT -8 Chris said:

It operates normally for me, can you try in an alternate browser or in incognito mode to see if it is clickable for you then?

I do not see it like that... I see the actual FontAwesome icon seen in your previous screenshot. AND it is not clickable.

[Chris]

Ahh my bad, I forgot to permit communication with the CDN on that session!

Yeah that particular button is dynamically created at load time unlike the other static buttons so guests for example will see one set of menu options while an admin would see a broader permissions sensitive set plus that menu requires javascript to operate. This means at the time your script is running that button is actually empty and has yet to be populated by the Proboards library.

Also with the choice to use SVG the actual element is replaced by an <SVG> element rather than a pseudo element like before meaning you would be replacing the button and any events that came with it. Instead we should be targeting the status so the parent button remains with its click event intact

Try the following script (not easily tested until I can see it running on the page without having to undo the effect of the original script):

<script>
$('.options_menu').last().on('menucreate', function(ev){
$(' .status', ev.target.nextSibling).addClass('fas fa-cog')
.text('').next().hide()
})
</script>

It should theoretically work for posts, conversations and profile cogs but I would need to see it running in place to determine and tweak.



Presentation props such as margin, padding etc. are obviously determined by any applicable CSS you may currently have in place.

[Alanna 🥀🖤]

Chris, eek, anyway it won't target the pop up list as well and just target the icon?

[Chris]

Mar 25, 2018 15:37:50 GMT -8 @khristian said:

Chris , eek, anyway it won't target the pop up list as well and just target the icon?

I'm not quite sure I'm following you, the icon is the trigger for the menu. The reason it was not functional before is because font awesome was replacing the trigger with its own <svg> element and that new trigger was just for show and not really connected to the firing pin.

The last script targets the menu because that is what will give notification that Proboards has finished creating the menu so we can then step in and change what Proboards just created on the fly, the menu itself is not modified, only used as a means  of getting to the button once the menu has been created and all the pieces have been tied in a neat bundle ripe for modification.

[Alanna 🥀🖤]

Mar 25, 2018 23:45:06 GMT -8 Chris said:

Mar 25, 2018 15:37:50 GMT -8 @khristian said:

Chris , eek, anyway it won't target the pop up list as well and just target the icon?

I'm not quite sure I'm following you, the icon is the trigger for the menu. The reason it was not functional before is because font awesome was replacing the trigger with its own

Nvm, I'll figure it out.

[Chris]

Figure what out?

I've already given you the script and made no claims of intellectual property so why the ruse?
Use it and make your copyright claims but don't insult me with some made up problem where you can then justify the need for a derivative.

[Alanna 🥀🖤]

Mar 26, 2018 22:45:53 GMT -8 Chris said:

Figure what out?

I've already given you the script and made no claims of intellectual property so why the ruse?
Use it and make your copyright claims but don't insult me with some made up problem where you can then justify the need for a derivative.

Woah, hold up. Why the defense? I was going to explain my issue but realized it's just a CSS issue and I can figure it out on my own, nothing to do with the script.

I just don't want the menu pop up to take the CSS of the icons and that's probably my fault and not the script, which was why I said nvm.

Please- don't assume I'm being a bitch... because I'm naturally a nice person unless given a reason otherwise.

Going back in the posts I see that you mentioned this already which I apologize, I literally have zero free time now and multitask everything which causes me to miss things. I also noticed you seemed annoyed from the beginning like I wasn't smart enough to know script tags went around the script... harsh.