How to create a “carousel”-like widget in spotify apps API?

问题

Is it possible using the spotify apps API to create one of these widgets filled with my data of choice?

回答1:

Yes, by using import/scripts/pager. Here's an example, extracted and simplified from the "What's New" app. Your 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;
  };
}

Your 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>

And lastly, copy the whatsnew.css into your project and rename it to pager.css. You will of course need to clean up the css and modify the elements in your index.html to fit with your app but this is a good starting point.

The "What's New" app also has an example of a horizontal pager with album artwork. Take a look at this question and answer to figure out how to extract the source of the app.

Also note that I am not sure whether the pager.js will be part of the public API. If not then you can of course extract it into your own pager widget and use it anyway.

来源：https://stackoverflow.com/questions/8850514/how-to-create-a-carousel-like-widget-in-spotify-apps-api

标签

spotify