Zum Inhalt

🔧 API Dokumentation

Die ManniPhoneDialer Klasse ist das Herzstück von manniPhone.

Übersicht

import ManniPhoneDialer from './assets/js/dialer.js';

const dialer = new ManniPhoneDialer(options);

Konstruktor

new ManniPhoneDialer(options)

Erstellt eine neue Dialer-Instanz.

Parameter:

Option Typ Default Beschreibung
displayElement HTMLElement null Element für Nummern-Anzeige
maxDigits number 15 Maximale Anzahl Ziffern
onDigit function null Callback bei neuer Ziffer
onDial function null Callback beim Wählen
onClear function null Callback beim Löschen
soundEnabled boolean true Sounds aktiviert

Beispiel:

const dialer = new ManniPhoneDialer({
  displayElement: document.getElementById('display'),
  maxDigits: 12,
  onDigit: (digit, fullNumber) => {
    console.log(`Neue Ziffer: ${digit}, Nummer: ${fullNumber}`);
    playSound('key-press');
  },
  onDial: (number) => {
    console.log(`Wähle: ${number}`);
  }
});

Methoden

addDigit(digit)

Fügt eine Ziffer hinzu.

dialer.addDigit('5');
dialer.addDigit('0');
// Display: 50
Parameter Typ Beschreibung
digit string Ziffer (0-9, *, #)

Returns: string – Die aktuelle Nummer

removeDigit()

Entfernt die letzte Ziffer.

dialer.addDigit('1');
dialer.addDigit('2');
dialer.addDigit('3');
// Display: 123

dialer.removeDigit();
// Display: 12

Returns: string – Die aktuelle Nummer

clear()

Löscht alle Ziffern.

dialer.clear();
// Display: -

Returns: void

getNumber()

Gibt die aktuelle Nummer zurück.

const number = dialer.getNumber();
// "01234567890"

Returns: string

getFormattedNumber()

Gibt die formatierte Nummer zurück.

dialer.addDigit('0');
dialer.addDigit('1');
dialer.addDigit('7');
dialer.addDigit('6');
// ...

const formatted = dialer.getFormattedNumber();
// "0176 123 4567"

Returns: string – Formatierte Nummer

dial()

Öffnet den tel: Link.

dialer.dial();
// Öffnet tel:+491761234567

Returns: void

Wichtig: Browser/OS öffnet die Standard-Telefon-App.

getTelUri()

Gibt den tel: URI zurück ohne ihn zu öffnen.

const uri = dialer.getTelUri();
// "tel:+491761234567"

Returns: string

setPrefix(prefix)

Setzt eine Ländervorwahl.

dialer.setPrefix('+49');
// Alle Nummern werden mit +49 prefixed
Parameter Typ Default Beschreibung
prefix string '' Ländervorwahl

isValid()

Prüft ob die Nummer valide ist.

if (dialer.isValid()) {
  dialer.dial();
} else {
  showError('Ungültige Nummer');
}

Returns: boolean

playSound(soundName)

Spielt einen Sound ab (wenn aktiviert).

dialer.playSound('key-click');
dialer.playSound('dial-tone');
Sound Beschreibung
key-click Tastendruck
dial-tone Freizeichen
dial-return Wählscheibe zurück
hangup Auflegen

Events

Custom Events

Der Dialer dispatcht Custom Events auf dem displayElement:

dialer.displayElement.addEventListener('dialer:digit', (e) => {
  console.log('Neue Ziffer:', e.detail.digit);
  console.log('Aktuelle Nummer:', e.detail.number);
});

dialer.displayElement.addEventListener('dialer:dial', (e) => {
  console.log('Wähle:', e.detail.number);
  console.log('URI:', e.detail.uri);
});

dialer.displayElement.addEventListener('dialer:clear', () => {
  console.log('Gelöscht');
});

Vollständiges Beispiel

<!DOCTYPE html>
<html>
<head>
  <title>Custom Phone</title>
</head>
<body>
  <div id="display">-</div>
  <div id="keypad">
    <!-- Tasten -->
  </div>
  <button id="dial-btn">Anrufen</button>
  <button id="clear-btn">Löschen</button>

  <script type="module">
    import ManniPhoneDialer from './assets/js/dialer.js';

    const display = document.getElementById('display');
    const dialer = new ManniPhoneDialer({
      displayElement: display,
      maxDigits: 15,
      onDigit: (digit, number) => {
        display.textContent = number || '-';
        playSound('click');
      }
    });

    // Tasten Event
    document.querySelectorAll('#keypad button').forEach(btn => {
      btn.addEventListener('click', () => {
        dialer.addDigit(btn.dataset.digit);
      });
    });

    // Anrufen
    document.getElementById('dial-btn').addEventListener('click', () => {
      if (dialer.isValid()) {
        dialer.dial();
      }
    });

    // Löschen
    document.getElementById('clear-btn').addEventListener('click', () => {
      dialer.clear();
      display.textContent = '-';
    });
  </script>
</body>
</html>

TypeScript Types

interface DialerOptions {
  displayElement?: HTMLElement | null;
  maxDigits?: number;
  onDigit?: (digit: string, fullNumber: string) => void;
  onDial?: (number: string) => void;
  onClear?: () => void;
  soundEnabled?: boolean;
}

interface DialerDigitEvent extends CustomEvent {
  detail: {
    digit: string;
    number: string;
  };
}

interface DialerDialEvent extends CustomEvent {
  detail: {
    number: string;
    uri: string;
  };
}

class ManniPhoneDialer {
  constructor(options?: DialerOptions);

  addDigit(digit: string): string;
  removeDigit(): string;
  clear(): void;
  getNumber(): string;
  getFormattedNumber(): string;
  dial(): void;
  getTelUri(): string;
  setPrefix(prefix: string): void;
  isValid(): boolean;
  playSound(soundName: string): void;
}

Browser-Kompatibilität

Browser Support
Chrome 80+ ✅ Voll
Safari 13+ ✅ Voll
Firefox 75+ ✅ Voll
Edge 80+ ✅ Voll
IE 11 ❌ Nicht unterstützt

Zurück zur Startseite