Being a web developer, I’ve had my fair share of problematic IE behavior. Microsoft’s browsers up to, and including, IE11 are not very good in terms of standards compliance. This is pretty well known with web developers.
Well, after my post yesterday regarding CSS flexbox, I found that IE10/11 exhibit some odd discrepancies.
Mutliselect drop-downs are somewhat of a pain. It’s always nice when things are simple and discrete. But, the world is not simple and discrete. Life isn’t simple and discrete.
I find myself many times in need of a good, general purpose multiselect dropdown with checkboxes. There are many options for multiselect, like select2, but for some reason having discrete checkboxes is generally overlooked. This is where rolling my own came into play.
EDIT: Be sure to check out the updated info. for this directive. https://long2know.com/2016/05/angular-multiselect-dropdown-updated/
Earlier today, I helped a colleague on a small issue. That issue was giving focus to an element in a modal once the modal is loaded.
This seems trivial, but it’s actually not entirely straight-forward due to Angular’s digest cycle.
As usual, I wanted to wrap this into a reusable directive.
In many of my latest applications, it’s necessary to have data drive what a form-element actually lets the user enter. For example, I may have a drop-down to select a property, and then, based on that property, a common text-box is used for its entry.
Sometimes its nice to have the data-type of the property drive a user-friendly experience.
While working with an Angular application that involved selecting rows in a table with checkboxes, I found that the requirements necessitated having a ‘select all’ checkbox.
Selecting all elements is a common, and usually pretty easy, mechanism to incorporate. But, if you want an indeterminate, or tri, state, for your top-level checkbox selector, it becomes a little more involved.
When I’m online with my banking site, or Pandora, I occasionally get those nice dialogs asking if I’m still around after being idle for a while. Sometimes, I think it’s a nuisance, but it can be a helpful security measure. It can also be beneficial in SPA-type applications.
With SPA’s, the user can perform so many actions in the browser that never make requests of the server. As a result, if we’re using a cookie-based security mechanism that has a short expiration time, they could be effectively logged out and not even know it.
This is a problem.
A few weeks ago, I made this nice little side-bar that allowed a user to click an element and then perform actions on that element. They could also add new elements.
The idea of showing a quick animation for when a new element is animated using Angular’s animation framework sounded easy. However, it turned out to be problematic.
If you’ll recall my previous post on building a simple menu navigation system with Angular, I alluded to advanced scenarios such as determining when, or if, a user can navigate away from the current state.
There are many ways to prevent a user from changing state, but providing reusable mechanisms/services to achieve a unified solution should be our goal.
Previously in my discussion of how I like to use the ui-router and states for basic layout functionality, I touched on the basic tenants of what I see as prominent in many SPA applications. In this discussion, I’d like to dig a little deeper and illustrate a simplified implementation of a menu navigation system.
In developing a menu navigation system, I initially consider how flexible I need the navigation to be. If users can change states with hopeless abandon, then define your states and use ui-sref and nothing more. If we need more functionality, we need a more robust solution.
Yes, yes, you’ve probably seen posts regarding creating a modal dialog service before. I’ve been using one for a bit and wanted to share my spin on this concept.
Angular’s ui-bootstrap directives provide a lot of functionality out of the box. Having the $modal providers really make it easy to manage dialogs. While it is easy to create your own service that can create simple OK/Cancel requests, it is also pretty straight forward to create modals that let you pass data back and forth to your calling controller.