Vylepšení JS na otvírání obrázků

Tento commit je obsažen v:
sneedmaster 2024-02-19 18:02:41 +01:00
rodič eecc1a191c
revize dc07e1f650
8 změnil soubory, kde provedl 95 přidání a 73 odebrání

Zobrazit soubor

@ -19,32 +19,32 @@ $(function () {
}); });
function toggle_image(parent, src_link) { function toggle_image(parent, src_link) {
let expanded = parent.hasClass("expanded");
let thumb = parent.find(".thumb"); let thumb = parent.find(".thumb");
let src = parent.find(".src"); let src = parent.find(".src");
if (!expanded) {
if (src.length === 0) { if (src.length === 0) {
thumb.css("opacity", 0.5); thumb.addClass("loading");
parent.append(`<img class="src" src="${src_link}">`); parent.append(`<img class="src" src="${src_link}">`);
let src = parent.find(".src"); let src = parent.find(".src");
src.hide(); src.hide();
src.on("load", function () { src.on("load", function () {
thumb.removeClass("loading");
thumb.hide(); thumb.hide();
thumb.css("opacity", "");
src.show(); src.show();
parent.closest(".post-files").addClass("float-none-b");
}); });
} else {
thumb.hide(); return;
src.show();
}
} else {
src.hide();
thumb.show();
} }
thumb.toggle();
src.toggle();
parent.closest(".post-files").toggleClass("float-none-b");
} }
function toggle_video(parent, src_link) { function toggle_video(parent, src_link) {
@ -52,13 +52,13 @@ function toggle_video(parent, src_link) {
let thumb = parent.find(".thumb"); let thumb = parent.find(".thumb");
let src = parent.parent().find(".src"); let src = parent.parent().find(".src");
if (!expanded) {
if (src.length === 0) { if (src.length === 0) {
thumb.css("opacity", 0.5); thumb.addClass("loading");
parent.append('<span class="closer">[Zavřít]<br></span>') parent.append('<b class="closer">[Zavřít]<br></b>');
parent
parent.parent().append( .parent()
.append(
`<video class="src" src="${src_link}" autoplay="" controls="" loop=""></video>` `<video class="src" src="${src_link}" autoplay="" controls="" loop=""></video>`
); );
@ -67,20 +67,26 @@ function toggle_video(parent, src_link) {
src.hide(); src.hide();
src.on("loadstart", function () { src.on("loadstart", function () {
thumb.removeClass("loading");
thumb.hide(); thumb.hide();
thumb.css("opacity", "");
src.show(); src.show();
parent.closest(".post-files").addClass("float-none-b");
}); });
} else {
thumb.hide(); return;
src.show();
src.get(0).play();
parent.find(".closer").show();
} }
} else {
thumb.toggle();
src.toggle();
if (expanded) {
src.get(0).pause(); src.get(0).pause();
src.hide(); src.get(0).currentTime = 0;
thumb.show(); } else {
parent.find(".closer").hide(); src.get(0).play();
} }
parent.closest(".post-files").toggleClass("float-none-b");
parent.find(".closer").toggle();
} }

Zobrazit soubor

@ -208,6 +208,11 @@ summary {
float: right; float: right;
} }
.float-none-a,
.float-none-b {
float: none !important;
}
.fixed-table { .fixed-table {
table-layout: fixed; table-layout: fixed;
} }
@ -301,6 +306,7 @@ summary {
} }
.post-header input[type="checkbox"] { .post-header input[type="checkbox"] {
height: 1em;
vertical-align: middle; vertical-align: middle;
margin: 0; margin: 0;
} }
@ -354,10 +360,6 @@ summary {
margin: 0 8px 8px 8px; margin: 0 8px 8px 8px;
} }
.multi-files {
float: none;
}
.post-file { .post-file {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
@ -472,3 +474,9 @@ summary {
height: 220px; height: 220px;
} }
} }
/* Only in JS */
.loading {
opacity: 0.5;
}

Zobrazit soubor

@ -11,6 +11,7 @@
<link rel="stylesheet" href="/static/style.css"> <link rel="stylesheet" href="/static/style.css">
<script src="/static/js/jquery.min.js"></script> <script src="/static/js/jquery.min.js"></script>
<script src="/static/js/expand-image.js"></script> <script src="/static/js/expand-image.js"></script>
{% block scripts %}{% endblock %}
</head> </head>
<body id="top"> <body id="top">
<div class="board-links header"> <div class="board-links header">

Zobrazit soubor

