collapse inline media setting

public/dark.css

@@ -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;

public/style.css

@@ -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 {

public/utils.js

@@ -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();

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

state.go

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

templates/comment.html

@@ -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" }}

templates/post.html

@@ -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="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,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>

templates/settings.html

@@ -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