顶踩组件 前后两版

/*
 * digglist
 *  by sunhw 2014-8-14
 */
;
(function() {
    var map = {
        ding : { type : 'up', text : '已顶', cls : 'digglisted digglistUpEd' },
        cai  : { type : 'step', text : '已踩', cls : 'digglisted digglistStepEd' }
    };
    var $list = T.get( '_digglist' );
    if ( !$list ) {
        return;
    }
    // 顶踩动画
    function animate( text ) {
        var aniRun = T.get( 'aniRun' );
        aniRun.innerHTML = text;
        F.tween( T.get( 'aniRun' ), F.math.tweener.simple, 0.6, { top : -40 }, function() {
            T.dom.remove( aniRun );
        } );
    }

    // 顶踩处理函数
    function handler( $target ) {
        var type = T.dom.getAttr( $target, 'class' ), conf = map[ type ];
        if ( !conf ) { return; }
        T.dom.insertHTML( $target.parentNode, 'beforeEnd', '<div id="aniRun" class="animation"></div>' );
        sendRequest( type, function( json ) {
            (type == 'ding') ? animate( '+1' ) : animate( '-1' );
            T.dom.hide( $target );
            var $txt = T.query( 'b.txt', $target.parentNode )[ 0 ];
            $txt.innerHTML = conf.text;
            T.dom.show( $txt );
            T.dom.addClass( $target.parentNode.parentNode, conf.cls );
            updateStat( conf.type );
        } );
    }

    // 更新顶踩数
    function updateStat( type ) {
        var $dNum = T.query( '.sm-ding', $list )[ 0 ], dNum = parseInt( $dNum.innerHTML ) || 0;
        var $cNum = T.query( '.sm-cai', $list )[ 0 ], cNum = parseInt( $cNum.innerHTML ) || 0;
        var $pBar = T.query( '.bar', $list )[ 0 ];
        if ( type == 'up' ) {
            dNum++;
        } else {
            cNum++;
        }
        $dNum.innerHTML = dNum;
        $cNum.innerHTML = cNum;
        // 更新百分比
        T.dom.setStyle( $pBar, 'width', (dNum * 100 / (dNum + cNum)) + '%' );
    }

    // 检测用户登录态
    function checkLogin( callback ) {
        if ( !F.tool.user.userid ) {
            F.tool.ajaxLogin.panel();
        } else {
            callback && callback();
        }
    }

    // 发送顶踩请求
    function sendRequest( type, callback ) {
        if ( !map[ type ] ) { return; }
        var url = F.config.api + '/ajax/digg/' + map[ type ].type + '/' + T.dom.getAttr( $list, 'data-videoid' );
        F.get( url, function( json ) {
            if ( json.status == 403 ) {
                F.tool.ajaxLogin.panel();
            } else if ( json.status == 200 ) {
                callback && callback( json );
            }
        } );
    }

    function bindDiggEvent() {
        var $target = null;
        T.on( $list, 'click', function( ev ) {
            ev = T.event.get( ev );
            $target = ev.target;
            if ( $target.tagName == 'I' ) {
                checkLogin( function() {
                    handler( $target.parentNode );
                } );
            }
        } );
    }

    T.dom.ready( function() {
        bindDiggEvent();
    } );
})();

/*
 * digglist
 *  by sunhw 2014-8-14
 */
