百度阿拉丁礼物页面

/*
* Author:李彦峰
* Date:2015-12-20
* 调调
*/
"use strict";
;(function(document,undefined){
    /*
        原生ajax函数。用法与jquery ajax一致。
        author:pod4g
    */
    // 图像占位
    var placeholderImg = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAC9ASIDASIAAhEBAxEB/8QAGwABAQADAQEBAAAAAAAAAAAAAAYBAgQFAwn/2gAIAQEAAAAA/QUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcegHeAAAAEb7GweDabAAAACWqQS9NsAAAAJapOCdsZenyAAAAJb1ZWsgOSs6KfIAAAAlpT4a7YUttkAAAARW4OS8yAAAAGQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB//xAAXAQEBAQEAAAAAAAAAAAAAAAAAAgED/9oACAECEAAAAAAAAAAAAAAAAAAUJAAKmkgAHTWcwAChIAAAAAAAAAAAAAP/xAAXAQEBAQEAAAAAAAAAAAAAAAAAAQID/9oACAEDEAAAAAAAAAAAAAAAAAAQUAAligAGcZ6bAAIKAAAAAAAAAAAAAD//xAA9EAABAQUCCAsHBAMAAAAAAAABAgADBAURMVEGFSEiQZGTsRIWMkBTVFZhcZLSEBQ0NnJzoYCBwfATIDP/2gAIAQEAAT8A/Rs9nMDDvVOnsW5Q8SaKSpVCPFsfy3rzjzhsfy3rzjzhsfy3rzjzhsfy3rzjzhsfy3rzjzhsfy3rzjzhsfy3rzjzhgoEVGnLz1zLnEywumLqKQVIFVCiiMuTTXvbidLOgebQtxOlnQvNoW4nSzoXm0LcTpZ0LzaFuJ0s6F5tC3E6WdC82hbCySQkrhYdcM7UhS3hSSVk1FK6WdjMT4AfjnhsaU/Osy8Fbw1P9sPfgoP7p3M75CPpG7nhsaU/Osy+lW9PsJFujVq9k5m7qTwherPCeKqlDvSo3eHf/LSvDV8qLCI0O/8ACo04SEkcDvOXKPyySFCoNRbUWEXi/c2H3wUJ907md8hPh/HPDY0p+dJl9Kt6Wns9dyaHsC4heRDuusm4b7O9oHDGOcRQW/X7w6JzkUAIF4NLWe4RQLuB96D9K0EVSgcom6mg/wBq0zmL2axa3745TUIQDkSNAH9ytlIbBHCHgFEDErzbHK1GzuJu3FsPfgoQGv8A2I/GlnfIT4Ddzw2NKPnWY/SrelphEvIqNfPHrzhrKjUnQKkADubJeGqLa/u1aWENwu/8NWhqFULT5+uKwZlL14ovFqUSom0mh/ZnfIT4Ddz17FxUpwmjop1BriAslKRwSARkyggdzGerJqcH3dftn0tj1fZ53sz6Wx4rs872Z9LY9X2ed7M+lseK7PO9mfS2PV9nnezPpaczCKm0M5cCWLh0OlFSQlJIspSlGd8gC4Ddz2ppSppc2dedZbOvOstnXnWWzrzrLZ151ls686y2W86/0cf/xAAdEQADAAICAwAAAAAAAAAAAAAAAREQQAJgEjFB/9oACAECAQE/AOpxERERaDxDj70JRpY+6FKys8uq/wD/xAAbEQEBAQADAQEAAAAAAAAAAAABEQAxQGAQIf/aAAgBAwEBPwDyddXVyvQOPlDPHQsMLv3CpOhNHR08r//Z";
    // 一次加载12条数据
    var LOAD_COUNT = 12;
    // var intersectArray = [];
    var imgUrlPrev = '';
    /*存储原生工具方法 start*/
    var arrayPrototype = Array.prototype;
    var forEach = arrayPrototype.forEach;
    var ElementPrototype = HTMLElement.prototype;
    /*存储原生工具方法 end*/
    /* 扩展原生Node方法 start */
    ElementPrototype.hasClass = function(cls){
        return this.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }
    ElementPrototype.addClass = function(cls){
        if (!this.hasClass(cls)){
             this.className += " " + cls;
        }
    }
    ElementPrototype.removeClass = function(cls){
        if (this.hasClass(cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            this.className = this.className.replace(reg, ' ');
        }
    }
     ElementPrototype.toggleClass = function(cls){
        if(this.hasClass(cls)){
            this.removeClass(cls);
        }else{
            this.addClass(cls);
        }
     }
     ElementPrototype.css = function(key,value){
        if(arguments.length == 2){
            this.style[key] = value;
        }else if(typeof key === 'object'){
            var cssText = '';
            for(var attr in key){
                cssText += attr + ":" + key[attr]+";";
            }
            this.style.cssText = cssText;
        }
     }
     /*
        html gsetter 方法
     */
     ElementPrototype.html = function(val){
        if(val){
            this.innerHTML = val;
        }else{
            return this.innerHTML;
        }
     }
     function getById(id){
        return document.getElementById(id);
     }
     function getByClass(className,context){
        return (context || document).getElementsByClassName(className);
     }
     function getByTag(tagName,context){
        return (context || document).getElementsByTagName(tagName);
     }
     /* 扩展原生Node方法 end */
     /*
      生成卡片HTML结构
     */
     function getCardHTMLString(shortId,nail,isPrev){
        var className = '',imgSrc,article = data.m[shortId];
        if(nail){
            className = 'class="'+nail+'"';
        }
        // http://a.diaox2.com/cms/sites/default/files/
        imgSrc = placeholderImg;
        if(isPrev){
            imgSrc = 'http://a.diaox2.com/cms/sites/default/files/'+ article.p;
        }
        return '<li '+className+' data-id="'+shortId+'"><a href="http://c.diaox2.com/aladin/'+(4294967296 * shortId + (+shortId))+'.html" media="handheld"><figure><img src="'+imgSrc+'"><figcaption><h3>'+article.t+'</h3></figcaption></figure></a></li>';
     }

     function htmlWork(arr){
        var li = '',nail = 'nail';
        arr.forEach(function(article,index){
            var isPrev = false;
            if(index < LOAD_COUNT){
                isPrev = true;
            }
            if(index !== 0 && index % LOAD_COUNT === 0){
                li += getCardHTMLString(article,nail,isPrev);
            }else{
                li += getCardHTMLString(article,'',isPrev);
            }
        })
        getById('article-list').html(li);
     }
     
     /*
        数组乱序
     */
     function shuffle(o){
        for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
     }
     function a(list, m) {
        //list 求交集来的list，或者是单个tag的list
        var sep, spos, output = [];
        list.forEach(function(item,i){
            if(sep == undefined) {
                sep = m[item].w;
                spos = i;
                return;
            } else {
                if(m[item].w == sep) {
                    return;   //同上一个值
                } else {
                    output = output.concat(shuffle(list.slice(spos, i)));
                    sep = m[item].w;
                    spos = i;
                }
            }
        })
        return output;
    }

     /*
        求交集。
        若其中一个参数为空数组，则返回另一个非空数组
     */
     /*
        每次求交之后更新 intersectArray 的值，供懒加载使用
     */
     function intersect(arr1,arr2){
        var ret = [],m = data.m;
        if(arr1 == undefined && arr2 == undefined){
            return ret;
        }
        // 如果arr1为空数组或null，返回arr2
        if(arr1 == undefined || arr1.length === 0){
            // 无论如何都保证intersectArray最新
            // intersectArray =  arr2;
            return a(arr2,m);
        }
        // 如果arr2为空数组或null，返回arr1
        if(arr2 == undefined || arr2.length == 0){
            // intersectArray =  arr1;
            return a(arr1,m);
        }

        // intersectArray = 
        ret = arr1.filter(function(item){
            return arr2.indexOf(item) !== -1;
        })
        // console.log('交集-----------------------------------------------');
        // console.log('第一个数组长度:%d',arr1.length);
        // console.log('第二个数组长度:%d',arr2.length);
        // console.log('交集长度:%d',ret.length);
        // console.log('\n')

        // 求完交集之后在这儿需要shuffle
        return a(ret,data.m);
     }

     /*
        解析URL，返回参数
     */
     function parseURL(){
        /*
            giveingObject：送礼对象
            scene：适用节日
        */
        var hash = location.hash,
            tagList = null,
            ret = {},
            map,
            giveingObjectTagList,
            sceneTagList;
        if(hash){
            hash = decodeURI(hash).replace('#','');
            tagList = hash.split("_");
         // 如果格式不符合要求，直接返回
         if(!tagList.length){
            return ret;
         }

         map = arrayPrototype.map;
         giveingObjectTagList = map.call(getByTag('li',getById('left-menu')),function(li){
            return li.html();
         })
         sceneTagList = map.call(getByTag('li',getById('right-menu')),function(li){
            return li.html();
         })

         var giveingObjectVal;
         var sceneVal;
         tagList.forEach(function(tag){
            giveingObjectTagList.forEach(function(giveingObjectTag){
                if(giveingObjectTag.indexOf(tag) !== -1){
                    giveingObjectVal = giveingObjectTag;
                }
            })
            sceneTagList.forEach(function(sceneTag){
                if(sceneTag.indexOf(tag) !== -1){
                    sceneVal = sceneTag;
                }
            })
         })
         ret.giveingObject = giveingObjectVal;
         ret.scene = sceneVal;
        }
        // ret = {
        //     giveingObject:'老婆女友',
        //     scene:'生日'
        // }
        return ret;
     }
     function change(key){
        var map = {
            "老婆女友":"女友",
            "老公男友":"男友",
            "春节回家":"春节",
            "过年回家":"春节"
        }
        return map[key] == undefined ? key : map[key];
     }
     /*
        根据参数，来触发相应的tab和menuList的active状态
     */
     function triggerSelect(argObj){
        var giveingObject = argObj.giveingObject,
            scene = argObj.scene,menu,select,
            giveObjectIdList = [],
            sceneIdList = [],
            inter;
        // 如果没有参数，直接返回
        if(!giveingObject && !scene){
            return;
        }

        /* 1 找出该触发select的元素 */

        menu = getByTag('menu')[0],

        select = function(arg){
            var 
                toCompare = arg.giveingObject,
                name = arg.giveingObject,
                elementList;
            if(arg.scene){
                elementList = getByTag('li',getById('right-menu'));
                toCompare = arg.scene;
                name = arg.scene;
            }else{
                elementList = getByTag('li',getById('left-menu'));
            }
            forEach.call(elementList,function(li){
                if(li.html() === toCompare || li.html().indexOf(toCompare) !== -1){
                    li.click();
                    return;
                }
            });
            // 默认是折叠状态
            // getById('left-menu-tab').addClass('rotate');
            // getById('right-menu-tab').addClass('rotate');
            // getById('article').addClass('up');
            // 返回当前被选中tag的对应的id的集合
            return data[name];
        }
        if(giveingObject){
            giveObjectIdList = select({giveingObject:change(giveingObject)});
        }
        if(scene){
            sceneIdList = select({scene:change(scene)});
        }
        inter = intersect(giveObjectIdList,sceneIdList);
        if(!inter || !inter.length){
            noresult();
        }else{
          hasresult();
          // 更新DOM
          htmlWork(inter);
        }

     }
     /*
        判断2个数组是否相等
        [] == [] 
        [1,2] == [2,1]
     */
     function arrayEqual(arr,arr2){
        if(arr == undefined || arr2 == undefined ){
            return false;
        }
        if(arr.length == 0 && arr2.length == 0){
            return true;
        }
        if(arr === arr2){
            return true;
        }else{
            if(arr.length === arr2.length){
                var ret = [];
                var ret = arr.filter(function(item,index){
                    // return item !== arr2[index];
                    return arr2.indexOf(item) === -1;
                })
                if(ret.length === 0){
                    return true;
                }else{
                    return false;
                }

            }else{
                return false;
            }
        }
     }
     function defaultUpdateDOM(){
        var all = [],shortId;
        for(shortId in data.m){
            all.push(shortId);
        }
        changeHash();
        // 不管怎样都要保证intersectArray是最新的
        // intersectArray = all;
        htmlWork(all);
     }
     function noresult(){
        var articleList = getById('article-list');
        articleList.parentNode.dataset.flag = "hidden";
        articleList.html('<p class="no-result">没有结果 换个筛选条件试试~</p>')
        // noresultEle = articleList.firstElementChild;
        /*
            (viwePortHeight - headerHeight - articleMarginTop - noresultEleHeight)/2
        */
        // noresultEle.style.cssText = "margin:"+(document.documentElement.clientHeight - getById('left-menu-tab').offsetHeight - parseInt(getComputedStyle(articleList.parentNode,null).marginTop) - noresultEle.offsetHeight)/2+"px 0";
     }
     function hasresult(){
        getById('article').dataset.flag = "";
     }
     function changeHash(tagList){
        var value = '';
        if(!tagList || !tagList.length){
            location.hash = "";
            return;
        }
        if(tagList.length === 1){
            value = encodeURI(tagList[0]);
        }else{
            value = encodeURI(tagList[0]) + "_" +encodeURI(tagList[1]);
        }
        location.hash = value;
     }
     var oldTagList;
     function intersectAndUpdateDOM(){
        var menu = getByTag('menu')[0],
            selectMenu = getByClass('select-menu',menu),
            newTagList = [],
            l = selectMenu.length,inter;
        if(l == 0){
            defaultUpdateDOM(newTagList);
            return;
        }
        if(l  == 1){
            newTagList.push(selectMenu[0].html());
        }else{
            newTagList.push(selectMenu[0].html());
            newTagList.push(selectMenu[1].html());
        }
        if(arrayEqual(newTagList,oldTagList)){
            return;
        }
        changeHash(newTagList);

        inter = getMetaListByTagArray(newTagList);
        if(!inter || !inter.length){
            noresult();
        }else{
          hasresult();
          htmlWork(inter);
        }
        oldTagList = newTagList;
     }
     function getMetaListByTagArray(newTagList){
        return newTagList.length === 1 ? intersect(data[change(newTagList[0])]) : intersect(data[change(newTagList[0])],data[change(newTagList[1])]);
     }
    /*

    */
    document.addEventListener('DOMContentLoaded',function(){
        // 选出tab和menuList的容器 menu
        var menu = getByTag('menu')[0],
            // 选出所有tab
            tabList = getByClass('tab',menu),
            selectTabClassName = "select-tab",
            selectMenuClassName = "select-menu",
            url = "http://c.diaox2.com/aladin/",
            // 记录原始的title，供后续使用
            leftMenuTitle = getById("left-menu-tab").firstElementChild.firstChild.nodeValue,
            rightMenuTitle = getById("right-menu-tab").firstElementChild.firstChild.nodeValue,
            articleList = getById('article-list'),
            viewportHeight = document.documentElement.clientHeight,
            argObj,flag = true,attr;
        /*
            循环给每个tab添加点击事件
        */
        forEach.call(tabList,function(tab,index){
            tab.onclick = function(){
                var menuListContainer = getById(this.id.replace('-tab',''));
                // 点击的是已经被选中的tab
                if(this.hasClass(selectTabClassName)){
                    this.firstElementChild.firstElementChild.toggleClass('rotate');
                    getById('article').toggleClass('up');
                }else{// 点击的是为被选中的tab
                    // 选出被选中的tab
                    var selectTab = getByClass(selectTabClassName,menu)[0],
                    // 获取被选中的tab对应的 menuList Id
                        selectMunuListContainer = getById(selectTab.id.replace('-tab',''));
                    // 取消被选中的tab的选中状态
                    selectTab.removeClass(selectTabClassName);
                    selectTab.firstElementChild.firstElementChild.addClass('rotate');
                    // 给当前被点击的tab添加选中状态
                    this.addClass(selectTabClassName);
                    // 显示当前选中的tab对应的 menuList
                    menuListContainer.css('display','block');
                    // 保证被选中的tab对应的menuList是展开状态
                    this.firstElementChild.firstElementChild.removeClass('rotate'); 
                    getById('article').removeClass('up');
                    // 隐藏上一次被选中的tab对应的 menuList
                    selectMunuListContainer.css('display','none');
                }
            }
        })
        /*
            menuList中的li的点击事件
        */
        forEach.call(getByClass('menu',menu),function(menuListContainer){
            menuListContainer.onclick = function(e){
                var target = e.target,oldSelectMenu,tab;
                if(target.tagName.toUpperCase() === "LI"){
                    // 查询当前container中已经被选中的menu
                    oldSelectMenu = getByClass(selectMenuClassName,this)[0];
                    // 去掉已经被选中menu的选中状态
                    if(oldSelectMenu){
                      console.log();
                      oldSelectMenu.removeClass(selectMenuClassName);
                    }
                    // 给被点击的menu添加选中状态
                    target.addClass(selectMenuClassName);
                    // 更新tab title
                    tab = getById(this.id+"-tab").firstElementChild;
                    tab.firstChild.nodeValue = target.html();
                    // 选择完tag之后，折叠面板
                    tab.firstElementChild.addClass('rotate');
                    getById('article').addClass('up');
                    intersectAndUpdateDOM();
                }
            }
        })
        /*
            清除所有条件的点击事件
        */
        forEach.call(getByClass('clear',menu),function(clear){
            clear.onclick = function(){
                // 找出当前clear对应的menuList
                var menuList = clear.parentNode,
                    menuListContainer = menuList.parentNode,
                // 在当前menuList中找到被选中的menu
                    selectMenu = getByClass(selectMenuClassName,menuList)[0];
                if(!selectMenu){
                    // 如果已经清除了筛选条件，直接返回
                    return;
                }
                // 清除被选中menu的选中状态
                selectMenu.removeClass(selectMenuClassName);
                var tab = getById(menuList.parentNode.id+"-tab").firstElementChild;
                if(menuListContainer.hasClass("left-menu")){
                    tab.firstChild.nodeValue = leftMenuTitle;
                }else{
                    tab.firstChild.nodeValue = rightMenuTitle;
                }
                tab.firstElementChild.addClass('rotate');
                getById('article').addClass('up');
                intersectAndUpdateDOM();
            }
        })


        /*
            根据参数
            1、触发select
            2、根据select，求交集，发送ajax
            3、无参数或参数不符合要求，发送ajax取默认json
        */
        // 获取参数
        argObj = parseURL();
        if(argObj){
            flag = true;
            for(attr in argObj){
                if(argObj[attr] != undefined){
                    flag = false;
                    break;
                }
            }
            // 如果没有一个参数，就执行默认的
            if(flag){
                defaultUpdateDOM();
            }

        }
        // 触发select
        triggerSelect(argObj);

        /*
            惰性加载
        */
        // 3007 2377
        setInterval(function(){
            var 
                /*
                    把articleArray 放入定时器内部，
                    保证每次都是拿到最新的li集合，
                    如果放到定时器外部，如果切换了tag，但是articleArray其实并没有更新，
                    所以切换一下tag，在下拉，就不会懒加载了。。事实上永远加载不了。。
                    因为start永远为-1
                */
                articleArray = arrayPrototype.slice.call(articleList.children),
                nail = getByClass('nail',articleList)[0],
                start = articleArray.indexOf(nail),
                end = start + LOAD_COUNT;
            if(!nail){
                return;
            }
            if((document.body.scrollTop || document.documentElement.scrollTop) + viewportHeight >= nail.offsetTop){
                articleArray.slice(start,end).forEach(function(item,index){
                    getByTag('img',item)[0].src = 
                    'http://a.diaox2.com/cms/sites/default/files/'+data.m[item.dataset.id].p;
                });
                nail.removeClass('nail');
            }
        },60)
    },false)
})(document)