Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
zyy
/
erp
1
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Мод: 46560ad949
Салаанууд Тагууд
erp
/
Web
/
js
/
imgbox-1.0.3.js

imgbox-1.0.3.js 11 KB
Түүх Анхны өгөгдөл

12345678 
  1. /**
    2. 

  2.  * Minified by jsDelivr using Terser v5.15.1.
    3. 

  3.  * Original file: /npm/@yyznm/img-view@1.0.4/dist/yyz-img.umd.js
    4. 

  4.  *
    5. 

  5.  * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
    6. 

  6.  */
    7. 

  7. !function (t, i) { "object" == typeof exports && typeof module < "u" ? i(exports) : "function" == typeof define && define.amd ? define(["exports"], i) : i((t = typeof globalThis < "u" ? globalThis : t || self).YYZIMG = {}) }(this, (function (t) { "use strict"; var i = Object.defineProperty, s = (t, s, o) => (((t, s, o) => { s in t ? i(t, s, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[s] = o })(t, "symbol" != typeof s ? s + "" : s, o), o); class o { constructor(t = "", i) { s(this, "t"), s(this, "l"), s(this, "w"), s(this, "h"), s(this, "rotate"), s(this, "zoom"), s(this, "box"), s(this, "box_w"), s(this, "box_h"), s(this, "img_w"), s(this, "img_h"), s(this, "url"), s(this, "op"), s(this, "canvasImg"), s(this, "ctx"), s(this, "isShow"), s(this, "tipDom"), s(this, "tipTime"), this.t = 0, this.l = 0, this.w = 0, this.h = 0, this.rotate = 0, this.zoom = 1, this.img_w = 0, this.img_h = 0, this.box_w = 0, this.box_h = 0, this.url = t, this.isShow = !1, this.op = {}; const o = { zIndex: 1211, maskColor: "rgba(255,255,255,1)", body: document.body, startZoom: 1, minZoom: .1, maxZoom: 20, isImgClose: !1, isMaskClose: !0, isOperation: !0, isCloseBtn: !0, isMaskWheel: !1, isMaskMove: !1, tipTime: 300, showCall: void 0, backCall: void 0 }; i || (i = {}); for (const t in o) this.op[t] = typeof i[t] > "u" ? o[t] : i[t]; this.op.body ? document.body != this.op.body && (console.log(this.op.body), "string" == typeof this.op.body && (this.op.body = document.querySelector(this.op.body)), (!this.op.body.style.position || "static" == this.op.body.style.position) && (this.op.body.style.position = "relative"), this.op.body.style.overflow = "hidden") : console.error("传入的dom为空！") } show() { if (this.isShow) return; this.isShow = !0, document.documentElement.classList.add("yyz-iv-public-body-hidden"), this.box = document.createElement("div"), this.box.style.setProperty("--time", "0.3s"), this.box.className = "yyz-iv", this.box.style.zIndex = this.op.zIndex, this.box.style.background = "transparent", this.box.style.opacity = 0, this.box_h = this.op.body.offsetHeight, this.box_w = this.op.body.offsetWidth, document.body == this.op.body && (this.box_w = document.documentElement.clientWidth || document.body.clientWidth, this.box_h = document.documentElement.clientHeight || document.body.clientHeight, this.box.style.position = "fixed"); let t = document.createElement("div"); return t.className = "yyz-iv_img-box", this.box.appendChild(t), this.canvasImg = document.createElement("img"), this.canvasImg.className = "yyz-iv_img", this.canvasImg.draggable = !1, t.appendChild(this.canvasImg), this.canvasImg.onload = () => { this.zoom = this.op.startZoom, this.rotate = 0, this.img_h = this.canvasImg.height, this.img_w = this.canvasImg.width, this.img_w / this.img_h > this.box_w / this.box_h ? (this.w = this.zoom * this.box_w, this.h = this.w * (this.img_h / this.img_w), this.l = (this.box_w - this.box_w * this.zoom) / 2, this.t = (this.box_h - this.zoom * this.box_w * (this.img_h / this.img_w)) / 2) : (this.h = this.zoom * this.box_h, this.w = this.h * (this.img_w / this.img_h), this.t = (this.box_h - this.box_h * this.zoom) / 2, this.l = (this.box_w - this.box_h * this.zoom * (this.img_w / this.img_h)) / 2), this.upImgPosition() }, this.op.body.appendChild(this.box), this.canvasImg.src = this.url, this.canvasEventsInit(), setTimeout((() => { this.box.style.background = this.op.maskColor, this.box.style.opacity = 1 }), 1), this.op.isOperation && this.addOperationButton(), this.op.isCloseBtn && this.addCloseButton(), this.op.showCall && this.op.showCall(), this } close() { this.box.style.setProperty("--time", "0.1s"), this.box.style.opacity = 0, setTimeout((() => { this.op.body.removeChild(this.box), document.documentElement.classList.remove("yyz-iv-public-body-hidden"), this.isShow = !1, this.op.backCall && this.op.backCall() }), 200) } upImgPosition(t) { this.img_w / this.img_h > this.box_w / this.box_h ? (this.w = this.zoom * this.box_w, this.h = this.w * (this.img_h / this.img_w)) : (this.h = this.zoom * this.box_h, this.w = this.h * (this.img_w / this.img_h)), t && this.canvasImg.style.setProperty("--img-time", "0.2s"), this.canvasImg.style.transform = `rotate(${this.rotate}deg)`, this.canvasImg.style.width = this.w + "px", this.canvasImg.style.height = this.h + "px", this.canvasImg.style.top = this.t + "px", this.canvasImg.style.left = this.l + "px", t && setTimeout((() => { this.canvasImg.style.setProperty("--img-time", "0s") }), 200) } canvasEventsInit() { this.box.onclick = () => { this.op.isMaskClose && this.close() }, this.canvasImg.addEventListener("click", (function (t) { t.stopPropagation() })); let t = !1, i = !1, s = { x: 0, y: 0 }, o = this.op.isMaskMove ? this.box : this.canvasImg, h = this.op.isMaskWheel ? this.box : this.canvasImg; o.onmousedown = function (o) { t = !1, i = !0, s = { x: o.clientX, y: o.clientY } }, o.onmousemove = o => { if (t = !0, i) { const t = { x: o.clientX, y: o.clientY }; this.l += t.x - s.x, this.t += t.y - s.y, s = { x: o.clientX, y: o.clientY }, this.upImgPosition() } }, o.onmouseup = s => { i = !1, t || this.op.isImgClose && this.close() }, h.onmousewheel = h.onwheel = t => { var i = t.clientX, s = t.clientY; let o = t.wheelDelta ? t.wheelDelta : -40 * t.deltalY; var h = (i - this.l) / this.zoom, e = (s - this.t) / this.zoom; o > 0 ? (this.zoom += .1, this.zoom > this.op.maxZoom && (this.zoom = this.op.maxZoom), this.l = (1 - this.zoom) * h + (i - h), this.t = (1 - this.zoom) * e + (s - e)) : (this.zoom -= .1, this.zoom < this.op.minZoom && (this.zoom = this.op.minZoom), this.l = (1 - this.zoom) * h + (i - h), this.t = (1 - this.zoom) * e + (s - e)), this.tip(), this.upImgPosition() } } addOperationButton() { const t = this.createNode('<div class="yyz-iv_operation">\n        <div class="yyz-iv_operation-btn zoom-add">\n            <svg t="1616925103431" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10151" width="20" height="20"><path d="M836 476H548V188c0-19.8-16.2-36-36-36s-36 16.2-36 36v288H188c-19.8 0-36 16.2-36 36s16.2 36 36 36h288v288c0 19.8 16.2 36 36 36s36-16.2 36-36V548h288c19.8 0 36-16.2 36-36s-16.2-36-36-36z" p-id="10152" fill="#ffffff"></path></svg>\n        </div>\n        <div class="yyz-iv_operation-btn zoom-sub">\n            <svg t="1616925668114" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10948" width="20" height="20"><path d="M725.33 480H298.66c-17.67 0-32 14.33-32 32s14.33 32 32 32h426.67c17.67 0 32-14.33 32-32s-14.32-32-32-32z" p-id="10949" fill="#ffffff"></path></svg>\n        </div>\n        <div class="yyz-iv_operation-btn rotate-right">\n            <svg t="1616925730136" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1951" width="20" height="20"><path d="M503.466667 285.866667L405.333333 226.133333c-8.533333-8.533333-12.8-21.333333-8.533333-29.866666 8.533333-8.533333 21.333333-12.8 29.866667-8.533334l145.066666 89.6c8.533333 4.266667 12.8 17.066667 8.533334 29.866667l-89.6 145.066667c-4.266667 8.533333-17.066667 12.8-29.866667 8.533333-8.533333-4.266667-12.8-17.066667-8.533333-29.866667l64-102.4c-123.733333 4.266667-226.133333 106.666667-226.133334 234.666667s106.666667 234.666667 234.666667 234.666667c85.333333 0 162.133333-46.933333 204.8-119.466667 4.266667-8.533333 17.066667-12.8 29.866667-8.533333 8.533333 4.266667 12.8 17.066667 8.533333 29.866666-51.2 85.333333-140.8 140.8-238.933333 140.8-153.6 0-277.333333-123.733333-277.333334-277.333333 0-145.066667 110.933333-264.533333 251.733334-277.333333z" p-id="1952" fill="#ffffff"></path></svg>\n        </div>\n        <div class="yyz-iv_operation-btn rotate-left">\n            <svg t="1616925759280" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2144" width="20" height="20"><path d="M520.533333 285.866667c140.8 12.8 251.733333 132.266667 251.733334 277.333333 0 153.6-123.733333 277.333333-277.333334 277.333333-98.133333 0-192-55.466667-238.933333-140.8-4.266667-8.533333-4.266667-21.333333 8.533333-29.866666 8.533333-4.266667 21.333333-4.266667 29.866667 8.533333 42.666667 72.533333 119.466667 119.466667 204.8 119.466667 128 0 234.666667-106.666667 234.666667-234.666667s-98.133333-230.4-226.133334-234.666667l64 102.4c4.266667 8.533333 4.266667 21.333333-8.533333 29.866667-8.533333 4.266667-21.333333 4.266667-29.866667-8.533333l-89.6-145.066667c-4.266667-8.533333-4.266667-21.333333 8.533334-29.866667L597.333333 187.733333c8.533333-4.266667 21.333333-4.266667 29.866667 8.533334 4.266667 8.533333 4.266667 21.333333-8.533333 29.866666l-98.133334 59.733334z" p-id="2145" fill="#ffffff"></path></svg>\n        </div>\n    </div>'); t.style.zIndex = this.op.zIndex + 1, t.addEventListener("click", (function (t) { t.stopPropagation() })), t.querySelector(".yyz-iv_operation-btn.zoom-add").onclick = () => this.zoomAdd(), t.querySelector(".yyz-iv_operation-btn.zoom-sub").onclick = () => this.zoomSub(), t.querySelector(".yyz-iv_operation-btn.rotate-right").onclick = () => this.rotateRight(), t.querySelector(".yyz-iv_operation-btn.rotate-left").onclick = () => this.rotateLeft(), this.box.appendChild(t) } addCloseButton() { const t = this.createNode('<div class="yyz-iv_operation yyz-iv_operation-close">\n        <div class="yyz-iv_operation-btn close">\n        <svg width="34" height="34" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 14L34 34" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 34L34 14" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>\n        </div>\n    </div>'); t.style.zIndex = this.op.zIndex + 1, t.addEventListener("click", (function (t) { t.stopPropagation() })), t.querySelector(".yyz-iv_operation-btn.close").onclick = () => this.close(), this.box.appendChild(t) } tip() { !this.op.tipTime || (this.tipDom || (this.tipDom = document.createElement("div"), this.tipDom.className = "yyz-iv_tip"), this.tipTime ? clearTimeout(this.tipTime) : this.box.appendChild(this.tipDom), this.tipDom.innerText = Math.round(100 * this.zoom) + "%", this.tipTime = setTimeout((() => { this.box.removeChild(this.tipDom), this.tipTime = null }), this.op.tipTime)) } rotateLeft() { this.rotate -= 90, this.upImgPosition(!0) } rotateRight() { this.rotate += 90, this.upImgPosition(!0) } zoomAdd() { this.zoom += .3, this.l -= .3 * this.img_w / 4, this.t -= .3 * this.img_h / 4, this.upImgPosition(!0), this.tip() } zoomSub() { this.zoom -= .3, this.l += .3 * this.img_w / 4, this.t += .3 * this.img_h / 4, this.upImgPosition(!0), this.tip() } reset() { this.canvasImg.onload() } setUrl(t) { this.url = t, this.close(), this.show() } createNode(t) { var i = document.createElement("div"); return i.innerHTML = t.trim(), i.firstChild } } t.default = o, t.show = function (t, i) { return new o(t, i).show() }, Object.defineProperties(t, { __esModule: { value: !0 }, [Symbol.toStringTag]: { value: "Module" } }) }));
    8. 

  8. //# sourceMappingURL=/sm/917a608ed5f295ce6d2d14a42a1669c1cb689fe082d5dba9ec5a694e72b02641.map
    9.