btt-ui 1.0.12 → 1.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/src/directives/drag.mjs +13 -11
- package/lib/src/directives/drag.js +1 -1
- package/package.json +1 -1
|
@@ -18,15 +18,17 @@ class f {
|
|
|
18
18
|
let t = new Image();
|
|
19
19
|
t.onload = () => {
|
|
20
20
|
this._mask.appendChild(t), this.resetConfig(), this._result = this._getImgSize(t.naturalWidth, t.naturalHeight, this._mask.offsetWidth, this._mask.offsetHeight), t.style.width = this._result.width + "px", t.style.height = this._result.height + "px", this._x = (this._mask.offsetWidth - this._result.width) * 0.5, this._y = (this._mask.offsetHeight - this._result.height) * 0.5, this._binding.type == "transform" ? t.style.transform = "translate3d(" + this._x + "px, " + this._y + "px, 0) scale(" + this._scale + ")" : (t.style.transform = `scale(${this._scale})`, t.style.transition = "transform 0.6s ease-out", t.style.marginLeft = this._x + "px", t.style.marginTop = this._y + "px"), this._drag(t), this._wheelZoom(t);
|
|
21
|
-
}
|
|
21
|
+
}, window.addEventListener("keyup", (i) => {
|
|
22
|
+
i.stopPropagation(), i.code == "Escape" && this.remove();
|
|
23
|
+
});
|
|
22
24
|
let s = document.createElement("ul");
|
|
23
25
|
s.className = "action-item-wapper";
|
|
24
26
|
let n = document.createElement("li");
|
|
25
27
|
n.className = "action-item rotate-left", n.setAttribute("data-key", "rotateleft"), s.appendChild(n);
|
|
26
28
|
let r = document.createElement("li");
|
|
27
29
|
r.className = "action-item rotate-right", r.setAttribute("data-key", "rotateright"), s.appendChild(r);
|
|
28
|
-
let
|
|
29
|
-
|
|
30
|
+
let o = document.createElement("ul");
|
|
31
|
+
o.className = "dragger-file-list-wapper", t.src = this._image.src;
|
|
30
32
|
let a = new Array();
|
|
31
33
|
const h = () => {
|
|
32
34
|
a.forEach((i) => {
|
|
@@ -36,18 +38,18 @@ class f {
|
|
|
36
38
|
Array.isArray(this._binding.list) ? typeof this._binding.list[0] == "string" ? (this._curImgIndex = this._binding.list.findIndex((i) => i == this._image.src), this._binding.list && this._binding.list.forEach((i, d) => {
|
|
37
39
|
let l = document.createElement("li");
|
|
38
40
|
l.className = this._curImgIndex == d ? "cur" : "";
|
|
39
|
-
let
|
|
40
|
-
|
|
41
|
+
let _ = document.createElement("img");
|
|
42
|
+
_.setAttribute("src", i), l.append(_), o.appendChild(l), a.push(l), l.onclick = function() {
|
|
41
43
|
t.style.transform = "scale(0)", t.src = i, h(), l.className = "cur";
|
|
42
44
|
};
|
|
43
45
|
})) : (this._curImgIndex = this._binding.list.findIndex((i) => i.url == this._image.src), this._binding.list && this._binding.list.forEach((i, d) => {
|
|
44
46
|
let l = document.createElement("li");
|
|
45
47
|
l.className = this._curImgIndex == d ? "cur" : "";
|
|
46
|
-
let
|
|
47
|
-
|
|
48
|
+
let _ = document.createElement("img");
|
|
49
|
+
_.setAttribute("src", i.url), l.append(_), o.appendChild(l), a.push(l), l.onclick = function() {
|
|
48
50
|
t.style.transform = "scale(0)", t.src = i.url, h(), l.className = "cur";
|
|
49
51
|
};
|
|
50
|
-
})) :
|
|
52
|
+
})) : o.style.display = "none";
|
|
51
53
|
let m = {
|
|
52
54
|
rotateleft: () => {
|
|
53
55
|
this._angle -= 90, this._binding.type == "transform" ? t.style.transform = `translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)` : t.style.transform = `rotate(${this._angle}deg)`;
|
|
@@ -58,12 +60,12 @@ class f {
|
|
|
58
60
|
};
|
|
59
61
|
s.onclick = (i) => {
|
|
60
62
|
i.target.dataset.key && m[i.target.dataset.key]();
|
|
61
|
-
}, this._mask.appendChild(s), this._mask.appendChild(
|
|
63
|
+
}, this._mask.appendChild(s), this._mask.appendChild(o), this._binding.el ? document.querySelector(this._binding.el).appendChild(this._mask) : document.body.appendChild(this._mask);
|
|
62
64
|
}
|
|
63
65
|
_getImgSize(e, t, s, n) {
|
|
64
|
-
const r = e / t,
|
|
66
|
+
const r = e / t, o = s / n;
|
|
65
67
|
let a, h;
|
|
66
|
-
return r >=
|
|
68
|
+
return r >= o ? e > s ? (a = s, h = s / e * t) : (a = e, h = t) : t > n ? (a = n / t * e, h = n) : (a = e, h = t), { width: a, height: h };
|
|
67
69
|
}
|
|
68
70
|
_drag(e) {
|
|
69
71
|
e.addEventListener("pointerdown", (t) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});class m{constructor(e,t){this._result={},this._x=0,this._y=0,this._scale=1,this._minScale=.5,this._angle=0,this._maxScale=4,this._isPointerdown=!1,this._diff={x:0,y:0},this._lastPointermove={x:0,y:0},this._curImgIndex=0,this._mask=document.createElement("div"),this._binding={type:"transform",list:new Array,el:""},this._binding=t!=null?t:{type:"transform",list:new Array,el:""},this._image=e}resetConfig(){this._x=0,this._y=0,this._scale=1}build(){this._mask=document.createElement("div"),this._mask.classList.add("k-img-preview-mask");let e=document.createElement("div");e.className="k-icon-close-btn k-img-close",this._mask.appendChild(e),e.onclick=()=>{this.remove()};let t=new Image;t.onload=()=>{this._mask.appendChild(t),this.resetConfig(),this._result=this._getImgSize(t.naturalWidth,t.naturalHeight,this._mask.offsetWidth,this._mask.offsetHeight),t.style.width=this._result.width+"px",t.style.height=this._result.height+"px",this._x=(this._mask.offsetWidth-this._result.width)*.5,this._y=(this._mask.offsetHeight-this._result.height)*.5,this._binding.type=="transform"?t.style.transform="translate3d("+this._x+"px, "+this._y+"px, 0) scale("+this._scale+")":(t.style.transform=`scale(${this._scale})`,t.style.transition="transform 0.6s ease-out",t.style.marginLeft=this._x+"px",t.style.marginTop=this._y+"px"),this._drag(t),this._wheelZoom(t)};let s=document.createElement("ul");s.className="action-item-wapper";let a=document.createElement("li");a.className="action-item rotate-left",a.setAttribute("data-key","rotateleft"),s.appendChild(a);let r=document.createElement("li");r.className="action-item rotate-right",r.setAttribute("data-key","rotateright"),s.appendChild(r);let
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});class m{constructor(e,t){this._result={},this._x=0,this._y=0,this._scale=1,this._minScale=.5,this._angle=0,this._maxScale=4,this._isPointerdown=!1,this._diff={x:0,y:0},this._lastPointermove={x:0,y:0},this._curImgIndex=0,this._mask=document.createElement("div"),this._binding={type:"transform",list:new Array,el:""},this._binding=t!=null?t:{type:"transform",list:new Array,el:""},this._image=e}resetConfig(){this._x=0,this._y=0,this._scale=1}build(){this._mask=document.createElement("div"),this._mask.classList.add("k-img-preview-mask");let e=document.createElement("div");e.className="k-icon-close-btn k-img-close",this._mask.appendChild(e),e.onclick=()=>{this.remove()};let t=new Image;t.onload=()=>{this._mask.appendChild(t),this.resetConfig(),this._result=this._getImgSize(t.naturalWidth,t.naturalHeight,this._mask.offsetWidth,this._mask.offsetHeight),t.style.width=this._result.width+"px",t.style.height=this._result.height+"px",this._x=(this._mask.offsetWidth-this._result.width)*.5,this._y=(this._mask.offsetHeight-this._result.height)*.5,this._binding.type=="transform"?t.style.transform="translate3d("+this._x+"px, "+this._y+"px, 0) scale("+this._scale+")":(t.style.transform=`scale(${this._scale})`,t.style.transition="transform 0.6s ease-out",t.style.marginLeft=this._x+"px",t.style.marginTop=this._y+"px"),this._drag(t),this._wheelZoom(t)},window.addEventListener("keyup",i=>{i.stopPropagation(),i.code=="Escape"&&this.remove()});let s=document.createElement("ul");s.className="action-item-wapper";let a=document.createElement("li");a.className="action-item rotate-left",a.setAttribute("data-key","rotateleft"),s.appendChild(a);let r=document.createElement("li");r.className="action-item rotate-right",r.setAttribute("data-key","rotateright"),s.appendChild(r);let o=document.createElement("ul");o.className="dragger-file-list-wapper",t.src=this._image.src;let n=new Array;const h=()=>{n.forEach(i=>{i.className=""})};Array.isArray(this._binding.list)?typeof this._binding.list[0]=="string"?(this._curImgIndex=this._binding.list.findIndex(i=>i==this._image.src),this._binding.list&&this._binding.list.forEach((i,d)=>{let l=document.createElement("li");l.className=this._curImgIndex==d?"cur":"";let _=document.createElement("img");_.setAttribute("src",i),l.append(_),o.appendChild(l),n.push(l),l.onclick=function(){t.style.transform="scale(0)",t.src=i,h(),l.className="cur"}})):(this._curImgIndex=this._binding.list.findIndex(i=>i.url==this._image.src),this._binding.list&&this._binding.list.forEach((i,d)=>{let l=document.createElement("li");l.className=this._curImgIndex==d?"cur":"";let _=document.createElement("img");_.setAttribute("src",i.url),l.append(_),o.appendChild(l),n.push(l),l.onclick=function(){t.style.transform="scale(0)",t.src=i.url,h(),l.className="cur"}})):o.style.display="none";let f={rotateleft:()=>{this._angle-=90,this._binding.type=="transform"?t.style.transform=`translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)`:t.style.transform=`rotate(${this._angle}deg)`},rotateright:()=>{this._angle+=90,this._binding.type=="transform"?t.style.transform=`translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)`:t.style.transform=`rotate(${this._angle}deg)`}};s.onclick=i=>{i.target.dataset.key&&f[i.target.dataset.key]()},this._mask.appendChild(s),this._mask.appendChild(o),this._binding.el?document.querySelector(this._binding.el).appendChild(this._mask):document.body.appendChild(this._mask)}_getImgSize(e,t,s,a){const r=e/t,o=s/a;let n,h;return r>=o?e>s?(n=s,h=s/e*t):(n=e,h=t):t>a?(n=a/t*e,h=a):(n=e,h=t),{width:n,height:h}}_drag(e){e.addEventListener("pointerdown",t=>{this._isPointerdown=!0,e.setPointerCapture(t.pointerId),this._lastPointermove={x:t.clientX,y:t.clientY}}),e.addEventListener("pointermove",t=>{if(this._isPointerdown){const s={x:t.clientX,y:t.clientY};this._diff.x=s.x-this._lastPointermove.x,this._diff.y=s.y-this._lastPointermove.y,this._lastPointermove={x:s.x,y:s.y},this._x+=this._diff.x,this._y+=this._diff.y,this._binding.type=="transform"?e.style.transform=`translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)`:(e.style.marginLeft=this._x+"px",e.style.marginTop=this._y+"px")}t.preventDefault()}),e.addEventListener("pointerup",t=>{this._isPointerdown&&(this._isPointerdown=!1)}),e.addEventListener("pointercancel",t=>{this._isPointerdown&&(this._isPointerdown=!1)})}_wheelZoom(e){this._mask.addEventListener("wheel",t=>{let s=1.1;t.deltaY>0&&(s=1/1.1);const a=this._scale*s;if(a>this._maxScale?(s=this._maxScale/this._scale,this._scale=this._maxScale):a<this._minScale?(s=this._minScale/this._scale,this._scale=this._minScale):this._scale=a,t.target.tagName==="IMG")if(this._binding.type=="transform"){const r={x:(s-1)*this._result.width*.5,y:(s-1)*this._result.height*.5};this._x-=(s-1)*(t.clientX-this._x)-r.x,this._y-=(s-1)*(t.clientY-this._y)-r.y}else this._x-=(s-1)*(t.clientX-this._x),this._y-=(s-1)*(t.clientY-this._y);this._binding.type=="transform"?e.style.transform=`translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)`:(e.style.marginLeft=this._x+"px",e.style.marginTop=this._y+"px",e.style.width=this._result.width*this._scale+"px",e.style.height=this._result.height*this._scale+"px"),t.preventDefault()})}reset(){this._scale=.7,this._mask=document.createElement("div")}remove(){this._mask.innerHTML="",this._mask.remove(),this.reset()}}const p={mounted(c,e){let t=e.value,s=new m(c,{...t});c.onclick=()=>{s.build()}},unmounted(){console.log("distory")}};exports.Dragger=m;exports.dragger=p;
|