From 1748ee2dbec62dc49719b20be199912cbaaac619 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 19 Nov 2020 11:36:35 +0100
Subject: [PATCH] check-in-place-select: only load jquery/select2 when needed
---
.../src/check-in-place-select.js | 46 ++++++++++---------
1 file changed, 25 insertions(+), 21 deletions(-)
diff --git a/packages/check-in-place-select/src/check-in-place-select.js b/packages/check-in-place-select/src/check-in-place-select.js
index b67cf70a..cc388322 100644
--- a/packages/check-in-place-select/src/check-in-place-select.js
+++ b/packages/check-in-place-select/src/check-in-place-select.js
@@ -1,6 +1,4 @@
-import $ from 'jquery';
import {findObjectInApiResults} from './utils.js';
-import select2 from 'select2';
import select2LangDe from './i18n/de/select2'
import select2LangEn from './i18n/en/select2'
import JSONLD from '@dbp-toolkit/common/jsonld';
@@ -20,7 +18,6 @@ const checkInPlaceContext = {
"maximumPhysicalAttendeeCapacity": "http://schema.org/maximumPhysicalAttendeeCapacity"
};
-select2(window, $);
export class CheckInPlaceSelect extends ScopedElementsMixin(LitElement) {
@@ -50,7 +47,10 @@ export class CheckInPlaceSelect extends ScopedElementsMixin(LitElement) {
}
$(selector) {
- return $(this.shadowRoot.querySelector(selector));
+ if (typeof selector === "string")
+ return this._jquery(this.shadowRoot.querySelector(selector));
+ else
+ return this._jquery(selector);
}
static get properties() {
@@ -68,29 +68,33 @@ export class CheckInPlaceSelect extends ScopedElementsMixin(LitElement) {
clear() {
this.object = null;
- $(this).attr("data-object", "");
- $(this).attr("value", "");
- $(this).data("object", null);
+ this.$(this).attr("data-object", "");
+ this.$(this).attr("value", "");
+ this.$(this).data("object", null);
this.$select.val(null).trigger('change').trigger('select2:unselect');
}
- connectedCallback() {
- super.connectedCallback();
- const that = this;
+ async connectedCallback() {
+ await super.connectedCallback();
- this.updateComplete.then(()=>{
- that.$select = that.$('#' + that.selectId);
+ this._jquery = (await import('jquery')).default;
+ let select2 = (await import('select2')).default;
+ select2(window, this._jquery);
- // Close the popup when clicking outside of select2
- document.addEventListener('click', (ev) => {
- if (!ev.composedPath().includes(this)) {
- this._closeSelect2();
- }
- });
+ await this.updateComplete;
+ const that = this;
- // try an init when user-interface is loaded
- that.initJSONLD();
+ this.$select = this.$('#' + that.selectId);
+
+ // Close the popup when clicking outside of select2
+ document.addEventListener('click', (ev) => {
+ if (!ev.composedPath().includes(this)) {
+ this._closeSelect2();
+ }
});
+
+ // try an init when user-interface is loaded
+ this.initJSONLD();
}
_closeSelect2() {
@@ -119,7 +123,7 @@ export class CheckInPlaceSelect extends ScopedElementsMixin(LitElement) {
*/
initSelect2(ignorePreset = false) {
const that = this;
- const $this = $(this);
+ const $this = this.$(this);
if (this.jsonld === null) {
return false;
--
GitLab