kanone

Widget – DropTours

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.

Touren

Berichte

Der Einbau des Widgets

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>

Darstellung der Touren

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">

Darstellung der Tourenberichte

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

Die Übergabe-Parameter

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.

ParameterBeschreibungPflichtfeld
data-interfaceBeispiel: "/sac-huttwil/dropnetapps-dev/tours/api.php"Ja
data-linkAlle Links gehen mit Parametern an diese URL. Z.B. /aktivitaeten/index.phpJa
data-type

getItems

Liefert die nächsten Touren
(Wenn ein Tourenbild vorhanden ist, wird dieses mitgeliefert)

getReports

Liefert alle Touren in der Vergangenheit, die aktuellste Tour zuoberst
(Wenn ein Tourenbericht existiert, dann wird das erste Bild des Tourenberichts mitgeliefert)

Nein
data-limitBeschränkt die Antwortauf diese Anzahl ItemsNein
data-offsetEs 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-categoryDie category entspricht in DropTours dem Tourtyp. 
data-languageMit der Sprache werden die verschiedenen Texte korrekt ausgegeben (de, fr, it) 
Darstellung mit CSS

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.