Dokumentation zum Bingo-JavaScript

  1. 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>

  2. 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.

  3. 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!

  4. 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.

  5. 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.

  6. 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.

  7. 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:

    1. 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).

    2. 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).

  8. Übersicht über alle Beispiele;

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