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

Add Informational Tooltips

Browse Source
This commit is contained in:
Leo Herzog
2020-11-11 16:35:47 -05:00
parent 973312266f
commit a61f99df89
7 changed files with 4711 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4940
bundle.js
View File

File diff suppressed because it is too large Load Diff

64
bundle.min.js vendored
View File

File diff suppressed because one or more lines are too long

35
index.html
View File

@@ -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">

1
manifest.webmanifest
View File

@@ -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": "/",

1
package.json
View File

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

41
parse.js
View File

@@ -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.title = 'Currently loaded information sourced from Torrent file';
originalSourceIcon.innerHTML = '<span class="fad fa-file-alt fa-fw"></span>';
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.title = 'Currently loaded information sourced from remotely fetched Torrent file';
originalSourceIcon.innerHTML = '<span class="fad fa-file-alt fa-fw"></span>';
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() {

33
style.css
View File

@@ -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);
}