romanmir/TorrentParts
1
0
Fork 0
mirror of https://github.com/leoherzog/TorrentParts.git synced 2026-01-24 04:08:04 -08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor UI to Use Semantic HTML Elements

Browse Source
This commit is contained in:
Leo Herzog
2025-12-22 22:01:18 -05:00
parent 615fe5092c
commit 570df30bcc
3 changed files with 121 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
index.html
View File

@@ -54,6 +54,7 @@
<a class="github-button" href="https://github.com/leoherzog/TorrentParts" data-icon="octicon-star" data-show-count="true" aria-label="Star TorrentParts on GitHub">Star</a> <a class="github-button" href="https://github.com/leoherzog/TorrentParts" data-icon="octicon-star" data-show-count="true" aria-label="Star TorrentParts on GitHub">Star</a>
</header> </header>
<form id="startForm">
<div id="startButtons"> <div id="startButtons">
<input id="magnet" type="text" placeholder="Enter URL" aria-label="Enter URL and press enter" /> <input id="magnet" type="text" placeholder="Enter URL" aria-label="Enter URL and press enter" />
@@ -67,21 +68,22 @@
</label> </label>
</div> </div>
</form>
<div id="examples"> <section id="examples">
<div>...or, try some examples!</div> <div>...or, try some examples!</div>
<button id="example1" aria-label="Load Magnet Example"><span class="fal fa-magnet" aria-hidden="true"></span> Magnet URL</button> <button id="example1" aria-label="Load Magnet Example"><span class="fal fa-magnet" aria-hidden="true"></span> Magnet URL</button>
<button id="example2" aria-label="Load URL to Torrent File Example"><span class="fal fa-link" aria-hidden="true"></span> URL to Torrent File</button> <button id="example2" aria-label="Load URL to Torrent File Example"><span class="fal fa-link" aria-hidden="true"></span> URL to Torrent File</button>
<button id="example3" aria-label="Load Torrent File Example"><span class="fal fa-file-alt" aria-hidden="true"></span> Torrent File</button> <button id="example3" aria-label="Load Torrent File Example"><span class="fal fa-file-alt" aria-hidden="true"></span> Torrent File</button>
</div> </section>
<div id="properties" style="display:none"> <main id="properties" style="display:none">
<button id="reset" aria-label="Reset the page"> <button id="reset" aria-label="Reset the page">
<span class="far fa-times"></span> <span class="far fa-times"></span>
</button> </button>
<div id="share"> <nav id="share">
<a id="openURLWrapper" target="_blank"> <a id="openURLWrapper" target="_blank">
<button id="openURL" aria-label="Open this Magnet URL in your Torrent client"> <button id="openURL" aria-label="Open this Magnet URL in your Torrent client">
<span class="fas fa-arrow-up-right-from-square fa-2x"></span> <span class="fas fa-arrow-up-right-from-square fa-2x"></span>
@@ -102,37 +104,46 @@
<span class="fas fa-file-download fa-2x"></span> <span class="fas fa-file-download fa-2x"></span>
</button> </button>
</div> </div>
</div> </nav>
<div class="property"> <fieldset class="property">
<legend>
<span class="info" data-tippy-content="This is the unique identifier that makes Torrents work. All of the files contained in this Torrent are run through an algorithm that generates a unique string, or &ldquo;hash&rdquo;."><span class="far fa-info-circle"></span></span>
Unique Hash
</legend>
<div class="labels"> <div class="labels">
<div> <div>
<span class="info" data-tippy-content="This is the unique identifier that makes Torrents work. All of the files contained in this Torrent are run through an algorithm that generates a unique string, or &ldquo;hash&rdquo;."><span class="far fa-info-circle"></span></span> <label for="hash" class="sr-only">Unique Hash</label>
<label for="hash">Unique Hash</label>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<input id="hash" type="text" placeholder="" disabled/> <input id="hash" type="text" placeholder="" disabled/>
</div> </div>
</div> </fieldset>
<div class="property"> <fieldset class="property">
<legend>
<span class="info" data-tippy-content="An optional title specified by the creator"><span class="far fa-info-circle"></span></span>
Torrent Name
</legend>
<div class="labels"> <div class="labels">
<div> <div>
<span class="info" data-tippy-content="An optional title specified by the creator"><span class="far fa-info-circle"></span></span> <label for="name" class="sr-only">Torrent Name</label>
<label for="name">Torrent Name</label>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<input id="name" type="text" placeholder="Unnamed" dir="auto" /> <input id="name" type="text" placeholder="Unnamed" dir="auto" />
</div> </div>
</div> </fieldset>
<div class="property"> <fieldset class="property">
<legend>
<span class="info" data-tippy-content="Data embedded into a Torrent file that says what program created it and when. Not included in Magnet links."><span class="far fa-info-circle"></span></span>
Created
</legend>
<div class="labels"> <div class="labels">
<div> <div>
<span class="info" data-tippy-content="Data embedded into a Torrent file that says what program created it and when. Not included in Magnet links."><span class="far fa-info-circle"></span></span> <label for="created" class="sr-only">Created</label>
<label for="created">Created</label>
</div> </div>
<label for="createdBy" style="display:none">Created By</label> <label for="createdBy" style="display:none">Created By</label>
</div> </div>
@@ -141,79 +152,91 @@
<br /> <br />
<input id="createdBy" type="text" placeholder="Creation client unspecified" aria-label="Creation client" disabled /> <input id="createdBy" type="text" placeholder="Creation client unspecified" aria-label="Creation client" disabled />
</div> </div>
</div> </fieldset>
<div class="property"> <fieldset class="property">
<legend>
<span class="info" data-tippy-content="An optional description specified by the creator"><span class="far fa-info-circle"></span></span>
Comment
</legend>
<div class="labels"> <div class="labels">
<div> <div>
<span class="info" data-tippy-content="An optional description specified by the creator"><span class="far fa-info-circle"></span></span> <label for="comment" class="sr-only">Comment</label>
<label for="comment">Comment</label>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<input id="comment" type="text" placeholder="Not included in the URL/File provided" dir="auto" /> <input id="comment" type="text" placeholder="Not included in the URL/File provided" dir="auto" />
</div> </div>
</div> </fieldset>
<div class="property"> <fieldset class="property">
<div class="labels"> <legend>
<div>
<span class="info" data-tippy-content="Servers that keep track of other users who are actively downloading this Torrent, called &ldquo;peers&rdquo;. Your client will contact these servers first to find out who else is available to download the files from."><span class="far fa-info-circle"></span></span> <span class="info" data-tippy-content="Servers that keep track of other users who are actively downloading this Torrent, called &ldquo;peers&rdquo;. Your client will contact these servers first to find out who else is available to download the files from."><span class="far fa-info-circle"></span></span>
<label for="announce">Tracker URLs</label> Tracker URLs
</div> </legend>
<div class="labels">
<div class="label-actions">
<a id="addTrackers">Add Known Working Trackers</a> <a id="addTrackers">Add Known Working Trackers</a>
<a id="removeTrackers">Remove All</a> <a id="removeTrackers">Remove All</a>
</div> </div>
</div>
<div class="content"> <div class="content">
<button id="addTracker" data-type="announce"> <button id="addTracker" data-type="announce">
<span class="far fa-plus-circle"></span> Add Tracker <span class="far fa-plus-circle"></span> Add Tracker
</button> </button>
<div id="announce"></div> <div id="announce"></div>
</div> </div>
</div> </fieldset>
<div class="property"> <fieldset class="property">
<div class="labels"> <legend>
<div>
<span class="info" data-tippy-content="A list of webservers on the internet that also have a copy of the file(s) in this Torrent, to use in case no peers are available"><span class="far fa-info-circle"></span></span> <span class="info" data-tippy-content="A list of webservers on the internet that also have a copy of the file(s) in this Torrent, to use in case no peers are available"><span class="far fa-info-circle"></span></span>
<label for="urlList">Webseed URLs</label> Webseed URLs
</div> </legend>
<div class="labels">
<div class="label-actions">
<a id="removeWebseeds">Remove All</a> <a id="removeWebseeds">Remove All</a>
</div> </div>
</div>
<div class="content"> <div class="content">
<button id="addWebseed" data-type="urlList"> <button id="addWebseed" data-type="urlList">
<span class="far fa-plus-circle"></span> Add Webseed <span class="far fa-plus-circle"></span> Add Webseed
</button> </button>
<div id="urlList"></div> <div id="urlList"></div>
</div> </div>
</div> </fieldset>
<div class="property"> <fieldset class="property">
<legend>
<span class="info" data-tippy-content="Torrents take files and split them into equal size pieces to make them easy to share. Piece size is configurable when a Torrent file is made."><span class="far fa-info-circle"></span></span>
Pieces
</legend>
<div class="labels"> <div class="labels">
<div> <div>
<span class="info" data-tippy-content="Torrents take files and split them into equal size pieces to make them easy to share. Piece size is configurable when a Torrent file is made."><span class="far fa-info-circle"></span></span> <label for="pieces" class="sr-only">Pieces</label>
<label for="pieces">Pieces</label>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<input id="pieces" type="text" placeholder="Not included in the URL/File provided" aria-label="Piece size and length" disabled required /> <input id="pieces" type="text" placeholder="Not included in the URL/File provided" aria-label="Piece size and length" disabled required />
</div> </div>
</div> </fieldset>
<div class="property"> <fieldset class="property">
<div class="labels"> <legend>
<div>
<span class="info" data-tippy-content="The files listed in this Torrent file. Not included in Magnet links."><span class="far fa-info-circle"></span></span> <span class="info" data-tippy-content="The files listed in this Torrent file. Not included in Magnet links."><span class="far fa-info-circle"></span></span>
<label for="files">Files</label> Files
</div> </legend>
<div class="labels">
<div class="label-actions">
<a id="getFiles">Fetch Files List from WebTorrent</a> <a id="getFiles">Fetch Files List from WebTorrent</a>
</div> </div>
</div>
<table id="files"> <table id="files">
<tbody id="filesBody"></tbody> <tbody id="filesBody"></tbody>
</table> </table>
</div> </fieldset>
</div> </main>
<footer> <footer>
<a href="https://github.com/leoherzog/TorrentParts/releases" target="_blank" rel="noopener">v2.0.1</a> <a href="https://github.com/leoherzog/TorrentParts/releases" target="_blank" rel="noopener">v2.0.1</a>

