tag (with 'display: inline-block') to prevent the display text from being selected/highlighted
// - Added the ability to jump to an option by typing the first character of that option (simular to a normal drop down)
// - ** by Andy Richmond **
// - Added [] to make each control submit an HTML array so $.serialize() works properly
//
// 1.3 - 2010 October-November
// - Adapted for Plone open source CMS tag selector
// - Fixed bug related to mouse hover when using arrow keys
// - Improved many areas of keyboard support & accessibility
// - see https://dev.plone.org/archetypes/log/Products.Archetypes/branches/plip11017-tag-selector-rmattb/Products/Archetypes/skins/archetypes/widgets/js/keywordmultiselect.js
// - ** by Matt Barkau **
//
// Licensing & Terms of Use
//
// This plugin is dual-licensed under the GNU General Public License and the MIT License and
// is copyright 2008 A Beautiful Site, LLC.
//
*/
// Removed a test for jQuery, since we know it is available.
(function($) {
// render the html for a single option
function renderOption(option, i, selectName) {
// dl, dt, & dd semantically associates selector name with values
// label makes the text clickable, like a multiple-select
var html = '';
return html;
}
// render the html for the options/optgroups
function renderOptions(options, selectName) {
var html = "";
for(var i = 0; i < options.length; i++) {
html += renderOption(options[i], i, selectName);
}
return html;
}
// var allOptions = optionsBox.find('LABEL');
//
// // Handle mouse move input
// // Handle mouse hover of option, both
// // entering an option, *and*
// // mouse moving within an option.
// allOptions.mousemove( function(event) {
// // At this point, the browser is saying that the mouse moved.
// // Workaround Safari's errant reporting of mousemove
// // when the mouse hasn't moved, but only background has.
// // Initialize position variables.
// if(optionsBox.oldPositionX === null || optionsBox.oldPositionY === null) {
// optionsBox.oldPositionX = event.pageX;
// optionsBox.oldPositionY = event.pageY;
// }
// if( optionsBox.oldPositionX != e.pageX || optionsBox.oldPositionY != e.pageY ) {
// // At this point, the mouse actually did move.
// optionsBox.oldPositionX = event.pageX;
// optionsBox.oldPositionY = event.pageY;
// optionsBox.navigationDevice = 'mouse';
// optionsBox.navigationElement = $(this);
// optionsBox.navigationOption = $(this);
// handleNavigation();
// }
// });
//
// // Handle mouse click input
// allOptions.mousedown( function(event) {
// optionsBox.selectionEvent = event;
// optionsBox.selectionDevice = 'mouse';
// optionsBox.selectionElement = $(this);
// optionsBox.selectionOption = $(this).parent('LABEL');
// }
//
// // Handle key press input
// optionsBox.keydown( function(event) {
// detectNavigation(event);
// detectKeyboardSelection(event);
// });
//
// // Detect navigation with mouse or non-tab keys
// function detectNavigation(event) {
// // if mouse, arrows, page up/down, or first letter/number,
// // not spacebar or enter
// if( event.keyCode != 13 && event.keyCode != 32 ) {
// // Save navigation input device to optionsBox
// optionsBox.navigationDevice = 'non-tab key';
// // Call handle navigation of options
// handleNavigation(optionsBox.navigationDevice, optionsBox.navigationElement, optionsBox.navigationOption);
// // Save navigated DOM element to optionsBox
// optionsBox.navigationElement = ;
// // Save navigated option to optionsBox
// optionsBox.navigationOption = ;
// }
// }
//
// // Detect navigation with tab key
// function detectNavigationTabKey(event) {
// // if tab key
// // Save navigation input device to optionsBox
// optionsBox.navigationDevice = 'tab key';
// // Call handle navigation of options
// handleNavigation();
// // Save navigated DOM element to optionsBox
// optionsBox.navigationElement = ;
// // Save navigated option to optionsBox
// optionsBox.navigationOption = ;
// }
//
// // Detect selection with mouse
// function detectSelectionMouse(event) {
// // if mouse click
// // Handle mouse click of checkbox
// optionsBox.find('INPUT:checkbox').click( function() {
// // set the label checked class
// $(this).parent('LABEL').toggleClass('checked', $(this).attr('checked'));
// updateSelected.call(optionsBox);
// // Highlight selected option
// //
// // Refocus
// multiSelectA.focus();
// // If this checkbox was navigated to with the tab key before being checked,
// // then put focus back on it.
// if(typeof(lastNavTabKeyCheckbox) !== 'undefined' && lastNavTabKeyCheckbox !== null) {
// lastNavTabKeyCheckbox.focus();
// lastNavTabKeyCheckbox = null;
// }
// });
// // Handle mouse click of option label
// // Save selected DOM element to optionsBox
// optionsBox.selectionElement = $(this);
// // Save selection input device to optionsBox
// optionsBox.selectionDevice = 'mouse';
// // Save selected option to optionsBox
// optionsBox.selectionOption = ;
// // Call handle selection of options
// handleSelection();
//
// // Detect selection with keyboard
// function detectSelectionKeyboard(event) {
// // if space or enter keys
// if( event.keyCode == 13 || event.keyCode == 32 ) {
// // Save selection input device to optionsBox
// optionsBox.selectionDevice = 'keyboard';
// // Save selected DOM element to optionsBox
// optionsBox.selectionElement = ;
// // Save selected option to optionsBox
// optionsBox.selectionOption = ;
// // Call handle selection of options
// handleSelection(optionsBox);
// }
//
// // Handle navigation of options
// function handleNavigation(optionsBox) {
// // Remove all highlights
// allOptions.removeClass('hover');
// // Highlight navigated option
// optionsBox.navigationOption.addClass('hover');
// // Scroll the optionsBox
// adjustViewPort(optionsBox);
// }
//
// // Handle selection of options
// function handleSelection(optionsBox) {
// // Highlight selected option
// optionsBox.selectionOption.toggleClass('checked');
// // Toggle a checkbox (if not already toggled after tab key)
// optionsBox.selectionOption.attr('checked');
// // Refocus the optionsBox or a checkbox if one was tabbed to
// // If navigation was done with mouse or a non-tab key?
// if(optionsBox.selectionDevice == 'mouse' || \
// optionsBox.selectionDevice == 'non-tab key') {
// // Return focus to div
// optionsBox.focus();
// // If navigation was done with tab key?
// } else if(optionsBox.selectionDevice == 'tab key') {
// // Return focus to checkbox
// optionsBox.selectionElement.focus();
// }
// }
// Building the actual options
function buildOptions(options) {
var optionsBox = $(this);
var multiSelectA = optionsBox.next('.multiSelectA');
// Help text here is only relevant when there are many tags,
// so putting that in documentation, rather than here.
// "Hover and type the first letter to skip through tags."
$("#existingTagsHelp").text('');
// generate the html for the new options
html = renderOptions(options, optionsBox.attr('name'));
optionsBox.html(html);
// Format selected options
optionsBox.each( function() {
$(this).find('INPUT:checked').parent('LABEL').addClass('checked');
});
// Initialize selected options list
updateSelected.call(optionsBox);
var allOptions = optionsBox.find('LABEL');
// --- Navigation with Mouse ---
// Handle mouse hover of option, both
// entering an option, *and*
// mouse moving within an option.
optionsBox.find('LABEL').mousemove( function(e) {
// At this point, the browser is saying that the mouse moved.
// Workaround Safari's errant reporting of mousemove
// when the mouse hasn't moved, but background has.
// Initialize position variables.
if(multiSelectA.oldPositionX === null || multiSelectA.oldPositionY === null) {
multiSelectA.oldPositionX = e.pageX;
multiSelectA.oldPositionY = e.pageY;
}
if( multiSelectA.oldPositionX != e.pageX || multiSelectA.oldPositionY != e.pageY ) {
// At this point, the mouse actually did move.
// Highlight navigated option
$(this).parent().parent().find('LABEL').removeClass('hover'); // remove all highlights
$(this).addClass('hover'); // add the new highlight
lastNavTabKeyCheckbox = null;
multiSelectA.oldPositionX = e.pageX;
multiSelectA.oldPositionY = e.pageY;
multiSelectA.focus();
adjustViewPort(optionsBox);
}
});
// --- Selection with Mouse ---
// Handle mouse click of checkbox
optionsBox.find('INPUT:checkbox').click( function() {
// set the label checked class
$(this).parent('LABEL').toggleClass('checked', $(this).attr('checked'));
updateSelected.call(optionsBox);
// Highlight selected option
// placeholder
// Refocus
multiSelectA.focus();
// If this checkbox was navigated to with the tab key before being checked,
// then put focus back on it.
if(typeof(lastNavTabKeyCheckbox) !== "undefined" && lastNavTabKeyCheckbox !== null) {
lastNavTabKeyCheckbox.focus();
lastNavTabKeyCheckbox = null;
}
});
// --- Navigation with Tab Key ---
// Track mouse click of option
optionsBox.find('LABEL').mousedown(function() {
// Track mouse clicks,
// so that tab key navigation focus on checkboxes can be maintained separately.
lastNavClickTag = this;
});
// Handle tab-key focus of checkbox
optionsBox.find('INPUT').focus(function() {
if(typeof(lastNavClickTag) == "undefined" || lastNavClickTag === null) {
// This only happens with tab key navgation.
// Must keep track of this, because
// mouse-driven nav always keeps *focus* on multiSelectA,
// while the active optionsBox get *hover*.
// Tab navigation is different - it's active option checkbox gets *focus*,
// rather than *hover*, since keyboard navigation never hovers.
// If the checkbox is tabbed to & checked , save it so that focus can be put back on it.
// Without this, both moused & tabbed checks return focus to multiSelectA,
// causing tabbed checkboxes to lose focus.
lastNavTabKeyCheckbox = $(this);
// Highlight navigated option
lastNavTabKeyCheckbox.parent().parent().parent().find('LABEL').removeClass('hover');
lastNavTabKeyCheckbox.parent('LABEL').addClass('hover');
}
lastNavClickTag = null;
});
// Handle keyboard press
multiSelectA.keydown( function(e) {
var optionsBox = $(this).prev('.optionsBox');
// --- Navigation with Arrow or Page Keys ---
// Down || Up
if( e.keyCode == 40 || e.keyCode == 38) {
var oldHoverIndex = allOptions.index(allOptions.filter('.hover'));
var newHoverIndex = -1;
// if there is no current highlighted item then highlight the first item
if(oldHoverIndex < 0) {
// Default to first item
optionsBox.find('LABEL:first').addClass('hover');
}
// else if we are moving down and there is a next item then move
else if(e.keyCode == 40 && oldHoverIndex < allOptions.length - 1) {
newHoverIndex = oldHoverIndex + 1;
}
// else if we are moving up and there is a prev item then move
else if(e.keyCode == 38 && oldHoverIndex > 0) {
newHoverIndex = oldHoverIndex - 1;
}
if(newHoverIndex >= 0) {
// Highlight navigated option
$(allOptions).removeClass('hover'); // remove old highlights
$(allOptions.get(newHoverIndex)).addClass('hover'); // add the new highlight
lastNavTabKeyCheckbox = null;
// Adjust the viewport if necessary
adjustViewPort(optionsBox);
}
return false;
}
// Page up || Page down
if( e.keyCode == 33 || e.keyCode == 34) {
var oldHoverIndex = allOptions.index(allOptions.filter('.hover'));
var newHoverIndex = -1;
var optionsPerPage = 8; // depends on css
// if we are moving up and there is a prev item then move
if(e.keyCode == 33 && oldHoverIndex > 0) {
newHoverIndex = oldHoverIndex - optionsPerPage;
if(newHoverIndex < 0) {
newHoverIndex = 0;
}
}
if(e.keyCode == 34 && oldHoverIndex < allOptions.length - 1) {
newHoverIndex = oldHoverIndex + optionsPerPage;
if(newHoverIndex > allOptions.length - 1) {
newHoverIndex = allOptions.length - 1;
}
}
// Highlight navigated option
$(allOptions).removeClass('hover'); // remove all highlights
$(allOptions.get(newHoverIndex)).addClass('hover'); // add the new highlight
lastNavTabKeyCheckbox = null;
// Adjust the viewport if necessary
adjustViewPort(optionsBox);
return false;
}
// --- Selection with Keyboard ---
// Enter, Space
if( e.keyCode == 13 || e.keyCode == 32 ) {
var selectedCheckbox = optionsBox.find('LABEL.hover INPUT:checkbox');
// Set the checkbox (and label class)
selectedCheckbox.attr('checked', !selectedCheckbox.attr('checked')).parent('LABEL').toggleClass('checked', selectedCheckbox.attr('checked'));
// Highlight selected option
// placeholder
// Refocus
// placeholder
updateSelected.call(optionsBox);
return false;
}
// Any other standard keyboard character (try and match the first character of an option)
if( e.keyCode >= 33 && e.keyCode <= 126 ) {
// find the next matching item after the current hovered item
var match = optionsBox.find('LABEL:startsWith(' + String.fromCharCode(e.keyCode) + ')');
var currentHoverIndex = match.index(match.filter('LABEL.hover'));
// filter the set to any items after the current hovered item
var afterHoverMatch = match.filter(function (index) {
return index > currentHoverIndex;
});
// if there were no item after the current hovered item then try using the full search results (filtered to the first one)
match = (afterHoverMatch.length >= 1 ? afterHoverMatch : match).filter("LABEL:first");
if(match.length == 1) {
// if we found a match then move the hover
// Highlight navigated option
$(allOptions).removeClass('hover'); // remove all highlights
match.addClass('hover'); // add the new highlight
lastNavTabKeyCheckbox = null;
adjustViewPort(optionsBox);
}
}
// Prevent enter key from submitting form
if (e.keyCode == 13) {
return false;
}
});
}
// Scroll the viewport div if necessary
function adjustViewPort(optionsBox) {
// check for and move scrollbar down, content up
var hoverTop = optionsBox.find('LABEL.hover').position().top;
var hoverHeight = optionsBox.find('LABEL.hover').outerHeight();
var selectionBottom = hoverTop + hoverHeight;
// The integer 18 is a manual approximation for typical scale,
// since there's extra padding at the top of the div.optionsBox
// which is not showing up anywhere quantitatively.
// Could use improvement.
var optionsHeight = optionsBox.outerHeight() + 18;
var optionsScrollTop = optionsBox.scrollTop();
if(selectionBottom > optionsHeight) {
optionsBox.scrollTop(optionsScrollTop + selectionBottom - optionsHeight);
}
// check for and move scrollbar up, content down
var hoveredTop = optionsBox.find('LABEL.hover').position().top;
var optionsTop = optionsBox.position().top;
optionsScrollTop = optionsBox.scrollTop();
if(hoveredTop < optionsTop) {
optionsBox.scrollTop(optionsScrollTop + hoveredTop - optionsTop);
}
}
// Update heading with the total number of selected items
function updateSelected() {
var optionsBox = $(this);
var multiSelectA = optionsBox.next('.multiSelectA');
var i = 0;
var display = '';
optionsBox.find('INPUT:checkbox').not('.selectAll, .optGroup').each( function() {
if ($(this).attr('checked')) {
i++;
display = display +
'' +
$(this).parent().text() +
'
';
}
else {
selectAll = false;
}
});
if( i === 0 ) {
$("#selectedTagsHeading").html( $("#noTagsSelected").text() );
$("#selectedTags").text('');
} else {
$("#selectedTags").html( display );
$("#selectedTagsHeading").html( $("#oneOrMoreTagsSelected").text().replace('%', i) );
}
}
$.extend($.fn, {
multiSelect: function() {
// Initialize each optionsBox
$(this).each( function() {
var select = $(this);
var html = '';
// Overflow-y: auto enables the scrollbar, like a multiple-select
html += '';
// Anchor originally used for dropdown.
// Will try to remove after refactoring to be more modular and testable with QUnit,
// although this element may need to stay to hold focus for mouse & arrow key navigation.
html += '