Abrir un popup desde el “href” de un enlace

Hoy me he encontrado con un problema que parecía una tontería pero que al final me ha costado un rato encontrar la solución.

El problema es que estaba usando un componente javascript que “pinta” un menú. Este componente recibe una matriz de N dimensiones que representan los menús y submenus.

Simplificando, este array recibe por cada elemento del menú el texto a mostrar y la URL donde lleva esa opción de menú. Finalmente el componente genera algo de este estilo:

TEXTO

El problema ha surgido cuando me ha surgido la necesidad de que uno de esos enlaces abriese un popup, en vez de redirigirnos a una URL.

En un entorno normal sería fácil porque bastaría con hacer algo de este estilo:

TEXTO

Pero el componente no me permitía meter código en el “onclick” así que la opción era jugar con el parámetro “URL” que le pasaba para conseguir abrir el popup.

He probado varias opciones:

1. TEXTO

2. TEXTO

3. TEXTO

...

Y conseguía abrir el popup pero luego la página se recargaba y mostraba simplemente “[OBJECT], con lo que no valía la solución. Por mucho “return false;” que metiese.

Al final la solución ha sido escribir esto:

TEXTO

Obtener un parámetro de la URL desde JavaScript

Función que nos permite obtener un parámetro de la URL pasado por GET desde JavaScript. En el caso de que el parámetro no exista nos devuelve un null.

// Helper function to get parameters from the query string.
function getUrlParam(paramName) {
    var reParam = new RegExp('(?:[\?&]|&)' + paramName + '=([^&]+)', 'i');
    var match = window.location.search.match(reParam);
    return (match && match.length > 1) ? match[1] : null;
}

Codificar un string a hexadecimal en JavaScript

En cierto momento necesité codificar una cadena de texto en su representación en hexadecimal con la finalidad de realizar una tareas de codificación. La función JavaScript que hace esto es la siguiente:

function encodeToHex(str) {
    var result = "";
    for (var i = 0; i < str.length; i++) {
        result += str.charCodeAt(i).toString(16);
    }
    return result;
}

Comprobar si un array contiene un elemento en JavaScript

JavaScript por desgracia no tiene implementados todos los métodos que podemos tener disponibles desde C# o VB.NET. Uno de ellos es el método “Contains” de las listas. Con este código podemos extender la clase “Array” de JavaScript implementando este método:

Array.prototype.contains = function(element) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == element) {
            return true;
        }
    }
    return false;
}

Calcular el ancho de un texto y acortarlo a un número de pixeles dado en JavaScript

En algún caso podríamos necesitar calcular desde JavaScript cuanto nos va a ocupar un texto en la pantalla.
Para ello haremos uso de una capa que nos hará las veces de regla. Esta capa deberá tener los mismos estilos que el destino del texto que queremos medir, o asignarle estos estilos cada vez que vayamos a medir.

El código HTML de la capa es este:

<span id="ruler"></span>

Para que no se vea esta capa le asignaremos el siguiente CSS:

#ruler {
	visibility: hidden;
	white-space: nowrap;
	position: absolute;
	top: -100;
	left: 0px;
}

Y como último paso extenderemos la clase string de JavaScript con dos métodos que nos permitirán calcular el ancho de un texto en pixeles y recortar un texto a un ancho determinado.

// Calcula los pixeles de ancho que ocupa un texto
String.prototype.visualLength = function() {
    var ruler = document.getElementById("ruler");
    ruler.innerHTML = this;
    return ruler.offsetWidth;
}

// Recorta un texto al número de pixeles indicados, añadiendo un "..." en el caso de haber sido recortado
String.prototype.trimToPx = function(length)
{
    var tmp = this;
    var trimmed = this;
    if (tmp.visualLength() > length)
    {
        trimmed += "...";
        while (trimmed.visualLength() > length)
        {
            tmp = tmp.substring(0, tmp.length-1);
            trimmed = tmp + "...";
        }
    }

    return trimmed;
}