jam-cloud/web/app/assets/javascripts/jamtrack.js

(function(context,$) {

  "use strict";
  context.JK = context.JK || {};
  context.JK.JamTrackScreen = function(app) {

    var logger = context.JK.logger;

    var $screen = null;
    var $content = null;
    var $scroller = null;
    var $genre = null;
    var $instrument = null;
    var $availability = null;
    var $nextPager = null;
    var $noMoreJamtracks = null;

    var currentQuery = defaultQuery();
    var currentPage = 0;
    var LIMIT = 10;
    var next = null;
    var instrument_logo_map = context.JK.getInstrumentIconMap24();

    function beforeShow(data) {
      refresh();
    }

    function afterShow(data) {
    }

    function events() {
      $genre.on("change", search);
      $instrument.on("change", search);
      $availability.on("change", search);
    }

    function clearResults() {
      //logger.debug("CLEARING CONTENT")
      currentPage = 0;
      $content.empty();
      $noMoreJamtracks.hide();
      next = null;
    }

    function refresh() {
      currentQuery = buildQuery();
      rest.getJamtracks(currentQuery)
        .done(function(response) {
          clearResults();
          handleJamtrackResponse(response);
        })
        .fail(function(jqXHR) {
          clearResults();
          $noMoreJamtracks.show();
          app.notifyServerError(jqXHR, 'Jamtrack Unavailable')
        })
    }

    function search() {
      logger.debug("Searching for jamtracks...");
      refresh();
      return false;
    }

    function defaultQuery() {
      var query = { limit:LIMIT, page:currentPage};

      if(next) {
        query.since = next;
      }

      return query;
    }

    function buildQuery() {
      currentQuery = defaultQuery();

      // genre filter
      var genres = $screen.find('#jamtrack_genre').val();
      if (genres !== undefined) {
        currentQuery.genre = genres;
      }

      // instrument filter
      var instrument = $instrument.val();
      if (instrument !== undefined) {
        currentQuery.instrument = instrument;
      }

      // availability filter
      var availability = $availability.val();
      if (availability !== undefined) {
        currentQuery.availability = availability;
      }

      return currentQuery;
    }

    function handleJamtrackResponse(response) {
      //logger.debug("Handling response", JSON.stringify(response))          
      next = response.next;

      renderJamtracks(response);

      if(response.next == null) {
        // if we less results than asked for, end searching
        $scroller.infinitescroll('pause');
        logger.debug("end of jamtracks");

        if(currentPage == 0 && response.jamtracks.length == 0) {
          $content.append("<div class='no-jamtracks-msg'>There's no jamtracks.</div>")  ;
        }

        if(currentPage > 0) {
          $noMoreJamtracks.show();
          // there are bugs with infinitescroll not removing the 'loading'.
          // it's most noticeable at the end of the list, so whack all such entries
          $('.infinite-scroll-loader').remove();
        }
      }
      else {
        currentPage++;
        buildQuery();
        registerInfiniteScroll();
      }
    }

    function registerInfiniteScroll() {
      $scroller.infinitescroll({
        behavior: 'local',
        navSelector: '#jamtrackScreen .btn-next-pager',
        nextSelector: '#jamtrackScreen .btn-next-pager',
        binder: $scroller,
        dataType: 'json',
        appendCallback: false,
        prefill: false,
        bufferPx: 100,
        loading: {
          msg: $('<div class="infinite-scroll-loader">Loading ...</div>'),
          img: '/assets/shared/spinner.gif'
        },
        path: function(page) {
          return '/api/jamtracks?' + $.param(buildQuery());
        }
      },function(json, opts) {
        handleJamtrackResponse(json);
      });
      $scroller.infinitescroll('resume');
    }

    function playJamtrack(e) {
      e.preventDefault();
    }

    function addToCartJamtrack(e) {
      e.preventDefault();

      var params = {id: $(e.target).attr("data-jamtrack-id")};
      rest.addJamtrackToShoppingCart(params)
        .done(function(response) {
          context.location = "/client#/shoppingCart";
        })
        .fail(app.ajaxError);
    }

    function licenseUSWhy(e) {
      e.preventDefault();

      app.layout.showDialog('jamtrack-availability-dialog');
    }

    function registerEvents() {
      $screen.find('.jamtrack-detail-btn').on("click", showJamtrackDescription);
      $screen.find('.play-button').on('click', playJamtrack);
      $screen.find('.jamtrack-add-cart').on('click', addToCartJamtrack);
      $screen.find('.license-us-why').on('click', licenseUSWhy);
    }

    function renderJamtracks(data) {
      $.each(data.jamtracks, function(i, jamtrack) {
        $.each(jamtrack.tracks, function (index, track) {

          if(track.track_type == 'Master') {
            return; // continue
          }

          var inst = '../assets/content/icon_instrument_default24.png';
          if (track.instrument.id in instrument_logo_map) {
            inst = instrument_logo_map[track.instrument.id].asset;
          }
          track.instrument_url = inst;

          track.instrument_desc = track.instrument.description;
          if (track.part != "") {
            track.instrument_desc += " ( " + track.part +  " )";
          }
        });

        var options = {
          jamtrack: jamtrack
        };

        var $jamtrackItem = $(
          context._.template(
            $('#template-jamtrack').html(),
            options,
            {variable: 'data'}
          )
        );
        renderJamtrack($jamtrackItem );
      });

      registerEvents();
    }

    function showJamtrackDescription(e) {
      e.preventDefault();

      var $description = $(e.target).parent(".detail-arrow").next();
      if ($description.css("display") == "none") {
        $description.show();
      }
      else {
        $description.hide();
      }
    }

    function renderJamtrack(jamtrack) {
      $content.append(jamtrack);
    }

    function initialize() {
      var screenBindings = {
        'beforeShow': beforeShow,
        'afterShow': afterShow
      };
      app.bindScreen('jamtrack', screenBindings);

      $screen           = $("#jamtrack-find-form");
      $scroller         = $screen.find('.content-body-scroller');
      $content          = $screen.find(".jamtrack-content");
      $genre            = $screen.find("#jamtrack_genre");
      $instrument       = $screen.find("#jamtrack_instrument");
      $availability     = $screen.find("#jamtrack_availability");
      $nextPager        = $screen.find("a.btn-next-pager");
      $noMoreJamtracks  = $screen.find("#end-of-jamtrack-list");

      if($screen.length == 0) throw "$screen must be specified";
      if($scroller.length == 0) throw "$scroller must be specified";
      if($content.length == 0) throw "$content must be specified";
      if($noMoreJamtracks.length == 0) throw "$noMoreJamtracks must be specified";
      if($genre.length == 0) throw "$genre must be specified";
      if($instrument.length == 0) throw "$instrument must be specified";
      if($availability.length ==0) throw "$availability must be specified";

      events();
    }

    this.initialize = initialize;

    return this;
  }
})(window,jQuery);