Changing labels / hiding elements in specific categories


  • GNU/Linux

    I have one specific category in which I wish to change button label "New topic" to "Ask a question". Similar for hiding tag manager. I wish to hide it in this specific category, but I want it visible in all other categories. I managed to hide tag manager in general, but that isn't the solution I'm looking for.


  • Community Rep

    The body tag should have a class for each category. You could use some js in the custom header to change the new topic text:

    <script>
    $(window).on('action:ajaxify.contentLoaded', function(){
      $('.page-category-16 [component="category/post"]').text('Ask a Question')
    })
    </script>
    

    You can use the same class to hide the tags manager in custom css:

    .page-category-16 .tags-container {
      display: "none";
    }
    

  • GNU/Linux

    Great! I didn't noticed body classes until you mentioned it... That made a lot of things easier. :)

    I got stuck at changing placeholder text on composer on specific category.
    I wrote following code into global header:

    <script>
    $(window).on('action:ajaxify.contentLoaded', function(){
     $('input.title.form-control .page-category-480').val("");
    $(".page-category-480 input[placeholder]").attr("placeholder", "This is new text");
    })
    </script> 
    

    Have I missed something or I'm just doing it completely wrong?


  • Community Rep

    This is a bit more difficult. First, you need to use the composer loaded hook. Then, your selector needs to look for the category selector, not the page class, because the composer can load any category from any page. The input selector should look for the title class, not the placeholder property. Finally, the placeholder value needs to update when the category selector changes.

    $(window).on('action:composer.loaded', function(event, data){
      // Get the composer elements.
      var comp = $('#cmp-uuid-' + data.post_uuid);
      var catlist = comp.find('.category-list');
      var title = comp.find('input.title');
    
      if (catlist.length) { // If there's no catlist, then the post is a reply.
        var defaultPlaceholder = title.attr("placeholder");
    
        // Update the placeholder if category is 480, else set it to the default.
        function updatePlaceholder() {
          if (catlist.val() === '480') {
            title.attr("placeholder", "This is new text");
          } else {
            title.attr("placeholder", defaultPlaceholder);
          }
        }
    
        // Update placeholder each time the category changes, and once when loaded.
        catlist.change(updatePlaceholder);
        updatePlaceholder();
      }
    });
    

  • GNU/Linux

    Very helpful answer. Thanks.
    When composer is first opened catlist.val() is null and placeholder is same as default. It works properly when you pick another option and change back to same one. I've modified your code a bit, but now placeholder changes on every category - because catlist.val() is always null, at least initially. I can't seem to find attribute selected on select options or any other way to check which category is selected right now. Any idea how to fix it?

    <script>
    $(window).on('action:composer.loaded', function(event, data){
      // Get the composer elements.
      var comp = $('#cmp-uuid-' + data.post_uuid);
      var catlist = comp.find('.category-list');
      var title = comp.find('input.title');
      
      if (catlist.length) { // If there's no catlist, then the post is a reply.
        var defaultPlaceholder = title.attr("placeholder");
    
        // Update the placeholder if category is 480, else set it to the default.
        function updatePlaceholder() {
          if (catlist.val() === '480' || catlist.val() === null) {
            title.attr("placeholder", "This is new placeholder");
          } else {
            title.attr("placeholder", defaultPlaceholder);
          }
        }
    
        // Update placeholder each time the category changes, and once when loaded.
        catlist.change(updatePlaceholder);
        updatePlaceholder();
      }
    });
    </script>
    

  • Community Rep

    Strange, that script works fine on this forum. Must be an issue that is already fixed on master.


  • GNU/Linux

    Ok, I'll update to latest version and get back with results. Should I first pull 1.x.x branch and then on master or can I directly pull master branch?


Log in to reply
 


Looks like your connection to NodeBB was lost, please wait while we try to reconnect.