fix commit view JS features, reimplement folding (#9968)

* fix commit view JS features, reimplement folding

File content folding was not working so I reimplemented it in a saner
way. Then I noticed the issue was actually because of missing JS
libraries (seen on the console of every commit with error
'SimpleMDE is not defined').

Fixed the libraries. I think the reimplementation is worth to keep.

* add .closest polyfill

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

3 files changed, 32 insertions, 11 deletions

diff --git a/web_src/js/index.js b/web_src/js/index.js
index f89750e933..12c46903a6 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -3,6 +3,7 @@
 /* exported toggleDeadlineForm, setDeadline, updateDeadline, deleteDependencyModal, cancelCodeComment, onOAuthLoginClick */
 
 import './publicPath.js';
+import './polyfills.js';
 import './gitGraphLoader.js';
 import './semanticDropdown.js';
 import initContextPopups from './features/contextPopup';
@@ -2109,17 +2110,12 @@ function initCodeView() {
       }
     }).trigger('hashchange');
   }
-  $('.ui.fold-code').on('click', (e) => {
-    const $foldButton = $(e.target);
-    if ($foldButton.hasClass('fa-chevron-down')) {
-      $(e.target).parent().next().slideUp('fast', () => {
-        $foldButton.removeClass('fa-chevron-down').addClass('fa-chevron-right');
-      });
-    } else {
-      $(e.target).parent().next().slideDown('fast', () => {
-        $foldButton.removeClass('fa-chevron-right').addClass('fa-chevron-down');
-      });
-    }
+  $('.fold-code').on('click', ({ target }) => {
+    const box = target.closest('.file-content');
+    const folded = box.dataset.folded !== 'true';
+    target.classList.add(`fa-chevron-${folded ? 'right' : 'down'}`);
+    target.classList.remove(`fa-chevron-${folded ? 'down' : 'right'}`);
+    box.dataset.folded = String(folded);
   });
   function insertBlobExcerpt(e) {
     const $blob = $(e.target);
diff --git a/web_src/js/polyfills.js b/web_src/js/polyfills.js
new file mode 100644
index 0000000000..0063b6d253
--- /dev/null
+++ b/web_src/js/polyfills.js
@@ -0,0 +1,17 @@
+// compat: IE11
+if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+}
+
+// compat: IE11
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function (s) {
+    let el = this;
+
+    do {
+      if (el.matches(s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+    return null;
+  };
+}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index a1b55e86aa..5c05499af7 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2524,3 +2524,11 @@ td.blob-excerpt {
 .title_wip_desc {
     margin-top: 1em;
 }
+
+.diff-file-box[data-folded="true"] .diff-file-body {
+    visibility: hidden;
+}
+
+.diff-file-box[data-folded="true"] .diff-file-header {
+    border-radius: 0.28571429rem !important;
+}