Archivio per il tag javascript

Bookmarklet per fare citazioni (4)

Come avevo preannunciato nel precedente post, questa è la versione (spero finale) del bookmarklet per fare citazioni. Essendo stato uno dei primi bookmarklet che ho creato (e all’inizio di Javascript ne sapevo poco o nulla) è stato modificato parecchie volte (pure troppe).

Prendendo spunto da una analoga funzione definita in Ubiquity (setTextSelection) che potete trovare qui, invece di aprire un fastidioso pop up ed inserirvi all’interno il codice generato, ora il codice viene innestato direttamente al posto del testo che era stato selezionato, se non si è selezionato alcun testo, verrà restituito il codice per inserire il solo collegamento alla pagina in un prompt. Pure l’utilizzo da barra dei segnalibri tramite keyword è stato migliorato sensibilmente.

screenshot che mostra come il codice viene inserito nella pagina web al posto del testo selezionato

Il bookmarklet sembra funzionare anche con Opera, con Safari non ho provato ma escludo funzioni (dovrei modificarlo un pochino), con IE credo proprio non funzioni.

Utilizzo

Ci sono due metodi per utilizzare il bookmarklet:
;

  1. cliccandolo dalla barra dei segnalibri< ;
  2. richiamandolo dalla barra degli indirizzi tramite keyword.

Nel primo caso, sarà sufficiente selezionare del testo e cliccare sul bookmarklet (opportunatamente posizionato nella barra dei segnalibri) . Il codice generato verrà inserito in una textarea al posto del testo selezionato.
Purtroppo, usando il bookmarklet in questo modo, non è possibile specificare nessun parametro opzionale. Di default, il codice generato è in formato BBCode. Se si vuole usare il bookmarklet in questa maniera e generare codice HTML, sarà necessario modificare manualmente il codice, nello specifico:

default_mode='b';

con:

default_mode='h';

Io comunque consiglio di utilizzare il bookmarklet via keyword.

Se al bookmarklet viene associata una keyword (o parola chiave che dir si voglia), sarà possibile utilizzarlo dalla barra degli indirizzi. In questa modalità sono disponibili dei parametri opzionali.. Supponiamo ad esempio di aver associato al bookmarklet la keyword cita, ecco un esempio generico di utilizzo:

cita [opzioni] "nuova descrizione del link"

dove opzioni possono essere: -testo, -html e -bbcode. Il testo racchiuso fra apici verrà usato come descrittore del link al posto del titolo della finestra.

Il bookmarklet non è schizzignoso e riconosce le opzioni anche se contratte (t, h e b).

Esempi

Ecco un esempio dell’output del codice (HTML) generato dal bookmarklet:

Bookmarklet – Wikipedia

Un bookmarklet è un piccolo programma JavaScript che può essere memorizzato come un normale URL all’interno dei segnalibri (bookmark in inglese) nei browser Web più popolari, o all’interno degli hyperlinks di una pagina Web. I bookmarklet sono anche detti favlets o favelets per via del fatto che Internet Explorer utilizza il termine “Favorites” (preferiti in italiano) per indicare appunto i segnalibri.

Supponendo di aver indicizzato il bookmarklet con la parola chiave cita ecco alcuni esempi di utilizzo:

Genera il codice HTML necessario per eseguire la citazione. Come descrizione del link verrà usato il titolo della scheda visualizzato nella finestra del browser.

cita t

Viene ritornato il link e il testo selezionato fra caporali («») per eseguire una citazione senza formattazione.

cita -h "questo link

Genera il codice HTML per fare la citazione. Come descrittore del link viene usato il codice fra virgolette (questo link).

cita "questo link"questo link.

Il bookmarklet

Il bookmarklet è questo:

<< Cita >>

trascinarlo nella barra dei segnalibri ed indicizzarlo con una parola chiave (clic destro -> Proprietà). Se si usa Opera, aggiungerlo come search plugin.
EDIT: Potete reperirlo anche su Foxmarks. Anzi, è possibile che la copia sincronizzata su Foxmarks sia più aggiornata.

Se c’è qualche errore potete segnalarlo nei commenti e lo correggo. Per provarlo, selezionare del testo e cliccarci sopra :-) .

Impostare una favicon per il bookmarklet

