Version Bump

Simplify Service Worker
Refactor UI to Use Semantic HTML Elements
2026-01-23 19:58:03 -08:00 · 2025-12-22 22:06:50 -05:00 · 2025-12-22 22:06:43 -05:00 · 2025-12-22 22:01:18 -05:00 · 2025-12-22 21:58:47 -05:00 · 2025-12-22 21:57:13 -05:00
4 changed files with 224 additions and 159 deletions
--- a/index.html
+++ b/index.html
@@ -54,34 +54,36 @@
    <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>

-  <div id="startButtons">
+  <form id="startForm">
+    <div id="startButtons">

-    <input id="magnet" type="text" placeholder="Enter URL" aria-label="Enter URL and press enter" />
-    <label for="magnet" class="sr-only">
-      Enter URL and press enter
-    </label>
+      <input id="magnet" type="text" placeholder="Enter URL" aria-label="Enter URL and press enter" />
+      <label for="magnet" class="sr-only">
+        Enter URL and press enter
+      </label>

-    <input id="torrent" type="file" accept=".torrent" aria-label="Select Torrent file" />
-    <label for="torrent">
-      <span class="fas fa-cloud-upload" aria-hidden="true"></span> Select Torrent File
-    </label>
+      <input id="torrent" type="file" accept=".torrent" aria-label="Select Torrent file" />
+      <label for="torrent">
+        <span class="fas fa-cloud-upload" aria-hidden="true"></span> Select Torrent File
+      </label>

-  </div>
+    </div>
+  </form>

-  <div id="examples">
+  <section id="examples">
    <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="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>
-  </div>
+  </section>

-  <div id="properties" style="display:none">
+  <main id="properties" style="display:none">

    <button id="reset" aria-label="Reset the page">
      <span class="far fa-times"></span>
    </button>
    
-    <div id="share">
+    <nav id="share">
      <a id="openURLWrapper" target="_blank">
        <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>
@@ -102,37 +104,46 @@
          <span class="fas fa-file-download fa-2x"></span>
        </button>
      </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>
-          <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">Unique Hash</label>
+          <label for="hash" class="sr-only">Unique Hash</label>
        </div>
      </div>
      <div class="content">
        <input id="hash" type="text" placeholder="" disabled/>
      </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>
-          <span class="info" data-tippy-content="An optional title specified by the creator"><span class="far fa-info-circle"></span></span>
-          <label for="name">Torrent Name</label>
+          <label for="name" class="sr-only">Torrent Name</label>
        </div>
      </div>
      <div class="content">
        <input id="name" type="text" placeholder="Unnamed" dir="auto" />
      </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>
-          <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">Created</label>
+          <label for="created" class="sr-only">Created</label>
        </div>
        <label for="createdBy" style="display:none">Created By</label>
      </div>
@@ -141,28 +152,33 @@
        <br />
        <input id="createdBy" type="text" placeholder="Creation client unspecified" aria-label="Creation client" disabled />
      </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>
-          <span class="info" data-tippy-content="An optional description specified by the creator"><span class="far fa-info-circle"></span></span>
-          <label for="comment">Comment</label>
+          <label for="comment" class="sr-only">Comment</label>
        </div>
      </div>
      <div class="content">
        <input id="comment" type="text" placeholder="Not included in the URL/File provided" dir="auto" />
      </div>
-    </div>
+    </fieldset>

-    <div class="property">
+    <fieldset class="property">
+      <legend>
+        <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>
+        Tracker URLs
+      </legend>
      <div class="labels">
-        <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>
-          <label for="announce">Tracker URLs</label>
+        <div class="label-actions">
+          <a id="addTrackers">Add Known Working Trackers</a>
+          <a id="removeTrackers">Remove All</a>
        </div>
-        <a id="addTrackers">Add Known Working Trackers</a>
-        <a id="removeTrackers">Remove All</a>
      </div>
      <div class="content">
        <button id="addTracker" data-type="announce">
@@ -170,15 +186,17 @@
        </button>
        <div id="announce"></div>
      </div>
-    </div>
+    </fieldset>

-    <div class="property">
+    <fieldset class="property">
+      <legend>
+        <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>
+        Webseed URLs
+      </legend>
      <div class="labels">
-        <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>
-          <label for="urlList">Webseed URLs</label>
+        <div class="label-actions">
+          <a id="removeWebseeds">Remove All</a>
        </div>
-        <a id="removeWebseeds">Remove All</a>
      </div>
      <div class="content">
        <button id="addWebseed" data-type="urlList">
@@ -186,37 +204,42 @@
        </button>
        <div id="urlList"></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>
