Thursday, July 5, 2018

Modal window and Web in alpha five

July 5th 2018.
This is second of my post in the blog this week to cover a topic.

I happened to visit the forum for personal reason and found this topic and it was interesting.
There is not really a modal window in web, it is a make believe window positioned over the current window with different background color to make the current window standout and make the elements in the background not clickable, but they are still reachable by tabbing into them.  Yes, of course you can make them fully a modal window with ARIA compliant code, however it is a simple matter of making all input elements not tabbable and only the input elements in the dialog itself tabbable. Then when you close make all the elements back to tabbable state. By description the modal dialog should not have any tabindex set, and you canconfirm alpha did not set them if you examine in the web inspector. So far so good.

Most of the framework when you work with the background fields are accessible, so it is not a bug in alpha.  It is consumer misunderstanding as far as I know and think.

In order to make this work
got to the dialog and go all the down and select window events and select onBeforeShow event and add this code
var $j = jQuery;
var inputs = $j(document).find('select, input, textarea, button, a').filter(':visible');
$j(inputs).each(function() {
$j(this).attr("tabindex", -1);
});

and then go to the onHide event and add this code:
var $j = jQuery;
var inputs = $j(document).find('select, input, textarea, button, a').filter(':visible');
$j(inputs).each(function() {
$j(this).attr("tabindex", 0);
});

This should work, I have tested in internet explorer. I was about to send this to Selwyn to analyse, but elected to post here in my blog.
The one this this will not address is tabbing out to the document itself which is normal behavior in most browsers.
The video is published in youtube and here is the link:

http://www.youtube.com/watch?v=LI6UQQvHiqo

let me know if this works.



Wednesday, July 4, 2018

Inform user of processing using Font awesome spinner

July 4th 2018

So, I don't use alpha five regularly anymore, but I have many topics that I could post in my blog, if someone crosses this site and this can be useful to them. So here goes another topic.

Say you have a dialog or ux whichever way you want to call it and you press the submit button and it takes some time to process the request, because you may be doing lots of stuff in the backend. In the meantime the button simply sits there and the user does not know what is happening. And by todays standards they won't sit tight, they will press the button again. Seems familiar, here is one answer to it.

Ajax callbacks to the server may take time and exactly how long it takes is a mystery. So you want to be prepared for it.
One way of doing it will be put up the message at the beginning and take it down at the end of the callback when the server tells alpha five all is good.

Here are the steps to do it.
Prepare the dialog to suit you best and then go to the properties of the dialog and select the head section tags and insert the link to font awesome cdn like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Then go to the controls and select the submit button, and on the top change the button text to
<span id = "gg">Submit</span>
You can use any identifier, I am just showing an example.
Then go to the onClick event add this line above the dialog submit action
document.getElementById("gg").innerHTML = <i class=\"fa fa-spinner fa-spin\"></i>"Processing...";
Then go to client side events and select afterAjaxcallbackComplete action and put back submit on the button like
document.getElementById("gg").innerHTML = "Submit";

Test it and see if okay with you.
Here are videos showing the same:

http://www.youtube.com/watch?v=lmGcBt71sCc
http://www.youtube.com/watch?v=orcfvpVKUJc