HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

YAGA Feature req: show hidden reactions when hovering over 'and X others' text in reaction record

AaronWebsteyAaronWebstey Headband AfficionadoCole Harbour, NS ✭✭✭

My users have been requesting this for a while. Looking into implementing, just figured I'd see if @hgtonight already had it coded up somewhere and/or was planning on doing so.

Comments

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    To make them visible change this to visibility:visible

    .Item .Reactions > * {
        visibility: hidden;
    }
    

    Not sure I understand the other part... but if it is this part where it shows the users who reacted then do this.

    .UserReactionWrap {
        display: none;
    }
    
  • AaronWebsteyAaronWebstey Headband Afficionado Cole Harbour, NS ✭✭✭

    Sorry, poorly worded. Currently, if there are more than 'X' reactions to a post (I think it might be 10 by default), the reaction record will show 10 avatars, and then text saying e.g. "... and 3 more". So you can see the first 10 people who reacted to your post, then all you know is that 3 other people also reacted somehow.

    I removed the limit so that all reactions show up. However, ideally I'd like to leave the '... and 3 more' text, and when you hover/click on that text, you reveal the rest of the reactions.

    Thank you though @vrijvlinder !!

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    You do want to see who reacted , ok . Sorry I thought you wanted to hide that.
    Can you link me to a page where you have those reactants ? I can't test this on my forum coz of lack of users, since it's a test forum...

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    What you are asking is to put the content from the extra not shown reactants in a bubble/tooltip
    or an accordion style function.

    https://www.w3schools.com/css/css_tooltip.asp

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    I have come up with an idea to make your wish come true... The part that you want to display like a tool tip is in the en-ca definitions in the locale folder for yaga .

    $Definition['Yaga.Reactions.RecordLimit.Plural'] = 'and %s others.';
    $Definition['Yaga.Reactions.RecordLimit.Single'] = 'and %s other.';
    

    It is here that you can add some html class I believe to create your ToolTip

    $Definition['Yaga.Reactions.RecordLimit.Plural'] = '<span class="Tooltip">and %s others.</span>';
    

    This should work if you implement the css from the link above. But you can also use my CustomTooltip Plugin to make this work more smoothly.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Ok that won't work coz the text does nothing. It is not linked to anything or any page.

    I am trying different things to make this happen by editing the function.render.php where the code is that renders the Reactants list of avatars above the reactions menu.

    It is possible to make it a drop down or a hamburger/accordion , but it would be the entire div . One would need to add a hoverable element to trigger the menu. Even a click could trigger the menu which would contain all of the reactants.

    I believe this can be done by adding the same class from the options menu .Working on it. Getting close..

  • R_JR_J Ex-Fanboy Munich Admin

    That is the function which is doing the output. You could override it by creating that function in a plugin:

    if(!function_exists('RenderReactionRecord')) {
    
      /**
       * Renders the reaction record for a specific item
       * 
       * @param int $ID
       * @param string $Type 'discussion', 'activity', or 'comment'
       */
      function RenderReactionRecord($ID, $Type) {
        $Reactions = Yaga::ReactionModel()->GetRecord($ID, $Type);
        $Limit = C('Yaga.Reactions.RecordLimit');
        $ReactionCount = count($Reactions);
        $i = 0;
        foreach($Reactions as $Reaction) {
          $i++;
    
          // Limit the record if there are a lot of reactions
          if($i <= $Limit || $Limit <= 0) {
            $User = Gdn::UserModel()->GetID($Reaction->UserID);
            $DateTitle = sprintf(
                    T('Yaga.Reactions.RecordFormat'),
                    $User->Name,
                    $Reaction->Name,
                    Gdn_Format::Date($Reaction->DateInserted, '%B %e, %Y')
                  );
            $String = UserPhoto($User, array('Size' => 'Small', 'title' => $DateTitle));
            $String .= '<span class="ReactSprite Reaction-' . $Reaction->ActionID . ' ' . $Reaction->CssClass . '"></span>';
            $Wrapttributes = array(
                'class' => 'UserReactionWrap',
                'data-userid' => $User->UserID,
                'title' => $DateTitle
            );
            echo Wrap($String, 'span', $Wrapttributes);
          }
    
          if($Limit > 0 && $i >= $ReactionCount && $ReactionCount > $Limit) {
            echo Plural($ReactionCount - $Limit, 'Yaga.Reactions.RecordLimit.Single', 'Yaga.Reactions.RecordLimit.Plural');
          }
        }
      }
    
    }
    

    But I would go for a JS and CSS combination together with showing all users. Doing this with CSS only is not very UX friendly, but maybe you can come up with something better: https://jsfiddle.net/pg9qysyr/

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited February 2017

    This is what I have done so far to be able to show the entire list of reactants when hovering some text, this works but sloppy

    First I added this css to the reactions.css file

    .dropdown {
        position: relative;
        display: inline-block;
    }
    
    .dropdown-content {
        display: none;
        position: relative;
        background-color: #f9f9f9;
        min-width: 20px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 0;
        z-index: 9999;
    }
    
    .dropdown:hover .dropdown-content {
        display: block;
    }
    

    Then I edited this in the functions.render.php file

        function RenderReactionRecord($ID, $Type) {
            $Reactions = Yaga::ReactionModel()->GetRecord($ID, $Type);
            $Limit = C('Yaga.Reactions.RecordLimit');
            $ReactionCount = count($Reactions);
            $RecordsString = '';
    
            foreach($Reactions as $i => $Reaction) {
              // Limit the record if there are a lot of reactions
              if($i < $Limit || $Limit <= 0) {
                $User = Gdn::UserModel()->GetID($Reaction->UserID);
                $DateTitle = sprintf(T('Yaga.Reactions.RecordFormat'), $User->Name, $Reaction->Name, Gdn_Format::Date($Reaction->DateInserted, '%B %e, %Y'));
                $String = UserPhoto($User, array('Size' => 'Small', 'title' => $DateTitle));
                $String .= '<span class="ReactSprite Reaction-' . $Reaction->ActionID . ' ' . $Reaction->CssClass . '"></span>';
                $Wrapttributes =  array('class' => 'UserReactionWrap', 'data-userid' => $User->UserID, 'title' => $DateTitle);
                $RecordsString .=  'Reactants'.Wrap($String, 'li',array('class' => 'dropdown-content'), $Wrapttributes);
              }
              // Display the 'and x more' message if there is a limit
              if($Limit > 0 && $i == $Limit && $ReactionCount > $Limit) {
                $RecordsString .= Plural($ReactionCount - $Limit, 'Yaga.Reactions.RecordLimit.Single', 'Yaga.Reactions.RecordLimit.Plural');
              }
    
     }
    
        return  Wrap($RecordsString, 'ul', array('class' => 'ReactionRecord dropdown'));
      }
    
    }
    

    Only problem is that the hover text "Reactants" gets wrapped on every li and I need to figure out where to add it or what to add extra ... The above basically wraps the reactants list in a dropdown menu .. when you hover the word Reactants, the list of reactants shows as a dropdown.

    This could also work using onclick function

  • AaronWebsteyAaronWebstey Headband Afficionado Cole Harbour, NS ✭✭✭

    Very cool! I'm going to take a look and see how I can fit this into my design. Here's an example of a post with many reactions:

    http://triroost.com/discussion/comment/46042#Comment_46042

  • @AaronWebstey said:
    Sorry, poorly worded. Currently, if there are more than 'X' reactions to a post (I think it might be 10 by default), the reaction record will show 10 avatars, and then text saying e.g. "... and 3 more". So you can see the first 10 people who reacted to your post, then all you know is that 3 other people also reacted somehow.

    I removed the limit so that all reactions show up. However, ideally I'd like to leave the '... and 3 more' text, and when you hover/click on that text, you reveal the rest of the reactions.

    Thank you though @vrijvlinder !!

    How did you remove the limit? I just want them all to be visible.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    How did you remove the limit? I just want them all to be visible.

    The settings in the dashboard. Each thing ie Ranks Badges and Reactions has settings..

  • @vrijvlinder said:

    How did you remove the limit? I just want them all to be visible.

    The settings in the dashboard. Each thing ie Ranks Badges and Reactions has settings..

    Appreciate the reply. I'm not seeing the individual settings for those things, only a checkbox to enable/disable them.

  • R_JR_J Ex-Fanboy Munich Admin

    @RayN said:
    Appreciate the reply. I'm not seeing the individual settings for those things, only a checkbox to enable/disable them.

    I do not know if there is a way to change that in a setting screen but you could change the number of reactions shown by adding
    $Configuration['Yaga']['Reactions']['RecordLimit'] = 10;
    to your /conf/config.php

    If you set it to "0", all reactions will be shown (at least that would I suspect from looking at the code)

  • @R_J said:

    @RayN said:
    Appreciate the reply. I'm not seeing the individual settings for those things, only a checkbox to enable/disable them.

    I do not know if there is a way to change that in a setting screen but you could change the number of reactions shown by adding
    $Configuration['Yaga']['Reactions']['RecordLimit'] = 10;
    to your /conf/config.php

    If you set it to "0", all reactions will be shown (at least that would I suspect from looking at the code)

    Thank you so much!

Sign In or Register to comment.