-          <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">Pieces</label>
+          <label for="pieces" class="sr-only">Pieces</label>
        </div>
      </div>
      <div class="content">
        <input id="pieces" type="text" placeholder="Not included in the URL/File provided" aria-label="Piece size and length" disabled required />
      </div>
-    </div>
+    </fieldset>

-    <div class="property">
+    <fieldset class="property">
+      <legend>
+        <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>
+        Files
+      </legend>
      <div class="labels">
-        <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>
-          <label for="files">Files</label>
+        <div class="label-actions">
+          <a id="getFiles">Fetch Files List from WebTorrent</a>
        </div>
-        <a id="getFiles">Fetch Files List from WebTorrent</a>
      </div>
      <table id="files">
        <tbody id="filesBody"></tbody>
      </table>
-    </div>
+    </fieldset>

-  </div>
+  </main>

  <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.2</a>
  </footer>

  <script type="module" src="/src/parse.js"></script>
--- a/src/parse.js
+++ b/src/parse.js
@@ -85,6 +85,11 @@ placeDownloadTooltips();
 document.addEventListener('DOMContentLoaded', start);

 function start() {
+  // form submission prevention
+  document.getElementById('startForm').addEventListener('submit', function (event) {
+    event.preventDefault();
+  });
+
  // magnet input
  document.getElementById('magnet').addEventListener('keyup', function (event) {
    event.preventDefault();
@@ -114,15 +119,16 @@ function start() {

  document.addEventListener('drop', function (event) {
    event.preventDefault();
-    event.dataTransfer.items[0]
-      .getAsFile()
-      .arrayBuffer()
-      .then(function (arrayBuffer) {
-        source = 'torrent-file';
-        originalSourceIcon.innerHTML = '<span class="fad fa-file-alt fa-fw"></span>';
-        sourceTooltip.setContent('Currently loaded information sourced from Torrent file');
-        parse(Buffer.from(arrayBuffer));
-      });
+    if (event.dataTransfer.items.length === 0) return;
+    if (event.dataTransfer.items[0].kind !== 'file') return;
+    const file = event.dataTransfer.items[0].getAsFile();
+    if (!file) return;
+    file.arrayBuffer().then(function (arrayBuffer) {
+      source = 'torrent-file';
+      originalSourceIcon.innerHTML = '<span class="fad fa-file-alt fa-fw"></span>';
+      sourceTooltip.setContent('Currently loaded information sourced from Torrent file');
+      parse(Buffer.from(arrayBuffer));
+    });
  });

  // example buttons
@@ -278,10 +284,12 @@ function display() {
      tracker.setAttribute('aria-label', 'Tracker URL #' + i);
      tracker.addEventListener('input', propertyChange);
      row.appendChild(tracker);
-      let remove = document.createElement('a');
+      let remove = document.createElement('button');
+      remove.type = 'button';
      remove.className = 'remove';
      remove.dataset.index = i;
      remove.innerHTML = '<span class="far fa-trash"></span>';
+      remove.setAttribute('aria-label', 'Remove tracker #' + i);
      remove.addEventListener('click', removeRow);
      row.appendChild(remove);
      announce.appendChild(row);
@@ -304,10 +312,12 @@ function display() {
      webseed.setAttribute('aria-label', 'Webseed URL #' + i);
      webseed.addEventListener('input', propertyChange);
      row.appendChild(webseed);
-      let remove = document.createElement('a');
+      let remove = document.createElement('button');
+      remove.type = 'button';
      remove.className = 'remove';
      remove.dataset.index = i;
      remove.innerHTML = '<span class="far fa-trash"></span>';
+      remove.setAttribute('aria-label', 'Remove webseed #' + i);
      remove.addEventListener('click', removeRow);
      row.appendChild(remove);
      urlList.appendChild(row);
@@ -339,10 +349,10 @@ function display() {
  } else {
    if (client.torrents.length > 0) {
      getFiles.style.display = 'none';
-      files.innerHTML = '<input type="text" placeholder="Attempting fetching of files from Webtorrent..." aria-label="Attempting fetching of files from Webtorrent..." disabled>';
+      files.innerHTML = '<output>Attempting fetching of files from Webtorrent...</output>';
    } else {
      getFiles.style.display = 'block';
-      files.innerHTML = '<input type="text" placeholder="Not included in the URL/File provided" aria-label="Files information not included in the URL/File provided" disabled>';
+      files.innerHTML = '<output>Not included in the URL/File provided</output>';
    }
    downloadTorrentTooltip.setContent('Files metadata is required to generate a Torrent file. Try fetching files list from WebTorrent.');
    downloadTorrent.removeEventListener('click', saveTorrent);
@@ -372,7 +382,7 @@ function createFileRow(icon, name, size) {
  if (icon) iconcell.innerHTML = '<span class="far fa-' + icon + '"></span>';
  row.appendChild(iconcell);
  let namecell = document.createElement('td');
-  namecell.innerHTML = name;
+  namecell.textContent = name;
  row.appendChild(namecell);
  let totalcell = document.createElement('td');
  totalcell.innerHTML = bytes.format(size, { decimalPlaces: 1, unitSeparator: ' ' });
@@ -458,7 +468,7 @@ async function addCurrentTrackers() {
  try {
    let response = await fetch('https://newtrackon.com/api/stable'); // get trackers with 95% uptime
    let trackers = await response.text();
-    parsed.announce = parsed.announce.concat(trackers.split('\n\n'));
+    parsed.announce = (parsed.announce || []).concat(trackers.split('\n\n'));
    parsed.announce.push('http://bt1.archive.org:6969/announce');
    parsed.announce.push('http://bt2.archive.org:6969/announce');
    parsed.announce = parsed.announce.filter((v, i) => v && parsed.announce.indexOf(v) === i); // remove duplicates and empties
@@ -504,10 +514,12 @@ function updateModified() {
 function getFilesFromPeers() {
  console.info('Attempting fetching files from Webtorrent...');
  getFiles.style.display = 'none';
-  parsed.announce.push('wss://tracker.webtorrent.io');
+  parsed.announce = parsed.announce || [];
+  parsed.announce.push('wss://tracker.webtorrent.dev');
  parsed.announce.push('wss://tracker.openwebtorrent.com');
  parsed.announce.push('wss://tracker.btorrent.xyz');
  parsed.announce.push('wss://tracker.fastcast.nz');
+  parsed.announce.push('wss://tracker.files.fm:7073/announce');
  parsed.announce = parsed.announce.filter((v, i) => v && parsed.announce.indexOf(v) === i); // remove duplicates and empties
  client.add(toMagnetURI(parsed), (torrent) => {
    parsed.info = Object.assign({}, torrent.info); // clone object
@@ -523,17 +535,13 @@ function getFilesFromPeers() {
  display();
 }

-// https://stackoverflow.com/a/36899900/2700296
 function saveTorrent() {
-  let data = toTorrentFile(parsed);
-  if (data !== null && navigator.msSaveBlob) return navigator.msSaveBlob(new Blob([data], { type: 'application/x-bittorrent' }), parsed.name + '.torrent');
-  let a = document.createElement('a');
-  a.style.display = 'none';
-  let url = window.URL.createObjectURL(new Blob([data], { type: 'application/x-bittorrent' }));
-  a.setAttribute('href', url);
-  a.setAttribute('download', parsed.name + '.torrent');
-  document.body.appendChild(a);
+  const data = toTorrentFile(parsed);
+  const blob = new Blob([data], { type: 'application/x-bittorrent' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = parsed.name + '.torrent';
  a.click();
-  window.URL.revokeObjectURL(url);
-  a.remove();
+  URL.revokeObjectURL(url);
 }
--- a/src/style.css
+++ b/src/style.css
@@ -255,12 +255,29 @@ label[for="torrent"] {
  display: flex;
  align-content: flex-start;
  justify-content: space-between;
+  border: none;
+  padding: 0;
+  position: relative;
 }

 .property:first-child {
  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 {
  width: 280px;
  text-align: right;
@@ -269,7 +286,14 @@ label[for="torrent"] {
  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%;
  margin-top: 6px;
 }
@@ -306,10 +330,35 @@ input {

 #announce > *, #urlList > * {
  margin: 0 0 16px 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }

 .remove {
-  margin-left: 6px;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  width: auto;
+  height: auto;
+  padding: 0;
+  cursor: pointer;
+  display: inline;
+  color: var(--grey);
+  flex-shrink: 0;
+}
+
+output {
+  color: rgb(120, 126, 133) !important;
+  -webkit-text-fill-color: rgb(120, 126, 133) !important;
+  background: transparent;
+  border: 0;
+  padding: 8px 0;
+  font-style: normal;
+  display: block;
+  width: 440px;
+  height: 40px;
+  box-sizing: border-box;
 }

@media (max-width: 1080px) {
@@ -357,8 +406,12 @@ input {
    flex-direction: column;
  }

-  .property > label {
-    margin: 12px 0;
+  .property > legend {
+    position: static;
+    left: auto;
+    width: auto;
+    text-align: center;
+    margin-bottom: 16px;
  }

  input, button {
@@ -371,6 +424,13 @@ input {
    align-items: center;
  }

+  .label-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 0;
+  }
+
  .labels, .content, #files {
    width: auto;
    display: flex;
@@ -378,8 +438,28 @@ input {
    align-items: center;
  }

+  output {
+    text-align: center;
+  }
+
  #announce, #urlList {
    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #announce > *, #urlList > * {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 80vw;
+    gap: 6px;
+  }
+
+  #announce > * > input, #urlList > * > input {
+    width: calc(80vw - 40px);
+    flex: none;
  }

  #announce > * > *, #urlList > * > *, #addTracker, #addWebseed, #examples > button {
--- a/src/sw.js
+++ b/src/sw.js
@@ -1,84 +1,38 @@
-const cache_name = 'torrent-parts-v1';
-const assets = ['/', '/index.html', '/src/parse.js', '/src/style.css', '/ext/alata-v9-latin-regular.woff2', '/ext/alata-v9-latin-regular.ttf', '/ext/fa.min.js', '/ext/jj2008-06-14.mk4_archive.torrent', '/favicon.ico', '/manifest.webmanifest'];
+const CACHE_NAME = 'torrent-parts-v2';
+const ASSETS = [
+  '/',
+  '/index.html',
+  '/src/parse.js',
+  '/src/style.css',
+  '/ext/alata-v9-latin-regular.woff2',
+  '/ext/fa.min.js',
+  '/ext/jj2008-06-14.mk4_archive.torrent',
+  '/favicon.ico',
+  '/manifest.webmanifest',
+];

-self.addEventListener('install', function (event) {
-  self.skipWaiting(); // Force activate new SW immediately
-  event.waitUntil(
-    caches
-      .open(cache_name)
-      .then(function (cache) {
-        return cache.addAll(assets);
-      })
-      .catch(function (error) {
-        console.error('Service worker install failed:', error);
-      })
-  );
+self.addEventListener('install', (e) => {
+  self.skipWaiting();
+  e.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS)));
 });

-self.addEventListener('activate', function (event) {
-  event.waitUntil(
+self.addEventListener('activate', (e) => {
+  e.waitUntil(
    Promise.all([
-      // Take control of all clients immediately
      self.clients.claim(),
-      // Clean up old caches
-      caches.keys().then(function (cacheNames) {
-        return Promise.all(
-          cacheNames.map(function (cacheName) {
-            if (cacheName !== cache_name) {
-              console.log('Deleting old cache:', cacheName);
-              return caches.delete(cacheName);
-            }
-          })
-        );
-      }),
+      caches.keys().then((keys) => Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))),
    ])
  );
 });

-self.addEventListener('fetch', function (event) {
-  // Only cache GET requests
-  if (event.request.method !== 'GET') {
-    return;
-  }
+self.addEventListener('fetch', (e) => {
+  if (e.request.method !== 'GET') return;

-  // Network-first strategy for external requests
-  const requestUrl = new URL(event.request.url);
-  if (requestUrl.origin !== self.location.origin) {
-    event.respondWith(
-      fetch(event.request)
-        .then(function (response) {
-          return response;
-        })
-        .catch(function () {
-          console.log('Network request failed, trying cache:', event.request.url);
-          return caches.match(event.request);
-        })
-    );
-    return;
-  }
+  const url = new URL(e.request.url);

-  // Cache-first strategy for app assets
-  event.respondWith(
-    caches
-      .match(event.request)
-      .then(function (response) {
-        if (response) {
-          return response;
-        }
-        return fetch(event.request).then(function (response) {
-          // Cache successful responses for future use
-          if (response && response.status === 200) {
-            const responseClone = response.clone();
-            caches.open(cache_name).then(function (cache) {
-              cache.put(event.request, responseClone);
-            });
-          }
-          return response;
-        });
-      })
-      .catch(function (error) {
-        console.error('Service worker fetch failed:', error);
-        // Could return offline fallback page here if needed
-      })
-  );
+  // Only cache same-origin requests
+  if (url.origin !== self.location.origin) return;
+
+  // Cache-first for local assets
+  e.respondWith(caches.match(e.request).then((cached) => cached || fetch(e.request)));
 });
Author	SHA1	Message	Date
Leo Herzog	a086867ff7	Version Bump	2025-12-22 22:06:50 -05:00
Leo Herzog	74d74f8432	Simplify Service Worker	2025-12-22 22:06:43 -05:00
Leo Herzog	570df30bcc	Refactor UI to Use Semantic HTML Elements	2025-12-22 22:01:18 -05:00
Leo Herzog	615fe5092c	Improve Accessibility with Proper Button Elements and ARIA Labels	2025-12-22 21:58:47 -05:00
Leo Herzog	dc93c4722e	Update WebTorrent Trackers with Active Endpoints	2025-12-22 21:57:13 -05:00
Leo Herzog	b2496a7719	Remove Deprecated IE11 msSaveBlob Code	2025-12-22 21:56:14 -05:00
Leo Herzog	5791f8f749	Fix XSS Vulnerability and Null Reference Errors	2025-12-22 21:55:44 -05:00