attempting JavaScript modules implementation

.eleventy.js

@@ -99,7 +99,34 @@ module.exports = function(eleventyConfig) {
 			});
 	});
 
-	eleventyConfig.setServerPassthroughCopyBehavior('copy');
+	/*eleventyConfig.addTemplateFormats('js');
+	eleventyConfig.addExtension('js', {
+		outputFileExtension: 'js',
+		compile: async (inputContent, inputPath) => {
+			console.log(inputPath);
+			if (inputPath !== './js/index.js') {
+				console.log('path to be skipped');
+				return;
+			}
+
+			let output = await require('esbuild').build({
+				target: 'es2020',
+				entryPoints: [inputPath],
+				minify: true,
+				bundle: true,
+				write: false,
+			});
+
+
+			return async () => {
+				console.log('processing js');
+				console.log(output.outputFiles[0].text);
+				return output.outputFiles[0].text;
+			}
+		}
+	});*/
+
+	//eleventyConfig.setServerPassthroughCopyBehavior('passthrough');
 	eleventyConfig.addPassthroughCopy({'svg': '/'});
 	eleventyConfig.addPassthroughCopy({'assets': '/'});
 	eleventyConfig.addPassthroughCopy('index.js');
@@ -138,12 +165,6 @@ module.exports = function(eleventyConfig) {
 			}
 		}
 	});
-	/*eleventyConfig.addPlugin(
-		require('@photogabble/eleventy-plugin-interlinker'),
-		{
-			defaultLayout: 'layouts/wikilink-embed.liquid'
-		}
-	);*/
 	eleventyConfig.addPlugin(EleventyRenderPlugin);
 	eleventyConfig.addPlugin(require('eleventy-sass'), {
 		compileOptions: {
@@ -201,6 +222,13 @@ module.exports = function(eleventyConfig) {
 			}
 			return content;
 		});
+		eleventyConfig.addTransform(require('uglify-js'), function(content, outputPath) {
+			console.log(outputPath);
+			if(this.outputPath && this.outputPath.endsWith('.js') ) {
+				return UglifyJS.minify(content);
+			}
+			return content;
+		})
 		eleventyConfig.addPlugin(require('eleventy-plugin-purgecss'));
 	}
 

js/index.js

@@ -0,0 +1,17 @@
+let i = 0;
+let pageUrl = window.location.href;
+let pageHeight = document.body.scrollHeight;
+
+import './modules/scroll.js';
+import './modules/toc.js';
+import './modules/language-filter.js';
+import './modules/copy-url.js';
+import './modules/share-via-mastodon.js';
+
+window.onload = function() {
+	scrollButtonBehavior();
+	window.onscroll = function() {
+		tocBehavior();
+		scrollButtonBehavior();
+	};
+};

js/js.11tydata.json

@@ -0,0 +1,3 @@
+{
+	"eleventyExcludeFromCollections": true
+}

js/modules/copy-url.js

@@ -0,0 +1,6 @@
+function copyUrl() {
+	copyUrlButton = document.getElementById('copyUrl');
+	navigator.clipboard.writeText(pageUrl);
+	console.log('copied %s to clipboard', pageUrl);
+	copyUrlButton.style.background = 'var(--green)';
+}

js/modules/language-filter.js

