Social Whale Groups jQuery plugin
Όπως θα έχετε διαπιστώσει το SocialWhale είναι το project που αφιερώνω τον περισσότερο χρόνο μου στο development. Αυτό μου δίνει το πλεονέκτημα να ασχολούμαι με πολύ ενδιαφέροντα αντικείμενα (ff extensions, betavine, jquery plugins, api’s κτλ). Έτσι έχω εμπλουτίσει τις γνώσεις μου πάνω στην javascript και ποιο συγκεκριμένα στο jquery framework.
Η συνεισφορά της ομάδας του SocialWhale για το wordcampGR event ήταν και η αφορμή για την δημιουργία ενός jquery plugin (thek27) σε συνδυασμό με ένα wordpress plugin (humanworks) το οποίο παρουσιάζει ένα SocialWhale Group σε ένα widget. Για τους registered χρήστες υπάρχει και η δυνατότητα για vote και post στο group.
Αν και έχω ασχοληθεί παρά πολύ με τα plugins του jquery (ui, autocomplete, bt, fancybox, jGrowl, κ.α.) δεν είχα κάνει ποτέ κάποιο δικό μου όποτε ξεκίνησα από την αρχή, με reverse σε υπάρχοντα plugins και search στο google για tutorials και παραδείγματα.
Αφού βρήκα το skeleton για το plugin η συνέχεια ήταν εύκολη υπόθεση, copy/paste από κώδικα socialwhale, εκτός από 2 σημεία που έπρεπε να βρούμε μια έξυπνη λύση. Το πρώτο ήταν το oauth login που έπρεπε να γίνει από το site του socialwhale και στην συνέχεια να γίνεται redirect πίσω, ώστε να εμφανιστεί η φόρμα για το post και το action για το vote. Το δεύτερο ήταν και το ποιο ενδιαφέρον, γιατί ήθελα να βρω μια λύση με iframe για να αποφύγω το cross site scripting που δεν παίζει με ajax post.
Ας τα πάρουμε από την αρχή, το socialwhale είναι έτσι φτιαγμένο που έχει δικό του api (extended πάνω στο twitter), έτσι για να καταλάβουμε αν ένας χρήστης είναι logged on ελέγχουμε το attribute voted από το json result (πχ groups_api/timeline/both/1.json), και αν αυτό είναι null, τότε δεν είναι, διαφορετικά σημαίνει αν έχει κάνει vote το συγκεκριμένο update. Τώρα για το login απλά φτιάξαμε ένα button στο http://socialwhale.com/oauth όπου το φορτώνουμε με iframe, έτσι όλος ο υπόλοιπος κώδικας βρίσκεται στον server, ώστε να μπορούμε να ελέγχουμε όλα τα widget από ένα oauth login, αυτό του socialwhale. Έτσι αν ένας χρήστης είναι login στο socialwhale, τότε είναι ταυτόχρονα login σε όλα τα widgets ανεξαρτήτου group.
Τώρα όσο αφορά το submit της φόρμας, σκέφτηκα την λογική του iframe, αλλά με δυναμικό τρόπο, ώστε να έχω και τον έλεγχο του onload event. Ποιο συγκεκριμένα να δημιουργείτε στο runtime ένα iframe με src=”about:blank” και να γεμίζει με την φόρμα που στην συνέχεια γίνεται submit στο socialwhale. Μόλις επιστρέψει το post εμφανίζει στο body ένα div που έχει μέσα το json object και γίνεται trigger το load event του iframe. Έτσι στην συνέχεια γίνεται refresh το timeline και εμφανίζονται τα νέα posts.
Όπως και μάθε plugin έτσι και αυτό έχει options για πόσα rows, αν θα έχει auto refresh κτλ.
Παράδείγματα μπορείτε να δείτε στο wordcamp.gr και στο blog.socialwhale.com.
Το plugin είναι κάτω από GPL licence το Copyright ανήκει στο SocialWhale και βρίσκεται στο google code με την ονομασία jwhale.
