JS bookmarklet: VKontakte Video Albums

The famous social network is constantly updated, which does not always bring sincere joy to users. How many people have so many opinions, you will not please everyone, so one day I wasn’t pleased by the new style of displaying albums of videos in the VKontakte network.
But we are programmers, people are nimble, we immediately see it - here it is a joyful opportunity to make something like this ... So I blinded a small device I want to share, and at the same time recall what it is and how bookmarklets are made.

The bookmarklet, who does not know, is such a script in the browser’s bookmarks, which, in addition to (or instead of) the usual link click, can also execute the required code, thus concentrating the devil's javascript features in one button. Like a macro is obtained.

So, for me, the old style was much more convenient, when the list of video albums albums was clicked compactly, on clicking on which the transition to the right one was made. So I thought I would do a sort of bookmarklet that this list will build. Going to the video page, I fumbled in the debugger and found that album names are stored in a div element with the class “video_album_text fl_l”, this element lives in a div with the class “video_album_info”, and the one in the a (anchor) element, whose href is just the right link to the album.

“Eureka!” I exclaimed, and jumped out of the bath ... i.e. I figured that I just need to collect all the elements from the page with the class “video_album_text fl_l”, go over them and pull out the href link from the parent of the parent (this is not a typo) of each.
So, this code was born:
')

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 += '<a href="' + href + '">' + alb[i].innerHTML + '</a><br>'; } 

getElementsByClassName of course does not work in 6, 7 and 8 IE, but I’ve grown out of them a long time ago, but according to this, it doesn’t move. I collect elements into the alb collection, loop through and collect the string str from ready-made links.

It remains to display this business on the page. Here it will be a little more interesting in terms of creativity ... I wanted not only to display the unit, but something like a convenient window with control buttons. What to do, spoiled windows Windows, thank Bill Gates ...
Draw a window:

 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 = '<a href="#" onclick="this.parentNode.style.display=\'none\'">[x]</a>'+ '<a href="#" onclick="var parN=this.parentNode; parN.style.height=parN.style.height==\'10px\'?\'80%\':\'10px\'">[-]</a>'+ '<a href="#" onclick="var parN=this.parentNode,cl=parseInt(parN.style.left);if(cl>=' + 200 + ')parN.style.left=cl-' + (200 + 12) + '+\'px\'">[<]</a>'+ '<a href="#" onclick="var parN=this.parentNode;parN.style.left=parseInt(parN.style.left)+' + (200 + 12) + '+\'px\'">[>]</a><br>' + str; document.body.appendChild(div); 

A div element is created, it is assigned a certain style through the cssText property, where it is indicated that this is a window of a fixed position, glued to the lower left corner (bottom: 0px; left: 0px;) and other pleasures to taste ... And to the contents of the element (div.innerHTML ) first, control buttons with onclick attributes are written, and then the previously collected term str is a list of links. onclick is certainly a dubious decision when developing an interface, but for a bookmarklet it will fit perfectly. Moreover, this is just a quick example, and there is no limit to perfection. For example, I decided to bring the width of the window to a separate variable wi.

In order for this to become a bookmarklet, you need to place the line “javascript:” at the beginning of the code, translate everything into one line (remove line breaks) and add this line to browser bookmarks instead of the link address. How to create bookmarklets in different browsers to describe here perhaps I will not, who are interested - easy to find.
So, this is the final code, in Chrome you can simply select and drag it to the bookmarks bar:

 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+='<a href="'+href+'">'+alb[i].innerHTML+'</a><br>';}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 = '<a href="#" onclick="this.parentNode.style.display=\'none\'">[x]</a><a href="#" onclick="var parN=this.parentNode; parN.style.height=parN.style.height==\'10px\'?\'80%\':\'10px\'">[-]</a><a href="#" onclick="var parN=this.parentNode,cl=parseInt(parN.style.left);if(cl>='+wi+')parN.style.left=cl-'+(wi+12)+'+\'px\'">[<]</a><a href="#" onclick="var parN=this.parentNode;parN.style.left=parseInt(parN.style.left)+'+(wi+12)+'+\'px\'">[>]</a><br>'+str;document.body.appendChild(div); 

Of course, this will all work as long as the current HTML structure and class “video_album_text fl_l” are preserved.
To use this: go to the video page and click the bookmarklet button on the bookmarks bar. A window with a list of albums will appear, which you can close, collapse and move to the side with the [x] [-] [<] [>] buttons.
And this construction looks like this:


I use it in Chrome, I did not bother with tests in other browsers, but in principle the code is simple, it should not conflict. There will be amendments - write. Thank.
And thank you for your attention.