@@ -0,0 +1,37 @@
+let Italian = document.querySelectorAll(".zibaldone a[hreflang='it'], .grid a[hreflang='it']");
+let nonItalian = document.querySelectorAll(".zibaldone a[hreflang='en'], .grid a[hreflang='en'], .zibaldone a[hreflang='fr'], .grid a[hreflang='fr']");
+let English = document.querySelectorAll(".zibaldone a[hreflang='en'], .grid a[hreflang='en']");
+let nonEnglish = document.querySelectorAll(".zibaldone a[hreflang='it'], .grid a[hreflang='it'], .zibaldone a[hreflang='fr'], .grid a[hreflang='fr']");
+let French = document.querySelectorAll(".zibaldone a[hreflang='fr'], .grid a[hreflang='fr']");
+let nonFrench = document.querySelectorAll(".zibaldone a[hreflang='it'], .grid a[hreflang='it'], .zibaldone a[hreflang='en'], .grid a[hreflang='en']");
+let allLang = document.querySelectorAll(".zibaldone a[hreflang='it'], .grid a[hreflang='it'], .zibaldone a[hreflang='en'], .grid a[hreflang='en'], .zibaldone a[hreflang='fr'], .grid a[hreflang='fr']");
+
+function toggleIt() {
+	for (i = 0; i < nonItalian.length; i++) {
+		nonItalian[i].style.display = 'none';
+	}
+	for (i = 0; i < Italian.length; i++) {
+		Italian[i].style.display = 'block';
+	}
+}
+function toggleEn() {
+	for (i = 0; i < nonEnglish.length; i++) {
+		nonEnglish[i].style.display = 'none';
+	}
+	for (i = 0; i < English.length; i++) {
+		English[i].style.display = 'block';
+	}
+}
+function toggleFr() {
+	for (i = 0; i < nonFrench.length; i++) {
+		nonFrench[i].style.display = 'none';
+	}
+	for (i = 0; i < French.length; i++) {
+		French[i].style.display = 'block';
+	}
+}
+function toggleAll() {
+	for (i = 0; i < allLang.length; i++) {
+		allLang[i].style.display = 'block';
+	}
+}

js/modules/scroll.js

@@ -0,0 +1,22 @@
+const scrollButton = document.getElementById('scrollButton');
+
+function scrollButtonBehavior() {
+	scrollButton.href = 'javascript:void(0);';
+	if (document.body.scrollTop < 1000 || document.documentElement.scrollTop < 1000) {
+		scrollButton.title='scroll to bottom';
+		scrollButton.setAttribute('aria-label', 'scroll to bottom');
+		scrollButton.classList.add('scrollToBottom');
+	} else {
+		scrollButton.title='scroll to top';
+		scrollButton.setAttribute('aria-label', 'scroll to top');
+		scrollButton.classList.remove('scrollToBottom');
+	};
+}
+
+function nowScroll() {
+	if (document.body.scrollTop > 1000 || document.documentElement.scrollTop > 1000) {
+		window.scrollTo(0, 0);
+	} else {
+		window.scrollTo(0, pageHeight);
+	}
+}

js/modules/share-via-mastodon.js

@@ -0,0 +1,15 @@
+function shareViaMastodon() {
+	let defaultUrl = localStorage['instanceUrl'];
+	console.log(defaultUrl);
+	let instanceUrl= prompt('Enter the address of your server:', defaultUrl);
+	localStorage['instanceUrl'] = instanceUrl; 
+	if ( !instanceUrl.startsWith('https://') && !instanceUrl.startsWith('http://') ) {
+		instanceUrl = 'https://' + instanceUrl;
+	}
+	if ( !instanceUrl.endsWith('/') ) {
+		instanceUrl += '/';
+	}
+	let author = '@tommi@pan.rent'; 
+	let shareUrl = instanceUrl + 'share?text=' + encodeURIComponent(pageUrl + '\n\nby ' + author);
+	window.open(shareUrl, '_blank');
+}

js/modules/toc.js

@@ -0,0 +1,13 @@
+function tocBehavior() {
+	let toc = document.getElementById('toc');
+	if (toc) {
+		let footer = document.getElementsByTagName('footer')[0];
+		let footerHeight = footer.offsetHeight;
+		let tocHeight = pageHeight - footerHeight - 900; // adding some random pixels to consider margins etc.
+		if (document.body.scrollTop > tocHeight || document.documentElement.scrollTop > tocHeight) {
+			document.getElementById('toc').style.left = '-19vw';
+		} else {
+			document.getElementById('toc').style.left = '4vw';
+		}
+	}
+}