feat(multiselect): auto-adjust height, width & position of multiple-select.js

[ghiscoding]

• add few new flags directly in multiple-select.js and remove previous code (that was not always working) new flags are:
  • autoAdjustDropHeight
  • autoAdjustDropPosition
  • autoAdjustDropWidthByTextSize
• also in multiple-select.js you might want to use certain minimum or maximum height/width, so we also added the following options:
  • minWidth (defaults to null, to use when autoAdjustDropWidthByTextSize is enabled)
  • maxWidth (defaults to 500, to use when autoAdjustDropWidthByTextSize is enabled)
  • adjustHeightPadding (defaults to 10, to use when autoAdjustDropHeight is enabled)
  • maxHeight (defaults to 275, to use when autoAdjustDropHeight is enabled)
• removed duplicate code in Select Filters & Editors to toggling drop position (top/bottom) and replace it all by simply these 3 new flags and set them all to true
• fixed Select Editors having an extra offset to the left
• selectEditor & selectFilter now use these new autoDropX all true by default, though user can choose at any to change them in their grids

Default Behaviors

• autoAdjustDropWidthByTextSize will loop through every text from the collection and calculate it's maximum width.
  1. if new calculated width is smaller than the "Select All" text (this text can also be changed), it will instead use the width of the "Select All" text width.
  2. if new calculated width is bigger than maxWidth, it will instead use the maxWidth value.
  3. if new calculated width is smaller than minWidth, it will instead use the minWidth value.
  4. if the new calculate width is smaller than the select DOM element, it will use the select element width in this case
  5. finally if none of the previous validations (1-4) kicked in, we'll use the new calculated value
• autoAdjustDropHeight is enabled and autoAdjustDropPosition is enabled
  1. if bottom area has enough space to show drop at the bottom, it will use bottom position, since it always prioritize the bottom area before the top.
  2. if bottom area is not big enough to contain the drop with the maxHeight, it will then choose which of the area has the most space (top or bottom)
  3. now that we know the position that will be used, we can calculate new drop height and resize it
• autoAdjustDropHeight is enabled and autoAdjustDropPosition is disabled
  1. simply calculate available space from the actual position to use (bottom is default but there is an option to change it as well)