swapbox.js 3.46 KB
/*
 * Swap box
 * Change the fancybox innerContent with different click element.
 * Code by van at 2014.11.28
 */

define( 'swapbox', function( require, exports, module ){
    require( 'fancybox' );

    var swapbox = function( options ){
        this.o = {
            fancyLink: 'i-link',
            fancyInfo: 'data-info',
            fancyName: 'quality-frame',
            fancyData: [ "s-q-from","s-q-date","s-q-effect","s-q-img","s-q-name" ],
            contentTag: null,
            contentAttr: 'data-info',
            separator: /[,;\s]/,
            cancelButton: 'button',
			fatherName: 'qualify',
			galleryName: 'gallery'
        };

        this.o = $.extend( this.o, options );
        this.target = _combine( this.o.fancyLink );

        this.init();
    };

    swapbox.prototype = {
        init: function(){
            /*
             *  初始化
             */
            this.setfancy();
        },
        fancy: function(){
            /*
             *  链接弹框
             */
            var _this = this, aTags;

			aTags = _combine( this.o.fatherName ).find( ".i-link" )

            this.target.fancybox({
                padding: 0,
				openEffect	: 'none',
				closeEffect	: 'none',
                afterLoad: function( current ){
                    _this.changeInfo( aTags.eq( current.index ) );
                }
			});

            //若存在button按钮,则为fancybox弹出框中button按钮绑定关闭事件
            if ( this.o.cancelButton === null ){ return false; }
            _combine( this.o.fancyName ).find( this.o.cancelButton ).bind({
                click: function(){
                    $.fancybox.close();
                }
            })
        },
        setfancy: function(){
            /*
             *  设置点击标签href属性指向弹框
             */
			this.target.attr({
				href : "#"+ this.o.fancyName,
				rel  : this.o.galleryName
			})
			
            this.fancy();
        },
        changeInfo: function( target, index ){
            /*
             *  修改弹框内容
             */
            var data = [],
                ct = this.o.contentTag,
                ca = this.o.contentAttr,
                sepa = this.o.separator;

            if ( this.o.contentTag != null ){
                for ( var i = 0, l = ct.length; i< l; i++ )
                {
                    var tag = $(target).find( ct[i] );
                    if ( tag.is("img") ){
                        data.push( tag.attr("src") );
                    }else {
                        data = tag.attr( ca ).split( sepa );
                        data.push(
                            tag.html().replace(/^[\s\t\n\r]+/," ")
                        );
                    };
                };
            }else {
                data = $( target ).attr( this.o.contentAttr )
                                    .split( this.o.separator );
            };

            for ( var i = 0, l = this.o.fancyData.length; i< l; i++ )
            {
                if ( _combine( this.o.fancyData[i] ).is("img") ){
                    _combine( this.o.fancyData[i] ).attr( "src", data[i] );
                    continue;
                }
                _combine( this.o.fancyData[i] ).html( data[i] );
            }
        }
    };

    //返回加工的类名或者ID的Jquery对象
    //优先返回类名Jquery对象
    function _combine( name, onlyClass ){
        return $( "."+ name ).length > 0 ? $("."+ name) : $("#"+ name);
    };

    return swapbox;
} );