Skip to content

Window Resize API ​

The Window Resize API allows plugins to handle window resize events in Acode. This is particularly useful for managing UI elements that need to respond to window size changes or keyboard visibility.

Import ​

js
const windowResize = acode.require('windowResize');

Events ​

The API supports two types of events:

  • resize: Triggered when window resizing is complete
  • resizeStart: Triggered when window starts resizing

Usage ​

Adding Event Listeners ​

Use the on() method to listen for resize events:

js
// Listen for resize complete
windowResize.on('resize', () => {
		// Handle resize complete
		console.log('Window resize finished');
});

// Listen for resize start
windowResize.on('resizeStart', () => {
		// Handle resize start
		console.log('Window started resizing');
});

Removing Event Listeners ​

Use the off() method to remove event listeners:

js
const handleResize = () => {
		// Resize handler logic
};

// Add listener
windowResize.on('resize', handleResize);

// Remove listener
windowResize.off('resize', handleResize);

Example Use Case ​

Here's a example of using the Window Resize API to adjust a plugin's UI:

js
class MyPlugin {
		constructor() {
				this.container = document.createElement('div');
				this.setupResizeHandling();
		}

		setupResizeHandling() {
				// Handle initial resize
				windowResize.on('resizeStart', () => {
						// Prepare UI for resize
						this.container.style.transition = 'none';
				});

				windowResize.on('resize', () => {
						// Update UI after resize
						this.container.style.transition = 'all 0.3s';
						this.updateLayout();
				});
		}

		updateLayout() {
				const windowWidth = window.innerWidth;
				if (windowWidth < 768) {
						this.container.classList.add('compact');
				} else {
						this.container.classList.remove('compact');
				}
		}
}

Notes ​

  • The resize event is debounced internally to prevent excessive callbacks
  • Use resizeStart for immediate response to resize initiation
  • Use resize for final adjustments after resizing completes
  • Event listeners should be removed when no longer needed to prevent memory leaks

Released under the MIT License.