shoebox js

shoebox.js

/*
SHOEBOX v4.0

*/


// SHIMS
////////
if (typeof(log) === 'undefined') {
    function log(s) {
        try { console.log(s); } catch (e) {}
    }
}

if (!Array.prototype.indexOf){
  Array.prototype.indexOf = function(elt /*, from*/){
    var len = this.length >>> 0;

    var from = Number(arguments[1]) || 0;
    from = (from < 0) ? Math.ceil(from) : Math.floor(from);
    if (from < 0){
      from += len;
    }

    for (; from < len; from++){
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}


var ShoeBox = function(){

    // SETUP
    ////////
    var overlay = $('<div id="shoebox_overlay" />');
    $('body').prepend(overlay);


    // MASTER SWITCH
    ////////////////

    var animSpeed = 200;

    var enable = function(){
        overlay.addClass('active');
        overlay.fadeIn(animSpeed);
    };

    var disable = function(){
        overlay.removeClass('active');
        overlay.html(''); // Clear contents, stop media from playing
        overlay.fadeOut(animSpeed);
    };

    var toggle = function(){
        overlay.toggleClass('active');
        overlay.fadeToggle(animSpeed);
    };

    // SWITCHERS
    ////////////

    var load_by_index = function(event){
        var btn = $(event.currentTarget);
        var index = btn.attr('data-next');
        var element = get_element_by_index(index);
        var panel = build_panel(element, 'default');
        $(overlay).html('');
        $(overlay).append(panel);
        return false;
    };


    // WHERE ARE WE?
    ////////////////
    var _build_index = function(){
        
        var all = $('[data-shoebox]');

        // Unique
        unique_boxes = [];
        for (var i = 0; i <= all.length - 1; i++) {
            if ($(all[i - 1]).attr('href') != $(all[i]).attr('href')) {
                unique_boxes.push($(all[i]).attr('href'));
            }
        }

        return unique_boxes;
    };

    var get_bearings = function(element){
        element = $(element);
        unique_boxes = _build_index();
        var index = unique_boxes.indexOf(element.attr('href'));
        next = index + 1;
        if (index === unique_boxes.length - 1) { next = 0; }
        previous = index - 1;
        if (index === 0) { previous = unique_boxes.length -1; }

        if (unique_boxes.length === 1){
            next = false;
            previous = false;
        }

        return {
            'next': next,
            'previous': previous,
            'index': index
        };
    };


    var get_element_by_index = function(number){
        unique_boxes = _build_index();
        ours = unique_boxes[number];
        element = $('[data-shoebox][href="'+ours+'"]')[0];
        return element;
    };


    // DOM HANDLERS
    ///////////////

    var build_context = function(element){
        element = $(element);

        bearings = get_bearings(element);
        var context = {
            'caption': element.attr('data-caption'),
            'template': element.attr('data-template'),
            'vimeo_id': element.attr('data-vimeo-id'),
            'youtube_id': element.attr('data-youtube-id'),
            'meta': element.attr('data-metadata'),
            'title': element.attr('data-title'),
            'href': element.attr('href'),
            'next': bearings['next'],
            'previous': bearings['previous']
        };

        return context;
    };

    var build_panel = function(element, position){
        element = $(element);
        var context = build_context(element);
        var template = SBTemplates[context.template];
        var html = render(template, context);
        
        overlay.html('');

        html = [
            '<div class="panel template-'+ context.template + ' ' + position +' ">',
               html,
            '</div>'
        ].join('');

        return html;
    };


    // EVENT HANDLERS
    /////////////////

    var closeBgHandler = $('body').on("click", "#shoebox_overlay", function(event){
        // Ignore any bubbled events, we only want direct clicks
        if (event.target.id !== 'shoebox_overlay') {
            return true;
        }
        disable();
        return false;
    });

    var KeyHandler = function(e){
        if ($('#shoebox_overlay').is(':visible') === true) {
        switch (e.keyCode) {
            case 37: // left
                $('#shoebox_overlay .btn-previous').click();
                break;
            case 39: //right
                $('#shoebox_overlay .btn-next').click();
                break;
            case 27: // esc
                disable(); // Trigger a close
                break;
            default:
                break; // Makes lint happy
                }
        }
    };

    if ($.browser.mozilla) {
        $(document).keypress (KeyHandler);
    } else {
        $(document).keydown (KeyHandler);
    }

    var loadHandler = $('body').on('click', '[data-shoebox]', function(event){
        var element = $(event.currentTarget);
        var panel = build_panel(element, 'default');
        enable();
        $(overlay).append(panel);
        return false;
    });

    var nextBtnHandler = $('body').on('click', '#shoebox_overlay [href="#next"]', function(event){
        load_by_index(event);
    });

    var previousBtnHandler = $('body').on('click', '#shoebox_overlay [href="#previous"]', function(event){
        load_by_index(event);
    });

    var closeBtnHandler = $('body').on('click', '#shoebox_overlay [href="#close"]', function(event){
        disable();
    });


    return {
        'overlay': overlay,
        'enable': enable,
        'disable': disable,
        'toggle': toggle,
        'get_bearings': get_bearings
    };
}();