midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Fixed part of the special renderings

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-14 19:21:33 +02:00
parent eec762b71f
commit e480c97676
11 changed files with 156 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

74
UI/Image/SlideShow.ts
View file

@ -1,41 +1,59 @@
import {UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement";
import $ from "jquery"
export class SlideShow extends BaseUIElement {
private readonly _element: HTMLElement;
constructor(
embeddedElements: UIEventSource<BaseUIElement[]>) {
super()
const el = document.createElement("div")
this._element = el;
el.classList.add("slick-carousel")
require("slick-carousel")
// @ts-ignore
el.slick({
autoplay: true,
arrows: true,
dots: true,
lazyLoad: 'progressive',
variableWidth: true,
centerMode: true,
centerPadding: "60px",
adaptive: true
});
embeddedElements.addCallbackAndRun(elements => {
for (const element of elements ?? []) {
element.SetClass("slick-carousel-content")
}
});
private readonly embeddedElements: UIEventSource<BaseUIElement[]>;
constructor(embeddedElements: UIEventSource<BaseUIElement[]>) {
super()
this.embeddedElements = embeddedElements;
}
protected InnerConstructElement(): HTMLElement {
return this._element;
const el = document.createElement("div")
el.classList.add("slic-carousel")
el.onchange = () => {
console.log("Parent is now ", el.parentElement)
}
const mutationObserver = new MutationObserver(mutations => {
console.log("Mutations are: ", mutations)
mutationObserver.disconnect()
require("slick-carousel")
// @ts-ignore
el.slick({
autoplay: true,
arrows: true,
dots: true,
lazyLoad: 'progressive',
variableWidth: true,
centerMode: true,
centerPadding: "60px",
adaptive: true
});
})
mutationObserver.observe(el, {
childList: true,
characterData: true,
subtree: true
})
this.embeddedElements.addCallbackAndRun(elements => {
for (const element of elements ?? []) {
element.SetClass("slick-carousel-content")
el.appendChild(element.ConstructElement())
}
});
return el;
}
}