@ -29,7 +29,13 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="label">Soubory</td> <td class="label">
{% if board.config.0.file_limit > 1 %}
Soubory <span class="small">(max {{ board.config.0.file_limit }})</span>
{% else %}
Soubor
{% endif %}
</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="files[]" type="file"{% if board.config.0.file_limit > 1 %} multiple="multiple"{% endif %}{% if (!reply && board.config.0.require_thread_file) || (reply && board.config.0.require_reply_file) %} required=""{% endif %}> <input name="files[]" type="file"{% if board.config.0.file_limit > 1 %} multiple="multiple"{% endif %}{% if (!reply && board.config.0.require_thread_file) || (reply && board.config.0.require_reply_file) %} required=""{% endif %}>

Zobrazit soubor

@ -40,10 +40,10 @@
{% endif %} {% endif %}
</div> </div>
{% if !post.files.0.is_empty() %} {% if !post.files.0.is_empty() %}
<div class="post-files{% if post.files.0.len() > 1 %} multi-files{% endif %}"> <div class="post-files{% if post.files.0.len() > 1 %} float-none-a{% endif %}">
{% for file in post.files.0 %} {% for file in post.files.0 %}
<div class="post-file"> <div class="post-file">
<a title="Stáhnout ({{ file.original_name }})" download="{{ file.original_name }}" href="{{ file.file_url() }}"> <a title="Stáhnout {{ file.original_name }}" download="{{ file.original_name }}" href="{{ file.file_url() }}">
{% if file.spoiler %} {% if file.spoiler %}
[Spoiler] [Spoiler]
{% else %} {% else %}

Zobrazit soubor

@ -16,7 +16,7 @@
<td class="label">Uzamknout nástěnku</td> <td class="label">Uzamknout nástěnku</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="locked" type="checkbox" {% if board.config.0.locked %}checked="checked"{% endif %}> <input name="locked" type="checkbox" {% if board.config.0.locked %}checked=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -55,7 +55,7 @@
<td class="label">Identifikátory (anti-samefag)</td> <td class="label">Identifikátory (anti-samefag)</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="user_ids" type="checkbox" {% if board.config.0.user_ids %}checked="checked"{% endif %}> <input name="user_ids" type="checkbox" {% if board.config.0.user_ids %}checked=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -64,7 +64,7 @@
<td class="label">Vlajky</td> <td class="label">Vlajky</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="flags" type="checkbox" {% if board.config.0.flags %}checked="checked"{% endif %}> <input name="flags" type="checkbox" {% if board.config.0.flags %}checked=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -118,7 +118,7 @@
<td class="label">Vyžadovat obsah ve vlákně</td> <td class="label">Vyžadovat obsah ve vlákně</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="require_thread_content" type="checkbox" {% if board.config.0.require_thread_content %}checked="checked"{% endif %}> <input name="require_thread_content" type="checkbox" {% if board.config.0.require_thread_content %}checked=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -127,7 +127,7 @@
<td class="label">Vyžadovat soubor ve vlákně</td> <td class="label">Vyžadovat soubor ve vlákně</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="require_thread_file" type="checkbox" {% if board.config.0.require_thread_file %}checked="checked"{% endif %}> <input name="require_thread_file" type="checkbox" {% if board.config.0.require_thread_file %}checked=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -136,7 +136,7 @@
<td class="label">Vyžadovat obsah v odpovědi</td> <td class="label">Vyžadovat obsah v odpovědi</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="require_reply_content" type="checkbox" {% if board.config.0.require_reply_content %}checked="checked"{% endif %}> <input name="require_reply_content" type="checkbox" {% if board.config.0.require_reply_content %}checked=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -145,7 +145,7 @@
<td class="label">Vyžadovat soubor v odpovědi</td> <td class="label">Vyžadovat soubor v odpovědi</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="require_reply_file" type="checkbox" {% if board.config.0.require_reply_file %}checked="checked"{% endif %}> <input name="require_reply_file" type="checkbox" {% if board.config.0.require_reply_file %}checked=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -154,7 +154,7 @@
<td class="label">Antispam</td> <td class="label">Antispam</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="antispam" type="checkbox" {% if board.config.0.antispam %}checked="checked"{% endif %}> <input name="antispam" type="checkbox" {% if board.config.0.antispam %}checked=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>

Zobrazit soubor

