Skip to content

Commit

Permalink
Fix select component for being used decoupled
Browse files Browse the repository at this point in the history 
Also part of this commit:

 * Align with @fractal/mendelbrot template change
 * Update dependencies
  • Loading branch information
@julkue
julkue committed Jul 31, 2020
1 parent 1fa16b3 commit 249e43e
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 71 deletions.
34 changes: 17 additions & 17 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@julmot/form-components",
"version": "1.1.0",
"version": "1.1.1",
"description": "Custom Form Components. Without Any Framework. Accessible.",
"keywords": [
"form",
Expand All @@ -22,44 +22,44 @@
},
"main": "build/fractal.js",
"dependencies": {
"bowser": "^2.9.0",
"bowser": "^2.10.0",
"moveto": "^1.8.2"
},
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/polyfill": "^7.8.7",
"@babel/preset-env": "^7.9.6",
"@frctl/fractal": "^1.2.1",
"@babel/core": "^7.11.0",
"@babel/polyfill": "^7.10.4",
"@babel/preset-env": "^7.11.0",
"@frctl/fractal": "^1.3.0",
"@frctl/handlebars": "^1.2.0",
"@frctl/mandelbrot": "^1.3.0",
"@frctl/mandelbrot": "^1.4.0",
"@julmot/git-branch-deploy": "^1.0.1",
"autoprefixer": "^9.7.6",
"autoprefixer": "^9.8.6",
"babel-loader": "^8.1.0",
"concurrently": "^5.2.0",
"css-loader": "^3.5.3",
"del-cli": "^3.0.0",
"eslint": "^6.8.0",
"css-loader": "^4.1.1",
"del-cli": "^3.0.1",
"eslint": "^7.5.0",
"eslint-loader": "^4.0.2",
"file-loader": "^6.0.0",
"fs-extra": "^9.0.0",
"fs-extra": "^9.0.1",
"glob": "^7.1.6",
"grunt": "^1.1.0",
"grunt": "^1.2.1",
"grunt-replace": "^1.0.1",
"grunt-webfont": "^1.7.2",
"handlebars": "^4.7.6",
"jit-grunt": "^0.10.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.14.0",
"node-sass": "^4.14.1",
"normalize.css": "^8.0.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"resolve-url-loader": "^3.1.1",
"sass-loader": "^8.0.2",
"sass-loader": "^9.0.2",
"slash": "^3.0.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"scripts": {
"fractal:dev": "fractal start --sync",
Expand Down
2 changes: 1 addition & 1 deletion src/components/_common/_fonts.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@font-face {
font-family: "form-components-icons";
src: url("../../fonts/form-components-icons/form-components-icons.woff?729881ff175bb4c45d15011fc89ba71e") format("woff");
src: url("../../fonts/form-components-icons/form-components-icons.woff?2281ab3a92848f43e971c33de7b726d3") format("woff");
font-weight: normal;
font-style: normal;
}
117 changes: 66 additions & 51 deletions src/components/select/select-material-like/select-material-like.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,39 +18,24 @@ export class Select extends FormComponent {
this.dropdownOptions = [];
this.userInfo = Bowser.parse(window.navigator.userAgent);

this.createDropdown();
if (!this.field.hasAttribute('disabled')) {
this.initEvents();
}
this.initEvents();
}

