Букмарклет JS: «Альбомы видеозаписей ВКонтакте»

Знаменитая социальная сеть постоянно обновляется, что далеко не всегда несет искреннюю радость пользователям. Сколько людей столько и мнений, каждому не угодишь, так и меня однажды не обрадовал новый стиль отображения альбомов видеозаписей в сети ВКонтакте. Но мы программисты люди проворные, сразу смекаем – вот она радостная возможность чего-нибудь такого слепить… Вот и я слепил небольшое приспособление, которым хочу поделиться, и заодно напомнить, что такое и как делаются букмарклеты.

Букмарклет, кто не знает, это такой скриптик в закладках браузера, который кроме(или вместо ) обычного перехода по ссылке может еще и выполнить требуемый код, концентрируя таким образом чертовские возможности javascript в одной кнопке. Наподобие макроса получается.

Итак, по мне был гораздо удобнее прежний стиль, когда сбоку компактно отображался список альбомов видеозаписей, по клику на которые совершался переход в нужный. Вот я и подумал, сделаю ка этакий букмарклет, который этот список будет строить. Зайдя на страницу видеозаписей, я пошарил в отладчике и обнаружил, что названия альбомов хранятся в элементе div с классом «video_album_text fl_l», этот элемент живет в div с классом «video_album_info», а тот — в элементе a(anchor), href которого – как раз нужная ссылка на альбом.

«Эврика!» — воскликнул я, и выскочил из ванны… т.е. прикинул, что мне нужно всего лишь собрать со страницы все элементы с классом «video_album_text fl_l», пройтись по ним и вытащить ссылку href из родителя родителя (это не опечатка) каждого.

Итого, родился такой код:

var str = '',
        alb = document.getElementsByClassName('video_album_text fl_l');
    for (var i = 0; i < alb.length; i++) {
        var href = alb[i].parentNode.parentNode.href;
        str += '' + alb[i].innerHTML + '
';
    }

getElementsByClassName конечно не работает в 6, 7 и 8 ИЕ, но я из них уже давно вырос, а по сему – не колышет. Собираю элементы в коллекцию alb, прохожу циклом и собираю строку str из готовых ссылок.

Осталось это дело отобразить на странице. Тут чуть по интереснее в плане творчества будет… Захотелось мне не просто блок вывести, а что-то вроде удобного окошка с кнопками управления. Что поделать, избалован окошками Windows, слава Биллу Гейтсу…

Рисуем окошко:

var div = document.createElement('div');
    div.style.cssText = 'position:fixed;bottom:0px;left:0px;width:' + 200 + 'px;height:80%;overflow:auto;z-index:1000;background-color:white;padding:5px;border:solid 1px black;';
    div.innerHTML = '[x]'+
        '[-]'+
        '[<]'+
        '[>]
'
        + str;
    document.body.appendChild(div);

Создается элемент div, ему присваивается некий стиль через свойство cssText, где указано, что это окошко фиксированной позиции, приклеено к левому нижнему углу( bottom:0px; left:0px; ) и прочие радости по вкусу… А в содержимое элемента (div.innerHTML) записываются сперва кнопочки управления с атрибутами onclick, а затем собранная ранее срока str – список ссылок. onclick – конечно сомнительное решение при разработке интерфейса, но для букмарклета – вполне сгодится. Тем более это всего лишь быстрый пример, а совершенству нет предела. Например, я решил вынести ширину окошка в отдельную переменную wi.

Для того, чтобы это стало букмарклетом нужно в начале кода поместить строку «javascript:», перевести все в одну строку(убрать переносы строк) и эту строку добавить в закладки браузера вместо адреса ссылки. Как создавать букмарклеты в разных браузера описывать тут пожалуй не стану, кому интересно – найти легко.

Итак, получился такой окончательный код, в Chrome его можно просто выделить и перетащить на панель закладок:

javascript:var str='', wi=200, alb = document.getElementsByClassName('video_album_text fl_l');for(var i=0;i < alb.length;i++){var href=alb[i].parentNode.parentNode.href;str+=''+alb[i].innerHTML+'
';}var div=document.createElement('div');div.style.cssText = 'position:fixed;bottom:0px;left:0px;width:'+wi+'px;height:80%;overflow:auto;z-index:1000;background-color:white;padding:5px;border:solid 1px black;';div.innerHTML = '[x][-][<][>]
'+str;document.body.appendChild(div);

Разумеется, работать это все будет пока сохраняется текущая структура HTML и класс «video_album_text fl_l». Пользоваться так: заходим на страницу видеозаписей и кликаем кнопку букмарклета на панели закладок. Появится окошко со списком альбомов, которое можно закрыть, свернуть и передвинуть в сторону кнопочками [x][-][<][>].

А выглядит сия конструкция примерно так:

Использую в Chrome, тестами в других браузерах не утруждался, но в принципе код простой, конфликтовать не должен. Будут поправки — пишите. Спасибо.

И спасибо за внимание.

10.01.2013

P.S.

в данный момент там добавилась еще одна обертка элементом, так что код

var href = alb[i].parentNode.parentNode.href;

var href = alb[i].parentNode.parentNode.parentNode.href;