Aktivitäten-Modul

Hier finden Sie verschiedene Möglichkeiten und Ideen wie Sie das activities-Modul auf Ihrer Seite verwenden können.

Klassisches Widget

Das klassische Aktivitäten-Widget soll auf der Seite dargestellt werden.

Ausgabe

Zuerst wird das Widget-Script eingebunden (JavaScript, Zeile 1) und anschließend das DOM für das Modul geladen und zur Seite hinzugefügt. Die Standard-Pfeilsymbole werden durch selbst gewählte ersetzt (Zeile 5) und in Zeile 7 und 8 werden weitere Einstellungen vorgenommen.

Das CSS sorgt zum einen für die Darstellung, ist zum anderen aber auch funktional nötig um den „Scroll-Effekt“ zu erzeugen (siehe Kommentare im CSS).

JavaScript

icony('script', 'activities', 'native');

var activitiesWidget = icony('get', 'activities', 'dom', function (response) {
  document.getElementById("myActivitiesWidget").appendChild(response.data);
}, {count: 50, css_prefix: 'icony_', arrow_down: '↓', arrow_up: '↑'});

icony('set', activitiesWidget, 'show', 4);
icony('set', activitiesWidget, 'pause', 2000);

HTML

<div id="myActivitiesWidget"></div>

CSS

#myActivitiesWidget div.icony_container {
  position: relative; /* Wichtig für die Positionierung der Pfeile */
  width: 400px;
  border: 1px solid #000000;
}

#myActivitiesWidget div.icony_container div.icony_entry a.icony_image {
  float: left; /* Setzt das Bild auf die linke Seite */
  padding-right: 5px;
}

#myActivitiesWidget div.icony_container div.icony_entry {
  height: 70px; /* Wichtig! Wird zur Berechnung der Gesamthöhe des Containers verwendet */
  clear: left; /* Zurücksetzen des vorherigen floats*/
  padding: 5px;
}

#myActivitiesWidget div.icony_container div.icony_button {
  position: absolute; /* Positionierung der Pfeile */
  right: 0px;
  cursor: pointer;
  padding-right: 5px;
  font-size: x-large;
  z-index: 5;
}
#myActivitiesWidget div.icony_container div.icony_button.icony_button_down {
  bottom: 0px;
}

/* ACHTUNG! Funktionale Werte, nur ändern wenn Sie wissen was Sie tun */
#myActivitiesWidget div.icony_container {
  height: 0px;
  overflow: hidden;
}
#myActivitiesWidget div.icony_container div.icony_entry {
  overflow: hidden;
  margin-top: 0px;
  margin-bottom: 0px;
}

Liste der Aktivitäten

Es wird eine Text-Liste der Aktivitäten erstellt, wobei jeder Eintrag auf die Visitenkarte des Benutzers verlinkt.

Ausgabe

Die Aktivitäts-Daten im JSON-Format werden innerhalb des Callbacks zu einer Link-Liste mit entsprechenden Klassennamen zusammengebaut. Der Linktext besteht aus dem Benutzernamen und einer Beschreibung der Aktivität. Beides ist in den Antwortdaten enthalten.

JavaScript

var listCallback = function (response) {
  for (var i=0; i < response.data.length; i++) {
    var link = document.createElement("a");
    link.className = "list-group-item";
    link.href = response.data[i].vcardurl;
    link.target = "_blank";
    link.innerHTML = "<strong>"+response.data[i].username+"</strong> "+response.data[i].action_text;

    document.getElementById("myActivitiesList").appendChild(link);
  }
};

icony('get', 'activities', 'json', listCallback, {count: 10});

HTML

<div id="myActivitiesList" class="list-group"></div>

In diesem Beispiel wird auf das hier eingesetzte Bootstrap-Framework zurückgegriffen, welches für den Style der Liste sorgt. Ein eigenes CSS sollte aber leicht zu realisieren sein.

Benutzertipps

In dieser Rubrik stellen wir Ihnen ein paar Beispiel zur Verwendung des tips-Modul vor.

Single-Tipp

Das Bild eines einzigen Benutzers wird angezeigt. Eignet sich beispielsweise zur Ergänzung einer Suchmaske.

Ausgabe

Das Modul wird als DOM geladen und mittels Callback in die Seite eingefügt. Ein weiteres Styling ist hierbei nicht nötig.

JavaScript

icony('get', 'tips', 'dom', function (response) {
  document.getElementById("mySingleTipContainer").appendChild(response.data);
}, {count: 1, css_prefix: 'icony_'});

HTML

<div id="mySingleTipContainer"></div>

Benutzer-Kacheln

Benutzerbilder sollen als verschieden große Kacheln dargestellt werden.

Ausgabe

Die Datensätze werden als JSON abgerufen und in der Callback-Funtktion zu einer einfachen HTML-Struktur zusammen gebaut. Die Darstellung und Positionierung erfolgt schließlich via CSS.

JavaScript

var tilesCallback = function (response) {
  for (var i=0; i < response.data.length; i++) {
    var image = document.createElement("img");
    image.src = response.data[i].imageurl;

    var link = document.createElement("a");
    link.href = response.data[i].vcardurl;
    link.target = "_blank";
    link.appendChild(image);

    document.getElementById("userTiles").appendChild(link);
  }
};

icony('get', 'tips', 'json', tilesCallback, {count: 12, age_max: 35});

HTML

<div id="userTiles" class="icony_tiles"></div>

CSS

.icony_tiles {
  width: 450px;
  height: 228px;
  line-height: 1px;
  border: 3px solid #000000;
}

.icony_tiles a {
  overflow: hidden;
  float: left;
}
.icony_tiles a:nth-child(5) {
  float: right;
}
.icony_tiles a:nth-child(7) {
  margin: 74px 0 0 -74px;
}

.icony_tiles img {
  width: 76px;
  height: 76px;
  border: 0px;
  margin: -1px;
}
.icony_tiles a:nth-child(5) img,
.icony_tiles a:nth-child(8) img {
  width: 152px;
  height: 152px;
  margin: -2px;
}