Как создать «карусельный» виджет в API приложений spotify? - PullRequest
Новая
       5

Как создать «карусельный» виджет в API приложений spotify?

4 голосов
/ 13 января 2012

Можно ли использовать API приложений spotify для создания одного из этих виджетов, заполненных моими выбранными данными?enter image description here

1 Ответ

3 голосов
/ 13 января 2012

Да, используя import / scripts / pager. Вот пример, извлеченный и упрощенный из приложения «Что нового». Ваш pager.js: 

"use strict";

sp = getSpotifyApi(1);
var p = sp.require('sp://import/scripts/pager');
var dom = sp.require('sp://import/scripts/dom');

exports.init = init;

function init() {
  var pagerSection = dom.queryOne('#pager');
  var datasource = new DataSource([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);

  var options = {
    perPage: 5,
    hidePartials: true,
    orientation: 'vertical',      // 'vertical', 'horizontal'
    pagingLocation: 'top',        // 'top', 'bottom'
    bullets: false,
    listType: 'list',             // 'table', 'list'
    context: 'aToplist'           // some string unique for each pager
  };

  var pager = new p.Pager(datasource, options);
  pager.h2.innerHTML = "Example Pager";
  dom.adopt(pagerSection, pager.node);
}

function DataSource(data) {
  var data = data;

  this.count = function() {
    return data.length;
  };

  this.makeNode = function(index) {
    var dataItem = data[index];
    var li = new dom.Element('li');

    var nameColumn = new dom.Element('div', {
      className: 'nameColumn',
      html: '<div class="nameColumn">'+
              '<a href="#" class="name">Name' + dataItem + '</a>'+
              '<a href="#" class="creator">Creator' + dataItem +'</a>'+
            '</div>'
    });

    dom.adopt(li, nameColumn);
    return li;
  };
}

Ваш index.html: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="pager.css">
</head>

<body onload="sp = getSpotifyApi(1); sp.require('pager').init();">
  <div id="wrapper">
    <section class="toplists" id="bottomToplists">
      <section id="pager" class="playlists playlistsTable toplist"></section>
    </section>
  </div>
</body>
</html>

И, наконец, скопируйте файл whatsnew.css в свой проект и переименуйте его в pager.css. Вам, конечно, нужно будет очистить CSS и изменить элементы вашего index.html, чтобы они подходили для вашего приложения, но это хорошая отправная точка.

В приложении «Что нового» также есть пример горизонтального пейджера с обложкой альбома. Взгляните на этот вопрос и ответьте , чтобы понять, как извлечь источник приложения.

Также обратите внимание, что я не уверен, будет ли pager.js частью общедоступного API. Если нет, то вы, конечно, можете извлечь его в свой виджет пейджера и использовать его в любом случае.

...