StringPositionTracker Module

Description

The StringPositionTracker module in the StringTune library provides real-time tracking of the current scroll position and displays it on the screen. This module is ideal for debugging or visualizing scroll-based interactions.

How It Works

• Scroll Position Tracking: The module dynamically updates the displayed scroll position as the user scrolls.
• On-Screen Display: Shows the scroll position in a fixed position on the screen for easy monitoring.
• Non-Attribute Based: This module does not rely on HTML attributes for configuration but is directly attached to StringTune.

Integration

1. Import and Initialization

import { StringTune } from './StringTune/StringTune';
import { StringPositionTracker } from './StringTune/Modules/StringPositionTracker';

const stringModule = StringTune.getInstance();

stringModule.use(StringPositionTracker);

stringModule.start(60); // Start the library

Display Details

On-Screen Scroll Position

The scroll position is displayed in the bottom-left corner of the viewport by default. The style and position can be customized by modifying the createDisplayElement method.

Example Display

[data-position] {
  position: fixed;
  bottom: 10px;
  left: 10px;
  background-color: #C8C2CF;
  border: 1px solid #101214;
  color: green;
  z-index: 1000;
  font-family: Arial, sans-serif;
  font-size: 12px;
  padding: 2px 8px;
}

[data-position]::after {
  content: attr(value);
  color: #101214;
}

Extended Functionality

Scroll Value Emission

Although the module primarily updates the on-screen scroll position, you can integrate custom logic by extending the onScroll or onUpdate methods:

stringModule.on('scroll', (data) => {
  console.log('Current scroll position:', data.c);
});

Advanced Examples

Example 1: Repositioning the Display

To move the position tracker to the top-right corner, modify the styles in the createDisplayElement method:

this.displayElement.style.top = '10px';
this.displayElement.style.left = 'unset';
this.displayElement.style.right = '10px';

Example 2: Using Scroll Data for Custom Behavior

stringModule.on('scroll', (data) => {
  if (data.c > 500) {
    console.log('Scrolled more than 500px');
  }
});

Frequently Asked Questions

1. Why is the position tracker not visible?

• Ensure that stringModule.start(60) has been called to initialize the library.
• Verify that the module is correctly attached using stringModule.use(StringPositionTracker);.

2. How can I change the display format?

Modify the setAttribute call in the onScroll method or use CSS to adjust the displayed value.

3. Can I remove the position tracker dynamically?

Yes, call the destructor method to remove the tracker and its display:

const positionTracker = stringModule.getModule(StringPositionTracker);
positionTracker.destructor();