@ -20,7 +20,7 @@
<td class="label">Upravit příspěvky</td> <td class="label">Upravit příspěvky</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="edit_posts" type="checkbox"{% if account.perms().edit_posts() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}> <input name="edit_posts" type="checkbox"{% if account.perms().edit_posts() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -29,7 +29,7 @@
<td class="label">Spravovat příspěvky</td> <td class="label">Spravovat příspěvky</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="manage_posts" type="checkbox"{% if account.perms().manage_posts() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}> <input name="manage_posts" type="checkbox"{% if account.perms().manage_posts() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -38,7 +38,7 @@
<td class="label">Používat capcode</td> <td class="label">Používat capcode</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="capcodes" type="checkbox"{% if account.perms().capcodes() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}> <input name="capcodes" type="checkbox"{% if account.perms().capcodes() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -47,7 +47,7 @@
<td class="label">Vlastní capcode</td> <td class="label">Vlastní capcode</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="custom_capcodes" type="checkbox"{% if account.perms().custom_capcodes() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}> <input name="custom_capcodes" type="checkbox"{% if account.perms().custom_capcodes() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -56,7 +56,7 @@
<td class="label">Záznamy</td> <td class="label">Záznamy</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="staff_log" type="checkbox"{% if account.perms().staff_log() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}> <input name="staff_log" type="checkbox"{% if account.perms().staff_log() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -65,7 +65,7 @@
<td class="label">Hlášení</td> <td class="label">Hlášení</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="reports" type="checkbox"{% if account.perms().reports() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}> <input name="reports" type="checkbox"{% if account.perms().reports() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -74,7 +74,7 @@
<td class="label">Bany</td> <td class="label">Bany</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="bans" type="checkbox"{% if account.perms().bans() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}> <input name="bans" type="checkbox"{% if account.perms().bans() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -83,7 +83,7 @@
<td class="label">Bannery</td> <td class="label">Bannery</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="banners" type="checkbox"{% if account.perms().banners() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}> <input name="banners" type="checkbox"{% if account.perms().banners() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -92,7 +92,7 @@
<td class="label">Nastavení nástěnek</td> <td class="label">Nastavení nástěnek</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="board_config" type="checkbox"{% if account.perms().board_config() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}> <input name="board_config" type="checkbox"{% if account.perms().board_config() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -101,7 +101,7 @@
<td class="label">Novinky</td> <td class="label">Novinky</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="news" type="checkbox"{% if account.perms().news() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}> <input name="news" type="checkbox"{% if account.perms().news() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -110,7 +110,7 @@
<td class="label">Uklízečtext (pravý redtext)</td> <td class="label">Uklízečtext (pravý redtext)</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="jannytext" type="checkbox"{% if account.perms().jannytext() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}> <input name="jannytext" type="checkbox"{% if account.perms().jannytext() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -119,7 +119,7 @@
<td class="label">Zobrazit IP adresy</td> <td class="label">Zobrazit IP adresy</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="view_ips" type="checkbox"{% if account.perms().view_ips() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}> <input name="view_ips" type="checkbox"{% if account.perms().view_ips() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -128,7 +128,7 @@
<td class="label">Obejít ban</td> <td class="label">Obejít ban</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="bypass_bans" type="checkbox"{% if account.perms().bypass_bans() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}> <input name="bypass_bans" type="checkbox"{% if account.perms().bypass_bans() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -137,7 +137,7 @@
<td class="label">Obejít uzamčení nástěnky</td> <td class="label">Obejít uzamčení nástěnky</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="bypass_board_lock" type="checkbox"{% if account.perms().bypass_board_lock() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}> <input name="bypass_board_lock" type="checkbox"{% if account.perms().bypass_board_lock() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -146,7 +146,7 @@
<td class="label">Obejít uzamčení vlákna</td> <td class="label">Obejít uzamčení vlákna</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="bypass_thread_lock" type="checkbox"{% if account.perms().bypass_thread_lock() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}> <input name="bypass_thread_lock" type="checkbox"{% if account.perms().bypass_thread_lock() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -155,7 +155,7 @@
<td class="label">Obejít CAPTCHA</td> <td class="label">Obejít CAPTCHA</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="bypass_captcha" type="checkbox"{% if account.perms().bypass_captcha() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}> <input name="bypass_captcha" type="checkbox"{% if account.perms().bypass_captcha() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>
@ -164,7 +164,7 @@
<td class="label">Obejít antispam</td> <td class="label">Obejít antispam</td>
<td> <td>
<div class="input-wrapper"> <div class="input-wrapper">
<input name="bypass_antispam" type="checkbox"{% if account.perms().bypass_antispam() %} checked="checked"{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}> <input name="bypass_antispam" type="checkbox"{% if account.perms().bypass_antispam() %} checked=""{% endif %}{% if !tcx.perms.owner() %} disabled=""{% endif %}>
</div> </div>
</td> </td>
</tr> </tr>

Zobrazit soubor

@ -6,6 +6,7 @@
{% block theme %}{{ board.config.0.board_theme }}{% endblock %} {% block theme %}{{ board.config.0.board_theme }}{% endblock %}
{% block title %}/{{ board.id }}/ - {{ thread.content_nomarkup|inline_post }}{% endblock %} {% block title %}/{{ board.id }}/ - {{ thread.content_nomarkup|inline_post }}{% endblock %}
{% block scripts %}<script src="/static/js/update-thread.js"></script>{% endblock %}
{% block content %} {% block content %}
<div class="container"> <div class="container">