This commit is contained in:
Lalle 2023-04-13 03:39:16 +02:00
parent 5841af0396
commit 85da10d049
No known key found for this signature in database
GPG Key ID: A6583D207A8F6B0D
3 changed files with 258 additions and 91 deletions

View File

@ -1,25 +1,63 @@
import h, { hFragment, EscapedHtml } from "../../globals/jsx"; import h, { hFragment, EscapedHtml } from '../../globals/jsx'
export default function generateCatalogThreadHtml( export default function generateCatalogThreadHtml(
thread, src, imgClass, data, postCount, fileCount, pageCount, staticPath, gifIcon, thread,
src,
imgClass,
data,
postCount,
fileCount,
pageCount,
staticPath,
gifIcon,
): EscapedHtml { ): EscapedHtml {
return <> return (
<a class="catalog-link" href={`/${thread.board}/thread/${thread.ID}`}> <>
{imgClass ? <a class="catalog-link" href={`/${thread.board}/thread/${thread.ID}`}>
<img src={src} class={`catalog-thumb ${imgClass}`} /> : {imgClass ? (
<img src={src} class="catalog-thumb" data-width={data.tn_w} data-height={data.tn_h} /> <img src={src} class={`catalog-thumb ${imgClass}`} />
} ) : (
</a> <img
<div class="catalog-stats"> src={src}
<span title="Posts / Files / Page"> class="catalog-thumb"
<span class={`post-count${data.bumplimit ? ' warning' : ''}`}>{postCount}</span>{' / '} data-width={data.tn_w}
<span class={`file-count${data.imagelimit ? ' warning' : ''}`}>{fileCount}</span>{' / '} data-height={data.tn_h}
<span class="page-count">{pageCount}</span> />
</span> )}
<span class="catalog-icons"> </a>
{thread.isSticky ? <img src={`${staticPath}sticky${gifIcon}`} class="stickyIcon" title="Sticky" /> : ''} <div class="catalog-stats">
{thread.isClosed ? <img src={`${staticPath}closed${gifIcon}`} class="closedIcon" title="Closed" /> : ''} <span title="Posts / Files / Page">
</span> <span class={`post-count${data.bumplimit ? ' warning' : ''}`}>
</div> {postCount}
</>; </span>
{' / '}
<span class={`file-count${data.imagelimit ? ' warning' : ''}`}>
{fileCount}
</span>
{' / '}
<span class="page-count">{pageCount}</span>
</span>
<span class="catalog-icons">
{thread.isSticky ? (
<img
src={`${staticPath}sticky${gifIcon}`}
class="stickyIcon"
title="Sticky"
/>
) : (
''
)}
{thread.isClosed ? (
<img
src={`${staticPath}closed${gifIcon}`}
class="closedIcon"
title="Closed"
/>
) : (
''
)}
</span>
</div>
</>
)
} }

View File

@ -1,49 +1,90 @@
import h, { EscapedHtml, isEscaped } from "../../globals/jsx"; import h, { EscapedHtml, isEscaped } from '../../globals/jsx'
export default function generateFileHtml( export default function generateFileHtml(
file, ID, boardID, fileURL, shortFilename, fileThumb, o, staticPath, gifIcon file,
ID,
boardID,
fileURL,
shortFilename,
fileThumb,
o,
staticPath,
gifIcon,
): EscapedHtml { ): EscapedHtml {
if (file) { if (file) {
const fileContent: (EscapedHtml | string)[] = []; const fileContent: (EscapedHtml | string)[] = []
if (boardID === "f") { if (boardID === 'f') {
fileContent.push( fileContent.push(
<div class="fileInfo" data-md5={file.MD5}><span class="fileText" id={`fT${ID}`}> <div class="fileInfo" data-md5={file.MD5}>
{'File: '} <span class="fileText" id={`fT${ID}`}>
<a data-width={file.width} data-height={file.height} href={fileURL} target="_blank">{file.name}</a> {'File: '}
-({file.size}, {file.dimensions}{file.tag ? ', ' + file.tag : ''}) <a
</span></div> data-width={file.width}
); data-height={file.height}
href={fileURL}
target="_blank"
>
{file.name}
</a>
-({file.size}, {file.dimensions}
{file.tag ? ', ' + file.tag : ''})
</span>
</div>,
)
} else { } else {
fileContent.push( fileContent.push(
<div class="fileText" id={`fT${ID}`} title={file.isSpoiler ? file.name : null}> <div
class="fileText"
id={`fT${ID}`}
title={file.isSpoiler ? file.name : null}
>
{'File: '} {'File: '}
<a title={file.name === shortFilename || file.isSpoiler ? null : file.name} href={fileURL} target="_blank"> <a
title={
file.name === shortFilename || file.isSpoiler ? null : file.name
}
href={fileURL}
target="_blank"
>
{file.isSpoiler ? 'Spoiler Image' : shortFilename} {file.isSpoiler ? 'Spoiler Image' : shortFilename}
</a> </a>
{` (${file.size}, ${file.dimensions || "PDF"})`} {` (${file.size}, ${file.dimensions || 'PDF'})`}
</div>, </div>,
<a <a
class={`fileThumb${file.isSpoiler ? ' imgspoiler' : ''}`} class={`fileThumb${file.isSpoiler ? ' imgspoiler' : ''}`}
href={fileURL} target="_blank" href={fileURL}
target="_blank"
data-m={file.hasDownscale ? '' : null} data-m={file.hasDownscale ? '' : null}
> >
<img <img
src={fileThumb} src={fileThumb}
alt={file.size} alt={file.size}
data-md5={file.MD5} data-md5={file.MD5}
style={`height: ${file.isSpoiler ? '100' : file.theight}px; width: ${file.isSpoiler ? '100' : file.twidth}px;`} style={`height: ${
file.isSpoiler ? '100' : file.theight
}px; width: ${file.isSpoiler ? '100' : file.twidth}px;`}
loading="lazy" loading="lazy"
/> />
</a> </a>,
); )
} }
return <div class="file" id={`f${ID}`}>{...fileContent}</div>; return (
<div class="file" id={`f${ID}`}>
{...fileContent}
</div>
)
} else if (o.fileDeleted) { } else if (o.fileDeleted) {
return <div class="file" id={`f${ID}`}> return (
<span class="fileThumb"> <div class="file" id={`f${ID}`}>
<img src={`${staticPath}filedeleted-res${gifIcon}`} alt="File deleted." class="fileDeletedRes retina" /> <span class="fileThumb">
</span> <img
</div>; src={`${staticPath}filedeleted-res${gifIcon}`}
alt="File deleted."
class="fileDeletedRes retina"
/>
</span>
</div>
)
} }
return { innerHTML: '', [isEscaped]: true }; return { innerHTML: '', [isEscaped]: true }
} }

