订阅组件

/*

* subscription
* by sunhw
*
* 参数:
*
* example:
* <a href="###" class="wor-rss tool-subscription" data-listid="1" data-listtit="{data.channel.title}" data-listpic="http://www.fun.tv/img/1.jpg" title="">订阅</a>
* .subscriptioned 为已订阅状态
* .subnum 为订阅数 <b class="subnum">12121</b>

* 订阅接口:
* http://api.fun.tv/ajax/subscribe/add/$id
* http://api.fun.tv/ajax/subscribe/cancel/$id

*/
T.dom.ready(function(){
var doc = doc || window.document;
var SubscribeAnimate = function( parent, channel ){
var dom = document.createElement("div");
var root = parent;
var sidebar = T.g("mod-sidebar");
this.start = function(){
if( !root ){
return;
}
if( !sidebar || !sidebar.instance ){
return;
}
var pos = T.dom.getPosition( root );
var targetPos = sidebar.instance.getSubscriptionPosition();
targetPos.left = 15;
if( channel != "channel"){
}else{
targetPos.top += 40;
}
T.dom.setStyle( dom, "left", pos.left );
T.dom.setStyle( dom, "top", pos.top);
document.body.appendChild( dom );
dom.className = "subscribe_ani z-act";
//ie6不支持
//dom.setAttribute("class", "subscribe_ani z-act");
F.load("widget.tween.Tweener", function(){
var tween = F.widget.tween.Tweener;
var duration = Math.floor(pos.left /2);
if( duration <= 300) duration = 300;
//直线动画不用了
var maxY = Math.min( targetPos.top, pos.top) - 100;
if( maxY <=0) {
maxY = 0;
}
F.parabola( {x:pos.left, y:pos.top}, { x:targetPos.left, y:targetPos.top }, maxY, {
duration:1000,
onTween:function(x, y){
dom.style.left = x +"px";
dom.style.top = y + "px";
},
onFinish:function(){
setTimeout(function(){
tween.add(dom, {
prop:"opacity", time:50, end:0, method : F.math.tweener.easeInCubic, onComplete:function(){
T.dom.remove(dom);
}
});
},10);
}
} );
return;
for(var i in targetPos){
tween.add(dom, {
prop : i,
time :duration,
end : targetPos[i],
method : F.math.tweener.easeInCubic,
onComplete : function(){
setTimeout(function(){
tween.add(dom, {
prop:"opacity", time:50, end:0, method : F.math.tweener.easeInCubic, onComplete:function(){
T.dom.remove(dom);
}
});
},10);
}
});
}
});
};
};
function changeDom(data, options){
var subTit = data.title || '';
var subLogSrc = data.logo || '';
var subNum = data.sub_num;
function changeStatus(ags){
var nodes = T.query(".tool-subscription");
var node = null;
for(var i=0;i<nodes.length;i++){
var node = nodes[i];
var id = node.getAttribute("data-id");
if(id != options.listid ){
continue;
}
if(ags.types == 'add'){
T.dom.addClass(node, 'subscriptioned');
}else{
T.dom.removeClass(node, 'subscriptioned');
}
node.innerHTML = ags.text;
T.setAttr(node, 'title', ags.text);
var subNumDom = T.query('.subnum', node.parentNode)[0];
if(subNumDom) subNumDom.innerHTML = subNum;
}
}
if( options.subtype == 'add'){
changeStatus({'text':'已订阅','types':'add'});
}else{
changeStatus({'text':'订阅','types':'cancel'});
}
}
function handler(element, c_l_id, channel){
if(!element || !c_l_id) return;
var isSubed = T.dom.hasClass(element, 'subscriptioned');
var subNumDom = T.query('.subnum', element.parentNode)[0];
var subNum = 0;
if( subNumDom ){
subNum = Number(subNumDom.innerHTML) || 0;
}else{
subNum = element.getAttribute("data-subnum") || 0;
}
var subscriber = new F.widget.subscription.Subscriber();
if(!isSubed){
subscriber.subscribe(c_l_id, channel , element, subNum );
}else{
subscriber.unSubscribe(c_l_id,channel, element, subNum );
}
}
//订阅上报 by zhaoning
function feedReport(data){
if(!data || !data.id || !data.type) return;
F.log.feed({
action : data.action,
mediatype : data.type == 'channel' ? data.id + '|' : '|' + data.id
});
}
//登录用户合并订阅 by sunhw
(function(){
//用户退出清除cookie
var deleCookie = function(){
var c = F.cookie.get('_subWindow');
if( c ){
F.cookie.del('_subWindow');
}
};
function Merge(){
this.init();
}
Merge.prototype.contrast = function(){
var me = this;
var bodyNode = T.query('body')[0];
var tpl = [
'<div class="sub-shade z-act" id="subShade"></div>',
'<div class="sub-window z-root" id="subWindow">',
'<p class="sub-txt">是否将本地订阅与观看历史同步至账号?</p>',
'<p class="sub-btns"><a href="javascript:;" id="subSubmit">同步</a><a href="javascript:;" id="subEsc">不同步</a></p>',
'<a href="javascript:;" class="sub-colse" id="subColseBtn" title="关闭">关闭</a>',
'</div>'
].join('');
T.dom.insertHTML(bodyNode, 'afterBegin', tpl);
me.bind();
};
Merge.prototype.bind = function(){
var me = this;
var subColseBtn = T.get('subColseBtn');
var subSubmit = T.get('subSubmit');
var subEsc = T.get('subEsc');
var subShade = T.get('subShade');
var subWindow = T.get('subWindow');
if(!subShade || !subWindow || !subColseBtn || !subSubmit || !subEsc){
return;
}
me.reset();
function remove(ev){
T.event.stop(T.event.get(ev));
T.dom.remove(subWindow);
T.dom.remove(subShade);
}
T.on(subColseBtn, 'click', function(e){
remove(e);
F.cookie.set('_subWindow', 1);
});
T.on(subSubmit, 'click', function(e){
F.get(F.config.api + '/ajax/sync_sub/sync/', function(json){
if( json && json.status == 200 ){
remove(e);
window.location.reload();
}else{
return;
}
});
});
T.on(subEsc, 'click', function(e){
remove(e);
F.cookie.set('_subWindow', 1);
});
T.on(window, 'resize', me.reset);
};
Merge.prototype.reset = function(){
var me = this;
var subShade = T.get('subShade');
var subWindow = T.get('subWindow');
var width = T.page.getWidth() + 'px';
var height = T.page.getHeight() + 'px';
var left = Math.ceil(T.page.getViewWidth() / 2) + 'px';
var top = Math.ceil(T.page.getViewHeight() / 2) + 'px';
T.dom.setStyle(subShade, 'width', width);
T.dom.setStyle(subShade, 'height', height);
T.dom.setStyle(subWindow, 'left', left);
T.dom.setStyle(subWindow, 'top', top);
};
Merge.prototype.init = function(){
var me = this;
var url = F.config.api + '/ajax/sync_sub/compare/';
if( F.tool.user.userid && ( F.cookie.get('_subWindow') != 1 ) ){
F.get(url, function(json){
if( json && json.status == 200 ){
if( json.data == true ){
me.contrast();
}
}else{
return;
}
});
}else{
return;
}
};
if(F.tool.user.userid){
var merge = new Merge();
}
F.logout.logoutHook(deleCookie);
})();
T.observer.add(F.EventCenter.SUBSCRIBE_ADD, function( evt ){
changeDom(evt, {"subtype":"add", "listid":evt.listid, "sub_num":evt.sub_num });
feedReport({action:1, id:evt.listid, type:evt.listtype});
if( evt.element ){
new SubscribeAnimate( evt.element, evt.listtype ).start();
}
});
T.observer.add(F.EventCenter.SUBSCRIBE_CANCEL, function( evt ){
changeDom(evt, {"subtype":"cancel", "listid":evt.listid, "sub_num":evt.sub_num });
feedReport({action:0, id:evt.listid, type:evt.listtype});
});
F.Event.delegate(doc, '.tool-subscription', 'click', function(e){
T.event.stop(T.event.get(e));
var attrId = T.getAttr(this, 'data-id');
var attrType = T.getAttr(this,'data-type');
handler(this, attrId, attrType );
});
F.Event.delegate(doc, '.tool-subscription', 'mouseover', function(e){
T.event.stop(T.event.get(e));
var element = this;
element.innerHTML = "";
});
F.Event.delegate(doc, '.tool-subscription', 'mouseout', function(e){
T.event.stop(T.event.get(e));
var element = this;
element.innerHTML = "";
});
});
原文地址:https://www.cnblogs.com/sunhw360/p/4139459.html