Permalink: come creare uno slug “stile wordpress”

Oggi un post per tornare e per dare un primo contributo open source al mondo (sempre modesto :)).

Sto sviluppando un nuovo progetto e mi sono trovato nella necessità di creare qualcosa tipo il generatore di permalink di wordpress (altrimenti detto slug). Cercando qua e là un plugin jquery, ho trovato questo jquery slug plugin.

Il plugin in sè è molto interessante e facilmente utilizzabile. Per fare quello che volevo, però, ho apportato alcune modifiche (guardando un po’ qua e là e mettendoci del mio). Perciò ho deciso di ricondividere il lavoro aggiungendo qualche generalizzazione.

(function($) {
	$.fn.slug = function(o) {
		var d = {
			slug: 'slug', // Class used for slug destination input and span. The span must exists on the page
			hide: true,  // Boolean - By default the slug input field is hidden, set to false to show the input field and hide the span.
			customizable: true, // Boolean - customizable
			separate: '-', // Character - defult value set to '-'
			write: 'input', // String - the tag name for wrinting personalized slug default is set to input
			read: 'span' // String - the tag name for reading the slug default is set to span
		};
		var o = $.extend(d, o);
		return this.each(function() {
			$t = $(this);
			$w = $(o.write + "." + o.slug);
			$r = $(o.read + "." + o.slug)
			$().ready(function() {
				if (o.hide) {
					inputSlug(true);
				}
			});
			if (o.customizable) {
				$w.live('blur', function() {
					inputSlug(true)
				});
				$r.live('click', function() {
					inputSlug(false);
				});
			}

			function inputSlug(show) {
				$r.text($w.val());
				if (show) {
					$r.show();
					$w.hide();
				}
				else {
					$r.hide();
					$w.show().focus();
				}
			}

			makeSlug = function() {
				s = s.replace(/\s/g, o.separate);
				s = s.replace(eval("/[^a-z0-9" + o.separate + "]/g"), '');
				s = s.replace(eval("/" + o.separate + "{2,}/g"), o.separate);
				s = s.replace(eval("/(^" + o.separate + ")|(" + o.separate + "$)/g"), '');
				$w.val(s);
				$r.text(s);
			}

			$t.keyup(makeSlug);
			return $t;
		});
	};
})(jQuery);

A beve anche del codice per mostrare qualche esempio.

Annunci

Un pensiero su &Idquo;Permalink: come creare uno slug “stile wordpress”

  1. Pingback: Permalink: esempio di utilizzo del plugin per lo slug (#slug #permalink #jQuery #plugin) « sipronunciaaigor

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...