New Labels Page by YJL

Antes de explicar nada, lo mejor es que veáis de qué se trata, de manera que os dejo, para empezar, la muestra:
Labels, y ahora lo explicamos un poco:

Como véis, tenemos una lista de opciones con etiquetas, reunidas, cada una de ellas, bajo un nombre de bloque o descripción. Cuando hacemos click en alguna de esas etiquetas, se despliegan debajo las entradas contenidas en ella.
En resumidas cuentas, es una tabla contenidos por etiqueta, bastante más dinámica y completa que muchas de las que he visto por ahí.

He traducido este trabajo de Yu-Jie Lin al español, de manera que sea más accesible para quienes tenemos problemas con la lengua inglesa, y el resultado podéis verlo en este Blog de pruebas

Y vamos ahora al trabajo: Este índice se construye con query (lo sé: ahora muchos de vosotros estáis torciendo el gesto y pulsando la flecha atrás para salir de esta entrada) ... pero antes de nada, dejadme que aproveche para enseñaros las posibilidades de query, en mi photoblog, enteramente construído en query, ArsJuniaey en el que he incluído absolutamente de todo lo que se pueda ver en un blog de blogger (incluídos los emoticonos, que es algo difícil de ver en blogs con los nuevos comentarios anidados).

Así ha contruído Yu-Jie Lin su "Labels page":

