tvguide/example/web/js/guide.js

Node module that auto-gets current (Dutch) tv show information

// Color definitions per channel
var channelColors = ['#fab9b6', '#bddcee', '#d2edbb', '#fcdbb7', '#feaea6', '#f9bfb2', '#fff3a6', '#fda9dc', '#adddf2', '#edc6d1', '#fcd3b5', '#a6a6a7', '#a6a6a7', '#fdf0b4', '#b4d2ee'];
var channelBorders  = ['#9c231f', '#2b6485', '#528528', '#a16220', '#a50f00', '#9c2e17', '#a69000', '#a10664', '#0d678e', '#853b4f', '#9f541d', '#000001', '#000001', '#a28b1a', '#195185'];

/* Guide object */
var guide = {
    /* Initialize the guide page */
    initGuide: function(channels, guide) {
        // HTML strings
        var now = '';
        var next = '';
        // Build the guide html elements
        for (var i = 0, size = channels.length; i < size; i++) {
            now += addShow('now', i);
            next += addShow('next', i);
        }
        $('#now').html(now);
        $('#next').html(next);

        // Add guide info with general function
        this.updateGuide(channels, guide);

        // Add click listeners
        $('.nowButton').on('tap', function () {
            var id = this.id.substr(3);
            var infobox = '#info' + id;
            var progressbox = '.now' + id + '.progress';
            // Add click effect
            fx.click(infobox, channelBorders[id]);
            fx.click(progressbox, channelBorders[id]);
            // Set channel
            client.setChannel(id);
        });
        $('.nextButton').on('tap', function () {
            var id = this.id.substr(4);
            client.queueChannel(id);
        });
        return;
    },

    /* Updates show information */
    updateGuide: function(channels, guide) {
        // Loop over channels to be updated
            for (var chan in channels) {
                var now = guide['now'][chan];
                var next = guide['next'][chan];
                // Loop over info fields
                for (var field in now) {
                    var nowField = '.now' + chan + '.' + field;
                    var nextField = '.next' + chan + '.' + field;
                    $(nowField).text(now[field]);
                    $(nextField).text(next[field]);
                }
            }
        return;
    },

    /* Updates progress bars */
    updateProgresses: function(progresses) {
        if (settings.progressEnabled) {
            var infoWidth = $('.info').width();
            var size = progresses.length;
            for (var i = 0; i < size; i++) {
                var selector = '.now' + i + '.progress';
                var progress = infoWidth - ((1 - progresses[i]) * infoWidth);
                $(selector).css('left', progress);
            }
        }
    }
}

/* Returns the HTML of a single guide show
 * @when now or next
 * @channel channel index
 */
function addShow(when, channel) {
    return Html.div('#now' + channel, '.show ' + when + 'Button',
        Html.img('.logo', '>img/ch' + channel + '.png'),
        Html.div('#info' + channel, '.info', '~background-color: ' + channelColors[channel] + '; border-top: 5px solid ' + channelBorders[channel] + '; border-bottom: 5px solid ' + channelBorders[channel],
            Html.span('.' + when + channel + ' progress'),
            Html.span('.' + when + channel + ' aangekondigde_titel'),
            Html.span('.' + when + channel + ' zendernaam'),
            Html.span('.' + when + channel + ' begintijd'),
            Html.span('.' + when + channel + ' eindtijd')
        )
    );
}