kbin-kes icon indicating copy to clipboard operation
kbin-kes copied to clipboard

feat (softblock): spawn modal

Open aclist opened this issue 10 months ago • 5 comments

Resolves #373, #426

Fixes

  • Adds the (un)softblock button into its own column in the magazines index table. This ensures that using the standard subscribe/unsubscribe form actions do not disturb placement of the (un)softblock button, since it is contained to its own region and the form controls do not get overwritten every time.
  • Similarly, the (un)softblock button in the magazine sidebar is placed into its own div so that form actions do not destroy it.
  • Adds proper links and interactive buttons into the "Softblocked" panel that opens via the options toolbar.
  • Interacting with buttons in the Softblocked panel ("unsoftblocking") also updates the underlying magazine index table buttons.
  • The table supports scrolling with overflow-y and will update dynamically if there are no magazines left to show (including if the user unsoftblocks from all magazines in the table while the panel is open).
  • Removed brittle node traversal, which was being used to find the root magazine when a button was clicked. Now the buttons themselves have a data property containing the name of the magazine, so it is enough to click the button to get the proper data attribute.

makeModal()

In addition, this provides a generic modal dialog that can be used to arrange components into. The dialog loosely resembles the style of the MES dialog and provides basic close functionality via a close icon and clicking outside of the content dialog.

The dialog creation function can be globally called via makeModal(id), where id corresponds to an element id to assign to the dialog. All child elements of the dialog are prefixed with the id originally supplied as a parameter to this function. This function returns an HTMLElement in the form of a modal dialog that can be inserted into the tree somewhere.

During creation, the above function also leverages safeGM("addStyle") to append a named stylesheet to the document head. The stylesheet is always named mes-modal-css, and a stylesheet by the same name is removed prior to insertion, ensuring that there can only be one such sheet active at any given time. This prevents multiple mods calling this function from inserting duplicate sheets.

The mod author thus only needs to call makeModal() with the requisite parameters, and the receiving mod is responsible for:

  • Insertion of the node
  • Showing/hiding the node
  • Removal of the node if necessary

aclist avatar Feb 23 '25 20:02 aclist

@Pamasich What would be your advice in terms of using runCallbackOnlyOnce in the context of this mod? It is similar to thread checkmarks in that the icons can be quickly appended to the thread index as needed while the content loads in or is fetched, but at the same time, it has functionality on the Magazines index that opens a modal showing a table consisting of all of your subscribed magazines--so for the latter, we need to have the mags ahead of time, as the UI is drawn once with the full table and doesn't update afterwards until the modal is closed and reopened.

Should runCallbackOnlyOnce be used only on the Magazines index portion of the logic?

aclist avatar Mar 12 '25 15:03 aclist

Good question. Makes me think that maybe, instead of the runCallbackOnlyOnce parameter, I should have instead supplied a boolean parameter to the callback which indicates whether it's the final call. That way the callback could decide what code to run both times and what code to only run once. Instead of the current one or the other deal.

I think if caching is used, it's not going to matter much that runCallbackOnlyOnce is used, since except for the first time it won't take long anyway. But unless you have something against it, I'll make a PR with this additional callback parameter tomorrow. It just makes more sense than the current solution in my opinion.

Pamasich avatar Mar 12 '25 16:03 Pamasich

It's fine by me.

aclist avatar Mar 12 '25 17:03 aclist

The mod isn't working on the Microblog page, but I think that's always been the case, right? Just mentioning it in case it IS an issue introduced here.


One issue I noticed is that cleanup on the magazines page (https://kbin.earth/magazines) seems to be erroneous.

Turning the mod off doesn't remove the column it added, and turning it back on doesn't add the softblock buttons after the first time.

image The column remains after turning the mod off

image The column is empty after turning it back on

Pamasich avatar Mar 17 '25 15:03 Pamasich

One issue I noticed is that cleanup on the magazines page (https://kbin.earth/magazines) seems to be erroneous.

Sorry about that, should be fixed now.

The mod isn't working on the Microblog page, but I think that's always been the case, right? Just mentioning it in case it IS an issue introduced here.

It seems reasonable to add support there, for consistency. Will do it.

aclist avatar Mar 18 '25 06:03 aclist