@@ -15,6 +15,7 @@ export default targetable(class extends HTMLElement {
1515 static [ target . static ] = [
1616 'form' ,
1717 'fileDropzone' ,
18+ 'folderDropzone' ,
1819 'fileDropzoneLoading'
1920 ]
2021
@@ -25,12 +26,13 @@ export default targetable(class extends HTMLElement {
2526 window . addEventListener ( 'dragleave' , this . onWindowDragleave )
2627
2728 this . fileDropzone ?. addEventListener ( 'drop' , this . onDropFile )
29+ this . folderDropzone ?. addEventListener ( 'drop' , this . onDropNewFolder )
2830
2931 this . folderCards . forEach ( ( el ) => el . addEventListener ( 'drop' , ( e ) => this . onDropFolder ( e , el ) ) )
3032 this . templateCards . forEach ( ( el ) => el . addEventListener ( 'drop' , this . onDropTemplate ) )
3133 this . templateCards . forEach ( ( el ) => el . addEventListener ( 'dragstart' , this . onTemplateDragStart ) )
3234
33- return [ this . fileDropzone , ...this . folderCards , ...this . templateCards ] . forEach ( ( el ) => {
35+ return [ this . fileDropzone , this . folderDropzone , ...this . folderCards , ...this . templateCards ] . forEach ( ( el ) => {
3436 el ?. addEventListener ( 'dragover' , this . onDragover )
3537 el ?. addEventListener ( 'dragleave' , this . onDragleave )
3638 } )
@@ -46,6 +48,10 @@ export default targetable(class extends HTMLElement {
4648 onTemplateDragStart = ( e ) => {
4749 const id = e . target . href . split ( '/' ) . pop ( )
4850
51+ this . folderCards . forEach ( ( el ) => el . classList . remove ( 'bg-base-200' , 'before:hidden' ) )
52+ this . folderDropzone ?. classList ?. remove ( 'hidden' )
53+ window . flash ?. remove ( )
54+
4955 e . dataTransfer . effectAllowed = 'move'
5056
5157 if ( id ) {
@@ -104,7 +110,7 @@ export default targetable(class extends HTMLElement {
104110 } else {
105111 const formData = new FormData ( )
106112
107- formData . append ( 'name' , el . innerText . trim ( ) )
113+ formData . append ( 'name' , el . dataset . fullName )
108114
109115 fetch ( `/templates/${ templateId } /folder` , {
110116 method : 'PUT' ,
@@ -176,6 +182,24 @@ export default targetable(class extends HTMLElement {
176182 }
177183 }
178184
185+ onDropNewFolder ( e ) {
186+ e . preventDefault ( )
187+
188+ const templateId = e . dataTransfer . getData ( 'template_id' )
189+
190+ const a = document . createElement ( 'a' )
191+
192+ a . href = `/templates/${ templateId } /folder/edit?autocomplete=false`
193+ a . dataset . turboFrame = 'modal'
194+ a . classList . add ( 'hidden' )
195+
196+ document . body . append ( a )
197+
198+ a . click ( )
199+
200+ a . remove ( )
201+ }
202+
179203 onDragleave ( ) {
180204 this . style . backgroundColor = null
181205
@@ -199,6 +223,7 @@ export default targetable(class extends HTMLElement {
199223
200224 this . isDrag = true
201225
226+ window . flash ?. remove ( )
202227 this . fileDropzone ?. classList ?. remove ( 'hidden' )
203228
204229 this . hiddenOnDrag . forEach ( ( el ) => { el . style . display = 'none' } )
@@ -212,6 +237,7 @@ export default targetable(class extends HTMLElement {
212237 this . isDrag = false
213238
214239 this . fileDropzone ?. classList ?. add ( 'hidden' )
240+ this . folderDropzone ?. classList ?. add ( 'hidden' )
215241
216242 this . hiddenOnDrag . forEach ( ( el ) => { el . style . display = null } )
217243
0 commit comments