Twitter iOS Puff

twitPuff.js

var twitPuff = (function () {
    function openPuff(imgUrl) {
        if (typeof imgUrl == undefined) {
            return;
        }
        $('#tw-puff-blanket').css({
            display: 'block',
            lineHeight: window.innerHeight + 'px'
        });
        $('#tw-puff-blanket').html('<img>');
        $('#tw-puff-blanket img').attr('src', imgUrl).load(function () {
            $('#tw-puff-blanket').addClass('blanket-on');
            $('#tw-puff-wrap').addClass('frame-puff');
        });
    }

    function closePuff() {
        $('#tw-puff-blanket').removeClass('blanket-on');
        $('#tw-puff-wrap').removeClass('frame-puff');
        setTimeout(function () {
            $('#tw-puff-blanket').css({
                display: 'none'
            }).html('');
        }, 300);
    }

    function listen(selector, target) {
        if(typeof selector == "string"){
            $(document).on('click', selector, function (e) {
                e.preventDefault();
                var url = (target=="image") ? $(this).find('img').attr('src') : $(this).attr('href');
                openPuff(url);
            });
        } else {
            $(selector).each(function(){
                $(this).on('click', function (e) {
                    e.preventDefault();
                    var url = (target=="image") ? $(this).find('img').attr('src') : $(this).attr('href');
                    openPuff(url);
                });
            });
        }
        
        $(document).on('click', '#tw-puff-blanket', function (e) {
            e.preventDefault();
            closePuff();
        });
    }

    function initialize(opts) {
        opts = $.extend({
            selector: 'a[rel="twitPuff"]',
            target: 'image',
            background: '#000',
            speed: '0.4s',
            easing: 'ease',
            startScale: '0.8',
            endScale: '1.2'
        }, opts);
        if ($('#tw-puff-wrap').length == 0) {
            $('body').wrapInner('<div id="tw-puff-wrap"></div>');
        }
        if ($('#tw-puff-blanket').length == 0) {
            $('body').append('<a id="tw-puff-blanket" href="#"></a>');
        }
        $('head').append('<style type="text/css">#tw-puff-wrap{-webkit-transition: all ' + opts.speed + ' ' + opts.easing + ';width:100%;height:100%;}#tw-puff-blanket{position:fixed;background:' + opts.background + ';top:0;left:0;right:0;bottom:0;opacity:0;display:none;text-decoration:none;}#tw-puff-blanket, #tw-puff-blanket img{-webkit-transition: all ' + opts.speed + ' ' + opts.easing + ';}#tw-puff-blanket img{width:100%;vertical-align:middle;-webkit-transform: scale(' + opts.startScale + ');}#tw-puff-blanket.blanket-on img{-webkit-transform: scale(1);}#tw-puff-wrap.frame-puff{opacity:0;-webkit-transform: scale(' + opts.endScale + ');}#tw-puff-blanket.blanket-on{opacity:1;}</style>');
        listen(opts.selector, opts.target);
    }
    return {
        init: initialize,
        open: openPuff,
        close: closePuff
    }
})();
twitPuff.init();