顶踩组件 前后两版

/*
* 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 );
} );
})();
} );
原文地址:https://www.cnblogs.com/sunhw360/p/4139480.html