Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
Toolkit
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Container registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
GitLab community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
This is an archived project. Repository and other project resources are read-only.
Show more breadcrumbs
digital blueprint
Web Component Framework
Toolkit
Commits
d929cf61
Commit
d929cf61
authored
Aug 5, 2019
by
Bekerle, Patrizio
Committed by
Reiter, Christoph
Jul 2, 2020
Browse files
Options
Downloads
Patches
Plain Diff
Implement dynamic language switching
parent
6ffbd638
No related branches found
No related tags found
No related merge requests found
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
packages/person-select/src/person-select.js
+93
-63
93 additions, 63 deletions
packages/person-select/src/person-select.js
with
93 additions
and
63 deletions
packages/person-select/src/person-select.js
+
93
−
63
View file @
d929cf61
...
...
@@ -15,6 +15,7 @@ class PersonSelect extends VPULitElementJQuery {
constructor
()
{
super
();
this
.
lang
=
'
de
'
;
this
.
jsonld
=
null
;
}
static
get
properties
()
{
...
...
@@ -29,13 +30,33 @@ class PersonSelect extends VPULitElementJQuery {
this
.
updateComplete
.
then
(()
=>
{
const
that
=
this
;
const
$that
=
$
(
this
);
let
lastResult
=
{};
JSONLD
.
initialize
(
utils
.
getAPiUrl
(),
function
(
jsonld
)
{
that
.
jsonld
=
jsonld
;
const
$select
=
that
.
initSelect2
();
// close the selector on blur of the web component
$
(
that
).
blur
(()
=>
{
// the 500ms delay is a workaround to actually get an item selected when clicking on it,
// because the blur gets also fired when clicking in the selector
setTimeout
(()
=>
{
$select
.
select2
(
'
close
'
)},
500
);
});
});
})
}
/**
* Initializes the Select2 selector
*/
initSelect2
()
{
const
that
=
this
;
const
$this
=
$
(
this
);
let
lastResult
=
{};
// find the correct api url for a person
const
apiUrl
=
jsonld
.
getApiUrlForIdentifier
(
"
http://schema.org/Person
"
);
// const apiUrl = jsonld.getApiUrlForEntityName("Event");
const
apiUrl
=
this
.
jsonld
.
getApiUrlForIdentifier
(
"
http://schema.org/Person
"
);
// const apiUrl =
this.
jsonld.getApiUrlForEntityName("Event");
// the mapping we need for Select2
const
localContext
=
{
...
...
@@ -43,14 +64,14 @@ class PersonSelect extends VPULitElementJQuery {
"
text
"
:
"
http://schema.org/name
"
};
const
$select
=
th
at
.
$
(
'
#person-select
'
);
const
$select
=
th
is
.
$
(
'
#person-select
'
);
$select
.
select2
({
width
:
'
100%
'
,
language
:
th
at
.
lang
===
"
de
"
?
select2LangDe
()
:
select2LangEn
(),
language
:
th
is
.
lang
===
"
de
"
?
select2LangDe
()
:
select2LangEn
(),
minimumInputLength
:
2
,
placeholder
:
i18n
.
t
(
'
person-select.placeholder
'
),
dropdownParent
:
th
at
.
$
(
'
#person-select-dropdown
'
),
dropdownParent
:
th
is
.
$
(
'
#person-select-dropdown
'
),
ajax
:
{
delay
:
250
,
url
:
apiUrl
,
...
...
@@ -68,7 +89,7 @@ class PersonSelect extends VPULitElementJQuery {
console
.
log
(
data
);
lastResult
=
data
;
const
results
=
jsonld
.
transformMembers
(
data
,
localContext
);
const
results
=
that
.
jsonld
.
transformMembers
(
data
,
localContext
);
console
.
log
(
"
results
"
);
console
.
log
(
results
);
...
...
@@ -81,14 +102,14 @@ class PersonSelect extends VPULitElementJQuery {
}).
on
(
"
select2:select
"
,
function
(
e
)
{
// set value custom element
const
identifier
=
e
.
params
.
data
.
id
;
$th
at
.
attr
(
"
value
"
,
identifier
);
$th
at
.
val
(
identifier
);
$th
is
.
attr
(
"
value
"
,
identifier
);
$th
is
.
val
(
identifier
);
const
object
=
utils
.
findObjectInApiResults
(
identifier
,
lastResult
);
$th
at
.
attr
(
"
data-object
"
,
JSON
.
stringify
(
object
));
$th
is
.
attr
(
"
data-object
"
,
JSON
.
stringify
(
object
));
// fire a change event
that
.
dispatchEvent
(
new
CustomEvent
(
'
change
'
,
{
this
.
dispatchEvent
(
new
CustomEvent
(
'
change
'
,
{
detail
:
{
value
:
identifier
,
},
...
...
@@ -96,14 +117,23 @@ class PersonSelect extends VPULitElementJQuery {
}));
});
// close the selector on blur of the web component
$
(
that
).
blur
(()
=>
{
// the 500ms delay is a workaround to actually get an item selected when clicking on it,
// because the blur gets also fired when clicking in the selector
setTimeout
(()
=>
{
$select
.
select2
(
'
close
'
)},
500
);
});
return
$select
;
}
updated
(
changedProperties
)
{
changedProperties
.
forEach
((
oldValue
,
propName
)
=>
{
if
(
propName
===
"
lang
"
)
{
i18n
.
changeLanguage
(
this
.
lang
);
const
$select
=
this
.
$
(
'
#person-select.select2-hidden-accessible
'
);
if
(
$select
.
length
>
0
)
{
// no other way to set an other language at runtime did work
$select
.
select2
(
'
destroy
'
);
this
.
initSelect2
();
}
}
});
})
}
render
()
{
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
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!
Save comment
Cancel
Please
register
or
sign in
to comment