How to open composer via clientside script and add category & tags

Tutorials
  • Hey! I called and opened the composer via GET-Params:

    https://nodebb.development.fail/recent?discord=question&tags=javascript,jquery,get,request

    URL is valid, so feel free to test it 🙏
    Open Composer


    • ?discord=question defines category questions
    • &tags=javascript,jquery,get,request tags added to composer as well -> javascript, jquery, get, request

    So: composer is opening automatically if:

    • ?discord=question is available. Also the category Questions is selected automatically. And tag list:
    • javascript,jquery,get,request should also be added automatically.

    But theres ohne thing: I dont have a question actually. 😄

    Bye Bye

    Prototype and Test-Code:

    
    $(window).on('action:ajaxify.end', function(event, data) {
    
        var urlParams = new URLSearchParams(window.location.search); //get all parameters
        var discord = urlParams.get('discord');
        
        var tags = [];
        
        if(tags = urlParams.get('tags')){
            tags = urlParams.get('tags').split(",");
        }
        
        
        
        if(discord){
            var cid;
            
            if(discord == "question"){
                cid = 1;
                app.newTopic(cid, tags);
            }
            
            if(discord == "tutorial"){
                cid = 2;
                app.newTopic(cid, tags);
            }
            
            if(discord == "showroom"){
                cid = 4;
                app.newTopic(cid, tags);
            }
            
            if(discord == "talk"){
                cid = 3;
                app.newTopic(cid, tags);
            }
        }
    	
    });
    

    To open composer use:

    • app.newTopic();

    To define category or tags use params of function:

    • app.newTopic(cid, tags);
      ->
      app.newTopic(1, ["javascript", "jquery", "get", "request"]);

    You can also use this snippet to add additional buttons to create new topic on specific category or tags. 👍

    Bye

  • @dogs what does discord have to do with it? I tried using that link with different values and URL of course on my site, still didn't work. I'm sure it works for you, what am I missing?

  • @dunlix @dogs I see that I am dumb. I should have read whole post before replying, Lol. I need to add custom JS when I will use this.

  • @dunlix yeah you should! 😂

    what does discord have to do with it? I tried using that link with different values and URL of course on my site, still didn't work. I'm sure it works for you, what am I missing?

    To be honest: Nothing.

    I am building a plugin for Discord integration..So the variable names are just placeholders if you want so.

    The important part is at the end of my main post.

    I hope that you find a slick way to use it for your community maybe. 🙂 👍


Suggested Topics


  • 8 Votes
    1 Posts
    170 Views

    Since NodeBB 1.18.6 it is possible to create dropdowns in the navigation (https://github.com/NodeBB/NodeBB/issues/9967). Before 1.18.6 to accomplish this you would have to use nodebb-plugin-customize to modify the menu template or use javascript to inject the markup after page load.

    In this tutorial I will show you how to create a dropdown navigation item that replaces the default categories link with a dropdown. The final result will look like this:

    category-dropdown.gif

    First thing to do is to turn the navigation item into a dropdown, to do this head over to yourforum.com/admin/settings/navigation, select the categories navigation item and toggle the dropdown option.

    category-dropdown-1.gif

    Once this is done you can use the text area below the toggle to add your markup. To create a simple dropdown you would just add a list of dropdown items like so:

    <li><a class="dropdown-item" href="/categories">All</a></li> <li><a class="dropdown-item" href="/category/2/general-discussion">General Discussion</a></li>

    Since you can input html here you can create custom dropdowns. To achieve the same dropdown as the first gif use the below html code, no css is necessary.

    <li><a class="dropdown-item" href="/categories">All</a></li> <li class="dropdown-divider"> <li><a class="dropdown-item" href="/category/2/general-discussion">General Discussion</a></li> <li class="d-flex flex-column"> <a class="dropdown-item" href="/category/3/nodebb-development">NodeBB Development</a> <div class="d-flex flex-column px-4"> <div class="d-flex align-items-center gap-1"> <i class="fa fa-fw fa-caret-right text-primary"></i> <a class="btn-ghost-sm text-sm text-nowrap" href="/category/13/nodebb-blog">NodeBB Blog</a> </div> <div class="d-flex align-items-center gap-1"> <i class="fa fa-fw fa-caret-right text-primary"></i> <a class="btn-ghost-sm text-sm text-nowrap" href="/category/5/feature-requests">Feature Requests</a> </div> <div class="d-flex align-items-center gap-1"> <i class="fa fa-fw fa-caret-right text-primary"></i> <a class="btn-ghost-sm text-sm text-nowrap" href="/category/6/bug-reports">Bug Reports</a> </div> <div class="d-flex align-items-center gap-1"> <i class="fa fa-fw fa-caret-right text-primary"></i> <a class="btn-ghost-sm text-sm text-nowrap" href="https://explore.transifex.com/nodebb/nodebb/">NodeBB Localization</a> </div> </div> </li> <li><a class="dropdown-item" href="/category/7/nodebb-plugins">NodeBB Plugins</a></li> <li><a class="dropdown-item" href="#">...add more as needed...</a></li>

    Modify the links to match your forum categories. To create dividers between sections you can use <li class="dropdown-divider">

    Now you can navigate your categories without going to the home/categories page. 🎊

  • 0 Votes
    5 Posts
    620 Views

    @dogs this worked a treat - thanks. For anyone else who might be looking for something similar, here's a simple scroll to top function that you can place into your Custom JS

    // Scroll to top button $(window).on('action:ajaxify.end', function(data) { var btn = $('#btt'); $(window).scroll(function() { if ($(window).scrollTop() > 300) { btn.addClass('show'); } else { btn.removeClass('show'); } }); btn.on('click', function(e) { e.preventDefault(); $('html, body').animate({scrollTop:0}, '300'); }); })

    Then place this into your Custom Header

    <a id="btt"><i class="fas fa-chevron-up"></i></a>

    Obviously, you would need to provide some CSS to style this. An example of this can be found on https://phenomlab.com

  • Docker & Docker-compose

    Tutorials
    6 Votes
    7 Posts
    2k Views

    @Austin-Benesh
    Would be great to have compose und files / images!
    Is it configurable by container environment or (external / mapped) files are needed?

  • 0 Votes
    7 Posts
    2k Views

    @baris nope, on both

  • 1 Votes
    2 Posts
    2k Views