Last active
March 19, 2023 07:20
-
-
Save geomago/90fd890e9de545361b886cb78e9c0225 to your computer and use it in GitHub Desktop.
Standard Web Component wrapping the js-datapicker library
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// WebComponent date-picker, a wrapper for js-datepicker | |
class DatePicker extends HTMLElement { | |
constructor() { | |
super(); | |
} | |
connectedCallback() { | |
// Load the js-datepicker once | |
if (typeof datepicker === 'undefined') { // "datepicker" does not exists | |
if (!window.jsDatepicker) { // not already running (no other instance of the same WC) | |
const script = document.createElement('script'); | |
script.src = "https://unpkg.com/js-datepicker"; | |
document.body.appendChild(script); | |
script.addEventListener('load', () => { | |
window.jsDatepicker = 'avail'; // when script is fully loaded, mark it "available" | |
}); | |
const link = document.createElement('link'); | |
link.rel = "stylesheet"; | |
link.href = "https://unpkg.com/js-datepicker/dist/datepicker.min.css"; | |
document.head.appendChild(link); // in main doc, to be able to change styles | |
window.jsDatepicker = 'loading'; | |
} | |
} else if (typeof datepicker !== 'function') { // "datepicker" exists but it is not a function | |
alert("Name conflict: js-datepicker not loadable, the name 'datepicker' is already in use"); | |
return; | |
} else { // "datepicker" exists and it is a function: therefore js-datepicker is available | |
window.jsDatepicker = 'avail'; | |
} | |
// Create the input field (no Shadow DOM) | |
const fldId = "input_" + this.id; | |
this.innerHTML = `<input id="${fldId}" type="text">`; | |
// Get the config options from the data-option attribute | |
var options = {}; | |
var wc = this; | |
if (typeof wc.dataset.options === 'string') { | |
options = wc.getObjectFromString(wc.dataset.options); | |
} | |
// Wait till the script is loaded | |
var interval = setInterval(() => { | |
if (window.jsDatepicker === 'avail' && typeof datepicker === 'function') { | |
clearInterval(interval); // remove the timer | |
wc.datepicker = datepicker(`#${fldId}`, options); // initialize and save object as a property | |
} | |
}, 20) | |
} | |
disconnectedCallback() { | |
} | |
static get observedAttributes() { | |
return []; // no observed attributes for now | |
} | |
attributeChangedCallback(name, oldValue, newValue) { | |
} | |
// Utility function to transform a JS literal into a JS object | |
getObjectFromString(string) { | |
const getobj = new Function(`return ${string}`); | |
try { | |
const obj = getobj(); | |
return obj; | |
} catch (error) { | |
throw ('Invalid JavaScript object string: ' + string); | |
} | |
} | |
} | |
customElements.define('date-picker', DatePicker); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment