Register Change Listeners on Editable Fields

bundle.js

@@ -11890,13 +11890,14 @@ const Buffer = require('Buffer');
 const bytes = require('bytes');
 const mime = require('mime-types');
 
+var properties = document.getElementById('properties');
 var name = document.getElementById('name');
 var creationDate = document.getElementById('creationDate');
 var createdBy = document.getElementById('createdBy');
 var comment = document.getElementById('comment');
 var hash = document.getElementById('hash');
-var trackers = document.getElementById('trackers');
+var announce = document.getElementById('announce');
-var webseeds = document.getElementById('webseeds');
+var urlList = document.getElementById('urlList');
 var files = document.getElementById('filesBody');
 var copyURL = document.getElementById('copyURL');
 var copyMagnet = document.getElementById('copyMagnet');
@@ -11937,6 +11938,11 @@ function start() {
 
   downloadTorrent.addEventListener('click', saveTorrent);
 
+  name.addEventListener('input', propertyChange);
+  creationDate.addEventListener('change', propertyChange);
+  createdBy.addEventListener('change', propertyChange);
+  comment.addEventListener('input', propertyChange);
+
   if (window.location.hash) parse(window.location.hash.split('#')[1]);
   window.addEventListener('hashchange', function() { if (window.location.hash) parse(window.location.hash.split('#')[1]); });
 
@@ -11990,30 +11996,36 @@ function display() {
   comment.value = parsed.comment || "";
   hash.value = parsed.infoHash;
 
-  trackers.innerHTML = "";
+  announce.innerHTML = "";
-  if (parsed.announce) {
+  if (parsed.announce && parsed.announce.length) {
-    for (var url of parsed.announce) {
+    for (let i = 0; i < parsed.announce.length; i++) {
       let tracker = document.createElement('input');
       tracker.className = 'tracker';
       tracker.type = 'text';
-      tracker.value = url;
+      tracker.value = parsed.announce[i];
-      trackers.appendChild(tracker);
+      tracker.dataset.index = i;
+      tracker.dataset.group = 'announce';
+      tracker.addEventListener('input', propertyChange);
+      announce.appendChild(tracker);
     }
   } else {
-    trackers.innerHTML = "<em>No trackers specified in the URL/File provided</em>";
+    announce.innerHTML = "<em>No trackers specified in the URL/File provided</em>";
   }
 
-  webseeds.innerHTML = "";
+  urlList.innerHTML = "";
   if (parsed.urlList && parsed.urlList.length) {
-    for (var url of parsed.urlList) {
+    for (let i = 0; i < parsed.urlList.length; i++) {
       let webseed = document.createElement('input');
-      webseed.className = 'tracker';
+      webseed.className = 'webseed';
       webseed.type = 'text';
-      webseed.value = url;
+      webseed.value = parsed.urlList[i];
-      webseeds.appendChild(webseed);
+      webseed.dataset.index = i;
+      webseed.dataset.group = 'urlList';
+      webseed.addEventListener('input', propertyChange);
+      urlList.appendChild(webseed);
     }
   } else {
-    webseeds.innerHTML = "<em>No webseed URLs in the URL/File provided</em>";
+    urlList.innerHTML = "<em>No webseed URLs in the URL/File provided</em>";
   }
 
   files.innerHTML = "";
@@ -12030,6 +12042,8 @@ function display() {
   copyURL.setAttribute('data-clipboard-text', window.location.origin + "#" + parser.toMagnetURI(parsed));
   copyMagnet.setAttribute('data-clipboard-text', parser.toMagnetURI(parsed));
 
+  properties.style.display = 'block';
+
 }
 
 function createFileRow(icon, name, size) {
@@ -12074,6 +12088,19 @@ function getFontAwesomeIconForMimetype(mimetype) {
   }
 }
 
+function propertyChange(e) {
+  console.log(e);
+  if (e.target.dataset.group) {
+    parsed[e.target.dataset.group][e.target.dataset.index] = e.target.value;
+  } else {
+    parsed[e.target.id] = e.target.value;
+  }
+  if (e.target.id != "creationDate") creationDate.value = new Date().toISOString().slice(0, 19);
+  createdBy.value = "Torrent Parts <https://torrent.parts/>";
+  parsed.createdBy = "Torrent Parts <https://torrent.parts/>";
+  console.log(parsed);
+}
+
 // https://stackoverflow.com/a/36899900/2700296
 function saveTorrent() {
   let data = parser.toTorrentFile(parsed);

index.html

@@ -6,72 +6,78 @@
 
 <body>
 
+  <h1><span class="fad fa-file-search"></span> Torrent Parts</h1>
+
   <div class="form-group">
-    <label class="col-form-label" for="magnet">URL</label>
+    <label for="magnet">URL</label>
-    <input id="magnet" type="text" class="form-control" placeholder="magnet:?xt=urn:btih…" />
+    <input id="magnet" type="text" placeholder="magnet:?xt=urn:btih…" />
     <div>or</div>
-    <label class="col-form-label" for="torrent">Upload Torrent</label>
+    <label for="torrent">Upload Torrent</label>
     <input id="torrent" type="file" />
   </div>
 
-  <div class="form-group">
+  <div id="properties" style="display:none">
-    <label class="col-form-label" for="name">Torrent Name</label>
-    <input id="name" type="text" class="form-control" value="" placeholder="Unspecified" />
-  </div>
 
-  <div class="form-group">
+    <div class="form-group">
-    <label class="col-form-label" for="creationDate">Created</label>
+      <label for="name">Torrent Name</label>
-    <input id="creationDate" type="datetime-local" class="form-control" value="" placeholder="Unspecified" />
+      <input id="name" type="text" placeholder="Unspecified" />
-    <label class="col-form-label" for="createdBy">with</label>
-    <input id="createdBy" type="text" class="form-control" value="" placeholder="Unspecified" disabled />
-  </div>
-
-  <div class="form-group">
-    <label class="col-form-label" for="comment">Comment</label>
-    <input id="comment" type="text" class="form-control" value="" placeholder="Unspecified" />
-  </div>
-
-  <div class="form-group">
-    <label class="col-form-label" for="hash">Unique Hash</label>
-    <input id="hash" type="text" class="form-control" value="" placeholder="" disabled/>
-  </div>
-
-  <div class="form-group">
-    <label class="col-form-label" for="trackers">Tracker URLs</label>
-    <div id="trackers"></div>
-  </div>
-
-  <div class="form-group">
-    <label class="col-form-label" for="webseeds">Webseed URLs</label>
-    <div id="webseeds"></div>
-  </div>
-
-  <div class="form-group">
-    <label class="col-form-label" for="files">Files</label>
-    <table id="files">
-      <tbody id="filesBody"></tbody>
-    </table>
-  </div>
-
-  <div>
-    <div id="copyURL">
-      <span class="fa-stack fa-2x">
-        <span class="fas fa-circle fa-stack-2x"></span>
-        <span class="fas fa-share-alt fa-stack-1x fa-inverse" data-fa-transform="left-1"></span>
-      </span>
     </div>
-    <div id="copyMagnet">
+
-      <span class="fa-stack fa-2x">
+    <div class="form-group">
-        <span class="fas fa-circle fa-stack-2x"></span>
+      <label for="creationDate">Created</label>
-        <span class="fas fa-magnet fa-stack-1x fa-inverse" data-fa-transform="down-1"></span>
+      <input id="creationDate" type="datetime-local" />
-      </span>
+      <label for="createdBy">UTC with</label>
+      <input id="createdBy" type="text" placeholder="Unspecified" disabled />
     </div>
-    <div id="downloadTorrent">
+
-      <span class="fa-stack fa-2x">
+    <div class="form-group">
-        <span class="fas fa-circle fa-stack-2x"></span>
+      <label for="comment">Comment</label>
-        <span class="fas fa-file-download fa-stack-1x fa-inverse"></span>
+      <input id="comment" type="text" placeholder="Unspecified" />
-      </span>
     </div>
+
+    <div class="form-group">
+      <label for="hash">Unique Hash</label>
+      <input id="hash" type="text" placeholder="" disabled/>
+    </div>
+
+    <div class="form-group">
+      <label for="announce">Tracker URLs</label>
+      <div id="announce"></div>
+    </div>
+
+    <div class="form-group">
+      <label for="urlList">Webseed URLs</label>
+      <div id="urlList"></div>
+    </div>
+
+    <div class="form-group">
+      <label for="files">Files</label>
+      <table id="files">
+        <tbody id="filesBody"></tbody>
+      </table>
+    </div>
+
+    <div>
+      <div id="copyURL">
+        <span class="fa-stack fa-2x">
+          <span class="fas fa-circle fa-stack-2x"></span>
+          <span class="fas fa-share-alt fa-stack-1x fa-inverse" data-fa-transform="left-1"></span>
+        </span>
+      </div>
+      <div id="copyMagnet">
+        <span class="fa-stack fa-2x">
+          <span class="fas fa-circle fa-stack-2x"></span>
+          <span class="fas fa-magnet fa-stack-1x fa-inverse" data-fa-transform="down-1"></span>
+        </span>
+      </div>
+      <div id="downloadTorrent">
+        <span class="fa-stack fa-2x">
+          <span class="fas fa-circle fa-stack-2x"></span>
+          <span class="fas fa-file-download fa-stack-1x fa-inverse"></span>
+        </span>
+      </div>
+    </div>
+
   </div>
 
   <script src="bundle.js"></script>

parse.js

@@ -4,13 +4,14 @@ const Buffer = require('Buffer');
 const bytes = require('bytes');
 const mime = require('mime-types');
 
+var properties = document.getElementById('properties');
 var name = document.getElementById('name');
 var creationDate = document.getElementById('creationDate');
 var createdBy = document.getElementById('createdBy');
 var comment = document.getElementById('comment');
 var hash = document.getElementById('hash');
-var trackers = document.getElementById('trackers');
+var announce = document.getElementById('announce');
-var webseeds = document.getElementById('webseeds');
+var urlList = document.getElementById('urlList');
 var files = document.getElementById('filesBody');
 var copyURL = document.getElementById('copyURL');
 var copyMagnet = document.getElementById('copyMagnet');
@@ -51,6 +52,11 @@ function start() {
 
   downloadTorrent.addEventListener('click', saveTorrent);
 
+  name.addEventListener('input', propertyChange);
+  creationDate.addEventListener('change', propertyChange);
+  createdBy.addEventListener('change', propertyChange);
+  comment.addEventListener('input', propertyChange);
+
   if (window.location.hash) parse(window.location.hash.split('#')[1]);
   window.addEventListener('hashchange', function() { if (window.location.hash) parse(window.location.hash.split('#')[1]); });
 
@@ -104,30 +110,36 @@ function display() {
   comment.value = parsed.comment || "";
   hash.value = parsed.infoHash;
 
-  trackers.innerHTML = "";
+  announce.innerHTML = "";
-  if (parsed.announce) {
+  if (parsed.announce && parsed.announce.length) {
-    for (var url of parsed.announce) {
+    for (let i = 0; i < parsed.announce.length; i++) {
       let tracker = document.createElement('input');
       tracker.className = 'tracker';
       tracker.type = 'text';
-      tracker.value = url;
+      tracker.value = parsed.announce[i];
-      trackers.appendChild(tracker);
+      tracker.dataset.index = i;
+      tracker.dataset.group = 'announce';
+      tracker.addEventListener('input', propertyChange);
+      announce.appendChild(tracker);
     }
   } else {
-    trackers.innerHTML = "<em>No trackers specified in the URL/File provided</em>";
+    announce.innerHTML = "<em>No trackers specified in the URL/File provided</em>";
   }
 
-  webseeds.innerHTML = "";
+  urlList.innerHTML = "";
   if (parsed.urlList && parsed.urlList.length) {
-    for (var url of parsed.urlList) {
+    for (let i = 0; i < parsed.urlList.length; i++) {
       let webseed = document.createElement('input');
-      webseed.className = 'tracker';
+      webseed.className = 'webseed';
       webseed.type = 'text';
-      webseed.value = url;
+      webseed.value = parsed.urlList[i];
-      webseeds.appendChild(webseed);
+      webseed.dataset.index = i;
+      webseed.dataset.group = 'urlList';
+      webseed.addEventListener('input', propertyChange);
+      urlList.appendChild(webseed);
     }
   } else {
-    webseeds.innerHTML = "<em>No webseed URLs in the URL/File provided</em>";
+    urlList.innerHTML = "<em>No webseed URLs in the URL/File provided</em>";
   }
 
   files.innerHTML = "";
@@ -144,6 +156,8 @@ function display() {
   copyURL.setAttribute('data-clipboard-text', window.location.origin + "#" + parser.toMagnetURI(parsed));
   copyMagnet.setAttribute('data-clipboard-text', parser.toMagnetURI(parsed));
 
+  properties.style.display = 'block';
+
 }
 
 function createFileRow(icon, name, size) {
@@ -188,6 +202,19 @@ function getFontAwesomeIconForMimetype(mimetype) {
   }
 }
 
+function propertyChange(e) {
+  console.log(e);
+  if (e.target.dataset.group) {
+    parsed[e.target.dataset.group][e.target.dataset.index] = e.target.value;
+  } else {
+    parsed[e.target.id] = e.target.value;
+  }
+  if (e.target.id != "creationDate") creationDate.value = new Date().toISOString().slice(0, 19);
+  createdBy.value = "Torrent Parts <https://torrent.parts/>";
+  parsed.createdBy = "Torrent Parts <https://torrent.parts/>";
+  console.log(parsed);
+}
+
 // https://stackoverflow.com/a/36899900/2700296
 function saveTorrent() {
   let data = parser.toTorrentFile(parsed);