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;
border-color: #666;
}
.expando > div > details {
color: white;
}
.side .stats {
background-color: #393939;
border-color: #666;

View file

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

View file

@ -521,6 +521,16 @@ function setup() {
if (st) {
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) {
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>")
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 {
var buf bytes.Buffer
if err := md.Convert([]byte(body), &buf); err != nil {
@ -328,6 +332,11 @@ func Initialize(Host string, r *http.Request) (State, error) {
} else {
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)
if state.Sort == "" {
state.Sort = getenv("SORT", "Hot")
@ -849,6 +858,13 @@ func Settings(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
setCookie(w, "", "HideThumbnails", "0")
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") != "" {
setCookie(w, "", "LinksInNewWindow", "1")
state.LinksInNewWindow = true

View file

@ -107,6 +107,7 @@ type State struct {
HideInstanceNames bool
HideThumbnails bool
HideSidebar bool
CollapseMedia bool
LinksInNewWindow bool
SubmitURL 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">
{{- 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">
@ -46,7 +46,11 @@
[removed by mod]
{{- else}}
<div {{ if and .Selected (not .State.XHR) (ne .State.Op "reply")}}class="highlight" {{end}}>
{{ if .State.CollapseMedia }}
{{ collapsemedia (markdown .State.Host .P.Comment.Content) }}
{{ else }}
{{ markdown .State.Host .P.Comment.Content }}
{{ end }}
</div>
{{- end}}
{{- if eq .Op "source" }}

View file

@ -1,5 +1,5 @@
{{- 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 }}
<div class="rank"> {{ .Rank }} </div>
{{- end }}
@ -40,7 +40,7 @@
({{ domain . }})
</div>
<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 class="meta">
<span>
@ -121,7 +121,7 @@
</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 gt .Rank 0 }}
<div class="rank">&nbsp;</div>
@ -133,7 +133,13 @@
{{- end }}
<div>
{{- 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 }}
{{- if isImage .Post.URL.String}}
<img class="image" loading="lazy" src="{{ .Post.URL }}">

View file

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