Refactor image diff (#31444)

And remove some jQuery functions

Author: wxiaoguang

Diff for: templates/repo/diff/image_diff.tmpl

@@ -7,7 +7,7 @@
 			data-mime-before="{{.sniffedTypeBase.GetMimeType}}"
 			data-mime-after="{{.sniffedTypeHead.GetMimeType}}"
 		>
-			<overflow-menu class="ui secondary pointing tabular top attached borderless menu">
+			<overflow-menu class="ui secondary pointing tabular menu custom">
 				<div class="overflow-menu-items tw-justify-center">
 					<a class="item active" data-tab="diff-side-by-side-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.side_by_side"}}</a>
 					{{if and .blobBase .blobHead}}

Diff for: web_src/js/features/common-form.js

@@ -1,7 +1,9 @@
 import $ from 'jquery';
+import {initAreYouSure} from '../vendor/jquery.are-you-sure.js';
 import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js';
 
 export function initGlobalFormDirtyLeaveConfirm() {
+  initAreYouSure(window.jQuery);
   // Warn users that try to leave a page after entering data into a form.
   // Except on sign-in pages, and for forms marked as 'ignore-dirty'.
   if (!$('.user.signin').length) {

Diff for: web_src/js/features/common-page.js

@@ -26,7 +26,7 @@ export function initFootLanguageMenu() {
   $('.language-menu a[lang]').on('click', linkLanguageAction);
 }
 
-export function initGlobalComponents() {
+export function initGlobalDropdown() {
   // Semantic UI modules.
   const $uiDropdowns = $('.ui.dropdown');
 
@@ -68,8 +68,10 @@ export function initGlobalComponents() {
   //   eg: the "Create New Repo" menu on the navbar.
   $uiDropdowns.filter('.upward').dropdown('setting', 'direction', 'upward');
   $uiDropdowns.filter('.downward').dropdown('setting', 'direction', 'downward');
+}
 
-  $('.ui.menu.tabular .item').tab({autoTabActivation: false});
+export function initGlobalTabularMenu() {
+  $('.ui.menu.tabular:not(.custom) .item').tab({autoTabActivation: false});
 }
 
 /**