Per concludere, inserisco il codice necessario per associare un’iconcina al bookmarklet. Purtroppo, ai bookmarklet viene associata un’icona anonima e pure bruttina, che poco aiuta al suo riconoscimento e che essendo visibile nella barra degli strumenti rovina l’aspetto visivo di Firefox. Io non amo le favicon , e anzi dal menu segnalibri preferisco toglierle di mezzo, però nella barra dei segnalibri una loro utilità ce l’hanno, soprattutto se si decide come nel mio caso di rimuovere il testo del bookmarklet lasciando solo l’icona dello stesso.

Visto la funzione del bookmarklet, ho scelto la favicon di Wikiquote. Il codice va messo nel file userchrome.css o aggiunto come nuovo stile in Stylish. Se si cambia il nome del bookmarklet il codice potrebbe non funzionare, se non sapete come farlo funzionare lasciate un commento.

NOTA: il codice non associa una favicon al bookmarklet in via generale, ma soltanto quando questo si trova nella barra dei segnalibri., quindi se non lo si aggiunge alla barra dei segnalibri è assolutamente inutile !

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* Aggiunge la favicon  di Wikiquote al bookmarklet per fare citazioni */
toolbarbutton.bookmark-item[label^="Cita"]
{
list-style-image: url("http://wikiquote.org/favicon.ico") !important;
}

