Question: Textbox Indexes

[amhed]

@rmariuzzo I just checked out the first tests. The next/previous action occurs on the collection of texboxes on the DOM, ordered by the way they were declared on the HTML.

Would it be a god choice to add a data-tab-index property in case that someone wishes to rearrange texboxes in a different way using CSS?

[rmariuzzo]

That would be a nice feature! It would be interesting to use a data-tab-index attribute, but what about using the global attribute tabindex?
Would not be better to use the standard way for the sake of not being too intrusive?
I would love to hear your suggestions.
amhed [email protected] wrote:@rmariuzzo I just checked out the first tests. The next/previous action occurs on the collection of texboxes on the DOM, ordered by the way they were declared on the HTML.

Would it be a god choice to add a data-tab-index property in case that someone wishes to rearrange texboxes in a different way using CSS?

—Reply to this email directly or view it on GitHub.

[amhed]

Didn't even know there was a tabindex property =D

OK, that would take care of the texboxes on an array-like structure. How about when we want to use right, left, bottom, up? can we use the same index attribute to store x and y?

[rmariuzzo]

Interesting, looks like we are thinking alike... yesterday I was thinking about two kind of navigation:

1. Sequential, the one basically implemented.
2. Matrix, the one you just described allowing the user to go up, right, down and left.

About the matrix, I have to check what kind of value is allowed for the tabindex property (I believe it allow indexes, numbers). I was also thinking about an auto detection of the matrix of input elements by sniffing their position and creating a virtual bidimensional array, since the most obvious use will be to navigate according on how the elements are placed or arranged visually. I can't imagine anything else.

What do you think?

[amhed]

I honestly have to research a bit more. I'm gonna start fiddling around with the current codebase and get back to ya

[rmariuzzo]

At any moment the user will have the option to initialize a navigation like this:

$(...).inputNavigation({ direction: 'sequential' });

Or

$(...).inputNavigation({ direction: 'matrix' });

Can you suggest a better naming for both the option and the values?

[amhed]

direction seems fine. 👍

[rmariuzzo]

And what about the whole thing about the auto detection of the matrix based on their visual position?

[amhed]

I don't know how to do that. And many things would come into mind:

• What if the textboxes are inside table cells? or nested tables?
• What if some textboxes are inside a table or div and others on another div? should we first do navigation inside the div and then out of it?

That's why I like the data-tags option better. Anyone rendering a template server or client-side can decide how to arrange them, and the problem of actual positioning them is not of the plugin.

[amhed]

Oh! another thing we could do is constraint the use of the plugin. e.g.: "If you want autodetection you should render each input contorl inside a form tag, using div's, and don't use any tables"

(still like the data attribute option better)

[rmariuzzo]

Maybe I didn't make myself clear. The autodetection of the matrix will be done by checking the offset position of each element in the set of elements. That said, instead of just getting a sequential array of item, we will also lookup where they are rendered, so we can automatically determine the next target to navigate. Imagine we have an HTML that renders as follows:

Instead of traversing the whole html an analyze the structure, I think it's easier and more accurate to check their location as rendered in the page. In the end we will have an bidimensional array that will look like:

var matrix = [
    ['1-1', '1-2', '1-3', '1-4', '1-5'],
    ['2-1', '2-2', '2-3', '2-4', '2-5'],
    ['3-1', '3-2', '3-3', '3-4', '3-5'],
    ['4-1', '4-2', '4-3', '4-4', '4-5'],
    ['5-1', '5-2', '5-3', '5-4', '5-5']
];

[amhed]

OK, but we would have to add the textboxes in a specific arrangement right? In your example you have:

Group
_ Input
_ Input 2
_ Input n

[rmariuzzo]

I will give it a shot so we can play with it...
amhed [email protected] wrote:OK, but we would have to add the textboxes in a specific arrangement right? In your example you have:

Group
_ Input
_ Input 2
_ Input n

—Reply to this email directly or view it on GitHub.