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

AaronWebstey

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.

vrijvlinder

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;
}

AaronWebstey

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 !!

vrijvlinder

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

vrijvlinder

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

vrijvlinder

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.

vrijvlinder

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_J

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/

vrijvlinder

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

vrijvlinder

Ok , I cleaned it up some and now looks better, here is an example of what I did

http://www.fumamx.org/foro/discussion/299/seymour-duncan-announces-the-pickup-booster#latest

AaronWebstey

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

RayN

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

vrijvlinder

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

RayN

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

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

RayN

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