Remove JS globals related to timetracking and due date (#13921)

Refactor to avoid these globals. Should work exactly as before.

integrations/timetracking_test.go

@@ -40,8 +40,8 @@ func testViewTimetrackingControls(t *testing.T, session *TestSession, user, repo
 
 	htmlDoc := NewHTMLParser(t, resp.Body)
 
-	htmlDoc.AssertElement(t, ".timetrack .start-add .start", canTrackTime)
+	htmlDoc.AssertElement(t, ".timetrack .issue-start-time", canTrackTime)
-	htmlDoc.AssertElement(t, ".timetrack .start-add .add-time", canTrackTime)
+	htmlDoc.AssertElement(t, ".timetrack .issue-add-time", canTrackTime)
 
 	req = NewRequestWithValues(t, "POST", path.Join(user, repo, "issues", issue, "times", "stopwatch", "toggle"), map[string]string{
 		"_csrf": htmlDoc.GetCSRF(),
@@ -56,8 +56,8 @@ func testViewTimetrackingControls(t *testing.T, session *TestSession, user, repo
 		events := htmlDoc.doc.Find(".event > span.text")
 		assert.Contains(t, events.Last().Text(), "started working")
 
-		htmlDoc.AssertElement(t, ".timetrack .stop-cancel .stop", true)
+		htmlDoc.AssertElement(t, ".timetrack .issue-stop-time", true)
-		htmlDoc.AssertElement(t, ".timetrack .stop-cancel .cancel", true)
+		htmlDoc.AssertElement(t, ".timetrack .issue-cancel-time", true)
 
 		// Sleep for 1 second to not get wrong order for stopping timer
 		time.Sleep(time.Second)

templates/repo/issue/view_content/sidebar.tmpl

@@ -336,9 +336,9 @@
 							{{$.CsrfTokenHtml}}
 						</form>
 						{{if  $.IsStopwatchRunning}}
-							<div class="ui buttons fluid stop-cancel">
+							<div class="ui buttons fluid">
-								<button onclick="this.disabled=true;window.toggleStopwatch()" class="ui button stop">{{.i18n.Tr "repo.issues.stop_tracking"}}</button>
+								<button class="ui button issue-stop-time">{{.i18n.Tr "repo.issues.stop_tracking"}}</button>
-								<button onclick="this.disabled=true;window.cancelStopwatch()" class="ui negative button cancel">{{.i18n.Tr "repo.issues.cancel_tracking"}}</button>
+								<button class="ui negative button issue-cancel-time">{{.i18n.Tr "repo.issues.cancel_tracking"}}</button>
 							</div>
 						{{else}}
 							{{if .HasUserStopwatch}}
@@ -346,8 +346,8 @@
 									{{.i18n.Tr "repo.issues.tracking_already_started" .OtherStopwatchURL | Safe}}
 								</div>
 							{{end}}
-							<div class="ui buttons two fluid start-add">
+							<div class="ui buttons two fluid">
-								<button onclick="this.disabled=true;window.toggleStopwatch()" class="ui button poping up start" data-content='{{.i18n.Tr "repo.issues.start_tracking"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.start_tracking_short"}}</button>
+								<button class="ui button poping up issue-start-time" data-content='{{.i18n.Tr "repo.issues.start_tracking"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.start_tracking_short"}}</button>
 								<div class="ui mini modal">
 									<div class="header">{{.i18n.Tr "repo.issues.add_time"}}</div>
 									<div class="content">
@@ -362,7 +362,7 @@
 										<div class="ui red cancel button">{{.i18n.Tr "repo.issues.add_time_cancel"}}</div>
 									</div>
 								</div>
-								<button onclick="window.timeAddManual()" class="ui button green poping up add-time" data-content='{{.i18n.Tr "repo.issues.add_time"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.add_time_short"}}</button>
+								<button class="ui button green poping up issue-add-time" data-content='{{.i18n.Tr "repo.issues.add_time"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.add_time_short"}}</button>
 							</div>
 						{{end}}
 					</div>
@@ -407,8 +407,8 @@
 					{{end}}
 					{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
 						<br/>
-						<a style="cursor:pointer;" onclick="window.toggleDeadlineForm();"><i class="edit icon"></i>{{$.i18n.Tr "repo.issues.due_date_form_edit"}}</a> -
+						<a class="issue-due-edit"><i class="edit icon"></i>{{$.i18n.Tr "repo.issues.due_date_form_edit"}}</a> -
-						<a style="cursor:pointer;" onclick="window.updateDeadline('');"><i class="remove icon"></i>{{$.i18n.Tr "repo.issues.due_date_form_remove"}}</a>
+						<a class="issue-due-remove"><i class="remove icon"></i>{{$.i18n.Tr "repo.issues.due_date_form_remove"}}</a>
 					{{end}}
 				</p>
 			{{else}}
@@ -417,7 +417,7 @@
 
 			{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
 				<div {{if ne .Issue.DeadlineUnix 0}} style="display: none;"{{end}} id="deadlineForm">
-					<form class="ui fluid action input" action="{{AppSubUrl}}/api/v1/repos/{{.Repository.Owner.Name}}/{{.Repository.Name}}/issues/{{.Issue.Index}}" method="post" id="update-issue-deadline-form" onsubmit="window.setDeadline();return false;">
+					<form class="ui fluid action input issue-due-form" action="{{AppSubUrl}}/api/v1/repos/{{.Repository.Owner.Name}}/{{.Repository.Name}}/issues/{{.Issue.Index}}" method="post" id="update-issue-deadline-form">
 						{{$.CsrfTokenHtml}}
 						<input required placeholder="{{.i18n.Tr "repo.issues.due_date_form"}}" {{if gt .Issue.DeadlineUnix 0}}value="{{.Issue.DeadlineUnix.Format "2006-01-02"}}"{{end}} type="date" name="deadlineDate" id="deadlineDate">
 						<button class="ui green icon button">

web_src/js/index.js

@@ -1,5 +1,4 @@
-/* exported timeAddManual, toggleStopwatch, cancelStopwatch */
+/* exported deleteDependencyModal, cancelCodeComment, onOAuthLoginClick */
-/* exported toggleDeadlineForm, setDeadline, updateDeadline, deleteDependencyModal, cancelCodeComment, onOAuthLoginClick */
 
 import './publicpath.js';
 
@@ -2525,6 +2524,8 @@ $(document).ready(async () => {
   initU2FAuth();
   initU2FRegister();
   initIssueList();
+  initIssueTimetracking();
+  initIssueDue();
   initWipTitle();
   initPullRequestReview();
   initRepoStatusChecker();
@@ -3105,22 +3106,22 @@ function initVueApp() {
   });
 }
 
-window.timeAddManual = function () {
+function initIssueTimetracking() {
-  $('.mini.modal')
+  $(document).on('click', '.issue-add-time', () => {
-    .modal({
+    $('.mini.modal').modal({
       duration: 200,
       onApprove() {
         $('#add_time_manual_form').trigger('submit');
       }
     }).modal('show');
-};
+  });
-
+  $(document).on('click', '.issue-start-time, .issue-stop-time', () => {
-window.toggleStopwatch = function () {
+    $('#toggle_stopwatch_form').trigger('submit');
-  $('#toggle_stopwatch_form').trigger('submit');
+  });
-};
+  $(document).on('click', '.issue-cancel-time', () => {
-window.cancelStopwatch = function () {
+    $('#cancel_stopwatch_form').trigger('submit');
-  $('#cancel_stopwatch_form').trigger('submit');
+  });
-};
+}
 
 function initFilterBranchTagDropdown(selector) {
   $(selector).each(function () {
@@ -3476,16 +3477,7 @@ function initTopicbar() {
   });
 }
 
-window.toggleDeadlineForm = function () {
+function updateDeadline(deadlineString) {
-  $('#deadlineForm').fadeToggle(150);
-};
-
-window.setDeadline = function () {
-  const deadline = $('#deadlineDate').val();
-  window.updateDeadline(deadline);
-};
-
-window.updateDeadline = function (deadlineString) {
   $('#deadline-err-invalid-date').hide();
   $('#deadline-loader').addClass('loading');
 
@@ -3519,7 +3511,20 @@ window.updateDeadline = function (deadlineString) {
       $('#deadline-err-invalid-date').show();
     }
   });
-};
+}
+
+function initIssueDue() {
+  $(document).on('click', '.issue-due-edit', () => {
+    $('#deadlineForm').fadeToggle(150);
+  });
+  $(document).on('click', '.issue-due-remove', () => {
+    updateDeadline('');
+  });
+  $(document).on('submit', '.issue-due-form', () => {
+    updateDeadline($('#deadlineDate').val());
+    return false;
+  });
+}
 
 window.deleteDependencyModal = function (id, type) {
   $('.remove-dependency')