Un miglioramento a permalink_fu: permettere la modifica dei permalink e inviare redirect HTTP al volo

Thu, 29 Jan 2009 19:00:00 +0000

Un altro spin-off dal sito www.visitacsa.it: un miglioramento a permalink_fu che permette permalink dinamici. Lo so che è un ossimoro, perché i permalink dovrebbero essere… beh… permanenti! E siccome i motori di ricerca li indicizzano, non dovrebbero mai cambiare. Ma cosa succede quando pubblichi qualcosa, il tuo permalink viene generato con permalink_fu usando il titolo del tuo post, e dopo un paio di giorni vuoi cambiare il titolo, e anche il permalink sotto il quale il post è accessibile?

Seguendo la specifica, la tua applicazione dovrebbe inviare uno status HTTP 301 moved permanently quando si accede al vecchio permalink e fare redirect del client verso il nuovo Uniform Resource Locator. Questo è più o meno quello che fa la mia modifica a permalink_fu: ogni volta che gli attributi del tuo post vengono modificati, il permalink precedente e quello nuovo vengono salvati nel database, e puoi abilitare il tuo controller a generare redirect 302 moved temporarily quando necessario. In altre parole, controlla se l’URL richiesto è un vecchio permalink e reindirizza automagicamente il client verso quello nuovo.

Tutto avviene dietro le quinte, e il plugin ha anche dei comodi task rake per impostare il model Redirect e le migration associate. E puoi anche cambiarne il nome, ovviamente! :)

Il codice 302 è stato scelto perché lo status code 301 permanent ha effetti piuttosto dirompenti sui motori di ricerca, ma ulteriori discussioni sono benvenute.

Dai un’occhiata al mio repository su GitHub, leggi il README che contiene la documentazione delle funzionalità aggiunte, e guarda il codice!

Il plugin jQuery ajax-upload-fu

Thu, 29 Jan 2009 09:00:00 +0000

Di recente ho scritto un plug-in jQuery che permette l’upload di file via AJAX senza usare un pulsante file input fisso. Raggiunge il suo scopo installando un handler OnMouseMove sugli elementi selezionati e spostando il pulsante input sotto il cursore del mouse.

La citazione che ha ispirato questo codice e’: “Se Maometto non va alla montagna, la montagna va da Maometto”, il contrario del proverbio piu' noto :).

EDIT 2023: ATTENZIONE: questi link sono scaduti :-( E’ stato estratto dalla codebase JavaScript dell’applicazione Visita CSA, guarda il gist per maggiori informazioni, e dai un’occhiata al codice dell’app live per un esempio di utilizzo.

Ecco il codice sorgente:

//  ~ JavaScript Kung-FU, with an excess chunky bacon dose! ~
// This plugin allows seamless ajax file uploads without having
// a fixed file input button. It achieves this by installing an
// OnMouseMove handler over the interested elements, and moving
// the input button under the cursor. <<If Muhammad won't go to
// the the mountain, the mountain will come to Muhammad.>> :-).
//
// This approach is needed on the majority of browser, except
// Safari, on which the coder is allowed to trigger a "click" 
// event onto an input type=file element. On other browsers,
// you can not, that's why the complicated mousemove approach
// was chosen.
//
// Either way, when the value of the input type=file changes,
// handlers are disabled, and a user-provided callback is then
// called (passed via the "upload" option). Handlers are then
// re-enabled again when the upload succeeds or fails.
//
// IE has additional problems, because, quite unexplicably,
// when submitting a form that causes a page load, the change
// event on the file input is triggered AGAIN, thus triggering
// a new file upload. To circumvent this, you can pass a "linked" 
// option, that contains the jQuery selector of the form, and
// whenever an input under this form is hovered, ajax upload
// handlers are temporarily cleared and thus the spurious form
// submission.
//
// The jquery Form plugin is a perfect companion of this one,
// because of its .ajaxSubmit method. Have a look at its home
// page: http://malsup.com/jquery/form/.
// 
// Have fun!
// - vjt@openssl.it
//
$.fn.ajaxFormUpload = function(options) {
  var positioning = { top: 0, left: 0,
    position: 'absolute', cursor: 'pointer', 'z-index': 2 };

  var form = $(options.form || '#ajax_upload');
  form.css(positioning)

  var input = form.find('input[type=file]');
  input.css($.extend(positioning, { width: '10px', opacity: 0, 'font-size':'0px' }));

  var hovering_element = null;

  var elements = $(this);

  var handler, event_;
  if ($.browser.safari) {
    event_ = 'click', handler = function() {
      hovering_element = $(this);
      input.click();
    };
  } else {
    event_ = 'mousemove', handler = function(event) {
      hovering_element = $(this);
      form.css({ left: event.pageX - 10, top: event.pageY - 5 });
    };
  }

  function enable()  { $(elements).bind(event_, handler);   }
  function disable() { $(elements).unbind(event_, handler); }

  input.change(function() {
    var element = hovering_element;
    if (!element) return;
    disable();

    options.upload(element, form);

    enable();
  });

  enable();

  if (options.linked) {
    $(document).ready(function() {
      $(options.linked).find('input').mouseover(function() { hovering_element = null; });
    });
  }
};

Puoi trovarlo su github.

Plugin on Marcello Barnaba

Un miglioramento a permalink_fu: permettere la modifica dei permalink e inviare redirect HTTP al volo

Il plugin jQuery ajax-upload-fu