JS原生

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/aojianmo2012/article/details/55190424

require.config({
    "baseUrl" : "http://www.yueloo.com/app/Bundle/3gBundle/UserCenter/avatar/"
});
require([ "js/Config" ], function(Config)
{
    "use strict"
    function avatarInit()
    {
        // 加載圖片庫容器
        var AvatarManager = document.querySelector("#AvatarManager");
        Config.avatar.defaultAvatar = AvatarManager.src;
        if (!document.querySelector(".avatarWrap")) {
            var div = document.createElement("div");
            div.setAttribute("class", "avatarWrap");
            div.innerHTML = document.querySelector('#AvatarLibListTemplate').innerHTML;
            AvatarManager.parentNode.appendChild(div);
        }
        // 隱藏退出賬戶按鈕，防止用戶選錯
        var logout = document.querySelector(".userinfo .tui");
        logout.style.display = "none";
    }
    /**
     * 插入圖片
     */
    function insertImage(data)
    {
        for ( var i in data) {
            if (typeof (data[i]) == "object") {
                var img = document.createElement("img");
                img.src = data[i].src;
                img.setAttribute("data-id", data[i].id);
                if (!document.querySelector("img[data-id=\"" + data[i].id + "\"]")) {
                    document.querySelector(".avatarWrap .ImgLibContainer").appendChild(img);
                }
            }
        }
        // 給圖片添加事件
        var images = document.querySelectorAll(".AvatarLibList .ImgLibContainer img ");
        for ( var i in images) {
            if (typeof (images[i]) == "object") {
                images[i].addEventListener("click", changeAvatar, true);
            }
        }
    }
    /**
     * 獲得頭像數據
     */
    function getImageList()
    {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", Config.avatar.url, true);
        xmlhttp.send();
        xmlhttp.onreadystatechange = function()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                insertImage(JSON.parse(xmlhttp.responseText).datalist);
            }
        }
    }

    /**
     * 加載跟多頭像
     */
    function loadMore(event)
    {
        event.stopPropagation();
        event.preventDefault();
        var xmlhttp = new XMLHttpRequest();
        var url = Config.avatar.url + "?page=" + Config.avatar.CurrentPage;
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
        xmlhttp.onreadystatechange = function()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var datalist = JSON.parse(xmlhttp.responseText).datalist;
                if (datalist.length > 0) {
                    insertImage(datalist);
                    Config.avatar.CurrentPage++;
                } else {
                    var ImgMore = document.querySelector(".ImgMore");
                    ImgMore.innerHTML = "親，木有了！";
                    ImgMore.removeEventListener("click", loadMore, false);
                }
            }
        }
    }

    /**
     * 頭像修改數據發回服務器
     */
    function saveUserAvatar()
    {
        var AvatarManagerObj = document.querySelector("#AvatarManager");
        var data = {
            "ImageUrl" : AvatarManagerObj.src,
            "id" : AvatarManagerObj.getAttribute("data-id"),
            "timestamp" : (new Date).getTime().toString().substring(0, 10),
            "referrer" : location.href,
            "uid" : '',
            "OldImageUrl":AvatarManagerObj.getAttribute("data-url")
        };
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("POST", Config.avatar.SaveAvatarUrl);
        // xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencode");
        xmlhttp.setRequestHeader("Content-type", "application/json");
        //xmlhttp.send("data=" + encodeURIComponent(JSON.stringify(data)));
        xmlhttp.send(JSON.stringify(data));
        xmlhttp.onreadystatechange = function()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.state == 200) {
                console.log(xmlhttp.responseText);
            }

        }
    }
    /**
     * 改變頭像
     */
    function changeAvatar()
    {
        var AvatarManager = document.querySelector("#AvatarManager");
        AvatarManager.setAttribute("src", this.src);
        AvatarManager.setAttribute("data-id", this.getAttribute("data-id"));
    }
    /**
     * 添加類
     */
    function addClassName(obj, className)
    {

        var ObjClassName = obj.getAttribute("class");
        if (ObjClassName) {
            var ClassNameArr = ObjClassName.split(" ");
            var flag = 0;
            for ( var i in ClassNameArr) {
                if (ClassNameArr[i] == className) {
                    flag = 1;
                }
            }
            if (flag == 0) {
                obj.setAttribute("class", ObjClassName + " " + className);
            }
        } else {
            obj.setAttribute("class", className);
        }
        // console.log();
    }
    /**
     * 移除類
     */
    function removeClassName(obj, className)
    {

        var ObjClassName = obj.getAttribute("class");
        ;
        if (ObjClassName) {
            var ClassNameArr = ObjClassName.split(" ");
            var tmp = [];
            for ( var i in ClassNameArr) {
                if (ClassNameArr[i] == className) {
                    continue;
                } else {
                    tmp.push(ClassNameArr[i]);
                }
            }
            obj.setAttribute("class", tmp.join(" "));

        }
    }

    /**
     * 事件入口
     */
    function start(event)
    {
        event.stopPropagation();
        event.preventDefault();
        // start
        avatarInit();
        // 獲取圖片並且插入圖片
        getImageList();
        Config.avatar.CurrentPage++;
        document.querySelector(".closeAvatarManager").addEventListener("click", function(event)
        {
            event.stopPropagation();
            event.preventDefault();
            if (document.querySelector("#AvatarManager").parentNode && document.querySelector(".avatarWrap")) {
                document.querySelector("#AvatarManager").parentNode.removeChild(document.querySelector(".avatarWrap")).focus();
            }
            document.querySelector("#AvatarManager").src = Config.avatar.defaultAvatar;
            // 隱藏退出賬戶按鈕，防止用戶選錯
            var logout = document.querySelector(".userinfo .tui");
            logout.style.display = "inline";
            Config.avatar.CurrentPage = 0;

        });
        document.querySelector(".okAvatarManager").addEventListener("click", function(event)
        {
            event.stopPropagation();
            event.preventDefault();
            if (document.querySelector("#AvatarManager").parentNode && document.querySelector(".avatarWrap")) {
                document.querySelector("#AvatarManager").parentNode.removeChild(document.querySelector(".avatarWrap")).focus();
                // 頭像數據修改完成，服務器保存修改數據
                saveUserAvatar();
            }
            // 隱藏退出賬戶按鈕，防止用戶選錯
            var logout = document.querySelector(".userinfo .tui");
            logout.style.display = "inline";
            Config.avatar.CurrentPage = 0;

        });
        document.querySelector('.ImgMore').addEventListener("click", loadMore, false);
        // 監聽瀏覽器滾動
        window.onscroll = function(obj)
        {
            if (window.pageYOffset > 120) {
                addClassName(document.querySelector("#AvatarManager"), "AvatarFixed");
                removeClassName(document.querySelector(".avatarWrap .mask"), "maskHidden");
                addClassName(document.querySelector(".avatarWrap .mask"), "maskShow");

            } else {
                removeClassName(document.querySelector("#AvatarManager"), "AvatarFixed");
                removeClassName(document.querySelector(".avatarWrap .mask"), "maskShow");
                addClassName(document.querySelector(".avatarWrap .mask"), "maskHidden");

            }
        }
    }

    // 入口
    document.querySelector("#AvatarManager").addEventListener("click", start, false);

})