Dokumentation zum Bingo-JavaScript

JavaScript-Dateien einbinden:

Die beiden Dateien pdfmaker.js und bingo.js sowie die Font-Metrik-Dateien für die genutzten Schriftarten werden im Kopf der Seite eingebunden:
```
<script src="j/afm-helvetica.js"></script>
<script src="j/pdfmaker.js"></script>
<script src="j/bingo.js"></script>
```

In die Seite wird ein <form>-Element eingefügt.

Das bingo.js installiert sich in alle <form>-Elemente, die ein <button>-Element mit dem Namen create-pdf enthalten:

<html>
  <head>
    <script src="j/afm-helvetica.js"></script>
    <script src="j/pdfmaker.js"></script>
    <script src="j/bingo.js"></script>
    <title>Bingo!</title>
  </head>
  <body>
    <h1>Bingo!</h1>
    <form>
      <button name="create-pdf" type="button">PDF erzeugen</button>
    </form>
  </body>
</html>

Ausprobieren: bingo-simple.htm.

PDF-Parameter:

Mit Attributen des <form>-Elementes können Sie Namen, Titel und Betreff des erzeugten PDFs konfigurieren sowie eine Rückfrage konfigurieren.

Attributnamen	Inhalt	Bedeutung	Default
`data-pdf-confirm`	Text	Hinweis wird vor der PDF-Erzeugung ausgegeben und muss bestätigt werden.	kein Hinweis
`data-pdf-filename`	Name	Namensprefix für die heruntergeladenen PDF-Dateien	bingo
`data-pdf-subject`	Text	Wird in die PDF-Metadaten als "Betreff" aufgenommen.	kein Betreff
`data-pdf-title`	Text	Wird in die PDF-Metadaten als "Titel" aufgenommen	Bingo!

Coupon-Parameter:

Diese Parameter werden aus <input> und <select>-Elementen des <form>-Elementes entnommen.

Feldnamen	Format	Einheit	Beschreibung	Default
`cards-per-page`	Ganzzahl : Ganzzahl	Coupons/Zeile, Coupons/Spalte	Zahl der Coupons je Druckseite	1:1
`card-format`	Ganzzahl	4 für 4×4, 5 für 5×5…	Format der Coupons	5 für 5×5
`n-pages`	Ganzzahl	Seiten	Druckseiten im PDF	1

Ausprobieren: bingo-format-size.htm.

Papierformat:

Auch diese Parameter werden aus <input> und <select>-Elementen des <form>-Elementes entnommen.

Feldnamen	Format	Einheit	Beschreibung
`page-width-mm`	Zahl	Millimeter	Breite einer Druckseite
`page-height-mm`	Zahl	Millimeter	Höhe einer Druckseite
`page-size-mm`	Zahl : Zahl	Millimeter	Breite und Höhe einer Druckseite
`margin-left-mm`	Zahl	Millimeter	linker Papierrand
`margin-right-mm`	Zahl	Millimeter	rechter Papierrand
`margin-left-right-mm`	Zahl : Zahl	Millimeter	linker und rechter Papierrand
`margin-top-mm`	Zahl	Millimeter	oberer Papierrand
`margin-bottom-mm`	Zahl	Millimeter	unterer Papierrand
`margin-top-bottom-mm`	Zahl : Zahl	Millimeter	oberer und unterer Papierrand
`card-spacing-mm`	Zahl	Millimeter	Abstand zwischen den Coupons

Ausprobieren: bingo-paper.htm.

Sie können eine andere Schriftart wählen:

Da das pdfmaker.js keine Schriftarten einbinden kann, können Sie leider nur die Standard-Schriftarten verwenden.

Auch diese Parameter werden aus <input> und <select>-Elementen des <form>-Elementes entnommen.

Feldnamen	Format	Einheit	Beschreibung
`font-name`	Wort	Schriftart	(Fontmetrik muss geladen sein)
`font-name-and-lines-per-cell`	Word:Zahl	Schriftart/Millimeter	Schriftart und Zeilen je Feld
`line-height`	Zahl	Faktor	skaliert den Zeilenabstand
`lines-per-cell`	Zahl	Zeilen	wird zur Berechnung der Fontgröße genutzt
`cell-size-mm`	Zahl	Millimeter	Mindestgröße eine Coupon-Feldes

Bevor Sie eine Schriftart verwenden, müssen Sie die zugehörige Font-Metrik-Datei einbinden:

Schriftart	Font-Metrik-Datei
`Helvetica`	`afm-helvetica.js`
`Helvetica-Bold`	`afm-helvetica-bold.js`
`Times-Roman`	`afm-times-roman.js`
`Times-Bold`	`afm-times-bold.js`
`Courier`	`afm-courier.js`
`Courier-Bold`	`afm-courier-bold.js`

Ausprobieren: bingo-paper-font.htm.

Sie können eigene Texte statt der Zahlen verwenden („Bullshit-Bingo”):

Die Texte werden zwischen Wörtern und an Bindestrichen - (Unicode \u002d) umgebrochen.

Es gibt keine automatische Worttrennung, Trennstellen können mit Soft-Hyphen (Unicode \u00ad) oder mit senkrechtem Strich | (Unicode \u007c) markiert werden.

Texte können auf zwei Wegen angegeben werden:

Texte als Bestandteil der HTML-Seite:

Die Texte werden als die Werte von data-bingo-text-#-Attributen des <form>-Attributes angegeben. Das # steht für eine Zahl, die Zahlen müssen nicht fortlaufend sein.

Im Attribut data-bingo-lines-per-cell wird angegeben, wieviele Zeilen in ein Coupon-Feld passen sollen. Daraus wird die Font-Größe berechnet.

Attributnamen	Inhalt	Bedeutung	Default
`data-bingo-text-{123…}`	Text	Eintrag für ein Bingofeld
`data-bingo-lines-per-cell`	Zahl	Wieviele Textzeilen hat ein Bingofeld?	6

Ausprobieren: bingo-include-text.htm (siehe Quellcode).

Texte werden aus externer Datei geladen:

Die URL wird im data-bingo-text-url-Attribute des <form>-Attributes angegeben.

Laden von einer fremden Domain funktioniert nur, wenn Cross-Origin Resource Sharing konfiguriert ist.

Attributnamen	Inhalt	Bedeutung
`data-bingo-text-url`	URL	Die Bingo-Texte werden aus dieser Datei geladen

Ausprobieren: bingo-xhr-text.htm (benutzt clickbait.txt).

Übersicht über alle Beispiele;

Das Gesamtpaket bingo.zip enthält auch diese Dokumentation.