viewer.html

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet' type='text/css'>

<div class="main-content"></div>


<script>

var fs = require('fs');
window.$ = window.jQuery = require('./jquery.js');
var viewer;

$(function(){
    // open links.txt and turn into array
    var links = fs.readFileSync('links.txt', 'utf8').split('\n').filter(function(l){ return (l !== ''); });
    // create new Viewer
    viewer = new Viewer(links);
});



// main object
var Viewer = function(links){
    this.links = links;
    this.$main = $('.main-content');
    this.setupKeys();
    this.linkIndex = 0;
    this.goToLink(0);
}

// left/right keyboard events
Viewer.prototype.setupKeys = function(){
    var that = this;
    $(document).keydown(function(e){
        if (e.keyCode == 37) { 
            that.prev();
            return false;
        }
        if (e.keyCode == 39) { 
            that.next();
            return false;
        }
    });
}


Viewer.prototype.next = function(){
    if (this.linkIndex < this.links.length-1) {
        this.linkIndex += 1;
        this.goToLink( this.linkIndex );
    }
}
Viewer.prototype.prev = function(){
    if (this.linkIndex > 0) {
        this.linkIndex -= 1;
        this.goToLink( this.linkIndex );
    }
}

Viewer.prototype.goToLink = function(index) {
    var links = this.links;
    var existing = this.$main.find(':not(.preloading)');
    // clear up any existing
    existing.removeClass('active');
    setTimeout(function(){
        existing.remove();
    },1000);

    if (links[index]) {
        if (this.isLink(links[index])) {
            this.goToUrl( links[index] );
        } else {
            this.showText( links[index] );
        }
    }
    if (links[index+1] && this.isLink(links[index+1])) {
        // preload
        this.preload(links[index+1]);
    }
}
Viewer.prototype.isLink = function(string) {
    return string.substring(0,4) === 'http';
}

Viewer.prototype.goToUrl = function(url) {

    var preloaded = $('.preloading[src="'+url+'"]');
    if (preloaded.length > 0) {
        preloaded.addClass('active')
        preloaded.removeClass('preloading');
    } else {
        this.$main.append( '<webview src="'+url+'" class="active" url="'+url+'"></webview>' );
    }
    
}

Viewer.prototype.preload = function(url){
    if ($('.preloading[src="'+url+'"]').length === 0) {
        this.$main.append( '<webview src="'+url+'" class="preloading" url="'+url+'"></webview>' );
    }
}

Viewer.prototype.showText = function(text) {
    this.$main.append( '<h2 class="active">'+text+'</h2>' );
}


</script>