createDropdown() {
this.dropdown = document.createElement('ul');
this.dropdown.classList.add('select__dropdown');
this.dropdownOptions = [...this.field.options].map(dropdownOption => {
const option = document.createElement('li');
option.classList.add('select__dropdown-option');
option.textContent = dropdownOption.textContent;
if (dropdownOption.getAttribute('disabled') !== null) {
option.classList.add('is-disabled');
}
this.dropdown.appendChild(option);
return option;
});
if (this.helperField) {
this.context.insertBefore(this.dropdown, this.helperField);
} else if (this.errorField) {
this.context.insertBefore(this.dropdown, this.errorField);
} else {
this.context.appendChild(this.dropdown);
}
get isOpen() {
return this.context.classList.contains('is-open');
}

initEvents() {
this.context.addEventListener('keydown', event => this.onKeydown(event));
this.context.addEventListener('keydown', event => {
if (!this.field.hasAttribute('disabled')) {
this.onKeydown(event);
}
});
// for native changes (e.g. iOS):
this.field.addEventListener('change', () => {
this.setActive(this.field.selectedIndex);
if (!this.field.hasAttribute('disabled')) {
this.setActive(this.field.selectedIndex);
}
});
if (this.userInfo.platform.type === 'desktop') {
// It's important to use mousedown instead of click for Desktop, otherwise
Expand All @@ -60,33 +45,27 @@ export class Select extends FormComponent {
// only for pointerdown)
['mousedown', 'pointerdown'].forEach(listener => {
this.field.addEventListener(listener, e => {
e.preventDefault();
// prevent other above named listeners from handling the same action:
e.stopPropagation();
this.toggle();
if (!this.field.hasAttribute('disabled')) {
e.preventDefault();
// prevent other above named listeners from handling the same action:
e.stopPropagation();
this.toggle();
}
});
});
}
this.dropdownOptions.forEach((option, index) => {
if (option.classList.contains('is-disabled')) {
return;
}
option.addEventListener('click', () => {
this.setActive(index);
this.close();
});
});
this.setActive(this.field.selectedIndex);
this.field.addEventListener('blur', () => {
// Make sure to not close the dropdown before the option click event
// is called. Otherwise you can't select any value using click
setTimeout(() => {
const target = document.activeElement;
if (target === this.context || this.context.contains(target)) {
return;
}
this.close();
}, 150);
if (!this.field.hasAttribute('disabled')) {
// Make sure to not close the dropdown before the option click event
// is called. Otherwise you can't select any value using click
setTimeout(() => {
const target = document.activeElement;
if (target === this.context || this.context.contains(target)) {
return;
}
this.close();
}, 150);
}
});
}

Expand Down Expand Up @@ -159,8 +138,42 @@ export class Select extends FormComponent {
}
}

get isOpen() {
return this.context.classList.contains('is-open');
createDropdown() {
this.dropdown = document.createElement('ul');
this.dropdown.classList.add('select__dropdown');
this.dropdownOptions = [...this.field.options].map(dropdownOption => {
const option = document.createElement('li');
option.classList.add('select__dropdown-option');
option.textContent = dropdownOption.textContent;
if (dropdownOption.getAttribute('disabled') !== null) {
option.classList.add('is-disabled');
}
this.dropdown.appendChild(option);
return option;
});
if (this.helperField) {
this.context.insertBefore(this.dropdown, this.helperField);
} else if (this.errorField) {
this.context.insertBefore(this.dropdown, this.errorField);
} else {
this.context.appendChild(this.dropdown);
}
this.dropdownOptions.forEach((option, index) => {
if (option.classList.contains('is-disabled')) {
return;
}
option.addEventListener('click', () => {
this.setActive(index);
this.close();
});
});
this.setActive(this.field.selectedIndex);
}

deleteDropdown() {
if (this.dropdown && this.dropdown.parentElement) {
this.dropdown.parentElement.removeChild(this.dropdown);
}
}

toggle() {
Expand All @@ -172,6 +185,7 @@ export class Select extends FormComponent {
}

open() {
this.createDropdown();
this.context.classList.add('is-open');
this.field.focus();
this.scrollActiveDropdownOptionIntoView();
Expand All @@ -180,6 +194,7 @@ export class Select extends FormComponent {
close() {
this.context.classList.remove('is-open');
this.setIsFilledIn();
this.deleteDropdown();
}

setActive(index) {
Expand Down
Binary file modified src/fonts/form-components-icons/form-components-icons.woff
View file
Binary file not shown.
8 changes: 6 additions & 2 deletions ui-overrides/partials/header.nunj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,12 @@
</style>
<div class="Header">
<button class="Header-button Header-navToggle" data-action="toggle-sidebar">
{% include 'icons/close-nav.svg' %}
{% include 'icons/open-nav.svg' %}
<div class="Header-navToggleIcon Header-navToggleIcon--open">
{% include 'icons/close.svg' %}
</div>
<div class="Header-navToggleIcon Header-navToggleIcon--closed">
{% include 'icons/burger.svg' %}
</div>
</button>
<a href="{{ path('/') }}" class="Header-title" data-pjax>{{ frctl.get('project.title') | default('Component Library') }}</a>
<a class="github-button" href="https://github.com/julmot/form-components" data-size="large" aria-label="Star julmot/form-components on GitHub">Star</a>
Expand Down

0 comments on commit 249e43e

Please sign in to comment.