1- import $ from 'jquery' ;
21import { svg } from '../svg.ts' ;
32import { showErrorToast } from '../modules/toast.ts' ;
43import { GET , POST } from '../modules/fetch.ts' ;
5- import { showElem } from '../utils/dom.ts' ;
4+ import { createElementFromHTML , showElem } from '../utils/dom.ts' ;
65import { parseIssuePageInfo } from '../utils.ts' ;
6+ import { fomanticQuery } from '../modules/fomantic/base.ts' ;
77
8- let i18nTextEdited ;
9- let i18nTextOptions ;
10- let i18nTextDeleteFromHistory ;
11- let i18nTextDeleteFromHistoryConfirm ;
8+ let i18nTextEdited : string ;
9+ let i18nTextOptions : string ;
10+ let i18nTextDeleteFromHistory : string ;
11+ let i18nTextDeleteFromHistoryConfirm : string ;
1212
13- function showContentHistoryDetail ( issueBaseUrl , commentId , historyId , itemTitleHtml ) {
14- let $dialog = $ ( '.content-history-detail-dialog' ) ;
15- if ( $dialog . length ) return ;
16-
17- $dialog = $ ( `
13+ function showContentHistoryDetail ( issueBaseUrl : string , commentId : string , historyId : string , itemTitleHtml : string ) {
14+ const elDetailDialog = createElementFromHTML ( `
1815<div class="ui modal content-history-detail-dialog">
1916 ${ svg ( 'octicon-x' , 16 , 'close icon inside' ) }
2017 <div class="header tw-flex tw-items-center tw-justify-between">
@@ -29,8 +26,11 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
2926 </div>
3027 <div class="comment-diff-data is-loading"></div>
3128</div>` ) ;
32- $dialog . appendTo ( $ ( 'body' ) ) ;
33- $dialog . find ( '.dialog-header-options' ) . dropdown ( {
29+ document . body . append ( elDetailDialog ) ;
30+ const elOptionsDropdown = elDetailDialog . querySelector ( '.ui.dropdown.dialog-header-options' ) ;
31+ const $fomanticDialog = fomanticQuery ( elDetailDialog ) ;
32+ const $fomanticDropdownOptions = fomanticQuery ( elOptionsDropdown ) ;
33+ $fomanticDropdownOptions . dropdown ( {
3434 showOnFocus : false ,
3535 allowReselection : true ,
3636 async onChange ( _value , _text , $item ) {
@@ -46,7 +46,7 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
4646 const resp = await response . json ( ) ;
4747
4848 if ( resp . ok ) {
49- $dialog . modal ( 'hide' ) ;
49+ $fomanticDialog . modal ( 'hide' ) ;
5050 } else {
5151 showErrorToast ( resp . message ) ;
5252 }
@@ -60,10 +60,10 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
6060 }
6161 } ,
6262 onHide ( ) {
63- $ ( this ) . dropdown ( 'clear' , true ) ;
63+ $fomanticDropdownOptions . dropdown ( 'clear' , true ) ;
6464 } ,
6565 } ) ;
66- $dialog . modal ( {
66+ $fomanticDialog . modal ( {
6767 async onShow ( ) {
6868 try {
6969 const params = new URLSearchParams ( ) ;
@@ -74,43 +74,46 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
7474 const response = await GET ( url ) ;
7575 const resp = await response . json ( ) ;
7676
77- const commentDiffData = $dialog . find ( '.comment-diff-data' ) [ 0 ] ;
78- commentDiffData ? .classList . remove ( 'is-loading' ) ;
77+ const commentDiffData = elDetailDialog . querySelector ( '.comment-diff-data' ) ;
78+ commentDiffData . classList . remove ( 'is-loading' ) ;
7979 commentDiffData . innerHTML = resp . diffHtml ;
8080 // there is only one option "item[data-option-item=delete]", so the dropdown can be entirely shown/hidden.
8181 if ( resp . canSoftDelete ) {
82- showElem ( $dialog . find ( '.dialog-header-options' ) ) ;
82+ showElem ( elOptionsDropdown ) ;
8383 }
8484 } catch ( error ) {
8585 console . error ( 'Error:' , error ) ;
8686 }
8787 } ,
8888 onHidden ( ) {
89- $dialog . remove ( ) ;
89+ $fomanticDialog . remove ( ) ;
9090 } ,
9191 } ) . modal ( 'show' ) ;
9292}
9393
94- function showContentHistoryMenu ( issueBaseUrl , $item , commentId ) {
95- const $headerLeft = $item . find ( '.comment-header-left' ) ;
94+ function showContentHistoryMenu ( issueBaseUrl : string , elCommentItem : Element , commentId : string ) {
95+ const elHeaderLeft = elCommentItem . querySelector ( '.comment-header-left' ) ;
9696 const menuHtml = `
9797 <div class="ui dropdown interact-fg content-history-menu" data-comment-id="${ commentId }
9898 • ${ i18nTextEdited } ${ svg ( 'octicon-triangle-down' , 14 , 'dropdown icon' ) }
9999 <div class="menu">
100100 </div>
101101 </div>` ;
102102
103- $headerLeft . find ( `.content-history-menu` ) . remove ( ) ;
104- $headerLeft . append ( $ ( menuHtml ) ) ;
105- $headerLeft . find ( '.dropdown' ) . dropdown ( {
103+ elHeaderLeft . querySelector ( `.ui.dropdown.content-history-menu` ) ?. remove ( ) ; // remove the old one if exists
104+ elHeaderLeft . append ( createElementFromHTML ( menuHtml ) ) ;
105+
106+ const elDropdown = elHeaderLeft . querySelector ( '.ui.dropdown.content-history-menu' ) ;
107+ const $fomanticDropdown = fomanticQuery ( elDropdown ) ;
108+ $fomanticDropdown . dropdown ( {
106109 action : 'hide' ,
107110 apiSettings : {
108111 cache : false ,
109112 url : `${ issueBaseUrl } ${ commentId } ,
110113 } ,
111114 saveRemoteData : false ,
112115 onHide ( ) {
113- $ ( this ) . dropdown ( 'change values' , null ) ;
116+ $fomanticDropdown . dropdown ( 'change values' , null ) ;
114117 } ,
115118 onChange ( value , itemHtml , $item ) {
116119 if ( value && ! $item . find ( '[data-history-is-deleted=1]' ) . length ) {
@@ -124,9 +127,9 @@ export async function initRepoIssueContentHistory() {
124127 const issuePageInfo = parseIssuePageInfo ( ) ;
125128 if ( ! issuePageInfo . issueNumber ) return ;
126129
127- const $itemIssue = $ ( '.repository.issue .timeline-item.comment.first' ) ; // issue(PR) main content
128- const $comments = $ ( '.repository.issue .comment-list .comment' ) ; // includes: issue(PR) comments, review comments, code comments
129- if ( ! $itemIssue . length && ! $comments . length ) return ;
130+ const elIssueDescription = document . querySelector ( '.repository.issue .timeline-item.comment.first' ) ; // issue(PR) main content
131+ const elComments = document . querySelectorAll ( '.repository.issue .comment-list .comment' ) ; // includes: issue(PR) comments, review comments, code comments
132+ if ( ! elIssueDescription && ! elComments . length ) return ;
130133
131134 const issueBaseUrl = `${ issuePageInfo . repoLink } ${ issuePageInfo . issueNumber } ;
132135
@@ -139,13 +142,13 @@ export async function initRepoIssueContentHistory() {
139142 i18nTextDeleteFromHistoryConfirm = resp . i18n . textDeleteFromHistoryConfirm ;
140143 i18nTextOptions = resp . i18n . textOptions ;
141144
142- if ( resp . editedHistoryCountMap [ 0 ] && $itemIssue . length ) {
143- showContentHistoryMenu ( issueBaseUrl , $itemIssue , '0' ) ;
145+ if ( resp . editedHistoryCountMap [ 0 ] && elIssueDescription ) {
146+ showContentHistoryMenu ( issueBaseUrl , elIssueDescription , '0' ) ;
144147 }
145148 for ( const [ commentId , _editedCount ] of Object . entries ( resp . editedHistoryCountMap ) ) {
146149 if ( commentId === '0' ) continue ;
147- const $itemComment = $ ( `#issuecomment-${ commentId } ) ;
148- showContentHistoryMenu ( issueBaseUrl , $itemComment , commentId ) ;
150+ const elIssueComment = document . querySelector ( `#issuecomment-${ commentId } ) ;
151+ if ( elIssueComment ) showContentHistoryMenu ( issueBaseUrl , elIssueComment , commentId ) ;
149152 }
150153 } catch ( error ) {
151154 console . error ( 'Error:' , error ) ;
0 commit comments