collapse inline media setting

This commit is contained in:
Ryan Stafford 2024-06-21 17:21:42 -04:00
parent aeb7fe125a
commit 253469fe6d
8 changed files with 82 additions and 14 deletions

View file

@ -77,6 +77,9 @@ input[type=text], input[type=password], textarea {
color: #ddd; color: #ddd;
border-color: #666; border-color: #666;
} }
.expando > div > details {
color: white;
}
.side .stats { .side .stats {
background-color: #393939; background-color: #393939;
border-color: #666; border-color: #666;

View file

@ -83,6 +83,12 @@ summary {
.expando > div { .expando > div {
text-align: center; text-align: center;
} }
.comment .content details img {
display: none;
}
.comment .content details[open] img {
display: unset;
}
.comment.hidden { .comment.hidden {
padding-bottom:5px; padding-bottom:5px;
padding-left: 4px; padding-left: 4px;
@ -526,7 +532,7 @@ form.blockpost {
cursor: pointer; cursor: pointer;
float:left; float:left;
} }
.expando-button::before{ .expando-button::before,.collapse .expando-button::before{
content: "+"; content: "+";
float: left; float: left;
position: relative; position: relative;
@ -534,11 +540,17 @@ form.blockpost {
font-size: 12px; font-size: 12px;
left: 12px; left: 12px;
top: 7px; top: 7px;
line-height: normal;
font-weight: normal;
font-family: unset;
} }
.open.expando-button { .open.expando-button, .collapse .open.expando-button {
border-radius: 30px; border-radius: 30px;
} }
.open.expando-button::before { .collapse .expando-button {
border-radius: 4px;
}
.open.expando-button::before, .collapse .open.expando-button::before {
content: "✖"; content: "✖";
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
@ -614,10 +626,16 @@ form.blockpost {
#settingspopup.open, #mycommunities.open { #settingspopup.open, #mycommunities.open {
display: inline-block; display: inline-block;
} }
.expando.open{ .expando.open, .collapse .expando.text{
display: block; display: block;
clear: left; clear: left;
} }
.collapse .expando .image {
display: none;
}
.collapse .expando.open .image {
display: block;
}
.expando .image { .expando .image {
max-width: 100%; max-width: 100%;
cursor: nwse-resize; cursor: nwse-resize;
@ -735,7 +753,11 @@ main {
} }
} }
@media (min-width: 800px) { @media (min-width: 800px) {
.expando .thumb, .expando .score, .expando .rank { .collapse .open.expando .thumb, .collapse .open.expando .score, .collapse .open.expando .rank {
display: none;
}
.collapse.post .text.expando .thumb, .collapse.post .text.expando .score, .collapse.post .text.expando .rank,
.post .expando.open .thumb, .post .expando.open .score, .post .expando.open .rank {
display: block; display: block;
} }
.expando .image { .expando .image {

View file

@ -521,6 +521,16 @@ function setup() {
if (st) { if (st) {
st.addEventListener("click", sideToggle) st.addEventListener("click", sideToggle)
} }
var collapseMedia = document.querySelectorAll(".content summary a, .expando > div > details summary a")
for (var i = 0; i < collapseMedia.length; i++) {
collapseMedia[i].onclick = toggleDetails
}
}
function toggleDetails(e) {
if (e.target.parentNode.tagName == 'SUMMARY') {
e.target.parentNode.click();
}
return false
} }
function sideToggle(e) { function sideToggle(e) {
e.preventDefault(); e.preventDefault();

View file

@ -190,6 +190,10 @@ var funcMap = template.FuncMap{
body = RegReplace(body, `::: ?spoiler (.*?)\n([\S\s]*?):::`, "<details><summary>$1</summary>$2</details>") body = RegReplace(body, `::: ?spoiler (.*?)\n([\S\s]*?):::`, "<details><summary>$1</summary>$2</details>")
return template.HTML(body) return template.HTML(body)
}, },
"collapsemedia": func(h template.HTML) template.HTML {
body := string(h)
return template.HTML(RegReplace(body, `<img (.*?) src="(.*?)"(.*?)>`, `<details><summary><a target="_blank" href="$2">collapsed inline media</a></summary><img $1 src="$2"$3></details>`))
},
"rmmarkdown": func(body string) string { "rmmarkdown": func(body string) string {
var buf bytes.Buffer var buf bytes.Buffer
if err := md.Convert([]byte(body), &buf); err != nil { if err := md.Convert([]byte(body), &buf); err != nil {
@ -328,6 +332,11 @@ func Initialize(Host string, r *http.Request) (State, error) {
} else { } else {
state.HideThumbnails = os.Getenv("HIDE_THUMBNAILS") != "" state.HideThumbnails = os.Getenv("HIDE_THUMBNAILS") != ""
} }
if collapse := getCookie(r, "CollapseMedia"); collapse != "" {
state.CollapseMedia = collapse != "0"
} else {
state.CollapseMedia = os.Getenv("COLLAPSE_MEDIA") != ""
}
state.ParseQuery(r.URL.RawQuery) state.ParseQuery(r.URL.RawQuery)
if state.Sort == "" { if state.Sort == "" {
state.Sort = getenv("SORT", "Hot") state.Sort = getenv("SORT", "Hot")
@ -849,6 +858,13 @@ func Settings(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
setCookie(w, "", "HideThumbnails", "0") setCookie(w, "", "HideThumbnails", "0")
state.HideInstanceNames = false state.HideInstanceNames = false
} }
if r.FormValue("collapseMedia") != "" {
setCookie(w, "", "CollapseMedia", "1")
state.CollapseMedia = true
} else {
setCookie(w, "", "CollapseMedia", "0")
state.CollapseMedia = false
}
if r.FormValue("linksInNewWindow") != "" { if r.FormValue("linksInNewWindow") != "" {
setCookie(w, "", "LinksInNewWindow", "1") setCookie(w, "", "LinksInNewWindow", "1")
state.LinksInNewWindow = true state.LinksInNewWindow = true

View file

@ -107,6 +107,7 @@ type State struct {
HideInstanceNames bool HideInstanceNames bool
HideThumbnails bool HideThumbnails bool
HideSidebar bool HideSidebar bool
CollapseMedia bool
LinksInNewWindow bool LinksInNewWindow bool
SubmitURL string SubmitURL string
SubmitTitle string SubmitTitle string

View file

@ -1,4 +1,4 @@
<div class="comment{{if or (lt .P.Counts.Score -5) .P.Comment.Deleted .P.Comment.Removed }} hidden{{end}}" id="c{{.P.Comment.ID}}"> <div class="comment{{if or (lt .P.Counts.Score -5) .P.Comment.Deleted .P.Comment.Removed }} hidden{{end}}{{ if .State.CollapseMedia}} collapse{{ end }}" id="c{{.P.Comment.ID}}">
<div class="score"> <div class="score">
{{- if .State.Session }} {{- if .State.Session }}
<form class="link-btn{{ if eq .P.MyVote.String "1"}} like{{ else if eq .P.MyVote.String "-1"}} dislike{{end}}" method="POST"> <form class="link-btn{{ if eq .P.MyVote.String "1"}} like{{ else if eq .P.MyVote.String "-1"}} dislike{{end}}" method="POST">
@ -46,7 +46,11 @@
[removed by mod] [removed by mod]
{{- else}} {{- else}}
<div {{ if and .Selected (not .State.XHR) (ne .State.Op "reply")}}class="highlight" {{end}}> <div {{ if and .Selected (not .State.XHR) (ne .State.Op "reply")}}class="highlight" {{end}}>
{{ markdown .State.Host .P.Comment.Content }} {{ if .State.CollapseMedia }}
{{ collapsemedia (markdown .State.Host .P.Comment.Content) }}
{{ else }}
{{ markdown .State.Host .P.Comment.Content }}
{{ end }}
</div> </div>
{{- end}} {{- end}}
{{- if eq .Op "source" }} {{- if eq .Op "source" }}

View file

@ -1,5 +1,5 @@
{{- if and (ne .State.Op "vote_post") (ne .State.Op "save_post") -}} {{- if and (ne .State.Op "vote_post") (ne .State.Op "save_post") -}}
<div class="post{{if .Post.Deleted}} deleted{{end}}{{ if .Post.FeaturedCommunity }} distinguished{{end}}{{if .Post.FeaturedLocal }} announcement{{end}}" id="p{{.Post.ID}}"> <div class="post{{if .Post.Deleted}} deleted{{end}}{{ if .Post.FeaturedCommunity }} distinguished{{end}}{{if .Post.FeaturedLocal }} announcement{{end}}{{ if and (eq .Rank 0) (.State.CollapseMedia) }} collapse{{end}}" id="p{{.Post.ID}}">
{{- if gt .Rank 0 }} {{- if gt .Rank 0 }}
<div class="rank"> {{ .Rank }} </div> <div class="rank"> {{ .Rank }} </div>
{{- end }} {{- end }}
@ -39,8 +39,8 @@
</a> </a>
({{ domain . }}) ({{ domain . }})
</div> </div>
<div class="entry"> <div class="entry">
<div class="expando-button{{ if and (not (and .Post.Body.IsValid .Post.Body.String )) (not (isImage .Post.URL.String)) (not (isYoutube .Post.URL.String)) }} hidden{{else if eq .Rank 0}} open{{ end }}"></div> <div class="expando-button{{ if and (not (and .Post.Body.IsValid .Post.Body.String )) (not (isImage .Post.URL.String)) (not (isYoutube .Post.URL.String)) }} hidden{{else if and (eq .Rank 0) (not .State.CollapseMedia)}} open{{ end }}"></div>
<div> <div>
<div class="meta"> <div class="meta">
<span> <span>
@ -121,7 +121,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="expando{{ if eq .Rank 0 }} open{{ end}}"> <div class="expando{{ if and (eq .Rank 0) (not .State.CollapseMedia)}} open{{ end}}{{ if and (not .Post.Body.IsValid) (not (isImage .Post.URL.String))}} hide{{end}}{{ if and .Post.Body.IsValid (ne .Post.Body.String "") }} text{{end}}">
{{- if or ((and .Post.Body.IsValid (ne .Post.Body.String ""))) (isImage .Post.URL.String)}} {{- if or ((and .Post.Body.IsValid (ne .Post.Body.String ""))) (isImage .Post.URL.String)}}
{{- if gt .Rank 0 }} {{- if gt .Rank 0 }}
<div class="rank">&nbsp;</div> <div class="rank">&nbsp;</div>
@ -133,12 +133,18 @@
{{- end }} {{- end }}
<div> <div>
{{- if (and .Post.Body.IsValid (ne .Post.Body.String "")) }} {{- if (and .Post.Body.IsValid (ne .Post.Body.String "")) }}
<div class="md">{{ markdown .State.Host .Post.Body.String }}</div> <div class="md">
{{ if .State.CollapseMedia }}
{{ collapsemedia (markdown .State.Host .Post.Body.String) }}
{{ else }}
{{ markdown .State.Host .Post.Body.String }}
{{ end }}
</div>
{{- end }} {{- end }}
{{- if isImage .Post.URL.String}} {{- if isImage .Post.URL.String}}
<img class="image" loading="lazy" src="{{ .Post.URL }}"> <img class="image" loading="lazy" src="{{ .Post.URL }}">
{{- end }} {{- end }}
<div class="embed"></div> <div class="embed"></div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -138,6 +138,12 @@
</label> </label>
<input type="checkbox" name="hideThumbnails" {{ if .HideThumbnails }}checked{{end}}> <input type="checkbox" name="hideThumbnails" {{ if .HideThumbnails }}checked{{end}}>
</div> </div>
<div>
<label>
collapse inline media
</label>
<input type="checkbox" name="collapseMedia" {{ if .CollapseMedia }}checked{{end}}>
</div>
<div> <div>
<label> <label>
open links in new window open links in new window