.- En primer lugar, tenemos que crear una ueva página (id a "creación de entradas-editar páginas", para ñadir en su interior todo el códico y estilos que necesitamos:

Todo lo necesario para incluir en la página que vais a crear, lo obtenéis AQUÍ
Allí se dan perfectamente las explicaciones para crear vuestra página de etiquetas, pero si lo queréis en español, pues aquí dejo mi adaptación. Después de eso sólo tenéis que cambiar los estilos a las necesidades de vuestro blog y, obviamente, las etiquetas que han de contenerse en las "predefined labels", así como insertar la ID de vuestro blog y la de vuestro perfil de Blogger:

*(If you want this on your blog, please read [this post][instruction] for instructions.)*

[instruction]: http://blog.yjl.im/2010/11/my-new-labels-page.html

<div>
<!-- BEGIN: whole code -->
<!-- Last updated: 2011-02-15T01:18:15Z
Copyright 2010, 2011 Yu-Jie Lin
BSD License
-->

<!-- BEGIN: main code -->
<!-- Last updated: 2011-02-15T01:18:15Z
You can get the latest code at http://blog.yjl.im/p/labels.html

If the Last updated on your website is different than from the page above, then
you might want to update your main code.

If you already have jQuery loaded in your blog, you can omit the following line -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script src="http://.../.../jquery/jquery.autocomplete.pack.js"></script>
<script>

Y ahora, el código principal (aquí no tenéis que insertar nada aún):

<!-- BEGIN: whole code -->
<!-- Last updated: 2011-02-15T01:18:15Z
Copyright 2010, 2011 Yu-Jie Lin
BSD License
-->

<!-- BEGIN: main code -->
<!-- Last updated: 2011-02-15T01:18:15Z
You can get the latest code at http://blog.yjl.im/p/labels.html

If the Last updated on your website is different than from the page above, then
you might want to update your main code.

If you already have jQuery loaded in your blog, you can omit the following line -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script src="http://lilbtn.yjl.im/js/jquery/jquery.autocomplete.pack.js"></script>
<script>
function load_labels(callback) {
$('#search-labels-box-loader').hide();
$.getJSON("http://www.blogger.com/feeds/" + PROFILE_ID + "/blogs/" + BLOG_ID + "?alt=json-in-script&callback=?", function(data){
if (!data || !data.entry || !data.entry.category)
return;
window.LABELS = [];
var LABELS = window.LABELS;
for (var idx in data.entry.category) {
LABELS.push(data.entry.category[idx].term);
}
LABELS.sort();

var $ddl = $('#labels-ddl');
for (var idx in LABELS) {
$('<option/>').text(LABELS[idx]).val(LABELS[idx]).appendTo($ddl);
}

$('#search-labels-box').slideDown('fast');
// set up autocomplete
$('#labels-search-box').autocomplete(LABELS, {multiple: true});

if (callback)
callback();
});
}

function list_labels() {
var $labels = $('<ul/>').appendTo($('#blogger-labels-result').empty());
for (var idx in LABELS) {
var label = LABELS[idx];
$('<li/>')
.append(
$('<a/>')
.text(label)
.attr('href', '#')
.attr('label', label)
.click(function(){list_posts($(this).attr('label'))})
)
.appendTo($labels);
}
}

function list_posts(slabels, query, show_all) {
var $container = $('#blogger-labels-result');
if (query) {
var query_url = query + '&alt=json-in-script&callback=?';
}
else {
var _labels = slabels.split(',');
var labels = [];
for (var idx in _labels) {
if (_labels[idx].trim())
labels.push(encodeURIComponent(_labels[idx].trim()));
}
var MAX_RESULTS = parseInt($('#max_results').val());
// If it's 0, then set to 500
if (!MAX_RESULTS) {
MAX_RESULTS = 500;
show_all = true;
$container.empty();
}
var labels_part = labels.join('/');
if (labels_part)
labels_part = '/-/' + labels_part;
var query_url = "http://www.blogger.com/feeds/" + BLOG_ID + "/posts/summary" + labels_part + "?alt=json-in-script&callback=?&orderby=" + $('#orderby').val() + '&max-results=' + MAX_RESULTS;
}

if (!show_all)
$container.empty();

var $posts = $container.children('ul');
if ($posts.length == 0) {
$posts = $('<ul/>');
$container.append($posts);
}

$.getJSON(query_url, function(data) {
if (!data.feed.entry) {
$posts.replaceWith($('<span/>').text('No hay entradas.'));
return;
}
var summary_class = $('#show_summary').attr('checked') ? 'summary' : 'summary hidden';
var timestamp_class = $('#show_timestamp').attr('checked') ? 'timestamp' : 'timestamp hidden';
for (var entry_idx in data.feed.entry) {
var entry = data.feed.entry[entry_idx];
var link = "";
// Find the url of this post
for (var idx in entry.link) {
var l = entry.link[idx];
if (l.rel == 'alternate') {
link = l.href;
break;
}
}
var $li = $('<li/>')
.append(
$('<a/>')
.text(entry.title.$t)
.attr('href', link)
)
.append(
$('<span/>')
.addClass(summary_class)
.text(' - ' + entry.summary.$t)
)
.append(
$('<span/>')
.addClass(timestamp_class)
.text(' - ' + new Date(entry.published.$t))
)
.appendTo($posts);
}

// Check if there are next or prev links
var prev = '';
var next = '';
for (var idx in data.feed.link) {
var l = data.feed.link[idx];
if (l.rel == 'previous')
// Blogger API repeat labels, that causes problem
prev = l.href.replace(/-\/[^-]+/, '');
if (l.rel == 'next')
next = l.href.replace(/-\/[^-]+/, '');
}

if (show_all) {
if (next) {
list_posts(undefined, next, true)
}
else {
// Finish showing all posts
var total_results = parseInt(data.feed.openSearch$totalResults.$t);
$container.append(total_results + ' post' + (total_results==1?'':'s'));
}
}
else {
if (prev)
$container.append($('<a/>').html('« Anterior').attr('href', '#').click(function(){list_posts(undefined, prev)}));
var total_results = parseInt(data.feed.openSearch$totalResults.$t);
var start_index = parseInt(data.feed.openSearch$startIndex.$t);
var items_per_page = parseInt(data.feed.openSearch$itemsPerPage.$t);
var end_index = start_index + items_per_page - 1;
if (end_index > total_results)
end_index = total_results;
$container.append(' ' + start_index + '-' + end_index + ' de ' + total_results + ' entrada' + (total_results==1?'':'s') + ' ');
if (next)
$container.append($('<a/>').html('Siguiente »').attr('href', '#').click(function(){list_posts(undefined, next)}));
}
});
}

function show_summary_change() {
if ($('#show_summary').attr('checked'))
$('#blogger-labels-result .summary').removeClass('hidden');
else
$('#blogger-labels-result .summary').addClass('hidden');
}

function show_timestamp_change() {
if ($('#show_timestamp').attr('checked'))
$('#blogger-labels-result .timestamp').removeClass('hidden');
else
$('#blogger-labels-result .timestamp').addClass('hidden');
}

function append_to_search_box(label) {
if (!window.LABELS) {
load_labels(function(){append_to_search_box(label)});
return;
}
var $input = $('#labels-search-box');
if ($input.val()) {
if (/.*, *$/.test($input.val()))
$input.val($input.val() + ' ' + label);
else
$input.val($input.val() + ', ' + label);
}
else
$input.val(label);
}

function sort_alphabet() {
var $ul = $('<ul/>');
$('#blogger-labels-result ul li').sort(function(a,b){a=$(a).text();b=$(b).text();return a > b ? 1 : (a == b ? 0 : -1)}).appendTo($ul);
$('#blogger-labels-result ul').replaceWith($ul);
}

$(function() {
$('#search-labels-box').hide();
var $container = $('#blogger-labels-container');
var $predefined_labels = $('#predefined-labels');
var $predefined_labels_ul = $('<ul/>').appendTo($predefined_labels);
// List predefined labels
for (var idx_cat in PREDEFINED_LABELS) {
var cat = PREDEFINED_LABELS[idx_cat][0];
var cat_lbls = PREDEFINED_LABELS[idx_cat][1];
var $cat_ul = $('<ul/>');
for (var idx_lbl in cat_lbls) {
var label = cat_lbls[idx_lbl];
$('<li/>')
.append(
$('<a/>')
.text(label)
.attr('href', '#')
.attr('label', label)
.click(function(){list_posts($(this).attr('label'))})
)
.append(' ')
.append(
$('<a/>')
.html('↓')
.attr('href', '#')
.attr('label', label)
.click(function(){append_to_search_box($(this).attr('label'));return false;})
)
.appendTo($cat_ul);
}

$('<li/>')
.text(cat)
.append($cat_ul)
.appendTo($predefined_labels_ul);
}
});
</script>
<!-- END: main code -->

Vamos ahora al CSS: Aquí ya podéis empezar a cambiar lo que creáis oportuno

<!-- BEGIN: style -->
<!-- Last updated: 2011-02-15T01:58:15Z -->
<style>
@import url("http://lilbtn.yjl.im/css/jquery.autocomplete.css");
#blogger-labels-container {
color: #222;
}
#predefined-labels {
background-color: #CCC;
border-radius: 1ex;
padding: 1ex;
}
#search-options {
background-color: #CCC;
border-radius: 1ex;
padding: 1ex;
}
#search-box {
background-color: #CCC;
border-radius: 1ex;
padding: 1ex;
}
#blogger-labels-result {
background-color: #CCC;
border-radius: 1ex;
padding: 1ex;
}
#blogger-labels-result .hidden {
display: none;
}
</style>
<!-- END: style -->

