Add Informational Tooltips

index.html

@@ -87,7 +87,10 @@
 
     <div class="property">
       <div class="labels">
-        <label for="hash">Unique Hash</label>
+        <label for="hash">
+          <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
+        </label>
       </div>
       <div class="content">
         <input id="hash" type="text" placeholder="" disabled/>
@@ -96,7 +99,10 @@
 
     <div class="property">
       <div class="labels">
-        <label for="name">Torrent Name</label>
+        <label for="name">
+          <span class="info" data-tippy-content="An optional title specified by the creator"><span class="far fa-info-circle"></span></span>
+          Torrent Name
+        </label>
       </div>
       <div class="content">
         <input id="name" type="text" placeholder="Unnamed" />
@@ -105,7 +111,10 @@
 
     <div class="property">
       <div class="labels">
-        <label for="created">Created</label>
+        <label for="created">
+          <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
+        </label>
         <label for="createdBy" style="display:none">Created By</label>
       </div>
       <div class="content">
@@ -117,7 +126,10 @@
 
     <div class="property">
       <div class="labels">
-        <label for="comment">Comment</label>
+        <label for="comment">
+          <span class="info" data-tippy-content="An optional description specified by the creator"><span class="far fa-info-circle"></span></span>
+          Comment
+        </label>
       </div>
       <div class="content">
         <input id="comment" type="text" placeholder="Not included in the URL/File provided" />
@@ -126,7 +138,10 @@
 
     <div class="property">
       <div class="labels">
-        <label for="announce">Tracker URLs</label>
+        <label for="announce">
+          <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
+        </label>
         <a id="addTrackers">Add Known Working Trackers</a>
         <a id="removeTrackers">Remove All</a>
       </div>
@@ -140,7 +155,10 @@
 
     <div class="property">
       <div class="labels">
-        <label for="urlList">Webseed URLs</label>
+        <label for="urlList">
+          <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
+        </label>
         <a id="removeWebseeds">Remove All</a>
       </div>
       <div class="content">
@@ -153,7 +171,10 @@
 
     <div class="property">
       <div class="labels">
-        <label for="files">Files</label>
+        <label for="files">
+          <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
+        </label>
         <a id="getFiles">Fetch Files List from WebTorrent</a>
       </div>
       <table id="files">

manifest.webmanifest

@@ -2,6 +2,7 @@
   "name": "Torrent Parts",
   "short_name": "Torrent Parts",
   "description": "Inspect and edit what's in your Torrent file or Magnet link",
+  "lang": "en-US",
   "theme_color": "#102030",
   "background_color": "#102030",
   "scope": "/",

package.json

@@ -11,6 +11,7 @@
     "dropzone": "latest",
     "mime-types": "latest",
     "parse-torrent": "latest",
