Usage

Example

import { CamberAvatarEditor } from '@byre/camber-avatar-editor';

// Register the component
customElements.define('camber-avatar-editor', CamberAvatarEditor);

// Listen for changes
document.addEventListener('camber:change', e => {
  console.log('New profile picture data URL:', e.detail.value);
  console.log('Previous value:', e.detail.previousValue);
  console.log('Source:', e.detail.source);
  
  // Save to localStorage as example
  if (e.detail.value) {
    localStorage.setItem('profile-pic', e.detail.value);
    document.getElementById('saved').textContent = 'Saved! (check localStorage)';
  } else {
    localStorage.removeItem('profile-pic');
    document.getElementById('saved').textContent = 'No image saved';
  }
});

// Listen for errors
document.addEventListener('camber:error', e => {
  console.error('Error:', e.detail.error.message);
  alert('Error: ' + e.detail.error.message);
});

// Show saved value on load
window.addEventListener('DOMContentLoaded', () => {
  const saved = localStorage.getItem('profile-pic');
  if (saved) {
    document.getElementById('saved').textContent = 'Saved! (check localStorage)';
  } else {
    document.getElementById('saved').textContent = 'No image saved';
  }
});