r13299 - Products.Archetypes/branches/plip11017-tag-selector-rmattb/Products/Archetypes/skins/archetypes/widgets/js
"Matt Barkau" <[email protected]>
| Newsgroups | gmane.comp.web.zope.plone.archetypes.cvs |
|---|---|
| Message-ID | <[email protected]> |
Author: rmattb
Date: Sat Nov 27 05:52:58 2010
New Revision: 13299
Modified:
Products.Archetypes/branches/plip11017-tag-selector-rmattb/Products/Archetypes/skins/archetypes/widgets/js/keywordmultiselect.js
Log:
Reduced size from 25KB unpacked to 17KB by removing code only used for dropdown & other functionality outside of tagging. Size can be further reduced to ___ if FWT prefers not to include the remove selected tag functionality (red X icon).. Refs #11017.
Modified: Products.Archetypes/branches/plip11017-tag-selector-rmattb/Products/Archetypes/skins/archetypes/widgets/js/keywordmultiselect.js
==============================================================================
--- Products.Archetypes/branches/plip11017-tag-selector-rmattb/Products/Archetypes/skins/archetypes/widgets/js/keywordmultiselect.js (original)
+++ Products.Archetypes/branches/plip11017-tag-selector-rmattb/Products/Archetypes/skins/archetypes/widgets/js/keywordmultiselect.js Sat Nov 27 05:52:58 2010
@@ -11,16 +11,15 @@
//
// (Amended by Andy Richmond, Letters & Science Deans' Office, University of California, Davis)
//
-// Usage: $('#control_id').multiSelect( arguments, callback )
+// (Amended and trimmed for the Plone open source CMS by Matt Barkau, WebLion Group, PSU.edu)
//
-// Arguments:selectAll - whether or not to display the Select All checkbox; true/false, default = true
-// selectAllText - text to display for selecting/unselecting all checkboxes simultaneously
+// Usage: $('#control_id').multiSelect( arguments )
+//
+// Arguments:
// noneSelected - text to display when there are no selected items in the list
// oneOrMoreSelected - text to display when there are one or more selected items in the list
// (note: you can use % as a placeholder for the number of items selected).
// Use * to show a comma separated list of all selected; default = '% selected'
-// optGroupSelectable - whether or not optgroups are selectable if you use them; true/false, default = false
-// listHeightPx - the max height of the dropdown box
//
// Dependencies: jQuery 1.2.6 or higher (http://jquery.com/)
//
@@ -34,22 +33,13 @@
// - Renamed from jqueryMultiSelect.* to jquery.multiSelect.* per the standard recommended at
// http://docs.jquery.com/Plugins/Authoring (does not affect API methods)
//
-// 1.0.3 - Now uses the bgiframe plugin (if it exists) to fix the IE6 layering bug.
-// - Forces IE6 to use a min-height of 200px (this needs to be added to the arguments)
-//
// 1.1.0 - Added the ability to update the options dynamically via javascript: multiSelectOptionsUpdate(JSON)
// - Added a title that displays the whole comma delimited list when using oneOrMoreSelected = *
// - Moved some of the functions to be closured to make them private
// - Changed the way the keyboard navigation worked to more closely match how a standard dropdown works
// - ** by Andy Richmond **
//
-// 1.2.0 - Added support for optgroups
-// - Added the ability for selectable optgroups (i.e. select all for an optgroup)
-// - ** by Andy Richmond **
-//
// 1.2.1 - Fixed bug where input text overlapped dropdown arrow in IE (i.e. when using oneOrMoreSelected = *)
-// - Added argument "listHeightPx" for max-height of the dropdown
-// - Fixed bug where bgiframe was causing a horizontal scrollbar and on short lists extra whitespace below the checkboxes
// - ** by Andy Richmond **
//
// 1.2.2 - Fixed bug where the keypress stopped showing the dropdown because in jQuery 1.3.2 they changed the way ':visible' works
@@ -79,7 +69,6 @@
html += ' checked="checked"';
}
html += ' />' + option.text + '</label></dd>';
-
return html;
}
@@ -87,29 +76,9 @@
function renderOptions(id, options, o, selectName)
{
var html = "";
-
for(var i = 0; i < options.length; i++) {
- if(options[i].optgroup) {
- html += '<label class="optGroup">';
-
- if(o.optGroupSelectable) {
- html += '<input type="checkbox" class="optGroup" />' + options[i].optgroup;
- }
- else {
- html += options[i].optgroup;
- }
-
- html += '</label><div class="optGroupContainer">';
-
- html += renderOptions(id, options[i].options, o);
-
- html += '</div>';
- }
- else {
- html += renderOption(id, options[i], i, selectName);
- }
+ html += renderOption(id, options[i], i, selectName);
}
-
return html;
}
@@ -119,66 +88,16 @@
var multiSelect = $(this);
var multiSelectOptions = multiSelect.next('.multiSelectOptions');
var o = multiSelect.data("config");
- var callback = multiSelect.data("callback");
// clear the existing options
multiSelectOptions.html("");
var html = "";
- // if we should have a select all option then add it
- if( o.selectAll ) {
- html += '<label class="selectAll"><input type="checkbox" class="selectAll" />' + o.selectAllText + '</label>';
- }
-
// generate the html for the new options
html += renderOptions(multiSelect.attr('id'), options, o, multiSelect.attr('name'));
multiSelectOptions.html(html);
- // variables needed to account for width changes due to a scrollbar
- var initialWidth = multiSelectOptions.width();
- var hasScrollbar = false;
-
- // set the max height of the dropdown options
- if(multiSelectOptions.height() > o.listHeightPx) {
- multiSelectOptions.css("height", o.listHeightPx + 'px');
- hasScrollbar = true;
- } else {
- multiSelectOptions.css("height", '');
- }
-
- // if the there is a scrollbar and the browser did not already handle adjusting the width (i.e. Firefox) then we will need to manaually add the scrollbar width
- var scrollbarWidth = hasScrollbar && (initialWidth == multiSelectOptions.width()) ? 17 : 0;
-
- // only needed with a drop down:
- // set the width of the dropdown options
- //if((multiSelectOptions.width() + scrollbarWidth) < multiSelect.outerWidth()) {
- //multiSelectOptions.css("width", multiSelect.outerWidth() - 2/*border*/ + 'px');
- //} else {
- //multiSelectOptions.css("width", (multiSelectOptions.width() + scrollbarWidth) + 'px');
- //}
-
- // Apply bgiframe if available on IE6
- if( $.fn.bgiframe ) multiSelect.next('.multiSelectOptions').bgiframe( { width: multiSelectOptions.width(), height: multiSelectOptions.height() });
-
- // Handle selectAll oncheck
- if(o.selectAll) {
- multiSelectOptions.find('INPUT.selectAll').click( function() {
- // update all the child checkboxes
- multiSelectOptions.find('INPUT:checkbox').attr('checked', $(this).attr('checked')).parent("LABEL").toggleClass('checked', $(this).attr('checked'));
- });
- }
-
- // Handle OptGroup oncheck
- if(o.optGroupSelectable) {
- multiSelectOptions.addClass('optGroupHasCheckboxes');
-
- multiSelectOptions.find('INPUT.optGroup').click( function() {
- // update all the child checkboxes
- $(this).parent().next().find('INPUT:checkbox').attr('checked', $(this).attr('checked')).parent("LABEL").toggleClass('checked', $(this).attr('checked'));
- });
- }
-
// Handle all checkboxes
multiSelectOptions.find('INPUT:checkbox').click( function() {
// set the label checked class
@@ -196,9 +115,6 @@
if($(this).parent().parent().hasClass('optGroupContainer')) {
updateOptGroup.call(multiSelect, $(this).parent().parent().prev());
}
- if( callback ) {
- callback($(this));
- }
});
// Initial display
@@ -206,20 +122,14 @@
$(this).find('INPUT:checked').parent().addClass('checked');
});
- // Initialize selected and select all
+ // Initialize selected
updateSelected.call(multiSelect);
- // Initialize optgroups
- if(o.optGroupSelectable) {
- multiSelectOptions.find('LABEL.optGroup').each( function() {
- updateOptGroup.call(multiSelect, $(this));
- });
- }
-
// Handle hovers (entering an option) *and* mouse moving within an option
multiSelectOptions.find('LABEL').mousemove( function(e) {
// Workaround Safari's errant reporting of mousemove when the mouse hasn't moved.
// At this point, the browser is saying that the mouse moved.
+ // Initialize position variables.
if(multiSelect.oldPositionX == null || multiSelect.oldPositionY == null) {
multiSelect.oldPositionX = e.pageX;
multiSelect.oldPositionY = e.pageY;
@@ -268,21 +178,6 @@
if( multiSelectOptions.css('visibility') != 'hidden' ) {
// Dropdown is visible
- // Tab
- // When tabbing, this key-detecting code is currently never invoked,
- // because tabbing gives focus to the checkbox, not the multiSelect.
- if( e.keyCode == 9 ) {
- $(this).addClass('focus').trigger('click'); // esc, left, right - hide
- $(this).focus().next(':input').focus();
- return true;
- }
-
- // ESC, Left, Right
- if( e.keyCode == 27 || e.keyCode == 37 || e.keyCode == 39 ) {
- // Hide dropdown
- $(this).addClass('focus').trigger('click');
- }
-
// Down || Up
if( e.keyCode == 40 || e.keyCode == 38) {
var allOptions = multiSelectOptions.find('LABEL');
@@ -357,8 +252,6 @@
}
updateSelected.call(multiSelect);
-
- if( callback ) callback($(this));
return false;
}
@@ -386,20 +279,6 @@
adjustViewPort(multiSelectOptions);
}
}
- } else {
- // Dropdown is not visible
- if( e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 13 || e.keyCode == 32 ) { //up, down, enter, space - show
- // Show dropdown
- $(this).removeClass('focus').trigger('click');
- multiSelectOptions.find('LABEL:first').addClass('hover');
- return false;
- }
- // Tab key
- if( e.keyCode == 9 ) {
- // Shift focus to next INPUT element on page
- multiSelectOptions.next(':input').focus();
- return true;
- }
}
// Prevent enter key from submitting form
if( e.keyCode == 13 ) return false;
@@ -432,32 +311,11 @@
}
}
- // Update the optgroup checked status
- function updateOptGroup(optGroup)
- {
- var multiSelect = $(this);
- var o = multiSelect.data("config");
-
- // Determine if the optgroup should be checked
- if(o.optGroupSelectable) {
- var optGroupSelected = true;
- $(optGroup).next().find('INPUT:checkbox').each( function() {
- if( !$(this).attr('checked') ) {
- optGroupSelected = false;
- return false;
- }
- });
-
- $(optGroup).find('INPUT.optGroup').attr('checked', optGroupSelected).parent("LABEL").toggleClass('checked', optGroupSelected);
- }
- }
-
- // Update the textbox with the total number of selected items, and determine select all
+ // Update the textbox with the total number of selected items
function updateSelected() {
var multiSelect = $(this);
var multiSelectOptions = multiSelect.next('.multiSelectOptions');
var o = multiSelect.data("config");
-
var i = 0;
var selectAll = true;
var display = '';
@@ -479,48 +337,28 @@
else selectAll = false;
});
- // trim any end comma and surounding whitespace
- display = display.replace(/\s*\,\s*$/,'');
-
if( i == 0 ) {
$("#selectedTagsHeading").html( o.noneSelected );
$("#selectedTags").text('');
} else {
- //if( o.oneOrMoreSelected == '*' ) {
- $("#selectedTags").html( display )
- //multiSelect.find("span").html( display );
- //multiSelect.attr( "title", display );
- //} else {
- $("#selectedTagsHeading").html( o.oneOrMoreSelected.replace('%', i) );
- //}
- }
-
- // Determine if Select All should be checked
- if(o.selectAll) {
- multiSelectOptions.find('INPUT.selectAll').attr('checked', selectAll).parent("LABEL").toggleClass('checked', selectAll);
+ $("#selectedTags").html( display )
+ $("#selectedTagsHeading").html( o.oneOrMoreSelected.replace('%', i) );
}
}
$.extend($.fn, {
- multiSelect: function(o, callback) {
+ multiSelect: function(o) {
// Default options
if( !o ) o = {};
- if( o.selectAll == undefined ) o.selectAll = true;
- if( o.optGroupSelectable == undefined ) o.optGroupSelectable = false;
- if( o.listHeightPx == undefined ) o.listHeightPx = 150;
// Initialize each multiSelect
$(this).each( function() {
var select = $(this);
- // only used for dropdown
+ // anchor originally used for dropdown
var html = '<a href="javascript:;" class="multiSelect" tabindex="1"><span></span></a>';
html += ' \
<div class="multiSelectOptions" tabindex="9999" style=" \
- /* width: 55% !important; not needed with separate css */ \
- /*position: absolute; may not be needed */ \
overflow-y: auto; /* enables the scrollbar, like a multiple-select */ \
- /* overflow-x: hidden; - others use this, but it wouldn\'t do anything here, since the text wraps, desirably */ \
- /* border: 1px solid #999999; not needed with separate css */ \
"> \
</div> \
<!-- display:block makes the blank area to the right of the text clickable, like a multiple-select --> \
@@ -531,36 +369,14 @@
var multiSelect = $(select).next('.multiSelect');
var multiSelectOptions = multiSelect.next('.multiSelectOptions');
- // if the select object had a width defined then match the new multilsect to it
- //multiSelect.find("span").css("width", $(select).width() + 'px');
-
// Attach the config options to the multiselect
multiSelect.data("config", o);
- // Attach the callback to the multiselect
- multiSelect.data("callback", callback);
-
// Serialize the select options into json options
- // This may be the slowest part of this js,
- // and is not currently used in Plone.
var options = [];
$(select).children().each( function() {
- if(this.tagName.toUpperCase() == 'OPTGROUP')
- {
- var suboptions = [];
- options.push({ optgroup: $(this).attr('label'), options: suboptions });
-
- $(this).children('OPTION').each( function() {
- if( $(this).val() != '' ) {
- suboptions.push({ text: $(this).html(), value: $(this).val(), selected: $(this).attr('selected') });
- }
- });
- }
- else if(this.tagName.toUpperCase() == 'OPTION')
- {
- if( $(this).val() != '' ) {
- options.push({ text: $(this).html(), value: $(this).val(), selected: $(this).attr('selected') });
- }
+ if( $(this).val() != '' ) {
+ options.push({ text: $(this).html(), value: $(this).val(), selected: $(this).attr('selected') });
}
});
@@ -579,20 +395,9 @@
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
- // only needed with a drop down:
- //}).click( function() {
- // Show/hide on click
- //if( $(this).hasClass('active') ) {
- //$(this).multiSelectOptionsHide();
- //} else {
- //$(this).multiSelectOptionsShow();
- //}
- //return false;
}).focus( function() {
- // So it can be styled with CSS
$(this).addClass('focus');
}).blur( function() {
- // So it can be styled with CSS
$(this).removeClass('focus');
});
@@ -606,14 +411,6 @@
updateSelected.call(multiSelect);
});
- // only needed with a drop down:
- // Add an event listener to the window to close the multiselect if the user clicks off
- //$(document).click( function(event) {
- // If somewhere outside of the multiselect was clicked then hide the multiselect
- //if(!($(event.target).parents().andSelf().is('.multiSelectOptions'))){
- //multiSelect.multiSelectOptionsHide();
- //}
- //});
});
},
@@ -622,34 +419,16 @@
buildOptions.call($(this), options);
},
- // Hide the dropdown
- //multiSelectOptionsHide: function() {
- //$(this).removeClass('active').removeClass('hover').next('.multiSelectOptions').css('visibility', 'hidden');
- //},
-
- // Show the dropdown
+ // Show the dropdown list box
multiSelectOptionsShow: function() {
var multiSelect = $(this);
var multiSelectOptions = multiSelect.next('.multiSelectOptions');
var o = multiSelect.data("config");
-
- // only needed with a drop down:
- // Hide any open option boxes
- //$('.multiSelect').multiSelectOptionsHide();
- //multiSelectOptions.find('LABEL').removeClass('hover');
- //multiSelect.addClass('active').next('.multiSelectOptions').css('visibility', 'visible');
- //multiSelect.focus();
-
// reset the scroll to the top
multiSelect.next('.multiSelectOptions').scrollTop(0);
-
- // Position it
- var offset = multiSelect.position();
- multiSelect.next('.multiSelectOptions').css({ top: offset.top + $(this).outerHeight() + 'px' });
- multiSelect.next('.multiSelectOptions').css({ left: offset.left + 'px' });
},
- // get a coma-delimited list of selected values
+ // get a comma-delimited list of selected values
selectedValuesString: function() {
var selectedValues = "";
$(this).next('.multiSelectOptions').find('INPUT:checkbox:checked').not('.optGroup, .selectAll')(function() {
------------------------------------------------------------------------------
Increase Visibility of Your 3D Game App & Earn a Chance To Win $500!
Tap into the largest installed PC base & get more eyes on your game by
optimizing for Intel(R) Graphics Technology. Get started today with the
Intel(R) Software Partner Program. Five $500 cash prizes are up for grabs.
http://p.sf.net/sfu/intelisp-dev2dev