Talk: QDmodal

Hook for scripts

Could this script fire a hook when initStyles has completed? I have scripts I'd want to use it in, but I'm at a loss for how to use the library. • speedy • 🔔︎ • 🚀︎ • 11:12, July 19, 2018 (UTC)

You shouldn't need to wait for initStyles to complete - the library is ready as soon as it has loaded. I can certainly add a hook though, since that's the convention of library scripts here.

To me, it seems odd to use a hook when you could load the script with $.ajax() and wait for the returned promise (see QDmodal#Usage). - OneTwoThreeFall ^talk 11:31, July 19, 2018 (UTC)

outsource styles

Hey OneTwoThreeFall,

I would look nicer if your styles would be outsourced and imported via importArticle() or importStylesheet().

Best regards,
Agent Zuri Profile Message Wall Blog 14:13, February 12, 2019 (UTC)

Hi! Most of the styles could be in a separate CSS file, however since a few are dynamic based on the page colours/directionality, there'd always be some CSS included in the JS. Therefore, I just include everything in the JS so the CSS isn't split over multiple files. I know it's a bit uglier, but I have tried to make sure they're readable in the JS! (with indentation, line breaks, etc.) - OneTwoThreeFall ^talk 14:39, February 12, 2019 (UTC)

Hi, okay, that's reasonable. Regarding theming, have you ever thought about using Less?

Agent Zuri Profile Message Wall Blog 18:20, February 12, 2019 (UTC)

Hmm, I'm not sure Less world help for this scenario - as far as I'd know, it'd require having to compile stylesheets for each individual wiki. - OneTwoThreeFall ^talk 10:04, February 13, 2019 (UTC)

I'm not sure either, but what you say might be the case… Agent Zuri Profile Message Wall Blog 13:11, February 13, 2019 (UTC)

Translation

Hey again,

The german translation for 'close' is 'Schließen' if you want to add it to your translations object. Or do you want to use i18n-js instead?

Best regards,
Agent Zuri Profile Message Wall Blog 14:13, February 12, 2019 (UTC)

Thanks, I've added the German translation with a credit to you! Regarding using I18n-js, making a library depend on another (async) library can introduce unexpected issues - considering the i18n in QDmodal is only a single word, I'd rather just include it in JS to keep things simple. - OneTwoThreeFall ^talk 14:39, February 12, 2019 (UTC)

Hi, you're right. Good point. (Y) Agent Zuri Profile Message Wall Blog 18:20, February 12, 2019 (UTC)

Title partially hidden

Hi, love the script (I remembered it existed when I was trying to figure out how to use OOUI modals, and this is way nicer and easier to use), but I do have one issue/thing I don't like, the title gets hidden somewhat (example). I get that it shouldn't just extend the full width of the title (otherwise you could end up with a very wide modal heh), but it would be nice if it didn't cover up part of the title for small modals with short titles like the one in my example. --Little Red 06:46, May 30, 2020 (UTC)

Hi, and thanks!

> I get that it shouldn't just extend the full width of the title (otherwise you could end up with a very wide modal heh)

Actually, this is exactly what it does if you don't set any widths! QDmodal tries to be fairly content agnostic, leaving max/min sizes and the like to the script author's choice, so if the title is wider than the content space, it'll define the modal width and the very end will appear faded out.

Probably the easiest way to handle this is something like #ModalLogs h3 { -webkit-mask-image: none; mask-image: none; } to remove the text fade-out if you feel the title will never be too wide for the modal. - OneTwoThreeFall ^talk 07:10, May 30, 2020 (UTC)

Ah thanks, that works, thanks~ --Little Red 07:20, May 30, 2020 (UTC)

Very late update, but this has been properly fixed now by adding padding to the title that's the same size as the fade. This means the fade will usually appear over the empty padding area instead of the text (so no more partially hidden title), but if the text does actually get too long, it will overflow into the padding and the fade will appear over the title as you'd expect. - OneTwoThreeFall ^talk 12:48, 3 April 2021 (UTC)

Appearing over bubble notifications

Just wanted to mention that this seems to appear above bubble notifications on UCP. As banner notifications are slightly less easy to create on the UCP, I will be changing scripts that don't really need to use banners to bubble notifications, so this might create issues with scripts like Rollback. -- Cube-shaped garbage can 12:21, August 16, 2020 (UTC)

Thanks for the notice! Fixed with a horribly high z-index (once 1.19 is gone, should make it more reasonable). - OneTwoThreeFall ^talk 06:41, August 22, 2020 (UTC)

Themeing

Hi, QDmodal doesn't use the wiki's colors on UCP, but looking at the code it should be just two colors you need which you can pull from either CSS vars or get the color from an element in the DOM. --Little Red 06:44, August 22, 2020 (UTC)

Like I said with Colors, I just hadn't bothered to look if they were available - CSS vars make it easy though, so with Special:Diff/138656! - OneTwoThreeFall ^talk 13:20, August 22, 2020 (UTC)

Sticky nav

Hi, it seems that the sticky nav covers part of the header of the modal. --Sophie ♦ 03:24, 23 September 2021 (UTC)

This should be fixed now, thanks for the notice! - OneTwoThreeFall ^talk 15:51, 16 October 2021 (UTC)

Conditional buttons

Hi, would conditional buttons be something that QDmodal can support (either via some option in the button object, or via passing null instead of a button object in the button array when creating/showing a modal), or would it be something that I should support in my code instead? --Sophie ♦ 05:29, 16 January 2023 (UTC)

Sure, added now! Well, assuming something like this example is what you want?

{
  text: "My button"
  handler: doSomething,
  condition() {
    return $(".check-me").length > 2;
  }
}

I've also made it work if you include a not-object in the button array, but I consider that more of a bug fix (not breaking on bad input) and recommend using a condition function. - OneTwoThreeFall ^talk 08:08, 17 January 2023 (UTC)

Yeah that works great, I was doing ($('.el').length ? { ... } : null) in the button array, but switched to always adding the button and then using modal.$footer.find(':empty').hide(); in the onShow function when it turned out that using null was breaking the JS, but a conditional function is a much better way to do it, and isn't a hack that I got lucky with (with the text and href not existing it apparently adds an empty button which I was able to use). --Sophie ♦ 08:26, 17 January 2023 (UTC)

Spinner too high

When I do

modal.show({
    loading: true,
    title: 'Loading...'
});

the spinner is too high, however .qdmodal-spinner { top: calc(50% - 3px); } fixes it. Not sure if it's something that needs to be fixed in QDmodal or if it's something on my side tho. --Sophie ♦ 07:10, 16 January 2023 (UTC)

The spinner was centred over the entire modal (including header and footer) as opposed to the content area. This used to be alright, but now that the footer hides when it's empty it doesn't work so well. The spinner's now centred over the content area itself, will hopefully look better with different sized header/footer areas. Thanks for the notice! - OneTwoThreeFall ^talk 08:08, 17 January 2023 (UTC)

Np, thanks for the quick fix~ --Sophie ♦ 08:27, 17 January 2023 (UTC)

Pointer cursor

Thoughts on removing

.qdmodal-button[href] {
    cursor: pointer;
}

and adding cursor: pointer; to

.qdmodal-close,
.qdmodal-button {
    transition: background-color 0.2s;
}

? --Sophie ♦ 08:21, 16 January 2023 (UTC)

So there's a fair bit of history to this particular user experience, but it comes down to the hand pointer cursor is historically meant for links that will take you to another webpage, not for buttons in general. I have no idea what OS or browser you use, but I'd be willing to bet if you hover over its toolbar or window buttons right now, you'll see the default arrow cursor, not the hand pointer :) Whether this distinction really matters much to anyone today, especially with touch becoming dominant, who knows… - OneTwoThreeFall ^talk 08:08, 17 January 2023 (UTC)

Oh yeah, if I hover around my browser's UI or my taskbar it stays the default arrow cursor. I guess I got used to using a pointer cursor for buttons and and got into the habit of using it show interactivity. --Sophie ♦ 08:30, 17 January 2023 (UTC)

Issue with OOUI modal

When I try to use AjaxUndo, with the summary modal enabled, the OOUI prompt that popups up is hidden behind the modal due to the modal having a z-index of 801, and the summary prompt modal having a z-index of 800. Due to that (I assume) I'm unable to use AjaxUndo's summary modal, nor interact with QuickDiff. --Sophie ♦ 08:45, 1 April 2024 (UTC)

You’re right, it’s another z-index issue. Man, z-index are the worst… it doesn’t help that .oo-ui-windowManager stays around after being opened and closed, so isn’t always the last element in body. Anyways, all fixed! - OneTwoThreeFall ^talk 15:02, 2 April 2024 (UTC)