style body min height 300px box sizing content box padding 0 margin 0 container width 100 border 1px solid blue item border 1px solid gray display flex item hover background color rgba 100 100 100 0 1 item active background color rgba 100 10 10 0 3 item selected background color rgba 10 100 10 0 3 group display inline block width 100px border 1px solid red vertical align top overflow clip white space nowrap number group width 60px title group width 100px status group width 50px words group width 50px type group width 60px content group flex grow 1 input group background color transparent outline none border none group select background color transparent outline none border none group status select width 100 group type select width 100 contenttextarea background color transparent outline none resize none border 0 margin 0 padding 0 font family Times New Roman font size 16px line height 16px padding 1px 0px 0px 0px width 100 height 16px overflow hidden style div id container div script let container document getElementById container let testitem div class item span class group number No span span class group title Title span span class group status Status span span class group words Size span span class group type Type span span class group content textarea class contenttextarea oninput this style height 0px this style height this scrollHeight px Content textarea span div let levels function updateOrder levels let items document getElementsByClassName item items items items forEach el i if i 0 return header let level el getAttribute depth level parseInt level for let n 0 n level 1 n if levels n levels n 0 levels level 1 for let n level 1 n 10 n delete levels n let indent span style min width 15px display inline block span repeat level el children 1 children 0 innerHTML indent let no Object values levels join el children 0 innerHTML no function createItem level title level parseInt level for let n 0 n level 1 n if levels n levels n 0 levels level 1 for let n level 1 n 10 n delete levels n let no Object values levels join let indent span style min width 15px display inline block span repeat level let cont div class item onclick selectitem this depth level span class group number no span span class group title span indent span input type text value title span span class group status select name status option value unknown option option value draft Draft option option value temp Temp option option value work Work option option value final Final option select span span class group words Words span span class group type select name type option value text Text option option value note Note option option value title Title option option value listing Listing option option value figure Figure option option value equation Equation option option value table Table option select span span class group content textarea class contenttextarea oninput this style height 0px this style height this scrollHeight px Type content textarea span div return cont function selectitem item let items document getElementsByClassName item items forEach el el classList remove selected item classList add selected let data items depth 0 title Introduction depth 1 title Motivation depth 2 title Problem depth 2 title Other depth 1 title Tasks depth 0 title Background depth 2 title Timeline depth 2 title Cats function loaddata d levels container innerHTML container innerHTML testitem HEADER let items d items items forEach ii container innerHTML createItem ii depth ii title function savedata let savedata savedata items let items document getElementsByClassName item items items items forEach el i if i 0 return savedata items push depth el getAttribute depth title el children 1 children 1 value return savedata loaddata data let res savedata console log data res loaddata res function savefile let curdata savedata let jsonTXT JSON stringify curdata let a document createElement a let file new Blob jsonTXT type text plain a href URL createObjectURL file a download mygriddata json a click URL revokeObjectURL a href function loadfile let inputdiv document createElement input inputdiv type file inputdiv accept json json inputdiv onchange function const fileList this files let reader new FileReader no arguments reader readAsText this files 0 reader onload function let indata JSON parse reader result loaddata indata inputdiv click function horizontal dir let sel document getElementsByClassName selected if sel length 0 alert no row selected return sel sel 0 let depth parseInt sel getAttribute depth depth dir if depth 0 depth 0 sel setAttribute depth depth updateOrder let res savedata loaddata res function vertical dir let sel document getElementsByClassName selected if sel length 0 alert no row selected return sel sel 0 let selParent sel parentElement if dir 0 sel previousElementSibling if dir 0 selParent children indexOf sel 1 selParent insertBefore sel sel previousElementSibling else if dir 0 sel nextElementSibling selParent insertBefore sel nextElementSibling sel updateOrder let res savedata loaddata res console log ready script button onclick savefile Save button button onclick loadfile Load button button onclick horizontal 1 Left button button onclick horizontal 1 Right button button onclick vertical 1 Up button button onclick vertical 1 Down button br br
option option value listing Listing option option value figure Figure option option value equation Equation option option value table Table option select span span class group content textarea class contenttextarea oninput this style height 0px this style height this scrollHeight px Type content textarea span div return cont function selectitem item let items document getElementsByClassName item items forEach el el classList remove selected item classList add selected let data items depth 0 title Introduction depth 1 title Motivation depth 2 title Problem depth 2 title Other depth 1 title Tasks depth 0 title Background depth 2 title Timeline depth 2 title Cats function loaddata d levels container innerHTML container innerHTML testitem HEADER let items d items items forEach ii container innerHTML createItem ii depth ii title function savedata let savedata savedata items let items document getElementsByClassName item items items items forEach el i if i 0 return savedata items push depth el getAttribute depth title el children 1 children 1 value return savedata loaddata data let res savedata console log data res loaddata res function savefile let curdata savedata let jsonTXT JSON stringify curdata let a document createElement a let file new Blob jsonTXT type text plain a href URL createObjectURL file a download mygriddata json a click URL revokeObjectURL a href function loadfile let inputdiv document createElement input inputdiv type file inputdiv accept json json inputdiv onchange function const fileList this files let reader new FileReader no arguments reader readAsText this files 0 reader onload function let indata JSON parse reader result loaddata indata inputdiv click function horizontal dir let sel document getElementsByClassName selected if sel length 0 alert no row selected return sel sel 0 let depth parseInt sel getAttribute depth depth dir if depth 0 depth 0 sel setAttribute depth depth updateOrder let res savedata loaddata res function vertical dir let sel document getElementsByClassName selected if sel length 0 alert no row selected return sel sel 0 let selParent sel parentElement if dir 0 sel previousElementSibling if dir 0 selParent children indexOf sel 1 selParent insertBefore sel sel previousElementSibling else if dir 0 sel nextElementSibling selParent insertBefore sel nextElementSibling sel updateOrder let res savedata loaddata res console log ready script button onclick savefile Save button button onclick loadfile Load button button onclick horizontal 1 Left button button onclick horizontal 1 Right button button onclick vertical 1 Up button button onclick vertical 1 Down button br br