
var Vue = require('vue/dist/vue.js');
var shell = require('electron').shell;
var ipc = require('electron').ipcRenderer;
var DRIBBBLE_ACCESS_TOKEN = "7db78f5cb574b2309af3ea772628b42269c6bfb6767b88ba13f5294d5b9cbb8d";
var initialAPIURL = 'https://api.dribbble.com/v1/shots';
var nextPageURL = "";
var dribbbleJSON = {
  shotlist:[]
};
var nextPageURL;
var closeEl = document.querySelector('#close');
var scrollTimer = null;
var refreshTimer = null;
var refreshTimeout = 300000; // 5 minutes
var dataIsStale = false;


var vm = new Vue({
  el: "#shot-list",
  data: {shotlist: []},
  computed: {
    hidpiMode: function () {
      return true;
    }
  },
  methods: {
    openURL: function(url) {
      shell.openExternal(url);
    },
    resetState: function() {
      this.shotlist = [];
      requestDribbbleJSON(initialAPIURL);
    }
  },
  ready: requestDribbbleJSON(initialAPIURL)
});

var btn = new Vue({
  el: "#next-button",
  methods: {
    loadNextPage: function(event) {
      requestDribbbleJSON(nextPageURL);
    }
  }
});

var loadScreen = new Vue({
  el: "#load-screen",
  data: {
    display: true
  }
});

closeEl.addEventListener('click', function () {
    ipc.sendSync('close-main-window');
});

ipc.on("app-shown", function() {
  refreshAppData();
});

function refreshAppData() {
  if (refreshTimer) {
    clearTimeout(refreshTimer);
  }
  refreshTimer = setTimeout(setDataIsStale, refreshTimeout);

  if (dataIsStale) {
    resetAppState();
  }
}

function setDataIsStale() {
  dataIsStale = true;
}

function resetAppState() {
  loadScreen.display = true;
  refreshTimer = null;
  vm.resetState();
  document.body.scrollTop = 0;
  dataIsStale = false;
}

document.addEventListener('scroll', function () {
    if (scrollTimer) {
        clearTimeout(scrollTimer);   // clear any previous pending timer
    }
    scrollTimer = setTimeout(handleScroll, 500);   // set new timer
});

function reqListener () {
  var nextPageURLString = this.getResponseHeader('Link');
  nextPageURL = getNextURL(nextPageURLString);
  dribbbleJSON.shotlist = JSON.parse(this.responseText);
  loadScreen.display = false;
  for (var i = 0; i < dribbbleJSON.shotlist.length; i ++) {
    vm.shotlist.push(dribbbleJSON.shotlist[i]);
  }
}

function getNextURL(headerString) {
  var semicolonPos = headerString.search(';') - 1;
  var url =  headerString.substring(1, semicolonPos);
  return url;
}

function requestDribbbleJSON(url){
  var oReq = new XMLHttpRequest({});
  oReq.addEventListener("load", reqListener);
  oReq.open("GET", url);
  oReq.setRequestHeader('Authorization', 'Bearer ' + DRIBBBLE_ACCESS_TOKEN);
  oReq.send();
}

function handleScroll() {
    scrollTimer = null;
    var bodyHeight = document.body.scrollHeight;
    var windowHeight = window.innerHeight;
    var scrollPos = document.body.scrollTop;

    if ((bodyHeight - windowHeight - 200) < scrollPos) {
      btn.loadNextPage();
    }
}

@@ -508,16 +508,63 @@
  false;%0A
+var newPageCounter = 0;%0Avar MAX_NEW_PAGES = 4;%0A
 %0A%0Avar vm
@@ -828,16 +828,42 @@
 t = %5B%5D;%0A
+      newPageCounter = 0;%0A
       re
@@ -1007,24 +1007,24 @@
  methods: %7B%0A
-
     loadNext
@@ -1043,24 +1043,50 @@
 on(event) %7B%0A
+      newPageCounter = 0;%0A
       reques
@@ -2520,16 +2520,81 @@
 N(url)%7B%0A
+  if (newPageCounter %3C= MAX_NEW_PAGES) %7B%0A    newPageCounter++;%0A  
   var oR
@@ -2622,16 +2622,18 @@
 st(%7B%7D);%0A
+  
   oReq.a
@@ -2668,24 +2668,26 @@
 istener);%0A  
+ 
+ 
 oReq.open(%22G
@@ -2697,16 +2697,18 @@
 , url);%0A
+  
   oReq.s
@@ -2776,16 +2776,18 @@
 TOKEN);%0A
+  
   oReq.s
@@ -2793,16 +2793,20 @@
 send();%0A
+  %7D%0A
 %7D%0A%0Afunct
@@ -3055,25 +3055,39 @@
     
-btn.loadN
+requestDribbbleJSON(n
 extPage
-(
+URL
 );%0A 

Add support for pausing of infinite scrolling at certain intervals