smilyrating

[Rolf B]

Hallo mixmastertobsi,

ich habe mal ein bisschen gespielt

Bitte beachte: Das ist eine reine Grafikstudie, das ist kein fertiges Widget. Das Widget ist mit Maus und Tastatur getestet, nicht mit Touch, und das Thema Zugänglichkeit wird auch noch Arbeit brauchen.

Der Smily wird über ein SVG Element gebildet, das ich in das smilyrating-div einsetze und je nach eingestellter Wertung dynamisch verändere. Der Mund war die meiste Arbeit, das ist ein Linienzug aus zwei Bezierkurven (für oberen und untere Linie des Mundes), deren Parameter über 5 Stützpunkte, d.h. in 4 Intervallen, durch Interpolation gebildet werden. Der neutrale Mund ist eigentlich zu breit, ich hatte aber keinen Bock mehr, auch noch einen Schwall X-Koordinaten in die mouthRanges Tabelle aufzunehmen. Die sind jetzt fix, nur die Y-Koordinaten der Kontrollpunkte ändern sich.

Um nicht in Symbols zu ertrinken, habe ich alle privaten Eigenschaften eines SmileRating Objekts in einem privates-Objekt zusammengefasst. Das einzige öffentliche Property ist das rating-Property, zu dem es auch ein "rating" Event gibt auf das man sich für Änderungen am Rating registrieren kann.

Mit dem class Schlüsselwort in JavaScript bin ich auch noch nicht warm, abgesehen davon gibt's damit auch nicht wirklich private Elemente, darum ist die SmilyRating-Klasse nach klassischem Muster in eine IIFE gelegt und dient als Modul. Kann man auch in ein eigenes File auslagern.

So, ja. Es geht also. Feintuning und Accessibility ist nun für Dich :D

Ah - kleiner Bug, wenn man die Maus aus dem Widget rauszieht, merkt er nicht dass man den Button losgelassen hat. Für Dich zum fixen dringeblieben...

Rolf