A powerfull Form Manager https://dze.io
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

47 lines
1.2 KiB

  1. import { FMAssignInterface } from './../Interfaces';
  2. import FormManager from "../FormManager"
  3. import FMInput from "../FMInput"
  4. /**
  5. * the upgraded datalist element
  6. * @priority 2
  7. * @class FMDatalistInput
  8. * @extends {FMInput}
  9. */
  10. export default class FMDatalistInput extends FMInput {
  11. datalist: HTMLDataListElement
  12. isStrict: boolean
  13. constructor(element: HTMLInputElement, form: FormManager) {
  14. super(element, form)
  15. this.isStrict = this.element.hasAttribute("data-strict")
  16. let id = this.element.getAttribute("list")
  17. let tmpDatalist = document.getElementById(id)
  18. this.datalist = tmpDatalist !== undefined ? tmpDatalist as HTMLDataListElement : undefined
  19. }
  20. setValue(value: string) {
  21. if (this.datalist) {
  22. let option: HTMLOptionElement = this.datalist.querySelector(`[value="${value}"]`)
  23. if (option || !this.isStrict) {
  24. this.element.value = value
  25. }
  26. }
  27. }
  28. getValue(): string {
  29. if (this.datalist) {
  30. let option: HTMLOptionElement = this.datalist.querySelector(`[value="${this.element.value}"]`)
  31. if (option) return option.dataset.value
  32. }
  33. return this.isStrict ? undefined : this.element.value
  34. }
  35. }
  36. export const FMDatalistAssignement: FMAssignInterface = {
  37. input: FMDatalistInput,
  38. attributes: "list",
  39. tagName: "input"
  40. }