[Feature]: Reaction configure

[Mister-Hope]

功能概述 | Describe the feature

Currenly reaction api is absolutely not complete enough for users.

We should give users ability to change reaction and adjust their position.

possible solution

We should let users bind a key with the reaction:

E.g.:

[
  ['happy', 'https://example.com/happy.png'],
  ['sad', 'https://example.com/sad.png'],
]

So that users can:

• change their position
• replace some reactions
• add removed reactions back while holding the counter when reaction is removed

[lizheming]

I'm not sure I have got you meaning.

• change their position: use flex order property can easily achieve it.
• replace some reactions: just replace reaction image and locale text.
• add removed reactions back while holding the counter when reaction is removed: append new reaction into reaction property and use css display:none to remove old reaction.

At the beginning of the design, I want reaction is light weight. So I use reaction[0-9] to represent them. If we use a meaningful key to represent it, it will lose some extensibility.

[Mister-Hope]

We just ignore css tricks's difficulty you meation above to noob users.

The solution you provided here, means users can use maxium to 10 reactions from time to time. If they already have 10 reactions used( removed or currenly using) but they want one more reactions, they will have no idea.

I think that people would perfer a reaction name => reaction counter map stored, so that they can configue each reaction with id and images they want in their own order.

[Mister-Hope]

However, if you do think that holding a reaction map in database have issues comparing with 9 subject with number, I can add some new code to provide builtin support, something like:

(id only support 0-9)

[
  {id: 4, img: 'https://example.com/happy.png'},
  {id: 2, img: 'https://example.com/sad.png'},
]

But I don't think this is better than a map to take better understanding:

[
  {id: 'happy', img: 'https://example.com/happy.png'},
  {id: 'sad', img: 'https://example.com/sad.png'},
]

I don't think we should expect users to do the tricks like flex with order(sort) and display: none (hide)

[lizheming]

The solution you provided here, means users can use maxium to 10 reactions from time to time. If they already have 10 reactions used( removed or currenly using) but they want one more reactions, they will have no idea.

This is not correct, user can use reaction<number> without 10 limit, just config reaction map image list.

I don't think we should expect users to do the tricks like flex with order(sort) and display: none (hide)

We should apply solution by the range of this function. It's a easy custom way to make some expert user achieve it before we have no much users need it.

[Mister-Hope]

But the built-in table only have reaction0 - reaction9.

Our dicussion centrl point is actually choosing from:

• some reaction columns with number stored with speed and structure benifit in database, but confusing "id number" to users at frontend and tricky things to provide sorting and hiding.
• a reaction<name-counter> map stored with json, but much more better understanding using string id in configurations. Also the client doesn't need any tricky css, and users can have better locale settings.

[Mister-Hope]

Obvoiusly I prefer the second one since I believe a good option is better than a good implementation. Provide users with easy-understanding and powerful options should have the highest priority.

[Mister-Hope]

I ask some feedback from my theme QQ group, and they all confused about the options, and I already met users simply adjust the reaction array images, and ask why the counter is incorrect and what he should do.

If people do need reactions, we can infer that they may need to adjust reactions 2-3 times before getting themselves pleasant, and the current design is stoping them to do a smooth adjustment

[lizheming]

But the built-in table only have reaction0 - reaction9.

Code can't express unlimited by a limit map. So I use a number which may be satisfied much user. And will give unlimited solution answer when user take a issue or discussion.

I ask some feedback from my theme QQ group, and they all confused about the options, and I already met users simply adjust the reaction array images, and ask why the counter is incorrect and what he should do.

Please let them make a new issue in waline, I'll answer them. and I'm not ready change the reaction api right now, so it won't make user update confused.

And I think reaction is a very minority function for user. We can stop obsessing for a while.

[Mister-Hope]

So dear users, I failed to convince lizheming. Here is an example

If you want [f, d, b, c] after you set [a,b,c,d,e], do the following tricks:

{
  reactions: [
     // keep exisiting reactions
     'https://example.com/a.png', // a was set but no longer wanted
     'https://example.com/b.png',
     'https://example.com/c.png',
     'https://example.com/d.png',
     'https://example.com/e.png', // e was set but no longer wanted
     // add your new reactions at the end
     'https://example.com/f.png',
   ]
}

/* hide a as it's first chind */
.wl-reaction > li:nth-child(1) {
  display: none;
}

/* hide e as it's 5th chind */
.wl-reaction > li:nth-child(5) {
  display: none;
}

/* sort f as first */
.wl-reaction > li:nth-child(6) {
  order: 1;
}

/* sort d as second*/
.wl-reaction > li:nth-child(4) {
  order: 2;
}

[sysiocn]

Click to pop up, how to modify, and use hugo.