Public API: copilot.js - Versionsgeschichte

Admin: /* Einbettung der notwendigen Dateien in die HTML Seite */

2023-04-14T13:26:34Z

Einbettung der notwendigen Dateien in die HTML Seite

Benedikt am 28. März 2017 um 12:10 Uhr

2017-03-28T12:10:00Z

Benedikt am 28. März 2017 um 12:04 Uhr

2017-03-28T12:04:57Z

Gregor: Die Seite wurde neu angelegt: „/google_drive/sp office gmbh/Technik/2015/documentation/copilot.js-Dokumentation.pdf“

2017-03-28T10:52:49Z

Die Seite wurde neu angelegt: „/google_drive/sp office gmbh/Technik/2015/documentation/copilot.js-Dokumentation.pdf“

Neue Seite

/google_drive/sp office gmbh/Technik/2015/documentation/copilot.js-Dokumentation.pdf

@@ Zeile 3: / Zeile 3: @@
 ==Einbettung der notwendigen Dateien in die HTML Seite==
 Fügen Sie den folgenden Code zwischen die <code><nowiki><head></nowiki></code> <code><nowiki></head></nowiki></code> Tags in Ihrer HTML Seite ein:
- <script src=”//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js” type=”text/javascript”></script>
+ <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
- <script type=”text/javascript” src=”//cdn.copilot-office.de/KUNDE/copilot.js”></script>
+ <script type="text/javascript" src="//cdn.copilot-office.de/KUNDE/copilot.js"></script>
 Damit das Skript verwendet werden kann, werden die beiden Bibliotheken jQuery und moment.js benötigt. In obigem Code Abschnitt sind diese bereits vorhanden.

@@ Zeile 86: / Zeile 86: @@
 Bei manchen dieser Felder können noch weitere HTML Attribute angegeben werden um zum Beispiel festzulegen, wie der eingefügte Text formatiert werden soll. Diese seien im folgenden Erläutert:
-====cp-date====
+'''cp-date'''
 Hierbei handelt es sich um ein Datum. Durch die angabe des HTML Attributs data-format kann festgelegt werden, wie das Datum formatiert werden soll. Beispiele hierfür sind: <code>data-format=”DD.MM.YYYY”</code> oder <code>data-format=”DD/MM/YYYY”</code>
-====cp-start / cp-entrance====
+'''cp-start / cp-entrance'''
 Hierbei handelt es sich um eine Uhrzeit, welche ebenfalls wie ein Datum formatiert werden kann. Dazu ist ebenfalls das Attribut data-format anzugeben. Beispiele hierfür sind: <code>data-format=”HH:mm”</code> oder <code>data-format=”HH:mm:ss”</code>
-====p-ticketURL====
+'''p-ticketURL'''
 Hier wird ein Hyperlink erzeugt. Den Text des Links können sie über das Attribut data-link-name steuern. Beispiel <code>data-link-name=”Hier klicken”</code>. Ob die Seite in einem neuen Tab geöffnet werden soll, können Sie festlegen, indem Sie das Attribut <code>data-link-target=”_blank”</code> mit angeben.
@@ Zeile 97: / Zeile 103: @@
 Wie diese Seiten aufgeteilt werden sollen, können Sie beim Container Element (in diesem Beispiel das tbody Element) mit angeben. Hierzu stehen Ihnen 2 Attribute zur Verfügung.
-====data-size====
+'''data-size'''
 Mit diesem Attribut bestimmen Sie wieviele Einträge pro Seite angegeben werden sollen. Wenn Sie keine Seitennavigation haben möchten setzen Sie dies einfach auf einen sehr hohen Wert. Beispiele: <code>data-size=”10”</code> zeigt 10 Veranstaltungen an, <code>data-size=”1000”</code> würde theoretisch 1000 Veranstaltungen anzeigen. Da aber in der Praxis nicht soviele künftige Veranstaltungen pro Künstler angelegt werden, kann man davon ausgehen, dass alle angezeigt werden.
-====data-sort====
+'''data-sort'''
 Mit diesem Attribut geben Sie an, in welcher Reihenfolge die Veranstaltungen sortiert werden sollen. In der Regel werden siese meist chronologisch aufsteigend angezeigt. Dies erreichen Sie mit <code>data-sort=”dateOfEvent,asc”</code>
 Falls Sie eine andere Sortierung wünschen, kontaktieren Sie uns bitte hierfür.
