Dienstag, 30. Dezember 2014

Twoday-Tipp #7 - Beitragsmarkierung

newupdatestory.jpg

In tiefer Weihnachtsnacht wurde dem Forum die Frage beschert, ob es möglich sei, Beiträge und Kommentare in der Seitenspalte je nach Aktualisierungsstatus automatisch mit Neu oder Update zu kennzeichnen. Und auch hier heißt die richtige Antwort wieder: "Im Prinzip Twoday-Standard nein, jedoch, mit zwei kleinen Ergänzungen in den richtigen Skins geht es doch.

Zwar bietet die Twoday-Software keine direkte Funktion, um einen neuen von einem geänderten Beitrag zu unterscheiden, allerdings gibt es zu jedem Beitrag (und auch zu jedem Kommentar) zwei Zeitstempelfelder, die per Makro abrufbar sind:

  1. <% story.createtime %> gibt das Ersterstellungsdatum eines Beitrags,
  2. <% story.modifytime %> das Datum der letzten Beitragsänderung wieder.

Wenn modifytime also gleich createtime ist, darf man davon ausgehen, dass der betreffende Beitrag noch nie geändert wurde, also "Neu" ist.

Relativierung: Dies wirft allerdings folgende Fragen auf: Wie lange gilt ein neuer Beitrag als "neu"? Soll er nach Ablauf einer gewissen Zeitspanne immer noch als "neu" gekennzeichnet werden? Wohl eher nicht. Und ab wann gilt ein neuer Beitrag als "geändert"? Bereits dann, wenn man drei Minuten nach dem Anlegen einige Tippfehler korrigiert?

Diese Festlegungen sind individuell und können nach eigenem Gusto in der unten beschriebenen Lösung angepasst werden. Als Vorbelegung sind folgende Regeln abgebildet:

  1. Ist ein Beitrag oder Kommentar älter als 7 Tage, erhält er keine Kennzeichnung mehr als "neu" oder "geändert".
  2. Liegt zwischen Änderungsdatum und Erstellungsdatum nicht mehr als eine Minute, so gilt der Beitrag weiter als "neu".
Der Abstand von einer Minute darf übrigens nicht auf Null verringert werden, da Twoday manchmal schon beim Neuanlegen eine (falsche) Minutendifferenz zwischen den beiden Zeitstempeln hat.
Installation der Beitragskennzeichnung

