jawoll

public/s/js/f0ck.js

@@ -1,6 +1,12 @@
 (() => {
   if(elem = document.querySelector("#my-video")) {
     const video = new v0ck(elem);
+    document.addEventListener("keydown", e => {
+      if(e.key === " ") {
+        video[video.paused ? 'play' : 'pause']();
+        document.querySelector('.v0ck_overlay').classList[video.paused ? 'remove' : 'add']('v0ck_hidden');
+      }
+    });
   }
 
   let tt = false;
@@ -14,9 +20,9 @@
   const clickOnElementBinding = selector => () => (elem = document.querySelector(selector)) ? elem.click() : null;
   const keybindings = {
     "ArrowLeft": clickOnElementBinding("#next"),
-    "d": clickOnElementBinding("#next"),
+    "a": clickOnElementBinding("#next"),
     "ArrowRight": clickOnElementBinding("#prev"),
-    "a": clickOnElementBinding("#prev"),
+    "d": clickOnElementBinding("#prev"),
     "r": clickOnElementBinding("#random")
   };
   document.addEventListener("keydown", e => {
@@ -28,9 +34,24 @@
   // </keybindings>
 
   // <image-responsive>
-  if(f0ckimage = document.querySelector("#f0ck-image")) {
-    f0ckimage.addEventListener("click", e => {
+  const imgSize = e => new Promise((res, _) => {
+    const i = new Image();
+    i.addEventListener('load', function() {
+      res({ width: this.width, height: this.height });
+    });
+    i.src = e.src;
+  });
+
+  if(f0ckimage = document.querySelector("img#f0ck-image")) {
+    const f0ckimagescroll = document.querySelector("#image-scroll");
+    f0ckimage.addEventListener("click", async e => {
       e.preventDefault();
+      const img = await imgSize(f0ckimage);
+      if(img.width > img.height)
+        return;
+      f0ckimagescroll.hasAttribute("style")
+        ? f0ckimagescroll.removeAttribute("style")
+        : f0ckimagescroll.setAttribute("style", "overflow-y: scroll");
       f0ckimage.hasAttribute("style")
         ? f0ckimage.removeAttribute("style")
         : f0ckimage.setAttribute("style", "max-height: none; height: auto; width: 100%; position: absolute; left: 0;");
@@ -38,19 +59,8 @@
   }
   // </image-responsive>
 
-  // <scroll-event-adder>
-  if(f0ckimagescroll = document.querySelector("#image-scroll")) {
-    f0ckimagescroll.addEventListener("click", e => {
-      e.preventDefault();
-      f0ckimagescroll.hasAttribute("style")
-        ? f0ckimagescroll.removeAttribute("style")
-        : f0ckimagescroll.setAttribute("style", "overflow-y: scroll");
-    });
-  }
-  // </scroll-event-adder>
-
   // <scroller>
-  if(document.querySelector("ul#posts")) {
+  if(document.querySelector("div#posts")) {
     document.addEventListener("wheel", e => {
       if((window.innerHeight + window.scrollY) >= document.body.offsetHeight && e.deltaY > 0) {
         if(elem = document.querySelector(".pagination > .next:not(.disabled)"))
@@ -94,10 +104,10 @@
         elem = document.querySelector(".pagination > .prev:not(.disabled)");
     }
     else {
-      if(navbar = document.querySelector("nav.navbar") && document.querySelector("ul#posts")) {
+      if(navbar = document.querySelector("nav.navbar") && document.querySelector("div#posts")) {
         if(yDiff > 0 && (window.innerHeight + window.scrollY) >= document.body.offsetHeight) // up
           elem = document.querySelector(".pagination > .next:not(.disabled)");
-        else if(yDiff <= 0 && window.scrollY <= 0 && document.querySelector("ul#posts")) // down
+        else if(yDiff <= 0 && window.scrollY <= 0 && document.querySelector("div#posts")) // down
           elem = document.querySelector(".pagination > .prev:not(.disabled)");
       }
     }

public/s/js/theme.js

@@ -10,30 +10,36 @@ const Cookie = {
     }
     opts = Object.entries(opts).reduce((accumulatedStr, [k, v]) => `${accumulatedStr}; ${k}=${v}`, '');
     document.cookie = name + '=' + encodeURIComponent(value) + opts
-  },
-  delete: (name, opts) => Cookie.set(name, '', {'max-age': -1, ...opts})
+  }
 };
 
 (() => {
-  const themes = [ 'f0ck', 'p1nk', 'orange', 'amoled' ];
   const acttheme = Cookie.get('theme') ?? "f0ck";
-  if(acttheme !== document.documentElement.getAttribute("theme"))
+  const themecontainer = document.querySelector("li#themes > ul.dropdown-menu");
+  const themes = [...themecontainer.querySelectorAll("li > a")].map(t => t.innerText.toLowerCase());
+  if(acttheme !== document.documentElement.getAttribute("theme") && themes.includes(acttheme))
     document.documentElement.setAttribute("theme", acttheme);
-  if(themecontainer = document.querySelector("#themes")) {
-    const sb = document.createElement("select");
-    sb.id = "themeselector";
-    themes.forEach(o => {
-      const option = document.createElement("option");
-      option.text = o;
-      if(acttheme === o)
-        option.selected = true;
-      sb.add(option);
-    });
-    themecontainer.insertAdjacentElement("afterend", sb);
-    sb.addEventListener("change", e => {
-      const s = e.target.options[e.target.selectedIndex].innerText;
-      document.documentElement.setAttribute("theme", s);
-      Cookie.set("theme", s, { path: "/", days: 360 });
-    });
-  }
+  [...themecontainer.querySelectorAll("li > a")].forEach(t => t.addEventListener("click", e => {
+    e.preventDefault();
+    const _theme = e.target.innerText.toLowerCase();
+    document.documentElement.setAttribute("theme", _theme);
+    document.querySelector("#themes > a").setAttribute("content", _theme);
+    Cookie.set("theme", _theme, { path: "/", days: 360 });
+    return false;
+  }));
+
+  document.addEventListener("keydown", e => {
+    const acttheme = Cookie.get('theme') ?? "f0ck";
+    const themes = [...themecontainer.querySelectorAll("li > a")].map(t => t.innerText.toLowerCase());
+    const k = e.key;
+    if(k === "t") {
+      e.preventDefault();
+      let i = themes.indexOf(acttheme);
+      if(++i >= themes.length)
+        i = 0;
+      document.documentElement.setAttribute("theme", themes[i]);
+      document.querySelector("#themes > a").setAttribute("content", themes[i]);
+      Cookie.set("theme", themes[i], { path: "/", days: 360 });
+    }
+  });
 })();

public/s/js/v0ck.js

@@ -49,7 +49,7 @@ class v0ck {
     }
     else
       return console.error("nope");
-    this.init(elem);
+    return this.init(elem);
   }
 
   init(elem) {
@@ -133,10 +133,14 @@ class v0ck {
       video.currentTime = (e.offsetX / progress.offsetWidth) * video.duration;
     }
     function toggleFullScreen(e) {
-      if(document.fullscreenElement)
+      if(document.fullscreenElement) // exit fullscreen
         document.exitFullscreen();
-      else
-        player.requestFullscreen();
+      else { // request fullscreen
+        if(/(iPad|iPhone|iPod)/gi.test(navigator.platform))
+          video.webkitEnterFullscreen();
+        else
+          player.requestFullscreen();
+      }
     }
     function toggleFullScreenClasses() {
       player.classList.toggle('fullscreen');
@@ -161,12 +165,11 @@ class v0ck {
     progress.addEventListener('mouseup', () => mousedown = false);
     fullscreen.addEventListener('click', toggleFullScreen);
     document.addEventListener('fullscreenchange', toggleFullScreenClasses);
-    document.addEventListener('mozfullscreenchange', toggleFullScreenClasses);
-    document.addEventListener('webkitfullscreenchange', toggleFullScreenClasses);
-    document.addEventListener('msfullscreenchange', toggleFullScreenClasses);
 
     video.volume = _volume = volumeSlider.value = +(localStorage.getItem('volume') ?? defaultVolume);
     handleVolumeButton(video.volume);
     togglePlay();
+
+    return video;
   }
 }