From fb588169f61fc1c8f9a0b0eefd77cad67874f56f Mon Sep 17 00:00:00 2001 From: KillyMXI Date: Thu, 5 Oct 2017 03:58:09 +0300 Subject: www: update embedding --- juick-www/src/main/js/killy/index.js | 100 ++++++++++++++++++----------------- 1 file 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 = ``; + 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 = ``; + 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 = ``; + 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 = ``; + 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'); -- cgit v1.2.3