ClassContent/历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/utils/index.js

class Utils {

    footer() {
        var curretHref = location.href;
        var footerList = [
            { title: '首页', icon: 'home', href: 'index.html' },
            { title: '机构', icon: 'jigou', href: 'institution.html' },
            { title: '模特', icon: 'me', href: 'model.html' },
            { title: '我的', icon: 'wo', href: 'my.html' },
        ];

        var html = `
        <ul class="footer">
            ${footerList.map(v => {
            return `
                    <li class="${curretHref.includes(v.href) ? 'active' : ''}">
                        <a href="./${v.href}">
                            <i class="iconfont icon-${v.icon}"></i>
                            <p>${v.title}</p>
                        </a>
                    </li>
                    `
        })
            }
        </ul>
        `;
        $("body").insertAdjacentHTML("beforeend", html)
    }

    header(title = "", like = "") {
        $("body").html(`
            <div class="header_pub">
                <div class="left">
                    <i class="iconfont icon-back1"></i>
                    <span class="ellipsis">${title}</span>
                </div>
                ${ like }
                
            </div>
        `);

        $(".header_pub .icon-back1").tap(() => {
            history.back()
        })
    }

    item(dom, data) {
        data.forEach((v,i) => {
            dom.html(`
                <li>
                    <a href="./info.html?id=${v.id}&quantity=${v.shuliang || v.total}&title=${encodeURIComponent(v.title)}">
                        <div class="img">
                            <img src="${v.img_src || v.preview}" alt="">
                            <span>${v.shuliang || v.total}P</span>
                        </div>
                        <div class="title ellipsis">${v.title}</div>
                        <div class="model ellipsis">${v.user || `模特：${(v?.renwulist.length != 0 ? v.renwulist[0].name : '')}`}</div>
                        <div class="jg ellipsis">${v.source || `机构：${v.jigoulist[0].name}`}</div>
                    </a>
                    <div class="tag">
                      ${
                        (v.biaoqianlist || v.tags).map(item => {
                            return `<a href="">${item.name || item.title}</a>`
                         })
                       }
                    </div>
                </li>
            `)
        })
    }

    $(className) {
        return document.querySelector(className);
    }

    _(className) {
        return document.querySelectorAll(className);
    }


    click(className, callback, type = "click",) {
        $(`${className}`)[`on${type}`] = (event) => {
            callback(event)
        }
    }

    query(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)
            return decodeURIComponent(r[2]);
        return null;
    }

    setItem(key, value) {
        localStorage.setItem(
            key, 
            value.constructor == Object || value.constructor == Array 
              ? JSON.stringify(value) 
              : value 
        )
    }

    getItem(key) {
        return localStorage.getItem(key) == null ? false : JSON.parse(localStorage.getItem(key))
    }

    customMethods() {

        NodeList.prototype.tap = function (callback) {
            this.forEach((v, i) => bindElementClick(v, callback, i))
            
        }

        Element.prototype.tap = function (callback) {
            bindElementClick(this, callback)
        }

        var bindElementClick = (v, callback, i) => {
            v.onclick = (e) => {
                callback({ v, i, e })
                
            }
        }



        Element.prototype.html = function (html = "") {
            if (html.length == 0) {
                this.innerHTML = ""
            } else {
                this.innerHTML += html
            }
        }

        Element.prototype.addClass = function (className) {
            this.classList.add(className)
            return this;
        }


        Element.prototype.siblings = function () {
            return Array.from(this.parentElement.children).filter(v => v != this)
        }

        Array.prototype.removeClass = function (className) {
            this.forEach(v => bindElementRemoveClass(v, className))
            return this;
        }

        Element.prototype.removeClass = function (className) {
            bindElementRemoveClass(this, className)
            return this;
        }

        var bindElementRemoveClass = (v, className) => {
            v.classList.remove(className)
        }

        Element.prototype.none = function () {
            this.style.display = "none"
            return this;
        }

        Element.prototype.show = function () {
            this.style.display = "block"
            return this;
        }

        Element.prototype.toggle = function () {
            if (this.style.display == "none") {
                this.style.display = "block"
            } else {
                this.style.display = "none"
            }
        }

        Array.prototype.map = function (callback) {
            let result = []
            for (let index = 0; index < this.length; index++) {
                result.push(callback(this[index], index, this))
            }
            return result.toString().replaceAll(",", "");
        }
    }


}

let { 
    $, _, click, 
    customMethods, query, footer,
    item, header, setItem, getItem
} = new Utils()
customMethods()