view images toggle

This commit is contained in:
Ryan Stafford 2023-07-07 14:51:11 -04:00
parent 0a4888906a
commit d907420e58
5 changed files with 58 additions and 8 deletions

View file

@ -58,7 +58,7 @@ summary {
font-size: 14px;
margin-top: 17px;
text-align: right;
min-width: 32px;
min-width: 21px;
}
.dark .post .rank {
color: #646464;
@ -499,9 +499,12 @@ form.nsfw div {
font-size: 14px;
overflow: auto;
}
.expand .md img {
.expando .md img {
max-width: 100%;
}
.expando.open.showimage .md {
display: none;
}
.dark .expando .md {
background-color: #262626;
color: #ddd;
@ -804,7 +807,6 @@ nav .tabs {
}
nav ul {
white-space: nowrap;
list-style: none;
margin: 5px 2.5px 0px 2.5px;
padding: 0;
@ -813,9 +815,11 @@ nav ul {
}
nav li {
white-space: nowrap;
margin: 0px 1px;
padding: 0px;
display: inline;
display: inline-block;
margin-top: 5px;
font-size: 12px;
font-weight: 700;
}
@ -836,11 +840,13 @@ nav ul a {
}
nav .selected a {
color: orangered;
background-color: white;
border: 1px solid #00a846;
border-bottom: 1px solid white;
}
.dark nav .selected a {
color: #d25a32;
border-bottom: 1px solid #262626;
}

View file

@ -103,6 +103,11 @@ function loadMore(e) {
request(window.location.origin+window.location.pathname+"?"+urlParams.toString(), "", function(res){
if (res.trim()) {
e.target.outerHTML = res + '<input id="loadmore" type="submit" data-page="'+(parseInt(page)+1)+'" value="load more" onclick="loadMore(event)">'
if (showimages = document.getElementById("showimages")) {
if (showimages.className == "selected") {
toggle_images(true)
}
}
}
else {
e.target.outerHTML = '<input id="end" type="submit" value="" disabled>'
@ -160,6 +165,40 @@ function youtube_iframe(id) {
return '<iframe width="560" height="315" src="https://www.youtube.com/embed/'+id+'" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>'
}
function show_images(e) {
e = e || window.event;
e.preventDefault()
var targ = e.currentTarget || e.srcElement || e;
console.log(targ)
var parent = targ.parentNode
if (parent.className == "") {
parent.className = "selected"
toggle_images(true)
} else {
parent.className = ""
toggle_images(false)
}
return false
}
function toggle_images(open) {
var posts = document.getElementsByClassName("post")
for (var i = 0; i < posts.length; i++) {
var btn = posts[i].getElementsByClassName("expando-button")[0]
if (btn.className.indexOf("hidden") != -1) { continue }
var img = posts[i].getElementsByClassName("image")
if (!img.length) { continue }
var bdy = posts[i].getElementsByClassName("expando")[0]
if (open) {
bdy.className = 'expando open showimage';
btn.className = "expando-button open"
} else {
bdy.className = 'expando';
btn.className = "expando-button"
}
}
}
var posts = document.getElementsByClassName("post")
for (var i = 0; i < posts.length; i++) {
var url = posts[i].getElementsByClassName("url")[0].href

View file

@ -2,7 +2,7 @@
<head>
<title>{{ if and .Community (ne .Community.CommunityView.Community.Title "")}}{{.Community.CommunityView.Community.Title}}{{else if ne .CommunityName ""}}/c/{{.CommunityName}}{{ else if .User}}overview for {{.User.PersonView.Person.Name}}{{else}}{{ host .Host }}{{end}}</title>
<link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
<link rel="stylesheet" href="/_/static/style.css?v=12">
<link rel="stylesheet" href="/_/static/style.css?v=13">
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body {{ if .Dark }}class="dark"{{end}}>
@ -11,6 +11,7 @@
.expando-button,
.minimize,
#loadmore,
#showimages,
.hidechildren {
display: none;
}
@ -55,6 +56,6 @@
{{ template "sidebar.html" . }}
</main>
{{ end }}
<script src="/_/static/utils.js?v=6"></script>
<script src="/_/static/utils.js?v=7"></script>
</body>
</html>

View file

@ -3,7 +3,7 @@
<title>{{if and .Posts .PostID }}{{ (index .Posts 0).Post.Name}} : {{.CommunityName}}{{else if and .Community (ne .Community.CommunityView.Community.Title "")}}{{.Community.CommunityView.Community.Title}}{{else if ne .CommunityName ""}}/c/{{.CommunityName}}{{ else if .User}}overview for {{.User.PersonView.Person.Name}}{{else}}{{ host .Host }}{{end}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
<link rel="stylesheet" href="/_/static/style.css?v=12">
<link rel="stylesheet" href="/_/static/style.css?v=13">
</head>
<body{{ if .Dark }} class="dark"{{end}}>
<noscript>
@ -11,6 +11,7 @@
.expando-button,
.minimize,
#loadmore,
#showimages,
.hidechildren {
display: none !important;
}
@ -127,7 +128,7 @@
<input id="loadmore" type="submit" value="load more" onclick="loadMore(event)" data-page="2">
{{ end }}
<script src="/_/static/utils.js?v=6"></script>
<script src="/_/static/utils.js?v=7"></script>
{{ template "sidebar.html" . }}
</main>
{{ end }}

View file

@ -64,6 +64,9 @@
<li{{ if eq .Sort "MostComments" }} class="selected"{{end}}><a href="{{ .SortBy "MostComments" }}">most comments</a></li>
<li{{ if eq .Sort "NewComments" }} class="selected"{{end}}><a href="{{ .SortBy "NewComments" }}">new comments</a></li>
<li{{ if contains .Sort "Top" }} class="selected"{{end}}><a href="{{ .SortBy "TopDay" }}">top</a></li>
{{ if .Posts }}
<li id="showimages"><a href="" onclick="show_images(event)">show images</a></li>
{{ end }}
{{ end }}
</ul>
{{ end }}