Y, por fín, el HTML, donde hay que tener algún cuidado para no equivocarse

<!-- BEGIN: HTML -->
<!-- Last updated: 2011-02-15T01:58:15Z -->
<div id="blogger-labels-container">
<div id="predefined-labels">
Click en alguna etiqueta para mostar las entradas que contiene:</div>
<hr/><div id="search-options">
<div>
<label><input type="checkbox" id="show_summary" checked="checked" onchange="show_summary_change()"/> Mostrar resumen</label> •
<label><input type="checkbox" id="show_timestamp" checked="checked" onchange="show_timestamp_change()"/> Mostrar por fecha</label> •
<label alt="0 shows all posts" title="0 shows all posts">Mostrar <input type="text" id="max_results" value="20" size="3"/> entradas por pagina</label>
</div>
<div>
Seleccionar por <select id="orderby"><option value="published">Fecha de publicacion</option><option value="updated">Ultima por fecha</option></select>
o <input type="button" value="Por orden alfabetico" onclick="sort_alphabet()"/>de título de entrada .
</div>
</div>
<hr/><div id="search-box">
<div id="search-labels-box-loader">
<input type="button" value="Click para mas funciones" onclick="load_labels()"/></div>
<div id="search-labels-box">
<div>
<input type="button" value="List labels" onclick="list_labels()"/></div>
<div>
<input type="button" value="List posts labeled with" onclick="list_posts($('#labels-ddl').val())"/> <select id="labels-ddl"></select></div>
<div>
<input type="button" value="List posts labeled with" onclick="list_posts($('#labels-search-box').val())"/> <input type="text" id="labels-search-box" value=""/> (Separate by commas)</div>
</div>
</div>
<hr/><div id="blogger-labels-result">
</div>
</div>
<!-- END: HTML -->

