fix changes collapsing/expanding

Author: haarg

root/release.tx

@@ -14,15 +14,15 @@
 </ul>
 %%  }
 <div id="metacpan_last-changes" class="well">
-  <div id="metacpan_last-changes-container">
+  <div class="changes-content">
     %%  for $changes -> $rel {
     <h2 id="whatsnew">Changes for version [% $rel.version %][% if $rel.date && datetime($rel.date) { %] - [% datetime($rel.date).to_ymd() } if $rel.trial { %] (TRIAL RELEASE)[% } %]</h2>
     <div class="change-entries">
       %%  change_group($rel.entries);
     </div>
     %%  }
   </div>
-  <button id="metacpan_last-changes-toggle" class="btn-link" onclick="$('#metacpan_last-changes').toggleClass('collapsed'); return false;">[ <span class="hide-more">Show less</span><span class="show-more">Show more</span> ]</button>
+  <button class="changes-toggle btn-link">[ <span class="hide-more">Show less</span><span class="show-more">Show more</span> ]</button>
 </div>
 %%  }
 

root/static/js/cpan.js

@@ -230,14 +230,27 @@ $(document).ready(function() {
     set_page_size('a[href*="/recent"]', 'recent_page_size');
     set_page_size('a[href*="/requires"]', 'requires_page_size');
 
-    var changes = $('#metacpan_last-changes');
-    var changes_inner = $('#metacpan_last-changes-container');
-    var changes_toggle = $("#metacpan_last-changes-toggle");
-    changes.addClass(['collapsable', 'collapsed']);
-    var changes_content_height = Math.round(changes_inner.prop('scrollHeight'));
-    var changes_ui_height = Math.round(changes_inner.height() + changes_toggle.height());
-    if (changes_content_height <= changes_ui_height) {
-        changes.removeClass(['collapsable', 'collapsed']);
+    const changes = document.querySelector('#metacpan_last-changes');
+    if (changes) {
+        const changes_content = changes.querySelector('.changes-content');
+        const changes_toggle = changes.querySelector(".changes-toggle");
+        changes.classList.add('collapsable', 'collapsed');
+
+        const content_height = Math.round(changes_content.scrollHeight);
+        const toggle_style = window.getComputedStyle(changes_toggle);
+
+        const potential_size = Math.round(
+            changes_content.offsetHeight +
+            changes_toggle.offsetHeight
+        );
+
+        if (content_height <= potential_size) {
+            changes.classList.remove('collapsable', 'collapsed');
+        }
+        changes_toggle.addEventListener('click', e => {
+            e.preventDefault();
+            changes.classList.toggle('collapsed');
+        });
     }
 
     for (const favForm of document.querySelectorAll('form[action="/account/favorite/add"]')) {

root/static/less/release.less

@@ -60,7 +60,7 @@
     }
 
     &.collapsable {
-        #metacpan_last-changes-toggle {
+        .changes-toggle {
             display: inline-block;
         }
 
@@ -70,18 +70,18 @@
             .show-more { display: inline }
             .hide-more { display: none }
 
-            #metacpan_last-changes-container {
+            .changes-content {
                 overflow: hidden;
                 max-height: 20.02em;
             }
         }
     }
 
-    #metacpan_last-changes-toggle {
+    .changes-toggle {
         display: none;
     }
 
-    #metacpan_last-changes-container {
+    .changes-content {
         margin-bottom: 0.5em;
     }
     padding-bottom: 0.5em;