victrme#55 Fixed mobile link event, added mobile instructions

settings.html

@@ -45,7 +45,8 @@ <h5 class="trn">Quick Links</h5>
 			</div>
 
 			<div class="tooltiptext ttlinks">
-				<span class="trn">These are Bonjourr's bookmarks. Edit your Quick Links by right clicking on their icon.</span>
+				<span class="trn">These are Bonjourr's bookmarks. </span>
+				<span class="trn instructions">Edit your Quick Links by right clicking the icon.</span>
 				<a class="trn" href="https://bonjourr.fr/misc#about-quick-links" referrerpolicy="no-referrer">More info</a>
 			</div>
 		</div>

src/scripts/lang.js

@@ -585,18 +585,44 @@ const dict = {
 		it: 'Ulteriori informazioni',
 		es: 'Más información',
 	},
-	"These are Bonjourr's bookmarks. Edit your Quick Links by right clicking on their icon.": {
-		fr: "Ce sont les favoris de Bonjourr. Éditez un lien favori en faisant un clic droit sur l'icône.",
-		sv: 'Det här är Bonjourrs bokmärken. Redigera dina snabblänkar genom att högerklicka på deras ikon.',
-		nl: 'Dit zijn de bladwijzers van Bonjourr. Bewerk uw snelkoppelingen door met de rechtermuisknop op hun pictogram te klikken.',
-		pl: 'To są zakładki Bonjourr. Edytuj swoje szybkie linki, klikając prawym przyciskiem myszy ich ikonę.',
-		pt_BR: 'Esses são os favoritos do Bonjourr. Altere seus links rápidos clicando com o botão direito do mouse em seu ícone.',
-		ru: 'Это закладки Bonjourr. Отредактируйте быстрые ссылки, щелкнув их значок правой кнопкой мыши.',
-		zh_CN: '这些是 Bonjourr 的书签。通过右键单击它们的图标来编辑您的快速链接。',
-		sk: 'Toto sú záložky Bonjourru. Upravte svoje rýchle odkazy kliknutím pravým tlačidlom na ich ikonu.',
-		de: 'Dies sind Bonjourrs Lesezeichen. Bearbeiten Sie Ihre Quick Links, indem Sie mit der rechten Maustaste auf das Symbol klicken.',
-		it: 'Questi sono i segnalibri di Bonjourr. Modifica i tuoi collegamenti rapidi facendo clic con il pulsante destro del mouse sulla loro icona.',
-		es: 'Estos son los marcadores de Bonjourr. Edite sus enlaces rápidos haciendo clic con el botón derecho en su icono.',
+	"These are Bonjourr's bookmarks. ": {
+		fr: 'Ce sont les favoris de Bonjourr. ',
+		sv: 'Det här är Bonjourrs bokmärken. ',
+		nl: 'Dit zijn de bladwijzers van Bonjourr. ',
+		pl: 'To są zakładki Bonjourr. ',
+		pt_BR: 'Esses são os favoritos do Bonjourr. ',
+		ru: 'Это закладки Bonjourr. ',
+		zh_CN: '这些是 Bonjourr 的书签。',
+		sk: 'Toto sú záložky Bonjourru. ',
+		de: 'Dies sind Bonjourrs Lesezeichen. ',
+		it: 'Questi sono i segnalibri di Bonjourr. ',
+		es: 'Estos son los marcadores de Bonjourr. ',
+	},
+	'Edit your Quick Links by right clicking the icon.': {
+		fr: "Éditez un lien favori en faisant un clic droit sur l'icône.",
+		sv: 'Redigera dina snabblänkar genom att högerklicka på deras ikon.',
+		nl: 'Bewerk uw snelkoppelingen door met de rechtermuisknop op hun pictogram te klikken.',
+		pl: 'Edytuj swoje szybkie linki, kliknutie pravým tlačidlom myši na ikonu.',
+		pt_BR: 'Altere seus links rápidos clicando com o botão direito do mouse em seu ícone.',
+		ru: ' Отредактируйте Quick Links, щелкнув их значок правой кнопкой мыши.',
+		zh_CN: '通过右键单击它们的图标来编辑您的快速链接。',
+		sk: 'Upravte svoje Quick Links kliknutím pravým tlačidlom na ikone.',
+		de: 'Bearbeiten Sie Ihre Quick Links, indem Sie mit der rechten Maustaste auf das Symbol klicken.',
+		it: "Modifica i tuoi collegamenti Quick Links clic con il pulsante destro del mouse sull'icona.",
+		es: 'Edite sus enlaces Quick Links clic con el botón derecho en su icono.',
+	},
+	'Edit your Quick Links by long-pressing for 300ms the icon.': {
+		fr: "Éditez un lien favori en appuyant pendant 300ms sur l'icône.",
+		sv: 'Redigera dina snabblänkar genom att trycka länge på ikonen i 300 ms.',
+		nl: 'Bewerk uw snelkoppelingen door 300 ms lang op het pictogram te drukken.',
+		pl: 'Edytuj swoje szybkie łącza, przytrzymując ikonę przez 300 ms.',
+		pt_BR: 'Altere seus links rápidos pressionando longamente por 300ms em seu ícone.',
+		ru: 'Отредактируйте быстрые ссылки, нажав и удерживая в течение 300 мс значок.',
+		zh_CN: '长按图标 300 毫秒来编辑您的快速链接。',
+		sk: 'Upravte svoje Quick Links dlhým podržaním ikony po dobu 300 ms.',
+		de: 'Bearbeiten Sie Ihre Quick Links, indem Sie das Symbol 300 ms lang gedrückt halten.',
+		it: "Modifica i tuoi collegamenti rapidi premendo a lungo per 300 ms l'icona.",
+		es: 'Edite sus enlaces rápidos manteniendo presionado durante 300 ms el icono.',
 	},
 	'Type the collection id from its URL, add more by separating them with a comma.': {
 		fr: "Tapez l'ID de l'URL de la collection. Ajoutez en plusieurs en les séparant par une virgule.",

src/scripts/script.js

@@ -399,6 +399,7 @@ function quickLinks(event, that, initStorage) {
 			})
 		}
 
