Some users complaining about "Topic similar to" window

I have had several members (including my primary moderator) expressing some frustration over the “Your topic is similar to” feature. I am guessing some of this is due to screen sizes and the div for this is partially obscuring things, etc.

eb46e0667e60ac73d827a70bc4ab6f16114685fe

I was thinking… what if you just allowed an option for users to turn off this feature?

3 Likes

And yes I am familiar with the option to increase the minimum text query value to something higher. I have already set it to 25 characters but I think the feature could be useful providing it’s not ticking off more members than it’s helping.

2 Likes

Turn the setting max_similar_results to 0? Or juste decrease the value.

2 Likes

That would effectively turn it off, but that’s not what I was asking. The best fix would be for users who don’t like the feature to be able to suppress it via cookie or account setting.

This can be done quite easily.

You can look at this component’s code and adapt it to hide elements with CSS (target .similar-topics) in users’ preferences settings. That’s exactly what I’ve done on https://unicyclist.com/, where users have a setting to hide the donation icon in the top right of the header.

image

image


Basically, the only change I made to the original plugin is that I store the setting in a cookie (I want to remind my user to donate each year for the servers’ fees).

Here’s my own theme component code:

<script type="text/discourse-plugin" version="0.8">
    // set the cookie duration to 1 year
    function setHideDonationCookie(value=null) {
        var now = new Date();
        var time = now.getTime();
        var expireTime = time + 1000*60*60*24*365;
        now.setTime(expireTime);
        document.cookie = 'donationButton=' + value + ';expires='+now.toUTCString()+';path=/';
    }
    // return the cookie value
    function getCookie(name) {
        var dc = document.cookie;
        var prefix = name + "=";
        var begin = dc.indexOf("; " + prefix);
        if (begin == -1) {
            begin = dc.indexOf(prefix);
            if (begin != 0) return null;
        }
        else
        {
            begin += 2;
            var end = document.cookie.indexOf(";", begin);
            if (end == -1) {
            end = dc.length;
            }
        }
        return decodeURI(dc.substring(begin + prefix.length, end));
    } 

function getToggleDonationIcon() {
  let pref = getCookie('donationButton');

  let result = settings.default_enabled;
  if (pref !== null) {
    result = pref === "true";
  }
  return result;
}

// We add the CSS rule in the HTML code
if (getToggleDonationIcon()) {
  let style = document.createElement('style');
  style.innerHTML = ".header-icon-help-fund-servers-fees{ display: none; }";
  document.head.appendChild(style);
}

// technically we only want to amend current user here
api.modifyClass("model:user", {
  toggleDonationIcon: function() {
    return getToggleDonationIcon();
  }.property()
});

api.modifyClass("controller:preferences/interface", {
  actions: {
    save() {
      this._super();
      // set the cookie value as the setting value
      if(this.get("model.toggleDonationIcon") != getToggleDonationIcon()) {
        setHideDonationCookie(this.get("model.toggleDonationIcon").toString());
        if(this.get("model.toggleDonationIcon") == false) {
            document.getElementsByClassName("header-icon-help-fund-servers-fees")[0].style.display = "";
        }
        else {
            document.getElementsByClassName("header-icon-help-fund-servers-fees")[0].style.display = "none";
        }
      }
    }
  }
});
</script>

<script type='text/x-handlebars' data-template-name='/connectors/user-preferences-interface/add-selector'>
  {{preference-checkbox labelKey=(theme-prefix 'donation_icon_toggle') checked=model.toggleDonationIcon}} 
</script>
1 Like