add modal image popup

packages/docs/_views/functions/scripts.tt

@@ -12,6 +12,6 @@
   [%- IF (script.match('^[ \t\n]*<script')) %]
   [%- script -%]
   [%- ELSE %]
-  <script src="[% q.bustCache(script) | url %]" type="text/javascript"></script>
+  <script src="/e-invoice-eu[% q.bustCache(script) | url %]" type="text/javascript"></script>
   [%- END %]
 [% END %]

packages/docs/_views/functions/styles.tt

@@ -7,3 +7,11 @@
   <link href="[% q.bustCache(style) | url %]" rel="stylesheet">
   [%- END %]
 [% END %]
+[% FOREACH style IN asset.styles %]
+  [%- NEXT IF seen.$style; seen.$style = 1 %]
+  [%- IF (style.match('^[ \t\n]*<style')) %]
+  [%- style -%]
+  [%- ELSE %]
+  <link href="/e-invoice-eu[% q.bustCache(style) | url %]" rel="stylesheet">
+  [%- END %]
+[% END %]

packages/docs/site/css/modal-image-popup.css

@@ -0,0 +1,46 @@
+.gfl-magnifiable {
+	cursor: pointer;
+}
+
+.gfl-modal {
+	display: none;
+	position: fixed;
+	z-index: 1;
+	padding-top: 5rem;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	background-color: rgb(0, 0, 0);
+	background-color: rgba(0, 0, 0, 0.4);
+}
+
+.gfl-modal-content {
+	margin: auto;
+	display: block;
+	cursor: pointer;
+	width: 80%;
+	max-width: 90%;
+	border: 1rem solid rgb(240, 240, 240);
+	background: white;
+}
+
+#gfl-caption {
+	margin: auto;
+	display: block;
+	text-align: center;
+	color: #bbb;
+	padding: 1rem 0;
+	height: 10rem;
+}
+
+.gfl-modal-content, #gfl-caption {
+	animation-name: zoom;
+	animation-duration: 0.6s;
+}
+
+@keyframes zoom {
+	from {transform:scale(0)}
+	to {transform:scale(1)}
+}

packages/docs/site/js/modal-image-popup.js

@@ -0,0 +1,45 @@
+function enrichImage(img, modal) {
+	const innerImg = modal.getElementsByTagName('img')[0];
+	const caption = modal.getElementsByTagName('div')[0];
+	img.classList.add('gfl-magnifiable');
+	const src = img.src;
+	img.addEventListener('click', () => {
+		modal.style.display = 'block';
+		innerImg.src = src;
+		console.log(innerImg.src);
+		caption.innerHTML = img.alt;
+	});
+}
+
+const container = document.createElement('div');
+document.body.appendChild(container);
+container.classList.add('gfl-modal')
+
+const innerImg = document.createElement('img');
+container.appendChild(innerImg);
+innerImg.classList.add('gfl-modal-content')
+
+const caption = document.createElement('div');
+caption.id = 'gfl-caption';
+container.appendChild(caption);
+
+const content = document.getElementsByTagName('qgoda-content')[0];
+for (var img of content.getElementsByTagName('img')) {
+	if (!img.classList.contains('gfl-modal-content')) {
+		if (img.naturalWidth > img.width) {
+			enrichImage(img, container);
+		} else {
+			img.width = img.naturalWidth;
+		}
+	}
+}
+
+container.onclick = function() {
+	container.style.display = 'none';
+}
+
+innerImg.onclick = (event) => {
+	event.stopPropagation();
+	container.style.display = 'none';
+	window.open(innerImg.src);
+};