www: update embedding

1 files changed, 51 insertions, 49 deletions

diff --git a/juick-www/src/main/js/killy/index.js b/juick-www/src/main/js/killy/index.js
index c9885b03..da64791e 100644
--- a/juick-www/src/main/js/killy/index.js
+++ b/juick-www/src/main/js/killy/index.js
@@ -3,6 +3,16 @@ function insertAfter(newNode, referenceNode) {
   referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
 }
 
+function setContent(containerNode, ...newNodes) {
+  removeAllFrom(containerNode);
+  newNodes.forEach(n => containerNode.appendChild(n));
+  return containerNode;
+}
+
+function removeAllFrom(fromNode) {
+  for (let c; c = fromNode.lastChild; ) { fromNode.removeChild(c); }
+}
+
 function htmlEscape(html) {
   let textarea = document.createElement('textarea');
   textarea.textContent = html;
@@ -39,6 +49,16 @@ function fixWwwLink(url) {
   return url.replace(/^(?!([a-z]+:)?\/\/)/i, '//');
 }
 
+function makeNewNode(embedType, aNode, reResult) {
+  const withClasses = el => {
+    if (embedType.className) {
+      el.classList.add(...embedType.className.split(' '));
+    }
+    return el;
+  };
+  return embedType.makeNode(aNode, reResult, withClasses(document.createElement('div')));
+}
+
 function makeIframe(src, w, h, scrolling='no') {
   let iframe = document.createElement('iframe');
   iframe.style.width = w;
@@ -51,13 +71,6 @@ function makeIframe(src, w, h, scrolling='no') {
   return iframe;
 }
 
-function wrapIntoTag(node, tagName, className) {
-  let tag = document.createElement(tagName);
-  if (className !== undefined) { tag.className = className; }
-  tag.appendChild(node);
-  return tag;
-}
-
 function makeResizableToRatio(element, ratio) {
   element.dataset['ratio'] = ratio;
   makeResizable(element, w => w * element.dataset['ratio']);
@@ -135,67 +148,57 @@ function getEmbeddableLinkTypes() {
     {
       name: 'Jpeg and png images',
       id: 'embed_jpeg_and_png_images',
+      className: 'picture compact',
       ctsDefault: false,
-      re: /\.(jpeg|jpg|png|svg)(:[a-zA-Z]+)?(?:\?[\w&;\?=]*)?$/i,
-      makeNode: function(aNode) {
-        let aNode2 = document.createElement('a');
-        let imgNode = document.createElement('img');
-        imgNode.src = aNode.href;
-        aNode2.href = aNode.href;
-        aNode2.appendChild(imgNode);
-        return wrapIntoTag(aNode2, 'div', 'picture compact');
+      re: /\.(jpe?g|png|svg)(:[a-zA-Z]+)?(?:\?[\w&;\?=]*)?$/i,
+      makeNode: function(aNode, reResult, div) {
+        div.innerHTML = `<a href="${aNode.href}"><img src="${aNode.href}"></a>`;
+        return div;
       }
     },
     {
       name: 'Gif images',
       id: 'embed_gif_images',
+      className: 'picture compact',
       ctsDefault: true,
       re: /\.gif(:[a-zA-Z]+)?(?:\?[\w&;\?=]*)?$/i,
-      makeNode: function(aNode) {
-        let aNode2 = document.createElement('a');
-        let imgNode = document.createElement('img');
-        imgNode.src = aNode.href;
-        aNode2.href = aNode.href;
-        aNode2.appendChild(imgNode);
-        return wrapIntoTag(aNode2, 'div', 'picture compact');
+      makeNode: function(aNode, reResult, div) {
+        div.innerHTML = `<a href="${aNode.href}"><img src="${aNode.href}"></a>`;
+        return div;
       }
     },
     {
       name: 'Video (webm, mp4, ogv)',
       id: 'embed_webm_and_mp4_videos',
+      className: 'video compact',
       ctsDefault: false,
       re: /\.(webm|mp4|m4v|ogv)(?:\?[\w&;\?=]*)?$/i,
-      makeNode: function(aNode) {
-        let video = document.createElement('video');
-        video.src = aNode.href;
-        video.title = aNode.href;
-        video.setAttribute('controls', '');
-        return wrapIntoTag(video, 'div', 'video compact');
+      makeNode: function(aNode, reResult, div) {
+        div.innerHTML = `<video src="${aNode.href}" title="${aNode.href}" controls></video>`;
+        return div;
       }
     },
     {
       name: 'Audio (mp3, ogg, weba, opus, m4a, oga, wav)',
       id: 'embed_sound_files',
+      className: 'audio singleColumn',
       ctsDefault: false,
       re: /\.(mp3|ogg|weba|opus|m4a|oga|wav)(?:\?[\w&;\?=]*)?$/i,
-      makeNode: function(aNode) {
-        let audio = document.createElement('audio');
-        audio.src = aNode.href;
-        audio.title = aNode.href;
-        audio.setAttribute('controls', '');
-        return wrapIntoTag(audio, 'div', 'audio');
+      makeNode: function(aNode, reResult, div) {
+        div.innerHTML = `<audio src="${aNode.href}" title="${aNode.href}" controls></audio>`;
+        return div;
       }
     },
     {
       name: 'YouTube videos (and playlists)',
       id: 'embed_youtube_videos',
-      onByDefault: false,
+      className: 'youtube resizableV singleColumn',
       ctsDefault: false,
       re: /^(?:https?:)?\/\/(?:www\.|m\.|gaming\.)?(?:youtu(?:(?:\.be\/|be\.com\/(?:v|embed)\/)([-\w]+)|be\.com\/watch)((?:(?:\?|&(?:amp;)?)(?:\w+=[-\.\w]*[-\w]))*)|youtube\.com\/playlist\?list=([-\w]*)(&(amp;)?[-\w\?=]*)?)/i,
-      makeNode: function(aNode, reResult) {
+      makeNode: function(aNode, reResult, div) {
         let [url, v, args, plist] = reResult;
         let iframeUrl;
-        if (plist !== undefined) {
+        if (plist) {
           iframeUrl = '//www.youtube-nocookie.com/embed/videoseries?list=' + plist;
         } else {
           let pp = {}; args.replace(/^\?/, '')
@@ -203,12 +206,12 @@ function getEmbeddableLinkTypes() {
                            .map(s => s.split('='))
                            .forEach(z => pp[z[0]] = z[1]);
           let embedArgs = { rel: '0' };
-          if (pp.t != undefined) {
+          if (pp.t) {
             const tre = /^(?:(\d+)|(?:(\d+)h)?(?:(\d+)m)?(\d+)s|(?:(\d+)h)?(\d+)m|(\d+)h)$/i;
             let [, t, h, m, s, h1, m1, h2] = tre.exec(pp.t);
             embedArgs['start'] = (+t) || ((+(h || h1 || h2 || 0))*60*60 + (+(m || m1 || 0))*60 + (+(s || 0)));
           }
-          if (pp.list !== undefined) {
+          if (pp.list) {
             embedArgs['list'] = pp.list;
           }
           v = v || pp.v;
@@ -219,20 +222,19 @@ function getEmbeddableLinkTypes() {
         }
         let iframe = makeIframe(iframeUrl, '100%', '360px');
         iframe.onload = () => makeResizableToRatio(iframe, 9.0 / 16.0);
-        return wrapIntoTag(iframe, 'div', 'youtube resizableV');
+        return setContent(div, iframe);
       }
     },
     {
       name: 'Vimeo videos',
       id: 'embed_vimeo_videos',
-      onByDefault: false,
+      className: 'vimeo resizableV',
       ctsDefault: false,
-      //re: /^(?:https?:)?\/\/(?:www\.)?(?:player\.)?vimeo\.com\/(?:(?:video\/|album\/[\d]+\/video\/)?([\d]+)|([\w-]+)\/(?!videos)([\w-]+))/i,
       re: /^(?:https?:)?\/\/(?:www\.)?(?:player\.)?vimeo\.com\/(?:video\/|album\/[\d]+\/video\/)?([\d]+)/i,
-      makeNode: function(aNode, reResult) {
+      makeNode: function(aNode, reResult, div) {
         let iframe = makeIframe('//player.vimeo.com/video/' + reResult[1], '100%', '360px');
         iframe.onload = () => makeResizableToRatio(iframe, 9.0 / 16.0);
-        return wrapIntoTag(iframe, 'div', 'vimeo resizableV');
+        return setContent(div, iframe);
       }
     }
   ];
@@ -245,12 +247,12 @@ function embedLink(aNode, linkTypes, container, afterNode) {
   if (sameEmbed === null) {
     anyEmbed = [].some.call(linkTypes, function(linkType) {
         let reResult = linkType.re.exec(aNode.href);
-        if (reResult !== null) {
-          if ((linkType.match !== undefined) && (linkType.match(aNode, reResult) === false)) { return false; }
-          let newNode = linkType.makeNode(aNode, reResult);
+        if (reResult) {
+          if (linkType.match && (linkType.match(aNode, reResult) === false)) { return false; }
+          let newNode = makeNewNode(linkType, aNode, reResult);
           if (!newNode) { return false; }
           newNode.setAttribute('data-linkid', linkId);
-          if (afterNode !== undefined) {
+          if (afterNode) {
             insertAfter(newNode, afterNode);
           } else {
             container.appendChild(newNode);
@@ -288,7 +290,7 @@ function embedLinksToX(x, beforeNodeSelector, allLinksSelector) {
   let allLinks = x.querySelectorAll(allLinksSelector);
 
   let existingContainer = x.querySelector('div.embedContainer');
-  if (existingContainer !== null) {
+  if (existingContainer) {
     embedLinks(allLinks, existingContainer);
   } else {
     let embedContainer = document.createElement('div');