ClassContent/历届学生/fontendsix/项目练习/上课项目/图片预览/js/ImagePreview.js

class ImagePreview {
    option = {
        l: 0,
        t: 0,
        startX: 0,
        startY: 0,
        scale: 1,
        rotate: 0,
        isLongTag: false,

        images: [],
        startPosition: 0,
        showPagination: false,
        onChange: () => { },
        onClose: () => { }
    }

    constructor(option) {
        if (option.hasOwnProperty("images") && option.images.length != 0) {
            this.option.startPosition = option.startPosition || this.option.startPosition;
            this.option.images = option.images || this.option.images;
            this.option.showPagination = option.showPagination || this.option.showPagination;
            this.option.onChange = option.onChange || this.option.onChange;
            this.option.onClose = option.onClose || this.option.onClose;

            this.initHTML();
        } else {
            throw new Error("images必传，images不能为空！！！")
        }
    }

    initHTML() {
        $("body").insertAdjacentHTML("beforeend", `
            <div class="bmy_image_preview">
                <div class="bmy_image_canvas">
                    <img class="bmy_preview sx" 
                    style="transform: scale(1) rotate(0deg); margin-left: 0px; margin-top: 0px; "
                    src="${this.option.images[this.option.startPosition]}" alt="">

                </div>
                <div class="bmy_mask"></div>

                <i class="iconfont icon-closedx bmy_button bmy_close"></i>
                <i class="iconfont icon-zuo bmy_button bmy_prev"></i>
                <i class="iconfont icon-zhankai-copy bmy_button bmy_next"></i>

                <ul class="bmy_menu">
                    <li>
                        <i class="iconfont icon-suoxiao"></i>
                    </li>
                    <li>
                        <i class="iconfont icon-fangda"></i>
                    </li>
                    <li>
                        <i class="iconfont bl icon-fullscreen"></i>
                    </li>
                    <li>
                        <i class="iconfont icon-shuaxin left_xz"></i>
                    </li>
                    <li>
                        <i class="iconfont icon-shuaxin right_xz"></i>
                    </li>
                </ul>
            </div>
        `);

        this.onEvent()
    }

    onEvent() {
        $(".bmy_close").onclick = () => {
            $("body").removeChild($(".bmy_image_preview"))
            this.option.onClose()
        }

        $(".bmy_prev").onclick = () => {
            this.option.startPosition--
            this.option.startPosition < 0 ? this.option.startPosition = this.option.images.length - 1 : ''
            this.changeImgSrc()
        }

        $(".bmy_next").onclick = () => {
            this.option.startPosition++
            this.option.startPosition >= this.option.images.length ? this.option.startPosition = 0 : ''
            this.changeImgSrc()
        }

        $(".icon-suoxiao").onclick = () => {
            if (this.option.scale > 0.2) {
                this.option.scale = Number((this.option.scale - 0.2).toFixed(1));
                this.ScaleAndRotate()
            }
        }

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

        $(".left_xz").onclick = () => {
            this.option.rotate -= 90;
            this.ScaleAndRotate()
        }
        $(".right_xz").onclick = () => {
            this.option.rotate += 90
            this.ScaleAndRotate()
        }

        $(".bl").onclick = () => {
            if ($(".bl").classList.contains("icon-fullscreen")) {
                $(".bmy_preview").classList.remove("sx")
                this.option.scale = 1
                this.option.rotate = 0
                this.ScaleAndRotate()
            } else {
                $(".bmy_preview").classList.add("sx")
            }
            $(".bl").classList.toggle("icon-suoxiao1")
            $(".bl").classList.toggle("icon-fullscreen")
        }

        $(".bmy_preview").onmousedown = (e) => {
            e.preventDefault()
            this.isLongTag = true;
            this.startX = e.screenX;
            this.startY = e.screenY;

            this.l = parseInt($(".bmy_preview").style.marginLeft);
            this.t = $(".bmy_preview").offsetTop;

            this.move(".bmy_preview")
        }

        $(".bmy_preview").onmouseleave = () => {
            if (this.isLongTag) {
                this.move(".bmy_image_canvas")
            }
        }

        $(".bmy_image_preview").onmouseup = () => {
            this.isLongTag = false;
            $(".bmy_preview").onmousemove = null
            $(".bmy_image_canvas").onmousemove = null
        }
       
    }


    move(className) {
        $(className).onmousemove = (ev) => {
            ev.preventDefault()
            var moveX = ev.screenX, moveY = ev.screenY;
            var newX = moveX - this.startX, newY = moveY - this.startY;
            $(".bmy_preview").style.marginLeft = `${newX + this.l}px`;
            $(".bmy_preview").style.marginTop = `${newY + this.t}px`;
        }
    }

    ScaleAndRotate() {
        $(".bmy_preview").style.transform = `scale(${this.option.scale}) rotate(${this.option.rotate}deg)`
    }

    changeImgSrc() {
        this.option.onChange(this.option.startPosition)
        $(".bmy_preview").src = this.option.images[this.option.startPosition]
    }
}

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