refactor(scripts): Adding method for detecting if polyfill is needed …

…or not"

Signed-off-by: Vincent Boutour <[email protected]>

cmd/fibr/static/scripts/modern_detection.js

@@ -0,0 +1,3 @@
+async function* _modernBrowserTest(){
+}
+window.modernBrowser = true;

cmd/fibr/templates/async-image.html

@@ -30,15 +30,42 @@
     function displayNoThumbnail(picture) {
       const span = document.createElement('span');
       span.classList.add('filename', 'ellipsis');
-      span.innerHTML = picture.alt.replace("Thumbnail of ", "");
-      picture.after(span)
+      span.innerHTML = picture.alt.replace('Thumbnail of ', '');
+      picture.after(span);
 
       picture.src = `{{ url "/svg/" }}${picture.dataset.icon}?fill=aliceblue`;
       picture.classList.add('icon', 'icon-large');
       picture.alt = 'Image file';
     }
+
+    function resolveScript(src, integrity, crossorigin) {
+      return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.src = src;
+        script.async = 'true';
+        script.onload = resolve.bind(null, true);
+        script.onerror = reject.bind(null, true);
+
+        if (integrity) {
+          script.integrity = integrity;
+          script.crossOrigin = crossorigin;
+        }
+
+        document.querySelector('head').appendChild(script);
+      });
+    }
+
+    resolveScript('/scripts/modern_detection.js')
+      .then(() => {
+        if (window.modernBrowser) {
+          resolveScript('/scripts/thumbnail.js');
+        } else {
+          resolveScript('/scripts/thumbnail/web.js')
+        }
+      })
+      .catch(() => resolveScript('/scripts/thumbnail.js'));
   </script>
 
-  <script type="text/javascript" src="/scripts/thumbnail/web.js" async></script>
   </script>
 {{ end }}