diff options
-rw-r--r-- | assets/js/index.js | 55 | ||||
-rw-r--r-- | static/js/autoplay.ts | 36 | ||||
-rw-r--r-- | static/js/index.ts | 1 |
3 files changed, 83 insertions, 9 deletions
diff --git a/assets/js/index.js b/assets/js/index.js index 8e5cf48..8a47f5a 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -335,14 +335,14 @@ })(); (function() { const hide = function(triggers) { - for(let i = 0; i < triggers.length; i++){ - triggers[i].checked = false; + for(let i1 = 0; i1 < triggers.length; i1++){ + triggers[i1].checked = false; } }; const hideIfClickedOutside = function(menus, triggers, event) { - for(let i = 0; i < menus.length; i++){ - const active = triggers[i].checked === true; - const outside = !menus[i].contains(event.target); + for(let i1 = 0; i1 < menus.length; i1++){ + const active = triggers[i1].checked === true; + const outside = !menus[i1].contains(event.target); if (outside && active) hide(triggers); } }; @@ -563,6 +563,43 @@ }); })(); (function() { + function viewport(element) { + const options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : { + offset: { + top: -50, + left: 0, + bottom: -50, + right: 0 + } + }; + const view = element.getBoundingClientRect(); + return view.top >= -options.offset.top && view.left >= -options.offset.left && view.bottom <= (window.innerHeight || self.documentElement.clientHeight) + options.offset.bottom && view.right <= (window.innerWidth || self.documentElement.clientWidth) + options.offset.right; + } + [ + "scroll", + "DOMContentLoaded" + ].forEach(function(event) { + self.addEventListener(event, function() { + const videos = document.querySelectorAll("video"); + let first = true; + for(i = 0; i < videos.length; i++){ + videos[i].autoplay = true; + videos[i].controls = true; + videos[i].loop = true; + videos[i].muted = true; + videos[i].playsinline = true; + const onscreen = viewport(videos[i]); + if (first && onscreen) { + videos[i].play(); + first = false; + } else { + videos[i].pause(); + } + } + }); + }); +})(); +(function() { const relative = new Intl.RelativeTimeFormat("en", { localeMatcher: "best fit", numeric: "always", @@ -576,9 +613,9 @@ } const date = function(update) { const elements = document.querySelectorAll("time"); - for(let i = 0; i < elements.length; ++i){ - const offscreen = !viewport(elements[i]); - const hidden = elements[i].offsetParent === null; + for(let i1 = 0; i1 < elements.length; ++i1){ + const offscreen = !viewport(elements[i1]); + const hidden = elements[i1].offsetParent === null; if (update === "viewport" && (offscreen || hidden)) continue; (function(element) { try { @@ -643,7 +680,7 @@ } catch (error) { console.error("Error: Unable to resolve relative time format!", error); } - })(elements[i]); + })(elements[i1]); } }; const substitution = setInterval(date, 4); diff --git a/static/js/autoplay.ts b/static/js/autoplay.ts new file mode 100644 index 0000000..efa55e9 --- /dev/null +++ b/static/js/autoplay.ts @@ -0,0 +1,36 @@ +(function () { + function viewport(element) { + const options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : { + offset: { top: -50, left: 0, bottom: -50, right: 0 } + }; + const view = element.getBoundingClientRect(); + return view.top >= -options.offset.top + && view.left >= -options.offset.left + && view.bottom <= (window.innerHeight || self.documentElement.clientHeight) + options.offset.bottom + && view.right <= (window.innerWidth || self.documentElement.clientWidth) + options.offset.right; + }; + + ["scroll", "DOMContentLoaded"].forEach(function (event) { + self.addEventListener(event, function () { + const videos = document.querySelectorAll("video"); + let first = true; + + for (i = 0; i < videos.length; i++) { + videos[i].autoplay = true; + videos[i].controls = true; + videos[i].loop = true; + videos[i].muted = true; + videos[i].playsinline = true; + + const onscreen = viewport(videos[i]); + + if (first && onscreen) { + videos[i].play(); + first = false; + } else { + videos[i].pause(); + } + } + }); + }); +})(); diff --git a/static/js/index.ts b/static/js/index.ts index af805ae..da4defa 100644 --- a/static/js/index.ts +++ b/static/js/index.ts @@ -4,6 +4,7 @@ import "./plumber.ts"; import "./instantpage.ts"; import "./contextmenu.ts"; import "./fixedsearch.ts"; +import "./autoplay.ts"; import "./timeago.ts"; console.log("Surface Control: Complete"); |