@ -1,4 +1,3 @@
import $ from 'jquery' ;
import { htmlEscape } from 'escape-goat' ; import { htmlEscape } from 'escape-goat' ;
import { createCodeEditor } from './codeeditor.ts' ; import { createCodeEditor } from './codeeditor.ts' ;
import { hideElem , queryElems , showElem , createElementFromHTML } from '../utils/dom.ts' ; import { hideElem , queryElems , showElem , createElementFromHTML } from '../utils/dom.ts' ;
@ -6,39 +5,33 @@ import {initMarkupContent} from '../markup/content.ts';
import { attachRefIssueContextPopup } from './contextpopup.ts' ; import { attachRefIssueContextPopup } from './contextpopup.ts' ;
import { POST } from '../modules/fetch.ts' ; import { POST } from '../modules/fetch.ts' ;
import { initDropzone } from './dropzone.ts' ; import { initDropzone } from './dropzone.ts' ;
import { confirmModal } from './comp/ConfirmModal.ts' ;
import { applyAreYouSure } from '../vendor/jquery.are-you-sure.ts' ;
import { fomanticQuery } from '../modules/fomantic/base.ts' ;
function initEditPreviewTab ( $form ) { function initEditPreviewTab ( elForm : HTMLFormElement ) {
const $tabMenu = $form . find ( '.repo-editor-menu' ) ;
const elTabMenu = elForm . querySelector ( '.repo-editor-menu' ) ;
$tabMenu . find ( '.item' ) . tab ( ) ;
fomanticQuery ( elTabMenu . querySelectorAll ( '.item' ) ) . tab ( ) ;
const $previewTab = $tabMenu . find ( 'a[data-tab="preview"]' ) ;
if ( $previewTab . length ) {
$previewTab . on ( 'click' , async function ( ) {
const $this = $ ( this ) ;
let context = ` ${ $this . data ( 'context' ) } / ` ;
const mode = $this . data ( 'markup-mode' ) || 'comment' ;
const $treePathEl = $form . find ( 'input#tree_path' ) ;
if ( $treePathEl . length > 0 ) {
context += $treePathEl . val ( ) ;
}
context = context . substring ( 0 , context . lastIndexOf ( '/' ) ) ;
const formData = new FormData ( ) ;
const elPreviewTab = elTabMenu . querySelector ( 'a[data-tab="preview"]' ) ;
formData . append ( 'mode' , mode ) ;
const elPreviewPanel = elForm . querySelector ( '.tab[data-tab="preview"]' ) ;
formData . append ( 'context' , context ) ;
if ( ! elPreviewTab || ! elPreviewPanel ) return ;
formData . append ( 'text' , $form . find ( '.tab[data-tab="write"] textarea' ) . val ( ) ) ;
formData . append ( 'file_path' , $treePathEl . val ( ) ) ;
elPreviewTab . addEventListener ( 'click' , async ( ) = > {
try {
const elTreePath = elForm . querySelector < HTMLInputElement > ( 'input#tree_path' ) ;
const response = await POST ( $this . data ( 'url' ) , { data : formData } ) ;
const previewUrl = elPreviewTab . getAttribute ( 'data-preview-url' ) ;
const data = await response . text ( ) ;
const previewContextRef = elPreviewTab . getAttribute ( 'data-preview-context-ref' ) ;
const $previewPanel = $form . find ( '.tab[data-tab="preview"]' ) ;
let previewContext = ` ${ previewContextRef } / ${ elTreePath . value } ` ;
if ( $previewPanel . length ) {
previewContext = previewContext . substring ( 0 , previewContext . lastIndexOf ( '/' ) ) ;
renderPreviewPanelContent ( $previewPanel , data ) ;
const formData = new FormData ( ) ;
}
formData . append ( 'mode' , 'file' ) ;
} catch ( error ) {
formData . append ( 'context' , previewContext ) ;
console . error ( 'Error:' , error ) ;
formData . append ( 'text' , elForm . querySelector < HTMLTextAreaElement > ( '.tab[data-tab="write"] textarea' ) . value ) ;
}
formData . append ( 'file_path' , elTreePath . value ) ;
} ) ;
const response = await POST ( previewUrl , { data : formData } ) ;
}
const data = await response . text ( ) ;
renderPreviewPanelContent ( elPreviewPanel , data ) ;
} ) ;
} }
export function initRepoEditor() { export function initRepoEditor() {
@ -151,8 +144,8 @@ export function initRepoEditor() {
}
}
} ) ;
} ) ;
const $form = $ ( '.repository.editor .edit.form' ) ;
const elForm = document . querySelector < HTMLFormElement > ( '.repository.editor .edit.form' ) ;
initEditPreviewTab ( $f orm) ;
initEditPreviewTab ( elF orm) ;
( async ( ) = > {
( async ( ) = > {
const editor = await createCodeEditor ( editArea , filenameInput ) ;
const editor = await createCodeEditor ( editArea , filenameInput ) ;
@ -160,16 +153,16 @@ export function initRepoEditor() {
// Using events from https://github.com/codedance/jquery.AreYouSure#advanced-usage
// Using events from https://github.com/codedance/jquery.AreYouSure#advanced-usage
// to enable or disable the commit button
// to enable or disable the commit button
const commitButton = document . querySelector < HTMLButtonElement > ( '#commit-button' ) ;
const commitButton = document . querySelector < HTMLButtonElement > ( '#commit-button' ) ;
const $editForm = $ ( '.ui.edit.form' ) ;
const dirtyFileClass = 'dirty-file' ;
const dirtyFileClass = 'dirty-file' ;
// Disabling the button at the start
// Disabling the button at the start
if ( $ ( 'input[name="page_has_posted"]' ) . val ( ) !== 'true' ) {
if ( document . querySelector < HTMLInputElement > ( 'input[name="page_has_posted"]' ) . value !== 'true' ) {
commitButton . disabled = true ;
commitButton . disabled = true ;
}
}
// Registering a custom listener for the file path and the file content
// Registering a custom listener for the file path and the file content
$editForm . areYouSure ( {
// FIXME: it is not quite right here (old bug), it causes double-init, the global areYouSure "dirty" class will also be added
applyAreYouSure ( elForm , {
silent : true ,
silent : true ,
dirtyClass : dirtyFileClass ,
dirtyClass : dirtyFileClass ,
fieldSelector : ':input:not(.commit-form-wrapper :input)' ,
fieldSelector : ':input:not(.commit-form-wrapper :input)' ,
@ -187,15 +180,17 @@ export function initRepoEditor() {
editor . setValue ( value ) ;
editor . setValue ( value ) ;
}
}
commitButton ? . addEventListener ( 'click' , ( e ) = > {
commitButton ? . addEventListener ( 'click' , async ( e ) = > {
// A modal which asks if an empty file should be committed
// A modal which asks if an empty file should be committed
if ( ! editArea . value ) {
if ( ! editArea . value ) {
$ ( '#edit-empty-content-modal' ) . modal ( {
onApprove() {
$ ( '.edit.form' ) . trigger ( 'submit' ) ;
} ,
} ) . modal ( 'show' ) ;
e . preventDefault ( ) ;
e . preventDefault ( ) ;
if ( await confirmModal ( {
header : elForm.getAttribute ( 'data-text-empty-confirm-header' ) ,
content : elForm.getAttribute ( 'data-text-empty-confirm-content' ) ,
} ) ) {
elForm . classList . remove ( 'dirty' ) ;
elForm . submit ( ) ;
}
}
}
} ) ;
} ) ;
} ) ( ) ;
} ) ( ) ;
wxiaoguang
2 months ago
committed by
GitHub