added code for read more

4 years ago · 9be83f7fb5
parent 77c49e9c9b
commit 9be83f7fb5
3 changed files with 50 additions and 3 deletions
--- a/client/episodes.html
+++ b/client/episodes.html
@ -38,7 +38,8 @@ hr{
    </style>
 </head>
 <body>
-  {{template "navbar" .}}
+  <div class="container">
+    {{template "navbar" .}}
  
 <br>{{$setting := .setting}}
 {{range .podcastItems}}
@ -62,7 +63,7 @@ hr{
          </div>
        </div>
      
-        <p>{{ .Summary }}</p>
+        <p class="useMore">{{ .Summary }}</p>
       {{if .DownloadPath}}
        <a class="button button-primary" href="{{ .DownloadPath }}" download>Download</a>
        <a class="button button" onclick="deleteFile('{{.ID}}')" download>Delete</a>
--- a/client/index.html
+++ b/client/index.html
@ -44,7 +44,7 @@
    <div class="columns ten">
      <a style="text-decoration: none;" href="/podcasts/{{ .ID }}/view"> <h3>{{.Title}}</h3></a>
    
-        <p>{{ .Summary }}</p>
+        <p class="useMore">{{ .Summary }}</p>

   
    <div class="row">
--- a/client/scripts.html
+++ b/client/scripts.html
@ -10,5 +10,51 @@
        image.src = "/webassets/blank.png";
        return true;
    }
+    const limit = 300;
+    let elements = document.getElementsByClassName("useMore");
+
+    for (let index = 0; index < elements.length; index++) {
+        const element = elements[index];
+        let display= element.style.display;
+        let originalText= element.textContent;
+        if(originalText.length<=limit){
+            continue;
+        }
+        let newText= originalText.substr(0,limit);
+
+        let newElement = document.createElement(element.tagName);
+        newElement.textContent=newText;
+        
+
+        newElement.classList.add("short-version")
+        element.classList.add("long-version")
+
+        let more =document.createElement("a");
+        more.textContent= " show more";
+        more.style.cursor="pointer"
+        more.onclick= function(){
+            element.style.display=display;
+            newElement.style.display="none";
+        }
+
+        let less =document.createElement("a");
+        less.textContent= " show less";
+        less.style.cursor="pointer"
+        less.onclick= function(){
+            element.style.display="none";
+            newElement.style.display=display;
+        }
+
+
+        newElement.appendChild(more)
+        element.appendChild(less)
+
+        element.parentNode.insertBefore(newElement, element.nextSibling)
+        element.style.display="none";
+    }
+
+
+
+
 </script>
 {{end}}