+		// Drags
 		elem.ondragstart = function (e) {
 			e.stopPropagation()
 			e.dataTransfer.setData('text/plain', e.target.id)
@@ -415,29 +416,34 @@ function quickLinks(event, that, initStorage) {
 			handleDrag('end', this)
 		}
 
+		// Mouse clicks
 		elem.oncontextmenu = function (e) {
 			e.preventDefault()
 			editlink(this)
 		}
 
-		let longpressWait = setTimeout(() => {}, 0)
-		elem.addEventListener('touchstart', function (e) {
-			e.preventDefault()
-			e.stopPropagation()
-			longpressWait = setTimeout(() => {
-				editlink(this)
-			}, 300)
-		})
-
-		elem.ontouchend = function (e) {
-			clearTimeout(longpressWait)
-		}
-
 		elem.onmouseup = function (e) {
 			removeLinkSelection()
 			clearTimeout(editDisplayTimeout)
 			e.which === 3 ? editlink(this) : !has(id('settings'), 'shown') ? openlink(this, e) : ''
 		}
+
+		// Mobile clicks
+		let touchStartTime = 0
+		let touchTimeout = setTimeout(() => {}, 0)
+
+		elem.ontouchstart = function (e) {
+			e.preventDefault()
+			touchStartTime = performance.now()
+			touchTimeout = setTimeout(() => editlink(this), 300)
+		}
+
+		elem.ontouchend = function (e) {
+			if (performance.now() - touchStartTime < 300) {
+				clearTimeout(touchTimeout)
+				openlink(this, e)
+			}
+		}
 	}
 
 	function showDelIcon(input) {

src/scripts/settings.js

@@ -129,6 +129,12 @@ function initParams(data, settingsDom) {
 
 	const tooltips = settingsDom.querySelectorAll('.tooltip')
 
+	// Change edit tips on mobile
+	if (mobilecheck)
+		settingsDom.querySelector('.tooltiptext .instructions').textContent = tradThis(
+			`Edit your Quick Links by long-pressing for 300ms the icon.`
+		)
+
 	tooltips.forEach((elem) => {
 		elem.onclick = function () {
 			const toggleTooltip = (which) => {
@@ -153,6 +159,7 @@ function initParams(data, settingsDom) {
 	}
 
 	//quick links
+
 	paramId('i_title').onkeyup = function (e) {
 		if (e.code === 'Enter') quickLinks('input', e)
 	}
@@ -170,6 +177,7 @@ function initParams(data, settingsDom) {
 	}
 
 	//visuals
+
 	paramId('i_type').onchange = function () {
 		selectBackgroundType(this.value)
 	}