@@ Zeile 108: / Zeile 116: @@
 Auf unserem Server stehen hierfür ein paar Beispiele bereit.
 Sehen Sie sich dazu bitten den Quelltext folgender HTML Seiten an:
 Das Dokument aus dieser Dokumentation finden Sie unter

← Nächstältere Version		Version vom 28. März 2017, 12:04 Uhr
Zeile 1:		Zeile 1:
		+	Im nachfolgendem Dokument wird erklärt, wie die Datei copilot.js verwendet werden kann um damit die Termine eines bestimmten Künstlers auf der Webseite einzubinden.
−	/google_drive/sp office gmbh/Technik/2015/documentation/copilot.js-Dokumentation.pdf
		+
		+	==Einbettung der notwendigen Dateien in die HTML Seite==
		+	Fügen Sie den folgenden Code zwischen die <code><nowiki><head></nowiki></code> <code><nowiki></head></nowiki></code> Tags in Ihrer HTML Seite ein:
		+	<script src=”//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js” type=”text/javascript”></script>
		+	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
		+	<script type=”text/javascript” src=”//cdn.copilot-office.de/KUNDE/copilot.js”></script>
		+	Damit das Skript verwendet werden kann, werden die beiden Bibliotheken jQuery und moment.js benötigt. In obigem Code Abschnitt sind diese bereits vorhanden.
		+
		+	==Präparieren der HTML Seite zum Anzeigen der Termine==
		+	Damit die Termine angezeigt werden können, benötigen Sie ein Container HTML Element. In folgendem Beispiel verwenden wir eine Tabelle zum anzeigen der Termine. Damit das Container Element korrekt erkannt wird, muss die CSS Klasse cp-artist hinzugefügt werden.
		+	Binden Sie zunächst folgenden Code in die HTML Datei an der gewünschten Stelle ein:
		+
		+	<nowiki>
		+	<table>
		+	<thead>
		+	<tr>
		+	<th>Datum</th>
		+	<th>Einlass</th>
		+	<th>Beginn</th>
		+	<th>Tour</th>
		+	<th>Ticket URL</th>
		+	<th>Ticket Hotline</th>
		+	<th>Location</th>
		+	<th>Strasse</th>
		+	<th>PLZ</th>
		+	<th>Ort</th>
		+	</tr>
		+	</thead>
		+	<tbody class="cp-artist" data-size="10" data-artist-id="20a3f8bd-43da-42a7-8d96-77724c4de7d7">
		+	<tr>
		+	<td class="cp-date" data-format="DD.MM.YYYY"></td>
		+	<td class="cp-entrance" data-format="HH:mm">--:--</td>
		+	<td class="cp-start" data-format="HH:mm">--:--</td>
		+	<td class="cp-tour meineEigeneCSSKlasse">---</td>
		+	<td class="cp-ticketURL" data-link-name="Hier klicken" data-link-target="_blank">---</td>
		+	<td class="cp-ticketPhone">---</td>
		+	<td class="cp-locationName">---</td>
		+	<td class="cp-locationStreet">---</td>
		+	<td class="cp-locationZip">---</td>
		+	<td class="cp-locationCity" style="font-weight:bold">---</td>
		+	</tr>
		+	</tbody>
		+	</table>
		+	</nowiki>
		+	Dem Container Element (im Beispiel das Tag tbody) können weitere Eigenschaften angegeben werden. Wichtig ist für den ersten Schritt, dass sie das HTML Attribut data-artist-id entsprechend anpassen. Hier muss die interne co*pilot ID des Künstlers eingetragen werden.
		+
		+	==Steuerung was angezeigt werden soll==
		+	Die Datei copilot.js lädt für den angegebenen Künstler nun alle Daten von der Webseitenschnittstelle und fügt die Daten in entsprechend gekennzeichnete HTML Elemente ein. Damit ein HTML befüllt werden kann, müssen die entsprechenden CSS Klassen beim HTML Element angegeben werden.
		+
		+	===Aufstellung der verfügbaren CSS Klassen===
		+	{\| class="wikitable"
		+	!CSS Klasse
		+	!Beschreibung
		+	\|-
		+	\|cp-date
		+	\|Datum der Veranstaltung
		+	\|-
		+	\|cp-entrance
		+	\|Einlass der Veranstaltung
		+	\|-
		+	\|cp-start
		+	\|Beginn der Veranstaltung
		+	\|-
		+	\|cp-tour
		+	\|Der Name der Tour unter welcher die Veranstaltung stattfindet
		+	\|-
		+	\|cp-ticketURL
		+	\|Ein Hyperlink zum Kartenvorverkauf
		+	\|-
		+	\|cp-ticketPhone
		+	\|Eine Telefonnummer, über welche Tickets erworben werden können
		+	\|-
		+	\|cp-locationName
		+	\|Der Name des Veranstaltungsorts
		+	\|-
		+	\|cp-locationStreet
		+	\|Die Strasse des Veranstaltungsorts
		+	\|-
		+	\|cp-locationZIP
		+	\|Die Postleitzahl des Veranstaltungsorts
		+	\|-
		+	\|cp-locationCity
		+	\|Die Stadt des Veranstaltungsorts
		+	\|}
		+
		+	Bei manchen dieser Felder können noch weitere HTML Attribute angegeben werden um zum Beispiel festzulegen, wie der eingefügte Text formatiert werden soll. Diese seien im folgenden Erläutert:
		+	====cp-date====
		+	Hierbei handelt es sich um ein Datum. Durch die angabe des HTML Attributs data-format kann festgelegt werden, wie das Datum formatiert werden soll. Beispiele hierfür sind: <code>data-format=”DD.MM.YYYY”</code> oder <code>data-format=”DD/MM/YYYY”</code>
		+	====cp-start / cp-entrance====
		+	Hierbei handelt es sich um eine Uhrzeit, welche ebenfalls wie ein Datum formatiert werden kann. Dazu ist ebenfalls das Attribut data-format anzugeben. Beispiele hierfür sind: <code>data-format=”HH:mm”</code> oder <code>data-format=”HH:mm:ss”</code>
		+	====p-ticketURL====
		+	Hier wird ein Hyperlink erzeugt. Den Text des Links können sie über das Attribut data-link-name steuern. Beispiel <code>data-link-name=”Hier klicken”</code>. Ob die Seite in einem neuen Tab geöffnet werden soll, können Sie festlegen, indem Sie das Attribut <code>data-link-target=”_blank”</code> mit angeben.
		+
		+	==Steuerung der Seiten==
		+	Da ein Künstler mehrere Veranstaltung haben kann (oftmals mehr als 30), besteht die Möglichkeit die Auflistung der Veranstaltungen in Seiten aufzuteilen. Es wird dann automatisch eine kleine Navigation eingebunden, welche es dem Besucher der Seite erlaubt durch diese Seiten zu blättern.
		+	Wie diese Seiten aufgeteilt werden sollen, können Sie beim Container Element (in diesem Beispiel das tbody Element) mit angeben. Hierzu stehen Ihnen 2 Attribute zur Verfügung.
		+
		+	====data-size====
		+	Mit diesem Attribut bestimmen Sie wieviele Einträge pro Seite angegeben werden sollen. Wenn Sie keine Seitennavigation haben möchten setzen Sie dies einfach auf einen sehr hohen Wert. Beispiele: <code>data-size=”10”</code> zeigt 10 Veranstaltungen an, <code>data-size=”1000”</code> würde theoretisch 1000 Veranstaltungen anzeigen. Da aber in der Praxis nicht soviele künftige Veranstaltungen pro Künstler angelegt werden, kann man davon ausgehen, dass alle angezeigt werden.
		+
		+	====data-sort====
		+	Mit diesem Attribut geben Sie an, in welcher Reihenfolge die Veranstaltungen sortiert werden sollen. In der Regel werden siese meist chronologisch aufsteigend angezeigt. Dies erreichen Sie mit <code>data-sort=”dateOfEvent,asc”</code>
		+	Falls Sie eine andere Sortierung wünschen, kontaktieren Sie uns bitte hierfür.
		+
		+	==Weitere Beispiele==
		+	Anstelle von Tabellen können Sie auch mit <code><nowiki><div></nowiki></code> Elementen arbeiten. Diese eigenen sich in der Regel besser um sie mit CSS Eigenschaften dekorieren zu können.
		+	Auf unserem Server stehen hierfür ein paar Beispiele bereit.
		+	Sehen Sie sich dazu bitten den Quelltext folgender HTML Seiten an:
		+
		+	Das Dokument aus dieser Dokumentation finden Sie unter
		+
		+	https://cdn.copilot-office.de/suedpol/test.html
		+
		+
		+	Ein Beispiel, welches <code><nowiki><div></nowiki></code> Elemente verwendet
		+
		+	https://cdn.copilot-office.de/suedpol/div.html
		+
		+
		+	Ein Beispiel mit mehreren Künstlern
		+
		+	https://cdn.copilot-office.de/suedpol/multi.html