diff options
Diffstat (limited to 'emotes')
| -rw-r--r-- | emotes/index.php | 23 | ||||
| -rw-r--r-- | emotes/upload.php | 560 |
2 files changed, 289 insertions, 294 deletions
diff --git a/emotes/index.php b/emotes/index.php index 3999d8e..06d9e43 100644 --- a/emotes/index.php +++ b/emotes/index.php @@ -240,10 +240,9 @@ if (CLIENT_REQUIRES_JSON) { if (isset($_SESSION["user_role"]) && $_SESSION["user_role"]["permission_emoteset_own"]) { echo '' ?> <form action="/emotes/setmanip.php" method="POST"> - <input type="text" name="id" value="<?php echo $emote->get_id() ?>" - style="display: none;"> + <input type="text" name="id" value="<?= $emote->get_id() ?>" style="display: none;"> <input type="text" name="emote_set_id" - value="<?php echo $_SESSION["user_active_emote_set_id"] ?>" style="display: none;"> + value="<?= $_SESSION["user_active_emote_set_id"] ?>" style="display: none;"> <?php if ($added) { ?> @@ -251,13 +250,11 @@ if (CLIENT_REQUIRES_JSON) { <button type="submit" class="red">Remove from my channel</button> </form> <form action="/emotes/setmanip.php" method="POST" class="row"> - <input type="text" name="id" value="<?php echo $emote->get_id() ?>" - style="display: none;"> + <input type="text" name="id" value="<?= $emote->get_id() ?>" style="display: none;"> <input type="text" name="emote_set_id" - value="<?php echo $_SESSION["user_active_emote_set_id"] ?>" style="display: none;"> + value="<?= $_SESSION["user_active_emote_set_id"] ?>" style="display: none;"> <input type="text" name="value" id="emote-alias-input" - value="<?php echo $emote_current_name ?>" - placeholder="<?php echo $emote->get_code() ?>"> + value="<?= $emote_current_name ?>" placeholder="<?= $emote->get_code() ?>"> <input type="text" name="action" value="alias" style="display: none;"> <button type="submit" class="transparent"><img src="/static/img/icons/pencil.png" alt="Rename" title="Rename"></button> @@ -276,15 +273,13 @@ if (CLIENT_REQUIRES_JSON) { <?php if ($emote->get_uploaded_by() === $_SESSION["user_id"]): ?> <form action="/emotes/delete.php" method="post"> - <input type="text" name="id" value="<?php echo $emote->get_id() ?>" - style="display: none;"> + <input type="text" name="id" value="<?= $emote->get_id() ?>" style="display: none;"> <button type="submit" class="transparent"> <img src="/static/img/icons/bin.png" alt="Delete emote" title="Delete emote"> </button> </form> <form action="/emotes/delete.php" method="post"> - <input type="text" name="id" value="<?php echo $emote->get_id() ?>" - style="display: none;"> + <input type="text" name="id" value="<?= $emote->get_id() ?>" style="display: none;"> <input type="text" name="unlink" value="1" style="display:none"> <button type="submit" class="transparent"> <img src="/static/img/icons/link_break.png" alt="Remove your authorship" @@ -481,8 +476,8 @@ if (CLIENT_REQUIRES_JSON) { <tr> <th>Source</th> <td> - <a href="<?php echo $emote->get_source() ?>" - target="_blank"><?php echo $emote->get_source() ?></a> + <a href="<?= $emote->get_source() ?>" + target="_blank"><?= $emote->get_source() ?></a> </td> </tr> <?php endif; ?> diff --git a/emotes/upload.php b/emotes/upload.php index e509345..d931c05 100644 --- a/emotes/upload.php +++ b/emotes/upload.php @@ -46,145 +46,145 @@ if ($_SERVER['REQUEST_METHOD'] != "POST") { include "{$_SERVER['DOCUMENT_ROOT']}/lib/partials.php"; echo '' ?> - <html> - - <head> - <title>Upload an emote - <?php echo CONFIG['instance']['name'] ?></title> - <link rel="stylesheet" href="/static/style.css"> - <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon"> - </head> - - <body> - <div class="container"> - <div class="wrapper"> - <?php html_navigation_bar() ?> - <?php display_alert() ?> - - <section class="content row"> - <div class="column small-gap"> - <section class="box"> - <div class="box navtab"> - <div> - <b>Upload a new emote</b> - <p style="font-size:8px;">You can just upload, btw. Anything you want.</p> - </div> + <html> + + <head> + <title>Upload an emote - <?= CONFIG['instance']['name'] ?></title> + <link rel="stylesheet" href="/static/style.css"> + <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon"> + </head> + + <body> + <div class="container"> + <div class="wrapper"> + <?php html_navigation_bar() ?> + <?php display_alert() ?> + + <section class="content row"> + <div class="column small-gap"> + <section class="box"> + <div class="box navtab"> + <div> + <b>Upload a new emote</b> + <p style="font-size:8px;">You can just upload, btw. Anything you want.</p> + </div> + </div> + <div class="box content"> + <form action="/emotes/upload.php" method="POST" enctype="multipart/form-data"> + <h3>Image<span style="color:red;">*</span></h3> + + <input type="file" name="file" id="form-file" accept=".gif,.jpg,.jpeg,.png,.webp" + required> + + <div id="form-manual-files" style="display:none;"> + <input type="file" name="file-1x" id="form-file-1x" + accept=".gif,.jpg,.jpeg,.png,.webp"> + <label class="inline" + for="file-1x"><?= sprintf("%dx%d", CONFIG['emote']['maxsizex'] / 4, CONFIG['emote']['maxsizey'] / 4) ?></label> + <input type="file" name="file-2x" id="form-file-2x" + accept=".gif,.jpg,.jpeg,.png,.webp"> + <label class="inline" + for="file-2x"><?= sprintf("%dx%d", CONFIG['emote']['maxsizex'] / 2, CONFIG['emote']['maxsizey'] / 2) ?></label> + <input type="file" name="file-3x" id="form-file-3x" + accept=".gif,.jpg,.jpeg,.png,.webp"> + <label class="inline" + for="file-3x"><?= sprintf("%dx%d", CONFIG['emote']['maxsizex'], CONFIG['emote']['maxsizey']) ?></label> </div> - <div class="box content"> - <form action="/emotes/upload.php" method="POST" enctype="multipart/form-data"> - <h3>Image<span style="color:red;">*</span></h3> - - <input type="file" name="file" id="form-file" accept=".gif,.jpg,.jpeg,.png,.webp" - required> - - <div id="form-manual-files" style="display:none;"> - <input type="file" name="file-1x" id="form-file-1x" - accept=".gif,.jpg,.jpeg,.png,.webp"> - <label class="inline" - for="file-1x"><?php echo sprintf("%dx%d", CONFIG['emote']['maxsizex'] / 4, CONFIG['emote']['maxsizey'] / 4) ?></label> - <input type="file" name="file-2x" id="form-file-2x" - accept=".gif,.jpg,.jpeg,.png,.webp"> - <label class="inline" - for="file-2x"><?php echo sprintf("%dx%d", CONFIG['emote']['maxsizex'] / 2, CONFIG['emote']['maxsizey'] / 2) ?></label> - <input type="file" name="file-3x" id="form-file-3x" - accept=".gif,.jpg,.jpeg,.png,.webp"> - <label class="inline" - for="file-3x"><?php echo sprintf("%dx%d", CONFIG['emote']['maxsizex'], CONFIG['emote']['maxsizey']) ?></label> - </div> - - <div> - <label for="manual" class="inline">Manual resize</label> - <input type="checkbox" name="manual" value="1" onchange="display_manual_resize()"> - </div> - - <h3>Emote name<span style="color:red;">*</span></h3> - <input type="text" name="code" id="code" required> - - <div> - <label for="visibility" class="inline">Emote visibility: </label> - <select name="visibility" id="form-visibility"> - <option value="1">Public</option> - <option value="0">Unlisted</option> - </select><br> - <p id="form-visibility-description" style="font-size: 10px;">test</p> - </div> - - <label for="notes">Approval notes</label> - <textarea name="notes" id="form-notes"></textarea> - - <table class="vertical left font-weight-normal"> - <tr> - <th>Emote source:</th> - <td class="flex"><input class="grow" name="source" id="form-source"></input> - </td> - </tr> - <?php if (CONFIG['tags']['enable'] && CONFIG['tags']['maxcount'] != 0): ?> - <tr> - <th>Tags <span class="font-small" style="cursor: help;" title="<?php - echo 'Tags are used for fast search. '; - if (CONFIG['tags']['maxcount'] > 0) { - echo 'You can use ' . CONFIG['tags']['maxcount'] . ' tags. '; - } - echo 'They are space-separated o algo.'; - ?>">[?]</span>: - </th> - <td class="flex"><input class="grow" name="tags" id="form-tags"></input></td> - </tr> - <?php endif; ?> - </table> - - <div> - <label for="tos" class="inline">Do you accept <a href="/rules.php" - target="_BLANK">the - rules</a>?<span style="color:red;">*</span></label> - <input type="checkbox" name="tos" value="1" required> - </div> - - <button type="submit" id="upload-button">Upload as - <?php echo $uploader_name ?></button> - </form> + + <div> + <label for="manual" class="inline">Manual resize</label> + <input type="checkbox" name="manual" value="1" onchange="display_manual_resize()"> </div> - </section> - <?php - if (CONFIG['captcha']['enable'] && (CONFIG['captcha']['force'] || !isset($_SESSION["user_id"]))) { - html_captcha_form(); - } - ?> - </div> + <h3>Emote name<span style="color:red;">*</span></h3> + <input type="text" name="code" id="code" required> - <div class="column small-gap grow" id="emote-showcase" style="display: none;"> - <!-- Emote Preview --> - <section class="box"> - <div class="box navtab"> - Emote Preview - <span id="emote-name"><i>Empty</i></span> + <div> + <label for="visibility" class="inline">Emote visibility: </label> + <select name="visibility" id="form-visibility"> + <option value="1">Public</option> + <option value="0">Unlisted</option> + </select><br> + <p id="form-visibility-description" style="font-size: 10px;">test</p> </div> - <div class="box content"> - <div class="emote-showcase items-bottom"> - <div class="emote-image column items-center small-gap"> - <img src="" alt="" class="emote-image-1x"> - <p class="size font-small"></p> - </div> - <div class="emote-image column items-center small-gap"> - <img src="" alt="" class="emote-image-2x"> - <p class="size font-small"></p> - </div> - <div class="emote-image column items-center small-gap"> - <img src="" alt="" class="emote-image-3x"> - <p class="size font-small"></p> - </div> - </div> - <p style="font-size: 12px;">The result may differ.</p> + + <label for="notes">Approval notes</label> + <textarea name="notes" id="form-notes"></textarea> + + <table class="vertical left font-weight-normal"> + <tr> + <th>Emote source:</th> + <td class="flex"><input class="grow" name="source" id="form-source"></input> + </td> + </tr> + <?php if (CONFIG['tags']['enable'] && CONFIG['tags']['maxcount'] != 0): ?> + <tr> + <th>Tags <span class="font-small" style="cursor: help;" title="<?php + echo 'Tags are used for fast search. '; + if (CONFIG['tags']['maxcount'] > 0) { + echo 'You can use ' . CONFIG['tags']['maxcount'] . ' tags. '; + } + echo 'They are space-separated o algo.'; + ?>">[?]</span>: + </th> + <td class="flex"><input class="grow" name="tags" id="form-tags"></input></td> + </tr> + <?php endif; ?> + </table> + + <div> + <label for="tos" class="inline">Do you accept <a href="/rules.php" + target="_BLANK">the + rules</a>?<span style="color:red;">*</span></label> + <input type="checkbox" name="tos" value="1" required> </div> - </section> - <!-- Chat Preview --> - <section class="box"> - <div class="box navtab"> - Chat Preview + <button type="submit" id="upload-button">Upload as + <?= $uploader_name ?></button> + </form> + </div> + </section> + + <?php + if (CONFIG['captcha']['enable'] && (CONFIG['captcha']['force'] || !isset($_SESSION["user_id"]))) { + html_captcha_form(); + } + ?> + </div> + + <div class="column small-gap grow" id="emote-showcase" style="display: none;"> + <!-- Emote Preview --> + <section class="box"> + <div class="box navtab"> + Emote Preview - <span id="emote-name"><i>Empty</i></span> + </div> + <div class="box content"> + <div class="emote-showcase items-bottom"> + <div class="emote-image column items-center small-gap"> + <img src="" alt="" class="emote-image-1x"> + <p class="size font-small"></p> + </div> + <div class="emote-image column items-center small-gap"> + <img src="" alt="" class="emote-image-2x"> + <p class="size font-small"></p> </div> - <div class="box content no-gap column chat rounded"> - <?php - $stmt = $db->query("SELECT u.username, + <div class="emote-image column items-center small-gap"> + <img src="" alt="" class="emote-image-3x"> + <p class="size font-small"></p> + </div> + </div> + <p style="font-size: 12px;">The result may differ.</p> + </div> + </section> + + <!-- Chat Preview --> + <section class="box"> + <div class="box navtab"> + Chat Preview + </div> + <div class="box content no-gap column chat rounded"> + <?php + $stmt = $db->query("SELECT u.username, CASE WHEN ub.badge_id IS NOT NULL THEN ub.badge_id WHEN r.badge_id IS NOT NULL THEN r.badge_id @@ -197,191 +197,191 @@ if ($_SERVER['REQUEST_METHOD'] != "POST") { ORDER BY RAND() LIMIT 3 "); - while ($row = $stmt->fetch()) { - echo '<div class="row small-gap items-center chat-message">'; + while ($row = $stmt->fetch()) { + echo '<div class="row small-gap items-center chat-message">'; - if ($row["badge_id"]) { - echo '<img src="/static/userdata/badges/' . $row["badge_id"] . '/1x.webp" alt="" title="" /> '; - } + if ($row["badge_id"]) { + echo '<img src="/static/userdata/badges/' . $row["badge_id"] . '/1x.webp" alt="" title="" /> '; + } - echo '<span style="color: rgb(' . random_int(128, 255) . ', ' . random_int(128, 255) . ', ' . random_int(128, 255) . ')">'; - echo $row["username"]; - echo ': </span>'; + echo '<span style="color: rgb(' . random_int(128, 255) . ', ' . random_int(128, 255) . ', ' . random_int(128, 255) . ')">'; + echo $row["username"]; + echo ': </span>'; - echo '<img src="" alt="" class="emote-image-1x">'; + echo '<img src="" alt="" class="emote-image-1x">'; - echo '</div>'; - } - ?> - </div> - </section> + echo '</div>'; + } + ?> </div> </section> </div> - </div> - </body> - - <script> - const max_width = <?php echo CONFIG['emote']['maxsizex'] ?>; - const max_height = <?php echo CONFIG['emote']['maxsizey'] ?>; - - const fileInput = document.getElementById("form-file"); - const showcase = document.getElementById("emote-showcase"); - const reader = new FileReader(); - - let manual = false; - - fileInput.addEventListener("change", (e) => { - if (manual) return; - - showcase.style.display = "flex"; - reader.readAsDataURL(e.target.files[0]); - reader.onload = (e) => { - const image = new Image(); - image.src = e.target.result; - image.onload = () => { - let m = 1; - - for (let i = 3; i > 0; i--) { - place_image(i, m, e, image); - m *= 2; - } - }; - }; - }); + </section> + </div> + </div> + </body> + + <script> + const max_width = <?= CONFIG['emote']['maxsizex'] ?>; + const max_height = <?= CONFIG['emote']['maxsizey'] ?>; + + const fileInput = document.getElementById("form-file"); + const showcase = document.getElementById("emote-showcase"); + const reader = new FileReader(); + + let manual = false; + + fileInput.addEventListener("change", (e) => { + if (manual) return; + + showcase.style.display = "flex"; + reader.readAsDataURL(e.target.files[0]); + reader.onload = (e) => { + const image = new Image(); + image.src = e.target.result; + image.onload = () => { + let m = 1; + + for (let i = 3; i > 0; i--) { + place_image(i, m, e, image); + m *= 2; + } + }; + }; + }); - const code = document.getElementById("code"); + const code = document.getElementById("code"); - code.addEventListener("input", (e) => { - const regex = <?php echo CONFIG['emote']['nameregex'] ?>; + code.addEventListener("input", (e) => { + const regex = <?= CONFIG['emote']['nameregex'] ?>; - if (regex.test(e.target.value) && e.target.value.length <= <?php echo CONFIG['emote']['maxnamelength'] ?>) { - validCode = e.target.value; - } else { - e.target.value = validCode; - } + if (regex.test(e.target.value) && e.target.value.length <= <?= CONFIG['emote']['maxnamelength'] ?>) { + validCode = e.target.value; + } else { + e.target.value = validCode; + } - document.getElementById("emote-name").innerHTML = e.target.value ? e.target.value : "<i>Empty</i>"; - }); + document.getElementById("emote-name").innerHTML = e.target.value ? e.target.value : "<i>Empty</i>"; + }); - const visibility = document.getElementById("form-visibility"); - visibility.addEventListener("change", (e) => { - set_form_visibility_description(visibility.value); - }); + const visibility = document.getElementById("form-visibility"); + visibility.addEventListener("change", (e) => { + set_form_visibility_description(visibility.value); + }); - function set_form_visibility_description(visibility) { - const p = document.getElementById("form-visibility-description"); + function set_form_visibility_description(visibility) { + const p = document.getElementById("form-visibility-description"); - if (visibility == 1) { - p.innerHTML = "Emote won't appear on the public list until it passes a moderator's review. It still can be added to chats."; - } else { - p.innerHTML = "Emote doesn't appear on the public list and won't be subject to moderation checks. It still can be added to chats."; - } - } + if (visibility == 1) { + p.innerHTML = "Emote won't appear on the public list until it passes a moderator's review. It still can be added to chats."; + } else { + p.innerHTML = "Emote doesn't appear on the public list and won't be subject to moderation checks. It still can be added to chats."; + } + } - set_form_visibility_description(visibility.value); + set_form_visibility_description(visibility.value); - // Manual resize - function display_manual_resize() { - const manual_files = document.getElementById("form-manual-files"); + // Manual resize + function display_manual_resize() { + const manual_files = document.getElementById("form-manual-files"); - // resetting previous values - const files = document.querySelectorAll("input[type=file]"); + // resetting previous values + const files = document.querySelectorAll("input[type=file]"); - for (let file of files) { - file.value = null; - file.removeAttribute("required"); - } + for (let file of files) { + file.value = null; + file.removeAttribute("required"); + } - const fileImages = document.querySelectorAll(".emote-image img"); + const fileImages = document.querySelectorAll(".emote-image img"); - for (let file of fileImages) { - file.setAttribute("src", ""); - file.setAttribute("width", "0"); - file.setAttribute("height", "0"); - } + for (let file of fileImages) { + file.setAttribute("src", ""); + file.setAttribute("width", "0"); + file.setAttribute("height", "0"); + } - const fileSizes = document.querySelectorAll(".emote-image .size"); + const fileSizes = document.querySelectorAll(".emote-image .size"); - for (let file of fileImages) { - file.innerHTML = ""; - } + for (let file of fileImages) { + file.innerHTML = ""; + } - manual = !manual; + manual = !manual; - if (manual) { - manual_files.style.display = "block"; - fileInput.style.display = "none"; - const elements = document.querySelectorAll("#form-manual-files input[type=file]"); - for (let elem of elements) { - elem.setAttribute("required", "true"); - } - } else { - manual_files.style.display = "none"; - fileInput.style.display = "block"; - fileInput.setAttribute("required", "true"); - } - - showcase.style.display = "none"; + if (manual) { + manual_files.style.display = "block"; + fileInput.style.display = "none"; + const elements = document.querySelectorAll("#form-manual-files input[type=file]"); + for (let elem of elements) { + elem.setAttribute("required", "true"); } + } else { + manual_files.style.display = "none"; + fileInput.style.display = "block"; + fileInput.setAttribute("required", "true"); + } - document.getElementById("form-file-1x").addEventListener("change", (e) => { - showcase.style.display = "flex"; - place_image(1, 4, e, null); - }); - - document.getElementById("form-file-2x").addEventListener("change", (e) => { - showcase.style.display = "flex"; - place_image(2, 2, e, null); - }); - - document.getElementById("form-file-3x").addEventListener("change", (e) => { - showcase.style.display = "flex"; - place_image(3, 1, e, null); - }); - - function place_image(image_index, multiplier, e, image) { - let ee = e; - - if (image == null) { - reader.readAsDataURL(e.target.files[0]); - reader.onload = (e) => { - const image = new Image(); - image.src = e.target.result; - image.onload = () => { - insert_image(image_index, multiplier, e, image); - }; - } - } else { + showcase.style.display = "none"; + } + + document.getElementById("form-file-1x").addEventListener("change", (e) => { + showcase.style.display = "flex"; + place_image(1, 4, e, null); + }); + + document.getElementById("form-file-2x").addEventListener("change", (e) => { + showcase.style.display = "flex"; + place_image(2, 2, e, null); + }); + + document.getElementById("form-file-3x").addEventListener("change", (e) => { + showcase.style.display = "flex"; + place_image(3, 1, e, null); + }); + + function place_image(image_index, multiplier, e, image) { + let ee = e; + + if (image == null) { + reader.readAsDataURL(e.target.files[0]); + reader.onload = (e) => { + const image = new Image(); + image.src = e.target.result; + image.onload = () => { insert_image(image_index, multiplier, e, image); - } + }; + } + } else { + insert_image(image_index, multiplier, e, image); + } - function insert_image(i, m, e, image) { - const max_w = max_width / multiplier; - const max_h = max_height / multiplier; + function insert_image(i, m, e, image) { + const max_w = max_width / multiplier; + const max_h = max_height / multiplier; - const parentId = `.emote-image-${image_index}x`; - const imgs = document.querySelectorAll(parentId); + const parentId = `.emote-image-${image_index}x`; + const imgs = document.querySelectorAll(parentId); - for (const img of imgs) { - img.setAttribute("src", e.target.result); + for (const img of imgs) { + img.setAttribute("src", e.target.result); - let ratio = Math.min(max_w / image.width, max_h / image.height); + let ratio = Math.min(max_w / image.width, max_h / image.height); - img.setAttribute("width", Math.floor(image.width * ratio)); - img.setAttribute("height", Math.floor(image.height * ratio)); + img.setAttribute("width", Math.floor(image.width * ratio)); + img.setAttribute("height", Math.floor(image.height * ratio)); - const sizeElement = document.querySelector(`.emote-image:has(${parentId}) .size`); - sizeElement.innerHTML = `${img.getAttribute("width")}x${img.getAttribute("height")}`; - } - } + const sizeElement = document.querySelector(`.emote-image:has(${parentId}) .size`); + sizeElement.innerHTML = `${img.getAttribute("width")}x${img.getAttribute("height")}`; } - </script> + } + } + </script> - </html> + </html> - <?php - exit; + <?php + exit; } if (!CLIENT_REQUIRES_JSON && CONFIG['captcha']['enable'] && !isset($_SESSION["captcha_solved"])) { |