Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added the ability to add custom classes to the main elements #334

Merged
merged 3 commits into from
Jun 5, 2024
Merged

Added the ability to add custom classes to the main elements #334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dc1b07f
Add new properties additionalDropboxClasses and additionalToggleButto…
gnbm Apr 25, 2024
d1d23b0
Added new option additionalDropboxContainerClasses
gnbm May 3, 2024
140fda5
Update virtual-select.types.js
gnbm May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions docs/assets/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -351,4 +351,13 @@ function initPageExamples() {
alert('Form submitted');
}
});

initVirtualSelect({
ele: '#custom-styling-select',
multiple: true,
additionalClasses: 'custom-wrapper',
additionalDropboxClasses: 'custom-dropbox',
additionalDropboxContainerClasses: 'custom-dropbox-container',
additionalToggleButtonClasses: 'custom-toggle-button',
});
}
31 changes: 28 additions & 3 deletions docs/assets/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,10 @@ section.cover {

.get-started-example {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 600px;
margin: 30px auto 0;
flex-wrap: wrap;
max-width: 600px;
}

.get-started-example .vscomp-ele {
Expand All @@ -124,8 +124,8 @@ section.cover {
}

.vscomp-wrapper.text-direction-rtl .vscomp-option-text .flag {
margin-right: 0;
margin-left: 12px;
margin-right: 0;
}

#show-value-as-tags-select,
Expand All @@ -136,3 +136,28 @@ section.cover {
#validation-select {
margin-bottom: 20px;
}

/* utility classes - start */

.custom-wrapper {
padding: 0 0 10px;
}

.custom-dropbox {
border: 1px solid var(--theme-color, #42b983);
border-radius: 14px;
color: var(--theme-color, #42b983);
overflow-y: auto;
}

.custom-dropbox-container {
border-radius: 14px;
}

.custom-toggle-button {
border-color: var(--theme-color, #42b983);
border-radius: 14px;
color: var(--theme-color, #42b983);
}

/* utility classes - end */
24 changes: 21 additions & 3 deletions docs/assets/virtual-select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -638,7 +638,7 @@ var keyDownMethodMapping = {
var valueLessProps = ['autofocus', 'disabled', 'multiple', 'required'];
var nativeProps = ['autofocus', 'class', 'disabled', 'id', 'multiple', 'name', 'placeholder', 'required'];
var attrPropsMapping;
var dataProps = ['additionalClasses', 'aliasKey', 'allOptionsSelectedText', 'allowNewOption', 'alwaysShowSelectedOptionsCount', 'alwaysShowSelectedOptionsLabel', 'ariaLabelledby', 'ariaLabelText', 'ariaLabelClearButtonText', 'autoSelectFirstOption', 'clearButtonText', 'descriptionKey', 'disableAllOptionsSelectedText', 'disableOptionGroupCheckbox', 'disableSelectAll', 'disableValidation', 'dropboxWidth', 'dropboxWrapper', 'emptyValue', 'enableSecureText', 'focusSelectedOptionOnOpen', 'hasOptionDescription', 'hideClearButton', 'hideValueTooltipOnSelectAll', 'keepAlwaysOpen', 'labelKey', 'markSearchResults', 'maxValues', 'maxWidth', 'minValues', 'moreText', 'noOfDisplayValues', 'noOptionsText', 'noSearchResultsText', 'optionHeight', 'optionSelectedText', 'optionsCount', 'optionsSelectedText', 'popupDropboxBreakpoint', 'popupPosition', 'position', 'search', 'searchByStartsWith', 'searchDelay', 'searchFormLabel', 'searchGroup', 'searchNormalize', 'searchPlaceholderText', 'selectAllOnlyVisible', 'selectAllText', 'setValueAsArray', 'showDropboxAsPopup', 'showOptionsOnlyOnSearch', 'showSelectedOptionsFirst', 'showValueAsTags', 'silentInitialValueSet', 'textDirection', 'tooltipAlignment', 'tooltipFontSize', 'tooltipMaxWidth', 'updatePositionThrottle', 'useGroupValue', 'valueKey', 'zIndex'];
var dataProps = ['additionalClasses', 'additionalDropboxClasses', 'additionalDropboxContainerClasses', 'additionalToggleButtonClasses', 'aliasKey', 'allOptionsSelectedText', 'allowNewOption', 'alwaysShowSelectedOptionsCount', 'alwaysShowSelectedOptionsLabel', 'ariaLabelledby', 'ariaLabelText', 'ariaLabelClearButtonText', 'autoSelectFirstOption', 'clearButtonText', 'descriptionKey', 'disableAllOptionsSelectedText', 'disableOptionGroupCheckbox', 'disableSelectAll', 'disableValidation', 'dropboxWidth', 'dropboxWrapper', 'emptyValue', 'enableSecureText', 'focusSelectedOptionOnOpen', 'hasOptionDescription', 'hideClearButton', 'hideValueTooltipOnSelectAll', 'keepAlwaysOpen', 'labelKey', 'markSearchResults', 'maxValues', 'maxWidth', 'minValues', 'moreText', 'noOfDisplayValues', 'noOptionsText', 'noSearchResultsText', 'optionHeight', 'optionSelectedText', 'optionsCount', 'optionsSelectedText', 'popupDropboxBreakpoint', 'popupPosition', 'position', 'search', 'searchByStartsWith', 'searchDelay', 'searchFormLabel', 'searchGroup', 'searchNormalize', 'searchPlaceholderText', 'selectAllOnlyVisible', 'selectAllText', 'setValueAsArray', 'showDropboxAsPopup', 'showOptionsOnlyOnSearch', 'showSelectedOptionsFirst', 'showValueAsTags', 'silentInitialValueSet', 'textDirection', 'tooltipAlignment', 'tooltipFontSize', 'tooltipMaxWidth', 'updatePositionThrottle', 'useGroupValue', 'valueKey', 'zIndex'];

/** Class representing VirtualSelect */
var VirtualSelect = /*#__PURE__*/function () {
Expand Down Expand Up @@ -670,6 +670,7 @@ var VirtualSelect = /*#__PURE__*/function () {
}
var uniqueId = this.uniqueId;
var wrapperClasses = 'vscomp-wrapper';
var toggleButtonClasses = 'vscomp-toggle-button';
var valueTooltip = this.showValueAsTags ? '' : this.getTooltipAttrText(this.placeholder, true, true);
var clearButtonTooltip = this.getTooltipAttrText(this.clearButtonText);
var ariaLabelledbyText = this.ariaLabelledby ? "aria-labelledby=\"".concat(this.ariaLabelledby, "\"") : '';
Expand All @@ -679,6 +680,9 @@ var VirtualSelect = /*#__PURE__*/function () {
if (this.additionalClasses) {
wrapperClasses += " ".concat(this.additionalClasses);
}
if (this.additionalToggleButtonClasses) {
toggleButtonClasses += " ".concat(this.additionalToggleButtonClasses);
}
if (this.multiple) {
wrapperClasses += ' multiple';
if (!this.disableSelectAll) {
Expand Down Expand Up @@ -711,7 +715,7 @@ var VirtualSelect = /*#__PURE__*/function () {
}

// eslint-disable-next-line no-trailing-spaces
var html = "<div id=\"vscomp-ele-wrapper-".concat(uniqueId, "\" class=\"vscomp-ele-wrapper ").concat(wrapperClasses, "\" tabindex=\"0\"\n role=\"combobox\" aria-haspopup=\"listbox\" aria-controls=\"vscomp-dropbox-container-").concat(uniqueId, "\"\n aria-expanded=\"").concat(isExpanded, "\" ").concat(ariaLabelledbyText, " ").concat(ariaLabelText, ">\n <input type=\"hidden\" name=\"").concat(this.name, "\" class=\"vscomp-hidden-input\">\n <div class=\"vscomp-toggle-button\">\n <div class=\"vscomp-value\" ").concat(valueTooltip, ">\n ").concat(this.placeholder, "\n </div>\n <div class=\"vscomp-arrow\"></div>\n <div class=\"vscomp-clear-button toggle-button-child\" ").concat(clearButtonTooltip, " \n tabindex=\"0\" ").concat(ariaLabelClearBtnTxt, ">\n <i class=\"vscomp-clear-icon\"></i>\n </div>\n </div>\n\n ").concat(this.renderDropbox({
var html = "<div id=\"vscomp-ele-wrapper-".concat(uniqueId, "\" class=\"vscomp-ele-wrapper ").concat(wrapperClasses, "\" tabindex=\"0\"\n role=\"combobox\" aria-haspopup=\"listbox\" aria-controls=\"vscomp-dropbox-container-").concat(uniqueId, "\"\n aria-expanded=\"").concat(isExpanded, "\" ").concat(ariaLabelledbyText, " ").concat(ariaLabelText, ">\n <input type=\"hidden\" name=\"").concat(this.name, "\" class=\"vscomp-hidden-input\">\n <div class=\"").concat(toggleButtonClasses, "\">\n <div class=\"vscomp-value\" ").concat(valueTooltip, ">\n ").concat(this.placeholder, "\n </div>\n <div class=\"vscomp-arrow\"></div>\n <div class=\"vscomp-clear-button toggle-button-child\" ").concat(clearButtonTooltip, " \n tabindex=\"0\" ").concat(ariaLabelClearBtnTxt, ">\n <i class=\"vscomp-clear-icon\"></i>\n </div>\n </div>\n\n ").concat(this.renderDropbox({
wrapperClasses: wrapperClasses
}), "\n </div>");
this.$ele.innerHTML = html;
Expand Down Expand Up @@ -746,9 +750,17 @@ var VirtualSelect = /*#__PURE__*/function () {
value: function renderDropbox(_ref) {
var wrapperClasses = _ref.wrapperClasses;
var $wrapper = this.dropboxWrapper !== 'self' ? document.querySelector(this.dropboxWrapper) : null;
var dropboxClasses = 'vscomp-dropbox';
if (this.additionalDropboxClasses) {
dropboxClasses += " ".concat(this.additionalDropboxClasses);
}
var dropboxContainerClasses = 'vscomp-dropbox-container';
if (this.additionalDropboxContainerClasses) {
dropboxContainerClasses += " ".concat(this.additionalDropboxContainerClasses);
}

// eslint-disable-next-line no-trailing-spaces
var html = "<div id=\"vscomp-dropbox-container-".concat(this.uniqueId, "\" role=\"listbox\" class=\"vscomp-dropbox-container\">\n <div class=\"vscomp-dropbox-container-top\" aria-hidden=\"true\" tabindex=\"0\">&nbsp;</div>\n <div class=\"vscomp-dropbox\">\n <div class=\"vscomp-search-wrapper\"></div>\n\n <div class=\"vscomp-options-container\">\n <div class=\"vscomp-options-loader\"></div>\n\n <div class=\"vscomp-options-list\">\n <div class=\"vscomp-options\"></div>\n </div>\n </div>\n\n <div class=\"vscomp-options-bottom-freezer\"></div>\n <div class=\"vscomp-no-options\">").concat(this.noOptionsText, "</div>\n <div class=\"vscomp-no-search-results\">").concat(this.noSearchResultsText, "</div>\n\n <span class=\"vscomp-dropbox-close-button\"><i class=\"vscomp-clear-icon\"></i></span>\n </div>\n <div class=\"vscomp-dropbox-container-bottom\" aria-hidden=\"true\" tabindex=\"0\">&nbsp;</div>\n </div>");
var html = "<div id=\"vscomp-dropbox-container-".concat(this.uniqueId, "\" role=\"listbox\" class=\"").concat(dropboxContainerClasses, "\">\n <div class=\"vscomp-dropbox-container-top\" aria-hidden=\"true\" tabindex=\"0\">&nbsp;</div>\n <div class=\"").concat(dropboxClasses, "\">\n <div class=\"vscomp-search-wrapper\"></div>\n\n <div class=\"vscomp-options-container\">\n <div class=\"vscomp-options-loader\"></div>\n\n <div class=\"vscomp-options-list\">\n <div class=\"vscomp-options\"></div>\n </div>\n </div>\n\n <div class=\"vscomp-options-bottom-freezer\"></div>\n <div class=\"vscomp-no-options\">").concat(this.noOptionsText, "</div>\n <div class=\"vscomp-no-search-results\">").concat(this.noSearchResultsText, "</div>\n\n <span class=\"vscomp-dropbox-close-button\"><i class=\"vscomp-clear-icon\"></i></span>\n </div>\n <div class=\"vscomp-dropbox-container-bottom\" aria-hidden=\"true\" tabindex=\"0\">&nbsp;</div>\n </div>");
if ($wrapper) {
var $dropboxWrapper = document.createElement('div');
this.$dropboxWrapper = $dropboxWrapper;
Expand Down Expand Up @@ -1394,6 +1406,9 @@ var VirtualSelect = /*#__PURE__*/function () {
this.minValues = parseInt(options.minValues);
this.name = this.secureText(options.name);
this.additionalClasses = options.additionalClasses;
this.additionalDropboxClasses = options.additionalDropboxClasses;
this.additionalDropboxContainerClasses = options.additionalDropboxContainerClasses;
this.additionalToggleButtonClasses = options.additionalToggleButtonClasses;
this.popupDropboxBreakpoint = options.popupDropboxBreakpoint;
this.popupPosition = options.popupPosition;
this.onServerSearch = options.onServerSearch;
Expand Down Expand Up @@ -1472,6 +1487,9 @@ var VirtualSelect = /*#__PURE__*/function () {
updatePositionThrottle: 100,
name: '',
additionalClasses: '',
additionalDropboxClasses: '',
additionalDropboxContainerClasses: '',
additionalToggleButtonClasses: '',
maxValues: 0,
showDropboxAsPopup: true,
popupDropboxBreakpoint: '576px',
Expand Down
2 changes: 1 addition & 1 deletion docs/assets/virtual-select.min.js
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 16 additions & 0 deletions docs/examples.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
- [Right-to-Left text](#right-to-left-text)
- [Disable/Enable](#disable-enable)
- [Validation](#validation)
- [Custom styling](#custom-styling)

## Default dropdown

Expand Down Expand Up @@ -405,6 +406,21 @@ document.querySelector('#sample-form').addEventListener('submit', function() {
}
});
```
## Custom styling

Use `additionalClasses`, `additionalDropboxClasses`, `additionalDropboxContainerClasses` and `additionalToggleButtonClasses` to customize the styling of your dropdown

<div id="custom-styling-select"></div>

```js
VirtualSelect.init({
...
additionalClasses: 'custom-wrapper',
additionalDropboxClasses: 'custom-dropbox',
additionalDropboxContainerClasses: 'custom-dropbox-container',
additionalToggleButtonClasses: 'custom-toggle-button',
});
```

<script>
setTimeout(function() {
Expand Down
5 changes: 4 additions & 1 deletion docs/properties.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,10 @@
| keepAlwaysOpen | Boolean | false | Keep dropbox always open with fixed height |
| maxValues | Number | 0 | Maximum no.of options allowed to choose in multiple select<br>0 - for no limit |
| minValues | Number | | Minimum no.of options should be selected to succeed required validation |
| additionalClasses | String | | Additional classes for wrapper element |
| additionalClasses | String | | Additional CSS classes for the wrapper element |
| additionalDropboxClasses | String | | Additional CSS classes for the dropbox element |
| additionalDropboxContainerClasses | String | | Additional CSS classes for the dropbox container element |
| additionalToggleButtonClasses | String | | Additional CSS classes for the toggle button element, to allow customizing the select input |
| showDropboxAsPopup | Boolean | true | Show dropbox as popup on small screen like mobile |
| popupDropboxBreakpoint | String | 576px | Maximum screen width that allowed to show dropbox as popup |
| popupPosition | String | center | Position of the popup (left, center, or right) |
Expand Down
31 changes: 28 additions & 3 deletions src/virtual-select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ let attrPropsMapping;

const dataProps = [
'additionalClasses',
'additionalDropboxClasses',
'additionalDropboxContainerClasses',
'additionalToggleButtonClasses',
'aliasKey',
'allOptionsSelectedText',
'allowNewOption',
Expand Down Expand Up @@ -113,6 +116,7 @@ export class VirtualSelect {

const { uniqueId } = this;
let wrapperClasses = 'vscomp-wrapper';
let toggleButtonClasses = 'vscomp-toggle-button';
const valueTooltip = this.showValueAsTags ? '' : this.getTooltipAttrText(this.placeholder, true, true);
const clearButtonTooltip = this.getTooltipAttrText(this.clearButtonText);
const ariaLabelledbyText = this.ariaLabelledby ? `aria-labelledby="${this.ariaLabelledby}"` : '';
Expand All @@ -124,6 +128,10 @@ export class VirtualSelect {
wrapperClasses += ` ${this.additionalClasses}`;
}

if (this.additionalToggleButtonClasses) {
toggleButtonClasses += ` ${this.additionalToggleButtonClasses}`;
}

if (this.multiple) {
wrapperClasses += ' multiple';

Expand Down Expand Up @@ -169,7 +177,7 @@ export class VirtualSelect {
role="combobox" aria-haspopup="listbox" aria-controls="vscomp-dropbox-container-${uniqueId}"
aria-expanded="${isExpanded}" ${ariaLabelledbyText} ${ariaLabelText}>
<input type="hidden" name="${this.name}" class="vscomp-hidden-input">
<div class="vscomp-toggle-button">
<div class="${toggleButtonClasses}">
<div class="vscomp-value" ${valueTooltip}>
${this.placeholder}
</div>
Expand Down Expand Up @@ -217,12 +225,23 @@ export class VirtualSelect {

renderDropbox({ wrapperClasses }) {
const $wrapper = this.dropboxWrapper !== 'self' ? document.querySelector(this.dropboxWrapper) : null;
let dropboxClasses = 'vscomp-dropbox';

if (this.additionalDropboxClasses) {
dropboxClasses += ` ${this.additionalDropboxClasses}`;
}

let dropboxContainerClasses = 'vscomp-dropbox-container';

if (this.additionalDropboxContainerClasses) {
dropboxContainerClasses += ` ${this.additionalDropboxContainerClasses}`;
}

// eslint-disable-next-line no-trailing-spaces
const html =
`<div id="vscomp-dropbox-container-${this.uniqueId}" role="listbox" class="vscomp-dropbox-container">
`<div id="vscomp-dropbox-container-${this.uniqueId}" role="listbox" class="${dropboxContainerClasses}">
<div class="vscomp-dropbox-container-top" aria-hidden="true" tabindex="0">&nbsp;</div>
<div class="vscomp-dropbox">
<div class="${dropboxClasses}">
<div class="vscomp-search-wrapper"></div>

<div class="vscomp-options-container">
Expand Down Expand Up @@ -913,6 +932,9 @@ export class VirtualSelect {
this.minValues = parseInt(options.minValues);
this.name = this.secureText(options.name);
this.additionalClasses = options.additionalClasses;
this.additionalDropboxClasses = options.additionalDropboxClasses;
this.additionalDropboxContainerClasses = options.additionalDropboxContainerClasses;
this.additionalToggleButtonClasses = options.additionalToggleButtonClasses;
this.popupDropboxBreakpoint = options.popupDropboxBreakpoint;
this.popupPosition = options.popupPosition;
this.onServerSearch = options.onServerSearch;
Expand Down Expand Up @@ -996,6 +1018,9 @@ export class VirtualSelect {
updatePositionThrottle: 100,
name: '',
additionalClasses: '',
additionalDropboxClasses: '',
additionalDropboxContainerClasses: '',
additionalToggleButtonClasses: '',
maxValues: 0,
showDropboxAsPopup: true,
popupDropboxBreakpoint: '576px',
Expand Down
3 changes: 3 additions & 0 deletions src/virtual-select.types.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@
* @property {number} [maxValues=0] Maximum no.of options allowed to choose in multiple select
* @property {number} [minValues] Minimum no.of options should be selected to succeed required validation
* @property {string} [additionalClasses] Additional classes for wrapper element
* @property {string} [additionalDropboxClasses] Additional classes for dropbox element
* @property {string} [additionalDropboxContainerClasses] Additional classes for dropbox container element
* @property {string} [additionalToggleButtonClasses] Additional classes for toggle button element
* @property {boolean} [showDropboxAsPopup=true] Show dropbox as popup on small screen like mobile
* @property {string} [popupDropboxBreakpoint='576px'] Maximum screen width that allowed to show dropbox as popup
* @property {string} [popupPosition=center] Position of the popup (left, center, or right)
Expand Down