Finished the blur and image hide system.

main
NA 2023-12-05 20:19:55 +00:00
parent 4185fc5a53
commit 6f3bcfed53
5 changed files with 210 additions and 14 deletions

View File

@ -252,6 +252,48 @@ body {
/* Start of gallery */
.gallery_content_selector_button {
margin: 0 10px;
text-align: center;
}
.gallery_content_selector_button button {
font-size: large;
}
#gallery_content_selector_blur {
display: none;
z-index: 1;
position: absolute;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.61);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
#gallery_content_selector {
width: fit-content;
position: sticky;
top: 20px;
margin: 20px auto;
padding: 10px;
overflow: auto;
background-color: rgba(255, 255, 255, 0.588);
}
#gallery_content_selector form {
margin-bottom: 15px;
}
#gallery_content_selector button {
display: block;
margin: auto;
}
.gallery {
display: flex;
flex-wrap: wrap;
@ -274,7 +316,7 @@ body {
}
.blur {
filter: blur(10px);
filter: blur(8px);
}
.gallery_overlay {

View File

@ -16,7 +16,6 @@
</head>
<body>
<div class="mobile_background"></div>
<div id="age_gate_blur">
<div>
@ -34,6 +33,29 @@
</div>
<div class="container">
<div class="gallery_content_selector_button">
<button onclick="display_content_selector(event)">Click here to show, blur, or hide images:</button>
<p>Some more extreme kinks are hidden by default: You can unlock em by clicking the button.</p>
</div>
<div id="gallery_content_selector_blur">
<div id="gallery_content_selector">
<form id="template.selector" style="display: none;">
<fieldset>
<legend>Show, Hide, or Blur all images tagged with: 'template'</legend>
<div>
<input type="radio" id="template.show" name="template" value="Show" onchange = "update_content_warnings(event)" />
<label for="template.show">Show</label>
<input type="radio" id="template.blur" name="template" value="Blur" onchange = "update_content_warnings(event)" />
<label for="template.blur">Blur</label>
<input type="radio" id="template.hide" name="template" value="Hide" onchange = "update_content_warnings(event)" />
<label for="template.hide">Hide</label>
</div>
</fieldset>
</form>
</div>
</div>
<div class="gallery" id="gallery">
<noscript>
Sorry you need javascript enabled for this gallery to work. It doesn't track you. Promise.

View File

@ -41,11 +41,7 @@ add_new_thumbnails = "gallery/add_new/thumbnails/"
gallery_content = "gallery/content/"
gallery_thumbnails = "gallery/thumbnails/"
## Get the content warnings (if any.)
try:
args = sys.argv[1]
except:
args = ""
##---------
content_list = os.listdir(add_new_content)
thumbnails_list = os.listdir(add_new_thumbnails)
@ -62,12 +58,22 @@ for thumbnail in thumbnails_list:
if content_list[content_index].split('.')[-1] != "webp" and content_list[content_index].split('.')[-1] != "webm":
print("Error: " + content_list[content_index] + " Is not a webp or webm file.")
continue
thumbnail_img = Image.open(thumbnail)
thumbnail_img.show()
print("\nPlease insert any content warnings as a comma (,) separated list:")
content_warnings = input()
print("\nPlease insert any comments you want to add to the video:")
comments = input()
data = {
'thumbnail_path' : gallery_thumbnails + thumbnail,
'content_path' : gallery_content + content_list[content_index],
'video' : False,
'content_warnings' : args,
'content_warnings' : content_warnings,
'comments': comments,
'date_added' : datetime.now().strftime('%Y-%m-%d %H:%M:%S')
}

View File

@ -5,6 +5,7 @@
"content_path": "gallery/content/_DSC7792.webp",
"video": false,
"content_warnings": "celeste",
"comments": "",
"date_added": "2023-09-11 13:07:11"
},
{
@ -12,6 +13,7 @@
"content_path": "gallery/content/_DSC7797.webp",
"video": false,
"content_warnings": "celeste",
"comments": "",
"date_added": "2023-09-11 13:07:11"
},
{
@ -19,6 +21,7 @@
"content_path": "gallery/content/_DSC7805.webp",
"video": false,
"content_warnings": "celeste",
"comments": "",
"date_added": "2023-09-11 13:07:11"
},
{
@ -26,6 +29,7 @@
"content_path": "gallery/content/_DSC7818.webp",
"video": false,
"content_warnings": "celeste",
"comments": "",
"date_added": "2023-09-11 13:07:11"
},
{
@ -33,6 +37,7 @@
"content_path": "gallery/content/_DSC7822.webp",
"video": false,
"content_warnings": "celeste",
"comments": "",
"date_added": "2023-09-11 13:07:11"
},
{
@ -40,6 +45,7 @@
"content_path": "gallery/content/_DSC7831.webp",
"video": false,
"content_warnings": "celeste",
"comments": "",
"date_added": "2023-09-11 13:07:11"
},
{
@ -47,6 +53,7 @@
"content_path": "gallery/content/_DSC7843.webp",
"video": false,
"content_warnings": "alexandra",
"comments": "",
"date_added": "2023-09-11 13:07:11"
},
{
@ -54,6 +61,7 @@
"content_path": "gallery/content/_DSC7844.webp",
"video": false,
"content_warnings": "alexandra",
"comments": "",
"date_added": "2023-09-11 13:07:11"
},
{
@ -61,6 +69,7 @@
"content_path": "gallery/content/_DSC7850.webp",
"video": false,
"content_warnings": "alexandra",
"comments": "",
"date_added": "2023-09-11 13:07:11"
},
{
@ -68,6 +77,7 @@
"content_path": "gallery/content/_DSC7861.webp",
"video": false,
"content_warnings": "alexandra",
"comments": "",
"date_added": "2023-09-11 13:07:11"
},
{
@ -75,6 +85,7 @@
"content_path": "gallery/content/_DSC7872.webp",
"video": false,
"content_warnings": "alexandra",
"comments": "",
"date_added": "2023-09-11 13:07:11"
},
{
@ -82,6 +93,7 @@
"content_path": "gallery/content/_DSC7789.webp",
"video": false,
"content_warnings": "celeste",
"comments": "",
"date_added": "2023-09-11 13:07:11"
},
{
@ -89,41 +101,47 @@
"content_path": "gallery/content/IMG_20231112_174506.webp",
"video": false,
"content_warnings": "celeste",
"comments": "",
"date_added": "2023-11-17 14:25:17"
},
{
"thumbnail_path": "gallery/thumbnails/IMG_20230617_181654.webp",
"content_path": "gallery/content/IMG_20230617_181654.webp",
"video": false,
"content_warnings": "celeste",
"content_warnings": "celeste,knife",
"comments": "",
"date_added": "2023-09-11 18:59:57"
},
{
"thumbnail_path": "gallery/thumbnails/IMG_20230617_182754.webp",
"content_path": "gallery/content/IMG_20230617_182754.webp",
"video": false,
"content_warnings": "celeste",
"content_warnings": "celeste,smoking",
"comments": "",
"date_added": "2023-09-11 18:59:57"
},
{
"thumbnail_path": "gallery/thumbnails/IMG_20230617_182915.webp",
"content_path": "gallery/content/IMG_20230617_182915.webp",
"video": false,
"content_warnings": "celeste",
"content_warnings": "celeste,smoking",
"comments": "",
"date_added": "2023-09-11 18:59:57"
},
{
"thumbnail_path": "gallery/thumbnails/IMG_20230617_182943.webp",
"content_path": "gallery/content/IMG_20230617_182943.webp",
"video": false,
"content_warnings": "celeste",
"content_warnings": "celeste,smoking",
"comments": "",
"date_added": "2023-09-11 18:59:57"
},
{
"thumbnail_path": "gallery/thumbnails/IMG_20230617_183051.webp",
"content_path": "gallery/content/IMG_20230617_183051.webp",
"video": false,
"content_warnings": "celeste",
"content_warnings": "celeste,smoking",
"comments": "",
"date_added": "2023-09-11 18:59:57"
},
{
@ -131,6 +149,7 @@
"content_path": "gallery/content/IMG_20231115_214.webp",
"video": false,
"content_warnings": "alexandra",
"comments": "",
"date_added": "2023-11-16 00:11:53"
},
{
@ -138,6 +157,7 @@
"content_path": "gallery/content/IMG_20231115_213531.webp",
"video": false,
"content_warnings": "alexandra",
"comments": "",
"date_added": "2023-11-16 00:11:53"
},
{
@ -145,6 +165,7 @@
"content_path": "gallery/content/IMG_20231115_214420.webp",
"video": false,
"content_warnings": "alexandra",
"comments": "",
"date_added": "2023-11-16 00:11:53"
}
]

