getAllTracksFromVK

get all tracks from profile on vk.com

by Yeah

HTML

<script src="//d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="//cdn.jsdelivr.net/load.js/1.1.0/load.min.js"></script>
<script src="http://cdn.jsdelivr.net/util.io/1.6.0/util.min.js"></script>
  <button id=login class="btn btn-success margin">Sign in</button>
<div class="btn-group margin hidden" data-toggle="buttons-checkbox">
  <button id=logout class="btn btn-success">Sign out</button>
  <button id=alwaysUpdate type="button" class="btn btn-success">Update data on every request</button>
    
  <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu pull-right">
    <li>
      <a id=allInformation href="#">All information</a>
    </li>
    <li>
      <a id=links href="#">Links</a>
    </li>
    <li>
      <a id=names href="#">Names</a>
    </li>
  </ul>
</div>
<span class=icon></span>
<span class=msg></span>
<div id="editor" class=margin></div>
<a class=margin href=//coderaiser.github.io>(c)Coderaiser</a>

CSS

.margin{
    margin-left:20px;
    margin-top:20px;
}
 
.hidden{
    position: fixed;
    top: 99999px;
    left: 99999px;
}
 
#editor { 
    position: relative;
    height: 600px;
    width : 600px;
}

.loading{
    position:relative;
    top:1px;
    background:url(http://cloudcmd.jit.su/img/spinner.gif);
}

.icon{
    display:inline-block;
    width:16px;
    height:16px;
    margin-left:0.5%;
    font-family: 'Octicons Regular';
    font-size:16px;
}

.msg{
    position: relative;
    top: 11px;
}

JavaScript

var $, ace, Util, VK, load;

(function(){
    'use strict';
    
    var LogIn,
        AllInformation,
        Loading,
        Editor,
        BtnGroup,
        Msg,
        AlwaysUpdate;
         
    $(document).ready(function(){
        var Session;
        
        Editor = ace.edit('editor');
        Session = Editor.getSession();
        Session.setUseWorker(false);
        Session.setMode('ace/mode/javascript');
        
        LogIn               = $('#login');
        Loading             = $('.icon');
        Msg                 = $('.msg');
        
        var lAllInformation = $('#allInformation'),
            lLinks          = $('#links'),
            lNames          = $('#names'),
            lLogOut         = $('#logout'),
            lAlwaysUpdate   = $('#alwaysUpdate');
        
        BtnGroup            = $('.btn-group');
        LogIn.click(function() {
            var lProtocol = document.location.protocol;
            
            load.parallel([
                '//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js',
                '//vkontakte.ru/js/api/openapi.js'
            ], function() {
              VK.init({ apiId: 3336925 });
              VK.Auth.login(function(response){
                onLogin(response);
                lAllInformation.trigger('click');
            }, VK.access.AUDIO);
            });
        });
        
        lLogOut.click(function() {
           lLogOut.button('toggle');
            showLoad();
            VK.Auth.logout(function(){
                hideLoad();
                AllInformation = '';
                Msg.textContent = '';
            });
            
            show(LogIn);
            hide(BtnGroup);
            
            Editor.setValue('', -1);
        });
        
        lAllInformation.click(function() {
            showLoad();
            getAudio(function(){               
                var lAllInf = JSON.stringify(AllInformation, null, 4);
               ...