carousel for programview

www/data/css/styles.css

@@ -202,7 +202,15 @@ body {
   background-position: center;
   background-repeat: no-repeat;
   height: 100%;
-  width: 100%; }
+  width: 100%;
+  display: flex; }
+
+.imgcarousel_content video {
+  object-fit: contain;
+  width: 100%;
+  height: auto;
+  max-height: 100%;
+  align-self: center; }
 
 .imgcarousel_prev, .imgcarousel_next {
   display: flex;
@@ -215,6 +223,9 @@ body {
 .imgcarousel_next {
   margin-left: 5px; }
 
+.imgcarousel_next, .imgcarousel_prev {
+  outline: none; }
+
 .imgcarousel_prev svg {
   width: 48px;
   height: 48px;
@@ -1133,6 +1144,11 @@ html, body {
 
   #prgv_header h1 {
     font-size: 28pt; } }
+.progv_extra {
+  height: 500px;
+  border: 1px solid #333;
+  margin: 10px; }
+
 /* 400px */
 .booklst_entry {
   display: flex;

www/data/css/styles.min.css

@@ -42,10 +42,12 @@ body{background-color:#EEE;color:#CCC;font-family:serif}
 .stripedtable tbody tr:last-child td{border-bottom:0}
 .stripedtable tbody tr:nth-child(odd){background-color:#ccc}
 .imgcarousel_parent{display:flex;flex-direction:row;align-content:center;justify-content:center;padding:5px;background:#BBB}
-.imgcarousel_content{background-size:contain;background-position:center;background-repeat:no-repeat;height:100%;width:100%}
+.imgcarousel_content{background-size:contain;background-position:center;background-repeat:no-repeat;height:100%;width:100%;display:flex}
+.imgcarousel_content video{object-fit:contain;width:100%;height:auto;max-height:100%;align-self:center}
 .imgcarousel_prev,.imgcarousel_next{display:flex;flex-direction:column;justify-content:center}
 .imgcarousel_prev{margin-right:5px}
 .imgcarousel_next{margin-left:5px}
+.imgcarousel_next,.imgcarousel_prev{outline:0}
 .imgcarousel_prev svg{width:48px;height:48px;border:1px solid black;background:#333;fill:#DDD}
 .imgcarousel_next svg{width:48px;height:48px;border:1px solid black;background:#333;fill:#DDD}
 .imgcarousel_prev:hover svg{background:#000;fill:#FFF;cursor:pointer}
@@ -276,6 +278,7 @@ html,body{margin:0;padding:0;height:100%}
 	.prgv_right_lang{justify-content:space-evenly}
 	#prgv_header h1{font-size:28pt}
 }
+.progv_extra{height:500px;border:1px solid #333;margin:10px}
 .booklst_entry{display:flex;flex-direction:row;text-decoration:none;background:#BBB;border:solid 1px #444;margin:5px 0}
 .booklst_entry:hover{background:white;color:black;border:solid 1px black}
 .booklst_entry:hover .booklst_date{color:black}

www/data/css/styles_global.scss

@@ -249,8 +249,16 @@ body {
   background-repeat: no-repeat;
   height: 100%;
   width: 100%;
+  display:flex;
 }
 
+.imgcarousel_content video {
+  object-fit: contain;
+  width: 100%;
+  height: auto;
+  max-height: 100%;
+  align-self: center;
+}
 
 .imgcarousel_prev, .imgcarousel_next
 {
@@ -269,6 +277,11 @@ body {
   margin-left: 5px;
 }
 
+.imgcarousel_next, .imgcarousel_prev
+{
+  outline: none;
+}
+
 .imgcarousel_prev svg { width: 48px; height: 48px; border: 1px solid black; background: #333; fill: #DDD; }
 .imgcarousel_next svg { width: 48px; height: 48px; border: 1px solid black; background: #333; fill: #DDD; }
 .imgcarousel_prev:hover svg { background: #000; fill: #FFF; cursor: pointer; }

www/data/css/styles_programsview.scss

@@ -140,4 +140,10 @@
   #prgv_header h1 {
     font-size: 28pt;
   }
+}
+
+.progv_extra {
+  height: 500px;
+  border: 1px solid #333;
+  margin: 10px;
 }

www/data/javascript/blogpost_BFJoustBot_script.js

@@ -770,14 +770,14 @@ function collapse(code) {
     
 //######################################################
 
-window.onload = function ()
+window.addEventListener("load",function ()
 {
     document.getElementById("a_expand").onclick   = onExpandClicked;
     document.getElementById("a_collapse").onclick = onCollapseClicked;
     document.getElementById("a_run").onclick      = onRunClicked;
     document.getElementById("a_stop").onclick     = onStopClicked;
     document.getElementById("a_arena").onclick    = onArenaClicked;
-};
+},false);
 
 
 function onExpandClicked() {

www/data/javascript/blogpost_bef93runner.js

@@ -445,7 +445,7 @@ function htmlescape(str) {
     return str;
 }
 
-window.onload = function ()
+window.addEventListener("load",function ()
 {
     let elements = document.getElementsByClassName("b93rnr_base");
 
@@ -468,4 +468,4 @@ window.onload = function ()
         if (befungeObject.btnEdit !== undefined)
             befungeObject.btnEdit.onclick  = function () { if (befungeObject.btnEdit.classList.contains('ctrl_btn_disabled')) return; befungeObject.startEdit(); };
     }
-};
+},false);

www/data/javascript/egh.js

@@ -15,7 +15,7 @@ function formatDate(date) {
     return wday + ' ' + day + suffix + ' ' + monthNames[monthIndex] + ', ' + year;
 }
 
-window.onload = function ()
+window.addEventListener("load",function ()
 {
     let svgtips = document.getElementsByClassName("svg-tip");
     let rects   = document.getElementsByClassName("egg_rect");
@@ -54,4 +54,4 @@ window.onload = function ()
             masterTip.style.display = 'none';
         });
     }
-};
+},false);

www/data/javascript/ms_basic.js

@@ -1,3 +1,10 @@
+window.addEventListener("load", function()
+{
+
+    imgcarousel_init();
+
+},false);
+
 function findParent(el, selector) {
     let retval = null;
     while (el) {
@@ -19,14 +26,51 @@ function findChild(el, selector) {
     return null;
 }
 
+function imgcarousel_init() {
+    for (let carousel of document.getElementsByClassName("imgcarousel_parent"))
+    {
+        let images   = JSON.parse(carousel.getAttribute('data-imgcarousel-images'));
+
+        let btnPrev = findChild(carousel, '.imgcarousel_prev');
+        let btnNext = findChild(carousel, '.imgcarousel_next');
+
+        btnPrev.setAttribute('href', "javascript:void(0)");
+        btnNext.setAttribute('href', "javascript:void(0)");
+
+        btnPrev.onclick = function () { imgcarousel_move(carousel, -1); };
+        btnNext.onclick = function () { imgcarousel_move(carousel, +1); };
+
+        if (images.length <= 1)
+        {
+            btnPrev.setAttribute('style', 'visibility:hidden');
+            btnNext.setAttribute('style', 'visibility:hidden');
+        }
+
+        imgcarousel_move(carousel, 0);
+    }
+}
+
 function imgcarousel_move(source, delta) {
-    let carousel = findParent(source, ".imgcarousel_parent");
+    let carousel = findParent(source, ".imgcarousel_parent"); // <div>
     let index    = parseInt(carousel.getAttribute('data-imgcarousel-index'));
     let images   = JSON.parse(carousel.getAttribute('data-imgcarousel-images'));
-    let content  = findChild(carousel, '.imgcarousel_content');
+    let content  = findChild(carousel, '.imgcarousel_content'); // <img>
 
     index = (index + delta +  images.length) % images.length;
 
+    let img = images[index];
+
     carousel.setAttribute('data-imgcarousel-index', index);
-    content.setAttribute('style', 'background-image: url(' + images[index] + ');');
+
+    if (img.toLowerCase().endsWith('.webm'))
+    {
+        content.setAttribute('style', '');
+        content.innerHTML = '<video autoplay loop muted><source src="' + img + '"></video>';
+    }
+    else
+    {
+        content.setAttribute('style', 'background-image: url(' + img + ');');
+        content.innerHTML = '';
+    }
+
 }