{
+ if (el.id != this.itemId) {
+ // calculate -- depth so it looks like a tree
+ let itemBuilder = el;
+ // walk back through parent tree
+ let distance = "- ";
+ while (itemBuilder && itemBuilder.parent != null) {
+ itemBuilder = itemManifest.items.find(
+ (i) => i.id == itemBuilder.parent
+ );
+ // double check structure is sound
+ if (itemBuilder) {
+ distance = "--" + distance;
+ }
+ }
+ items.push({
+ text: distance + el.title,
+ value: el.id,
+ });
+ }
+ });
+ return [
+ {
+ property: "settings",
+ inputMethod: "collapse",
+ properties: [
+ {
+ property: "displayFormat",
+ title: "Display format",
+ accordion: true,
+ expanded: false,
+ properties: [
+ {
+ property: "displayedAs",
+ title: "Displayed as",
+ description: "How the entire display should be rendered",
+ inputMethod: "select",
+ options: {
+ list: "List",
+ table: "Table",
+ card: "Card",
+ contentplayer: "Content Player"
+ }
+ },
+ {
+ property: "displayOf",
+ title: "Results as",
+ description: "How do you want each result to appear",
+ inputMethod: "select",
+ options: {
+ title: "Title",
+ full: "Full content",
+ fullRemote: "Full content (remote load)",
+ blocks: "Blocks"
+ }
+ }
+ ]
+ },
+ {
+ property: "filters",
+ title: "Filters",
+ accordion: true,
+ expanded: false,
+ properties: [
+ {
+ property: "parent",
+ title: "Parent",
+ description: "Limit results to those that have this item as it's parent",
+ inputMethod: "select",
+ itemsList: items
+ },
+ {
+ property: "tags",
+ title: "Tags",
+ description: "Filter by tags, comma separated",
+ inputMethod: "text"
+ },
+ {
+ property: "title",
+ title: "Title",
+ description: "Filter by title",
+ inputMethod: "text"
+ },
+ {
+ property: "blockFilter",
+ title: "Block filter",
+ description: "Filter by block type",
+ inputMethod: "select",
+ options: mediaKeys
+ }
+ ]
+ }
+ ]
+ }
+ ]
+}
+
+/**
+ * `site-view`
+ * `UUID to render an accurate link and title in the site`
+ *
+ * @demo demo/index.html
+ */
+export class SiteView extends LitElement {
+ static get tag() {
+ return "site-view";
+ }
+
+ static get styles() {
+ return [
+ css`
+ :host {
+ display: block;
+ font-size: 16px;
+ }
+ h3 {
+ margin: 4px 0;
+ padding: 0;
+ }
+ editable-table-display::part(tag-link),
+ a {
+ text-decoration: none;
+ font-size: 16px;
+ }
+ [data-active] {
+ background-color: var(--simple-colors-default-theme-accent-1);
+ }
+ simple-icon-button-lite {
+ border-radius: 0;
+ font-size: 16px;
+ }
+ :host([loading]) .loading {
+ width: 100%;
+ --simple-icon-height: 50px;
+ --simple-icon-width: 50px;
+ }
+ /* list display */
+ .list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+ .list-item {
+ margin: 0;
+ padding: 16px;
+ border-bottom: 1px solid var(--simple-colors-default-theme-grey-3);
+ }
+ .list-item:hover {
+ background-color: var(--simple-colors-default-theme-grey-2);
+ }
+ .list-link a {
+ font-size: 32px;
+ }
+ .list-breadcrumb {
+ font-size: 10px;
+ }
+
+ .overview {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ font-size: 12px;
+ }
+
+ /* editable table display */
+ editable-table-display,
+ editable-table-display::part(table),
+ table,tr,th,td {
+ font-size: 16px;
+ }
+ `];
+ }
+
+ constructor() {
+ super();
+ this.loading = false;
+ this.params = {
+ display: "list",
+ displayOf: "title",
+ };
+ this.results = [];
+ this._searchDebounce = null;
+ enableServices(["haxcms"]);
+ }
+
+ static get haxProperties() {
+ return {
+ canScale: false,
+ canPosition: false,
+ canEditSource: false,
+ gizmo: {
+ title: "Site View",
+ description: "A dynamic block that queries and displays certain information based on criteria",
+ icon: "av:call-to-action",
+ color: "grey",
+ tags: ["Other", "haxcms"],
+ handles: [],
+ meta: {
+ author: "HAXTheWeb core team",
+ owner: "The Pennsylvania State University",
+ },
+ },
+ settings: {
+ configure: loadViewsForm(),
+ advanced: [
+ {
+ property: "search",
+ title: "View URL",
+ description: "URL containing criteria for generating the view. You can obtain this from the Views page.",
+ inputMethod: "textfield",
+ required: true
+ }
+ ]
+ },
+ demoSchema: [
+ {
+ tag: "site-view",
+ properties: {},
+ content: "",
+ },
+ ],
+ };
+ }
+ rebuildSearchResults() {
+ clearTimeout(this._searchDebounce);
+ this._searchDebounce = setTimeout(async () => {
+ if (this.shadowRoot && !this.loading) {
+ const site = store.getManifest(true);
+ let base = document.querySelector("base").href;
+ if (!base) {
+ base = '/';
+ }
+ const params = {
+ type: "site",
+ site: {
+ file: base + "site.json",
+ id: site.id,
+ title: site.title,
+ author: site.author,
+ description: site.description,
+ license: site.license,
+ metadata: site.metadata,
+ items: site.items,
+ },
+ link: base,
+ ...this.params
+ };
+ this.loading = true;
+ const response = await MicroFrontendRegistry.call(
+ "@haxcms/views",
+ params
+ );
+ if (response.data) {
+ this.results = [...response.data];
+ }
+ this.loading = false;
+ }
+ }, 100);
+ }
+
+ firstUpdated(changedProperties) {
+ if (super.firstUpdated) {
+ super.firstUpdated(changedProperties);
+ }
+ this.rebuildSearchResults();
+ }
+
+ render() {
+ return html`
+ ${this.loading ? html`${this.loading ? html`` : ``}
+` : html`
+${this.results.length === 0 && !this.loading ? html`No results found
Try changing the filter criteria.
` : nothing}
+${this.params.display === "list" ? this.listTemplate() : nothing}
+${this.params.display === "table" ? this.tableTemplate() : nothing}
+${this.params.display === "card" ? this.cardTemplate() : nothing}
+${this.params.display === "contentplayer" ? this.contentplayerTemplate() : nothing}
+ `}`;
+ }
+
+ contentplayerTemplate() {
+ return html``;
+ }
+
+ listTemplate() {
+ return html`
+
+ ${this.results.map(
+ (item) => html`
+ -
+ ${this.params.displayOf === "blocks" ?
+ mediaKeys.map((key) =>
+ (item.media && item.media[key] &&
+ typeof item.media[key] == "string" &&
+ this.params.blockFilter === key ?
+ unsafeHTML(item.media[key]) :
+ nothing
+ )
+ ) : html`
+ ${this.params.displayOf === "title" ? html`
+
${this.calculateBreadcrumb(item).map(item => html`
+ ${item.title} `)}
+ ${item.metadata.tags && item.metadata.tags != "" ? item.metadata.tags
+ .split(",")
+ .map(
+ (tag) => html`
+ `
+ ) : nothing}` : this.params.displayOf === "full" ? unsafeHTML(`
${item.title}
`+item.contents) :
+ html`
`}
`)}
+
`;
+ }
+
+
+ tableTemplate() {
+ return html`
+
+
+
+ | Icon |
+ Type |
+ Title |
+ Tags |
+ Updated |
+ Created |
+ Status |
+
+ ${this.results.map(
+ (item) => html`
+
+ | ${item.metadata.pageType ? html`` : nothing} |
+ ${item.metadata.pageType ? item.metadata.pageType : nothing} |
+ ${item.title} |
+
+ ${item.metadata.tags && item.metadata.tags != "" ? item.metadata.tags
+ .split(",")
+ .map(
+ (tag) => html`
+ `
+ ) : nothing}
+ |
+
+
+ |
+
+
+ |
+
+ ${item.metadata.published !== false ? `published` : `unpublished`}
+ |
+
`)}
+
+ `;
+ }
+
+ updated(changedProperties) {
+ if (super.updated) {
+ super.updated(changedProperties);
+ }
+ changedProperties.forEach((oldValue, propName) => {
+ if (propName === "loading") {
+ this.dispatchEvent(new CustomEvent("loading-changed", {
+ detail: {
+ value: this.loading
+ },
+ }));
+ }
+ if (propName === "search" && oldValue && this.search) {
+ const rawParams = new URLSearchParams(this.search);
+ const searchParams = Object.fromEntries(rawParams);
+ this.params = {...this.params,...searchParams};
+ this.rebuildSearchResults();
+ }
+ if (propName === "results" && oldValue && this.results) {
+ if (this.params.display === "contentplayer") {
+ setTimeout(() => {
+ this.renderPlayListTemplate();
+ }, 0);
+ }
+ }
+ });
+ }
+
+ renderPlayListTemplate() {
+ let template = document.createElement("template");
+ render(html`${this.results.map((item) => html`
+ ${this.params.displayOf === "blocks" ?
+ mediaKeys.map((key) =>
+ (item.media && item.media[key] &&
+ typeof item.media[key] == "string" &&
+ this.params.blockFilter === key ?
+ unsafeHTML(item.media[key]) :
+ nothing
+ )
+ ) : html`
+ ${this.params.displayOf === "title" ? html`
+
${this.calculateBreadcrumb(item).map(item => html`
+ ${item.title} `)}
` : this.params.displayOf === "full" ? unsafeHTML(`
${item.title}
`+item.contents) :
+ html`
`}
${item.title}
+ ${item.metadata.tags && item.metadata.tags != "" ? item.metadata.tags
+ .split(",")
+ .map(
+ (tag) => html`
+ `
+ ) : nothing}
Loading...
` : html`Results
-${this.params.display === "list" ? this.listTemplate() : nothing}
-${this.params.display === "table" ? this.tableTemplate() : nothing}
-${this.params.display === "card" ? this.cardTemplate() : nothing}
-${this.params.display === "media" ? this.mediaTemplate() : nothing}
- `}`;
+ formValuesChanged(e) {
+ clearTimeout(this._formDebounce);
+ this._formDebounce = setTimeout(() => {
+ const params = new URLSearchParams(window.location.search);
+ const settings = e.detail.value.settings;
+ if (settings && settings.displayFormat && settings.filters) {
+ if (settings.displayFormat.displayedAs) {
+ params.set('display', settings.displayFormat.displayedAs);
+ }
+ if (settings.displayFormat.displayOf) {
+ params.set('displayOf', settings.displayFormat.displayOf);
+ if (this.shadowRoot.querySelector('#schema').formElements["settings.filters.blockFilter"]) {
+ this.shadowRoot.querySelector('#schema').formElements["settings.filters.blockFilter"].element.hidden = (settings.displayFormat.displayOf !== "blocks");
+ }
+ }
+ if (settings.filters.title) {
+ params.set('title', settings.filters.title);
+ }
+ else {
+ params.delete('title');
+ }
+ if (settings.filters.parent && settings.filters.parent != "null") {
+ params.set('parent', settings.filters.parent);
+ }
+ else {
+ params.delete('parent');
+ }
+ if (settings.filters.tags) {
+ params.set('tags', settings.filters.tags);
+ }
+ else {
+ params.delete('tags');
+ }
+ if (settings.filters.blockFilter && settings.displayFormat.displayOf === "blocks") {
+ let bf = settings.filters.blockFilter;
+ if (parseInt(bf) && mediaKeys[parseInt(bf)]) {
+ bf = mediaKeys[bf];
+ }
+ params.set('blockFilter', bf);
+ }
+ else {
+ params.delete('blockFilter');
+ }
+ window.history.pushState({}, "", decodeURIComponent(`./x/views?${params}`));
+ this.search = `?${decodeURIComponent(params)}`;
+ }
+ }, 600);
}
- iconFromKey(key) {
- switch (key) {
- case "audio":
- return "av:volume-up";
- case "selfChecks":
- return "hax:check";
- case "objectives":
- return "hax:learning-outcome";
- case "authorNotes":
- return "hax:note";
- case "images":
- return "image:photo";
- case "h5p":
- return "hax:h5p";
- case "headings":
- return "editor:format-size";
- case "dataTables":
- return "editor:table-chart";
- case "specialTags":
- return "hax:tag";
- case "links":
- return "editor:link";
- case "placeholders":
- return "editor:insert-comment";
- case "siteremotecontent":
- return "hax:remote";
- case "video":
- return "av:videocam";
+ iconForDisplay(display) {
+ switch(display) {
+ case "list":
+ return "hax:module";
+ case "table":
+ return "editable-table:col-striped";
+ case "card":
+ return "image:grid-on";
+ case "contentplayer":
+ return "hax:multimedia";
default:
return "hax:module";
}
}
- mediaTemplate() {
- let mediaKeys = [
- "audio",
- "selfChecks",
- "objectives",
- "authorNotes",
- "images",
- "h5p",
- "headings",
- "dataTables",
- "specialTags",
- "links",
- "placeholders",
- "siteremotecontent",
- "video"
- ];
+ render() {
return html`
-
- ${mediaKeys.map((key) => html`
- ${key}
- `)}
-
-
- ${this.results.map((item) => html`
- ${mediaKeys.map((key) => html`${item.media && item.media[key] && typeof item.media[key] == "string" && this.params.mediatype === key ? unsafeHTML(item.media[key]) : nothing}`)}
- `)}
-
- `;
+
+
+
+
+
+
+ - Display:
+
+ ${this.params.display} of ${this.params.displayOf}
+
+ - Filters:
+
+ ${this.params.title ? html`- ${this.t.title}: ${this.params.title}
` : nothing}
+ ${this.params.parent ? html`- ${this.t.parent}: ${this.params.parent}
` : nothing}
+ ${this.params.tags ? html`- ${this.t.tags}: ${this.params.tags}
` : nothing}
+ ${this.params.blockFilter ? html`- ${this.t.block}: ${this.params.blockFilter}
` : nothing}
+
+
+
+
Loading...
` : html`Results Refresh
`}
+
+ `;
}
- listTemplate() {
- return html`
- `;
+ refreshData(e) {
+ this.shadowRoot.querySelector('site-view').rebuildSearchResults();
}
-
- tableTemplate() {
- return html`
-
-
-
- | Icon |
- Type |
- Title |
- Tags |
- Updated |
- Created |
- Status |
-
- ${this.results.map(
- (item) => html`
-
- | ${item.metadata.pageType ? html`` : nothing} |
- ${item.metadata.pageType ? item.metadata.pageType : nothing} |
- ${item.title} |
-
- ${item.metadata.tags && item.metadata.tags != "" ? item.metadata.tags
- .split(",")
- .map(
- (tag) => html`
- `
- ) : nothing}
- |
-
-
- |
-
-
- |
-
- ${item.metadata.published !== false ? `published` : `unpublished`}
- |
-
`)}
-
- `;
+ syncLoad(e) {
+ this.loading = e.detail.value;
}
updated(changedProperties) {
@@ -341,63 +223,26 @@ ${this.params.display === "media" ? this.mediaTemplate() : nothing}
super.updated(changedProperties);
}
changedProperties.forEach((oldValue, propName) => {
+ if (propName === "search" && oldValue && this.search) {
+ const rawParams = new URLSearchParams(this.search);
+ const searchParams = Object.fromEntries(rawParams);
+ this.params = searchParams;
+ // ensure display is always stateful even if not directly set
+ if (!searchParams.display) {
+ rawParams.set('display', this.params.display || 'list');
+ window.history.replaceState({}, "", decodeURIComponent(`./x/views?${rawParams}`));
+ }
+ }
// change if tag changes, always change if coming to or from media since it's a larger query
- if (propName === "params" && oldValue && this.params && (oldValue.tag !== this.params.tag || this.params.display === "media")) {
- this.rebuildSearchResults();
+ if (propName === "params" && oldValue && this.params && this.shadowRoot) {
+ this.shadowRoot.querySelector('site-view').rebuildSearchResults();
}
});
}
- cardTemplate() {
- return html`${this.results.map(
- (item) => html`
-
- ${item.title}
- ${item.metadata.tags && item.metadata.tags != "" ? item.metadata.tags
- .split(",")
- .map(
- (tag) => html`
- `
- ) : nothing}
${this.loading ? html`` : ``}
${this.showTitle && this._remoteTitle
? html`${this._remoteTitle}
`
: ``}
-
- `;
+ ` : ``}
+
+`;
}
updated(changedProperties) {
if (super.updated) {
super.updated(changedProperties);
}
changedProperties.forEach((oldValue, propName) => {
- if (
- propName === "uuid" &&
- this[propName] &&
- !this.breakreference &&
- !this.loading &&
- !this.circularBlock
- ) {
- this.loading = true;
- let url = this.siteurl;
- if (url == "" && window.HAXCMS && window.location) {
- url = `${window.location.origin}${window.HAXCMS.instance.store.location.baseUrl}`;
- }
- // when UUID changes, remote load the content from it, replacing our own light dom material
- MicroFrontendRegistry.call(
- "@haxcms/pageCache",
- {
- site: url,
- type: "link",
- uuid: this.uuid,
- data: true,
- },
- this.renderContentResponse.bind(this)
- );
- }
- // aggressive, only run this if we actually are an author of material / have HAX tools
- if (
- propName === "siteurl" &&
- window.HaxStore &&
- !this.loading &&
- !this.circularBlock
- ) {
- clearTimeout(this.__debounce);
- this.__debounce = setTimeout(() => {
+ // no calls until we're actually visible
+ if (this.elementVisible) {
+ if (
+ (propName === "uuid" || propName === "elementVisible") &&
+ this[propName] &&
+ !this.breakreference &&
+ !this.loading &&
+ !this.circularBlock
+ ) {
this.loading = true;
- // forces the form to update as opposed to deferring to what it loaded initially
- this.__refresh = true;
- window.HaxStore.instance.refreshActiveNodeForm();
- }, 1500);
- }
- // this is crazy, take that content and spill it into lightDom
- // and it should be modifiable
- if (propName === "breakreference" && this[propName]) {
- // find the content area in shadow
- const cid = this.shadowRoot.querySelector("#content");
- let child = cid.firstElementChild;
- while (child) {
- this.appendChild(child);
- child = cid.firstElementChild;
+ let url = this.siteurl;
+ if (url == "" && window.HAXCMS && window.location) {
+ url = `${window.location.origin}${window.HAXCMS.instance.store.location.baseUrl}`;
+ }
+ // when UUID changes, remote load the content from it, replacing our own light dom material
+ MicroFrontendRegistry.call(
+ "@haxcms/pageCache",
+ {
+ site: url,
+ type: "link",
+ uuid: this.uuid,
+ data: true,
+ },
+ this.renderContentResponse.bind(this)
+ );
}
- }
- // used to be break reference, now we as re-establishing the reference
- else if (
- propName === "breakreference" &&
- !this[propName] &&
- oldValue &&
- !this.circularBlock
- ) {
- this.loading = true;
- wipeSlot(this);
- let url = this.siteurl;
- if (url == "" && window.HAXCMS && window.location) {
- url = `${window.location.origin}${window.HAXCMS.instance.store.location.baseUrl}`;
+ // aggressive, only run this if we actually are an author of material / have HAX tools
+ if (
+ propName === "siteurl" &&
+ window.HaxStore &&
+ !this.loading &&
+ !this.circularBlock
+ ) {
+ clearTimeout(this.__debounce);
+ this.__debounce = setTimeout(() => {
+ this.loading = true;
+ // forces the form to update as opposed to deferring to what it loaded initially
+ this.__refresh = true;
+ window.HaxStore.instance.refreshActiveNodeForm();
+ }, 1500);
+ }
+ // this is crazy, take that content and spill it into lightDom
+ // and it should be modifiable
+ if (propName === "breakreference" && this[propName]) {
+ // find the content area in shadow
+ const cid = this.shadowRoot.querySelector("#content");
+ let child = cid.firstElementChild;
+ while (child) {
+ this.appendChild(child);
+ child = cid.firstElementChild;
+ }
+ }
+ // used to be break reference, now we as re-establishing the reference
+ else if (
+ propName === "breakreference" &&
+ !this[propName] &&
+ oldValue &&
+ !this.circularBlock
+ ) {
+ this.loading = true;
+ wipeSlot(this);
+ let url = this.siteurl;
+ if (url == "" && window.HAXCMS && window.location) {
+ url = `${window.location.origin}${window.HAXCMS.instance.store.location.baseUrl}`;
+ }
+ MicroFrontendRegistry.call(
+ "@haxcms/pageCache",
+ {
+ site: url,
+ type: "link",
+ uuid: this.uuid,
+ data: true,
+ },
+ this.renderContentResponse.bind(this)
+ );
}
- MicroFrontendRegistry.call(
- "@haxcms/pageCache",
- {
- site: url,
- type: "link",
- uuid: this.uuid,
- data: true,
- },
- this.renderContentResponse.bind(this)
- );
}
});
}
@@ -386,7 +244,7 @@ class SiteRemoteContent extends HAXCMSI18NMixin(LitElement) {
if (!this.breakreference) {
lightChildrenToShadowRootSelector(this, "#content");
}
- if (this.itemManifest && response.data && !this.breakreference) {
+ if (!this.hideReference && this.itemManifest && this.itemManifest.title && response.data && !this.breakreference) {
window.HaxStore.instance.activeBodyIgnoreActive(false);
var today = new Date();
var dd = today.getDate();
@@ -432,6 +290,10 @@ class SiteRemoteContent extends HAXCMSI18NMixin(LitElement) {
uuid: {
type: String,
},
+ player: {
+ type: Boolean,
+ reflect: true,
+ },
// to avoid confusion w/ the site itself
siteurl: {
type: String,
@@ -451,6 +313,11 @@ class SiteRemoteContent extends HAXCMSI18NMixin(LitElement) {
type: Boolean,
reflect: true,
},
+ hideReference: {
+ type: Boolean,
+ reflect: true,
+ attribute: "hide-reference",
+ },
};
}
firstUpdated(changedProperties) {
@@ -548,7 +415,9 @@ class SiteRemoteContent extends HAXCMSI18NMixin(LitElement) {
// render the shadow root hidden content to lightDom
// so we can pull it in on initial page load
haxprogressiveEnhancement(el) {
- return this.shadowRoot.querySelector("#content").innerHTML;
+ if (this.shadowRoot && this.shadowRoot.querySelector("#content")) {
+ return this.shadowRoot.querySelector("#content").innerHTML;
+ }
}
/**
* Allow for dynamic setting of the parent field if we have the store around
diff --git a/elements/haxcms-elements/package.json b/elements/haxcms-elements/package.json
index 01b1391dc1..44bfe26c33 100755
--- a/elements/haxcms-elements/package.json
+++ b/elements/haxcms-elements/package.json
@@ -47,6 +47,7 @@
"@lrnwebcomponents/beaker-broker": "^7.0.15",
"@lrnwebcomponents/citation-element": "^7.0.15",
"@lrnwebcomponents/clean-two": "^7.0.15",
+ "@lrnwebcomponents/play-list": "^7.0.15",
"@lrnwebcomponents/course-design": "^7.0.15",
"@lrnwebcomponents/dynamic-import-registry": "^7.0.15",
"@lrnwebcomponents/editable-outline": "^7.0.15",
diff --git a/elements/play-list/play-list.js b/elements/play-list/play-list.js
index 6c013ae992..e4723f7eef 100644
--- a/elements/play-list/play-list.js
+++ b/elements/play-list/play-list.js
@@ -31,7 +31,10 @@ class PlayList extends LitElement {
this.orientation = "horizontal";
// mutation observer for light dom changes
this._observer = new MutationObserver((mutations) => {
- this.mirrorLightDomToItems();
+ clearTimeout(this._debounceMutations);
+ this._debounceMutations = setTimeout(() => {
+ this.mirrorLightDomToItems();
+ }, 100);
});
this._observer.observe(this, {
childList: true,
@@ -41,6 +44,9 @@ class PlayList extends LitElement {
async mirrorLightDomToItems() {
let items = Array.from(this.children);
+ if (items.length === 1 && items[0].tagName === "TEMPLATE") {
+ items = Array.from(items[0].children);
+ }
if (items.length !== 0) {
await Promise.all(items.map(async (item) => {
return await nodeToHaxElement(item);
@@ -113,15 +119,14 @@ class PlayList extends LitElement {
width: 500px;
}
- :host .carousel .item * {
+ :host .carousel .item .play-list-item {
width: 100%;
+ min-height: 400px;
}
-
:host([orientation="vertical"]) .carousel::part(base) {
grid-template-areas: 'slides slides pagination';
}
-
:host([orientation="vertical"]) .carousel::part(pagination) {
flex-direction: column;
}
@@ -133,6 +138,7 @@ class PlayList extends LitElement {
sl-carousel-item {
max-height: 400px;
overflow-y: auto;
+ justify-content: unset;
}
`,
];
@@ -150,7 +156,7 @@ class PlayList extends LitElement {
@sl-slide-change="${this.slideIndexChanged}"
class="carousel"
style="--aspect-ratio: ${this.aspectRatio};">
- ${this.items.map((item) => html`
+ ${this.items.map((item,index) => html`
${this.renderHAXItem(item)}
diff --git a/elements/play-list/src/play-list.js b/elements/play-list/src/play-list.js
index baba91b960..e4723f7eef 100644
--- a/elements/play-list/src/play-list.js
+++ b/elements/play-list/src/play-list.js
@@ -31,7 +31,10 @@ class PlayList extends LitElement {
this.orientation = "horizontal";
// mutation observer for light dom changes
this._observer = new MutationObserver((mutations) => {
- this.mirrorLightDomToItems();
+ clearTimeout(this._debounceMutations);
+ this._debounceMutations = setTimeout(() => {
+ this.mirrorLightDomToItems();
+ }, 100);
});
this._observer.observe(this, {
childList: true,
@@ -41,6 +44,9 @@ class PlayList extends LitElement {
async mirrorLightDomToItems() {
let items = Array.from(this.children);
+ if (items.length === 1 && items[0].tagName === "TEMPLATE") {
+ items = Array.from(items[0].children);
+ }
if (items.length !== 0) {
await Promise.all(items.map(async (item) => {
return await nodeToHaxElement(item);
@@ -113,8 +119,9 @@ class PlayList extends LitElement {
width: 500px;
}
- :host .carousel .item * {
+ :host .carousel .item .play-list-item {
width: 100%;
+ min-height: 400px;
}
:host([orientation="vertical"]) .carousel::part(base) {
@@ -131,6 +138,7 @@ class PlayList extends LitElement {
sl-carousel-item {
max-height: 400px;
overflow-y: auto;
+ justify-content: unset;
}
`,
];
@@ -148,7 +156,7 @@ class PlayList extends LitElement {
@sl-slide-change="${this.slideIndexChanged}"
class="carousel"
style="--aspect-ratio: ${this.aspectRatio};">
- ${this.items.map((item) => html`
+ ${this.items.map((item,index) => html`
${this.renderHAXItem(item)}
diff --git a/elements/simple-fields/simple-fields.js b/elements/simple-fields/simple-fields.js
index e6d6a5e97b..64f4f042e0 100755
--- a/elements/simple-fields/simple-fields.js
+++ b/elements/simple-fields/simple-fields.js
@@ -812,6 +812,12 @@ class SimpleFields extends SimpleFieldsLite {
format: "tabs",
},
},
+ collapse: {
+ defaultSettings: {
+ type: "object",
+ format: "collapse",
+ },
+ },
textarea: {
defaultSettings: {
type: "string",
diff --git a/elements/simple-fields/src/simple-fields.js b/elements/simple-fields/src/simple-fields.js
index e6d6a5e97b..64f4f042e0 100755
--- a/elements/simple-fields/src/simple-fields.js
+++ b/elements/simple-fields/src/simple-fields.js
@@ -812,6 +812,12 @@ class SimpleFields extends SimpleFieldsLite {
format: "tabs",
},
},
+ collapse: {
+ defaultSettings: {
+ type: "object",
+ format: "collapse",
+ },
+ },
textarea: {
defaultSettings: {
type: "string",