Aggiungere i widget di EventBrite nell’editor TinyMCE

In WordPress l’editor grafico TinyMCE è pensato per facilitare la scrittura di articoli. Le funzionalità di questa interfaccia si possono ulteriormente estendere con dei plugin dedicati. Un utilizzo comune dei plugin per TinyMCE è quello di fornire un’interfaccia grafica agli shortcodes.
Per il sito di Coderdojo Brianza ho implementato un plugin che aggiunge un bottone per l’inserimento dei widget html di EventBrite.
EventBrite è una piattaforma che consente di gestire e pubblicizzare eventi. In base alle linee guida per i coderdojo, è necessario che i corsi vengano pubblicati su questa piattaforma affinché vengano riconosciuti dal movimento. Gli eventi dei coderdojo sono gratuiti ma a prenotazione, EvenBrite fornisce un supporto per gestire i posti disponibili.
Esistono delle API che consentono di esporre i contenuti caricati su EventBrite su altri siti tuttavia la modalità più rapida è probabilmente quella di utilizzare i widget html forniti nel pannello ??? del proprio profilo. I widget html altro non sono che iframe che richiamano pagine appositamente costruite per caricare i dati di un evento dato il suo id.
L’inclusione di questi widget in un post di WordPress richiede di passare dalla modalità grafica a quella testuale onde non perdere la formattazione dell’html. In realtà basterebbe conoscere il codice dell’evento per automatizzare l’inserimento del widget da editor grafico tramite un pulsante.
Per creare il plugin TinyMCE  si può fare riferimento al Codex oppure a questa guida di GavickPro .
Nel caso in esame, questo è lo shorcode che include l’iframe

function ticketRegistration($atts, $content = null) {
    //setting parameter
        extract(shortcode_atts(array(
            "eventid" => '',
        ), $atts));
    //output
    ob_start();
    if($eventid){
        ?><div id="cdbzEBT<?php $ted = tribe_get_end_date($post, false, $format = 'Y-m-d H:i' ); $cd = date('Y-m-d H:i'); if (strtotime($ted) <  strtotime($cd)) echo pastCheck; ?>"><iframe  src="//eventbrite.it/tickets-external?eid=<?php echo $eventid ?>&ref=etckt" frameborder="0" height="214" width="100%" vspace="0" hspace="0" marginheight="5" marginwidth="5" scrolling="auto" allowtransparency="true"></iframe></div><?php 
        } else {
            return;
        }
    return ob_get_clean();
}
add_shortcode("eventbrite", "ticketRegistration");

Questa è la chiamata da aggiungere al functions.php (o a un site specific plugin) che registra il bottone nell’editor

function register_eventbrite_button($buttons) {
   array_push($buttons, "|", "ebticket");
   return $buttons;
}
function add_eventbrite_tinymce_plugin($plugin_array) {
   $plugin_array['ebticket'] = plugins_url().'/zq/js/visual_editor_plugin.js';
   return $plugin_array;
}

Poiché TinyMCE è basato su javascript, il bottone vero e proprio è gestito dal file js

(function() {
	tinymce.create('tinymce.plugins.EventBriteTicket', {
		init : function(ed, url) {
			ed.addButton('ebticket', {
				title : 'ebticket.registrazione',
				image : url+'/ebtk.gif',
				onclick : function() {
					idPattern = /(?:(?:[^v]+)+v.)?([^&=]{11})(?=&|$)/;
					var vidId = prompt("EventBrite Ticket", "Inserisci id evento");
					var m = idPattern.exec(vidId);
					if (m != null && m != 'undefined')
						ed.execCommand('mceInsertContent', false, '[eventbrite eventid="'+m[1]+'"]');
					else 
						alert('formato id ticket non valido');
				}
			});
		},
		createControl : function(n, cm) {
			return null;
		},
		getInfo : function() {
			return {
				longname : "Ziqurrat's EventBrite Ticket Shortcode",
				author : 'Federica Triglia',
				authorurl : 'http://www.ziqurrat.it/',
				infourl : 'http://www.ziqurrat.it/',
				version : "1.0"
			};
		}
	});
	tinymce.PluginManager.add('ebticket', tinymce.plugins.EventBriteTicket);
})();

Pratico no? È la praticità è un requisito essenziale quando devi inserire sul sito l’agenda degli eventi di tutto l’anno in una sola volta.

Una nota di stile riguardo l’output. Gli iframe non sono il massimo per l’accessibilità e usabilità. L’iframe si porta dietro js e css del sito originario che aggiungono “peso” alla pagina e potrebbero interferire con lo stile del blog che li include. A onor del vero gli stili del widget EventBrite non sono leggeri ma non sono male, anche nella versione mobile, fatta eccezione per il problema di altezza dell’iframe: il box di un evento concluso è più corto di uno prenotabile, fissandone una altezza si rischia di creare un inutile buco bianco quando l’evento è concluso. Questo problema è ovviabile con un po’ di CSS

#cdbzEBTpastCheck iframe[src*="eventbrite.it"] {height:110px; width:100%; text-align:left;}
#cdbzEBT iframe[src*="eventbrite.it"] {height:270px; width:100%; text-align:left;}

Esistono plugin che incorporano le chiamate ad EventBrite come the events calendar ma si tratta sempre di opzioni a pagamento. A coderdojo brianza ci piacciono le cose fatte a mano, specialmente in relazione alla nostra mancanza di budget :). L’opzione dei widget html pertanto rappresenta un compromesso funzionale ed accettabile.