+    "tippy.js": "latest",
     "webtorrent": "latest"
   },
   "devDependencies": {

parse.js

@@ -4,9 +4,11 @@ const Buffer = require('Buffer');
 const bytes = require('bytes');
 const mime = require('mime-types');
 const WebTorrent = require('webtorrent');
+const tippy = require('tippy.js').default;
 
 var properties = document.getElementById('properties');
 var originalSourceIcon = document.getElementById('originalSourceIcon');
+var source = tippy(originalSourceIcon, {"theme": "torrent-parts", "animation": "shift-away-subtle"});
 var name = document.getElementById('name');
 var reset = document.getElementById('reset');
 var created = document.getElementById('created');
@@ -25,9 +27,27 @@ var getFiles = document.getElementById('getFiles');
 var copyURL = document.getElementById('copyURL');
 var copyMagnet = document.getElementById('copyMagnet');
 var downloadTorrent = document.getElementById('downloadTorrent');
+var copyURLTooltip = tippy(copyURL, {"theme": "torrent-parts", "animation": "shift-away-subtle", "content": "Copy torrent.parts link to clipboard"});
+var copyMagnetTooltip = tippy(copyMagnet, {"theme": "torrent-parts", "animation": "shift-away-subtle", "content": "Copy Magnet link to clipboard"});
+var downloadTorrentTooltip = tippy(downloadTorrent, {"theme": "torrent-parts", "animation": "shift-away-subtle", "content": "Download Torrent file"});
 var parsed;
 var client = new WebTorrent();
 
+function placeDownloadTooltips(e) {
+  if (window.innerWidth > 1080) {
+    copyURLTooltip.setProps({"placement": "right"});
+    copyMagnetTooltip.setProps({"placement": "right"});
+    downloadTorrentTooltip.setProps({"placement": "right"});
+  } else {
+    copyURLTooltip.setProps({"placement": "top"});
+    copyMagnetTooltip.setProps({"placement": "top"});
+    downloadTorrentTooltip.setProps({"placement": "top"});
+  }
+}
+
+window.addEventListener('resize', placeDownloadTooltips);
+placeDownloadTooltips();
+
 document.addEventListener('DOMContentLoaded', start);
 
 function start() {
@@ -36,7 +56,7 @@ function start() {
     event.preventDefault();
     if (event.key === "Enter") {
       originalSourceIcon.innerHTML = '<span class="fad fa-magnet fa-fw"></span>';
-      originalSourceIcon.title = 'Currently loaded information sourced from Magnet URL';
+      source.setContent("Currently loaded information sourced from Magnet URL");
       parse(magnet.value);
     }
   });
@@ -45,8 +65,8 @@ function start() {
     event.preventDefault();
     try {
       event.target.files[0].arrayBuffer().then(function(arrayBuffer) {
-        originalSourceIcon.innerHTML = '<span class="fad fa-file fa-fw"></span>';
+        originalSourceIcon.innerHTML = '<span class="fad fa-file-alt fa-fw"></span>';
-        originalSourceIcon.title = 'Currently loaded information sourced from Torrent file';
+        source.setContent("Currently loaded information sourced from Torrent file");
         parse(Buffer.from(arrayBuffer));
       });
     }
@@ -87,9 +107,11 @@ function start() {
   removeWebseeds.addEventListener('click', () => removeAllRows('urlList'));
   getFiles.addEventListener('click', getFilesFromPeers);
 
+  tippy('[data-tippy-content]', {"theme": "torrent-parts", "animation": "shift-away-subtle"}); // all element-defined tooltips
+
   if (window.location.hash) {
     originalSourceIcon.innerHTML = '<span class="fad fa-link fa-fw"></span>';
-    originalSourceIcon.title = 'Currently loaded information sourced from shared torrent.parts link';
+    source.setContent("Currently loaded information sourced from shared torrent.parts link");
     parse(window.location.hash.split('#')[1]);
   }
 
@@ -120,8 +142,8 @@ function parseRemote(toLoad) {
       resetProperties();
       return;
     }
-    originalSourceIcon.innerHTML = '<span class="fad fa-file fa-fw"></span>';
+    originalSourceIcon.innerHTML = '<span class="fad fa-file-alt fa-fw"></span>';
-    originalSourceIcon.title = 'Currently loaded information sourced from remotely fetched Torrent file';
+    source.setContent("Currently loaded information sourced from remotely fetched Torrent file");
     parsed = result;
     display();
   });
@@ -207,7 +229,7 @@ function display() {
   } else {
     if (client.torrents.length > 0) {
       getFiles.style.display = "none";
-      files.innerHTML = '<input type="text" placeholder="Attempting fetching files from Webtorrent..." aria-label="Attempting fetching files from Webtorrent..." disabled>';
+      files.innerHTML = '<input type="text" placeholder="Attempting fetching of files from Webtorrent..." aria-label="Attempting fetching of files from Webtorrent..." disabled>';
     } 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>';
@@ -229,6 +251,8 @@ function display() {
     document.title = "Torrent Parts | Inspect and edit what's in your Torrent file or Magnet link";
   }
 
+  source.enable();
+
 }
 
 function createFileRow(icon, name, size) {
@@ -298,8 +322,6 @@ function propertyChange(e) {
 function resetProperties() {
   document.getElementById('magnet').value = "";
   document.getElementById('torrent').value = "";
-  originalSourceIcon.innerHTML = '<span class="fad fa-magnet fa-fw"></span>';
-  originalSourceIcon.title = '';
   properties.style.display = 'none';
   name.value = "";
   created.value = "";
@@ -315,6 +337,7 @@ function resetProperties() {
   copyURL.setAttribute('data-clipboard-text', "");
   copyMagnet.setAttribute('data-clipboard-text', "");
   document.title = "Torrent Parts | Inspect and edit what's in your Torrent file or Magnet link";
+  source.disable();
 }
 
 async function addCurrentTrackers() {

style.css

@@ -208,6 +208,10 @@ label[for="torrent"] {
   width: 460px;
 }
 
+.info {
+  color: var(--grey);
+}
+
 label {
   text-transform: uppercase;
 }
@@ -325,3 +329,32 @@ input {
   }
 
 }
+
+/*! Tippy 6.2.7 | MIT License | github.com/atomiks/tippyjs */
+.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
+
+.tippy-box[data-animation=shift-away-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=top]{transform:translateY(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=bottom]{transform:translateY(-5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=left]{transform:translateX(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=right]{transform:translateX(-5px)}
+
+.tippy-box[data-theme~="torrent-parts"] {
+  background-color: var(--accent);
+  font-weight: 600;
+  text-align: center;
+}
+.tippy-box[data-theme~="torrent-parts"][data-placement^="top"] > .tippy-arrow:before {
+  border-top-color: var(--accent);
+}
+.tippy-box[data-theme~="torrent-parts"][data-placement^="bottom"] > .tippy-arrow:before {
+  border-bottom-color: var(--accent);
+}
+.tippy-box[data-theme~="torrent-parts"][data-placement^="left"] > .tippy-arrow:before {
+  border-left-color: var(--accent);
+}
+.tippy-box[data-theme~="torrent-parts"][data-placement^="right"] > .tippy-arrow:before {
+  border-right-color: var(--accent);
+}
+.tippy-box[data-theme~="torrent-parts"] > .tippy-backdrop {
+  background-color: var(--accent);
+}
+.tippy-box[data-theme~="torrent-parts"] > .tippy-svg-arrow {
+  fill: var(--accent);
+}