Skip to content

Commit

Permalink
eschweitzer78/2024-06-10-1200 (#361)
Browse files Browse the repository at this point in the history
* NSW DS date fixes

* NSW DS Date disable picker button when readOnly

* IpLwc attribute typo fixed

* NSW DS ip-capable card carousel
  • Loading branch information
eschweitzer78 authored Jun 10, 2024
1 parent 780a48f commit 4bba433
Show file tree
Hide file tree
Showing 11 changed files with 229 additions and 200 deletions.
2 changes: 1 addition & 1 deletion sfGpsDs/main/default/lwc/sfGpsDsIpLwc/sfGpsDsIpLwc.js
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ export default class SfGpsDsIpLwc extends SfGpsDsLwc {
this._items = this.mapIpData(data);
}

this.didLoadOnce = true;
this._didLoadOnce = true;
} catch (e) {
this.addError("CK-EX", "Issue getting the content collection.");
console.log("CK-EX", e);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export default class SfGpsDsIpLwcOsN extends SfGpsDsLwcOsN {
this._items = this.mapIpData(data);
}

this.didLoadOnce = true;
this._didLoadOnce = true;
} catch (e) {
this.addError("CK-EX", "Issue getting the content collection");
this._items = [];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,6 @@ export default class extends LightningElement {

_itemsOriginal;
_items;
_itemsInit;
_itemsNb;

@api
Expand Down Expand Up @@ -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,
Expand All @@ -147,7 +150,6 @@ export default class extends LightningElement {
_style: {}
}));

this._itemsInit = [...this._items];
this.itemsNb = itemsNb;
}

Expand Down Expand Up @@ -607,7 +609,7 @@ export default class extends LightningElement {
}

emitCarouselActiveItemsEvent() {
this.emitCarouselEvents("carousel-active-items", {
this.emitCarouselEvents("carouselactiveitems", {
firstSelectedItem: this.selectedItem,
visibleItemsNb: this.visibleItemsNb
});
Expand Down Expand Up @@ -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`;
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,26 @@
>
</c-sf-gps-ds-configuration-error>

<c-sf-gps-ds-au-nsw-card-carousel
lwc:elseif={hasItems}
accessibility-label={accessibilityLabel}
drag={drag}
loop={loop}
navigation={navigationNavigation}
navigation-pagination={navigationPagination}
justify-content={justifyContent}
items={_items}
navigation-class-name={navigationClassName}
navigation-item-class-name={navigationItemClassName}
pagination-class-name={paginationClassName}
class-name={className}
>
</c-sf-gps-ds-au-nsw-card-carousel>
<template lwc:else>
<c-sf-gps-ds-spinner lwc:if={_isLoading}> </c-sf-gps-ds-spinner>

<c-sf-gps-ds-empty
lwc:else
title="No items."
content="Please set the items attribute."
>
</c-sf-gps-ds-empty>
<c-sf-gps-ds-empty lwc:if={isEmpty} title="No matching content">
</c-sf-gps-ds-empty>

<c-sf-gps-ds-au-nsw-card-carousel
lwc:else
accessibility-label={accessibilityLabel}
drag={drag}
loop={loop}
navigation={navigationNavigation}
navigation-pagination={navigationPagination}
justify-content={justifyContent}
items={_items}
navigation-class-name={navigationClassName}
navigation-item-class-name={navigationItemClassName}
pagination-class-name={paginationClassName}
class-name={className}
>
</c-sf-gps-ds-au-nsw-card-carousel>
</template>
</template>
Loading

0 comments on commit 4bba433

Please sign in to comment.