HOWTO Lavender: Adding items to the menu on the bottom right

[psychobunny]

If you want to add more menu items to the panel that fades in on the bottom right, this is the code you need:

$('document').ready(function() {
	var panel = $('<div class="panel-body text-center"><i class="fa fa-lightbulb-o fa-2x"></i></div>');
	$('.panel.resizer').append(panel);
	panel.on('click', function() {
		alert('clicked the panel!');
	});	
});

You can stick this in your custom JS section of the ACP, or use via a client-side JS file in your plugin.

[a_5mith]

@psychobunny Hey buddy, this isn't working for me. Appears in the source, but nothing in the faded area.

Hmm, it works if I add it through the console though.

[psychobunny]

I'll admit I only tested it in the console. Weird it doesn't add it if you put it in the custom JS field (cache?) I'll give it a shot myself a bit later and report back

[a_5mith]

@psychobunny Nope, nothing, Doesn't the console add it in the body, whereas the custom js adds it to the head? Or am I talking rubbish?

[psychobunny]

Hey can you wrap the JS with

<script>
//code
</script>

and let me know if it works?

[a_5mith]

@psychobunny Unfortunately not, doing it without just displays the code on page, so I've tried <script> and <script type="text/javascript">, neither of which seem to do much.

[psychobunny]

Yeah so I apologize for not testing my code first (I just used the console and that worked fine for me)

For this case, we need to make sure NodeBB is already fully loaded, so look for the following hook:

<script>
$(window).on('action:widgets.loaded', function() {
    var panel = $('<div class="panel-body text-center"><i class="fa fa-lightbulb-o fa-2x"></i></div>');
    $('.panel.resizer').append(panel);
    panel.on('click', function() {
        alert('clicked the panel!');
    });    
});
</script>

sorry for leading you on a little bit of a wild goose chase

[a_5mith]

@psychobunny Brilliant, works. Now for the actual theme changing part.