Um die Beitragsmarkierung zu aktivieren, müssen sowohl im Skin Site.style sowie in Story.historyview kleine Ergänzungen vorgenommen werden:

  1. Melden Sie sich auf Twoday mit Ihrem Account an und rufen Sie Ihren Blog auf.
  2. Wählen Sie in der Menüzeile oben AdminLayout und dann Skins (HTML)
  3. Klicken Sie auf die Überschrift Stylesheet (Site.style), danach in das Feld mit dem Scrollbalken und wandern Sie ganz an das Ende der Anzeige.
  4. Kopieren Sie dort folgende Zeilen hinein:
    .historyItem:before { content: ""; padding: 2px 4px; color: #fff; border-radius: 3px; font-size: 10px; font-weight: bold; margin-right: 5px; vertical-align: bottom; display: block; }
    .historyItem.new:before { content: "New"; background: #ee2424; display: inline; }
    .historyItem.update:before { content: "Update"; background: #aaa; display: inline; }
    Kopieren einfach gemacht: Fahren Sie mit der Maus über das schwarze Codefeld und klicken dort auf pop-up. Markieren Sie den Text in dem erscheinenden Pop-Up-Fenster, kopieren Sie ihn in die Zwischenablage und von da in das Skin-Textfeld.
    Ihr Stylesheet müsste nun in etwa so aussehen:

    newupdatestory3.jpg

  5. Klicken Sie auf "Speichern und Schließen" um Ihre Änderungen zu sichern.
  6. Scrollen Sie nun in der Skinübersicht weiter herunter bis zur Überschrift "Elemente in den Seitenleisten" und klicken Sie dort auf »kürzlich geändert« Eintrag (Story.historyview).
  7. Kopieren Sie das nachstehende Script vor das letzte </div> in diesem Skin:
    <script type="text/javascript">
        var now = Date.now(), modified = Date.parse("<% this.modifytime format="yyyy/MM/dd HH:mm" %>"), created = Date.parse("<% this.createtime format="yyyy/MM/dd HH:mm" %>");
        if (now - modified < 7*24*60*60*1000){
            scriptTag = document.getElementsByTagName("script");
            scriptTag[scriptTag.length-1].parentNode.className += (modified - created > 60000 ? " update" : " new");
        }
    </script>
    
  8. Ihr Modulcode sollte nun folgendermaßen aussehen:

    newupdatestory1.jpg

  9. Klicken Sie nach erfolgter Änderung unten auf "Speichern und Schließen". In der Anzeige unter "Aktuelle Beiträge" sollten nun farbige Markierungen neben den Beiträgen auftauchen (Hard-Reload via Strg-F5 nicht vergessen!).

    newupdatestory0.jpg

Markierung auch für Kommentare aktivieren

Falls Sie auch Kommentare automatisch mit "Neu/Geändert"-Markierungen versehen wollen, müssen Sie noch eine weitere Änderung vornehmen. Statt Story.historyview heißt der entsprechende Skin Comment.historyview. Dieser wird nicht direkt über die Skinseite zur Änderung angeboten, kann aber leicht folgendermaßen aufgerufen und verändert werden:

  1. Rufen Sie zunächst erneut den bereits geänderten Skin Story.historyview auf (siehe oben).
  2. Gehen Sie nun oben in die Browseradresszeile und ersetzen Sie "Story" durch "Comment"

    newupdatestory2.jpg

  3. Nachdem Sie die Datenfreigabe-/Return-Taste gedrückt haben, wird der Skin Comment.historyview angezeigt. Kopieren Sie das oben erwähnte Script auch hier vor das letzte </div> und speichern Sie die Änderung.
Zeitspannen ändern

Die vorbelegte Zeitspanne von 7 Tagen, ab der keine Markierungen mehr angezeigt werden, kann einfach geändert werden.

Twoday-Zeitstempel reflektieren vergangene Millisekunden seit einem bestimmten Fixdatum. Die Differenz aus modifytime und createtime ist also eine Millisekundenzahl. Im Script finden Sie eine Stelle now - modified < 7*24*60*60*1000, die die Millisekundenzahl für 7 Tage darstellt. Wollen Sie die Markierung beispielsweise erst nach 14 Tagen stoppen, ersetzen Sie 7 durch 14.

Sie können auch ändern, wie lange ein Beitrag die Markierung "Neu" behält, obwohl Sie ihn zwischenzeitlich ändern.

Im Script wird an der Stelle modified - created > 60000 geprüft, ob bereits eine Minute (60 Sekunden * 1000 Millisekunden) vergangen ist, bevor eine "Änderung" konstatiert wird. Wollen Sie z.B. 4 Stunden für eigene Anfangskorrekturen reservieren, dann ersetzen Sie die 60000 durch 4*60*60*1000.
Farben oder Text ändern

Farben oder Text ändern Sie im Stylesheet (Skin Site.style). Die Neu-Markierung wird durch den eingefügten Eintrag .historyItem.new:before gesteuert, die Geändert-Markierung entsprechend durch .historyItem.update:before. Die Hintergrundfarbe wird über den Parameter background: #farbe gesetzt. Den richtigen Wert für Ihre Wunschfarbe können Sie z.B. hier ermitteln.

Texte ändern Sie im Parameter content. Dort können Sie für "New" und "Update" z.B. "Neu" und "Geändert" oder beliebige andere kurze Texte einsetzen.

Problematische Änderungserkennung unter Twoday

Die Twoday-Software erkennt nicht immer zuverlässig Textänderungen an Beiträgen oder Kommentaren (wodurch dann der modifytime-Zeitstempel nicht verlässlich gesetzt wird). Z.B. wird keine Änderung erkannt, wenn man nur den Titel ändert. Auch im Textbereich eines Beitrags/Kommentars werden Änderungen erst ab einem bestimmten, größeren Umfang registriert.

Wenn man also eine Änderungserkennung erzwingen will, kopiert man eine längere Zeichenkette, sichert einmal, löscht diese wieder und sichert erneut. Umständlich, aber das funktioniert dann.

Um diesen Beitrag zu drucken, klicken Sie bitte in der Menüzeile oben rechts auf das Druckersymbol

© 2014 NeonWilderness — lizensiert unter MIT.
Außergewöhnliches
Dinge, die gut sind
Entgleisungen
Gemalte Lebenserfahrung
Musik
Nachtgedanken
Neon-Award
Neon's Must-Have-Tools
Neon's Top10 List
Schöner Bloggen
Today I Learned
Wort des Tages
Profil
Abmelden
Weblog abonnieren
Meine Layouts
Meine bearbeiteten Skins
Hauptseite (Site.page)
Toolbar (Site.foundationToolbar)
Github Neon
Gitlab twoday.net
Font Awesome Cheatsheet v4