(detail: GestureDetail, isEnd = false)
| 504 | } |
| 505 | |
| 506 | private setNextIndex(detail: GestureDetail, isEnd = false) { |
| 507 | const rtl = isRTL(this.el); |
| 508 | const activated = this.activated; |
| 509 | const buttons = this.getButtons(); |
| 510 | const index = buttons.findIndex((button) => button.value === this.value); |
| 511 | const previous = buttons[index]; |
| 512 | let current; |
| 513 | let nextIndex; |
| 514 | |
| 515 | if (index === -1) { |
| 516 | return; |
| 517 | } |
| 518 | |
| 519 | // Get the element that the touch event started on in case |
| 520 | // it was the checked button, then we will move the indicator |
| 521 | const rect = previous.getBoundingClientRect() as DOMRect; |
| 522 | const left = rect.left; |
| 523 | const width = rect.width; |
| 524 | |
| 525 | // Get the element that the gesture is on top of based on the currentX of the |
| 526 | // gesture event and the Y coordinate of the starting element, since the gesture |
| 527 | // can move up and down off of the segment |
| 528 | const currentX = detail.currentX; |
| 529 | |
| 530 | const previousY = rect.top + rect.height / 2; |
| 531 | |
| 532 | /** |
| 533 | * Segment can be used inside the shadow dom |
| 534 | * so doing document.elementFromPoint would never |
| 535 | * return a segment button in that instance. |
| 536 | * We use getRootNode to which will return the parent |
| 537 | * shadow root if used inside a shadow component and |
| 538 | * returns document otherwise. |
| 539 | */ |
| 540 | const root = this.el.getRootNode() as Document | ShadowRoot; |
| 541 | const nextEl = root.elementFromPoint(currentX, previousY) as HTMLIonSegmentButtonElement; |
| 542 | |
| 543 | const decreaseIndex = rtl ? currentX > left + width : currentX < left; |
| 544 | const increaseIndex = rtl ? currentX < left : currentX > left + width; |
| 545 | |
| 546 | // If the indicator is currently activated then we have started the gesture |
| 547 | // on top of the checked button so we need to slide the indicator |
| 548 | // by checking the button next to it as we move |
| 549 | if (activated && !isEnd) { |
| 550 | // Decrease index, move left in LTR & right in RTL |
| 551 | if (decreaseIndex) { |
| 552 | const newIndex = index - 1; |
| 553 | |
| 554 | if (newIndex >= 0) { |
| 555 | nextIndex = newIndex; |
| 556 | } |
| 557 | // Increase index, moves right in LTR & left in RTL |
| 558 | } else if (increaseIndex) { |
| 559 | if (activated && !isEnd) { |
| 560 | const newIndex = index + 1; |
| 561 | |
| 562 | if (newIndex < buttons.length) { |
| 563 | nextIndex = newIndex; |
no test coverage detected