5
src/parse.js
View File

@@ -85,6 +85,11 @@ placeDownloadTooltips();
document.addEventListener('DOMContentLoaded', start); document.addEventListener('DOMContentLoaded', start);
function start() { function start() {
// form submission prevention
document.getElementById('startForm').addEventListener('submit', function (event) {
event.preventDefault();
});
// magnet input // magnet input
document.getElementById('magnet').addEventListener('keyup', function (event) { document.getElementById('magnet').addEventListener('keyup', function (event) {
event.preventDefault(); event.preventDefault();

41
src/style.css
View File

@@ -255,12 +255,29 @@ label[for="torrent"] {
display: flex; display: flex;
align-content: flex-start; align-content: flex-start;
justify-content: space-between; justify-content: space-between;
border: none;
padding: 0;
position: relative;
} }
.property:first-child { .property:first-child {
width: 240px; width: 240px;
} }
.property > legend {
position: absolute;
top: 8px;
left: 0;
width: 280px;
text-align: right;
margin: 0;
padding: 0;
text-transform: uppercase;
font-size: inherit;
font-weight: inherit;
color: inherit;
}
.labels { .labels {
width: 280px; width: 280px;
text-align: right; text-align: right;
@@ -269,7 +286,14 @@ label[for="torrent"] {
flex-direction: column; flex-direction: column;
} }
.labels > a { .label-actions {
margin-top: 26px;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.labels > a, .label-actions > a {
font-size: 80%; font-size: 80%;
margin-top: 6px; margin-top: 6px;
} }
@@ -382,8 +406,12 @@ output {
flex-direction: column; flex-direction: column;
} }
.property > label { .property > legend {
margin: 12px 0; position: static;
left: auto;
width: auto;
text-align: center;
margin-bottom: 16px;
} }
input, button { input, button {
@@ -396,6 +424,13 @@ output {
align-items: center; align-items: center;
} }
.label-actions {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 0;
}
.labels, .content, #files { .labels, .content, #files {
width: auto; width: auto;
display: flex; display: flex;