RE: HTML List Builder

Great questions, Tyler. Some possibilities:


·         Mouse (Touch)

o   Double-click shuttles all selected items from double-clicked list to the non-clicked list.

o   Drag and drop supports shuttling from one list to the other.

·         Keyboard

o   Press Enter shuttles all selected items from the focused list to the unfocused list (only works when list itself has keyboard focus).

o   Press Enter when a shuttle button has focus will perform the shuttling or re-ordering action of the focused button (does not submit the form).

o   Press Right-arrow to shuttle selected items from focused list to right-most nearest neighbour?

o   Press Left-arrow to shuttle selected items from focused list to left-most nearest neighbour?

·         Data Transfer Events

o   https://www.w3.org/TR/2010/WD-html5-20101019/dnd.html#datatransfer


o   effectAllowed: copy, move

o   media type: text/plain; charset=iso-8859-1

·         Copy/Move

o   Introduce an action attribute that allows the developer to define the transfer behaviour.

o   The data transfer event effect is reflected accordingly.

·         Fail

o   Since these events tie into the existing data transfer event framework, suppression is possible.

Renaming the button attribute values eliminates left/right terminology, and duplication can be reduced slightly by introducing button groups that apply actions to lists. Further, the shuttle need not be limited to two lists:

<shuttle id=”picklist”>
<label for=”source-filter”>Filter</label>
<input type=”filter” id=”source-filter” for=”source” diacritics=”false” case=”false”>
<select id=”source” name=”source”>
<option value=”1” selected=”selected”><img src=”one.svg”/> One</option>
</select>
<group id=”source-order” for=”source”>
<button type=”sort” direction=”ascend”>
<button type=”sort” direction=”descend”>
</group>
<group id=”transfers”>
<button type=”transfer” action=”move” quantity=”selected” from=”source” to=”destination, ancillary”>
<button type=”transfer” action=”move” quantity=”all” from=”source” to=”destination, ancillary”>
<button type=”transfer” action=”move” quantity=”selected” from=”destination” to=”source”>
<button type=”transfer” action=”move” quantity=”all” from=”destination” to=”source”>
</group>
<group id=”destination-order” for=”destination”>
<button type=”sort” direction=”ascend”>
<button type=”sort” direction=”descend”>
</group>
<select id=”destination” name=”destination”>
<option value=”2” type=”checkbox”>Two</option>
</select>
<select id=”ancillary” name=”ancillary”>
<option value=”3” type=”checkbox”><img src=”three.svg”/> Three</option>
</select>
</shuttle>
By referring to the lists by their name, an arbitrary number of lists can be added, which means multiple destinations would be possible. As buttons are within the shuttle context, specifying a button type attribute of shuttle is redundant, likewise setting the multiple attribute (default for shuttle select lists is multiple). Allowing developers control over uniqueness with a collection attribute (set or list) could be useful:

<select id=”ancillary” name=”ancillary” multiple=”multiple” collection=”set”>
<option value=”3” type=”checkbox”><img src=”three.svg”/> Three</option>
</select>

___
Dave Jarvis | Senior Software Developer | CGI
1405 Douglas Street, 6th Floor, Victoria BC  V8W 2G2
T: 250-220-1464 | cgi.com

CONFIDENTIALITY NOTICE: Proprietary/Confidential Information belonging to CGI Group Inc. and its affiliates may be contained in this message. If you are not a recipient indicated or intended in this message (or responsible for delivery of this message to such person), or you think for any reason that this message may have been addressed to you in error, you may not use or copy or deliver this message to anyone else. In such case, you should destroy this message and are asked to notify the sender by reply e-mail.

From: Tyler Crompton [mailto:tyler@tylercrompton.com]
Sent: February-11-18 7:21 PM
To: Jarvis, Dave <david.jarvis@cgi.com>
Subject: Re: HTML List Builder


Dave,

I think that it’s certainly an interesting idea. However, I do have a few questions that I feel need to be addressed.

·         Should a transfer be permitted to occur through means other than the dedicated button (e.g. selecting an item in the left filter and then pressing the Return key or double-clicking an item in the left filter)? I understand that you mentioned drag-and-drop behavior.

o    If so, how would one create a shuttle with a “transfer event listener” that gets triggered regardless of what the source event is?

o    If so, what implications (if any) would this have on the <select> input? In what order would events trigger?

·         Should a new event type be created for adding/removing items from a <select> input? I suppose that such events would need to fire after a general “transfer” eve

·         What if the developer wants to implement custom behavior? For example, suppose the developer wants the left filter to be persistent (i.e. rightward transfers are instead rightward copies).

·         What about pages that are designed for a right-to-left locale? How can the proposed terminology be generalized to not cause confusion or frustration for people in those locales? Perhaps LTR left and RTL right = “source” and LTR right and RTL left = “target”? However, that could be slightly misleading for HTML-based FTP file managers, for example. Perhaps the left and right directions don’t matter? After all, when a transfer occurs, I would imagine that only one <select> input would ever be a valid destination. However, for the sake of removing ambiguity, this would require that selections in one filter deselect everything in the other filter.

·         Can a transfer “fail” (e.g. via event.preventDefault())?

Just some food for thought.

Regards,
Tyler