From e9b70b9b316e6adebb2400e803d246b0779b288e Mon Sep 17 00:00:00 2001 From: Emmanuel Schweitzer Date: Mon, 10 Jun 2024 17:48:39 +1000 Subject: [PATCH] NSW DS ip-capable card carousel --- .../sfGpsDsAuNswCardCollectionComm.js | 2 +- .../sfGpsDsAuNswCardCarousel.js | 123 +++++++------ .../sfGpsDsAuNswCardCarouselComm.html | 42 ++--- .../sfGpsDsAuNswCardCarouselComm.js | 171 ++++++++---------- .../sfGpsDsAuNswCardCarouselComm.js-meta.xml | 71 +++++++- 5 files changed, 219 insertions(+), 190 deletions(-) diff --git a/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCard/lwc/sfGpsDsAuNswCardCollectionComm/sfGpsDsAuNswCardCollectionComm.js b/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCard/lwc/sfGpsDsAuNswCardCollectionComm/sfGpsDsAuNswCardCollectionComm.js index 9255ca78..69499fac 100644 --- a/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCard/lwc/sfGpsDsAuNswCardCollectionComm/sfGpsDsAuNswCardCollectionComm.js +++ b/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCard/lwc/sfGpsDsAuNswCardCollectionComm/sfGpsDsAuNswCardCollectionComm.js @@ -61,7 +61,7 @@ export default class SfGpsDsAuNswCardCollectionComm extends SfGpsDsIpLwc { return data.map((card, index) => ({ ...card, - title: card.headline, // it used to be called headline in v1 + title: card.title || card.headline, // it used to be called headline in v1 copy: card.copy ? htmlDecode(card.copy) : null, footer: card.footer ? htmlDecode(card.footer) : null, index: card.index || `card-${index + 1}` diff --git a/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarousel/sfGpsDsAuNswCardCarousel.js b/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarousel/sfGpsDsAuNswCardCarousel.js index 31ad408e..bf8a7253 100644 --- a/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarousel/sfGpsDsAuNswCardCarousel.js +++ b/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarousel/sfGpsDsAuNswCardCarousel.js @@ -95,7 +95,6 @@ export default class extends LightningElement { _itemsOriginal; _items; - _itemsInit; _itemsNb; @api @@ -136,6 +135,10 @@ export default class extends LightningElement { const value = this._itemsOriginal || []; const itemsNb = value.length; + if (!this._items?.length && value) { + this._initialRender = true; + } + this._items = value.map((item, index) => ({ ...item, _index: index, @@ -147,7 +150,6 @@ export default class extends LightningElement { _style: {} })); - this._itemsInit = [...this._items]; this.itemsNb = itemsNb; } @@ -607,7 +609,7 @@ export default class extends LightningElement { } emitCarouselActiveItemsEvent() { - this.emitCarouselEvents("carousel-active-items", { + this.emitCarouselEvents("carouselactiveitems", { firstSelectedItem: this.selectedItem, visibleItemsNb: this.visibleItemsNb }); @@ -705,75 +707,78 @@ export default class extends LightningElement { if (this._initialRender) { this._initialRender = false; - const itemStyle = window.getComputedStyle(this.liveFirstItem); - const containerStyle = window.getComputedStyle(this.refs.wrapper); - - let itemWidth = parseFloat(itemStyle.getPropertyValue("width")); - const itemMargin = (this._itemMargin = parseFloat( - itemStyle.getPropertyValue("margin-right") - )); - const containerPadding = parseFloat( - containerStyle.getPropertyValue("padding-left") - ); - let containerWidth = parseFloat(containerStyle.getPropertyValue("width")); + if (this._items?.length) { + const itemStyle = window.getComputedStyle(this.liveFirstItem); + const containerStyle = window.getComputedStyle(this.refs.wrapper); + let itemWidth = parseFloat(itemStyle.getPropertyValue("width")); + const itemMargin = (this._itemMargin = parseFloat( + itemStyle.getPropertyValue("margin-right") + )); + const containerPadding = parseFloat( + containerStyle.getPropertyValue("padding-left") + ); + let containerWidth = parseFloat( + containerStyle.getPropertyValue("width") + ); - if (!this.itemAutoSize) { - this.itemAutoSize = itemWidth; - } + if (!this.itemAutoSize) { + this.itemAutoSize = itemWidth; + } - if (!this.itemOriginalWidth) { - this.itemOriginalWidth = itemWidth; - } else { - itemWidth = this.itemOriginalWidth; - } + if (!this.itemOriginalWidth) { + this.itemOriginalWidth = itemWidth; + } else { + itemWidth = this.itemOriginalWidth; + } - if (this.itemAutoSize) { - this.itemOriginalWidth = parseInt(this.itemAutoSize, 10); - itemWidth = this.itemOriginalWidth; - } + if (this.itemAutoSize) { + this.itemOriginalWidth = parseInt(this.itemAutoSize, 10); + itemWidth = this.itemOriginalWidth; + } - if (containerWidth < itemWidth) { - this.itemOriginalWidth = containerWidth; - itemWidth = this.itemOriginalWidth; - } + if (containerWidth < itemWidth) { + this.itemOriginalWidth = containerWidth; + itemWidth = this.itemOriginalWidth; + } - this.visibleItemsNb = parseInt( - (containerWidth - 2 * containerPadding + itemMargin) / - (itemWidth + itemMargin), - 10 - ); - this.itemsWidth = parseFloat( - ( + this.visibleItemsNb = parseInt( (containerWidth - 2 * containerPadding + itemMargin) / - this.visibleItemsNb - - itemMargin - ).toFixed(1) - ); - this.containerWidth = (this.itemsWidth + itemMargin) * this.itemsNb; - this.translateContainer = - 0 - (this.itemsWidth + itemMargin) * this.visibleItemsNb; - this.totTranslate = - 0 - this.selectedItem * (this.itemsWidth + itemMargin); - - if (this.itemsNb <= this.visibleItemsNb) { - this.totTranslate = 0; - } + (itemWidth + itemMargin), + 10 + ); + this.itemsWidth = parseFloat( + ( + (containerWidth - 2 * containerPadding + itemMargin) / + this.visibleItemsNb - + itemMargin + ).toFixed(1) + ); + this.containerWidth = (this.itemsWidth + itemMargin) * this.itemsNb; + this.translateContainer = + 0 - (this.itemsWidth + itemMargin) * this.visibleItemsNb; + this.totTranslate = + 0 - this.selectedItem * (this.itemsWidth + itemMargin); + + if (this.itemsNb <= this.visibleItemsNb) { + this.totTranslate = 0; + } - /* Install drag behaviour on carousel */ + /* Install drag behaviour on carousel */ - if (this._drag && window.requestAnimationFrame) { - const element = this.refs.carousel; + if (this._drag && window.requestAnimationFrame) { + const element = this.refs.carousel; - if (!this._swipeContent) { - this._swipeContent = new SwipeContent(element); - } else if (this._swipeContent.element !== element) { - this._swipeContent.cancelDragging(); // removes event handlers - this._swipeContent = new SwipeContent(element); + if (!this._swipeContent) { + this._swipeContent = new SwipeContent(element); + } else if (this._swipeContent.element !== element) { + this._swipeContent.cancelDragging(); // removes event handlers + this._swipeContent = new SwipeContent(element); + } } } } - if (!this.flexSupported) { + if (!this.flexSupported && this._items) { this.refs.list.style.width = `${(this.itemsWidth + this._itemMargin) * this.visibleItemsNb * 3}px`; } } diff --git a/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarouselComm/sfGpsDsAuNswCardCarouselComm.html b/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarouselComm/sfGpsDsAuNswCardCarouselComm.html index d4c68fc8..221a00bc 100644 --- a/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarouselComm/sfGpsDsAuNswCardCarouselComm.html +++ b/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarouselComm/sfGpsDsAuNswCardCarouselComm.html @@ -5,26 +5,26 @@ > - - + diff --git a/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarouselComm/sfGpsDsAuNswCardCarouselComm.js b/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarouselComm/sfGpsDsAuNswCardCarouselComm.js index a84aae6a..ac858247 100644 --- a/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarouselComm/sfGpsDsAuNswCardCarouselComm.js +++ b/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarouselComm/sfGpsDsAuNswCardCarouselComm.js @@ -1,7 +1,37 @@ import { api } from "lwc"; -import SfGpsDsLwc from "c/sfGpsDsLwc"; +import SfGpsDsIpLwc from "c/sfGpsDsIpLwc"; +import { htmlDecode } from "c/sfGpsDsHelpers"; + +export default class extends SfGpsDsIpLwc { + @api + get ipName() { + return super.ipName; + } + + set ipName(value) { + super.ipName = value; + } + + _rawItems; + + @api + get inputJSON() { + return super.inputJSON; + } + + set inputJSON(value) { + super.inputJSON = value; + } + + @api + get optionsJSON() { + return super.optionsJSON; + } + + set optionsJSON(value) { + super.optionsJSON = value; + } -export default class extends SfGpsDsLwc { @api accessibilityLabel; @api drag; @api justifyContent; @@ -9,118 +39,59 @@ export default class extends SfGpsDsLwc { @api navigationItemClassName; @api navigationClassName; @api paginationClassName; + @api cstyle = "white"; + @api headline = false; + @api orientation = "vertical"; + @api displayDate = false; + @api dateStyle = "medium"; @api className; - /* api: items */ + get isEmpty() { + return ( + this._didLoadOnce && (this._items == null || this._items.length === 0) + ); + } - _itemsOriginal; + get navigationNavigation() { + return this.navigation === "navigation" || this.navigation === "pagination"; + } - @api get items() { - return this._itemsOriginal; + get navigationPagination() { + return this.navigation === "pagination"; } - set items(value) { - this._itemsOriginal = value; - - if (typeof value === "string") { - try { - if (value) { - value = JSON.parse(value); - } else { - this._items = null; - return; - } - } catch (e) { - value = []; - this.addError( - "CC-IP", - "The items attribute must be in JSON array format { cstyle, headline, orientation, tag, date, dateStyle, image, imageAlt, title, copy }." - ); - } - } + get loop() { + return this.navigation === "loop"; + } - if (Array.isArray(value)) { - this._items = value; - } else if (value) { - this._items = [value]; - } else { - this._items = null; - this.addError( - "CC-IT", - "We had an issue parsing JSON for the items property." - ); + mapIpData(data) { + if (!data) { + return null; } - } - _items = [ - { - cstyle: "highlight", - headline: true, - orientation: "vertical", - tag: null, - date: null, - dateStyle: null, - image: - "https://images.unsplash.com/photo-1502085671122-2d218cd434e6?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", - imageAlt: "Globe Awards 2019", - title: "[Nominations open for Green Globe Awards 2019](#)", - copy: "The annual awards will recognise individuals and organisations for their leadership , commitment and innovation in sustainability across NSW." - }, - { - cstyle: "highlight", - headline: true, - orientation: "vertical", - tag: null, - date: null, - dateStyle: null, - image: - "https://images.unsplash.com/photo-1587752799766-8eb9791261d4?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", - imageAlt: "Green spaces", - title: "[Quality green spaces and a million more trees for NSW](#)", - copy: "The NSW Government will create more quality green spaces and increase ther tree canopy in Sydney bt 2022." - }, - { - cstyle: "highlight", - headline: true, - orientation: "vertical", - tag: null, - date: null, - dateStyle: null, - image: - "https://images.unsplash.com/photo-1642636497287-1183da9dd103?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", - imageAlt: "Premier's priotity", - title: - "[New Premier's Priority to lift literacy and numeracy standards](#)", - copy: "The NSW Government will redouble its efforts to lift literacy and numeracy standards across NSW public schools to ensure students are given every opportunity to be their best." - }, - { - cstyle: "highlight", - headline: true, - orientation: "vertical", - tag: null, - date: null, - dateStyle: null, - image: - "https://images.unsplash.com/photo-1589913864122-ada28c04fdd1?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3", - imageAlt: "Incredible nature", - title: "[Some big large title for Card Number 4](#)", - copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a lacinia nisi. Duis rutrum at quam eget euismod. Morbi est lectus, aliquet vel neque id, elementum pellentesque enim." + if (!Array.isArray(data)) { + data = [data]; } - ]; - get hasItems() { - return this._items?.length; + return data.map((card, index) => ({ + ...card, + title: card.title || card.headline, // it used to be called headline in v1 and it's not in the payload in v2 + copy: card.copy ? htmlDecode(card.copy) : null, + footer: card.footer ? htmlDecode(card.footer) : null, + index: card.index || `card-${index + 1}`, + cstyle: this.cstyle, + headline: this.headline, + orientation: this.orientation, + dateStyle: this.dateStyle, + date: this.displayDate ? card.date : null + })); } - get navigationNavigation() { - return this.navigation === "navigation" || this.navigation === "pagination"; - } + /* lifecycle */ - get navigationPagination() { - return this.navigation === "pagination"; - } + connectedCallback() { + super.connectedCallback(); - get loop() { - return this.navigation === "loop"; + this.classList.add("nsw-scope"); } } diff --git a/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarouselComm/sfGpsDsAuNswCardCarouselComm.js-meta.xml b/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarouselComm/sfGpsDsAuNswCardCarouselComm.js-meta.xml index b214ad1a..2eb588f0 100644 --- a/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarouselComm/sfGpsDsAuNswCardCarouselComm.js-meta.xml +++ b/sfGpsDsAuNsw/main/default/lwc/sfGpsDsAuNswCardCarousel/lwc/sfGpsDsAuNswCardCarouselComm/sfGpsDsAuNswCardCarouselComm.js-meta.xml @@ -9,6 +9,29 @@ + + + + + - + + +