MultiSelect.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. /*
  2. Copyright (c) 2004-2012, The Dojo Foundation All Rights Reserved.
  3. Available via Academic Free License >= 2.1 OR the modified BSD license.
  4. see: http://dojotoolkit.org/license for details
  5. */
  6. if(!dojo._hasResource["dijit.form.MultiSelect"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
  7. dojo._hasResource["dijit.form.MultiSelect"] = true;
  8. dojo.provide("dijit.form.MultiSelect");
  9. dojo.require("dijit.form._FormWidget");
  10. dojo.declare("dijit.form.MultiSelect", dijit.form._FormValueWidget, {
  11. // summary:
  12. // Widget version of a <select multiple=true> element,
  13. // for selecting multiple options.
  14. // size: Number
  15. // Number of elements to display on a page
  16. // NOTE: may be removed in version 2.0, since elements may have variable height;
  17. // set the size via style="..." or CSS class names instead.
  18. size: 7,
  19. templateString: "<select multiple='true' ${!nameAttrSetting} dojoAttachPoint='containerNode,focusNode' dojoAttachEvent='onchange: _onChange'></select>",
  20. attributeMap: dojo.delegate(dijit.form._FormWidget.prototype.attributeMap, {
  21. size: "focusNode"
  22. }),
  23. reset: function(){
  24. // summary:
  25. // Reset the widget's value to what it was at initialization time
  26. // TODO: once we inherit from FormValueWidget this won't be needed
  27. this._hasBeenBlurred = false;
  28. this._setValueAttr(this._resetValue, true);
  29. },
  30. addSelected: function(/*dijit.form.MultiSelect*/ select){
  31. // summary:
  32. // Move the selected nodes of a passed Select widget
  33. // instance to this Select widget.
  34. //
  35. // example:
  36. // | // move all the selected values from "bar" to "foo"
  37. // | dijit.byId("foo").addSelected(dijit.byId("bar"));
  38. select.getSelected().forEach(function(n){
  39. this.containerNode.appendChild(n);
  40. // scroll to bottom to see item
  41. // cannot use scrollIntoView since <option> tags don't support all attributes
  42. // does not work on IE due to a bug where <select> always shows scrollTop = 0
  43. this.domNode.scrollTop = this.domNode.offsetHeight; // overshoot will be ignored
  44. // scrolling the source select is trickier esp. on safari who forgets to change the scrollbar size
  45. var oldscroll = select.domNode.scrollTop;
  46. select.domNode.scrollTop = 0;
  47. select.domNode.scrollTop = oldscroll;
  48. },this);
  49. },
  50. getSelected: function(){
  51. // summary:
  52. // Access the NodeList of the selected options directly
  53. return dojo.query("option",this.containerNode).filter(function(n){
  54. return n.selected; // Boolean
  55. }); // dojo.NodeList
  56. },
  57. _getValueAttr: function(){
  58. // summary:
  59. // Hook so get('value') works.
  60. // description:
  61. // Returns an array of the selected options' values.
  62. return this.getSelected().map(function(n){
  63. return n.value;
  64. });
  65. },
  66. multiple: true, // for Form
  67. _setValueAttr: function(/*Array*/ values){
  68. // summary:
  69. // Hook so set('value', values) works.
  70. // description:
  71. // Set the value(s) of this Select based on passed values
  72. dojo.query("option",this.containerNode).forEach(function(n){
  73. n.selected = (dojo.indexOf(values,n.value) != -1);
  74. });
  75. },
  76. invertSelection: function(onChange){
  77. // summary:
  78. // Invert the selection
  79. // onChange: Boolean
  80. // If null, onChange is not fired.
  81. dojo.query("option",this.containerNode).forEach(function(n){
  82. n.selected = !n.selected;
  83. });
  84. this._handleOnChange(this.get('value'), onChange == true);
  85. },
  86. _onChange: function(/*Event*/ e){
  87. this._handleOnChange(this.get('value'), true);
  88. },
  89. // for layout widgets:
  90. resize: function(/*Object*/ size){
  91. if(size){
  92. dojo.marginBox(this.domNode, size);
  93. }
  94. },
  95. postCreate: function(){
  96. this._onChange();
  97. }
  98. });
  99. }