View File

@ -1,3 +1,12 @@
let content_warnings = {
"alexandra": "show",
"celeste": "show",
"smoking": "show",
"knife": "show",
};
let LOCAL_STORAGE_CONTENT_WARNING_PREFIX = "gallery_content_warning";
generate_gallery();
setup_close_overlay();
@ -73,10 +82,100 @@ function setup_close_overlay() {
}
}
function update_content_warnings(event) {
let content_warning = event.target.id;
local_storage_key = LOCAL_STORAGE_CONTENT_WARNING_PREFIX + '.' + content_warning.split('.')[0];
localStorage.setItem(local_storage_key, content_warning.split('.')[1]);
}
function refresh_page(){
window.location.reload();
}
function display_content_selector(event) {
event.target.parentNode.style.display = "none";
this.document.getElementById("gallery_content_selector_blur").style.display = "block";
}
async function generate_gallery() {
let masterlist = await get_masterlist();
masterlist = masterlist.data.reverse(); // Reverse the json data since most recent content is appended.
// Content warning stuff.
let gallery_content_selectors_div = document.getElementById("gallery_content_selector");
let gallery_content_selectors_template_form = document.getElementById("template.selector");
for (let key in content_warnings) {
let local_storage_key = LOCAL_STORAGE_CONTENT_WARNING_PREFIX + '.' + key;
if (localStorage.getItem(local_storage_key) == null) {
localStorage.setItem(local_storage_key, content_warnings[key]);
}
else {
content_warnings[key] = localStorage.getItem(local_storage_key);
}
let gallery_content_selector_form = gallery_content_selectors_template_form.cloneNode(deep = true);
gallery_content_selector_form.style.display = "block";
gallery_content_selector_form.id = key + ".selector"
gallery_content_selector_form.innerHTML = gallery_content_selector_form.innerHTML.replaceAll("template", key);
gallery_content_selectors_div.appendChild(gallery_content_selector_form);
if (content_warnings[key] == "show") { document.getElementById(key + ".show").checked = true; }
else if (content_warnings[key] == "blur") { document.getElementById(key + ".blur").checked = true; }
else if (content_warnings[key] == "hide") { document.getElementById(key + ".hide").checked = true; }
}
let reload_button = document.createElement("button");
reload_button.innerText = "Apply changes:";
reload_button.onclick = refresh_page;
gallery_content_selectors_div.appendChild(reload_button);
window.addEventListener('load', function () {
let height = (document.getElementsByClassName("container")[0].getBoundingClientRect().height - 30 ) +"px";
let width = document.getElementsByClassName("container")[0].getBoundingClientRect().width +"px";
let gallery_content_selector_blur = this.document.getElementById("gallery_content_selector_blur")
gallery_content_selector_blur.style.height = height;
gallery_content_selector_blur.style.width = width;
window.addEventListener('resize', function () {
let height = (document.getElementsByClassName("container")[0].getBoundingClientRect().height - 30 ) +"px";
let width = document.getElementsByClassName("container")[0].getBoundingClientRect().width +"px";
let gallery_content_selector_blur = this.document.getElementById("gallery_content_selector_blur")
gallery_content_selector_blur.style.height = height;
gallery_content_selector_blur.style.width = width;
});
});
for (let x = 0; x < masterlist.length; x+=1) {
for (key in content_warnings) {
if (masterlist[x].content_warnings.includes(key)) {
if (content_warnings[key] == "blur") {
masterlist[x].blur = true;
}
else if (content_warnings[key] == "hide") {
masterlist[x].hide = true;
}
}
}
if (masterlist[x].hide == true) {
masterlist.splice(x, 1);
x -=1;
}
}
// End of content warning stuff.
// Use this to avoid infinite reloads
let is_masterlist_empty = false;
if (masterlist.length == 0) {
is_masterlist_empty = true;
}
let gallery = document.getElementsByClassName("gallery")[0];
const SMALL_SCREEN_IMAGE_COUNT = 24;
@ -98,10 +197,12 @@ async function generate_gallery() {
let chunk_index = get_url_param("page") -1;
if (chunk_index < 0 || chunk_index >= chunked_masterlist.length || isNaN(chunk_index)) { // Avoid people trying to access page -39913 or some dumb shit;
if ((chunk_index < 0 || chunk_index >= chunked_masterlist.length || isNaN(chunk_index)) && is_masterlist_empty == false) { // Avoid people trying to access page -39913 or some dumb shit;
insert_url_param("page", 1);
}
// TODO! Tell people they have hidden all the images cause they are a dingus. (use is_masterlist_empty to check this)
masterlist = chunked_masterlist[chunk_index];
// Populate the gallery with images n crap.
@ -118,6 +219,10 @@ async function generate_gallery() {
thumbnail.classList.add("gallery_video");
}
if (masterlist[i].blur == true) {
button.classList.add("blur");
}
button.dataset.content_path = content_path;
thumbnail.dataset.content_path = content_path;