@@ -75,23 +75,62 @@ export function initRepoEditor() {
7575 }
7676 filenameInput . addEventListener ( 'input' , function ( ) {
7777 const parts = filenameInput . value . split ( '/' ) ;
78+ const links = Array . from ( document . querySelectorAll ( '.breadcrumb span.section' ) ) ;
79+ const dividers = Array . from ( document . querySelectorAll ( '.breadcrumb .breadcrumb-divider' ) ) ;
80+ let warningDiv = document . querySelector ( '.ui.warning.message.flash-message.flash-warning.space-related' ) ;
81+ let containSpace = false ;
7882 if ( parts . length > 1 ) {
7983 for ( let i = 0 ; i < parts . length ; ++ i ) {
8084 const value = parts [ i ] ;
85+ const trimValue = value . trim ( ) ;
86+ if ( trimValue === '..' ) {
87+ // remove previous tree path
88+ if ( links . length > 0 ) {
89+ const link = links . pop ( ) ;
90+ const divider = dividers . pop ( ) ;
91+ link . remove ( ) ;
92+ divider . remove ( ) ;
93+ }
94+ continue ;
95+ }
8196 if ( i < parts . length - 1 ) {
82- if ( value . length ) {
83- filenameInput . before ( createElementFromHTML (
97+ if ( trimValue . length ) {
98+ const linkElement = createElementFromHTML (
8499 `<span class="section"><a href="#">${ htmlEscape ( value ) } </a></span>` ,
85- ) ) ;
86- filenameInput . before ( createElementFromHTML (
100+ ) ;
101+ const dividerElement = createElementFromHTML (
87102 `<div class="breadcrumb-divider">/</div>` ,
88- ) ) ;
103+ ) ;
104+ links . push ( linkElement ) ;
105+ dividers . push ( dividerElement ) ;
106+ filenameInput . before ( linkElement ) ;
107+ filenameInput . before ( dividerElement ) ;
89108 }
90109 } else {
91110 filenameInput . value = value ;
92111 }
93112 this . setSelectionRange ( 0 , 0 ) ;
113+ containSpace |= ( trimValue !== value && trimValue !== '' ) ;
114+ }
115+ }
116+ containSpace |= Array . from ( links ) . some ( ( link ) => {
117+ const value = link . querySelector ( 'a' ) . textContent ;
118+ return value . trim ( ) !== value ;
119+ } ) ;
120+ containSpace |= parts [ parts . length - 1 ] . trim ( ) !== parts [ parts . length - 1 ] ;
121+ if ( containSpace ) {
122+ if ( ! warningDiv ) {
123+ warningDiv = document . createElement ( 'div' ) ;
124+ warningDiv . classList . add ( 'ui' , 'warning' , 'message' , 'flash-message' , 'flash-warning' , 'space-related' ) ;
125+ warningDiv . innerHTML = '<p>File path contains leading or trailing whitespace.</p>' ;
126+ // Add display 'block' because display is set to 'none' in formantic\build\semantic.css
127+ warningDiv . style . display = 'block' ;
128+ const inputContainer = document . querySelector ( '.repo-editor-header' ) ;
129+ inputContainer . insertAdjacentElement ( 'beforebegin' , warningDiv ) ;
94130 }
131+ showElem ( warningDiv ) ;
132+ } else if ( warningDiv ) {
133+ hideElem ( warningDiv ) ;
95134 }
96135 joinTreePath ( ) ;
97136 } ) ;
0 commit comments