A Pen by akey.

API:-Booklog.markdown

API: Booklog

特定ユーザーの本棚の本を取得して表示する

A Pen by akey on CodePen.

License.

index.html

<ul id="modNovels"></ul>
<ul id="modComics"></ul>
<ul id="modStudyBooks"></ul>
<ul id="modBlurayDVD"></ul>

script.js

(function($)
{
  "use strict";

  /**
   * @class Booklog
   */

  function Booklog($dom, tag, category, count, status, rank) {
    this.$dom = $dom;
    this.tag  = tag || 'p';
    this.category = category;
    this.count    = count || 5;
    this.status   = status || 0;
    this.rank     = rank || 0;

    this.init.apply(this);
  }
  Booklog.USER_ID = 'urakey';
  Booklog.AMAZON_ID = 'chocolateboard-22';
  Booklog.prototype = {

    init: function() {
      this.loadBooks();
    },
    
    loadBooks: function() {
      var _this = this;
      var d = $.Deferred();

      $.ajax({
        type : 'GET'
      , url  : 'http://api.booklog.jp/json/' + Booklog.USER_ID
      , dataType:   'jsonp'
      , data : {
          category : _this.category
        , status   : _this.status
        , rank     : _this.rank
        , count    : _this.count
        }
      , success: function(data) {
          _this.appendHtml(_this.$dom, _this.formatHtml(data));
          d.resolve();
        }
      , error: function(e) {
          console.log(e);
        }
      });
      return d.promise();
    },
    
    formatHtml: function(data) {
      var _this = this;
      var books = data.books;
      var htmlTag = _this.tag;
      var title, asin, author, link, image, imageW, imageH, htmlSrc;
      var newCommers = [];

      if(books.length <= 0) return;

      $.each(books, function(index, book){
        title  = book.title;
        asin   = book.asin;
        author = book.author;
        link   = 'http://amazon.jp/exec/obidos/ASIN/' + asin + '/' + Booklog.AMAZON_ID + '/';
        image  = book.image;
        imageW = book.width;
        imageH = book.height;

        htmlSrc  = '<' + htmlTag + ' style="clear:both">';
        if ( image ) htmlSrc += '<p style="width:' + imageW + 'px; float:left;"><a href="' + link + '" target="_blank"><img src="' + image + '" alt="' + title + '" width="' + imageW + '" height="' + imageH + '"></a></p>';
        htmlSrc += '<p style="margin-left:' + (Number(imageW) + 10) + 'px"><a href="' + link + '" target="_blank">'+ title +'<br>';
        htmlSrc += author + '</a></p>';
        htmlSrc += '</' + htmlTag + '>';

        newCommers.push(htmlSrc);
      });

      return newCommers;
    },
    
    appendHtml: function($dom, htmlSrcArray) {

      if(htmlSrcArray.length <= 0) return;
      $.each(htmlSrcArray, function(index, htmlSrc){
        $dom.append(htmlSrc);
      });
    }
  };
  
  //===========================================================================
  //  変数
  //===========================================================================

  var booklogItems = {
    NOVELS: {
      selector: $('#modNovels')
    , category: '609247'
    }
  , COMICS: {
      selector: $('#modComics')
    , category: '618925'
    }
  , STUDY_BOOKS: {
      selector: $('#modStudyBooks')
    , category: '2022830'
    }
  , BLURAY_DVD: {
      selector: $('#modBlurayDVD')
    , category: '618917'
    }
  };

  //===========================================================================
  //  処理
  //===========================================================================

  $(document).on({
    'ready': function(){

      var booklogNovels     = new Booklog($('#modNovels'), 'li', booklogItems.NOVELS.category, 5, 3);
      var booklogComics     = new Booklog($('#modComics'), 'li', booklogItems.COMICS.category, 5, 3);
      var booklogStudyBooks = new Booklog($('#modStudyBooks'), 'li', booklogItems.STUDY_BOOKS.category, 5, 0);
      var booklogBlurayDVD  = new Booklog($('#modBlurayDVD'), 'li', booklogItems.BLURAY_DVD.category, 5, 0);
    }
  });
  
})(jQuery);

style.scss

@import "compass/css3";
body {
  font-size: 85%;
}