<!-- BEGIN: settings -->
<!-- Last updated: 2010-11-27T07:17:21+0800 -->
<script>
/*
You should be able to get the following IDs from Blogger Dashboard
PROFILE_ID can be found in View Profile url
BLOG_ID can be found in links of a blog, e.g. NEW POST, Edit Posts, Comments, etc.
*/
var PROFILE_ID = '...';
var BLOG_ID = '...';
// Be careful when adding commas if you don't know about JavaScript.
var PREDEFINED_LABELS = [
['Integro', ['El Secreto de Leire', 'Contenidos', 'Comienzos', 'Comento']],
// ^ This one is a label
//                 ^ they are labels                                    ^^ no commas
['Repetimos', ['Contenidos', 'Comienzos']],
['Poesia', ['Clásicos']],
//                     ^ need comma
['Musica', ['Tono']]
//                         ^ no comma
];
</script>  
</script>
<!-- END: settings -->
<!-- END: whole code -->
<!--
## Changelog

* 2010-11-27T07:17:21+0800: Add more options for visitor to use, including showing/hiding summary/timestamp, how many posts a page, sorting field, and list all matched posts with one click.
* 2011-02-15T01:58:15Z:
1. Fix text color on Dark theme.
2. Make show/hide summary and timestamp doesn't need to re-query.
3. Fix scroll to top after appending a label to labels box
4. Fix unable to list all posts when no label entered
5. Fix comma and space prepend label when appending and these is no label entered previously
-->
</div>

Y ahora vamos a mirar más despacio esta parte: Os he dejado mis "etiquetas predefinidas" para que tengáis una idea de la estructura y de cómo hay que colocarlas. Hay un "contenedor" principal al que debéis poner nombre (por ejemplo, si trabajáis fotografia, llamad así al contenedor y, dentro, las etiquetas con el tipo de las fotografías que lleven el nombre de vuestras etiquetas, p.e. "paisaje", "urbano", animales" ...). Fijaros en que ya se os advierte, a la hora de introducir las etiquetas, cuando debéis poner una coma detrás y cuando no. Y no olvidéis introducir la ID de vuestro blog (podéis verla cuando entráis en "diseño-edición de HTML": Os aparecerá en la barra de navegación del explorador) y la ID de vuestro perfil de Blogger (entrad en el "Escritorio" de Blogger y pinchad en vuestro perfil).

Y creo que no hay más que explicar ni decir: y si tenéis alguna pregunta, Yu-Jie Lin, el autor de este trabajo, estará encantado de responderos (pero escribidle en inglés, por favor.)