/* questo codice aggiuntivo serve per rimuovere il testo e lasciare solo la favicon sulla barra dei segnalibri, ottimo per risparmiare spazio.
/* per eseguire il codice qui di seguito riportare la chiusura del commento su questa riga
toolbarbutton.bookmark-item[label$^"Cita"] > .toolbarbutton-text {
display: none !important;

Enjoy :-D

Technorati Tags: , , ,

Bookmarklet per fare citazioni convertito in un Ubiquity command

Non so se qualcun altro al di fuori del sottoscritto lo abbia mai usato, però il bookmarklet che avevo creato per generare il BBCode (o il codice HTML) per effettuare una citazione, io lo trovavo davvero comodo. Il bookmarklet presente nel vecchio post, non dovrebbe funzionare con Firefox 3 (viene bloccato il popup), non è difficile modificarlo, e anzi mi devo ricordare di aggiornare il codice, perchè, che qualcuno lo usi o meno, ci tengo a tenere aggiornati i vecchi post, è una questione personale, non mi piace ci siano (anche se ce ne saranno sicuramente), cose che non funzionano.

In realtà, avevo già una mezza idea di fare una versione 4.0 del bookmarklet che invece di aprire quel brutto popup, inestasse il box col codice direttamente nella pagina, ma visto che è un mese che ho la bozza in locale e che non mi decido ad ultimarlo, propongo direttamente la versione Ubiquity del bookmarklet. Il motivo è presto detto, Ubiquity usa JQuery ed ha già una funzione bella e pronta per innestare il codice sostituendo addirittura quello selezionato :-D (setTextSelection).

Anzi se qualcuno che conosce il framework JQuery, mi dà una mano a convertire la funzione in normale Javascript mi farebbe davvero piacere (sto leggendo a riguardo, ma se qualcuno mi dà una mano è pure meglio :-D ).

Sperando che abbia fatto correttamente l'escaping di tutti i caratteri, il codice seguente dovrebbe funzionare:


function quotehtml(expr) {
    var document = context.focusedWindow.document;
    expr='<textarea style="background-color: #272727; color: #777">&lt;a  href="'+document.location+'" title="'+document.title+'"&gt;'+document.title+'&lt;/a&gt;&lt;br/&gt;\n&lt;blockquote  cite="'+document.location+'"&gt;'+expr+'&lt;/blockquote&gt;</textarea>';
    setTextSelection(expr);
}

function cmd_quotehtml() {
  useSelectionOrPrompt("Enter expression:", quotehtml);
}

function quotebb(expr) {
    var document = context.focusedWindow.document;
    expr='<textarea style="background-color: #272727; color: #777">[url='+document.location+']'+document.title+'[/url]\n[quote]'+expr+'[/quote]';
    setTextSelection(expr);
}

function cmd_quotebb() {
  useSelectionOrPrompt("Enter expression:", quotebb);
}

E' sufficiente copiarlo nell'editor di Ubiquity, andare nella pagina da cui si desidera fare una citazione, selezionare il testo da citare e dare uno dei seguenti comandi: quotehtml o quotebb.

Credo che il nome dei comandi dica tutto, il primo genera il codice HTML, il secondo il BBCode.

L’ho caricato anche qui:
quote.txt su Box.net

Il codice di Wordpress – dopo una ventina di modifiche ed insulti sparsi – dovrebbe essere OK :-D . L’ho pure proposto sul gruppo di discussione di Ubiquity, magari – se lo trovano utile – lo inseriscono direttamente fra i comandi supportati .

Esempio del funzionamento dei comandi quotehtml and quotebb

AGGIORNAMENTO: grazie ad Abi che mi ha risposto sul gruppo di discussione e ha uploadato il mio file su Google gruppi, ho scoperto che esiste un modo più semplice di aggiungere un comando, senza dover far copiare/incollare il codice qui sopra nell’editor.
Non ho provato personalmente, ma dovrebbe essere sufficiente aggiungere questo link nei segnalibri e taggarlo con ubiquity, wow :-D . A saperlo prima mi risparmiavo due tazze di caffè :-P

Technorati Tags: , , , ,

Ubiquity, commandline power applicato a Firefox

Chi conosce Enso apprezzerà sicuramente Ubiquity, che altro non è che Enso applicato a Firefox :-) , , in altre parole un metodo di unire la potenza della riga di comando nelle applicazioni ad interfaccia grafica, nello specifico Firefox. L’estensione è stata presentata nell’incontro che si è tenuto venerdì 11 luglio a Roma dal suo geniale creatore: Aza Raskin, ora è disponibile per tutti coloro che vogliano provarla :-) . Badate bene che questa deve essere considerata una versione alpha, quindi non aspettatevi che tutto funzioni !

Installazione

Esistono due modi per installare l’estensione, il primo è quello indicato nel file README e necessita sia presente Python sul proprio computer. Da riga dei comandi (con PATH e posizione corretti):

C:\Programmi\ubiquity>python manage.py install

Se tutto va a buon fine l’estensione verrà installata nel profilo di Firefox attualmente in uso. (consiglio di farlo a Firefox chiuso).

Il secondo metodo è quello di creare un file XPI della sottocartella ubiquity (quella in cui trovate il file chrome.manifest) e procedere alla sua installazione nel modo classico. Supponendo che il file ubiquity_xxx sia stato scaricato sul Desktop, con questa serie di comandi ci dovreste riuscire: (nel PATH ci deve essere la cartella di 7-zip e Firefox, ovviamente)

C:\Desktop> 7z x ubiquity_xxx.zip
C:\Desktop> cd ubiquity_xxx\ubiquity
C:\Desktop\ubiquity_xxx\ubiquity\> 7z a -tzip ubiquity.xpi
C:\Desktop\ubiquity_xxx\ubiquity\> firefox ubiquity.xpi

Sembra complicato ma non lo è, è più complicato da scrivere che da fare, assicuro che ci ho messo meno a creare il file XPI che non a scrivere la procedura :-P .Traducendo: decomprimete l’archivio e ricomprimete la sola cartella ubiquity in un file ZIP, quindi installatelo come se fosse un’estensione. Il motivo per cui non allego il file è che il progetto è in fervente attività ed i file relativi all’estensione sono aggiornati giornalmente, quindi la mia versione potrebbe già essere vecchia e non riportare le nuove modifiche (io l’ho installata due volte finora).

Primi passi con Ubiquity

Se volete potete effettuare il test preliminare per verificare che Ubiquity sia stata installata e funzioni correttamente. Al momento vengono eseguiti con successo 10 test su 11, nonostante uno venga fallito l’estensione è comunque usabile.

Eseguito il test, il punto di partenza è la pagina di help in cui si trovano i collegamenti alla lista dei comandi e all’editor interno di ubiquity. L’help viene raggiunto digitando about:ubiquity nella barra degli indirizzi e dando invio (like about:config).

pagina di aiuto raggiungibile digitando about:ubiquity

Data una rapida occhiata ai comandi vediamo di fare qualche prova del funzionamento di ubiquity (a me non tutti i comandi funzionano correttamente, ma per la release sono sicuro che non ci saranno problemi :-) ).

1+1+2+3+5+8+13+21
Questa frase è in italiano, o no ?

Selezionare la prima riga (in Firefox 3 basta fare triplo clic), premere CTRL-Spazio (ALT-Spazio su Mac) e digitare calculate e dare invio.

Comando calculate in ubiquity

Ora date un’occhiata al testo che era stato selezionato. Se volete finire la sequenza di Fibonacci, selezionate gli ultimi due numeri e ripetete la procedura. Ora selezionate la seconda riga e digitate translate to english nella barra dei comandi di Ubiquity (CTRL-spazio).

comando translate to english in ubiquity

Perfetto, ora guardate la riga che era stata selezionata :-) . Ultimo esempio, se avete FoxyTunes installata – e c’è chi l’ha installata per la prima volta solo per questo :-P – digitate play song in Ubiquity e ammirate il risultato.

Comando play song in Ubiquity

Un passo avanti

Vediamo (very simple code) come creare un comando personalizzato da usare in Ubiquity. Premere CTRL-Spazio ed eseguite il comando editor. Ora inserite il codice riportato qui di seguito nel box di testo che appare:

function decrautize(expr) {
    expr=expr.replace(/\bnn\b/g,"non");
    expr=expr.replace(/\bcm\b/g,"come");
    expr=expr.replace(/\bsn\b/g,"sono");
    expr=expr.replace(/qst/g,"questo");
    expr=expr.replace(/cmq/g,"comunque");
    expr=expr.replace(/grz/g,"grazie");
    expr=expr.replace(/\bx\b/g,"per");
    expr=expr.replace(/kk/g,"cc");
    expr=expr.replace(/k([ieèé]+)/g,"ch$1");
    expr=expr.replace(/k([aeoàù]+)/g,"c$1");
    expr=expr.replace(/xc/g,"perc");
 expr=expr.replace(/\?+/g,"?");
 expr=expr.replace(/\!+/g,"!");
      setTextSelection(expr );
    }

    function cmd_decrautize() {
      useSelectionOrPrompt("Enter expression:", decrautize);
    }

(questo vorrei renderlo disponibile anche come bookmarklet, ma al momento ho dei problemi che non riesco a risolvere)

Perfetto, ora cercatevi da qualche parte uno di quei schifosi messaggi pieni di k e x, selezionatelo e richiamate Ubiquity dando il comando decrautize. Il risultato dovrebbe essere una rozza traduzione in italiano del k-linguaggio :-P

Conclusioni

In effetti, al momento quello che si può fare con ubiquity lo si può fare benissimo indicizzando opportunamente i bookmarklet o creando bookmarklet multi parametrici (cosa che ho sempre fatto e – da quando l’ho scoperta – quella che mi ha fatto scegliere definitivamente Firefox :-) ),

immaginate però cosa potrebbe diventare questa estensione se venisse aggiunto l’autocompletamento. Con un piccolo esempio si capisce meglio :-) . Ora per tradurre una parte del testo è necessario selezionare il testo e digitare translate to english, se qualcuno dice che non è così immediata la cosa gliene dò atto, supponiamo però che venga aggiunto l’autocompletamento. Bene, con l’autocompletamento ci si può aspettare una cosa del genere: invece di digitare translate to italian , si digiterà t e si vedranno una serie di opzioni (ad esempio: translate, text, tool), si selezionerà translate e si vedrà una lista di lingue in cui tradurre il testo, insomma il comando sarà richiamabile digitando tr/it (o una cosa del genere), e soprattutto non si dovrà tenere nulla a memoria.

E’ anche auspicabile che si possa digitare tabs e selezionare (via autocompletamento) le schede aperte per poterle visualizzare (like iswitchb-tabs), o navigare fra i vari menu di Firefox (figata) potendo così togliere la barra dei menu e guadagnare una preziosa riga per la visualizzazione della pagina :-)

Nota a margine: meglio JQuery che Mootools è d’accordo anche WP :-P
Nota a margine numero 2: ricordarsi di scaricare il tema Hemingway:

Link di approfondimento:
Ubiquitous Interfaces, Ubiquitous Functionality
Link per il download di Ubiquity
Gruppo di discussione (io sul server nttp di Mozilla non lo trovo)
Mondozilla: Incontro a Roma con Aza Raskin
Mozilla Labs: The graphical keyboard user interface

Technorati Tags: , , ,

Come implementare la copia del testo usando Javascript + Flash (cross browser)

AGGIORNAMENTO: con il nuovo aggiornamento a Flash 10 il metodo proposto in questo articolo smette di funzionare. Sono state infatti introdotte delle restrizioni di sicurezza che non permettono più l’attivazione via Javascript di uno script Flash, per farlo funzionare è necessario inserire un pulsante che attivi lo script Flash mediante un’azione diretta dell’utente (ad esempio mediante clic su un pulsante).
Ulteriori info: Quasimondo.com

Ringrazio ssjx per la segnalazione.

Vediamo come è possibile implementare una funzione per la copia automatica in clipboard del contenuto di una stringa, la cosa può tornare utile per far selezionare direttamente all’utente delle parti di testo e copiarlo senza dover usare la combinazione CTRL-C. A me è servita solo per aggiornare il mio userscript che inserisce il codice HTML valido nelle pagine di Youtube, in questo modo basta selezionare il box dove si trova il codice ed incollarlo sul proprio editor HTML :-) , any suggestions about errors in my poor english are greatly appreciated :-D

Usando Javascript la cosa non è possibile, molti browser infatti, impediscono, per ragioni di sicurezza, l’accesso alla clipboard via Javascript. Se ci si limitasse ad IE invece, sarebbe possibile ottenere la cosa utilizzando il solo Javascript, se si vuole invece fare una cosa cross-browser è necessario utilizzare uno script in Flash. Tutto sommato Flash è i plugin più popolare, molto probabilmente la maggioranza degli utenti lo ha installato e quindi non ci dovrebbero essere grossi problemi.

Logo di Adobe Flash

Qui di seguito riporto la tecnica da usare per implementare la funzione copyToClipboard e il metodo di utilizzo, la funzione è leggermente modificata rispetto all’originale, queste sono le modifiche che ho apportato:

  • rimossa la parte di codice relativa a IE (che permette di suo di inviare testo alla clipboard), dovrebbe comunque funzionare se il plugin Flash è installato (io non ho il plugin di Flash in IE, quindi servirebbe verificarlo :-P );
  • l’originale permetteva solo la copia di testo inserito all’interno di tag INPUT (accettava l’oggetto come parametro), la mia versione invece accetta una stringa come input :-) ;

La funzione originale è possibile l’abbiate vista all’opera su Photobucket o su Urltea (prima di capire che sfruttava Flash avevo una mezza idea di aprire un bug su Bugzilla :-P ), quella modificata la potete vedere all’opera su questa pagina selezionando il codice della funzione inserito nel tag PRE (ho preparato una pagina a parte perchè non voglio caricare lo script sulla pagina del post).

Innanzitutto, bisogna scaricare il file _clipboard.swf, che potete trovare al link inserito a fine post. Il file è distribuito con licenza GPL (non da me ma dall’autore), quindi lo potete usare come meglio credete :-) .

I’ve uploaded the SWF file that you can use in your own webpage.

This software is licensed under the GPL so you can take this solution, change it, whatever, free.

Una volta uploadato il file _clipboard.swf sul vostro spazio Web (non usate quello caricato sul mio server, grazie!) inserite il percorso del file nella variabile clipboardswfpath e richiamate la funzione all’interno della pagina in cui desiderate utilizzarla passandogli come argomento una stringa che verrà copiata nella clipboard del visitatore.

	copyToClipboard(document.getElementById('input_id').value);
	

per un tag PRE (e probabilmente per quasi tutti gli altri):

	oggetto=document.getElementById('id_tag_pre');
	range = document.createRange();
	range.selectNodeContents(oggetto);
	copyToClipboard(range);
	

per IE usate getElementById(’mypre_id’).innerText.
Ecco la funzione:


	function copyToClipboard(texttocopy)
	{
		  var clipboardswfpath="indirizzo_file_SWF";
		var flashcopier = 'flashcopier';
		if(!document.getElementById(flashcopier)) {
			var divholder = document.createElement('div');
			divholder.id = flashcopier;
				document.body.appendChild(divholder);
	    }
		document.getElementById(flashcopier).innerHTML = '';
		var divinfo = '&lt;embed src="'+clipboardswfpath+'"  FlashVars="clipboard='+encodeURIComponent(texttocopy)+'" width="0" height="0">&lt;/embed>';
		document.getElementById(flashcopier).innerHTML = divinfo;
	}
	

Purtroppo non è possibile, come da suggerimento che ho avuto su userscript.org inserire il file SWF come stringa di caratteri usando un data link, al momento i browser non supportano.

Come piccola considerazione finale, vorrei far notare a tutti quanto possa influenzare la “sicurezza” di un browser l’utilizzo di un plugin. Se, escludendo IE, nessun altro browser si fida a dare accesso in scrittura alla clipboard un motivo deve pur esserci, il fatto che avendo il plugin Flash installato si possa “raggirare” questa restrizione dovrebbe far riflettere. Certo, poter accedere alla clipboard permette alle applicazioni Web maggiori funzionalità ma a discapito, forse, della sicurezza. Rassicuro tutti, dicendo che nemmeno Flash dà accesso alla clipboard in lettura :-P .

Ringrazio ssjx/Engelium che mi ha fatto interessare all’argomento :-)

Fonte: Clipboard Copy.

Technorati Tags: , , ,

Selezionare il codice inserito quando ci si clicca sopra

Da quando ho iniziato a scrivere sul blog mi sono sempre trovato in difficoltà con l’inserimento di codice, avevo cominciato mettendolo nelle textarea – cosa ignobile da fare col senno di poi – in modo da non rovinare il layout quando nel codice le parole erano troppo lunghe e non venivano wrappate correttamente. Successivamente mi son letto un po’ di manuali base di CSS e ho finalmente capito che il metodo migliore è inserirlo all’interno del tag PRE, assicurandosi di definire uno stile che tenga conto dell’overflow e non faccia sballare troppo la pagina.

Questo è lo stile che uso io:

pre {
	font-family: Courier,monospace;
	background: #EEE;
	font-size: 1.1em;
	line-height: 1.1em;
	border: dashed #666 1px;
	padding: 15px 20px 15px 20px;
	overflow: auto;
}

In particolare la riga:

overflow: auto;

serve per “nascondere” le righe troppo lunghe (è facile accorgersene perchè appariranno le scrollbar). Il fonte tutto Il resto è modificabile a piacimento. Io uso un font monospace come il Courier ma è possibile opti per un altro tipo di carattere in futuro.

Un’altra cosa che mi è sempre piaciuta è fare in modo che il codice inserito sia automaticamente selezionato quando ci si clicca sopra, cosa che devo aver visto su qualche blog di cui non ricordo l’indirizzo. Cercando un po’ con Google sono finalmente riuscito a trovare una risposta :-) . Per fare in modo che il codice venga automaticamente selezionato è necessario associare all’azione onClick dell’elemento un po’ di codice Javascript.

Ecco quindi cosa aggiungere al tag PRE per selezionare automaticamente il testo in esso contenuto:

<pre onClick="
if (window.getSelection) {
	var sel = window.getSelection();
	var range = document.createRange();
	range.selectNodeContents(this);
	sel.removeAllRanges();
	sel.addRange(range);
}
else // per colpa di IE serve un if
	document.selection.empty();
	var range = document.body.createTextRange();
	range.moveToElementText(this);
	range.select();
}
">
codice
</pre>

(gli a capo sono messi solo per motivi di visualizzazione)

Come al solito per farlo funzionare anche con IE è necessario scrivere codice aggiuntivo :-P Naturalmente è possibile associare il codice anche a tag diversi dal PRE, mentre per i tag INPUT e TEXTAREA si deve modificare un po’ il codice utilizzato.

Naturalmente io aggiungo quel codice automaticamente usando un programmino di text & replace (praticamente scrivo pre seguito da TAB), è comunque possibile aggiungere uno script alla pagina e richiamare il codice nel seguente modo:

<pre onClick="autoSelect(this);">
codice
</pre>

Per il codice della funzione autoSelect vi rimando all’articolo da cui ho scopiazzato il codice :-) .

Nel mio caso, non inserendo codice così spesso, preferisco far risparmiare al browser il caricamento di una funzione Javascript inutilizzata nella maggior parte delle pagine. Per lo stesso motivo, non credo di sovvracaricare ulteriormente il blog con uno script di syntax hightlighting

Technorati Tags: , ,