Edit: This issue has been resolved with #677's closure.
Issue
At the moment, when clicking the Subscribe, Unsubscribe, Block, or Unblock, the button state is toggled, but no attributes are updated. This makes applying reactive custom styles harder than necessary for the (Un)Subscribe button, and impossible for the (Un)Block button.
Description
(Un)Subscribe
When you click on Subscribe, for example, JS is triggered that replaces the buttons onclick value and the button text.
This:
"Subscribe" / onclick="subscribe(this)" / class="btn-whoaverse-paging btn-xs btn-default btn-sub"
Becomes This:
"Unsubscribe" / onclick="unsubscribe(this)" / class="btn-whoaverse-paging btn-xs btn-default btn-sub"
And vice-versa.
Notice that while the text and function are updated correctly, the class attribute remains unaffected.
(Un)Block
The Block button is even worse. When you click on Block or Unblock the only element updated is the button content.
"Block" becomes "Unblock".
And vice-versa.
This time the button calls a single function, onclick="return toggleBlockSubverse(this, '[[currentsub]]')". where [[currentsub]] is the actual name of the current subverse.
Desired Resolution
(Un)Subscribe
btn-sub should be removed and btn-unsub should be appended at the same time as the other element updates (on click).
(Un)Block
A new class element should be added to the (Un)Block button, similar to the (Un)Subscribe button's btn-sub and btn-unsub classes. (btn-block/btn-unblock)
Once added, the btn-block and btn-unblock should toggle in the same fashion as described above for the (Un)Subscribe button.
Workaround
Ideally, these buttons and their current state would be targeted with the CSS selectors: .btn-sub, .btn-unsub, .btn-block, and .btn-unblock.
As mentioned in the issue description, there is a workaround for the (Un)Subscribe button, but none for the (Un)Block button.
(Un)Subscribe
Currently you can target this button, and it's current state using the following selectors:
button[onclick="subscribe(this)"]{} and button[onclick="unsubscribe(this)"]{}.
However, this method will only function with CSS3 support. Applying the changes mentioned above would allow for a more universal selector, with support for CSS1/CSS2 as well as CSS3.
(Un)Block
Due to the fact that no attributes are updated at the time of the toggle action, this button cannot have its individual states targeted.
Any changes made to this button via the selector via the available selector (.titlebox button:nth-of-type(2){}) will apply to both states at all times.
Conclusion
In order to provide for subverse owners with the ability to offer a more responsive and compatible user experience, I propose that the aforementioned changes, or changes in equivalence be instituted.
Any feedback or debate on the issue is always appreciated, thanks for reading! --Xestrix
Sort: Top
[–] 1278892? [S] 0 points 1 point 1 point (+1|-0) ago
@Atko @PuttItOut
Is this something that is being considered?
Thanks!
[–] PuttItOut 0 points 1 point 1 point (+1|-0) ago
It's a good idea. This post probably slipped under the radar. Will you post this to github?
[–] 1280290? [S] 0 points 2 points 2 points (+2|-0) ago
Done, and thanks!