ClassContent/历届学生/font-end-nine/项目练习/上课项目/js案例/图片预览/index.js

// class 类
//  其实就是现实生活中具体事物在编程中的表现
//   莫一个事物具体的属性(变量)和功能（方法）

// 构造函数 constructor
//   类被初始化(new)的时候，第一个默认执行的方法
//   做参数的接受和保存

// 本质上就是 object
//  语法糖


class PicturePreview {
    scale = 1;
    rotate = 0;
    constructor(params) {
        this.params = params;
        this.initHtml();
    }

    initHtml () {
        this.$("body").insertAdjacentHTML('beforeend', `
            <div class="preview">
                <div class="preview_task"></div>

                <div class="preview_wrap">
                    <img style="transform: scale(${this.scale}) rotate(${this.rotate}deg);margin-left: 0px;margin-top: 0px;" class="preview_img" src="${this.params.arr[this.params.index]}" alt="">
                </div>

                <div class="preview_close iconfont icon-close"></div>

                <div class="navigation navigation_left iconfont icon-fanhui"></div>
                <div class="navigation navigation_right iconfont icon-gengduo"></div>

                <div class="preview_list">
                    <div class="iconfont icon-suoxiao preview_list_item"></div>
                    <div class="iconfont icon-fangda preview_list_item"></div>
                    <div class="iconfont icon-quanping sf preview_list_item"></div>
                    <div class="iconfont icon-yulanxuanzhuan left preview_list_item"></div>
                    <div class="iconfont icon-yulanxuanzhuan right preview_list_item"></div>
                </div>
            </div>
        `)

        this.bindEvents()
    }

    bindEvents() {
        
        this.$(".preview_wrap img").onmousedown = (e) => {
            e.preventDefault();
            this.startX = e.x;
            this.startY = e.y;
            this.status = true

            this.oldLeft = parseInt(this.$(".preview_wrap img").style.marginLeft)
            this.oldTop = parseInt(this.$(".preview_wrap img").style.marginTop)

            this.moveEl(".preview_wrap img")


            this.$(".preview_wrap img").onmouseout = (e) => {
                this.$(".preview_wrap img").onmousemove = null
                if ( this.status) {
                    this.moveEl(".preview_wrap")
                }
            }
        }



        this.$(".preview_wrap img").onmouseup = (e) => {
            this.status = false
            this.$(".preview_wrap img").onmousemove = null
        }

        this.$(".preview_wrap").onmouseup = (e) => {
            this.status = false
            this.$(".preview_wrap").onmousemove = null
        }



        this.$(".preview_close").onclick = () => {
            this.$("body").removeChild(this.$(".preview"))
        }

        // 上一页
        this.$(".icon-fanhui").onclick = () => {
            this.params.index -= 1
            if (this.params.index < 0) {
                this.params.index = 0
            }

            this.$(".preview_img").src = this.params.arr[this.params.index]
        }

        // 下一页
        this.$(".icon-gengduo").onclick = () => {
            this.params.index += 1
            if (this.params.index > (this.params.arr.length -1)) {
                this.params.index = this.params.arr.length -1
            }
            this.$(".preview_img").src = this.params.arr[this.params.index]
        }

        this.$(".icon-suoxiao").onclick = () => {
            this.scale -= 0.2;
            if (this.scale <= 0.2) {
                this.scale = 0.2
            }

            this.transform()

        }

        this.$(".icon-fangda").onclick = () => {
            this.scale += 0.2;
            this.transform()

        }

        this.$(".left").onclick = () => {
            this.rotate -= 90
            this.transform()

        }
        this.$(".right").onclick = () => {
            this.rotate += 90
            this.transform()

        }

        this.$(".sf").onclick = () => {
            this.scale = 1
            this.rotate = 0
            this.transform()

            if (this.$(".sf").classList.contains("icon-quanping")) {
                this.$(".preview_wrap img").style.height = "auto"
                this.$(".sf").classList.replace("icon-quanping", "icon-beijingyibiyi")
            } else {
                this.$(".preview_wrap img").style.height = "100%"
                this.$(".sf").classList.replace("icon-beijingyibiyi", "icon-quanping")
            }
        }
    }

    transform() {
        this.$(".preview_wrap img").style = `
            transform: scale(${this.scale}) rotate(${this.rotate}deg);
            margin-left: ${parseInt(this.$(".preview_wrap img").style.marginLeft)}px;
            margin-top: ${parseInt(this.$(".preview_wrap img").style.marginTop)}px;
        `
    }

    moveEl(className) {
        this.$(className).onmousemove = (e) => {
            e.stopPropagation();
            e.preventDefault();

            var endX = e.x - this.startX;
            var endY = e.y - this.startY;

            this.$(".preview_wrap img").style.marginLeft = `${endX + this.oldLeft}px`
            this.$(".preview_wrap img").style.marginTop = `${endY + this.oldTop}px`


        }
    }

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

}



// 箭头函数会解绑（释放） this 执行
// bind  call apply
// var PicturePreview = {
//     init (test) {
//         console.log(this);
//         this.a = test;
//     },

//     getA: function() {
//         console.log(this.a);
//     }
// }

// window.PicturePreview.init()