coliberator/2013/js/main.js

window._coliberatorURL = 'http://localhost/coliberator/';

window.Coliberator = {
    data: {},
    templates: {
        speaker: function (data){
            return '<li data-id="'+data.id+'" class="participant-item"><a href="#" class="participant" title="Click for more details"><img src="'+data.imageURL+'" alt="'+data.name+'"/><span class="participant-details">'+data.name+'</span></a></li>';
        },
        speakerDescription: function (data){
            var presentations = '<div class="presentations"><span class="category">Speaks about:</span><ul>',
            i, l, v;
            for (i = 0, l = data.presentations.length; i < l; i ++) {
                v = data.presentations[i];
                presentations += '<li>' + v.title + '</li>';
            }
            presentations += '</ul></div>';
            return '<div class="pop-up"><div class="details"><img src="'+data.imageURL+'" alt="'+data.name+'"/><h2>'+data.name+'</h2><span class="description">'+data.description+'</span>'+presentations+'<button class="close-btn" title="Close the description panel"></button></div></div>';
        },
        presentation: function (data){
            return '<li><span class="when">'+data.when+'</span><span class="title">'+data.title+'</span><span class="details"> de '+data.name+'</span><p>'+data.description+'</p></li>';
        }
    },
    build: {
        presentations: function (data) {
            var el = $('#presentations'),
            i, l, v = '';
            for (i = 0, l = data.length; i < l; i ++) {
                v += Coliberator.templates.presentation(data[i]);
            }
            el.append(v);
            el.on('click','li', Coliberator.build.showPresentationDescription);
        },
        speakers: function (data) {
            var el = $('#speakers'),
            i, l, v = '';
            for (i = 0, l = data.length; i < l; i ++) {
                v += Coliberator.templates.speaker(data[i]);
            }
            el.append(v);
            el.on('click','li', Coliberator.build.speakerDescription);
        },
        speakerDescription: function (ev) {
            var $this = $(this),
            data,
            $descrEl,
            closeFunction = function () {
                var $el = $(this);
                $el.animate({
                    top: '100%'
                },'fast', function() {
                    $el.parent().remove();
                    $el.remove();
                    $el.blur();
                    $this.focus();
                    $('body').off();
                });
            };

            $this.blur();

            ev.preventDefault();

            data = Coliberator.data.speakers[$this.data('id')];
            $descrEl = $(Coliberator.templates.speakerDescription(data));
            // ... event participants .append
            $('body').prepend($descrEl);

            var $details = $descrEl.find('.details').animate({
                top: '25%'
            },'fast').on('click','.close-btn', function(){
                $el = $(this.parentElement);
                closeFunction.call($details);
            });
            $('body').keypress(function(e){
                // bind escape to the close modal functionality
                if (e.keyCode == 27) {
                    closeFunction.call($details);
                }
            });

            // set focus on the close button: fixes a bug where you could press
            // enter multiple times on participant and helps ux
            $details.find('.close-btn').focus();

        },
        showPresentationDescription: function (ev) {
            var $this = $(this),
            data,
            $descrEl;

            ev.preventDefault();

            $this.find('p').stop().slideToggle();
        }
    }
}
$(document).ready(function() {
    Coliberator.build.speakers(Coliberator.data.speakers);
    Coliberator.build.presentations(Coliberator.data.presentations);
    $('.header-container').on('click','a',function (){
        //scrollTop: $(this).offset().top + 'px'
        var el = $($(this).attr('href')), top;
        if (el.length) {
            top = el.offset().top - $('.header-container').outerHeight();
        } else {
            top = 0;
        }
        $('body').animate({
            scrollTop: top + 'px'
        }, 'fast');
    });
});