remove unnecessary JS loop for news limit (sugarlabs#483)

nischal-shetty2 · Oct 15, 2024 · 6f458ee · 6f458ee
1 parent 4d69768
commit 6f458ee
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 43 deletions.
diff --git a/js/main.js b/js/main.js
@@ -121,35 +121,4 @@ $(document).ready(function(){
     		$('.js-fullheight').css('height', $(window).height());
     	});
     };
-});
-
-//limit to 10 entries in press page
-const listItems = document.querySelectorAll("#myList li");
-listItems.forEach((item, index) => {
-  if (index >= 10) {
-    item.classList.add("d-none");
-  }
-});
-
-// show more and show less button in press page
-const items = document.querySelectorAll(".list-item");
-const showMoreBtn = document.getElementById("showMoreBtn");
-const showLessBtn = document.getElementById("showLessBtn");
-
-showMoreBtn.addEventListener("click", function () {
-  items.forEach((item, index) => {
-    item.classList.remove("d-none"); // Show hidden items
-  });
-  showMoreBtn.classList.add("d-none"); // Hide Show More button
-  showLessBtn.classList.remove("d-none"); // Show Show Less button
-});
-
-showLessBtn.addEventListener("click", function () {
-    items.forEach((item, index) => {
-      if (index >= 10) {
-        item.classList.add("d-none"); // Hide items again
-      }
-    });
-    showLessBtn.classList.add("d-none"); // Hide Show Less button
-    showMoreBtn.classList.remove("d-none"); // Show Show More button
-  });
+});
diff --git a/press.html b/press.html
@@ -34,19 +34,54 @@ <h2 class="text-center">PRESS RELEASE</h2>
     </div>
     <div class="container mt-5 my-2">
         <div class="border-bottom pb-3 mb-3">
-            <ol id="myList">
-                {% for post in site.posts %} <li class="list-item">
-                 <div class="text-muted mb-1 h6">{{ post.date | date: "%b %-d %Y" }}</div>
-                 <div class="h5" >
+            <ol id="postList">
+                {% for post in site.posts limit:10 %}
+                <li class="listFont">
                     <a href="{{ post.url }}">{{ post.title }}</a>
-                 </div>
-                 <hr>
-                </li>{% endfor %}
+                    <i style="display: block;">{{ post.date | date: "%b %-d %Y" }}</i>
+                    <hr>
+                </li>
+                {% endfor %}
             </ol>
-            <div class="text-center">
-                <button id="showMoreBtn" class="btn btn-primary mt-3">Show More</button>
-                <button id="showLessBtn" class="btn btn-secondary mt-3 d-none">Show Less</button>
-            </div>
+            <button style="
+                display: block;
+                margin: 0 auto;
+                cursor: pointer;
+                " id="toggleButton" onclick="togglePost()">Show More
+            </button>
+            <script>
+                const postListEl = document.getElementById("postList");
+                const toggleBtn = document.getElementById("toggleButton");
+                let isShowingAll = false;
+
+                function togglePost() {
+                    if (!isShowingAll) {
+                        postListEl.innerHTML = `
+                            {% for post in site.posts %}
+                            <li class="listFont">
+                                <a href="{{ post.url }}">{{ post.title }}</a>
+                                <i style="display: block;">{{ post.date | date: "%b %-d %Y" }}</i>
+                                <hr>
+                            </li>
+                            {% endfor %}
+                        `;
+                        toggleBtn.textContent = "Show Less";
+                        isShowingAll = true;
+                    } else {
+                        postListEl.innerHTML = `
+                            {% for post in site.posts limit:10 %}
+                            <li class="listFont">
+                                <a href="{{ post.url }}">{{ post.title }}</a>
+                                <i style="display: block;">{{ post.date | date: "%b %-d %Y" }}</i>
+                                <hr>
+                            </li>
+                            {% endfor %}
+                        `;
+                        toggleBtn.textContent = "Show More";
+                        isShowingAll = false;
+                    }
+                }
+            </script>
         </div>
     </div>
 </section>