Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
nomad-lab
encyclopedia-gui
Commits
9e536936
Commit
9e536936
authored
Feb 15, 2021
by
Iker Hurtado
Browse files
New multiselect autocomplete textfield (AutocompleteMultiselectTextfield.js)
parent
77df0cbd
Pipeline
#93521
skipped with stage
Changes
3
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
client/css/styles.css
View file @
9e536936
...
...
@@ -525,10 +525,6 @@ div.title span.unfolded::before{
.material-name-autocomplete-textfield
,
.material-name-autocomplete-dropdown
{
width
:
450px
;
}
/* Autocomplete components */
...
...
@@ -541,13 +537,11 @@ div.title span.unfolded::before{
font-size
:
0.9em
;
position
:
absolute
;
z-index
:
99
;
box-shadow
:
1px
1px
4px
gray
;
}
.AutocompleteTextField-dropdown
>
div
,
.AutocompleteMultiselectTextfield-dropdown
>
div
{
padding
:
2px
10px
2px
10px
;
cursor
:
pointer
;
background-color
:
#DDD
;
border
:
1px
solid
transparent
;
}
...
...
@@ -555,11 +549,6 @@ div.title span.unfolded::before{
border-color
:
#E56400
!important
;
}
/*
.AutocompleteMultiselectTextfield{
}
*/
.AutocompleteMultiselectTextfield-selected-box
{
padding
:
3px
;
...
...
@@ -567,20 +556,41 @@ div.title span.unfolded::before{
.selectedItemLabel
{
display
:
inline-block
;
/*border: 1px solid gray;*/
box-shadow
:
1px
1px
2px
#BBB
;
border-radius
:
4px
;
padding
:
1px
5px
;
border-left
:
1px
solid
#E56400
;
border-right
:
1px
solid
#E56400
;
color
:
#E56400
;
/*box-shadow: 1px 1px 2px #BBB;*/
border-radius
:
3px
;
padding
:
1px
4px
;
margin-right
:
8px
;
margin-top
:
3px
;
cursor
:
pointer
;
}
/* Material name autocomplete */
.material-name-autocomplete-textfield
{
width
:
450px
;
}
.material-name-autocomplete-dropdown
{
background-color
:
#DDD
;
box-shadow
:
1px
1px
4px
gray
;
}
/* Structure type autocomplete */
.structure_type-autocomplete-multiselect-textfield
input
[
type
=
"text"
]
{
padding
:
6px
;
border
:
1px
solid
#DDD
;
width
:
200px
;
}
.structure_type-autocomplete-multiselect-dropdown
{
width
:
210px
;
background-color
:
white
;
box-shadow
:
0
1px
2px
#E56400
;
}
/* To remove
.autocomplete-em {
...
...
client/src/search-mod/AutocompleteMultiselectTextfield.js
View file @
9e536936
...
...
@@ -26,7 +26,7 @@
class
AutocompleteMultiselectTextfield
{
constructor
(
id
=
""
,
placeholder
=
''
,
allowEmptyInput
=
fals
e
)
{
constructor
(
id
=
""
,
placeholder
=
''
,
allowEmptyInput
=
tru
e
)
{
this
.
id
=
id
;
this
.
element
=
document
.
createElement
(
'
div
'
);
//this.element.style.display = 'inline';
...
...
@@ -50,76 +50,52 @@ class AutocompleteMultiselectTextfield {
this
.
allowEmptyInput
=
allowEmptyInput
;
// event management
//
//
react to
clicking
int
o the textfield
//
When
clicking o
n
the textfield
the dropdown shows up
this
.
input
.
addEventListener
(
"
click
"
,
(
e
)
=>
{
this
.
_processInput
();
e
.
stopPropagation
();
});
// the dropdown list is updated as the user writes on the textfield
this
.
input
.
addEventListener
(
"
input
"
,
(
e
)
=>
{
this
.
_processInput
();
});
/*
// react to keyboard navigation
this.input.addEventListener("keydown", (e) => {
if (e.keyCode == 40) { // arrow DOWN
if (this._getActiveListItem())
this._setActiveListItem(this._getActiveListItem().nextSibling);
} else if (e.keyCode == 38) { // arrow UP
if (this._getActiveListItem())
this._setActiveListItem(this._getActiveListItem().previousSibling);
}
});
// react to enter key
this.input.addEventListener("keypress", e => {
if (e.keyCode == 13) { // ENTER
// simulate a click on the "active" item
this._clickOnActiveItem();//_clickActive();
}
});
// close lists when someone clicks in the document
document.addEventListener("click", e => {
console.log('close lists when someone clicks in the document')
this._cleanList();// this._closeAllLists();
// The dropdown is hiden when the mouse leaves the component area
this
.
element
.
addEventListener
(
"
mouseleave
"
,
e
=>
{
this
.
_cleanList
();
});
It doesn't worki properly because it closes the dropdown when you click on it
*/
// Handle the item removal on the selected items box
this
.
selectedItemsBox
.
addEventListener
(
"
click
"
,
e
=>
{
let
itemLabel
=
event
.
target
.
closest
(
'
span
'
);
// (1)
this
.
_
toggle
Value
(
itemLabel
.
dataset
.
value
);
//.textContent);
let
itemLabel
=
event
.
target
.
closest
(
'
span
'
);
this
.
_
removeSelected
Value
(
itemLabel
.
dataset
.
value
);
});
// Handle the item selection on the dropdown
this
.
listContainer
.
addEventListener
(
"
click
"
,
e
=>
{
let
listItem
=
event
.
target
.
closest
(
'
div
'
);
// (1)
this
.
_toggleItem
(
listItem
);
//.textContent);
let
listItem
=
event
.
target
.
closest
(
'
div
'
);
this
.
_toggleItem
(
listItem
);
});
this
.
listContainer
.
addEventListener
(
"
mouseover
"
,
e
=>
{
let
listItem
=
event
.
target
.
closest
(
'
div
'
);
// (1)
let
listItem
=
event
.
target
.
closest
(
'
div
'
);
this
.
_setActiveListItem
(
listItem
);
});
}
getValues
(){
return
[];
//this.input.v
alue;
return
Array
.
from
(
this
.
selectedV
alue
s
)
;
}
resetValue
(){
/*
resetValue(){
this.input.value = '';
}
}
*/
disable
(
bool
){
...
...
@@ -183,9 +159,13 @@ class AutocompleteMultiselectTextfield {
}
_toggleValue
(
value
)
{
const
listItem
=
this
.
listContainer
.
querySelector
(
'
input[data-value="
'
+
value
+
'
"]
'
).
parentElement
;
this
.
_toggleItem
(
listItem
);
_removeSelectedValue
(
value
)
{
this
.
selectedValues
.
delete
(
value
);
this
.
selectedItemsBox
.
querySelector
(
'
span[data-value="
'
+
value
+
'
"]
'
).
remove
();
// check if the dropdown is unfolded and uncheck the checkbox if so
const
itemCheckbox
=
this
.
listContainer
.
querySelector
(
'
input[data-value="
'
+
value
+
'
"]
'
);
if
(
itemCheckbox
)
itemCheckbox
.
checked
=
false
;
}
...
...
@@ -204,7 +184,7 @@ class AutocompleteMultiselectTextfield {
}
//console.log('_addValue: this.selectedValues', this.selectedValues)
if
(
this
.
selectListener
)
this
.
selectListener
();
if
(
this
.
selectListener
)
this
.
selectListener
(
value
);
function
createSelectedItemLabel
(
value
){
const
label
=
document
.
createElement
(
'
span
'
);
...
...
@@ -216,22 +196,22 @@ class AutocompleteMultiselectTextfield {
}
_getActiveListItem
(){
return
this
.
listContainer
.
querySelector
(
'
.autocomplete-active
'
);
}
_setActiveListItem
(
element
){
const
currentActiveItem
=
this
.
listContainer
.
querySelector
(
'
.autocomplete-active
'
);
if
(
currentActiveItem
)
currentActiveItem
.
classList
.
remove
(
'
autocomplete-active
'
);
element
.
classList
.
add
(
'
autocomplete-active
'
);
}
/* Not being used for now
_getActiveListItem(){
return this.listContainer.querySelector('.autocomplete-active');
}
_clickOnActiveItem() {
const activeItem = this.listContainer.querySelector('.autocomplete-active');
if (activeItem) activeItem.click();
}
}
*/
_cleanList
()
{
...
...
client/src/search-mod/FilterPanel.view.js
View file @
9e536936
...
...
@@ -130,6 +130,7 @@ class FilterPanel {
this
.
fields
.
forEach
(
field
=>
{
const
values
=
field
.
getValues
();
console
.
log
(
'
FilterPanel field:
'
,
field
,
values
);
if
(
Array
.
isArray
(
values
)){
values
.
forEach
(
value
=>
filterMap
.
set
(
value
.
fieldId
,
value
.
value
))
}
else
{
...
...
@@ -282,7 +283,7 @@ class AutocompleteField{
</div>`
;
this
.
autocomplete
=
new
AutocompleteMultiselectTextfield
(
id
,
'
Search and select options
'
,
true
);
this
.
autocomplete
=
new
AutocompleteMultiselectTextfield
(
id
,
'
Search and select options
'
);
this
.
element
.
append
(
this
.
autocomplete
.
element
)
let
r1
=
util
.
serverReq
(
util
.
getSuggestionURL
(
this
.
fieldId
),
(
e
)
=>
{
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment