From 3bcc0b99e2d221243c3bcc2a5cc2a7f46c6a6d59 Mon Sep 17 00:00:00 2001 From: Feuerfuchs Date: Wed, 26 Jun 2019 20:16:19 +0200 Subject: New feature: Clickable links in plain text (opt) --- assets/main.js | 2 +- js/main.ts | 77 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--- template.go | 6 ++++- 3 files changed, 80 insertions(+), 5 deletions(-) diff --git a/assets/main.js b/assets/main.js index 577a56e..4875dbf 100644 --- a/assets/main.js +++ b/assets/main.js @@ -1 +1 @@ -"use strict";var KeyValueStore=function(){function e(e){this.data=e;for(var t=0,n=Object.keys(e);t=n.valueRange.length?l=0:l<0&&(l=n.valueRange.length-1),a=n.value=n.valueRange[l]}else{if("number"!=typeof a)throw new Error("Can't cycle \""+e+'"');a+=t,n.value=a}return n.callbacks&&n.callbacks.forEach(function(e){e(a)}),a},e.prototype.addCallback=function(e,t){var n=this.data[e];n.callbacks||(n.callbacks=[]),n.callbacks.push(t)},e}();function ensureSetting(e,t){var n=localStorage.getItem(e);return null===n&&(n=t,localStorage.setItem(e,n)),n}var settings=new KeyValueStore({wordWrap:{value:"1"===ensureSetting("word-wrap","1"),valueRange:[!1,!0]},imagePreviews:{value:"1"===ensureSetting("image-previews","1"),valueRange:[!1,!0]}});function generateImageThumbnails(){for(var s=document.querySelectorAll(".link--IMG, .link--GIF"),i=s.length,e=function(){var e=s[i],t=e.href.replace(/^(.*?)\/I/,"$1/T"),n=document.createTextNode("\n"),a=document.createElement("span");a.classList.add("type-annotation"),a.textContent=" -> ";var l=document.createElement("img");l.src=t,l.addEventListener("load",function(e){l.classList.remove("faded")});var r=document.createElement("a");r.classList.add("img-preview"),r.href=e.href,r.addEventListener("click",function(e){return e.preventDefault(),l.classList.add("faded"),l.classList.contains("expanded")?(l.classList.remove("expanded"),l.src=t):(l.classList.add("expanded"),l.src=r.href),!1}),r.append(l),e.parentNode.insertBefore(r,e.nextSibling),e.parentNode.insertBefore(a,r),e.parentNode.insertBefore(n,a)};i--;)e()}function removeImageThumbnails(){for(var e=document.querySelectorAll(".link--IMG, .link--GIF"),t=e.length;t--;)for(var n=e[t],a=3;a--&&n.nextSibling;)n.nextSibling.remove()}!function(){for(var e=document.getElementsByClassName("link--QRY"),t=e.length;t--;)e[t].addEventListener("click",function(e){e.preventDefault();var t=prompt("Please enter required input: ","");return null!==t&&""!==t&&(window.location.href=e.target.href+"?"+t),!1})}(),document.getElementsByClassName("location__prefix")[0].addEventListener("click",function(e){e.preventDefault();var t=prompt("Please enter new location: ","");return null!==t&&""!==t&&(window.location.href=window.location.origin+"/"+t),!1}),function(){function e(e,t){void 0===t&&(t=!1),e?generateImageThumbnails():t||removeImageThumbnails(),localStorage.setItem("image-previews",e?"1":"0"),n.textContent=e?"[yes]":"[no]"}var t=document.getElementsByClassName("content")[0],n=document.getElementsByClassName("setting--image-previews")[0].getElementsByClassName("setting__value")[0];n.addEventListener("click",function(e){return e.preventDefault(),settings.cycleValue("imagePreviews"),!1}),e(settings.getValue("imagePreviews"),!0),settings.addCallback("imagePreviews",e);function a(e){e?t.classList.add("content--wrap"):t.classList.remove("content--wrap"),localStorage.setItem("image-previews",e?"1":"0"),l.textContent=e?"[yes]":"[no]"}var l=document.getElementsByClassName("setting--word-wrap")[0].getElementsByClassName("setting__value")[0];l.addEventListener("click",function(e){return e.preventDefault(),settings.cycleValue("wordWrap"),!1}),a(settings.getValue("wordWrap")),settings.addCallback("wordWrap",a)}(),function(){for(var a=document.getElementsByClassName("modal"),l=a.length,e=function(){var t=a[l],n=t.getElementsByClassName("modal__content")[0],e=t.getElementsByClassName("modal__close-btn")[0];document.addEventListener("click",function(e){t.classList.contains("modal--visible")&&(e.target===n||n.contains(e.target)||(t.classList.remove("modal--visible"),e.preventDefault(),e.stopPropagation()))},!0),document.addEventListener("keydown",function(e){t.classList.contains("modal--visible")&&27===e.keyCode&&t.classList.remove("modal--visible")}),e.addEventListener("click",function(e){return e.preventDefault(),t.classList.remove("modal--visible"),!1})};l--;)e();var t=document.getElementsByClassName("settings-btn")[0],n=document.getElementsByClassName("modal--settings")[0];t.addEventListener("click",function(e){return e.preventDefault(),n.classList.add("modal--visible"),!1})}(); \ No newline at end of file +"use strict";var KeyValueStore=function(){function e(e){this.data=e;for(var t=0,n=Object.keys(e);t=n.valueRange.length?l=0:l<0&&(l=n.valueRange.length-1),a=n.value=n.valueRange[l]}else{if("number"!=typeof a)throw new Error("Can't cycle \""+e+'"');a+=t,n.value=a}return n.callbacks&&n.callbacks.forEach(function(e){e(a)}),a},e.prototype.addCallback=function(e,t){var n=this.data[e];n.callbacks||(n.callbacks=[]),n.callbacks.push(t)},e}();function ensureSetting(e,t){var n=localStorage.getItem(e);return null===n&&(n=t,localStorage.setItem(e,n)),n}var settings=new KeyValueStore({wordWrap:{value:"1"===ensureSetting("word-wrap","1"),valueRange:[!1,!0]},imagePreviews:{value:"1"===ensureSetting("image-previews","1"),valueRange:[!1,!0]},clickablePlainLinks:{value:"1"===ensureSetting("clickable-plain-links","1"),valueRange:[!1,!0]}});function generateImageThumbnails(){for(var r=document.querySelectorAll(".link--IMG, .link--GIF"),s=r.length,e=function(){var e=r[s],t=e.href.replace(/^(.*?)\/I/,"$1/T"),n=document.createTextNode("\n"),a=document.createElement("span");a.classList.add("type-annotation"),a.textContent=" -> ";var l=document.createElement("img");l.src=t,l.addEventListener("load",function(e){l.classList.remove("faded")});var i=document.createElement("a");i.classList.add("img-preview"),i.href=e.href,i.addEventListener("click",function(e){return e.preventDefault(),l.classList.add("faded"),l.classList.contains("expanded")?(l.classList.remove("expanded"),l.src=t):(l.classList.add("expanded"),l.src=i.href),!1}),i.append(l),e.parentNode.insertBefore(i,e.nextSibling),e.parentNode.insertBefore(a,i),e.parentNode.insertBefore(n,a)};s--;)e()}function removeImageThumbnails(){for(var e=document.querySelectorAll(".link--IMG, .link--GIF"),t=e.length;t--;)for(var n=e[t],a=3;a--&&n.nextSibling;)n.nextSibling.remove()}function generateMarkupForPlainLinks(){if(document.body.classList.contains("is-plain")){var e=document.getElementsByClassName("content")[0];e.innerHTML=e.innerHTML.replace(/\b([a-z]*:\/\/[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b[-a-zA-Z0-9@:%_\+.~#?&//=]*)\b/g,function(e){var t=e;return 0===t.indexOf("gopher://")&&(t=t.replace(/^gopher:\/\/(.*)$/,location.origin+"/$1")),''+e+""}),e.innerHTML=e.innerHTML.replace(/\bmailto:[-a-zA-Z0-9@:%._\+~#=]+@(?:[-a-zA-Z0-9@:%._\+~#=]+\.)+[a-z]{2,4}\b/g,function(e){return''+e+""})}}function removeMarkupForPlainLinks(){if(document.body.classList.contains("is-plain"))for(var e=document.getElementsByClassName("content")[0],t=e.getElementsByTagName("a"),n=t.length;n--;){var a=t[n],l=document.createTextNode(a.textContent);e.replaceChild(l,a)}}!function(){for(var e=document.getElementsByClassName("link--QRY"),t=e.length;t--;)e[t].addEventListener("click",function(e){e.preventDefault();var t=prompt("Please enter required input: ","");return null!==t&&""!==t&&(window.location.href=e.target.href+"?"+t),!1})}(),document.getElementsByClassName("location__prefix")[0].addEventListener("click",function(e){e.preventDefault();var t=prompt("Please enter new location: ","");return null!==t&&""!==t.trim()&&(0===(t=t.trim()).indexOf("gopher://")&&(t=t.substring(9)),window.location.href=window.location.origin+"/"+t),!1}),function(){function e(e,t){void 0===t&&(t=!1),e?generateImageThumbnails():t||removeImageThumbnails(),localStorage.setItem("image-previews",e?"1":"0"),n.textContent=e?"[yes]":"[no]"}var t=document.getElementsByClassName("content")[0],n=document.getElementsByClassName("setting--image-previews")[0].getElementsByClassName("setting__value")[0];n.addEventListener("click",function(e){return e.preventDefault(),settings.cycleValue("imagePreviews"),!1}),e(settings.getValue("imagePreviews"),!0),settings.addCallback("imagePreviews",e);function a(e){e?t.classList.add("content--wrap"):t.classList.remove("content--wrap"),localStorage.setItem("word-wrap",e?"1":"0"),l.textContent=e?"[yes]":"[no]"}var l=document.getElementsByClassName("setting--word-wrap")[0].getElementsByClassName("setting__value")[0];l.addEventListener("click",function(e){return e.preventDefault(),settings.cycleValue("wordWrap"),!1}),a(settings.getValue("wordWrap")),settings.addCallback("wordWrap",a);function i(e){e?generateMarkupForPlainLinks():removeMarkupForPlainLinks(),localStorage.setItem("clickable-plain-links",e?"1":"0"),r.textContent=e?"[yes]":"[no]"}var r=document.getElementsByClassName("setting--clickable-plain-links")[0].getElementsByClassName("setting__value")[0];r.addEventListener("click",function(e){return e.preventDefault(),settings.cycleValue("clickablePlainLinks"),!1}),i(settings.getValue("clickablePlainLinks")),settings.addCallback("clickablePlainLinks",i)}(),function(){for(var a=document.getElementsByClassName("modal"),l=a.length,e=function(){var t=a[l],n=t.getElementsByClassName("modal__content")[0],e=t.getElementsByClassName("modal__close-btn")[0];document.addEventListener("click",function(e){t.classList.contains("modal--visible")&&(e.target===n||n.contains(e.target)||(t.classList.remove("modal--visible"),e.preventDefault(),e.stopPropagation()))},!0),document.addEventListener("keydown",function(e){t.classList.contains("modal--visible")&&27===e.keyCode&&t.classList.remove("modal--visible")}),e.addEventListener("click",function(e){return e.preventDefault(),t.classList.remove("modal--visible"),!1})};l--;)e();var t=document.getElementsByClassName("settings-btn")[0],n=document.getElementsByClassName("modal--settings")[0];t.addEventListener("click",function(e){return e.preventDefault(),n.classList.add("modal--visible"),!1})}(); \ No newline at end of file diff --git a/js/main.ts b/js/main.ts index 3b2a081..5bbcd97 100644 --- a/js/main.ts +++ b/js/main.ts @@ -20,6 +20,10 @@ const settings = new KeyValueStore({ value: ensureSetting('image-previews', '1') === '1', valueRange: [false, true] }, + clickablePlainLinks: { + value: ensureSetting('clickable-plain-links', '1') === '1', + valueRange: [false, true] + }, }); // @@ -46,8 +50,13 @@ const settings = new KeyValueStore({ locationPrefixEl.addEventListener('click', e => { e.preventDefault(); - const resp = prompt('Please enter new location: ', ''); - if ((resp !== null) && (resp !== "")) { + let resp = prompt('Please enter new location: ', ''); + if ((resp !== null) && (resp.trim() !== "")) { + resp = resp.trim(); + if (resp.indexOf('gopher://') === 0) { + resp = resp.substring(9); + } + window.location.href = window.location.origin + '/' + resp; } @@ -93,7 +102,7 @@ const settings = new KeyValueStore({ contentEl.classList.remove("content--wrap"); } - localStorage.setItem('image-previews', value ? '1' : '0'); + localStorage.setItem('word-wrap', value ? '1' : '0'); settingWordWrapValueEl.textContent = value ? '[yes]' : '[no]'; } @@ -105,6 +114,30 @@ const settings = new KeyValueStore({ settingWordWrapCallback(settings.getValue('wordWrap')); settings.addCallback('wordWrap', settingWordWrapCallback); + + // + + const clickablePlainLinksEl = document.getElementsByClassName('setting--clickable-plain-links')[0]; + const clickablePlainLinksValueEl = clickablePlainLinksEl.getElementsByClassName('setting__value')[0]; + const clickablePlainLinksCallback = (value: boolean) => { + if (value) { + generateMarkupForPlainLinks(); + } else { + removeMarkupForPlainLinks(); + } + + localStorage.setItem('clickable-plain-links', value ? '1' : '0'); + clickablePlainLinksValueEl.textContent = value ? '[yes]' : '[no]'; + } + + clickablePlainLinksValueEl.addEventListener('click', e => { + e.preventDefault(); + settings.cycleValue('clickablePlainLinks'); + return false; + }); + + clickablePlainLinksCallback(settings.getValue('clickablePlainLinks')); + settings.addCallback('clickablePlainLinks', clickablePlainLinksCallback); })(); (() => { @@ -211,3 +244,41 @@ function removeImageThumbnails() { } } } + +function generateMarkupForPlainLinks() { + if (!document.body.classList.contains('is-plain')) { + return; + } + + const contentEl = document.getElementsByClassName('content')[0]; + const urlRegex = /\b([a-z]*:\/\/[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b[-a-zA-Z0-9@:%_\+.~#?&//=]*)\b/g; + const mailRegex = /\bmailto:[-a-zA-Z0-9@:%._\+~#=]+@(?:[-a-zA-Z0-9@:%._\+~#=]+\.)+[a-z]{2,4}\b/g; + + contentEl.innerHTML = contentEl.innerHTML.replace(urlRegex, match => { + let href: string = match; + if (href.indexOf('gopher://') === 0) { + href = href.replace(/^gopher:\/\/(.*)$/, location.origin + '/$1'); + } + return `${match}`; + }); + + contentEl.innerHTML = contentEl.innerHTML.replace(mailRegex, match => { + return `${match}`; + }); +} + +function removeMarkupForPlainLinks() { + if (!document.body.classList.contains('is-plain')) { + return; + } + + const contentEl = document.getElementsByClassName('content')[0]; + const anchorEls = contentEl.getElementsByTagName('a'); + let i = anchorEls.length; + while (i--) { + const anchorEl = anchorEls[i]; + const textNodeEl = document.createTextNode(anchorEl.textContent!); + + contentEl.replaceChild(textNodeEl, anchorEl); + } +} diff --git a/template.go b/template.go index 3d95838..583a50b 100644 --- a/template.go +++ b/template.go @@ -11,7 +11,7 @@ var tpltext = ` {{ .Style | safeCss }} - +
{{- $href := "" -}} @@ -85,6 +85,10 @@ var tpltext = ` Image thumbnails
+
+ Clickable links in text files + +