mirror of
https://github.com/rystaf/mlmym.git
synced 2024-11-21 21:27:15 +00:00
collapse inline media setting
This commit is contained in:
parent
aeb7fe125a
commit
253469fe6d
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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();
|
||||||
|
|
16
routes.go
16
routes.go
|
@ -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
|
||||||
|
|
1
state.go
1
state.go
|
@ -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
|
||||||
|
|
|
@ -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" }}
|
||||||
|
|
|
@ -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"> </div>
|
<div class="rank"> </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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue