Commit 910d457c authored by Yassine Doghri's avatar Yassine Doghri
Browse files

feat(select): enhance select input with choices.js

- select fields come with a search field
- update language names by fixing missing caps in
LanguageSeeder
- add parent to categoryOptions
parent 9dd4c774
......@@ -17,6 +17,7 @@
"editor.defaultFormatter": "bmewburn.vscode-intelephense-client",
"editor.formatOnSave": false
},
"css.validate": false,
"color-highlight.markerType": "dot-before",
"files.associations": {
"*.xml.dist": "xml",
......
......@@ -34,7 +34,7 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'ae',
'native_name' => 'avesta',
'native_name' => 'Avesta',
],
[
'code' => 'af',
......@@ -50,7 +50,7 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'an',
'native_name' => 'aragonés',
'native_name' => 'Aragonés',
],
[
'code' => 'ar',
......@@ -66,7 +66,7 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'ay',
'native_name' => 'aymar aru',
'native_name' => 'Aymar aru',
],
[
'code' => 'az',
......@@ -94,7 +94,7 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'bm',
'native_name' => 'bamanankan',
'native_name' => 'Bamanankan',
],
[
'code' => 'bn',
......@@ -106,15 +106,15 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'br',
'native_name' => 'brezhoneg',
'native_name' => 'Brezhoneg',
],
[
'code' => 'bs',
'native_name' => 'bosanski jezik',
'native_name' => 'Bosanski jezik',
],
[
'code' => 'ca',
'native_name' => 'català, valencià',
'native_name' => 'Català, valencià',
],
[
'code' => 'ce',
......@@ -126,7 +126,7 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'co',
'native_name' => 'corsu, lingua corsa',
'native_name' => 'Corsu, lingua corsa',
],
[
'code' => 'cr',
......@@ -150,7 +150,7 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'da',
'native_name' => 'dansk',
'native_name' => 'Dansk',
],
[
'code' => 'de',
......@@ -190,7 +190,7 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'eu',
'native_name' => 'euskara, euskera',
'native_name' => 'Euskara, euskera',
],
[
'code' => 'fa',
......@@ -202,19 +202,19 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'fi',
'native_name' => 'suomi, suomen kieli',
'native_name' => 'Suomi, suomen kieli',
],
[
'code' => 'fj',
'native_name' => 'vosa Vakaviti',
'native_name' => 'Vosa Vakaviti',
],
[
'code' => 'fo',
'native_name' => 'føroyskt',
'native_name' => 'Føroyskt',
],
[
'code' => 'fr',
'native_name' => 'français, langue française',
'native_name' => 'Français, langue française',
],
[
'code' => 'fy',
......@@ -262,7 +262,7 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'hr',
'native_name' => 'hrvatski jezik',
'native_name' => 'Hrvatski jezik',
],
[
'code' => 'ht',
......@@ -270,7 +270,7 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'hu',
'native_name' => 'magyar',
'native_name' => 'Magyar',
],
[
'code' => 'hy',
......@@ -291,7 +291,7 @@ class LanguageSeeder extends Seeder
[
'code' => 'ie',
'native_name' =>
'(originally:) Occidental, (after WWII:) Interlingue',
'Interlingue, formerly Occidental',
],
[
'code' => 'ig',
......@@ -351,7 +351,7 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'kl',
'native_name' => 'kalaallisut, kalaallit oqaasii',
'native_name' => 'Kalaallisut, kalaallit oqaasii',
],
[
'code' => 'km',
......@@ -391,7 +391,7 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'la',
'native_name' => 'latine, lingua latina',
'native_name' => 'Latine, lingua latina',
],
[
'code' => 'lb',
......@@ -415,7 +415,7 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'lt',
'native_name' => 'lietuvių kalba',
'native_name' => 'Lietuvių kalba',
],
[
'code' => 'lu',
......@@ -423,11 +423,11 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'lv',
'native_name' => 'latviešu valoda',
'native_name' => 'Latviešu valoda',
],
[
'code' => 'mg',
'native_name' => 'fiteny malagasy',
'native_name' => 'Fiteny malagasy',
],
[
'code' => 'mh',
......@@ -435,7 +435,7 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'mi',
'native_name' => 'te reo Māori',
'native_name' => 'Te reo Māori',
],
[
'code' => 'mk',
......@@ -507,11 +507,11 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'ny',
'native_name' => 'chiCheŵa, chinyanja',
'native_name' => 'Chicheŵa, chinyanja',
],
[
'code' => 'oc',
'native_name' => 'occitan, lenga d’òc',
'native_name' => 'Occitan, lenga d’òc',
],
[
'code' => 'oj',
......@@ -567,7 +567,7 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'ru',
'native_name' => 'русский',
'native_name' => 'Pусский',
],
[
'code' => 'rw',
......@@ -579,7 +579,7 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'sc',
'native_name' => 'sardu',
'native_name' => 'Sardu',
],
[
'code' => 'sd',
......@@ -591,7 +591,7 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'sg',
'native_name' => 'yângâ tî sängö',
'native_name' => 'Yângâ tî sängö',
],
[
'code' => 'si',
......@@ -607,7 +607,7 @@ class LanguageSeeder extends Seeder
],
[
'code' => 'sm',
'native_name' => "gagana fa'a Samoa",
'native_name' => "Gagana fa'a Samoa",
],
[
'code' => 'sn',
......
......@@ -65,7 +65,11 @@ class CategoryModel extends Model
$options = array_reduce(
$categories,
function (array $result, Category $category): array {
$result[$category->id] = lang('Podcast.category_options.' . $category->code);
$result[$category->id] = '';
if ($category->parent !== null) {
$result[$category->id] = lang('Podcast.category_options.' . $category->parent->code) . ' › ';
}
$result[$category->id] .= lang('Podcast.category_options.' . $category->code);
return $result;
},
[],
......
......@@ -5,6 +5,7 @@ import Dropdown from "./modules/Dropdown";
import MarkdownEditor from "./modules/MarkdownEditor";
import MultiSelect from "./modules/MultiSelect";
import PublishMessageWarning from "./modules/PublishMessageWarning";
import Select from "./modules/Select";
import SidebarToggler from "./modules/SidebarToggler";
import Slugify from "./modules/Slugify";
import Soundbites from "./modules/Soundbites";
......@@ -15,6 +16,7 @@ import Tooltip from "./modules/Tooltip";
Dropdown();
Tooltip();
MarkdownEditor();
Select();
MultiSelect();
Slugify();
SidebarToggler();
......
......@@ -14,24 +14,22 @@ const MultiSelect = (): void => {
maxItemText: multiSelect.dataset.maxItemText,
removeItemButton: true,
classNames: {
containerOuter:
"multiselect" +
(multiSelect.dataset.class ? ` ${multiSelect.dataset.class}` : ""),
containerInner: "multiselect__inner",
input: "multiselect__input",
inputCloned: "multiselect__input--cloned",
list: "multiselect__list",
listItems: "multiselect__list--multiple",
listSingle: "multiselect__list--single",
listDropdown: "multiselect__list--dropdown",
item: "multiselect__item",
itemSelectable: "multiselect__item--selectable",
itemDisabled: "multiselect__item--disabled",
itemChoice: "multiselect__item--choice",
placeholder: "multiselect__placeholder",
group: "multiselect__group",
groupHeading: "multiselect__heading",
button: "multiselect__button",
containerOuter: "choices",
containerInner: "choices__inner",
input: "choices__input",
inputCloned: "choices__input--cloned",
list: "choices__list",
listItems: "choices__list--multiple",
listSingle: "choices__list--single",
listDropdown: "choices__list--dropdown",
item: "choices__item",
itemSelectable: "choices__item--selectable",
itemDisabled: "choices__item--disabled",
itemChoice: "choices__item--choice",
placeholder: "choices__placeholder",
group: "choices__group",
groupHeading: "choices__heading",
button: "choices__button",
activeState: "is-active",
focusState: "is-focused",
openState: "is-open",
......
import Choices from "choices.js";
const Select = (): void => {
// Pass single element
const selects: NodeListOf<HTMLSelectElement> = document.querySelectorAll(
"select:not([multiple])"
);
for (let i = 0; i < selects.length; i++) {
const select = selects[i];
new Choices(select, {
classNames: {
containerOuter: "choices",
containerInner: "choices__inner",
input: "choices__input",
inputCloned: "choices__input--cloned",
list: "choices__list",
listItems: "choices__list--multiple",
listSingle: "choices__list--single",
listDropdown: "choices__list--dropdown",
item: "choices__item",
itemSelectable: "choices__item--selectable",
itemDisabled: "choices__item--disabled",
itemChoice: "choices__item--choice",
placeholder: "choices__placeholder",
group: "choices__group",
groupHeading: "choices__heading",
button: "choices__button",
activeState: "is-active",
focusState: "is-focused",
openState: "is-open",
disabledState: "is-disabled",
highlightedState: "is-highlighted",
selectedState: "is-selected",
flippedState: "is-flipped",
loadingState: "is-loading",
noResults: "has-no-results",
noChoices: "has-no-choices",
},
});
}
};
export default Select;
/*===============================
= Choices =
===============================*/
@layer components {
.choices {
position: relative;
margin-bottom: 24px;
font-size: 16px;
}
.choices:focus {
outline: none;
}
.choices:last-child {
margin-bottom: 0;
}
.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
background-color: #eaeaea;
cursor: not-allowed;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.choices.is-disabled .choices__item {
cursor: not-allowed;
}
.choices [hidden] {
display: none !important;
}
.choices[data-type*="select-one"] {
cursor: pointer;
}
.choices[data-type*="select-one"] .choices__inner {
padding-bottom: 7.5px;
}
.choices[data-type*="select-one"] .choices__input {
display: block;
width: 100%;
padding: 10px;
border-bottom: 1px solid #dddddd;
background-color: #ffffff;
margin: 0;
}
.choices[data-type*="select-one"] .choices__button {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236B7280'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z'/%3E%3C/svg%3E");
padding: 0;
background-size: 20px;
position: absolute;
top: 50%;
right: 0;
margin-top: -10px;
margin-right: 25px;
height: 20px;
width: 20px;
opacity: 0.5;
}
.choices[data-type*="select-one"] .choices__button:hover,
.choices[data-type*="select-one"] .choices__button:focus {
opacity: 1;
}
.choices[data-type*="select-one"] .choices__button:focus {
box-shadow: 0px 0px 0px 2px #00bcd4;
}
.choices[data-type*="select-one"]
.choices__item[data-value=""]
.choices__button {
display: none;
}
.choices[data-type*="select-one"]:after {
content: "";
height: 0;
width: 0;
border-style: solid;
border-color: #333333 transparent transparent transparent;
border-width: 5px;
position: absolute;
right: 11.5px;
top: 50%;
margin-top: -2.5px;
pointer-events: none;
}
.choices[data-type*="select-one"].is-open:after {
border-color: transparent transparent #333333 transparent;
margin-top: -7.5px;
}
.choices[data-type*="select-one"][dir="rtl"]:after {
left: 11.5px;
right: auto;
}
.choices[data-type*="select-one"][dir="rtl"] .choices__button {
right: auto;
left: 0;
margin-left: 25px;
margin-right: 0;
}
.choices[data-type*="select-multiple"] .choices__inner,
.choices[data-type*="text"] .choices__inner {
cursor: text;
}
.choices[data-type*="select-multiple"] .choices__button,
.choices[data-type*="text"] .choices__button {
position: relative;
display: inline-block;
margin-left: 8px;
padding-left: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z'/%3E%3C/svg%3E");
background-size: 16px;
width: 8px;
line-height: 1;
opacity: 0.75;
border-radius: 0;
}
.choices[data-type*="select-multiple"] .choices__button:hover,
.choices[data-type*="select-multiple"] .choices__button:focus,
.choices[data-type*="text"] .choices__button:hover,
.choices[data-type*="text"] .choices__button:focus {
opacity: 1;
}
.choices__inner {
@apply p-2 bg-white border border-gray-700;
display: inline-block;
vertical-align: top;
width: 100%;
font-size: 16px;
min-height: 42px;
overflow: hidden;
}
.choices[data-type*="select-multiple"] .choices__inner {
@apply pb-1;
}
.is-focused .choices__inner,
.is-open .choices__inner {
@apply ring-inset ring-1 ring-blue-600;
}
.is-open .choices__inner {
border-radius: 0;
}
.is-flipped.is-open .choices__inner {
border-radius: 0;
}
.choices__list {
margin: 0;
padding-left: 0;
list-style: none;
}
.choices__list--single {
@apply pr-4;
display: inline-block;
width: 100%;
}
[dir="rtl"] .choices__list--single {
padding-right: 4px;
padding-left: 16px;
}
.choices__list--single .choices__item {
width: 100%;
}
.choices__list--multiple {
display: inline;
}
.choices__list--multiple .choices__item {
@apply inline-block px-2 py-1 mb-1 mr-1 text-sm text-white align-middle bg-pine-600;
word-break: break-all;
box-sizing: border-box;
}
.choices__list--multiple .choices__item[data-deletable] {
padding-right: 5px;
}
[dir="rtl"] .choices__list--multiple .choices__item {
margin-right: 0;
margin-left: 3.75px;
}
.choices__list--multiple .choices__item.is-highlighted {
@apply bg-pine-700;
}
.is-disabled .choices__list--multiple .choices__item {
background-color: #aaaaaa;
border: 1px solid #919191;
}
.choices__list--dropdown {
visibility: hidden;
z-index: 1;
position: absolute;
width: 100%;
background-color: #ffffff;
border: 1px solid #dddddd;
top: 100%;
margin-top: -1px;
overflow: hidden;
word-break: break-all;
will-change: visibility;
}
.choices__list--dropdown.is-active {
visibility: visible;
}
.is-open .choices__list--dropdown {
border-color: #b7b7b7;
}
.is-flipped .choices__list--dropdown {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: -1px;
}
.choices__list--dropdown .choices__list {
position: relative;
max-height: 300px;
overflow: auto;
-webkit-overflow-scrolling: touch;
will-change: scroll-position;
}
.choices__list--dropdown .choices__item {
position: relative;
padding: 10px;
font-size: 14px;
}
[dir="rtl"] .choices__list--dropdown .choices__item {
text-align: right;
}
@media (min-width: 640px) {
.choices__list--dropdown .choices__item--selectable {
padding-right: 100px;
}
.choices__list--dropdown .choices__item--selectable:after {
content: attr(data-select-text);
font-size: 12px;