From 3ec9264deb436af8fd6f5efc5efc3c7872127b05 Mon Sep 17 00:00:00 2001 From: Feuerfuchs Date: Mon, 24 Jun 2019 21:54:39 +0200 Subject: Improved design, add setting for image previews, add prompt for new location --- Makefile | 2 +- assets/icons.svg | 0 assets/main.js | 40 +---------- assets/style.css | 2 +- css/main.scss | 203 ++++++++++++++++++++++++++++++++++++++++++++-------- js/KeyValueStore.ts | 89 +++++++++++++++++++++++ js/main.ts | 191 +++++++++++++++++++++++++++++++++++++++++------- template.go | 68 +++++++++++------- 8 files changed, 473 insertions(+), 122 deletions(-) create mode 100644 assets/icons.svg create mode 100644 js/KeyValueStore.ts diff --git a/Makefile b/Makefile index da35555..fa3998e 100644 --- a/Makefile +++ b/Makefile @@ -7,7 +7,7 @@ dev: build build: clean sassc -t compressed css/main.scss assets/style.css - tsc --strict --outFile assets/main.js js/main.ts + tsc --strict --module none --outFile /dev/stdout js/KeyValueStore.ts js/main.ts | uglifyjs -c -m -o assets/main.js -- pyftsubset fonts/iosevka-term-ss03-regular.ttf --name-IDs+=0,4,6 --text-file=glyphs.txt --flavor='woff' --output-file='assets/iosevka-term-ss03-regular.woff' pyftsubset fonts/iosevka-term-ss03-regular.ttf --name-IDs+=0,4,6 --text-file=glyphs.txt --flavor='woff2' --output-file='assets/iosevka-term-ss03-regular.woff2' go build -o ./gopherproxy ./cmd/gopherproxy/main.go diff --git a/assets/icons.svg b/assets/icons.svg new file mode 100644 index 0000000..e69de29 diff --git a/assets/main.js b/assets/main.js index 46cb7ee..cbabeef 100644 --- a/assets/main.js +++ b/assets/main.js @@ -1,39 +1 @@ -"use strict"; -var linkQryEls = document.getElementsByClassName('link--QRY'); -var i = linkQryEls.length; -while (i--) { - linkQryEls[i].addEventListener('click', function (e) { - e.preventDefault(); - var resp = prompt('Please enter required input: ', ''); - if ((resp !== null) && (resp !== "")) { - window.location.href = e.target.href + '?' + resp; - } - return false; - }); -} -var imgPreviewEls = document.getElementsByClassName('img-preview'); -i = imgPreviewEls.length; -var _loop_1 = function () { - var imgPreviewEl = imgPreviewEls[i]; - var child = imgPreviewEl.children[0]; - var thumbnailUrl = child.src; - child.addEventListener('load', function (e) { - child.classList.remove('faded'); - }); - imgPreviewEls[i].addEventListener('click', function (e) { - e.preventDefault(); - child.classList.add('faded'); - if (child.classList.contains('expanded')) { - child.classList.remove('expanded'); - child.src = thumbnailUrl; - } - else { - child.classList.add('expanded'); - child.src = imgPreviewEl.href; - } - return false; - }); -}; -while (i--) { - _loop_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({imagePreviews:{value:"1"===ensureSetting("image-previews","1"),valueRange:[!1,!0]}});function generateImageThumbnails(){for(var i=document.querySelectorAll(".link--IMG, .link--GIF"),s=i.length,e=function(){var e=i[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 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)};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(){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 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(){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/assets/style.css b/assets/style.css index 46ad8cb..3ab3b36 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1 +1 @@ -@font-face{font-family:'Iosevka Term SS03';font-style:normal;font-weight:normal;src:url("/iosevka-term-ss03-regular.woff2") format("woff2"),url("/iosevka-term-ss03-regular.woff") format("woff")}body{margin:0;padding:0;background-color:#14171a;color:#cad1d8}button{font-family:'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;font-size:1.0625em;line-height:1.5;background:none;border:0;padding:0;color:#fff}img{display:inline-block;vertical-align:top;max-width:8em;margin:.1em 0}img::selection{background-color:rgba(239,198,138,0.35)}img.expanded{max-width:40em;max-width:80ch}img.faded{opacity:.5}::selection{color:#000;background-color:rgba(239,198,138,0.996)}:link{color:#fff}:visited{color:#cad1d8}.header{font-family:'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;font-size:1.0625em;line-height:1.5;padding:.9em 1em;border-bottom:1px solid #353a3f;line-height:1.3;color:#686f76}.header__uripart{color:#929ba3}.header__uripart--last{color:#fff}.wrap{text-align:center}.content{font-family:'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;font-size:1.0625em;line-height:1.5;display:inline-block;min-width:50em;min-width:85ch;margin:0;padding:2em 1em;text-align:left}.type-annotation{color:#929ba3} +@font-face{font-family:'Iosevka Term SS03';font-style:normal;font-weight:normal;src:url("/iosevka-term-ss03-regular.woff2") format("woff2"),url("/iosevka-term-ss03-regular.woff") format("woff")}body{margin:0;padding:0;background-color:#14171a;color:#cad1d8;font-family:"Iosevka Term SS03","IBM Plex Mono","Fira Code","Fira Mono","Roboto Mono","Droid Sans Mono",Monaco,Consolas,Courier,monospace;font-size:1.0625em;line-height:1.5}h1,h2,h3,h4,h5,h6{font:inherit;color:#fff;margin:0}button{background:none;border:0;padding:0;color:#fff;font:inherit;text-decoration:underline;cursor:pointer}button:focus{outline:1px dotted currentColor}img{display:inline-block;vertical-align:top;max-width:8em;margin:.1em 0}img::selection{background-color:rgba(239,198,138,0.35)}img.expanded{max-width:40em;max-width:80ch}img.faded{opacity:.5}strong{font-weight:normal}::selection{color:#000;background-color:rgba(239,198,138,0.996)}:link{color:#fff}:visited{color:#cad1d8}:link:hover,:visited:hover{color:#fff}.novisit{color:#fff}.header-base{display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between}.header-base::after{display:block;width:100%;white-space:nowrap;overflow:hidden;color:#5d646a;content:'----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------'}.header{padding:.9em 1em 0;color:#929ba3}.location{color:#5d646a}.location__prefix{color:#5d646a}.location__prefix:hover{color:#fff}.location__uripart{color:#fff}.location__uripart+.location__slash+.location__uripart{color:#cad1d8}.location__uripart+.location__slash+.location__uripart:hover{color:#fff}.wrap{text-align:center}.content{display:inline-block;min-width:50em;min-width:85ch;margin:0;padding:2em 1em;text-align:left;font:inherit}.type-annotation{color:#929ba3}.modal{position:fixed;top:0;left:0;z-index:100;display:none;width:100%;height:100%;box-sizing:border-box;padding:2em;background-color:rgba(0,0,0,0.75)}.modal--visible{display:block}.modal__content{max-width:30em;padding:1.5em 1.8em;margin:0 auto;background-color:#14171a;box-shadow:0 .3em 2em #000;text-align:left}.modal__head{margin-bottom:1.5em}.modal__title{padding-right:1em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.setting{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.setting__label{white-space:nowrap;overflow:hidden;margin-right:.5em}.setting__label::after{color:#5d646a;content:' . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .'}#none{position:fixed;top:0;left:0;width:0;height:0}@media screen and (max-width: 800px){.location__uripart ~ *{display:none}.modal{padding:1em}.modal__content{padding:1em 1.3em}} diff --git a/css/main.scss b/css/main.scss index 0d5a5d9..6334f42 100644 --- a/css/main.scss +++ b/css/main.scss @@ -2,7 +2,7 @@ $accent: scale-color(#e8ad58, $lightness: 30%); $background: hsl(210, 14%, 9%); $text: mix(hsl(210, 60%, 95%), $background, 85%); $text-minus: mix(hsl(210, 100%, 95%), $background, 60%); -$text-faint: mix(hsl(210, 100%, 95%), $background, 40%); +$text-faint: mix(hsl(210, 100%, 95%), $background, 35%); $text-plus: #fff; $link-idle: $text-plus; $link-visited: $text; @@ -10,11 +10,7 @@ $border: mix(hsl(210, 100%, 95%), $background, 16%); $sel-background: rgba($accent, .996); $sel-text: #000; -@mixin monospace-font { - font-family: 'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace; - font-size: 1 / 16 * 17em; - line-height: 1.5; -} +$font-monospace: 'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace; @font-face { font-family: 'Iosevka Term SS03'; @@ -35,15 +31,29 @@ body { // hsla(210, 100%, 95%, .025) 2px // ); color: $text; + font-family: $font-monospace; + font-size: 1 / 16 * 17em; + line-height: 1.5; +} + +h1, h2, h3, h4, h5, h6 { + font: inherit; + color: $text-plus; + margin: 0; } button { - @include monospace-font; + background: none; + border: 0; + padding: 0; + color: $text-plus; + font: inherit; + text-decoration: underline; + cursor: pointer; - background: none; - border: 0; - padding: 0; - color: $text-plus; + &:focus { + outline: 1px dotted currentColor; + } } img { @@ -66,6 +76,10 @@ img { } } +strong { + font-weight: normal; +} + ::selection { color: $sel-text; background-color: $sel-background; @@ -79,44 +93,175 @@ img { color: $link-visited; } +:link, +:visited { + &:hover { + color: $text-plus; + } +} + +.novisit { + color: $link-idle; +} + // :link, :visited { // &:hover { // color: $text-plus; // } // } -.header { - @include monospace-font; +.header-base { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-between; - padding: .9em 1em; - border-bottom: 1px solid $border; - line-height: 1.3; - color: $text-faint; + &::after { + display: block; + width: 100%; + white-space: nowrap; + overflow: hidden; + color: $text-faint; + content: '----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------'; + } } -.header__uripart { - color: $text-minus; +// + +.header { + padding: .9em 1em 0; + color: $text-minus; } -.header__uripart--last { - color: $text-plus; +// + +.location { + color: $text-faint; + + &__prefix { + color: $text-faint; + + &:hover { + color: $text-plus; + } + } + + &__uripart { + color: $text-plus; + + + .location__slash + .location__uripart { + color: $text; + + &:hover { + color: $text-plus; + } + } + } } +// + .wrap { text-align: center; } .content { - @include monospace-font; - - display: inline-block; - min-width: 50em; - min-width: 5ch + 80; - margin: 0; - padding: 2em 1em; - text-align: left; + display: inline-block; + min-width: 50em; + min-width: 5ch + 80; + margin: 0; + padding: 2em 1em; + text-align: left; + font: inherit; } +// + .type-annotation { color: $text-minus; } + +// + +.modal { + position: fixed; + top: 0; + left: 0; + z-index: 100; + display: none; + width: 100%; + height: 100%; + box-sizing: border-box; + padding: 2em; + background-color: rgba(#000, .75); + + &--visible { + display: block; + } + + &__content { + max-width: 30em; + padding: 1.5em 1.8em; + margin: 0 auto; + background-color: $background; + box-shadow: 0 .3em 2em #000; + text-align: left; + } + + &__head { + margin-bottom: 1.5em; + } + + &__title { + padding-right: 1em; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } +} + +// + +.setting { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + &__label { + white-space: nowrap; + overflow: hidden; + margin-right: .5em; + + &::after { + color: $text-faint; + content: ' . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .'; + } + } +} + +// + +#none { + position: fixed; + top: 0; + left: 0; + width: 0; + height: 0; +} + +// + +@media screen and (max-width: 800px) { + .location__uripart ~ * { + display: none; + } + + .modal { + padding: 1em; + } + + .modal__content { + padding: 1em 1.3em; + } +} diff --git a/js/KeyValueStore.ts b/js/KeyValueStore.ts new file mode 100644 index 0000000..fd8f39e --- /dev/null +++ b/js/KeyValueStore.ts @@ -0,0 +1,89 @@ +type KeyValueStoreCallback = (value: T) => void; + +interface IKeyValueStoreParam { + value: T; + valueRange?: T[]; + callbacks?: KeyValueStoreCallback[]; +} + +type KeyValueStoreData = { [K in keyof T]: IKeyValueStoreParam }; + +class KeyValueStore { + constructor(private data: KeyValueStoreData) { + for (const id of Object.keys(data)) { + const props = data[id as keyof typeof data]; + + if (props.valueRange && props.valueRange.indexOf(props.value) === -1) { + throw new Error(`Invalid value "${props.value}" for ID "${id}"`); + } + } + } + + public getValue(id: keyof T) { + return this.data[id].value; + } + + public setValue(id: K, value: T[K]) { + const props = this.data[id]; + + if (props.valueRange) { + const valueIndex = props.valueRange.indexOf(value); + if (valueIndex === -1) { + throw new Error(`Invalid value "${value}" for ID "${id}"`); + } + } + + props.value = value; + + if (props.callbacks) { + props.callbacks.forEach(callback => { + callback(value); + }); + } + } + + public cycleValue(id: K, dir: -1 | 1 = 1) { + const props = this.data[id]; + + if (!props) { + throw new Error(`Invalid ID "${id}"`); + } + + let value = props.value; + + if (props.valueRange) { + let valueIndex = props.valueRange.indexOf(value) + dir; + + if (valueIndex >= props.valueRange.length) { + valueIndex = 0; + } else if (valueIndex < 0) { + valueIndex = props.valueRange.length - 1; + } + + value = props.value = props.valueRange[valueIndex]; + } else if (typeof value === "number") { + (value as number) += dir; + props.value = value; + } else { + throw new Error(`Can't cycle "${id}"`); + } + + if (props.callbacks) { + props.callbacks.forEach(callback => { + callback(value); + }); + } + + return value; + } + + public addCallback(id: K, callback: KeyValueStoreCallback) { + const props = this.data[id]; + + if (!props.callbacks) { + props.callbacks = []; + } + + props.callbacks.push(callback); + } +} diff --git a/js/main.ts b/js/main.ts index 21e589d..7ef7020 100644 --- a/js/main.ts +++ b/js/main.ts @@ -1,42 +1,181 @@ -let linkQryEls = document.getElementsByClassName('link--QRY'); -let i = linkQryEls.length; -while (i--) { - linkQryEls[i].addEventListener('click', e => { +/// + +// + +function ensureSetting(key: string, defaultValue: string): string { + let strValue = localStorage.getItem(key); + if (strValue === null) { + strValue = defaultValue; + localStorage.setItem(key, strValue); + } + return strValue; +} + +const settings = new KeyValueStore({ + imagePreviews: { + value: ensureSetting('image-previews', '1') === '1', + valueRange: [false, true] + } +}); + +// + +(() => { + const linkQryEls = document.getElementsByClassName('link--QRY'); + let i = linkQryEls.length; + while (i--) { + linkQryEls[i].addEventListener('click', e => { + e.preventDefault(); + + const resp = prompt('Please enter required input: ', ''); + if ((resp !== null) && (resp !== "")) { + window.location.href = (e.target as HTMLAnchorElement).href + '?' + resp; + } + + return false; + }); + } +})(); + +(() => { + const locationPrefixEl = document.getElementsByClassName('location__prefix')[0]; + locationPrefixEl.addEventListener('click', e => { e.preventDefault(); - const resp = prompt('Please enter required input: ', ''); + const resp = prompt('Please enter new location: ', ''); if ((resp !== null) && (resp !== "")) { - window.location.href = (e.target as HTMLAnchorElement).href + '?' + resp; + window.location.href = window.location.origin + '/' + resp; } return false; }); -} +})(); -let imgPreviewEls = document.getElementsByClassName('img-preview'); -i = imgPreviewEls.length; -while (i--) { - const imgPreviewEl = imgPreviewEls[i] as HTMLAnchorElement; - const child = imgPreviewEl.children[0] as HTMLImageElement; - const thumbnailUrl = child.src; +(() => { + const settingImagePreviewEl = document.getElementsByClassName('setting--image-previews')[0]; + const settingImagePreviewValueEl = settingImagePreviewEl.getElementsByClassName('setting__value')[0]; + const settingImagePreviewCallback = (value: boolean, init = false) => { + if (value) { + generateImageThumbnails(); + } else if (!init) { + removeImageThumbnails(); + } - child.addEventListener('load', e => { - child.classList.remove('faded'); - }); + localStorage.setItem('image-previews', value ? '1' : '0'); + settingImagePreviewValueEl.textContent = value ? '[yes]' : '[no]'; + } - imgPreviewEls[i].addEventListener('click', e => { + settingImagePreviewValueEl.addEventListener('click', e => { e.preventDefault(); + settings.cycleValue('imagePreviews'); + return false; + }); - child.classList.add('faded'); + settingImagePreviewCallback(settings.getValue('imagePreviews'), true); + settings.addCallback('imagePreviews', settingImagePreviewCallback); +})(); - if (child.classList.contains('expanded')) { - child.classList.remove('expanded'); - child.src = thumbnailUrl; - } else { - child.classList.add('expanded'); - child.src = imgPreviewEl.href; - } - +(() => { + const modalEls = document.getElementsByClassName('modal'); + let i = modalEls.length; + while (i--) { + const modalEl = modalEls[i]; + const modalContentEl = modalEl.getElementsByClassName('modal__content')[0]; + const modalCloseBtnEl = modalEl.getElementsByClassName('modal__close-btn')[0]; + + document.addEventListener('click', e => { + if (!modalEl.classList.contains('modal--visible')) { + return; + } + if (e.target !== modalContentEl && !modalContentEl.contains(e.target as Element)) { + modalEl.classList.remove('modal--visible'); + e.preventDefault(); + e.stopPropagation(); + } + }, true); + + document.addEventListener('keydown', e => { + if (!modalEl.classList.contains('modal--visible')) { + return; + } + if (e.keyCode === 27) { + modalEl.classList.remove('modal--visible'); + } + }); + + modalCloseBtnEl.addEventListener('click', e => { + e.preventDefault(); + modalEl.classList.remove('modal--visible'); + return false; + }); + } + + // + + const settingsBtnEl = document.getElementsByClassName('settings-btn')[0]; + const settingsModalEl = document.getElementsByClassName('modal--settings')[0]; + + settingsBtnEl.addEventListener('click', e => { + e.preventDefault(); + settingsModalEl.classList.add('modal--visible'); return false; }); +})(); + +function generateImageThumbnails() { + const linkImgEls = document.querySelectorAll('.link--IMG, .link--GIF'); + let i = linkImgEls.length; + while (i--) { + const linkImgEl = linkImgEls[i] as HTMLAnchorElement; + const thumbnailUrl = linkImgEl.href.replace(/^(.*?)\/I/, '$1/T'); + + const lineBreakEl = document.createTextNode('\n'); + + const typeAnnotEl = document.createElement('span'); + typeAnnotEl.classList.add('type-annotation'); + typeAnnotEl.textContent = ' -> '; + + const thumbnailEl = document.createElement('img'); + thumbnailEl.src = thumbnailUrl; + thumbnailEl.addEventListener('load', e => { + thumbnailEl.classList.remove('faded'); + }); + + const thumbnailAnchorEl = document.createElement('a'); + thumbnailAnchorEl.classList.add('img-preview'); + thumbnailAnchorEl.href = linkImgEl.href; + thumbnailAnchorEl.addEventListener('click', e => { + e.preventDefault(); + + thumbnailEl.classList.add('faded'); + + if (thumbnailEl.classList.contains('expanded')) { + thumbnailEl.classList.remove('expanded'); + thumbnailEl.src = thumbnailUrl; + } else { + thumbnailEl.classList.add('expanded'); + thumbnailEl.src = thumbnailAnchorEl.href; + } + + return false; + }); + + thumbnailAnchorEl.append(thumbnailEl); + linkImgEl.parentNode!.insertBefore(thumbnailAnchorEl, linkImgEl.nextSibling); + linkImgEl.parentNode!.insertBefore(typeAnnotEl, thumbnailAnchorEl); + linkImgEl.parentNode!.insertBefore(lineBreakEl, typeAnnotEl); + } +} + +function removeImageThumbnails() { + const linkImgEls = document.querySelectorAll('.link--IMG, .link--GIF'); + let i = linkImgEls.length; + while (i--) { + const linkImgEl = linkImgEls[i]; + let j = 3; + + while (j-- && linkImgEl.nextSibling) { + linkImgEl.nextSibling.remove(); + } + } } diff --git a/template.go b/template.go index f5f4f2b..dfda36d 100644 --- a/template.go +++ b/template.go @@ -12,31 +12,38 @@ var tpltext = ` -
- {{- $href := "" -}} - {{- $uriParts := split .URI "/" -}} - {{- $uriLast := $uriParts | last -}} - {{- $uriParts = $uriParts | pop -}} - {{- if eq $uriLast "" -}} - {{- $uriLast = $uriParts | last -}} - {{- $uriParts = $uriParts | pop -}} - {{- end -}} - {{- if eq (len $uriParts) 1 -}} - {{- $uriLast = $uriParts | last -}} - {{- $uriParts = $uriParts | pop -}} - {{- end -}} +
+
+ {{- $href := "" -}} + {{- $uriParts := split .URI "/" -}} + {{- $uriLast := $uriParts | last -}} + {{- $uriParts = $uriParts | pop -}} + {{- if eq $uriLast "" -}} + {{- $uriLast = $uriParts | last -}} + {{- $uriParts = $uriParts | pop -}} + {{- end -}} + {{- if eq (len $uriParts) 1 -}} + {{- $uriLast = $uriParts | last -}} + {{- $uriParts = $uriParts | pop -}} + {{- end -}} - {{- range $i, $part := $uriParts -}} - {{- if ne $i 1 -}} - {{- $href = printf "%s/%s" $href . -}} - {{- if ne $i 0 }} / {{ end -}} - {{ . }} - {{- else -}} - {{- $href = printf "%s/1" $href -}} + {{ range $i, $part := $uriParts -}} + {{- if ne $i 1 -}} + {{- $href = printf "%s/%s" $href . -}} + {{- if ne $i 0 -}} + / + {{- end -}} + {{ . }} + {{- else -}} + {{- $href = printf "%s/1" $href -}} + {{- end -}} + {{- end -}} + {{- if ne (len $uriParts) 0 -}} + / {{- end -}} - {{- end -}} - {{- if ne (len $uriParts) 0 }} / {{ end -}} - {{ $uriLast -}} + {{ $uriLast -}} +
+ 
@@ -48,9 +55,6 @@ var tpltext = `
             {{- end -}}
             {{- if .Link -}}
               {{- $content = printf "%s%s" $content (printf "%s  %s" .Type .Type .Link (.Text | HTMLEscape)) -}}
-              {{- if or (eq .Type "IMG") (eq .Type "GIF") -}}
-                {{- $content = printf "%s\n%s" $content (printf " ->  " .Link (.Link | replace "^/(.*?)/I" "/$1/T")) -}}
-              {{- end -}}
             {{- else -}}
               {{- $content = printf "%s%s" $content (printf "     %s" (.Text | HTMLEscape)) -}}
             {{- end -}}
@@ -61,6 +65,18 @@ var tpltext = `
         {{- end -}}
+ -- cgit v1.2.3-70-g09d2