T.dom.ready( function() {
    (function() {
        var userid = F.user.userid || F.cookie.get( 'userid' );
        var actType = null;

        function handler( dBtns, cBtns, vid, dNum, cNum ) {
            T.each( dBtns, function( item, index ) {
                T.on( item, 'click', function( e ) {
                    T.event.stop( T.event.get( e ) );
                    actType = 'up';
                    bind( item, actType );
                } );
            } );
            T.each( cBtns, function( item, index ) {
                T.on( item, 'click', function( e ) {
                    T.event.stop( T.event.get( e ) );
                    actType = 'step';
                    bind( item, actType );
                } );
            } );
            function bind( ele, type ) {
                if ( !userid ) {
                    F.tool.ajaxLogin.panel();
                    T.observer.send( F.EventCenter.ERR_NO_LOGIN );
                } else {
                    var parentNode = ele.parentNode.parentNode;
                    if ( T.dom.hasClass( parentNode, 'digglisted' ) ) {
                        return;
                    }
                    var url = F.config.api + '/ajax/digg/' + type + '/' + vid;
                    var upNum = 0, downNum = 0;
                    T.dom.insertHTML( ele.parentNode, 'beforeEnd', '<div id="aniRun" class="animation"></div>' );
                    F.get( url, function( resp ) {
                        var json = T.json.parse( resp );
                        if ( !json || json.status != 200 ) {
                            return;
                        }
                        var data = json.data;

                        function animate( text ) {
                            var num = T.get( 'aniRun' );
                            num.innerHTML = text;
                            F.tween( T.get( 'aniRun' ), F.math.tweener.simple, 0.5, { top : -40 }, function() {
                                T.dom.remove( num );
                            } );
                        }

                        function upActionFun() {
                            T.dom.addClass( parentNode, 'digglisted digglistUpEd' );
                            animate( '+1' );
                            var eleNext = T.dom.next( ele );
                            if ( eleNext ) {
                                eleNext.innerHTML = '已顶';
                            }
                            T.each( cBtns, function( item ) {
                                item.innerHTML = '踩';
                            } );
                            T.each( dNum, function( item ) {
                                upNum = parseInt( item.innerHTML, 10 );
                                item.innerHTML = upNum + 1;
                                upNum = upNum + 1;
                            } );
                            downNum = parseInt( T.query( '.sm-cai' )[ 0 ].innerHTML, 10 );
                            T.dom.setStyle( T.query( '.probar .bar-ding' )[ 0 ], 'width', parseInt( 100 * (upNum / (upNum + downNum) ), 10 ) + '%' );
                            T.dom.setStyle( T.query( '.probar .bar-cai' )[ 0 ], 'width', parseInt( 100 - (100 * (upNum / (upNum + downNum))), 10 ) + '%' );
                        }

                        function downActionFun() {
                            T.dom.addClass( parentNode, 'digglisted digglistStepEd' );
                            animate( '-1' );
                            var eleNext = T.dom.next( ele );
                            if ( eleNext ) {
                                eleNext.innerHTML = '已踩';
                            }
                            T.each( dBtns, function( item ) {
                                item.innerHTML = '顶';
                            } );
                            T.each( cNum, function( item ) {
                                downNum = parseInt( item.innerHTML, 10 );
                                item.innerHTML = downNum + 1;
                                downNum = downNum + 1;
                            } );
                            upNum = parseInt( T.query( '.sm-ding' )[ 0 ].innerHTML, 10 );
                            T.dom.setStyle( T.query( '.probar .bar-cai' )[ 0 ], 'width', parseInt( 100 * (downNum / (upNum + downNum)), 10 ) + '%' );
                            T.dom.setStyle( T.query( '.probar .bar-ding' )[ 0 ], 'width', parseInt( 100 - (100 * (downNum / (upNum + downNum))), 10 ) + '%' );
                        }

                        if ( type === 'up' && ele.tagName === 'A' ) {//点击顶按钮
                            upActionFun();
                        } else if ( type === 'step' && ele.tagName === 'A' ) {//点击踩按钮
                            downActionFun();
                        }
                    } );
                }
            }
        }

        var diggTool = T.query( 'div.tool-digglist' );
        T.each( diggTool, function( item ) {
            var dingBtn = T.query( item.getAttribute( 'data-dingbtn' ), item );
            var caiBtn = T.query( item.getAttribute( 'data-caibtn' ), item );
            var dingNum = T.query( item.getAttribute( 'data-dingnumber' ), item );
            var caiNum = T.query( item.getAttribute( 'data-cainumber' ), item );
            var videoid = T.getAttr( item, 'data-videoid' );
            if ( !dingBtn || !caiBtn || !videoid ) {
                return;
            }
            handler( dingBtn, caiBtn, videoid, dingNum, caiNum );
        } );
    })();
} );