View File

@ -1,24 +1,62 @@
import { g } from "../../globals/globals"; import { g } from '../../globals/globals'
import h, { EscapedHtml } from "../../globals/jsx"; import h, { EscapedHtml } from '../../globals/jsx'
export default function generatePostInfoHtml( export default function generatePostInfoHtml(
ID, o, subject, capcode, email, name, tripcode, pass, capcodeLC, capcodePlural, staticPath, gifIcon, ID,
capcodeDescription, uniqueID, flag, flagCode, flagCodeTroll, dateUTC, dateText, postLink, quoteLink, boardID, o,
subject,
capcode,
email,
name,
tripcode,
pass,
capcodeLC,
capcodePlural,
staticPath,
gifIcon,
capcodeDescription,
uniqueID,
flag,
flagCode,
flagCodeTroll,
dateUTC,
dateText,
postLink,
quoteLink,
boardID,
threadID, threadID,
): EscapedHtml { ): EscapedHtml {
const nameHtml: (EscapedHtml | string)[] = [<span class={`name${capcode ? ' ' + capcode : ''}`}>{name}</span>]; const nameHtml: (EscapedHtml | string)[] = [
if (tripcode) nameHtml.push(' ', <span class="postertrip">{tripcode}</span>); <span class={`name${capcode ? ' ' + capcode : ''}`}>{name}</span>,
if (pass) nameHtml.push(' ', <span title={`Pass user since ${pass}`} class="n-pu"></span>) ]
if (tripcode) nameHtml.push(' ', <span class="postertrip">{tripcode}</span>)
if (pass)
nameHtml.push(
' ',
<span title={`Pass user since ${pass}`} class="n-pu"></span>,
)
if (capcode) { if (capcode) {
nameHtml.push( nameHtml.push(
' ', ' ',
<strong class={`capcode hand id_${capcodeLC}`} title={`Highlight posts by ${capcodePlural}`}>## {capcode}</strong> <strong
class={`capcode hand id_${capcodeLC}`}
title={`Highlight posts by ${capcodePlural}`}
>
## {capcode}
</strong>,
) )
} }
const nameBlockContent: (EscapedHtml | string)[] = const nameBlockContent: (EscapedHtml | string)[] = email
email ? [' ', <a href={`mailto:${email}`} class="useremail">{...nameHtml}</a>] : nameHtml; ? [
if (!(boardID === "f" && !o.isReply || capcodeDescription)) nameBlockContent.push(' '); ' ',
<a href={`mailto:${email}`} class="useremail">
{...nameHtml}
</a>,
]
: nameHtml
if (!((boardID === 'f' && !o.isReply) || capcodeDescription))
nameBlockContent.push(' ')
if (capcodeDescription) { if (capcodeDescription) {
nameBlockContent.push( nameBlockContent.push(
<img <img
@ -26,66 +64,116 @@ export default function generatePostInfoHtml(
alt={`${capcode} Icon}`} alt={`${capcode} Icon}`}
title={`This user is ${capcodeDescription}.`} title={`This user is ${capcodeDescription}.`}
class="identityIcon retina" class="identityIcon retina"
/> />,
); )
if (uniqueID && !capcode) { if (uniqueID && !capcode) {
nameBlockContent.push( nameBlockContent.push(
<span class={`posteruid id_${uniqueID}`}> <span class={`posteruid id_${uniqueID}`}>
(ID: <span class="hand" title="Highlight posts by this ID">${uniqueID}</span>) (ID:{' '}
</span> <span class="hand" title="Highlight posts by this ID">
${uniqueID}
</span>
)
</span>,
) )
} }
} }
if (flagCode) nameBlockContent.push(' ', <span title={flag} class={`flag flag-${flagCode.toLowerCase()}`} />); if (flagCode)
if (flagCodeTroll) nameBlockContent.push(' ', <span title={flag} class={`bfl bfl-${flagCodeTroll.toLowerCase()}`} />); nameBlockContent.push(
' ',
<span title={flag} class={`flag flag-${flagCode.toLowerCase()}`} />,
)
if (flagCodeTroll)
nameBlockContent.push(
' ',
<span title={flag} class={`bfl bfl-${flagCodeTroll.toLowerCase()}`} />,
)
const postNumContent: (EscapedHtml | string)[] = [ const postNumContent: (EscapedHtml | string)[] = [
<a href={postLink} title="Link to this post">No.</a>, <a href={postLink} title="Link to this post">
<a href={quoteLink} title="Reply to this post">{ID}</a>, No.
]; </a>,
<a href={quoteLink} title="Reply to this post">
{ID}
</a>,
]
if (o.isSticky) { if (o.isSticky) {
const src = `${staticPath}sticky${gifIcon}`; const src = `${staticPath}sticky${gifIcon}`
postNumContent.push(' '); postNumContent.push(' ')
if (boardID === "f") { if (boardID === 'f') {
postNumContent.push(<img src={src} alt="Sticky" title="Sticky" style="height: 18px; width: 18px;" />); postNumContent.push(
<img
src={src}
alt="Sticky"
title="Sticky"
style="height: 18px; width: 18px;"
/>,
)
} else { } else {
postNumContent.push(<img src={src} alt="Sticky" title="Sticky" class="stickyIcon retina" />) postNumContent.push(
<img src={src} alt="Sticky" title="Sticky" class="stickyIcon retina" />,
)
} }
} }
if (o.isClosed && !o.isArchived) { if (o.isClosed && !o.isArchived) {
postNumContent.push(' '); postNumContent.push(' ')
const src = `${staticPath}closed${gifIcon}` const src = `${staticPath}closed${gifIcon}`
if (boardID === "f") { if (boardID === 'f') {
postNumContent.push(<img src={src} alt="Closed" title="Closed" style="height: 18px; width: 18px;" />) postNumContent.push(
<img
src={src}
alt="Closed"
title="Closed"
style="height: 18px; width: 18px;"
/>,
)
} else { } else {
postNumContent.push(<img src={src} alt="Closed" title="Closed" class="closedIcon retina" />) postNumContent.push(
<img src={src} alt="Closed" title="Closed" class="closedIcon retina" />,
)
} }
} }
if (o.isArchived) { if (o.isArchived) {
postNumContent.push( postNumContent.push(
' ', ' ',
<img src={`${staticPath}archived${gifIcon}`} alt="Archived" title="Archived" class="archivedIcon retina" /> <img
src={`${staticPath}archived${gifIcon}`}
alt="Archived"
title="Archived"
class="archivedIcon retina"
/>,
) )
} }
if (!o.isReply && g.VIEW === "index") { if (!o.isReply && g.VIEW === 'index') {
// \u00A0 is nbsp // \u00A0 is nbsp
postNumContent.push(' \u00A0 ') postNumContent.push(' \u00A0 ')
postNumContent.push(<span>[<a href={`/${boardID}/thread/${threadID}`} class="replylink">Reply</a>]</span>) postNumContent.push(
<span>
[
<a href={`/${boardID}/thread/${threadID}`} class="replylink">
Reply
</a>
]
</span>,
)
} }
return <div class="postInfo desktop" id={`pi${ID}`}> return (
<input type="checkbox" name={ID} value="delete" /> <div class="postInfo desktop" id={`pi${ID}`}>
{' '} <input type="checkbox" name={ID} value="delete" />{' '}
{...((!o.isReply || boardID === "f" || subject) ? [<span class="subject">{subject}</span>, ' '] : [])} {...!o.isReply || boardID === 'f' || subject
<span class={`nameBlock${capcode || ''}`}> ? [<span class="subject">{subject}</span>, ' ']
{...nameBlockContent} : []}
</span> <span class={`nameBlock${capcode || ''}`}>{...nameBlockContent}</span>{' '}
{' '} <span class="dateTime" data-utc={dateUTC}>
<span class="dateTime" data-utc={dateUTC}>{dateText}</span> {dateText}
{' '} </span>{' '}
<span class={`postNum${!(boardID === " f" && !o.isReply) ? ' desktop' : ''}`} > <span
{...postNumContent} class={`postNum${!(boardID === ' f' && !o.isReply) ? ' desktop' : ''}`}
</span> >
</div>; {...postNumContent}
</span>
</div>
)
} }