Unterdessen gibt es auch für DropTours ein Widget. Es unterstützt noch nicht alle Möglichkeiten, bietet aber bereits einige Funktionen. Hier sind einige Beispiele dargestellt, damit man sich den Einsatz besser vorstellen kann.
Eingebaut wird das Widget wie alle anderen Widgets auch. Im Kopfbereich <header> braucht es einige Javascript-Bibliotheken und ein paar CSS-Definitionen. Wer die JQuery oder Bootstrap bereits eingebaut hat, muss natürlich darauf achten, dass es nicht nocheinmal eingebaut wird. Im File dropnet.min.js sind alle Javascripts, die benötigt werden, verpackt. Das File dropnet.min.css liefert grundlegende Designelemente.
<link href="https://cdn.dropnet.ch/dropnetcss/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<script src="https://cdn.dropnet.ch/dropnetjavascript/jquery.js" type="text/javascript"></script>
<script src="https://cdn.dropnet.ch/dropnetcss/bootstrap/js/bootstrap.js" type="text/javascript"></script>
<link href="https://cdn.dropnet.ch/dropnet.min.css" type="text/css" rel="stylesheet" media="all">
<script src="https://cdn.dropnet.ch/dropnet.min.js" type="text/javascript"></script>
Das Widget für die Auflistung der Touren sieht dann folgendermassen aus. Anhand der Klasse (class) wird das Bild erkannt und von den DropNet-Scripts bearbeitet. Mit den weiteren Parametern (data-...) kann das Widget gesteuert werden.
<img class="dropapp-tours" data-type="getItems" data-limit="8" src="/dropnetimages/dropbox/standard/status-wait.gif" data-interface="https://www.sac-huttwil.ch/dropnetapps/tours/api.php" data-link="" width="16" height="16">
<div class="berichte">
<img class="dropapp-tours" data-type="getReports" data-limit="5" src="/dropnetimages/dropbox/standard/status-wait.gif" data-interface="https://www.sac-huttwil.ch/dropnetapps/tours/api.php" data-link="https://www.sac-huttwil.ch/berichte/" width="16" height="16">
</div>
Für Vorstandslisten und andere organisatorischen Personenlisten eignet sich das Widget DropTours auch. Mit dem Type getAddresses wird eine Personen-Liste einer Kategorie erstellt. Die Personen werden nach Unterkategorien aufgeteilt. Ein gutes Beispiel findet man hier.
<img class="dropapp-tours" src="/dropnetimages/dropbox/standard/status-wait.gif" data-interface="/dropnetapps-dev/tours/api/" data-limit="100" data-language="de" data-type="getAddresses" data-category="1" alt="" width="16" height="16">
Beim DropTour-Widget ist die Übergabe-Parameterliste ein wenig länger. Selbstverständlich unterstützt es alle Pflichtparameter, wie alle anderen Apps auch aber auch noch einige DropTours spezifischen.
| Parameter | Beschreibung | Pflichtfeld |
|---|---|---|
| data-interface | Beispiel: "/sac-huttwil/dropnetapps-dev/tours/api.php" | Ja |
| data-link | Alle Links gehen mit Parametern an diese URL. Z.B. /aktivitaeten/index.php | Ja |
| data-type | getItems Liefert die nächsten Touren getReports Liefert alle Touren in der Vergangenheit, die aktuellste Tour zuoberst getAddresses
| Nein |
| data-limit | Beschränkt die Antwortauf diese Anzahl Items | Nein |
| data-offset | Es kann auch ein Offset angegeben werden. Das macht zum Beispiel Sinn, wenn man die erste Tours gross darstellen möchte und alle weiteren klein. Dann baut man das Widget zweimal ein und definiert beim ersten das data-limit="1" und beim zweiten Widget das data-limit="8" und den data-offset="1". | |
| data-category | Die category entspricht in DropTours dem Tourtyp. | |
| data-language | Mit der Sprache werden die verschiedenen Texte korrekt ausgegeben (de, fr, it) |
Ist das Widget erfolgreich eingebaut, so braucht es noch ein wenig CSS für die Darstellung. Entweder man fügt den Code dierekt im <header> der Seite ein oder man erstellt ein CSS-File mit der Darstellung.
/**
* DropTours Programm
*/
.dropapp-tours.dropapp-items .dropapp-item {
position: relative;
margin-bottom: calc(-2.5rem + 15px);
border-top: 1px dotted #ccc;
}
.dropapp-tours .dropapp-item-name {
width: calc(100% - 5rem);
position: relative;
z-index: 2;
}
.dropapp-tours .dropapp-item-img,
.dropapp-tours .dropapp-item-description,
.dropapp-tours .dropapp-item-options-requirements_kond,
.dropapp-tours .dropapp-item-options-duration,
.dropapp-tours .dropapp-item-options-category-icon,
.dropapp-tours .dropapp-item-options-requirements_techn,
.dropapp-tours .dropapp-item-options-guides,
.dropapp-tours .dropapp-item-more-requirements_kond {
display: none;
}
.dropapp-tours .dropapp-item h2 {
margin: 0;
font-size: 1rem;
}
.dropapp-tours .dropapp-item p {
margin: 0;
}
.dropapp-tours .dropapp-item-options {
position: relative;
right: 0px;
top: -2.5rem;
width: 100%;
text-align: right;
z-index: 0;
}
.dropapp-tours .dropapp-item-options-category {
text-align: center;
font-size: 0.7rem;
border: 1px solid #727378;
border-radius: 50%;
width: 1.5rem;
height: 1.5rem;
display: inline-block;
}
/**
* Tourenberichte
*/
.berichte .dropapp-tours.dropapp-items {
display: inline-flex;
flex-wrap: wrap;
justify-content: space-between;
}
.berichte .dropapp-tours.dropapp-items .dropapp-item {
width: 100%;
}
.berichte .dropapp-tours .dropapp-item-options-images {
background-color: #ddd;
height: 50px;
overflow: hidden;
text-align: left;
margin-top: 5px;
border-bottom: 5px solid #aaa;
}
.berichte .dropapp-tours .dropapp-item-options-images div {
display: inline-block;
}
.berichte .dropapp-tours .dropapp-item-options-images img {
height: 50px;
}
Mit CSS kann das Design einfach angepasst werden. Das Beispiel hier liefert eine gute Ausgangslage, welche individuell angepasst werden kann.
