☰

Threadless Infinite Scroll

Infinite scroll for threadless.com

当前为 2016-09-17 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Threadless Infinite Scroll
  3. // @namespace    https://github.com/arieljannai
  4. // @version      0.1
  5. // @description  Infinite scroll for threadless.com
  6. // @author       Ariel Jannai
  7. // @match        *://www.threadless.com/*
  8. // @icon         https://www.threadless.com/favicon.ico
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     var infiniteLoadingGif = "<div class='infinite-loading' style='text-align:center; margin:0 auto; width:50%'><img src='https://getmocky.com/images/big_preloader.gif'></img></div>";
  16.  
  17.     function isScrolledIntoView(elem) {
  18.         var docViewTop = $(window).scrollTop();
  19.         var docViewBottom = docViewTop + $(window).height();
  20.  
  21.         var elemTop = $(elem).offset().top;
  22.         var elemBottom = elemTop + $(elem).height();
  23.  
  24.         return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
  25.     }
  26.  
  27.     var back_top = $('.back_top');
  28.     var pathname = document.location.pathname;
  29.     var pageMatch = pathname.match(/page,(\d+)/);
  30.     var currPage = pageMatch ? pageMatch[1] : 1;
  31.     var requestNext = true;
  32.     pathname = pathname.replace(/\/page,\d+/, '') + '/page,' + currPage;
  33.  
  34.     function getPagePath(pageNum) {
  35.         return pathname.replace(/page,\d+/, 'page,' + pageNum);
  36.     }
  37.  
  38.     function appendPageItems(pageNum) {
  39.         console.log('loading page: ', pageNum);
  40.         var msg = '';
  41.         $('<div>').load(getPagePath(pageNum) + ' #catalog_products', function(html, status) {
  42.             console.log('status: ', status);
  43.             if (status !== 'success') {
  44.                 requestNext = false;
  45.                 msg = 'Oops. There was an error while loading the next page items (page ' + pageNum + ').';
  46.                 console.error(msg);
  47.                 $('<div style="text-align:center; color:red">' + msg + '</div>').insertAfter('#catalog_products');
  48.                 $('div .catalog_browsing').show();
  49.             } else if (html.indexOf('class="no-results"') > -1) {
  50.                 console.log('not loaded: ', pageNum);
  51.                 msg = 'No more items :(';
  52.                 console.log(msg);
  53.                 $('<div style="text-align:center">' + msg + '</div>').insertAfter('#catalog_products');
  54.             } else {
  55.                 $('#catalog_products').append($(this));
  56.                 requestNext = true;
  57.                 console.log('loaded:', pageNum);
  58.             }
  59.  
  60.             $('.infinite-loading').hide();
  61.         });
  62.     }
  63.  
  64.     $('div .catalog_browsing').hide();
  65.     $(infiniteLoadingGif).insertBefore('div .catalog_browsing');
  66.     $('.infinite-loading').hide();
  67.  
  68.     $(window).scroll(function() {
  69.         if (requestNext && isScrolledIntoView(back_top)) {
  70.             $('.infinite-loading').show();
  71.             requestNext = false;
  72.             appendPageItems(++currPage);
  73.         }
  74.     });
  75. })();