订阅

/*

 *    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 = "";
    });
});

posted @ 2014-12-03 12:37  sunhw360  阅读(190)  评论(0)    收藏  举报