1- import $ from 'jquery' ;
21import { htmlEscape } from 'escape-goat' ;
32import { createCodeEditor } from './codeeditor.ts' ;
43import { hideElem , queryElems , showElem , createElementFromHTML } from '../utils/dom.ts' ;
54import { initMarkupContent } from '../markup/content.ts' ;
65import { attachRefIssueContextPopup } from './contextpopup.ts' ;
76import { POST } from '../modules/fetch.ts' ;
87import { initDropzone } from './dropzone.ts' ;
8+ import { confirmModal } from './comp/ConfirmModal.ts' ;
9+ import { applyAreYouSure } from '../vendor/jquery.are-you-sure.ts' ;
10+ import { fomanticQuery } from '../modules/fomantic/base.ts' ;
911
10- function initEditPreviewTab ( $form ) {
11- const $tabMenu = $form . find ( '.repo-editor-menu' ) ;
12- $tabMenu . find ( '.item' ) . tab ( ) ;
13- const $previewTab = $tabMenu . find ( 'a[data-tab="preview"]' ) ;
14- if ( $previewTab . length ) {
15- $previewTab . on ( 'click' , async function ( ) {
16- const $this = $ ( this ) ;
17- let context = `${ $this . data ( 'context' ) } ;
18- const mode = $this . data ( 'markup-mode' ) || 'comment' ;
19- const $treePathEl = $form . find ( 'input#tree_path' ) ;
20- if ( $treePathEl . length > 0 ) {
21- context += $treePathEl . val ( ) ;
22- }
23- context = context . substring ( 0 , context . lastIndexOf ( '/' ) ) ;
12+ function initEditPreviewTab ( elForm : HTMLFormElement ) {
13+ const elTabMenu = elForm . querySelector ( '.repo-editor-menu' ) ;
14+ fomanticQuery ( elTabMenu . querySelectorAll ( '.item' ) ) . tab ( ) ;
2415
25- const formData = new FormData ( ) ;
26- formData . append ( 'mode' , mode ) ;
27- formData . append ( 'context' , context ) ;
28- formData . append ( 'text' , $form . find ( '.tab[data-tab="write"] textarea' ) . val ( ) ) ;
29- formData . append ( 'file_path' , $treePathEl . val ( ) ) ;
30- try {
31- const response = await POST ( $this . data ( 'url' ) , { data : formData } ) ;
32- const data = await response . text ( ) ;
33- const $previewPanel = $form . find ( '.tab[data-tab="preview"]' ) ;
34- if ( $previewPanel . length ) {
35- renderPreviewPanelContent ( $previewPanel , data ) ;
36- }
37- } catch ( error ) {
38- console . error ( 'Error:' , error ) ;
39- }
40- } ) ;
41- }
16+ const elPreviewTab = elTabMenu . querySelector ( 'a[data-tab="preview"]' ) ;
17+ const elPreviewPanel = elForm . querySelector ( '.tab[data-tab="preview"]' ) ;
18+ if ( ! elPreviewTab || ! elPreviewPanel ) return ;
19+
20+ elPreviewTab . addEventListener ( 'click' , async ( ) => {
21+ const elTreePath = elForm . querySelector < HTMLInputElement > ( 'input#tree_path' ) ;
22+ const previewUrl = elPreviewTab . getAttribute ( 'data-preview-url' ) ;
23+ const previewContextRef = elPreviewTab . getAttribute ( 'data-preview-context-ref' ) ;
24+ let previewContext = `${ previewContextRef } ${ elTreePath . value } ;
25+ previewContext = previewContext . substring ( 0 , previewContext . lastIndexOf ( '/' ) ) ;
26+ const formData = new FormData ( ) ;
27+ formData . append ( 'mode' , 'file' ) ;
28+ formData . append ( 'context' , previewContext ) ;
29+ formData . append ( 'text' , elForm . querySelector < HTMLTextAreaElement > ( '.tab[data-tab="write"] textarea' ) . value ) ;
30+ formData . append ( 'file_path' , elTreePath . value ) ;
31+ const response = await POST ( previewUrl , { data : formData } ) ;
32+ const data = await response . text ( ) ;
33+ renderPreviewPanelContent ( elPreviewPanel , data ) ;
34+ } ) ;
4235}
4336
4437export function initRepoEditor ( ) {
@@ -151,25 +144,25 @@ export function initRepoEditor() {
151144 }
152145 } ) ;
153146
154- const $form = $ ( '.repository.editor .edit.form' ) ;
155- initEditPreviewTab ( $form ) ;
147+ const elForm = document . querySelector < HTMLFormElement > ( '.repository.editor .edit.form' ) ;
148+ initEditPreviewTab ( elForm ) ;
156149
157150 ( async ( ) => {
158151 const editor = await createCodeEditor ( editArea , filenameInput ) ;
159152
160153 // Using events from https://github.com/codedance/jquery.AreYouSure#advanced-usage
161154 // to enable or disable the commit button
162155 const commitButton = document . querySelector < HTMLButtonElement > ( '#commit-button' ) ;
163- const $editForm = $ ( '.ui.edit.form' ) ;
164156 const dirtyFileClass = 'dirty-file' ;
165157
166158 // Disabling the button at the start
167- if ( $ ( 'input[name="page_has_posted"]' ) . val ( ) !== 'true' ) {
159+ if ( document . querySelector < HTMLInputElement > ( 'input[name="page_has_posted"]' ) . value !== 'true' ) {
168160 commitButton . disabled = true ;
169161 }
170162
171163 // Registering a custom listener for the file path and the file content
172- $editForm . areYouSure ( {
164+ // FIXME: it is not quite right here (old bug), it causes double-init, the global areYouSure "dirty" class will also be added
165+ applyAreYouSure ( elForm , {
173166 silent : true ,
174167 dirtyClass : dirtyFileClass ,
175168 fieldSelector : ':input:not(.commit-form-wrapper :input)' ,
@@ -187,15 +180,17 @@ export function initRepoEditor() {
187180 editor . setValue ( value ) ;
188181 }
189182
190- commitButton ?. addEventListener ( 'click' , ( e ) => {
183+ commitButton ?. addEventListener ( 'click' , async ( e ) => {
191184 // A modal which asks if an empty file should be committed
192185 if ( ! editArea . value ) {
193- $ ( '#edit-empty-content-modal' ) . modal ( {
194- onApprove ( ) {
195- $ ( '.edit.form' ) . trigger ( 'submit' ) ;
196- } ,
197- } ) . modal ( 'show' ) ;
198186 e . preventDefault ( ) ;
187+ if ( await confirmModal ( {
188+ header : elForm . getAttribute ( 'data-text-empty-confirm-header' ) ,
189+ content : elForm . getAttribute ( 'data-text-empty-confirm-content' ) ,
190+ } ) ) {
191+ elForm . classList . remove ( 'dirty' ) ;
192+ elForm . submit ( ) ;
193+ }
199194 }
200195 } ) ;
201196 } ) ( ) ;
0 commit comments