I agree with the GP with regard to Angular4. But have you really tried to create a modal in HTML/CSS/JS without any framework?
It's surely not one line of code!
back
1 comments
OK, so it's a dozen.
https://stackoverflow.com/questions/25920941/how-do-i-overla...
Didn't say not to use a framework. Use it and some CSS and that's a basic task, not to mention there are other libraries which do it for you already.
Does that work in several versions of different rendering engines that date back a decade, at resolutions from 800x600 to an iMac 5K screen? How about on tablet and mobile devices? What happens when the user's scroll position is half way down the page? Does it listen for events to update or close itself?
A good modal library is going to weigh in at a few thousand lines of code across JS, CSS and HTML for a reason. If you have a simpler use case then you don't need all that extra edge case handling, but that doesn't mean it's not pointless code.
A good modal library is going to weigh in at a few thousand lines of code across JS, CSS and HTML for a reason.
No. Sorry, but that's just nonsense.
A modal is probably going to be rendered as an HTML div element, styled so it appears with a fixed centre-viewport position.
You probably also want a second div as an overlay to de-emphasize the rest of the page while the modal dialog div is visible.
You might want a standard X button to close the dialog, which hides the above when it's clicked.
You can write all of that in less than a screenful of code, and you can do it using nothing but basic web standards that are supported as far back as IE8 and iOS5 -- in other words, well before the browser generations that even Microsoft and Apple themselves still support today.
You need more functionality for a non basic modal, first problem is if you have 20 modals you want not to copy paste over and over again. For non basic modals you also need events to know if user accepted or dismissed the modal, you want the Escape key to also work, you want the option to allow or not closing the modal when clicking outside of it,
The project I work on uses bootstrap, this means in the main html file you have copy pasted same html boiler-plate with only the content change, somewhere there is a button that has a special attribute that magically opens this modal(bootstrap js does that in the background), this does not scale and we searched for a good library so we can put each modal in it's own file and we also needed full control to create the modal if and when we needed it and not have it loaded in the main html but hidden. The solution would be to have modals implemented as standard and not having to hunt for a library because the lib we used is for angular+bootstrap but it will not work for react+bootstrap or for no framework projects.
first problem is if you have 20 modals you want not to copy paste over and over again.
Of course, but you can trivially generate the required divs in JS, and you can easily track the number of current modals displayed and set the z-index to ensure proper stacking if necessary.
Other than that, what you put in the modal in terms of HTML content or rendering a template presumably works the same way as any other part of your UI. There's nothing magic about the fact that this particular div happens to be styled as a modal dialog.
For non basic modals you also need events to know if user accepted or dismissed the modal, you want the Escape key to also work, you want the option to allow or not closing the modal when clicking outside of it
OK, so you need two callback functions, a couple of buttons to proceed or cancel, and possibly a couple of event handlers for keyboard and mouse/touch events.
Again, you surely have something to render buttons and handle their events for your UI more generally anyway. Other than that, the only thing special about the modal is that maybe you're connecting a couple of other events to the same handler logic as the explicit cancel button.
Really, none of this is difficult, nor does it need anything like thousands of lines of code just to handle modal dialogs. You could code everything we've been talking about here from scratch in a few minutes, and you could integrate it straightforwardly with any UI library I can think of if you're already using something else to render templates or handle input events. If you already have something available that will save you those few minutes, great, go right ahead and use it, but let's not pretend this is some tricky problem that requires a lot of thought and a lot of code written by experts. It's an elementary exercise in UI design, which I'd expect any junior dev to handle easily.
Ypu also need to have the modal setup the focus correct in the first input(or the one that makes sense), usually GUI libraries have a property for tab index that specify how focus changes when you press Tab, bootstrap seems to not properly setup the focus and I had to write code to fix that.
It is not impossible to write such code but I am sure the code you will write in 10 minutes will not be good enough, my point is this modal feature should be native and not have people re-invent it,
Also what if you want to allow resize or move, then you get again more and more code that is reinvented each time.
IMHO is the same issue as with the dropdown/select , when you need a dropdown that has icons or something that the native one is not good enough it is easy to write one yourself, soem divs, some events but this 10 minutes dropdown will have missing feature or issues, like corner cases when the popup thing goes outside the screen or conflicts with something else,or the thing that opens contains 6 and half entries and if you want to look good you need to put more work into it, then if you want support for arrow keys more work, or if you want the feature where the user presses the first letters and selection jumps down to the correct item even more code, my point is basic implementations are fast, good enough implementation like you have in Qt,Flex, WPF is a lot more work and we do not have a standard way of doing it, and the developer needs to research what library works with the current stack he uses
It is not impossible to write such code but I am sure the code you will write in 10 minutes will not be good enough
Well, you keep saying that, yet putting focus on a designated element when opening the dialog is literally one line of code, and setting tab order isn't particularly difficult either (and is probably something you'd have to do in much the same way whether you wrote the code yourself or used someone else's library to create your modal).
In any case, we seem to have drifted well off the original topic now. The comment by revscat was about a requirement to add a very simple modal without any of these hypothetical complications you keep introducing, and how the resulting PR involved 27 files. That's crazy.
What's the likelihood that he's supporting engines going back a decade? Modern rendering engines and CSS handle that pretty well. IE 8 is 8 years old. Bootstrap 3 supports IE 8 and has modals.
Point being, you can either write up a simple modal if you are targeting semi-modern browsers and don't need much, or you can use one of a dozen libraries that do this, but 27 files sounds pathological.