better img loading
This commit is contained in:
parent
0c0611adf2
commit
d4a193119d
3 changed files with 51 additions and 11 deletions
|
@ -23,20 +23,36 @@ class File {
|
|||
}
|
||||
getHTML(temp = false) {
|
||||
const src = this.proxy_url || this.url;
|
||||
if (this.width) {
|
||||
let scale = 1;
|
||||
const max = 96 * 3;
|
||||
scale = Math.max(scale, this.width / max);
|
||||
scale = Math.max(scale, this.height / max);
|
||||
this.width /= scale;
|
||||
this.height /= scale;
|
||||
}
|
||||
if (this.content_type.startsWith('image/')) {
|
||||
const div = document.createElement("div");
|
||||
const img = document.createElement("img");
|
||||
img.classList.add("messageimg");
|
||||
div.classList.add("messageimgdiv");
|
||||
img.onclick = function () {
|
||||
const full = new Dialog(["img", img.src, ["fit"]]);
|
||||
full.show();
|
||||
};
|
||||
img.src = src;
|
||||
div.append(img);
|
||||
if (this.width) {
|
||||
img.height = this.height;
|
||||
img.width = this.width;
|
||||
div.style.width = this.width + "px";
|
||||
div.style.height = this.height + "px";
|
||||
console.log(div, ":3");
|
||||
}
|
||||
else {
|
||||
console.log("really?");
|
||||
}
|
||||
console.log(img);
|
||||
console.log(this.width, this.height);
|
||||
return img;
|
||||
return div;
|
||||
}
|
||||
else if (this.content_type.startsWith('video/')) {
|
||||
const video = document.createElement("video");
|
||||
|
|
|
@ -26,20 +26,35 @@ class File{
|
|||
}
|
||||
getHTML(temp:boolean=false):HTMLElement{
|
||||
const src=this.proxy_url||this.url;
|
||||
if(this.width){
|
||||
let scale=1;
|
||||
const max=96*3;
|
||||
scale=Math.max(scale,this.width/max);
|
||||
scale=Math.max(scale,this.height/max);
|
||||
this.width/=scale;
|
||||
this.height/=scale;
|
||||
}
|
||||
if(this.content_type.startsWith('image/')){
|
||||
const div=document.createElement("div")
|
||||
const img=document.createElement("img");
|
||||
img.classList.add("messageimg");
|
||||
div.classList.add("messageimgdiv")
|
||||
img.onclick=function(){
|
||||
const full=new Dialog(["img",img.src,["fit"]]);
|
||||
full.show();
|
||||
}
|
||||
img.src=src;
|
||||
div.append(img)
|
||||
if(this.width){
|
||||
img.height=this.height;
|
||||
img.width=this.width;
|
||||
div.style.width=this.width+"px";
|
||||
div.style.height=this.height+"px";
|
||||
console.log(div,":3")
|
||||
}else{
|
||||
console.log("really?");
|
||||
}
|
||||
console.log(img);
|
||||
console.log(this.width,this.height)
|
||||
return img;
|
||||
return div;
|
||||
}else if(this.content_type.startsWith('video/')){
|
||||
const video=document.createElement("video");
|
||||
const source=document.createElement("source");
|
||||
|
|
|
@ -266,10 +266,9 @@ h2 {
|
|||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
max-width: 3in;
|
||||
max-height: 3in;
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
|
||||
]: 2 / 1;
|
||||
}
|
||||
|
||||
#page {
|
||||
|
@ -345,6 +344,7 @@ p {
|
|||
text-indent: .05in;
|
||||
width: .175in;
|
||||
padding-right: .026in;
|
||||
height: .175in;
|
||||
}
|
||||
|
||||
.spacee {
|
||||
|
@ -763,6 +763,15 @@ textarea:focus-visible,
|
|||
.messageimg {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
]:
|
||||
black;
|
||||
/* aspect-ratio: 1 /20; */
|
||||
}
|
||||
.messageimgdiv{
|
||||
}
|
||||
.embedimg {
|
||||
cursor: pointer;
|
||||
|
@ -1065,7 +1074,7 @@ span {
|
|||
position: relative;
|
||||
}
|
||||
.tabbed-head{
|
||||
background: var(--settings-hover);
|
||||
background: var(--profile-info-bg);
|
||||
}
|
||||
.tabbed-content td{
|
||||
/* border-color: var(--textarea-bg); */
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue