jawoll
This commit is contained in:
Flummi
BIN
public/s/Adler.ttf
Normal file
BIN
public/s/Adler.ttf
Normal file
Binary file not shown.
@ -56,6 +56,7 @@ html[theme='p1nk'] {
|
||||
--nav-link-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1);
|
||||
--nav-link-hover-bg: #333;
|
||||
--dropdown-bg: #232323;
|
||||
--dropdown-item-hover: #0d0d0d;
|
||||
--nav-brand-font: 'VCR';
|
||||
--font: monospace;
|
||||
--pagination-background: #2b2b2b;
|
||||
@ -65,6 +66,8 @@ html[theme='p1nk'] {
|
||||
--pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
--badge-bg: #171717;
|
||||
--metadata-bg: #0d0d0d;
|
||||
--posts-meta-bg: #000000b8;
|
||||
--scrollbar-color: #2b2b2b;
|
||||
}
|
||||
|
||||
html[theme='orange'] {
|
||||
@ -136,6 +139,119 @@ html[theme='amoled'] {
|
||||
--scrollbar-color: #1d1c1c;
|
||||
}
|
||||
|
||||
html[theme="paper"] {
|
||||
--accent: #000;
|
||||
--bg: #fff;
|
||||
--black: #000;
|
||||
--white: #fff;
|
||||
--gray: #262626;
|
||||
--nav-bg: #fff;
|
||||
--nav-brand-border: inset 1px #242424;
|
||||
--nav-brand-bg: #fff;
|
||||
--navigation-links-bg: #fff;
|
||||
--navigation-links-background-linear-gradient: rgba(0,0,0,.12),rgba(0,0,0,0);
|
||||
--navigation-links-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
--navigation-links-box-shadow: rgba(255,255,255,.05);
|
||||
--nav-link-background-linear-gradient: rgba(255,255,255,.04),rgba(255,255,255,0);
|
||||
--nav-link-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0px rgba(255,255,255,.04),inset 0 0px rgba(0,0,0,.15),0 0px 0px rgba(0,0,0,.1);
|
||||
--nav-link-hover-bg: #3939354a;
|
||||
--nav-border-color: rgba(255,255,255,.05);
|
||||
--dropdown-bg: #fff;
|
||||
--dropdown-item-hover: #3939354a;
|
||||
--nav-brand-font: 'VCR';
|
||||
--font: monospace;
|
||||
--pagination-background: #fff;
|
||||
--pagination-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0px rgba(255,255,255,.04),inset 0 0px rgba(0,0,0,.15),0 0px 0px rgba(0,0,0,.1);
|
||||
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1);
|
||||
--pagination-background-hover: #3939354a;
|
||||
--pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
--metadata-bg: #fff;
|
||||
--badge-bg: #fff;
|
||||
--posts-meta-bg: #000000b8;
|
||||
--badge-sfw: #68a728;
|
||||
--badge-nsfw: #a72828;
|
||||
--badge-tag: #6c6c6c;
|
||||
--scrollbar-color: #6c6c6c;
|
||||
}
|
||||
|
||||
html[theme="paper"] a#next {
|
||||
color: var(--white) !important;
|
||||
-webkit-text-stroke: 1px var(--black);
|
||||
}
|
||||
|
||||
html[theme="paper"] a#prev {
|
||||
color: var(--white) !important;
|
||||
-webkit-text-stroke: 1px var(--black);
|
||||
}
|
||||
|
||||
html[theme="paper"] .about {
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
html[theme="paper"] .about a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
html[theme="paper"] div#posts > a::after {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
html[theme="paper"] .v0ck_progress_filled {
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
html[theme="paper"] .metadata {
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
html[theme="paper"] .navbar-brand:hover {
|
||||
background: var(--black);
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
html[theme="paper"] .navbar {
|
||||
border-bottom: 1px solid var(--black);
|
||||
}
|
||||
|
||||
html[theme="paper"] .embed-responsive-image {
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
html[theme="atmos"] {
|
||||
--accent: #1fb2b0;
|
||||
--bg: #161618;
|
||||
--black: #000;
|
||||
--white: #fff;
|
||||
--gray: #262626;
|
||||
--nav-bg: rgb(32, 32, 32);
|
||||
--nav-brand-border: inset 1px #242424;
|
||||
--nav-brand-bg: #171717;
|
||||
--navigation-links-bg: rgb(32, 32, 32);
|
||||
--navigation-links-background-linear-gradient: rgba(0,0,0,.12),rgba(0,0,0,0);
|
||||
--navigation-links-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
--navigation-links-box-shadow: rgba(255,255,255,.05);
|
||||
--nav-link-background-linear-gradient: rgba(255,255,255,.04),rgba(255,255,255,0);
|
||||
--nav-link-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0px rgba(255,255,255,.04),inset 0 0px rgba(0,0,0,.15),0 0px 0px rgba(0,0,0,.1);
|
||||
--nav-link-hover-bg: #333;
|
||||
--nav-border-color: rgba(255,255,255,.05);
|
||||
--dropdown-bg: #232323;
|
||||
--dropdown-item-hover: #0d0d0d;
|
||||
--nav-brand-font: 'VCR';
|
||||
--font: monospace;
|
||||
--pagination-background: rgb(32, 32, 32);
|
||||
--pagination-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0px rgba(255,255,255,.04),inset 0 0px rgba(0,0,0,.15),0 0px 0px rgba(0,0,0,.1);
|
||||
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1);
|
||||
--pagination-background-hover: #333;
|
||||
--pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
--metadata-bg: rgba(34, 34, 34, 0.8);
|
||||
--badge-bg: #1f1f20;
|
||||
--posts-meta-bg: #000000b8;
|
||||
--badge-sfw: #68a728;
|
||||
--badge-nsfw: #a72828;
|
||||
--badge-tag: #6c6c6c;
|
||||
--scrollbar-color: #2b2b2b;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
@ -147,9 +263,9 @@ html[theme='amoled'] {
|
||||
}
|
||||
|
||||
*, ::before, ::after {
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
@ -159,6 +275,7 @@ html[theme='amoled'] {
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
overflow: overlay;
|
||||
}
|
||||
|
||||
html, body {
|
||||
@ -183,10 +300,6 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.id-link, a.dest-link {
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
a.post_source:hover, a.id-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@ -199,7 +312,6 @@ a.btn.disabled {
|
||||
.btn.disabled, .btn:disabled {
|
||||
opacity: 0.65;
|
||||
user-select: none;
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
h5 {
|
||||
@ -211,33 +323,46 @@ h5 {
|
||||
margin-right: 0.5rem !important;
|
||||
}
|
||||
|
||||
ul#posts {
|
||||
div#posts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
|
||||
list-style: none;
|
||||
grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
|
||||
justify-items: center;
|
||||
grid-gap: 5px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
grid-column-gap: 5px;
|
||||
grid-row-gap: 5px;
|
||||
}
|
||||
|
||||
ul#posts > li {
|
||||
@media (max-width: 376px) {
|
||||
div#posts {
|
||||
grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
div#posts > a {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 128px;
|
||||
width: 128px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
ul#posts > li:hover {
|
||||
div#posts > a::before {
|
||||
content: "";
|
||||
display: block;
|
||||
margin-top: 100%;
|
||||
}
|
||||
div#posts > a:hover {
|
||||
opacity: 0.8;
|
||||
box-shadow: 0 0 0 2px var(--accent);
|
||||
}
|
||||
|
||||
ul#posts > li span {
|
||||
div#posts > a::after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
content: attr(data-mime);
|
||||
color: var(--accent);
|
||||
text-shadow: 0px 1px var(--black);
|
||||
font-size: 11px;
|
||||
@ -248,8 +373,7 @@ ul#posts > li span {
|
||||
font-family: vcr;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
ul#posts > li:hover span {
|
||||
div#posts > a:hover::after {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@ -276,7 +400,6 @@ ul#posts > li:hover span {
|
||||
background: var(--nav-brand-bg);
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
.navbar-brand:hover {
|
||||
@ -320,10 +443,7 @@ span.f0ck {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding: 5px 0 5px 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@ -346,14 +466,13 @@ span.f0ck {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-width: 17px;
|
||||
border: 1px solid var(--black);
|
||||
border-radius: 3px;
|
||||
/*transition: .1s ease-out;*/
|
||||
background-image: linear-gradient(to bottom,var(--nav-link-background-linear-gradient));
|
||||
box-shadow: var(--nav-link-box-shadow);
|
||||
color: transparent;
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
.navbar-expand-lg .navbar-nav .nav-link, .pagination > a, .pagination > span {
|
||||
@ -367,10 +486,19 @@ span.f0ck {
|
||||
background-color: var(--nav-link-hover-bg);
|
||||
}
|
||||
|
||||
.nav-link[data-toggle="dropdown"]::after {
|
||||
content: "\00a0(" attr(content) ")\00a0\25bc";
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav-link[data-toggle="dropdown"]::after {
|
||||
content: "\00a0\25bc";
|
||||
}
|
||||
}
|
||||
|
||||
span.placeholder {
|
||||
border-left: 1px solid var(--accent);
|
||||
margin-left: 7px;
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
.navbar .nav-item .dropdown-menu {
|
||||
@ -415,6 +543,11 @@ span.placeholder {
|
||||
.dropdown-menu > li:hover {
|
||||
background: var(--dropdown-item-hover);
|
||||
}
|
||||
|
||||
.dropdown-menu a {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
/* Navbar media queries */
|
||||
@media (max-width: 1056px) {
|
||||
.navbar {
|
||||
@ -462,7 +595,6 @@ span.placeholder {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
color: transparent;
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
.pagination > a, .pagination > span {
|
||||
@ -492,7 +624,6 @@ span.placeholder {
|
||||
background-clip: padding-box;
|
||||
box-shadow: var(--pagination-anchor-box-shadow);
|
||||
background-image: linear-gradient(to bottom,var(--nav-link-background-linear-gradient));
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
.pagination>a:hover {
|
||||
@ -555,6 +686,7 @@ span.placeholder {
|
||||
.embed-responsive-image {
|
||||
bottom: unset !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
@ -644,7 +776,6 @@ span.placeholder {
|
||||
opacity: 0.6;
|
||||
text-shadow: 2px 2px 2px var(--black);
|
||||
padding: 25px;
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
#prev::before {
|
||||
@ -661,7 +792,6 @@ span.placeholder {
|
||||
opacity: 0.6;
|
||||
text-shadow: 2px 2px 2px var(--black);
|
||||
padding: 25px;
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
#next:hover, #prev:hover {
|
||||
@ -766,7 +896,7 @@ span#tags {
|
||||
padding-bottom: 1.5px;
|
||||
}
|
||||
|
||||
.irc, .contact {
|
||||
.about {
|
||||
padding: 10px;
|
||||
color: white;
|
||||
word-break: break-word;
|
||||
@ -775,11 +905,6 @@ span#tags {
|
||||
}
|
||||
|
||||
@media (max-width: 999px) {
|
||||
ul#posts {
|
||||
grid-column-gap: 5px;
|
||||
grid-row-gap: 5px;
|
||||
}
|
||||
|
||||
.index-container {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
@ -862,24 +987,6 @@ span#tags {
|
||||
text-overflow: ellipsis;
|
||||
max-width: 20ch;
|
||||
display: inline-block;
|
||||
/*transition: .5s ease;*/
|
||||
}
|
||||
|
||||
/*.embed-responsive-image img {
|
||||
animation: fadein 1.5s;
|
||||
}
|
||||
|
||||
.embed-responsive .embed-responsive-item, .embed-responsive video {
|
||||
animation: fadein 1.5s;
|
||||
}*/
|
||||
@keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* logik überdenken sobald anderer player!*/
|
||||
video {
|
||||
background: black !important;
|
||||
}
|
||||
|
||||
audio::-webkit-media-controls{
|
||||
@ -888,4 +995,18 @@ audio::-webkit-media-controls{
|
||||
|
||||
audio::-webkit-media-controls-timeline {
|
||||
filter: contrast(0);
|
||||
}
|
||||
|
||||
div.about > div {
|
||||
float: right;
|
||||
max-width: 500px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
div.about > div img {
|
||||
max-width: 99%;
|
||||
height: auto;
|
||||
}
|
||||
div.about > div p {
|
||||
font-size: 7pt;
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -22,11 +22,6 @@
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.v0ck_video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.v0ck_overlay {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
|
||||
BIN
public/s/img/crap/nyancat.gif
Normal file
BIN
public/s/img/crap/nyancat.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 781 B |
|
Before Width: | Height: | Size: 261 B After Width: | Height: | Size: 261 B |
BIN
public/s/img/f0ck95/computer.png
Normal file
BIN
public/s/img/f0ck95/computer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 266 B |
|
Before Width: | Height: | Size: 154 B After Width: | Height: | Size: 154 B |
|
Before Width: | Height: | Size: 363 B After Width: | Height: | Size: 363 B |
|
Before Width: | Height: | Size: 211 B After Width: | Height: | Size: 211 B |
BIN
public/s/img/loool.webp
Normal file
BIN
public/s/img/loool.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 MiB |
@ -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)");
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 });
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user