Refactor repo-legacy.js, remove messy global variables. Fix errors. (#17646)

Refactor repo-legacy.js, remove messy global variables. Fix errors.
Fix an error in Sortable
Fix a incorrect call assignMenuAttributes from the template

README.md

@@ -74,7 +74,7 @@ or if sqlite support is required:
 The `build` target is split into two sub-targets:
 
 - `make backend` which requires [Go 1.16](https://golang.org/dl/) or greater.
-- `make frontend` which requires [Node.js 12.17](https://nodejs.org/en/download/) or greater and Internet connectivity to download npm dependencies.
+- `make frontend` which requires [Node.js LTS](https://nodejs.org/en/download/) or greater and Internet connectivity to download npm dependencies.
 
 When building from the official source tarballs which include pre-built frontend files, the `frontend` target will not be triggered, making it possible to build without Node.js and Internet connectivity.
 

templates/repo/diff/comment_form.tmpl

@@ -9,7 +9,7 @@
 		<input type="hidden" name="diff_start_cid">
 		<input type="hidden" name="diff_end_cid">
 		<input type="hidden" name="diff_base_cid">
-		<div class="ui top tabular menu" {{if not $.hidden}}onload="assignMenuAttributes(this)" {{end}}data-write="write" data-preview="preview">
+		<div class="ui top tabular menu" data-write="write" data-preview="preview">
 			<a class="active item" data-tab="write">{{$.root.i18n.Tr "write"}}</a>
 			<a class="item" data-tab="preview" data-url="{{$.root.Repository.APIURL}}/markdown" data-context="{{$.root.RepoLink}}">{{$.root.i18n.Tr "preview"}}</a>
 		</div>

web_src/js/features/repo-legacy.js

@@ -29,11 +29,6 @@ import {initRepoSettingBranches} from './repo-settings.js';
 
 const {csrfToken} = window.config;
 
-const commentMDEditors = {};
-
-// FIXME: the usage of `autoSimpleMDE` is quite messy, the refactor should be done very carefully in future.
-let autoSimpleMDE;
-
 export function initRepoCommentForm() {
   if ($('.comment.form').length === 0) {
     return;
@@ -68,12 +63,12 @@ export function initRepoCommentForm() {
     });
   }
 
-  autoSimpleMDE = createCommentSimpleMDE($('.comment.form textarea:not(.review-textarea)'));
+  createCommentSimpleMDE($('.comment.form textarea:not(.review-textarea)'));
   initBranchSelector();
   initCompMarkupContentPreviewTab($('.comment.form'));
   initCompImagePaste($('.comment.form'));
 
-  // Listsubmit
+  // List submits
   function initListSubmits(selector, outerSelector) {
     const $list = $(`.ui.${outerSelector}.list`);
     const $noSelect = $list.find('.no-select');
@@ -259,98 +254,7 @@ export function initRepoCommentForm() {
 }
 
 
-export function initRepository() {
+async function onEditContent(event) {
-  if ($('.repository').length === 0) {
-    return;
-  }
-
-
-  // Commit statuses
-  $('.commit-statuses-trigger').each(function () {
-    const positionRight = $('.repository.file.list').length > 0 || $('.repository.diff').length > 0;
-    const popupPosition = positionRight ? 'right center' : 'left center';
-    $(this)
-      .popup({
-        on: 'click',
-        lastResort: popupPosition, // prevent error message "Popup does not fit within the boundaries of the viewport"
-        position: popupPosition,
-      });
-  });
-
-  // File list and commits
-  if ($('.repository.file.list').length > 0 ||
-    $('.repository.commits').length > 0 || $('.repository.release').length > 0) {
-    initRepoBranchTagDropdown('.choose.reference .dropdown');
-  }
-
-  // Wiki
-  if ($('.repository.wiki.view').length > 0) {
-    initRepoCommonFilterSearchDropdown('.choose.page .dropdown');
-  }
-
-  // Options
-  if ($('.repository.settings.options').length > 0) {
-    // Enable or select internal/external wiki system and issue tracker.
-    $('.enable-system').on('change', function () {
-      if (this.checked) {
-        $($(this).data('target')).removeClass('disabled');
-        if (!$(this).data('context')) $($(this).data('context')).addClass('disabled');
-      } else {
-        $($(this).data('target')).addClass('disabled');
-        if (!$(this).data('context')) $($(this).data('context')).removeClass('disabled');
-      }
-    });
-    $('.enable-system-radio').on('change', function () {
-      if (this.value === 'false') {
-        $($(this).data('target')).addClass('disabled');
-        if (typeof $(this).data('context') !== 'undefined') $($(this).data('context')).removeClass('disabled');
-      } else if (this.value === 'true') {
-        $($(this).data('target')).removeClass('disabled');
-        if (typeof $(this).data('context') !== 'undefined') $($(this).data('context')).addClass('disabled');
-      }
-    });
-  }
-
-  // Labels
-  initCompLabelEdit('.repository.labels');
-
-  // Milestones
-  if ($('.repository.new.milestone').length > 0) {
-    $('#clear-date').on('click', () => {
-      $('#deadline').val('');
-      return false;
-    });
-  }
-
-  // Repo Creation
-  if ($('.repository.new.repo').length > 0) {
-    $('input[name="gitignores"], input[name="license"]').on('change', () => {
-      const gitignores = $('input[name="gitignores"]').val();
-      const license = $('input[name="license"]').val();
-      if (gitignores || license) {
-        $('input[name="auto_init"]').prop('checked', true);
-      }
-    });
-  }
-
-  // Issues
-  if ($('.repository.view.issue').length > 0) {
-    initRepoIssueBranchSelect();
-    initRepoIssueTitleEdit();
-    initRepoIssueWipToggle();
-    initRepoIssueComments();
-
-    // Issue/PR Context Menus
-    $('.context-dropdown').dropdown({
-      action: 'hide',
-    });
-
-    initRepoDiffConversationNav();
-    initRepoIssueQuoteReply();
-    initRepoIssueReferenceIssue();
-
-    // Edit issue or comment content
-    $(document).on('click', '.edit-content', async function (event) {
   event.preventDefault();
   $(this).closest('.dropdown').find('.menu').toggle('visible');
   const $segment = $(this).closest('.header').next();
@@ -389,9 +293,7 @@ export function initRepository() {
         thumbnailHeight: 480,
         init() {
           this.on('success', (file, data) => {
-                fileUuidDict[file.uuid] = {
+            fileUuidDict[file.uuid] = {submitted: false};
-                  submitted: false,
-                };
             const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
             $dropzone.find('.files').append(input);
           });
@@ -419,9 +321,7 @@ export function initRepository() {
                 dz.emit('thumbnail', this, imgSrc);
                 dz.emit('complete', this);
                 dz.files.push(this);
-                    fileUuidDict[this.uuid] = {
+                fileUuidDict[this.uuid] = {submitted: true};
-                      submitted: true,
-                    };
                 $dropzone.find(`img[src='${imgSrc}']`).css('max-width', '100%');
                 const input = $(`<input id="${this.uuid}" name="files" type="hidden">`).val(this.uuid);
                 $dropzone.find('.files').append(input);
@@ -442,7 +342,7 @@ export function initRepository() {
     $editContentForm.find('.write').attr('data-tab', $editContentZone.data('write'));
     $editContentForm.find('.preview').attr('data-tab', $editContentZone.data('preview'));
     $simplemde = createCommentSimpleMDE($textarea);
-        commentMDEditors[$editContentZone.data('write')] = $simplemde;
+
     initCompMarkupContentPreviewTab($editContentForm);
     if ($dropzone.length === 1) {
       initSimpleMDEImagePaste($simplemde, $dropzone[0], $dropzone.find('.files'));
@@ -477,10 +377,7 @@ export function initRepository() {
         const $content = $segment;
         if (!$content.find('.dropzone-attachments').length) {
           if (data.attachments !== '') {
-                $content.append(`
+            $content.append(`<div class="dropzone-attachments"></div>`);
-                  <div class="dropzone-attachments">
-                  </div>
-                `);
             $content.find('.dropzone-attachments').replaceWith(data.attachments);
           }
         } else if (data.attachments === '') {
@@ -498,7 +395,7 @@ export function initRepository() {
     });
   } else {
     $textarea = $segment.find('textarea');
-        $simplemde = commentMDEditors[$editContentZone.data('write')];
+    $simplemde = $textarea.data('simplemde');
   }
 
   // Show write/preview tab and copy raw content as needed
@@ -512,18 +409,81 @@ export function initRepository() {
     $textarea.focus();
     $simplemde.codemirror.focus();
   });
+}
+
+export function initRepository() {
+  if ($('.repository').length === 0) {
+    return;
+  }
+
+
+  // Commit statuses
+  $('.commit-statuses-trigger').each(function () {
+    const positionRight = $('.repository.file.list').length > 0 || $('.repository.diff').length > 0;
+    const popupPosition = positionRight ? 'right center' : 'left center';
+    $(this)
+      .popup({
+        on: 'click',
+        lastResort: popupPosition, // prevent error message "Popup does not fit within the boundaries of the viewport"
+        position: popupPosition,
+      });
   });
 
-    initRepoIssueCommentDelete();
+  // File list and commits
-    initRepoIssueDependencyDelete();
+  if ($('.repository.file.list').length > 0 ||
-    initRepoIssueCodeCommentCancel();
+    $('.repository.commits').length > 0 || $('.repository.release').length > 0) {
-    initRepoIssueStatusButton();
+    initRepoBranchTagDropdown('.choose.reference .dropdown');
-    initRepoPullRequestMerge();
-    initRepoPullRequestUpdate();
-    initCompReactionSelector();
   }
 
-  initRepoClone();
+  // Wiki
+  if ($('.repository.wiki.view').length > 0) {
+    initRepoCommonFilterSearchDropdown('.choose.page .dropdown');
+  }
+
+  // Options
+  if ($('.repository.settings.options').length > 0) {
+    // Enable or select internal/external wiki system and issue tracker.
+    $('.enable-system').on('change', function () {
+      if (this.checked) {
+        $($(this).data('target')).removeClass('disabled');
+        if (!$(this).data('context')) $($(this).data('context')).addClass('disabled');
+      } else {
+        $($(this).data('target')).addClass('disabled');
+        if (!$(this).data('context')) $($(this).data('context')).removeClass('disabled');
+      }
+    });
+    $('.enable-system-radio').on('change', function () {
+      if (this.value === 'false') {
+        $($(this).data('target')).addClass('disabled');
+        if (typeof $(this).data('context') !== 'undefined') $($(this).data('context')).removeClass('disabled');
+      } else if (this.value === 'true') {
+        $($(this).data('target')).removeClass('disabled');
+        if (typeof $(this).data('context') !== 'undefined') $($(this).data('context')).addClass('disabled');
+      }
+    });
+  }
+
+  // Labels
+  initCompLabelEdit('.repository.labels');
+
+  // Milestones
+  if ($('.repository.new.milestone').length > 0) {
+    $('#clear-date').on('click', () => {
+      $('#deadline').val('');
+      return false;
+    });
+  }
+
+  // Repo Creation
+  if ($('.repository.new.repo').length > 0) {
+    $('input[name="gitignores"], input[name="license"]').on('change', () => {
+      const gitignores = $('input[name="gitignores"]').val();
+      const license = $('input[name="license"]').val();
+      if (gitignores || license) {
+        $('input[name="auto_init"]').prop('checked', true);
+      }
+    });
+  }
 
   // Compare or pull request
   const $repoDiff = $('.repository.diff');
@@ -532,46 +492,81 @@ export function initRepository() {
     initRepoCommonFilterSearchDropdown('.choose.branch .dropdown');
   }
 
+  initRepoClone();
+  initRepoCommonLanguageStats();
+  initRepoSettingBranches();
+
+  // Issues
+  if ($('.repository.view.issue').length > 0) {
+    initRepoIssueCommentEdit();
+
+    initRepoIssueBranchSelect();
+    initRepoIssueTitleEdit();
+    initRepoIssueWipToggle();
+    initRepoIssueComments();
+
+    initRepoDiffConversationNav();
+    initRepoIssueReferenceIssue();
+
+
+    initRepoIssueCommentDelete();
+    initRepoIssueDependencyDelete();
+    initRepoIssueCodeCommentCancel();
+    initRepoIssueStatusButton();
+    initRepoPullRequestMerge();
+    initRepoPullRequestUpdate();
+    initCompReactionSelector();
+  }
+
   // Pull request
   const $repoComparePull = $('.repository.compare.pull');
   if ($repoComparePull.length > 0) {
     // show pull request form
     $repoComparePull.find('button.show-form').on('click', function (e) {
       e.preventDefault();
-      $repoComparePull.find('.pullrequest-form').show();
-      autoSimpleMDE.codemirror.refresh();
       $(this).parent().hide();
+
+      const $form = $repoComparePull.find('.pullrequest-form');
+      const $simplemde = $form.find('textarea.edit_area').data('simplemde');
+      $form.show();
+      $simplemde.codemirror.refresh();
     });
   }
-
-  initRepoSettingBranches();
-  initRepoCommonLanguageStats();
 }
 
-function initRepoIssueQuoteReply() {
+function initRepoIssueCommentEdit() {
+  // Issue/PR Context Menus
+  $('.comment-header-right .context-dropdown').dropdown({action: 'hide'});
+
+  // Edit issue or comment content
+  $(document).on('click', '.edit-content', onEditContent);
+
   // Quote reply
   $(document).on('click', '.quote-reply', function (event) {
     $(this).closest('.dropdown').find('.menu').toggle('visible');
     const target = $(this).data('target');
     const quote = $(`#comment-${target}`).text().replace(/\n/g, '\n> ');
     const content = `> ${quote}\n\n`;
-    let $simplemde = autoSimpleMDE;
+    let $simplemde;
     if ($(this).hasClass('quote-reply-diff')) {
       const $parent = $(this).closest('.comment-code-cloud');
       $parent.find('button.comment-form-reply').trigger('click');
       $simplemde = $parent.find('[name="content"]').data('simplemde');
+    } else {
+      // for normal issue/comment page
+      $simplemde = $('#comment-form .edit_area').data('simplemde');
     }
-    if ($simplemde !== null) {
+    if ($simplemde) {
       if ($simplemde.value() !== '') {
         $simplemde.value(`${$simplemde.value()}\n\n${content}`);
       } else {
         $simplemde.value(`${content}`);
       }
-    }
       requestAnimationFrame(() => {
         $simplemde.codemirror.focus();
         $simplemde.codemirror.setCursor($simplemde.codemirror.lineCount(), 0);
       });
+    }
     event.preventDefault();
   });
 }

web_src/js/features/repo-projects.js

@@ -1,11 +1,13 @@
 const {csrfToken} = window.config;
 
 async function initRepoProjectSortable() {
+  const els = document.getElementsByClassName('board');
+  if (!els.length) return;
+
   const {Sortable} = await import(/* webpackChunkName: "sortable" */'sortablejs');
   const boardColumns = document.getElementsByClassName('board-column');
-
   new Sortable(
-    document.getElementsByClassName('board')[0],
+    els[0],
     {
       group: 'board-column',
       draggable: '.board-column',