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(-)
(limited to 'juick-www/src')
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