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

NodeBB Plugins
  • #1

    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.

  • #2

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

  • #3

    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

  • #4

    @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? 😆

  • #5

    Hey can you wrap the JS with

    <script>
    //code
    </script>
    

    and let me know if it works?

  • #6

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

  • #7

    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 🙂

  • #8

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


Suggested Topics


| | | |