mirror of
https://github.com/rystaf/mlmym.git
synced 2024-11-21 13:17:13 +00:00
collapse inline media setting
This commit is contained in:
Ryan Stafford
parent
aeb7fe125a
commit
253469fe6d
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
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>")
|
||||
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
|
||||
|
|
|
|||
1
state.go
1
state.go
|
|
@ -107,6 +107,7 @@ type State struct {
|
|||
HideInstanceNames bool
|
||||
HideThumbnails bool
|
||||
HideSidebar bool
|
||||
CollapseMedia bool
|
||||
LinksInNewWindow bool
|
||||
SubmitURL 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">
|
||||
{{- 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}}>
|
||||
{{ 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>
|
||||
{{- end}}
|
||||
{{- if eq .Op "source" }}
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
@ -39,8 +39,8 @@
|
|||
</a>
|
||||
({{ 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="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 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"> </div>
|
||||
|
|
@ -133,12 +133,18 @@
|
|||
{{- 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 }}">
|
||||
<img class="image" loading="lazy" src="{{ .Post.URL }}">
|
||||
{{- end }}
|
||||
<div class="embed"></div>
|
||||
<div class="embed"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue