javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: attempt to account for dynamic width options

Browse Source
This commit is contained in:
Sean Perkins
2024-01-15 17:08:51 -05:00
parent 4aa7d47dce
commit 561998ecea
1 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
core/src/components/item-sliding/item-sliding.tsx
View File

@@ -549,10 +549,13 @@ export class ItemSliding implements ComponentInterface {
if (openAmount < optsWidthRightSide) {
/**
* The amount of space available for each option based
* on the total open space for the current swipe gesture
* on the total open space for the current swipe gesture.
*/
const spacePerOption = Math.abs(openAmount) / options.length;
const minOptionWidth = Math.min(...options.map((option) => option.clientWidth));
const baseFactor = minOptionWidth / optsWidthRightSide;
options.forEach((option, index) => {
/**
* The initial distance to offset the individual option
@@ -568,7 +571,12 @@ export class ItemSliding implements ComponentInterface {
*/
const deltaX = isRTL ? (index + 1) * spacePerOption : (options.length - index) * spacePerOption;
option.style.transform = `translate3d(${viewportOffset - deltaX}px,0,0)`;
const scaleFactor = option.clientWidth / optsWidthRightSide;
const multiplier = 1 + (scaleFactor - Math.min(baseFactor, scaleFactor));
const transformX = Math.max(viewportOffset - deltaX * multiplier, 0);
option.style.transform = `translate3d(${transformX}px,0,0)`;
if (isRTL) {
/**
@@ -609,10 +617,13 @@ export class ItemSliding implements ComponentInterface {
if (openAmount > -optsWidthLeftSide) {
/**
* The amount of space available for each option based
* on the total open space for the current swipe gesture
* on the total open space for the current swipe gesture.
*/
const spacePerOption = Math.abs(openAmount) / options.length;
const minOptionWidth = Math.min(...options.map((option) => option.clientWidth));
const baseFactor = minOptionWidth / optsWidthRightSide;
options.forEach((option, index) => {
/**
* The initial distance to offset the individual option
@@ -626,7 +637,12 @@ export class ItemSliding implements ComponentInterface {
*/
const deltaX = isRTL ? (options.length - index) * spacePerOption : (index + 1) * spacePerOption;
option.style.transform = `translate3d(${-1 * viewportOffset + deltaX}px,0,0)`;
const scaleFactor = option.clientWidth / optsWidthRightSide;
const multiplier = 1 + (scaleFactor - Math.min(baseFactor, scaleFactor));
const transformX = Math.min(-1 * viewportOffset + deltaX * multiplier, 0);
option.style.transform = `translate3d(${transformX}px,0,0)`;
if (!isRTL) {
/**