file_explorer.html 238 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187
  1. <html>
  2. <head>
  3. <title>File Manager</title>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
  6. <link rel="stylesheet" href="../../script/tocas/tocas.css">
  7. <link rel="icon" type="image/png" href="./img/small_icon.png">
  8. <link rel="manifest" crossorigin="use-credentials" href="manifest.json">
  9. <script type="text/javascript" src="../../script/tocas/tocas.js"></script>
  10. <script type="text/javascript" src="../../script/jquery.min.js"></script>
  11. <script type="text/javascript" src="../../script/ao_module.js"></script>
  12. <script type="text/javascript" src="../../script/forge-sha256.min.js"></script>
  13. <script type="text/javascript" src="../../script/qrcode.min.js"></script>
  14. <script type="text/javascript" src="../../script/applocale.js"></script>
  15. <script>
  16. window.mobilecheck = function() {
  17. var check = false;
  18. (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  19. return check;
  20. };
  21. </script>
  22. <style>
  23. body{
  24. color:black;
  25. height:100%;
  26. }
  27. @font-face {
  28. font-family: 'TaipeiSansTCBeta-Regular';
  29. src: url('../../script/font/TaipeiSansTCBeta-Regular.ttf');
  30. }
  31. h1, h2, h3, p, span, div,span { font-family: 'TaipeiSansTCBeta-Regular',"Lucida Console", "Courier New", monospace;}
  32. html{
  33. height:100%;
  34. overflow:hidden;
  35. }
  36. body.whiteTheme{
  37. background-color:rgb(250, 250, 250);
  38. }
  39. .darkTheme{
  40. background-color:#242330 !important;
  41. color:white;
  42. }
  43. .whiteTheme{
  44. color:#0d0d0d
  45. }
  46. .navibar{
  47. position:fixed;
  48. width:100%;
  49. padding-left:12px;
  50. padding-right:12px;
  51. padding-top:6px;
  52. padding-bottom:3px;
  53. z-index: 99;
  54. }
  55. .navibar.darkTheme{
  56. background-color:#17161f !important;
  57. border-bottom:2px solid #34b7eb;
  58. }
  59. .navibar.whiteTheme{
  60. /*box-shadow: 0 2px 4px 2px rgb(224, 224, 224);*/
  61. background-color:#fcfcfc;
  62. border-bottom:2px solid #34b7eb;
  63. }
  64. .whiteTheme .button.standard{
  65. box-shadow: 0 1px 1px 0px rgb(190, 190, 190);
  66. border: 0px;
  67. }
  68. .whiteTheme .button.standard:hover{
  69. background-color:#82c2f0 !important;
  70. color:white !important;
  71. }
  72. .ts.button{
  73. margin-bottom:2px;
  74. }
  75. .ts.button.darkTheme{
  76. background-color:#17161f !important;
  77. border: 1px solid #262533;
  78. color:white;
  79. }
  80. .ts.button.active.darkTheme{
  81. background-color:#312f42 !important;
  82. border: 1px solid #262533;
  83. color:white;
  84. }
  85. .ts.button.darkTheme:hover{
  86. background-color:#312f42 !important;
  87. color:white !important;
  88. }
  89. .rightPad{
  90. margin-right:37px;
  91. }
  92. .addressBar{
  93. width:100%;
  94. padding:3px;
  95. padding-left: 0px;
  96. padding-right: 0px;
  97. min-height: 35px;
  98. padding-top:6px;
  99. }
  100. .breadcrumb.darkTheme{
  101. background-color:transparent;
  102. }
  103. .section.darkTheme{
  104. color:white !important;
  105. background-color:transparent;
  106. }
  107. .selectable{
  108. cursor:pointer;
  109. }
  110. .rightAlign{
  111. position:absolute;
  112. right:0px;
  113. top:3px;
  114. }
  115. .addressText{
  116. padding:5px;
  117. border-radius: 3px;
  118. }
  119. .addressText.darkTheme{
  120. border: 1px solid #262533;
  121. }
  122. .addressText.whiteTheme{
  123. border: 1px solid #cfcfcf;
  124. }
  125. .divider.whiteTheme{
  126. color:#262533 !important;
  127. background-color:transparent;
  128. }
  129. .divider.darkTheme{
  130. background-color:transparent;
  131. color: white !important;
  132. }
  133. #directorySidebar{
  134. padding:12px;
  135. overflow-y:auto;
  136. padding-bottom:20px;
  137. }
  138. #directorySidebar.darkTheme{
  139. border-right:2px solid rgb(25, 24, 31);
  140. color:white;
  141. position:absolute;
  142. }
  143. #directorySidebar.whiteTheme{
  144. border-right:2px solid rgba(219, 226, 241, 0.7);
  145. background-color:#f5f5f5;
  146. color:rgb(44, 44, 44);
  147. position:absolute;
  148. }
  149. #folderView{
  150. position:absolute;
  151. padding-left:2em;
  152. padding-right:2em;
  153. padding-top:2em;
  154. overflow-y:auto;
  155. }
  156. #folderView.whiteTheme{
  157. background-color:white;
  158. }
  159. .item.darkTheme{
  160. color:white;
  161. }
  162. .rightmargin.icon{
  163. margin-right:8px !important;
  164. }
  165. .dir{
  166. cursor:pointer;
  167. }
  168. .dir:hover{
  169. color:#d1d1d1 !important;
  170. }
  171. .dir.item.whiteTheme{
  172. color:rgb(78, 78, 78);
  173. }
  174. .device{
  175. cursor:pointer;
  176. }
  177. .device:hover{
  178. color:#d1d1d1;
  179. }
  180. .accordion.darkTheme{
  181. color:white !important;
  182. }
  183. .accordion.whiteTheme{
  184. background-color:transparent !important;
  185. }
  186. .fileObject{
  187. display:block !important;
  188. cursor:pointer;
  189. overflow-wrap: break-word !important;
  190. -webkit-touch-callout: none;
  191. -webkit-user-select: none;
  192. -khtml-user-select: none;
  193. -moz-user-select: none;
  194. -ms-user-select: none;
  195. user-select: none;
  196. }
  197. .fileObject.darkTheme{
  198. border:1px solid rgb(72, 69, 88) !important;
  199. }
  200. .segmented.list.darkTheme{
  201. border:1px solid rgb(8, 8, 10) !important;
  202. box-shadow: 0 0 0 0;
  203. border-radius: 0px;
  204. }
  205. .fileObject.darkTheme:hover{
  206. background-color:#17161f !important;
  207. }
  208. .fileObject.darkTheme:hover span{
  209. background-color:#17161f !important;
  210. }
  211. .fileObject.whiteTheme:hover{
  212. background-color:#f2f2f2 !important;
  213. }
  214. .fileObject.darkTheme.selected{
  215. background-color:#100f16 !important;
  216. }
  217. .fileObject.darkTheme.selected span{
  218. background-color:#100f16 !important;
  219. }
  220. .fileObject.whiteTheme.selected{
  221. background-color:#d2f2f7 !important;
  222. color:black !important;
  223. }
  224. .mobilePathDisplayWrapper{
  225. width:100%;
  226. margin-bottom:5px;
  227. }
  228. .ts.card.darkTheme{
  229. border:1px solid rgb(72, 69, 88) !important;
  230. box-shadow: 0 0 0 0 transparent;
  231. }
  232. .darkTheme.header{
  233. color:white !important;
  234. background-color:transparent !important;
  235. }
  236. .darkTheme.meta{
  237. color:rgba(255, 255, 255, 0.836) !important;
  238. background-color:transparent !important;
  239. }
  240. .darkTheme.description{
  241. color:white !important;
  242. background-color:transparent !important;
  243. }
  244. .whiteTheme.header{
  245. background-color:transparent;
  246. }
  247. .whiteTheme.meta{
  248. background-color:transparent;
  249. }
  250. .whiteTheme.description{
  251. background-color:transparent;
  252. }
  253. #folderList{
  254. margin-bottom:16px;
  255. }
  256. .msgbox{
  257. padding:3px;
  258. }
  259. .closeMsgButton{
  260. position:absolute;
  261. top:8px;
  262. right:12px;
  263. }
  264. .closeMsgButton{
  265. cursor:pointer;
  266. }
  267. .popup{
  268. position:fixed;
  269. top:30px;
  270. z-index:110;
  271. left:34%;
  272. right:34%;
  273. bottom:30px;
  274. padding-bottom:24px;
  275. border: 0px solid transparent !important;
  276. }
  277. .popup.wide{
  278. left:24%;
  279. right:24%;
  280. }
  281. .popup.darkTheme{
  282. -webkit-box-shadow: 3px 4px 5px 0px rgb(35, 33, 46) ;
  283. -moz-box-shadow: 3px 4px 5px 0px rgb(35, 33, 46);
  284. box-shadow: 3px 4px 5px 0px rgb(35, 33, 46) ;
  285. border: 1px solid rgb(22, 21, 29);
  286. }
  287. .popup.whiteTheme{
  288. -webkit-box-shadow: 3px 4px 5px 0px rgba(138,138,138,1);
  289. -moz-box-shadow: 3px 4px 5px 0px rgba(138,138,138,1);
  290. box-shadow: 3px 4px 5px 0px rgba(138,138,138,1);
  291. border: 1px solid rgb(226, 226, 226);
  292. background-color:white;
  293. }
  294. @media only screen and (max-width: 1920px) {
  295. .popup{
  296. left:35em;
  297. right:35em;
  298. }
  299. .popup.wide{
  300. left:20em;
  301. right:20em;
  302. }
  303. }
  304. @media only screen and (max-width: 1500px) {
  305. .popup{
  306. left:20em;
  307. right:20em;
  308. }
  309. .popup.wide{
  310. left:14em;
  311. right:14em;
  312. }
  313. }
  314. @media only screen and (max-width: 1200px) {
  315. .popup{
  316. left:14em;
  317. right:14em;
  318. }
  319. .popup.wide{
  320. left:5em;
  321. right:5em;
  322. }
  323. }
  324. @media only screen and (max-width: 800px) {
  325. .popup{
  326. left:5em;
  327. right:5em;
  328. }
  329. .popup.wide{
  330. left:2em;
  331. right:2em;
  332. }
  333. }
  334. @media only screen and (max-width: 600px) {
  335. .popup{
  336. position:fixed;
  337. top:5%;
  338. z-index:100;
  339. left:1em;
  340. right:1em;
  341. }
  342. }
  343. .popupheader{
  344. width:100%;
  345. padding:3px;
  346. padding-left:12px;
  347. border-bottom:2px solid #34b7eb;
  348. background-color: #171719;
  349. color: white;
  350. height:29px;
  351. }
  352. .popupcontent{
  353. height: calc(100% - 29px);
  354. overflow:auto;
  355. }
  356. .popupcloser{
  357. position:absolute;
  358. top:5px;
  359. right:0px;
  360. font-size: 120%;
  361. cursor:pointer;
  362. }
  363. .popupbuttons{
  364. cursor:pointer;
  365. padding:5px;
  366. padding-left:12px;
  367. margin-bottom:4px;
  368. border: 1px solid #dedede;
  369. border-radius: 4px;
  370. }
  371. .popupbuttons.primary.whiteTheme{
  372. background-color:#51aded;
  373. box-shadow: 0 2px 1px 0px #34a2ee !important;
  374. border: 1px solid transparent;
  375. color:white;
  376. }
  377. .popupbuttons.negative{
  378. background-color:#ed5151;
  379. box-shadow: 0 2px 1px 0px #ee3434 !important;
  380. border: 1px solid transparent;
  381. color:white;
  382. }
  383. .popupbuttons.primary.darkTheme{
  384. background-color:#413f57 !important;
  385. box-shadow: 0 2px 1px 0px #3c3b50 !important;
  386. border: 1px solid transparent;
  387. color:white;
  388. }
  389. .popupbuttons.negative.darkTheme{
  390. background-color:#ed5151 !important;
  391. }
  392. .popupbuttons.disabled{
  393. opacity: 0.4;
  394. pointer-events: none;
  395. }
  396. .popupbuttons.primary.disabled{
  397. opacity: 0.4;
  398. pointer-events: none;
  399. }
  400. .whiteTheme.allowHover:hover{
  401. background-color:rgba(238, 238, 238, 0.932);
  402. }
  403. .whiteTheme.allowHover.primary:hover{
  404. background-color:#76c0f5;
  405. }
  406. .allowHover.negative:hover{
  407. background-color:#f57676;
  408. }
  409. .allowHover.negative.darkTheme:hover{
  410. background-color:#f57676 !important;
  411. }
  412. .darkTheme.allowHover:hover{
  413. background-color:#111017 !important;
  414. }
  415. .ts.list.darkTheme{
  416. background-color:#464457 !important;
  417. }
  418. input.darkTheme{
  419. color:white !important;
  420. }
  421. .ts.segmented.list.darkTheme .item{
  422. color:white !important;
  423. }
  424. .newFileFormat{
  425. cursor:pointer;
  426. }
  427. .popupWrapper{
  428. position:fixed;
  429. top:0px;
  430. left:0px;
  431. width:100%;
  432. height:100%;
  433. z-index:99;
  434. background-color:rgba(27,27,27,0.5);
  435. display:none;
  436. }
  437. @supports (backdrop-filter: none) {
  438. .popupWrapper {
  439. backdrop-filter: blur(5px);
  440. }
  441. }
  442. .breadcrumb.whiteTheme{
  443. background-color:white;
  444. }
  445. #openWithModuleList{
  446. height:250px;
  447. overflow-y:auto;
  448. }
  449. #openWith .segment.darkTheme{
  450. color:white !important;
  451. }
  452. #openWithModuleList .item{
  453. padding:8px;
  454. padding-left:22px;
  455. border-radius: 2px;
  456. display: flex;
  457. flex-wrap: wrap;
  458. }
  459. #openWithModuleList.darkTheme .item.selected{
  460. background-color:#100f16 !important;
  461. }
  462. #openWithModuleList.whiteTheme .item.selected{
  463. background-color:#51aded !important;
  464. color:white;
  465. }
  466. #openWithModuleList.darkTheme .item.selectable:hover{
  467. background-color:rgba(250,250,250,0.05);
  468. }
  469. #openWithModuleList.whiteTheme .item.selectable:hover{
  470. background-color:rgba(35,35,35,0.14);
  471. }
  472. .contextmenu.darkTheme .item{
  473. color:white !important;
  474. }
  475. .contextmenu .item{
  476. font-size:90% !important;
  477. }
  478. #uploadTab{
  479. position:fixed;
  480. right:0px;
  481. bottom: 0px;
  482. width:300px;
  483. margin-bottom:0px !important;
  484. padding:0px !important;
  485. }
  486. #uploadTab.darkTheme{
  487. color:white;
  488. background-color:rgba(35,35,35,0.14);
  489. border: 1px solid #17161f !important;
  490. box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
  491. }
  492. .statusBar{
  493. height:32px;
  494. background-color:#f5f5f5;
  495. padding:8px;
  496. }
  497. .statusBar.whiteTheme{
  498. color:rgb(78, 78, 78);
  499. }
  500. .statusBar.darkTheme{
  501. background-color:#181720 !important;
  502. }
  503. .hideUploadButton{
  504. float: right;
  505. cursor:pointer;
  506. }
  507. .uploadList{
  508. margin:8px;
  509. padding-bottom:3px;
  510. margin-bottom:0px;
  511. max-height: 250px;
  512. overflow-y:auto;
  513. }
  514. .uploadTask{
  515. margin-top:6px;
  516. }
  517. .uploadTaskRemoveIcon{
  518. position:absolute;
  519. top:0px;
  520. right:0px;
  521. cursor:pointer;
  522. }
  523. .clearallButton{
  524. padding:8px;
  525. cursor:pointer;
  526. }
  527. .normal.object.whiteTheme{
  528. color:#303030;
  529. }
  530. .normal.object.darkTheme{
  531. color:white;
  532. }
  533. .sub.header.darkTheme{
  534. color:rgb(190, 190, 190) !important;
  535. }
  536. .hex.foldername{
  537. color:#2b9447 !important;
  538. }
  539. .um.filename{
  540. color: #69aaff !important;
  541. }
  542. .dropdown.inverted:not(.icon){
  543. background-color: #17161f !important;
  544. }
  545. .sharebtn{
  546. cursor: pointer;
  547. }
  548. .sharebtn.darkTheme {
  549. color: white !important;
  550. background-color: transparent !important;
  551. }
  552. .sharebtn.whiteTheme:hover{
  553. opacity: 0.5;
  554. }
  555. .sharebtn.darkTheme:hover{
  556. opacity: 0.5;
  557. }
  558. i.blue{
  559. color: #345eeb;
  560. }
  561. .fileObject.whiteTheme.hotSearchHighlight{
  562. background-color: #d2f2f7 !important;
  563. }
  564. .fileObject.darkTheme.hotSearchHighlight span{
  565. background-color: #d2f2f7 !important;
  566. }
  567. .fileObject.darkTheme.hotSearchHighlight{
  568. background-color: #100f16 !important;
  569. }
  570. .fileObject.darkTheme.hotSearchHighlight span{
  571. background-color: #100f16 !important;
  572. }
  573. </style>
  574. </head>
  575. <body class="whiteTheme">
  576. <div id="navibar" class="navibar whiteTheme">
  577. <!-- Directoy navigations -->
  578. <button id="backbtn" class="ts icon tiny button standard whiteTheme" onclick="previosPath();" title="Back"><i class="left arrow icon"></i></button>
  579. <button id="ppbtn" class="ts icon tiny button standard whiteTheme rightPad" onclick="parentDir();" title="Parent Folder"><i class="up arrow icon"></i></button>
  580. <!-- File Read Operations -->
  581. <button class="ts icon tiny button standard whiteTheme" title="Open" onclick="openViaButton();"><i class="folder open icon"></i></button>
  582. <button class="ts icon tiny button standard whiteTheme" title="Open with" onclick="openWith();"><i class="external icon"></i></button>
  583. <button class="ts icon tiny button standard whiteTheme singleObjectOnly" title="Share File" onclick="shareFile();"><i class="share alternate icon"></i></button>
  584. <button class="ts labeled icon tiny button standard whiteTheme" style="width:154px;" title="Download" onclick="downloadFile();">
  585. <i class="download icon"></i>
  586. <span locale="menu/button/download">Download</span>
  587. </button>
  588. <!-- File Edit Operations -->
  589. <button class="ts icon tiny button standard whiteTheme" title="Copy" onclick="copy();"><i class="copy icon"></i></button>
  590. <button class="ts icon tiny button standard whiteTheme" title="Paste" onclick="paste();"><i class="paste icon"></i></button>
  591. <button class="ts icon tiny button standard whiteTheme" title="Cut" onclick="cut();"><i class="cut icon"></i></button>
  592. <button class="ts icon tiny button standard whiteTheme" title="New File" onclick="newfile();"><i class="file outline icon"></i></button>
  593. <button class="ts icon tiny button standard whiteTheme" title="New Folder" onclick="newFolder();"><i class="folder outline icon"></i></button>
  594. <button class="ts icon tiny button standard whiteTheme" title="Upload" onclick="upload();"><i class="upload icon"></i></button>
  595. <button class="ts icon tiny button standard whiteTheme" title="Create Zip" onclick="zipFile();"><i class="zip file icon"></i></button>
  596. <button class="ts icon tiny button standard whiteTheme" title="Rename" onclick="rename();"><i class="i cursor icon"></i></button>
  597. <button class="ts icon tiny negative button" title="Delete" onclick="deleteFile();"><i class="trash outline icon"></i></button>
  598. <button class="ts icon tiny button standard whiteTheme" title="Refresh" onclick="refreshList();"><i class="refresh icon"></i></button>
  599. <button class="ts icon tiny button standard whiteTheme" title="Home" onclick="openHomeDir();"><i class="home icon"></i></button>
  600. <button class="ts icon tiny button standard whiteTheme" title="File Info" onclick="showFileProperties();"><i class="notice icon"></i></button>
  601. <div class="addressBar">
  602. <button class="ts icon tiny button standard whiteTheme" onclick="toggleSidebar();" title="Toggle Folder List"><i class="content icon"></i></button>
  603. <button class="ts icon tiny button inverted" title="Dark Theme" onclick="toggleDarkTheme();"><i class="moon icon" id="darkthemebtn"></i></button>
  604. <button class="ts tiny icon button standard whiteTheme" title="Edit Path" onclick="showEditCurrentPathInput(event)"><i class="ui edit icon"></i></button>
  605. <div id="pathDisplayField" class="ts breadcrumb whiteTheme addressText pathDisplay desktopOnly" ondblclick="showEditCurrentPathInput(event);">
  606. <div class="section whiteTheme selectable"><i class="folder icon"></i> user</div>
  607. <div class="divider whiteTheme">:/</div>
  608. <div class="section whiteTheme selectable">Desktop</div>
  609. </div>
  610. <div id="pathInputField" class="ts action mini input whiteTheme" style="display:none;">
  611. <input type="text" style="min-width: 200px;" class="whiteTheme" placeholder="Type a path and press enter" onkeydown="handleOpenPathKeydown(event);">
  612. <button class="ts icon button" title="Open" onclick="openEnteredPath(this);">
  613. <i class="checkmark icon"></i>
  614. </button>
  615. </div>
  616. <div class="rightAlign">
  617. <select id="sortingMethodSelector" title="Sorting Method" class="ts basic borderless mini dropdown" onchange="updateSortingMethods();" autocomplete="off">
  618. <option value="default" locale="menu/sort/asc">Ascending</option>
  619. <option value="reverse" locale="menu/sort/desc">Descending</option>
  620. <option value="smallToLarge" locale="menu/sort/small">Smallest</option>
  621. <option value="largeToSmall" locale="menu/sort/large"> Largest</option>
  622. <option value="mostRecent" locale="menu/sort/mostrecent">Most Recent</option>
  623. <option value="leastRecent" locale="menu/sort/leastrecent">Least Recent</option>
  624. </select>
  625. <button id="searhbtn" class="ts icon tiny button standard whiteTheme" title="Search" onclick="toggleSearch();"><i class="search icon"></i></button>
  626. <button class="ts icon tiny button standard whiteTheme videmode" mode="grid" title="Block View" onclick="changeViewMode(this);"><i class="block layout icon"></i></button>
  627. <button class="ts icon tiny button standard whiteTheme videmode" mode="list" title="List View" onclick="changeViewMode(this);"><i class="align justify icon"></i></button>
  628. </div>
  629. </div>
  630. <div class="mobilePathDisplayWrapper">
  631. <div id="mobilePathDisplay" style="width:100%;" class="ts pathDisplay breadcrumb whiteTheme addressText mobileOnly">
  632. <div class="section whiteTheme selectable"><i class="folder icon"></i> user</div>
  633. <div class="divider whiteTheme">:/</div>
  634. <div class="section whiteTheme selectable">Desktop</div>
  635. </div>
  636. </div>
  637. <div class="searchbar" style="z-index:999; display:none;">
  638. <div style="width: 80%; display:inline-block; margin-top:-4px;">
  639. <div class="ts mini fluid input">
  640. <input autocomplete="off" id="searchInput" type="text" class="whiteTheme" placeholder="File Search (Start wildcard search with / , e.g. /*.mp3)" onkeypress="handleSearchBarPress(event);">
  641. </div>
  642. </div>
  643. <button class="ts icon tiny button standard whiteTheme" title="Case Sensitive" onclick="toggleCaseSensitive(this);">Aa</button>
  644. <button class="ts icon tiny button standard whiteTheme" title="Search" onclick="handleSearch();"><i class="search icon"></i></button>
  645. <button class="ts icon tiny button standard whiteTheme" title="Clear Search" onclick="hideSearchBar();"><i class="remove icon"></i></button>
  646. </div>
  647. <div class="msgbox" style="z-index:999; display:none;">
  648. <i class="checkmark icon"></i> <span>No Message</span>
  649. <div class="closeMsgButton" onclick="$(this).parent().slideUp('fast');"><i class="remove icon"></i></div>
  650. </div>
  651. </div>
  652. <div id="mainWindow">
  653. <div id="directorySidebar" class="whiteTheme">
  654. <div class="ts list">
  655. <details class="ts accordion fluid whiteTheme" open>
  656. <summary>
  657. <i class="dropdown icon"></i> <span locale="sidebar/vroot/user">User</span>
  658. </summary>
  659. <div id="userroot" class="ts list" style="padding-top:0px !important;">
  660. <div class="dir item whiteTheme"><i class="loading circle notched rightmargin icon"></i> <span locale="message/initiating">Initiating</span></div>
  661. </div>
  662. </details>
  663. <details class="ts accordion fluid whiteTheme" open>
  664. <summary>
  665. <i class="dropdown icon"></i> <span locale="sidebar/vroot/fsh">Storage</span>
  666. </summary>
  667. <div id="storageroot" class="ts list" style="padding-top:0px !important;">
  668. <div class="dir item whiteTheme"><i class="loading circle notched rightmargin icon"></i> <span locale="message/initiating">Initiating</span></div>
  669. </div>
  670. </details>
  671. <!--
  672. <details class="ts accordion fluid whiteTheme" open>
  673. <summary>
  674. <i class="caret down icon"></i>Disks
  675. </summary>
  676. <div id="deviceList" class="ts list" style="padding-top:0px !important;">
  677. <div class="dir item whiteTheme"><i class="loading circle notched rightmargin icon"></i> Initiating</div>
  678. </div>
  679. </details>
  680. -->
  681. <!-- >
  682. <div class="item fluid whiteTheme">
  683. <i class="world icon"></i>Network
  684. </div>
  685. -->
  686. <br>
  687. </div>
  688. </div>
  689. <div id="folderView" class="whiteTheme" ondrop="drop(event)" ondragover="allowDrop(event)">
  690. <div id="folderList" class="ts segmented fluid list whiteTheme">
  691. </div>
  692. <div id="fileList" class="ts segmented fluid list whiteTheme">
  693. </div>
  694. <br>
  695. </div>
  696. </div>
  697. <!-- Other popup windows -->
  698. <div class="popupWrapper"></div>
  699. <!-- Overwrite Selection Box-->
  700. <div id="overwriteModeSelection" class="popup whiteTheme" style="display:none;">
  701. <div class="popupheader whiteTheme">
  702. <i class="paste icon"></i> <span locale="opr/overwrite/title">Replace, Keep or Skip Files</span>
  703. <div class="popupcloser" onclick="hideAllPopupWindows();">
  704. <i class="remove icon"></i>
  705. </div>
  706. </div>
  707. <div class="popupcontent" style="padding:12px;">
  708. <small style="font-size:80%;"><span locale="opr/overwrite/copying">Copying</span> <span class="owm-fc"></span> <span locale="opr/overwrite/files">files from</span> <span class="owm-srcdir"></span> <span locale="opr/overwrite/to">to</span> <span class="owm-destdir"></span></small>
  709. <p><span locale="opr/overwrite/dest">The destination has </span><span class="owm-fc"></span> <span locale="opr/overwrite/samename">files with the same names.</span></p>
  710. <div class="popupbuttons whiteTheme allowHover primary" onclick="changeOverwriteRule(0,true);">
  711. <i class="checkmark icon"></i> <span locale="opr/overwrite/replace">Replace the files in the destination</span>
  712. </div>
  713. <div class="popupbuttons whiteTheme allowHover" onclick="changeOverwriteRule(1,true);">
  714. <i class="reply icon"></i> <span locale="opr/overwrite/skip">Skip these files</span>
  715. </div>
  716. <div class="popupbuttons whiteTheme allowHover" onclick="changeOverwriteRule(2,true);">
  717. <i class="undo icon"></i> <span locale="opr/overwrite/keep">Rename and keep the files</span>
  718. </div>
  719. </div>
  720. </div>
  721. <!-- Force delete confirmation box -->
  722. <div id="forceDeleteConfirmBox" class="popup whiteTheme" style="display:none;">
  723. <div class="popupheader whiteTheme">
  724. <i class="trash icon"></i> <span locale="opr/per-remove/title">Permanently Remove Files</span>
  725. <div class="popupcloser" onclick="hideAllPopupWindows();">
  726. <i class="remove icon"></i>
  727. </div>
  728. </div>
  729. <div class="popupcontent" style="padding:12px;">
  730. <p locale="opr/per-remove/questions">Are you sure you want to remove these files <u>permanently?</u><br>This action is <u>irreversible</u>.</p>
  731. <div class="ts list whiteTheme deleteFilelist" style="max-height:350px;overflow-y:auto; ">
  732. </div>
  733. <div class="popupbuttons whiteTheme allowHover" style="background-color: #eb4034 !important;" onclick="forceDelete(true);";>
  734. <i class="trash icon"></i> <span locale="opr/per-remove/confirm">Confirm</span>
  735. </div>
  736. <div class="popupbuttons whiteTheme allowHover" onclick="cancelForceDelete();hideAllPopupWindows();">
  737. <i class="remove icon"></i> <span locale="opr/per-remove/cancel">Cancel</span>
  738. </div>
  739. </div>
  740. </div>
  741. <!-- Delete confirm box -->
  742. <div id="deleteConfirmBox" class="popup whiteTheme" style="display:none;">
  743. <div class="popupheader whiteTheme">
  744. <i class="recycle icon"></i> <span locale="opr/remove/title">Move files to Trash Bin</span>
  745. <div class="popupcloser" onclick="hideAllPopupWindows();">
  746. <i class="remove icon"></i>
  747. </div>
  748. </div>
  749. <div class="popupcontent" style="padding:12px;">
  750. <p locale="opr/remove/question">Are you sure you want to move these files to trash bin?</p>
  751. <div class="ts list whiteTheme deleteFilelist" style="max-height:350px;overflow-y:auto; ">
  752. </div>
  753. <div class="popupbuttons whiteTheme allowHover" style="color: #2bbbdf !important;" onclick="deleteFile(true);";>
  754. <i class="recycle icon"></i> <span locale="opr/remove/confirm">Move to Trash</span>
  755. </div>
  756. <div class="popupbuttons whiteTheme allowHover" onclick="cancelDelete();hideAllPopupWindows();">
  757. <i class="remove icon"></i> <span locale="opr/remove/cancel">Cancel</span>
  758. </div>
  759. </div>
  760. </div>
  761. <!-- Rename tool box -->
  762. <div id="renameBox" class="popup whiteTheme" style="display:none;">
  763. <div class="popupheader whiteTheme">
  764. <i class="text cursor icon"></i> <span locale="opr/rename/title">Rename Files</span>
  765. <div class="popupcloser" onclick="hideAllPopupWindows();">
  766. <i class="remove icon"></i>
  767. </div>
  768. </div>
  769. <div class="popupcontent" style="padding:12px;">
  770. <p locale="opr/rename/instruction">Enter the new filename for renaming. </p>
  771. <p class="multifileWarning"><i class="notice icon"></i> Other files will be named as file(#)</p>
  772. <div class="ts left icon small fluid input" style="margin-bottom:12px;">
  773. <input type="text" class="whiteTheme orgfn" placeholder="Original Filename" readonly="true">
  774. <i class="minus square icon" style="color:rgb(122, 176, 247)"></i>
  775. </div>
  776. <div class="ts left icon small fluid input" style="margin-bottom:12px;">
  777. <input type="text" class="whiteTheme newfn" placeholder="New Filename" onkeydown="handleEnterKeyDown(event, function(){confirmRename(true);})">
  778. <i class="add square icon" style="color:rgb(122, 176, 247)"></i>
  779. </div>
  780. <div class="popupbuttons whiteTheme allowHover primary" onclick="confirmRename(true);";>
  781. <i class="checkmark icon"></i> <span locale="opr/rename/ok">OK</span>
  782. </div>
  783. <div class="popupbuttons whiteTheme allowHover" onclick="hideAllPopupWindows();">
  784. <i class="remove icon"></i> <span locale="opr/rename/cancel">Cancel</span>
  785. </div>
  786. </div>
  787. </div>
  788. <!-- New File Dialog-->
  789. <div id="newFile" class="popup whiteTheme" style="display:none;">
  790. <div class="popupheader whiteTheme">
  791. <i class="add icon"></i> <span locale="opr/newfile/title">New File</span>
  792. <div class="popupcloser" onclick="hideAllPopupWindows();">
  793. <i class="remove icon"></i>
  794. </div>
  795. </div>
  796. <div class="popupcontent" style="padding:12px;">
  797. <p locale="opr/newfile/instruction">Select a type of file to be created.</p>
  798. <div class="ts segmented list whiteTheme newfilelist" style="max-height:18em; overflow-y:scroll">
  799. <div class="item newFileFormat" ext="php">No Item</div>
  800. </div>
  801. <p locale="opr/newfile/newempty">Or create an empty file with given filename:</p>
  802. <div class="ts left icon small fluid input" style="margin-bottom:12px;">
  803. <input id="createNewFileName" type="text" class="whiteTheme" placeholder="New Filename" onkeydown="handleEnterKeyDown(event, confirmNewFile);">
  804. <i class="add square icon" style="color:rgb(122, 176, 247)"></i>
  805. </div>
  806. <p class="duplicateWarning" style="color:#CE5F58; display:none;"><i class="caution sign icon"></i> The given filename already exist.</p>
  807. <div class="popupbuttons whiteTheme allowHover primary" onclick="confirmNewFile();";>
  808. <i class="add icon"></i> <span locale="opr/newfile/create">Create</span>
  809. </div>
  810. <div class="popupbuttons whiteTheme allowHover" onclick="hideAllPopupWindows();">
  811. <i class="remove icon"></i> <span locale="opr/newfile/cancel">Cancel</span>
  812. </div>
  813. </div>
  814. </div>
  815. <!-- New Folder Dialog-->
  816. <div id="newFolder" class="popup whiteTheme" style="display:none;">
  817. <div class="popupheader whiteTheme">
  818. <i class="folder icon"></i> <span locale="opr/newfolder/title">New Folder</span>
  819. <div class="popupcloser" onclick="hideAllPopupWindows();">
  820. <i class="remove icon"></i>
  821. </div>
  822. </div>
  823. <div class="popupcontent" style="padding:12px;">
  824. <p locale="opr/newfolder/desc">Enter the new folder name to be created.</p>
  825. <div class="ts left icon small fluid input" style="margin-bottom:12px;">
  826. <input id="createNewFolder" type="text" class="whiteTheme" placeholder="New Folder Name" onkeydown="handleEnterKeyDown(event, function(){newFolder(true);});">
  827. <i class="add square icon" style="color:rgb(122, 176, 247)"></i>
  828. </div>
  829. <p class="duplicateWarning" style="color:#CE5F58; display:none;"><i class="caution sign icon"></i> <span locale="opr/newfolder/alreadyExists">The given folder already exist.</span></p>
  830. <div class="popupbuttons whiteTheme allowHover primary" onclick="newFolder(true);";>
  831. <i class="add icon"></i> <span locale="opr/newfolder/create">Create</span>
  832. </div>
  833. <div class="popupbuttons whiteTheme allowHover" onclick="hideAllPopupWindows();">
  834. <i class="remove icon"></i> <span locale="opr/newfolder/cancel">Cancel</span>
  835. </div>
  836. </div>
  837. </div>
  838. <!-- Share File Dialog-->
  839. <div id="shareFile" class="popup wide whiteTheme" style="display:none;">
  840. <div class="popupheader whiteTheme">
  841. <i class="external icon"></i> <span locale="opr/share/title">Share File</span>
  842. <div class="popupcloser" onclick="hideAllPopupWindows();">
  843. <i class="remove icon"></i>
  844. </div>
  845. </div>
  846. <div class="popupcontent" style="padding:12px;">
  847. <div class="ts stackable grid">
  848. <div class="eight wide column">
  849. <div class="width: 100%; ">
  850. <div style="display: block; margin-left: auto; margin-right: auto;" align="center">
  851. <div id="qrcode" style="border: 10px solid white; background-color: white;"></div>
  852. </div>
  853. <a id="sharelink" href="" target="_blank" style="margin-top:8px; font-size: 120%; padding-left: 20px; padding-right: 20px; word-break: break-all;">Scan this QR Code to copy the share link</a>
  854. </div>
  855. </div>
  856. <div class="eight wide column" style="padding-left: 12px;">
  857. <div class="ts header whiteTheme">
  858. <span locale="opr/share/settings">Share Settings</span>
  859. <div class="sub header whiteTheme" locale="opr/share/setdesc">Change who can see this file</div>
  860. </div>
  861. <div id="shareSettingForm" class="ts form">
  862. <div class="field">
  863. <label><p class="whiteTheme" locale="opr/share/visableoption">Visable options:</p></label>
  864. <div class="ts checkboxes">
  865. <div class="ts radio checkbox">
  866. <input id="anyone" type="radio" class="shareoption" name="shareopt" value="anyone" checked="true">
  867. <label for="anyone">
  868. <div class="ts header">
  869. <div class="content whiteTheme">
  870. <i class="globe icon"></i> <span locale= "opr/share/anyone">Anyone with the link</span>
  871. <div class="sub header whiteTheme" locale="opr/share/anyonedesc">Anyone who has the link can access this file</div>
  872. </div>
  873. </div>
  874. </label>
  875. </div>
  876. <div class="ts radio disabled checkbox">
  877. <input id="signedin" type="radio" class="shareoption" value="signedin" name="shareopt">
  878. <label for="signedin">
  879. <div class="ts header">
  880. <div class="content whiteTheme">
  881. <i class="user circle outline icon"></i> <span locale="opr/share/signedin">Anyone signed in</span>
  882. <div class="sub header whiteTheme" locale="opr/share/signedindesc">Anyone who has signed in can access this file</div>
  883. </div>
  884. </div>
  885. </label>
  886. </div>
  887. <div class="ts radio disabled checkbox">
  888. <input id="samegroup" type="radio" class="shareoption" value="samegroup" name="shareopt">
  889. <label for="samegroup">
  890. <div class="ts header">
  891. <div class="content whiteTheme">
  892. <i class="users icon"></i> <span locale="opr/share/samegroup">Users in the same group</span>
  893. <div class="sub header whiteTheme" locale="opr/share/samegroupdesc">Anyone who is in the same group as you do</div>
  894. </div>
  895. </div>
  896. </label>
  897. </div>
  898. <br>
  899. <button class="ts small button" onclick="updateShareSettings(this)" locale="opr/share/update" style="border: 0px solid transparent;">Update</button>
  900. </div>
  901. </div>
  902. </div>
  903. </div>
  904. </div>
  905. <div class="ts divider"></div>
  906. <div id="sharingRemoveBtn" class="popupbuttons negative whiteTheme allowHover" onclick="removeSharing()">
  907. <i class="remove icon"></i> <span locale="opr/share/remove">Remove Sharing</span>
  908. </div>
  909. <div class="popupbuttons whiteTheme allowHover" onclick="hideShare()">
  910. <i class="checkmark icon"></i> <span locale="opr/share/ok">OK</span>
  911. </div>
  912. </div>
  913. </div>
  914. <!-- Open With Dialog-->
  915. <div id="openWith" class="popup whiteTheme" style="display:none;">
  916. <div class="popupheader whiteTheme">
  917. <i class="external icon"></i> Open File With
  918. <div class="popupcloser" onclick="hideAllPopupWindows();">
  919. <i class="remove icon"></i>
  920. </div>
  921. </div>
  922. <div class="popupcontent" style="padding:12px;">
  923. <p locale="opr/openwith/desc">Select a module from the list below:</p>
  924. <div id="openWithModuleList" class="ts segment whiteTheme" style="padding:0px;">
  925. <div class="item selectable">
  926. <div class="content" style="padding-left:12px;">
  927. <div class="header" locale="opr/openwith/loading">Loading...</div>
  928. </div>
  929. </div>
  930. </div>
  931. <div class="openWithModule popupbuttons whiteTheme allowHover primary" onclick="openWithSelectedModule(this);";>
  932. <i class="external icon"></i> <span locale="opr/openwith/openWithWebApp">Open with Selected Module</span>
  933. </div>
  934. <div class="openWithModule popupbuttons whiteTheme allowHover" onclick="openFileWithModuleInNewTab(this);">
  935. <i class="add icon"></i> <span locale="opr/openwith/openWithWebAppInNewWindow">Open in new tab</span>
  936. </div>
  937. <div class="popupbuttons whiteTheme allowHover vdonly" onclick="openRawFileInFloatWindow(this);">
  938. <i class="window restore outline icon"></i> <span locale="opr/openwith/openInNewWindow">Open File directly in floatWindow</span>
  939. </div>
  940. <div class="popupbuttons whiteTheme allowHover" onclick="hideAllPopupWindows();">
  941. <i class="remove icon"></i> <span locale="opr/openwith/cancel">Cancel</span>
  942. </div>
  943. </div>
  944. </div>
  945. <!-- Context Menu -->
  946. <div id="contextmenu" class="ts small contextmenu visible whiteTheme" style="min-width:250px;">
  947. <div class="item" onclick="openViaButton();">
  948. <i class="folder open icon"></i> <span locale="contextmenu/open">Open</span>
  949. </div>
  950. <div class="item fileonly" onclick="openWith();">
  951. <i class="external icon"></i> <span locale="contextmenu/openWith">Open With</span>
  952. </div>
  953. <div class="item folderonly" onclick="openSelectedFolderInNewWindow();">
  954. <i class="external icon"></i> <span locale="contextmenu/openNewWindow">Open In New Window</span>
  955. </div>
  956. <!-- This is the vroot alternative new windows-->
  957. <div class="item vrootonly" onclick="openSelectedVroot();">
  958. <i class="external icon"></i> <span locale="contextmenu/openNewWindowVroot">Open In New Window</span>
  959. </div>
  960. <div class="item shareonly" onclick="openFileLocation();">
  961. <i class="folder outline icon"></i> <span locale="contextmenu/openFileLocation">Open File Location</span>
  962. </div>
  963. <div class="item singleObjectOnlyHide" onclick="shareFile();">
  964. <i class="share alternate icon"></i> <span locale="contextmenu/Share">Share</span>
  965. </div>
  966. <div class="item mobileonly" onclick="toggleCtrl();">
  967. <i class="mouse pointer icon"></i> <span locale="contextmenu/MuitSelect">Multi-select</span>
  968. </div>
  969. <div class="item" onclick="copy();">
  970. <i class="copy icon"></i> <span locale="contextmenu/copy">Copy</span>
  971. <span class="description">Ctrl + C</span>
  972. </div>
  973. <div class="item allowNoSelection" onclick="paste();">
  974. <i class="paste icon"></i> <span locale="contextmenu/paste">Paste</span>
  975. <span class="description">Ctrl + V</span>
  976. </div>
  977. <div class="item" onclick="cut();">
  978. <i class="cut icon"></i> <span locale="contextmenu/cut">Cut</span>
  979. <span class="description">Ctrl + X</span>
  980. </div>
  981. <div class="divider vroothide noSelectionOnly"></div>
  982. <div class="item noSelectionOnly" onclick="newfile();">
  983. <i class="file outline icon"></i> <span locale="contextmenu/newFile">New File</span>
  984. </div>
  985. <div class="item noSelectionOnly" onclick="newFolder();">
  986. <i class="folder outline icon"></i> <span locale="contextmenu/newFolder">New Folder</span>
  987. </div>
  988. <div class="divider vroothide"></div>
  989. <div class="item noSelectionOnly" onclick="upload();">
  990. <i class="upload icon"></i> <span locale="contextmenu/upload">Upload</span>
  991. </div>
  992. <div class="item" onclick="zipFile();">
  993. <i class="zip file icon"></i> <span locale="contextmenu/zip">Create Zip</span>
  994. </div>
  995. <div class="item" onclick="rename();">
  996. <i class="i cursor icon"></i> <span locale="contextmenu/rename">Rename</span>
  997. </div>
  998. <div class="item" onclick="deleteFile();">
  999. <i class="trash icon"></i> <span locale="contextmenu/delete">Delete</span>
  1000. </div>
  1001. <div class="item backuponly" onclick="openBackupManager();">
  1002. <i class="block layout icon"></i> <span locale="contextmenu/backup">Backup & Restore</span>
  1003. </div>
  1004. <div class="divider vroothide"></div>
  1005. <div class="item noSelectionOnly" onclick="refreshList();">
  1006. <i class="refresh icon"></i> <span locale="contextmenu/refresh">Refresh</span>
  1007. </div>
  1008. <div class="item" onclick="downloadFile();">
  1009. <i class="download icon"></i> <span locale="contextmenu/download">Download</span>
  1010. </div>
  1011. <div class="item" onclick="showFileProperties();">
  1012. <i class="notice icon"></i> <span locale="contextmenu/properties">Properties</span>
  1013. </div>
  1014. <!-- This properties shows the currentDirectory properties instead of the selected file properties-->
  1015. <div class="item noSelectionOnly" onclick="showCurrentDirectoryProperties();">
  1016. <i class="notice icon"></i> <span locale="contextmenu/properties">Properties</span>
  1017. </div>
  1018. <!-- This properties show the vroot properties -->
  1019. <!-- This properties shows the currentDirectory properties instead of the selected file properties-->
  1020. <div class="item vrootonly" onclick="showVrootProperties();">
  1021. <i class="notice icon"></i> <span locale="contextmenu/properties">Properties</span>
  1022. </div>
  1023. </div>
  1024. <!-- Upload Progress Bars-->
  1025. <div id="uploadTab" class="ts segment whiteTheme" style="display:none;">
  1026. <div class="statusBar whiteTheme">
  1027. <i class="upload icon"></i><span id="uploadCount">0</span> <span locale="upload/count/uploading">Files</span> / <i class="wait icon"></i> <span id="waitingCount">0</span> <span locale="upload/count/pending">Files</span>
  1028. <div class="hideUploadButton" onclick="toggleUploadList();">
  1029. <i class="caret down icon"></i>
  1030. </div>
  1031. </div>
  1032. <div class="uploadList" id="uploadProgressList">
  1033. </div>
  1034. <br>
  1035. </div>
  1036. <script>
  1037. let directorySidebarWidth = 250; //Width of the sidebar
  1038. let sideBarShown = true; //Indicate if sidebar is shown
  1039. let rootDirs = []; //Storage location for rootDirs
  1040. let currentTheme = "whiteTheme"; //Default theme
  1041. let viewMode = "list"; //Viewmode, support {list, grid, detail}
  1042. let sortMode = "default"; //Sortmode, support {default, reverse, smallToLarge, largeToSmall, mostRecent, leastRecent}
  1043. let currentPath = "user:/"
  1044. let viewHistory = []; //View history
  1045. let enableBetaFilename = false; //Enable beta filename conversion from "inith..." to "normal"
  1046. let currentFilelist = []; //The current file list in the currentPath
  1047. let currentPathHash = ""; //The folder content hash
  1048. let enableAutoRefresh = true; //Enable directory updates on file change
  1049. let filesIconTheme = "default";
  1050. //File operations
  1051. let clipboard = []; //System clipboard
  1052. let cutMode = false; //If set to true, this is cut mode. Else copy mode
  1053. let useLocalstorage = lscheck();
  1054. let overwriteMode = "keep"; //Overwrite mode, support {skip, overwrite, keep}
  1055. let thumbRenderWebSocket = null;
  1056. //Searching related
  1057. let searchCaseSensitive = false;
  1058. let searchMode = false;
  1059. let hotSearchBuffer = "";
  1060. let hotSearchTimer = null;
  1061. let hotSearchOffsetIndex = 0;
  1062. //Keypress listeners
  1063. let ctrlHold = false;
  1064. let shiftHold = false;
  1065. //Upload related
  1066. let uploadingFileCount = 0;
  1067. let maxConcurrentUpload = 4; //Maxmium number of oncurrent upload
  1068. let uploadPendingList = []; //Upload pending queue for mass upoad
  1069. let lowMemoryMode = true; //Upload with low memory mode channel
  1070. let uploadFileChunkSize = 1024 * 512; //512KB, 4MB not working quite well on slow network
  1071. //File Sharing related
  1072. let shareEditingObject = "";
  1073. let shareEditingUUID = "";
  1074. //System Information
  1075. let systemUUID = "";
  1076. let systemIP = "";
  1077. //Browser detection
  1078. let isMobile = window.mobilecheck();
  1079. let isChromium = window.chrome;
  1080. let isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
  1081. let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
  1082. let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
  1083. //Intiiation functions
  1084. $(document).ready(function(){
  1085. if (applocale){
  1086. //Applocale found. Do localization
  1087. applocale.init("../locale/file_explorer.json", function(){
  1088. applocale.translate();
  1089. initRootDirs();
  1090. initSystemInfo();
  1091. initUploadMode();
  1092. });
  1093. }else{
  1094. //Applocale not found. Is this a trim down version of ArozOS?
  1095. applocale = {
  1096. getString: function(key, original){
  1097. return original;
  1098. }
  1099. }
  1100. initRootDirs();
  1101. initSystemInfo();
  1102. initUploadMode();
  1103. }
  1104. if (isMobile){
  1105. //Mobile css adjustment
  1106. sideBarShown = false;
  1107. $("#directorySidebar").hide();
  1108. $("#directorySidebar").css("width",window.innerWidth + "px");
  1109. $("body").css("overflow","hidden");
  1110. directorySidebarWidth = window.innerWidth;
  1111. $("#folderView").css({
  1112. "padding-right":"1em",
  1113. "padding-left":"1em",
  1114. "padding-top":"1em",
  1115. });
  1116. $(".desktopOnly").hide();
  1117. $(".mobileOnly").show();
  1118. //Adjust minor css on mobile devices
  1119. $(".rightPad").css("margin-right", "37px");
  1120. }else{
  1121. $(".mobileOnly").hide();
  1122. $(".desktopOnly").show();
  1123. $(".rightPad").css("margin-right", "37px");
  1124. }
  1125. //Initialize view mode buttons
  1126. updateViewmodeButtons();
  1127. loadListModeFromDB();
  1128. //Initialize system theme
  1129. loadPreference("file_explorer/theme",function(data){
  1130. if (data.error === undefined){
  1131. if (data == "darkTheme"){
  1132. toggleDarkTheme();
  1133. }else{
  1134. //White theme
  1135. }
  1136. }
  1137. });
  1138. if (window.location.hash != ""){
  1139. //Check if the hash is standard open protocol. If yes, translate it
  1140. if (ao_module_loadInputFiles() === null){
  1141. //Window location hash set. List the desire directory
  1142. currentPath = window.location.hash.substring(1,window.location.hash.length);
  1143. if (currentPath.substring(currentPath.length -1) != "/"){
  1144. currentPath = currentPath + "/";
  1145. }
  1146. currentPath = decodeURIComponent(currentPath);
  1147. loadListModeFromDB(function(){
  1148. listDirectory(currentPath);
  1149. });
  1150. }else{
  1151. //This is ao_module load file input. Handle the file opening
  1152. var filelist = ao_module_loadInputFiles();
  1153. if (filelist.length > 0){
  1154. filelist = filelist[0];
  1155. //Check if this is folder or file. Only opendir when it is folder
  1156. //Updates 27-12-2020: Open folder and highlight the file if it is file
  1157. if (filelist.filename.includes(".") == false){
  1158. //Try to open it and overwrite the hash to filesystem hash
  1159. loadListModeFromDB(function(){
  1160. listDirectory(filelist.filepath);
  1161. });
  1162. }else{
  1163. //File. Open its parent folder and highlight the target file if exists
  1164. var parentdir = filelist.filepath.split("/");
  1165. let focusFilename = JSON.parse(JSON.stringify(filelist.filename));
  1166. parentdir.pop();
  1167. parentdir = parentdir.join("/");
  1168. loadListModeFromDB(function(){
  1169. listDirectory(parentdir, function(){
  1170. focusFileObject(focusFilename);
  1171. });
  1172. });
  1173. }
  1174. }
  1175. }
  1176. }else{
  1177. //Initialized directory views
  1178. loadListModeFromDB(function(){
  1179. listDirectory(currentPath);
  1180. });
  1181. }
  1182. //Create a timer to check change in current folder
  1183. setInterval(function(){
  1184. if (enableAutoRefresh == false){
  1185. return;
  1186. }
  1187. getDirHash(function(hash){
  1188. if (hash.error !== undefined){
  1189. //Something went wrong. Ignore this request
  1190. console.log(hash.error)
  1191. }else{
  1192. //Check if the hash match with the last hash.
  1193. if (hash != currentPathHash){
  1194. //console.log(currentPathHash, hash);
  1195. refreshList();
  1196. currentPathHash = hash;
  1197. if (currentPath == "user:/"){
  1198. //Reload the User root folder list
  1199. initRootDirs();
  1200. }
  1201. }
  1202. }
  1203. });
  1204. }, 5000)
  1205. });
  1206. //END OF INIT FUNCTIONS
  1207. //Get the system ID and ip address from the system id services
  1208. function initSystemInfo(){
  1209. $.get("../../system/id/requestInfo",function(data){
  1210. if (data.error !== undefined){
  1211. msgbox("remove", data.error);
  1212. }else{
  1213. systemUUID = data.SystemUUID;
  1214. systemIP = data.IpAddress;
  1215. }
  1216. });
  1217. }
  1218. //Initiate the sidebar contents
  1219. function initRootDirs(){
  1220. //Load user directories
  1221. $.ajax({
  1222. url:"../../system/file_system/listRoots?user=true",
  1223. success: function(data){
  1224. $("#userroot").html("");
  1225. for (var i =0; i < data.length; i++){
  1226. var thisRootObject = data[i];
  1227. if (thisRootObject.IsDir == true && !(thisRootObject.Filename == ".cache" || thisRootObject.Filename == ".trash")){
  1228. //Files will not be listed in the root directory list
  1229. var specifcRootInfo = getUserRootIcons(thisRootObject.Filename);
  1230. var icon = specifcRootInfo[0];
  1231. var displayName = specifcRootInfo[1];
  1232. var vpath = thisRootObject.Filepath;
  1233. $("#userroot").append(`<div class="dir item ${currentTheme}" filepath="${vpath}" type="folder" onclick="openthis(this);"><i class="${icon} rightmargin icon"></i> ${displayName}</div>`);
  1234. }
  1235. }
  1236. }
  1237. });
  1238. //Load other storage devices
  1239. $.ajax({
  1240. url:"../../system/file_system/listRoots",
  1241. success: function(data){
  1242. $("#storageroot").html("");
  1243. for (var i =0; i < data.length; i++){
  1244. var thisRoot = data[i];
  1245. var displayName = thisRoot.RootName;
  1246. var rootPath = thisRoot.RootPath;
  1247. var containBackup = thisRoot.RootBackups;
  1248. $("#storageroot").append(`<div class="dir item ${currentTheme}" contain-backup="${containBackup}" filepath="${rootPath}" type="folder" rootname="${displayName}" onclick="openthis(this);"><i class="disk outline rightmargin icon"></i> ${displayName} (${rootPath})</div>`);
  1249. }
  1250. }
  1251. });
  1252. //Initial Host device drives
  1253. /*
  1254. $.ajax({
  1255. url: "../../system/file_system/listDrives",
  1256. success: function(data){
  1257. $("#deviceList").html("");
  1258. for (var i =0; i < data.length; i++){
  1259. var drivePath = data[i].Drivepath;
  1260. var usagePercentage = ((data[i].DriveTotalSpace - data[i].DriveFreeSpace) / data[i].DriveTotalSpace) * 100;
  1261. var className = "primary";
  1262. if (usagePercentage > 90){
  1263. className = "negative";
  1264. }
  1265. $("#deviceList").append(`<div class="dir item ${currentTheme}" filepath="${drivePath}" ><i class="disk outline rightmargin icon"></i> ${drivePath}
  1266. <div style="width:100px;height:15px !important; position:absolute;right:3px;top:6px;"">
  1267. <div class="ts ${className} tiny progress">
  1268. <div class="bar" style="width: ${usagePercentage}%"></div>
  1269. </div>
  1270. </div>
  1271. </div>`);
  1272. }
  1273. }
  1274. });
  1275. */
  1276. }
  1277. function getUserRootIcons(foldername){
  1278. var icon = "folder open";
  1279. var name = foldername;
  1280. foldername = foldername.toLowerCase();
  1281. if (foldername == "desktop"){
  1282. icon = "computer";
  1283. name = applocale.getString("sidebar/vroot/desktop", name);
  1284. }else if (foldername == "document"){
  1285. icon = "file text outline";
  1286. name = applocale.getString("sidebar/vroot/document", name);
  1287. }else if (foldername == "music" || foldername == "audio"){
  1288. icon = "music";
  1289. name = applocale.getString("sidebar/vroot/music", name);
  1290. }else if (foldername == "photo" || foldername == "picture"){
  1291. icon = "image";
  1292. name = applocale.getString("sidebar/vroot/photo", name);
  1293. }else if (foldername == "video" || foldername == "film"){
  1294. icon = "video";
  1295. name = applocale.getString("sidebar/vroot/video", name);
  1296. }else if (foldername == "trash" || foldername == "bin" || foldername == "rubbish"){
  1297. icon = "trash"
  1298. name = applocale.getString("sidebar/vroot/trash", name);
  1299. }else if (foldername == "download"){
  1300. icon = "download"
  1301. name = applocale.getString("sidebar/vroot/download", name);
  1302. }else if (foldername == "www" || foldername == "web" || foldername == "mysite"){
  1303. icon = "globe"
  1304. name = applocale.getString("sidebar/vroot/web", name);
  1305. }else if (foldername == "model"){
  1306. icon = "cube"
  1307. name = applocale.getString("sidebar/vroot/model", name);
  1308. }else if (foldername == "appdata"){
  1309. icon = "code"
  1310. name = applocale.getString("sidebar/vroot/appdata", name);
  1311. }
  1312. return [icon, name];
  1313. }
  1314. // ============================== FOLDER LISTING FUNCTIONS ====================
  1315. function listDirectory(path, callback=undefined, recordUndo=true){
  1316. var recordPreviousPage = true;
  1317. if (recordUndo == false){
  1318. recordPreviousPage = false;
  1319. }
  1320. //Backup the current selected files if it is an refresh operation
  1321. let selectedFiles = [];
  1322. if (path == currentPath){
  1323. $(".fileObject.item.selected").each(function(){
  1324. selectedFiles.push($(this).attr("filename"));
  1325. });
  1326. //Set record histroy to false on refresh
  1327. recordPreviousPage = false;
  1328. }
  1329. //Always pad slash to the end of path
  1330. if (path.substring(path.length - 1) != "/"){
  1331. path = path + "/";
  1332. }
  1333. //Clean the path if there are any malformat
  1334. if (path.indexOf("//") != -1){
  1335. path = path.split("//").join("/");
  1336. }
  1337. if (recordPreviousPage){
  1338. viewHistory.push(currentPath);
  1339. }
  1340. window.location.hash = path;
  1341. updatePathDisplay(path);
  1342. currentPath = path;
  1343. //Update floatWindow title if exists
  1344. if (ao_module_virtualDesktop){
  1345. var tmp = path.split("/");
  1346. tmp.pop();
  1347. ao_module_setWindowTitle(applocale.getString("title/title", "File Manager") + " - " + tmp.pop());
  1348. }
  1349. //Check if there are parent path for curret path
  1350. if (checkIfParentDirExists(currentPath)){
  1351. $("#ppbtn").removeClass("disabled");
  1352. }else{
  1353. $("#ppbtn").addClass("disabled");
  1354. }
  1355. if (viewHistory.length < 1){
  1356. $("#backbtn").addClass("disabled");
  1357. }else{
  1358. $("#backbtn").removeClass("disabled");
  1359. }
  1360. //Add loading screen to the folderlists and fileList
  1361. $("#fileList").html("");
  1362. if (currentTheme == "darkTheme"){
  1363. $("#folderList").html(`<div style="height: 100px;">
  1364. <div class="ts active dimmer">
  1365. <div class="ts text loader">${applocale.getString("message/loading", "Loading")}</div>
  1366. </div>
  1367. </div>`);
  1368. }else{
  1369. $("#folderList").html(`<div style="height: 100px;">
  1370. <div class="ts active inverted dimmer">
  1371. <div class="ts text loader">${applocale.getString("message/loading", "Loading")}</div>
  1372. </div>
  1373. </div>`);
  1374. }
  1375. //Get sort mode from server side
  1376. $.ajax({
  1377. url: "../../system/file_system/sortMode",
  1378. data: {opr: "get", folder: currentPath},
  1379. success: function(data){
  1380. if (data.error == undefined){
  1381. sortMode = data;
  1382. }
  1383. $("#sortingMethodSelector").val(sortMode);
  1384. //Start listdir event
  1385. $.ajax({
  1386. url: "../../system/file_system/listDir",
  1387. method: "POST",
  1388. data: {dir: decodeURIComponent(path), sort: sortMode},
  1389. success: function(data){
  1390. //Parse the filelist into global variable
  1391. currentFilelist = [];
  1392. if (data === null){
  1393. //There is nothing is this folder.
  1394. $("#folderList").hide();
  1395. $("#fileList").hide();
  1396. return;
  1397. }
  1398. if (data.error !== undefined){
  1399. //Parse path error. Try to refresh the page
  1400. //console.log("Path parse error! Redirecting to parent directory.", data.error);
  1401. //var pdir = currentPath.split("/");
  1402. //pdir.pop(); pdir.pop();
  1403. //pdir = pdir.join("/");
  1404. //currentPath = pdir;
  1405. enableAutoRefresh = false;
  1406. //Check if it is already rooted and no more parent ahead
  1407. if (currentPath == ""){
  1408. currentPath = "user:/";
  1409. }
  1410. //Print folder not found exceotion
  1411. $("#folderList").show();
  1412. $("#folderList").html(`<div class="ts basic segment ${currentTheme}">
  1413. <div class="ts header">
  1414. <i class="remove icon ${currentTheme}"></i> <span class="${currentTheme}">This Folder Cannot Be Opened</span>
  1415. <div class="sub header ${currentTheme}" style="margin-top:12px;">The server return the following error message: <br><code>${data.error.toUpperCase()}</code><br>
  1416. ${ao_module_utils.timeConverter(Date.now()/1000)}</div>
  1417. </div>
  1418. </div>`);
  1419. $("#fileList").hide();
  1420. //listDirectory(currentPath, function(){
  1421. // window.location.reload();
  1422. //});
  1423. return;
  1424. }else{
  1425. enableAutoRefresh = true;
  1426. //Filelist returned. Render it
  1427. renderDirectory(data,function(){
  1428. //Restore the selected file list
  1429. $(".fileObject.item").each(function(){
  1430. for (var i = 0; i < selectedFiles.length; i++){
  1431. var thisFilename = selectedFiles[i];
  1432. if (thisFilename == $(this).attr("filename")){
  1433. $(this).addClass("selected");
  1434. }
  1435. }
  1436. });
  1437. //Perform the callback
  1438. if (callback !== undefined){
  1439. callback();
  1440. }
  1441. });
  1442. }
  1443. }
  1444. });
  1445. }
  1446. });
  1447. }
  1448. //Render filelist --> Convert a file list object into the visable form of file list
  1449. function renderDirectory(filelist, callback=undefined){
  1450. var data = filelist;
  1451. $("#fileList").html("");
  1452. $("#folderList").html("");
  1453. //Build the css strcture of the list
  1454. if (viewMode == "list"){
  1455. $("#fileList").attr("class",`ts segmented fluid list ${currentTheme}`);
  1456. $("#folderList").attr("class",`ts segmented fluid list ${currentTheme}`);
  1457. }else if (viewMode == "details"){
  1458. }else if (viewMode == "grid"){
  1459. $("#fileList").attr("class",`${currentTheme}`).css("vertical-align","top");
  1460. $("#folderList").attr("class",`${currentTheme}`).css("vertical-align","top");
  1461. }
  1462. var files = [];
  1463. var folders = [];
  1464. for (var i =0; i < data.length; i++){
  1465. if (data[i].IsDir == true){
  1466. //This is folder
  1467. folders.push(data[i]);
  1468. }else{
  1469. //This is file
  1470. files.push(data[i]);
  1471. }
  1472. currentFilelist.push(JSON.parse(JSON.stringify(data[i].Filename)));
  1473. }
  1474. //Define the grid size for the interface
  1475. var gridSize = 150 ;
  1476. if (isMobile){
  1477. //Update 3/5/2021: Optimize the width calculation method to best fit
  1478. //A hack to align the divs to center of the container
  1479. $("#folderView").attr("align", "center");
  1480. $("#folderList").attr("align", "left");
  1481. $("#fileList").attr("align", "left");
  1482. //Calculate the best width to fit all the grids
  1483. var bestCount = Math.floor(parseFloat($("#folderView").width()) / parseFloat(gridSize));
  1484. var bestOffset = $("#folderView").width() % gridSize;
  1485. gridSize = gridSize + (bestOffset / bestCount) - (window.innerWidth - $("#folderView").width()) / bestCount;
  1486. }
  1487. //List all folders
  1488. for (var i =0; i < folders.length; i++){
  1489. var filename = folders[i].Filename;
  1490. var filepath = folders[i].Filepath;
  1491. var realpath = folders[i].Realpath;
  1492. var isDir = folders[i].IsDir;
  1493. var filesize = folders[i].Filesize;
  1494. var Displaysize = folders[i].Displaysize;
  1495. var isShared = folders[i].IsShared;
  1496. var ext = getExtFromPath(filepath);
  1497. //var icon = ao_module_utils.getIconFromExt(ext);
  1498. var icon = "folder";
  1499. var shareicon = "";
  1500. if (isShared == true){
  1501. shareicon = `<button class="sharebtn ${currentTheme}" onclick='handleShareFilebuttonClick(event, this);' style="margin-left: 4px; height: 16px;">
  1502. <i class='share alternate icon'></i>
  1503. </button>`
  1504. }
  1505. if (viewMode == "list"){
  1506. var textclass = "normal object";
  1507. if (currentTheme == "darkTheme"){
  1508. textclass += " darkTheme";
  1509. }
  1510. var displayName = filename;
  1511. try{
  1512. //Try to decode it using ArozOS Beta naming scheme
  1513. if (enableBetaFilename && ao_module_codec.decodeHexFoldername(displayName) != displayName){
  1514. displayName = ao_module_codec.decodeHexFoldername(displayName, false);
  1515. textclass = "hex foldername";
  1516. }
  1517. }catch(ex){
  1518. //Codec decode failed. Fallback to default name
  1519. }
  1520. $("#folderList").append(`<div class="fileObject item ${currentTheme}" draggable="true" ondragstart="onFileObjectDragStart(this,event);" ondrop="dropToFolder(event)" ondragover="allowDrop(event)" fileID="${i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="folder">
  1521. <span style="display:inline-block !important;word-break: break-all;" class="${textclass}">
  1522. <i class="${icon} icon" style="margin-right:12px; color:#eab54e;"></i> ${displayName} ${shareicon}
  1523. </span></div>`);
  1524. }else if (viewMode == "grid"){
  1525. var displayName = JSON.parse(JSON.stringify(filename));
  1526. var textclass = "normal object";
  1527. try{
  1528. //Try to decode it using ArozOS Beta naming scheme
  1529. if (enableBetaFilename && ao_module_codec.decodeHexFoldername(displayName) != displayName){
  1530. displayName = ao_module_codec.decodeHexFoldername(displayName, false);
  1531. textclass = "hex foldername";
  1532. }
  1533. }catch(ex){
  1534. //Codec decode failed. Fallback to default name
  1535. }
  1536. if (displayName.length > 16){
  1537. displayName = displayName.substring(0,16) + "...";
  1538. }
  1539. $("#folderList").append(`
  1540. <div class="ts card fileObject ${currentTheme}" draggable="true" ondragstart="onFileObjectDragStart(this,event);" ondrop="dropToFolder(event)" ondragover="allowDrop(event)" fileID="${i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="folder" style="width:${gridSize}px; display:inline-block !important;vertical-align:top; height:15em; margin-top:0px !important; overflow:hidden;">
  1541. <div class="image" style="text-align: center;">
  1542. <img draggable="true"ondragstart="disableDrag(event);" src="../../img/desktop/files_icon/${filesIconTheme}/folder.png" style="height: 148px; width: 148px; display: inline-block;">
  1543. </div>
  1544. <div class="content" style="font-size: 12px;">
  1545. <div class="header ${currentTheme} ${textclass}" title="${filename}">${displayName} ${shareicon}</div>
  1546. </div>
  1547. </div>`);
  1548. }
  1549. }
  1550. if (folders.length == 0){
  1551. $("#folderList").hide();
  1552. }else{
  1553. $("#folderList").show();
  1554. }
  1555. //List all files
  1556. var fl = folders.length;
  1557. for (var i =0; i < files.length; i++){
  1558. var filename = files[i].Filename;
  1559. var filepath = files[i].Filepath;
  1560. var realpath = files[i].Realpath;
  1561. var filesize = files[i].Filesize;
  1562. var Displaysize = files[i].Displaysize;
  1563. var isShared = files[i].IsShared;
  1564. var ext = getExtFromPath(filepath);
  1565. var icon = "file outline";
  1566. if (ext == ""){
  1567. icon = "file outline";
  1568. }else if (ext == "shortcut"){
  1569. //Use the default shortcut icon
  1570. icon = ao_module_utils.getIconFromExt(ext);
  1571. //Check if the shortcut object exists
  1572. if (files[i].Shortcut != undefined){
  1573. icon = files[i].Shortcut.Icon;
  1574. }
  1575. }else{
  1576. icon = ao_module_utils.getIconFromExt(ext);
  1577. }
  1578. var shareicon = "";
  1579. if (isShared){
  1580. shareicon = `<button class="sharebtn ${currentTheme}" onclick='handleShareFilebuttonClick(event, this);' style="margin-left: 4px; height: 16px;">
  1581. <i class='share alternate icon'></i>
  1582. </button>`
  1583. }
  1584. var fileType = "file";
  1585. if (ext == "shortcut"){
  1586. fileType = "shortcut";
  1587. }
  1588. if (viewMode == "list"){
  1589. var displayName = filename;
  1590. var textclass = "normal object";
  1591. if (currentTheme == "darkTheme"){
  1592. textclass += " darkTheme";
  1593. }
  1594. if (ext == "shortcut"){
  1595. //This is a shortcut file
  1596. displayName = files[i].Shortcut.Name;
  1597. //Adjust the icon based on its shortcut ype
  1598. switch(files[i].Shortcut.Type){
  1599. case "folder":
  1600. icon = "blue folder";
  1601. break;
  1602. case "module":
  1603. icon = "play circle";
  1604. break;
  1605. default:
  1606. icon = "external";
  1607. }
  1608. }
  1609. if (enableBetaFilename){
  1610. decodedName = ao_module_codec.decodeUmFilename(displayName);
  1611. if (decodedName != displayName){
  1612. displayName = decodedName;
  1613. textclass = "um filename";
  1614. }
  1615. filename = ao_module_codec.decodeUmFilename(filename);
  1616. }
  1617. $("#fileList").append(`<div class="fileObject item ${currentTheme}" draggable="true" ondragstart="onFileObjectDragStart(this,event);" fileID="${fl + i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="${fileType}" filesize="${filesize}" displaysize="${Displaysize}">
  1618. <span style="display:inline-block !important;word-break: break-all;text-overflow: ellipsis !important;overflow: hidden;" class="${textclass}">
  1619. <i class="${icon} icon" style="margin-right:12px;"></i>
  1620. ${displayName} ${shareicon}
  1621. </span>
  1622. </div>`);
  1623. }else if (viewMode == "grid"){
  1624. //Update the icon path depends on the type of file
  1625. var imagePath = "../../img/desktop/files_icon/" + filesIconTheme + "/" + icon + ".png";
  1626. var displayName = JSON.parse(JSON.stringify(filename));
  1627. if (ext == "shortcut"){
  1628. //This is a shortcut file. Treat it specially
  1629. imagePath = "../../" + icon;
  1630. displayName = files[i].Shortcut.Name;
  1631. ext = files[i].Shortcut.Type;
  1632. ext = ext.charAt(0).toUpperCase() + ext.slice(1);
  1633. }else{
  1634. ext = "." + ext;
  1635. }
  1636. var textclass = "normal object";
  1637. if (enableBetaFilename){
  1638. decodedName = ao_module_codec.decodeUmFilename(displayName);
  1639. if (decodedName != displayName){
  1640. textclass = "um filename";
  1641. displayName = decodedName;
  1642. }
  1643. filename = ao_module_codec.decodeUmFilename(filename);
  1644. }
  1645. if (displayName.length > 20){
  1646. displayName = displayName.substring(0,20) + "...";
  1647. }
  1648. $("#fileList").append(`
  1649. <div class="ts card fileObject ${currentTheme}" draggable="true" ondragstart="onFileObjectDragStart(this,event);" fileID="${fl + i}" filename="${filename}" filepath="${filepath}" ondblclick="openthis(this,event);" type="${fileType}" style="width:${gridSize}px; display:inline-block !important;vertical-align:top; height:20em; margin-top:0px !important; overflow:hidden;">
  1650. <div class="image" style="text-align: center !important;">
  1651. <img draggable="true"ondragstart="disableDrag(event);" style="height: 148px; width: 148px; display:inline-block;" src="${imagePath}">
  1652. </div>
  1653. <div class="content">
  1654. <div class="header ${currentTheme} ${textclass}" title="${filename}" style="text-overflow: ellipsis; font-size: 100%">${displayName} ${shareicon}</div>
  1655. <div class="meta ${currentTheme}">
  1656. <div>${ext}</div>
  1657. </div>
  1658. <div class="description ${currentTheme}">
  1659. ${Displaysize}
  1660. </div>
  1661. </div>
  1662. </div>
  1663. `);
  1664. }
  1665. }
  1666. if (files.length == 0){
  1667. $("#fileList").hide();
  1668. }else{
  1669. $("#fileList").show();
  1670. }
  1671. bindFileObjectEvents();
  1672. currentFilelist.sort();
  1673. //Update the filelist hash
  1674. enableAutoRefresh = false;
  1675. getDirHash(function(hash){
  1676. currentPathHash = hash;
  1677. enableAutoRefresh = true;
  1678. });
  1679. //If viewmode is grid, load file thumbnails
  1680. if (viewMode == "grid"){
  1681. startThumbnailLoader();
  1682. }
  1683. if (callback !== undefined){
  1684. callback();
  1685. }
  1686. }
  1687. function startThumbnailLoader(){
  1688. let path = currentPath;
  1689. let protocol = "wss://";
  1690. if (location.protocol !== 'https:') {
  1691. protocol = "ws://";
  1692. }
  1693. var port = window.location.port;
  1694. if (window.location.port == ""){
  1695. if (location.protocol !== 'https:') {
  1696. port = "80";
  1697. }else{
  1698. port = "443";
  1699. }
  1700. }
  1701. thumbRenderWebSocket = new WebSocket(protocol + window.location.hostname + ":" + port + "/system/file_system/handleCacheRender?folder=" + path);
  1702. thumbRenderWebSocket.onopen = function(e) {
  1703. };
  1704. thumbRenderWebSocket.onmessage = function(event) {
  1705. //Find the correct file in the current directory and place its image
  1706. if (path == currentPath){
  1707. var thumbData = JSON.parse(event.data);
  1708. $(".fileObject").each(function(){
  1709. if (thumbData[1].length > 0){
  1710. //Extract image type from base64
  1711. let ext = getThumbnailExtensionFromBase64String(thumbData[1]);
  1712. //Put the image data to image element
  1713. if ($(this).attr("filename") == thumbData[0]){
  1714. $(this).find("img").attr("src","data:image/" + ext + ";base64," + thumbData[1]);
  1715. }
  1716. }
  1717. });
  1718. }
  1719. };
  1720. thumbRenderWebSocket.onclose = function(event) {
  1721. //Transfer ended
  1722. };
  1723. thumbRenderWebSocket.onerror = function(error) {
  1724. //Cache render on websocket failed. Fallback to AJAX request
  1725. console.log("Cannot connect to WebSocket cache renderer. Falling back to AJAX request");
  1726. startFallbackThumbnailLoader();
  1727. };
  1728. }
  1729. function getThumbnailExtensionFromBase64String(base64String){
  1730. let tid = base64String.charAt(0);
  1731. let ext = "jpg";
  1732. if (tid == "i"){
  1733. ext = "png";
  1734. }else if (tid == "R"){
  1735. ext = "gif";
  1736. }else if (tid == "U"){
  1737. ext = "webp";
  1738. }
  1739. return ext;
  1740. }
  1741. function startFallbackThumbnailLoader(){
  1742. let startingCurrentDir = currentPath;
  1743. let fallbackRenderList = [];
  1744. $(".fileObject").each(function(){
  1745. let filepath = $(this).attr("filepath");
  1746. let targetDOM = $(this);
  1747. if ($(this).attr("type") != "folder"){
  1748. fallbackRenderList.push([filepath, targetDOM]);
  1749. }
  1750. });
  1751. doThumbnailSequentialLoading(startingCurrentDir, fallbackRenderList, 0);
  1752. }
  1753. function doThumbnailSequentialLoading(startingCurrentDir, renderlist, index){
  1754. if (renderlist[index] == undefined){
  1755. //Starting index out of range
  1756. return;
  1757. }
  1758. let filepath = renderlist[index][0];
  1759. let targetDOM = renderlist[index][1];
  1760. $.ajax({
  1761. url: "../../system/file_system/loadThumbnail",
  1762. data: {vpath: filepath},
  1763. success: function(data){
  1764. if (startingCurrentDir == currentPath){
  1765. //User still not changed page
  1766. let ext = getThumbnailExtensionFromBase64String(data);
  1767. if (data.error == undefined && typeof data != "undefined" && data != ""){
  1768. $(targetDOM).find("img").attr("src","data:image/" + ext + ";base64," + data);
  1769. }
  1770. if (index + 1 < renderlist.length){
  1771. doThumbnailSequentialLoading(startingCurrentDir, renderlist, index + 1);
  1772. }
  1773. }else{
  1774. //User changed page. End the sequence
  1775. }
  1776. }
  1777. });
  1778. }
  1779. //Make an div not draggable
  1780. function disableDrag(event){
  1781. event.preventDefault();
  1782. event.stopPropagation();
  1783. }
  1784. //Make fileObject draggable
  1785. function onFileObjectDragStart(object, event){
  1786. if ((ctrlHold) && $(object).hasClass("selected") == false){
  1787. $(object).addClass("selected");
  1788. }else if ($(object).hasClass("selected") == false){
  1789. $(".fileObject.selected").removeClass("selected");
  1790. $(object).addClass("selected");
  1791. }
  1792. var fileList = [];
  1793. $(".selected.fileObject").each(function(){
  1794. var filename = $(this).attr('filename');
  1795. var filepath = $(this).attr('filepath');
  1796. var sourceSystemUUID = systemUUID;
  1797. //Extra information is passed in due to the need for cross cluster communication in the future
  1798. fileList.push({
  1799. filename: filename,
  1800. filepath: filepath,
  1801. hostUUID: sourceSystemUUID
  1802. });
  1803. });
  1804. event.dataTransfer.setData("filedata", JSON.stringify(fileList));
  1805. }
  1806. //Bind onclicke events for fileObjects
  1807. var lastClickedFileID = 0;
  1808. function bindFileObjectEvents(){
  1809. $(".fileObject").off("click").on('click',function(evt){
  1810. if (!ctrlHold && isMobile){
  1811. //If on mobile, click means open
  1812. openthis(this,evt);
  1813. return
  1814. }
  1815. if (ctrlHold == true){
  1816. if ($(this).hasClass("selected")){
  1817. $(this).removeClass("selected");
  1818. }else{
  1819. $(this).addClass("selected");
  1820. }
  1821. lastClickedFileID = parseInt($(this).attr("fileid"));
  1822. }else if (shiftHold == true){
  1823. //Select everything in range lastClicked to this
  1824. var thisFileID = $(this).attr("fileid");
  1825. let start = parseInt(thisFileID);
  1826. let end = parseInt(lastClickedFileID);
  1827. if (start > end){
  1828. start = parseInt(lastClickedFileID);
  1829. end = parseInt(thisFileID);
  1830. }
  1831. //Select all fileObject in range.
  1832. $(".fileObject").each(function(){
  1833. let currentItemFileID = $(this).attr('fileid');
  1834. currentItemFileID = currentItemFileID - 0;
  1835. if (currentItemFileID >= start && currentItemFileID <= end){
  1836. $(this).addClass("selected");
  1837. }
  1838. });
  1839. }else{
  1840. //Nothing is pressed. Deselect everything and add this only
  1841. $(".fileObject.selected").removeClass("selected");
  1842. $(this).addClass("selected");
  1843. lastClickedFileID = $(this).attr("fileID");
  1844. }
  1845. if ($(".fileObject.selected").length != 1){
  1846. //Multiple object selected
  1847. $(".singleObjectOnly").addClass("disabled");
  1848. $(".singleObjectOnlyHide").hide();
  1849. }else{
  1850. //Single object
  1851. $(".singleObjectOnly").removeClass("disabled");
  1852. $(".singleObjectOnlyHide").show();
  1853. }
  1854. });
  1855. //Bind right click select on items
  1856. $(".fileObject").off("mousedown").on("mousedown",function(evt){
  1857. if (evt.which == 3){
  1858. //Right click on this file
  1859. if ($(this).hasClass('selected') == false){
  1860. $(".fileObject.selected").removeClass("selected");
  1861. $(this).addClass("selected");
  1862. }
  1863. }
  1864. });
  1865. //This function calculate and offset the context menu to not go out of the window area
  1866. function calculateContextMenuOffsets(evt){
  1867. var defaultLeftPost = evt.pageX;
  1868. var defaultTopPost =evt.pageY;
  1869. if (evt.pageX > window.innerWidth / 2){
  1870. defaultLeftPost = evt.pageX - $("#contextmenu").width() + "px";
  1871. }
  1872. if (evt.pageY > window.innerHeight / 2){
  1873. defaultTopPost = evt.pageY - $("#contextmenu").height() + "px";
  1874. }
  1875. $("#contextmenu").css({
  1876. left: defaultLeftPost,
  1877. top: defaultTopPost
  1878. });
  1879. }
  1880. //Rightclick on a file object
  1881. $(".fileObject").off("contextmenu").on("contextmenu", function(evt){
  1882. evt.preventDefault();
  1883. if (isMobile){
  1884. //Firefox Mobile. Fix select with context menu not working bug
  1885. var selectedObject = $(evt.target);
  1886. if ($(selectedObject).hasClass("fileObject")){
  1887. if (!ctrlHold){
  1888. $(".fileObject.selected").removeClass("selected");
  1889. }
  1890. $(selectedObject).addClass("selected");
  1891. }else{
  1892. //Uptrace 5 layers for fileObject
  1893. for (var i = 0; i < 5; i++){
  1894. if ($(selectedObject).hasClass("fileObject") == false){
  1895. selectedObject = $(selectedObject).parent();
  1896. }else{
  1897. break;
  1898. }
  1899. }
  1900. if (!ctrlHold){
  1901. $(".fileObject.selected").removeClass("selected");
  1902. }
  1903. $(selectedObject).addClass("selected");
  1904. }
  1905. }
  1906. calculateContextMenuOffsets(evt);
  1907. //Show all options by defaults
  1908. $("#contextmenu").find(".item").show();
  1909. $("#contextmenu").find(".vroothide").show();
  1910. $("#contextmenu").find(".noSelectionOnly").hide();
  1911. $("#contextmenu").find(".vrootonly").hide();
  1912. //Hide backup manual
  1913. $("#contextmenu").find(".backuponly").hide();
  1914. //Check if this is folder or file. Replace the suitable selections
  1915. if ($(this).attr("type") == "folder"){
  1916. //Use folder mode
  1917. $("#contextmenu").find(".folderonly").show();
  1918. $("#contextmenu").find(".fileonly").hide();
  1919. }else{
  1920. //Use file mode
  1921. $("#contextmenu").find(".folderonly").hide();
  1922. $("#contextmenu").find(".fileonly").show();
  1923. }
  1924. if (searchMode == true){
  1925. $("#contextmenu").find(".shareonly").show();
  1926. }else{
  1927. $("#contextmenu").find(".shareonly").hide();
  1928. }
  1929. $("#contextmenu").addClass("visible");
  1930. //Handle CSS offset of the contextmenu
  1931. if ($("#contextmenu").offset().top < 0){
  1932. $("#contextmenu").css("top","0px");
  1933. }else if($("#contextmenu").offset().top + $("#contextmenu").height() > window.innerHeight){
  1934. $("#contextmenu").css("top",window.innerHeight - $("#contextmenu").height() + "px");
  1935. }
  1936. if (isMobile){
  1937. $("#contextmenu").find(".mobileonly").show();
  1938. }else{
  1939. $("#contextmenu").find(".mobileonly").hide();
  1940. }
  1941. });
  1942. //Right click on empty space of the file selector
  1943. $("#folderView").off("contextmenu").on("contextmenu", function(e){
  1944. if ($(e.target).attr("id") == "folderView" || $(e.target).attr("id") == "fileList" || $(e.target).attr("id") == "folderList"){
  1945. //Context menu on the empty space of the folder / file list
  1946. e.preventDefault();
  1947. $("#contextmenu").find(".item").hide();
  1948. $("#contextmenu").find(".noSelectionOnly").show();
  1949. $("#contextmenu").find(".allowNoSelection").show();
  1950. $("#contextmenu").find(".vroothide").show();
  1951. //Calculate the position of the context menu
  1952. calculateContextMenuOffsets(e);
  1953. //Show context menu
  1954. $("#contextmenu").addClass("visible");
  1955. //Handle CSS offset of the contextmenu
  1956. if ($("#contextmenu").offset().top < 0){
  1957. $("#contextmenu").css("top","0px");
  1958. }else if($("#contextmenu").offset().top + $("#contextmenu").height() > window.innerHeight){
  1959. $("#contextmenu").css("top",window.innerHeight - $("#contextmenu").height() + "px");
  1960. }
  1961. }
  1962. });
  1963. //Handle right click on storage roots
  1964. $("#storageroot").off("contextmenu").on("contextmenu", function(e){
  1965. if ($(e.target).is("i")){
  1966. e.target = e.target.parentElement;
  1967. }
  1968. $("#storageroot").find(".dir.item").each(function(){
  1969. if ($(this).attr("rootname") != undefined){
  1970. $(this).removeClass("active");
  1971. }
  1972. });
  1973. if ($(e.target).attr("rootname") != undefined){
  1974. //Correct one. Show vroot functions
  1975. e.preventDefault();
  1976. var rootname = $(e.target).attr("rootname");
  1977. var containBackup = $(e.target).attr("contain-backup") == "true";
  1978. $(e.target).addClass("active");
  1979. $("#contextmenu").find(".item").hide();
  1980. $("#contextmenu").find(".vroothide").hide();
  1981. $("#contextmenu").find(".vrootonly").show();
  1982. //Check if this is a backup drive
  1983. if (containBackup == true){
  1984. $("#contextmenu").find(".backuponly").show();
  1985. }else{
  1986. $("#contextmenu").find(".backuponly").hide();
  1987. }
  1988. //Show context menu
  1989. calculateContextMenuOffsets(e);
  1990. $("#contextmenu").addClass("visible");
  1991. //Handle CSS offset of the contextmenu
  1992. if ($("#contextmenu").offset().top < 0){
  1993. $("#contextmenu").css("top","0px");
  1994. }else if($("#contextmenu").offset().top + $("#contextmenu").height() > window.innerHeight){
  1995. $("#contextmenu").css("top",window.innerHeight - $("#contextmenu").height() + "px");
  1996. }
  1997. }
  1998. });
  1999. $(document).on("click",function(evt){
  2000. $(".contextmenu").removeClass("visible");
  2001. });
  2002. }
  2003. //Change the current view mode
  2004. function changeViewMode(object){
  2005. var targetMode = $(object).attr("mode");
  2006. viewMode = targetMode;
  2007. listDirectory(currentPath);
  2008. updateViewmodeButtons();
  2009. setPreference("file_explorer/listmode",targetMode)
  2010. }
  2011. function updateViewmodeButtons(){
  2012. $(".videmode").removeClass('disabled');
  2013. $(".videmode").each(function(){
  2014. if ($(this).attr("mode") == viewMode){
  2015. $(this).addClass("disabled");
  2016. }
  2017. });
  2018. }
  2019. function previosPath(){
  2020. //Remove the current directory from history
  2021. if (viewHistory.length == 0){
  2022. //This is already the first page
  2023. return;
  2024. }
  2025. var previousPath = viewHistory.pop();
  2026. listDirectory(previousPath, undefined, false);
  2027. }
  2028. function parentDir(){
  2029. //If under searchmode, parentDir go back to the currentPath
  2030. if (searchMode){
  2031. hideSearchBar();
  2032. return;
  2033. }
  2034. //Check if there are any parent dir for this path
  2035. if (checkIfParentDirExists(currentPath)){
  2036. //There are parent path. Get it from currentPath
  2037. pathInfo = currentPath.split("/");
  2038. pathInfo.pop();
  2039. var parentFolderName = pathInfo.pop();
  2040. parentPath = pathInfo.join("/") + "/"
  2041. //List the parentDir
  2042. listDirectory(parentPath, function(){
  2043. focusFileObject(parentFolderName);
  2044. });
  2045. }
  2046. }
  2047. //Move the page focus to the given fileobject
  2048. function focusFileObject(targetFileName){
  2049. $(".fileObject").each(function(){
  2050. if ($(this).attr("filename") == targetFileName){
  2051. $(this).addClass("selected");
  2052. scrollToFileLocation(this);
  2053. }
  2054. });
  2055. }
  2056. function scrollToFileLocation(DOMElement){
  2057. if (DOMElement === undefined || $(DOMElement).offset() == undefined){
  2058. //DOM Element no longer exists
  2059. return;
  2060. }
  2061. //Trying to vertically align the directory from its parent list
  2062. let topPos = $("#folderView").scrollTop() + $(DOMElement).offset().top - $("#folderView").height()/2 - $(DOMElement).height()/2 - 28;
  2063. window.debug = $(DOMElement);
  2064. $("#folderView").stop().animate({
  2065. scrollTop: topPos
  2066. }, 300);
  2067. }
  2068. function loadListModeFromDB(callback = undefined){
  2069. //Get list mode from storage
  2070. loadPreference("file_explorer/listmode",function(data){
  2071. if (data != "" && data.error === undefined){
  2072. viewMode = data;
  2073. updateViewmodeButtons();
  2074. }
  2075. if (callback !== undefined){
  2076. callback();
  2077. }
  2078. });
  2079. }
  2080. function rootDir(){
  2081. //Go to the root dir of the current path
  2082. var rootDir = currentPath.split("/").shift();
  2083. rootDir = rootDir + "/";
  2084. listDirectory(rootDir);
  2085. }
  2086. function showEditCurrentPathInput(e){
  2087. e.preventDefault();
  2088. $("#pathInputField").find("input").val(currentPath);
  2089. if (isMobile){
  2090. $("#mobilePathDisplay").hide();
  2091. $(".mobilePathDisplayWrapper").append($("#pathInputField"));
  2092. $("#pathInputField").find("input").css("width", window.innerWidth - 54 + "px");
  2093. }else{
  2094. //Desktop
  2095. $("#pathInputField").find("input").css("width", $("#pathDisplayField").width() - 24+ "px");
  2096. $("#pathDisplayField").hide();
  2097. }
  2098. $("#pathInputField").show();
  2099. }
  2100. function handleOpenPathKeydown(e){
  2101. if (e.key == "enter" | e.keyCode == 13){
  2102. //Etner pressed
  2103. openEnteredPath($("#pathInputField").find("button"));
  2104. }
  2105. }
  2106. function openEnteredPath(object){
  2107. var newPath = $(object).parent().find("input").val();
  2108. //Filter out the path
  2109. newPath = newPath.split("\\").join("/");
  2110. listDirectory(newPath);
  2111. hideManualOpenPathInput();
  2112. }
  2113. function hideManualOpenPathInput(){
  2114. $("#pathInputField").hide();
  2115. if (isMobile){
  2116. $("#mobilePathDisplay").show();
  2117. }else{
  2118. $("#pathDisplayField").show();
  2119. }
  2120. }
  2121. function checkIfParentDirExists(path){
  2122. if (path.includes("/")){
  2123. pathInfo = path.split("/");
  2124. if (pathInfo[1] == ""){
  2125. return false;
  2126. }else{
  2127. return true;
  2128. }
  2129. }else{
  2130. return false;
  2131. }
  2132. }
  2133. function getDirHash(callback){
  2134. $.ajax({
  2135. url: "../../system/file_system/listDirHash",
  2136. data: {dir: currentPath},
  2137. success: function(data){
  2138. if (data.error !== undefined){
  2139. if (data.error == "Invalid dir given"){
  2140. //Storage has been unmounted. Back to parent
  2141. var pdir = currentPath.split("/");
  2142. pdir.pop();pdir.pop();
  2143. pdir = pdir.join("/");
  2144. currentPath = pdir;
  2145. listDirectory(currentPath, function(){
  2146. window.location.reload();
  2147. });
  2148. return;
  2149. }
  2150. }
  2151. callback(data);
  2152. }
  2153. })
  2154. }
  2155. function openHomeDir(){
  2156. listDirectory("user:/", function(){
  2157. hideManualOpenPathInput();
  2158. hideSearchBar();
  2159. })
  2160. }
  2161. //=================================== FILE OPERATIONS ========================
  2162. function refreshList(){
  2163. if (searchMode == true){
  2164. //Refresh the search result
  2165. if ($("#searchInput").val().length > 0){
  2166. handleSearch();
  2167. }
  2168. return;
  2169. }
  2170. shiftHold = false;
  2171. ctrlHold = false;
  2172. let currentScrollTop = JSON.parse(JSON.stringify($("#folderView").scrollTop()));
  2173. listDirectory(currentPath, function(){
  2174. //Scroll back to the original height
  2175. $("#folderView").scrollTop(currentScrollTop);
  2176. });
  2177. }
  2178. function zipFile(){
  2179. $(".popup").fadeOut('fast');
  2180. var zippingFiles = [];
  2181. $(".fileObject.selected").each(function(){
  2182. var filepath = $(this).attr("filepath");
  2183. zippingFiles.push(filepath);
  2184. });
  2185. console.log(zippingFiles);
  2186. //Request to create a zip file, named with the parent dir name
  2187. var oprConfig = {
  2188. opr: "zip",
  2189. src: zippingFiles,
  2190. dest: currentPath,
  2191. overwriteMode: "overwrite",
  2192. callbackWindowID: ao_module_windowID,
  2193. callbackFunction: `callRefresh("${currentPath}")`
  2194. }
  2195. var configHash = encodeURIComponent(JSON.stringify(oprConfig));
  2196. var title = applocale.getString("opr/zip/zipping","Zipping ") + zippingFiles.length;
  2197. if (fileList.length > 1){
  2198. title += applocale.getString("opr/zip/files", " files");
  2199. }else{
  2200. title += applocale.getString("opr/zip/file"," file");
  2201. }
  2202. parent.newFloatWindow({
  2203. url: "SystemAO/file_system/file_operation.html#" + configHash,
  2204. width: 400,
  2205. height: 220,
  2206. appicon: "SystemAO/file_system/img/selector.png",
  2207. title: title
  2208. });
  2209. }
  2210. let renameFileObjects = [];
  2211. function rename(){
  2212. $(".popup").fadeOut('fast');
  2213. renameFileObjects = [];
  2214. var filenames = [];
  2215. $(".fileObject.selected").each(function(){
  2216. var fileObjectType = $(this).attr("type");
  2217. let fileObject = {
  2218. filename: $(this).attr('filename'),
  2219. filepath: $(this).attr("filepath"),
  2220. filetype: fileObjectType
  2221. }
  2222. renameFileObjects.push(JSON.parse(JSON.stringify(fileObject)));
  2223. filenames.push($(this).attr('filename'));
  2224. });
  2225. var oldname = "unknown file.txt";
  2226. if (renameFileObjects.length == 0){
  2227. return;
  2228. }else if (renameFileObjects.length > 0){
  2229. $("#renameBox").find(".multifileWarning").hide();
  2230. oldname = filenames[0];
  2231. }
  2232. $("#renameBox").find(".orgfn").val(oldname);
  2233. $("#renameBox").find(".newfn").val(oldname);
  2234. showPopupWrapper();
  2235. $("#renameBox").fadeIn(100);
  2236. }
  2237. function confirmRename(){
  2238. var oldName = $("#renameBox").find(".orgfn").val();
  2239. var newName = $("#renameBox").find(".newfn").val();
  2240. if (newName == oldName){
  2241. msgbox("remove",applocale.getString("message/newFilenameIdentical", "New filename is identical to the original filename."));
  2242. $("#renameBox").fadeOut(100);
  2243. $(".popupWrapper").fadeOut(100);
  2244. return;
  2245. }
  2246. var newNameWithoutExt = newName;
  2247. var newnameExt = "";
  2248. if (newName.includes(".")){
  2249. tmp = newName.split(".");
  2250. newnameExt = tmp.pop();
  2251. newNameWithoutExt = tmp.join(".");
  2252. }
  2253. var counter = 0;
  2254. var srclist = [];
  2255. var newnamelist = [];
  2256. for (var i =0; i < renameFileObjects.length; i++){
  2257. var thisFilepath = renameFileObjects[i].filepath;
  2258. var thisFiletype = renameFileObjects[i].filetype;
  2259. var thisFilename = renameFileObjects[i].filename;
  2260. var newFilename = newName;
  2261. if ( i > 0){
  2262. if (thisFiletype == "file"){
  2263. var thisFileExt = thisFilename.split(".").pop();
  2264. newFilename = newNameWithoutExt + "(" + i + ")." + thisFileExt;
  2265. }else if (thisFiletype == "folder"){
  2266. newFilename = newNameWithoutExt + "(" + i + ")";
  2267. }
  2268. }
  2269. srclist.push(thisFilepath);
  2270. newnamelist.push(newFilename);
  2271. }
  2272. console.log(srclist, newnamelist);
  2273. //Send the request to serverside
  2274. requestCSRFToken(function(token){
  2275. $.ajax({
  2276. url: "../../system/file_system/fileOpr",
  2277. method: "POST",
  2278. data: {opr: "rename", src: JSON.stringify(srclist), new: JSON.stringify(newnamelist), csrft: token},
  2279. success: function(data){
  2280. if (data.error !== undefined){
  2281. msgbox("remove",data.error);
  2282. }else{
  2283. refreshList();
  2284. msgbox("checkmark",applocale.getString("message/rename/success", "Rename suceed"));
  2285. }
  2286. $("#renameBox").fadeOut(100);
  2287. $(".popupWrapper").fadeOut(100);
  2288. },
  2289. error: function(){
  2290. $("#renameBox").fadeOut(100);
  2291. $(".popupWrapper").fadeOut(100);
  2292. }
  2293. });
  2294. renameFileObjects = [];
  2295. });
  2296. hideAllPopupWindows();
  2297. }
  2298. function changeOverwriteRule(mode, doPasteAgain=false){
  2299. switch (mode){
  2300. case 0:
  2301. overwriteMode = "overwrite";
  2302. break;
  2303. case 1:
  2304. overwriteMode = "skip";
  2305. break;
  2306. case 2:
  2307. overwriteMode = "keep";
  2308. break;
  2309. default:
  2310. overwriteMode = "keep";
  2311. }
  2312. if (doPasteAgain){
  2313. //Initiate paste without checking and close the overwritemode selector
  2314. paste(undefined, true);
  2315. $("#overwriteModeSelection").fadeOut(100);
  2316. }
  2317. }
  2318. function copy(){
  2319. cutMode = false;
  2320. clipboard = [];
  2321. if ($(".fileObject.selected").length == 0){
  2322. return;
  2323. }
  2324. $(".fileObject.selected").each(function(){
  2325. var thisFilepath = $(this).attr("filepath");
  2326. clipboard.push(thisFilepath);
  2327. });
  2328. if (useLocalstorage){
  2329. localStorage.setItem("ao/file_system/clipboard",JSON.stringify(clipboard));
  2330. localStorage.setItem("ao/file_system/cutmode","false");
  2331. }
  2332. msgbox("copy",clipboard.length + applocale.getString("message/copy/success", " objects copied."))
  2333. }
  2334. function cut(){
  2335. cutMode = true;
  2336. clipboard = [];
  2337. if ($(".fileObject.selected").length == 0){
  2338. return;
  2339. }
  2340. $(".fileObject.selected").each(function(){
  2341. var thisFilepath = $(this).attr("filepath");
  2342. clipboard.push(thisFilepath);
  2343. });
  2344. if (useLocalstorage){
  2345. localStorage.setItem("ao/file_system/clipboard",JSON.stringify(clipboard));
  2346. localStorage.setItem("ao/file_system/cutmode","true");
  2347. }
  2348. msgbox("cut",clipboard.length + applocale.getString("message/move/success", " objects ready to be moved."))
  2349. }
  2350. function paste(redirectPasteTarget="", nocheck=false){
  2351. let thisOprCutMode = cutMode;
  2352. let fileList = clipboard;
  2353. let targetDir = currentPath;
  2354. if (redirectPasteTarget != ""){
  2355. //Allow redirection of paste target if necessary
  2356. targetDir = redirectPasteTarget;
  2357. }
  2358. if (useLocalstorage){
  2359. //There are localStorage. Always use localStorage if exists.
  2360. var crossFrameClipboard = localStorage.getItem("ao/file_system/clipboard");
  2361. var useCutMode = localStorage.getItem("ao/file_system/cutmode");
  2362. if (crossFrameClipboard !== "" && crossFrameClipboard !== undefined && crossFrameClipboard !== null){
  2363. fileList = JSON.parse(crossFrameClipboard);
  2364. }
  2365. if (useCutMode !== "" && useCutMode !== undefined && useCutMode !== null){
  2366. thisOprCutMode = (useCutMode == "true");
  2367. }
  2368. }
  2369. if (fileList.length == 0){
  2370. //There are nothing to paste
  2371. msgbox("question",applocale.getString("message/paste/nothing", "There are nothing to paste."))
  2372. return;
  2373. }
  2374. //console.log(fileList,JSON.stringify(fileList));
  2375. if (thisOprCutMode == true){
  2376. //Cut and paste
  2377. $.ajax({
  2378. type: 'POST',
  2379. url: `../../system/file_system/validateFileOpr`,
  2380. data: {src: JSON.stringify(fileList), dest: targetDir},
  2381. success: function(data){
  2382. if (!nocheck && data.length > 0){
  2383. //There are problem with the copy target. Pop up overwrite rule selector
  2384. showDuplicateHandler(data);
  2385. }else{
  2386. //OK!
  2387. //Clear clipboard settings
  2388. localStorage.setItem("ao/file_system/clipboard", "");
  2389. clipboard = "";
  2390. //Stsart operations
  2391. if (!ao_module_virtualDesktop){
  2392. //Not under desktop mode. Use direct copy API
  2393. requestCSRFToken(function(token){
  2394. $.ajax({
  2395. type: 'POST',
  2396. url: `../../system/file_system/fileOpr`,
  2397. data: {opr: "move" ,src: JSON.stringify(fileList), dest: targetDir,existsresp: overwriteMode, csrft: token},
  2398. success: function(data){
  2399. if (data.error !== undefined){
  2400. msgbox("remove",data.error);
  2401. }else{
  2402. //OK
  2403. msgbox("checkmark",fileList.length + applocale.getString("message/move/success", " objects moved."))
  2404. refreshList();
  2405. }
  2406. hideAllPopupWindows();
  2407. }
  2408. });
  2409. });
  2410. }else{
  2411. //Pass the request to operation handler
  2412. var oprConfig = {
  2413. opr: "move",
  2414. src: fileList,
  2415. dest: targetDir,
  2416. overwriteMode: overwriteMode,
  2417. callbackWindowID: ao_module_windowID,
  2418. callbackFunction: `callRefresh("${targetDir}")`
  2419. }
  2420. var configHash = encodeURIComponent(JSON.stringify(oprConfig));
  2421. var title = "Moving " + fileList.length;
  2422. if (fileList.length > 1){
  2423. title += " files";
  2424. }else{
  2425. title += " file";
  2426. }
  2427. parent.newFloatWindow({
  2428. url: "SystemAO/file_system/file_operation.html#" + configHash,
  2429. width: 400,
  2430. height: 220,
  2431. appicon: "SystemAO/file_system/img/selector.png",
  2432. title: title
  2433. });
  2434. hideAllPopupWindows();
  2435. }
  2436. }
  2437. }
  2438. });
  2439. }else{
  2440. //Copy and paste
  2441. //Check if the file list is OK for continue without the need for overwrite
  2442. $.ajax({
  2443. type: 'POST',
  2444. url: `../../system/file_system/validateFileOpr`,
  2445. data: {src: JSON.stringify(fileList), dest: targetDir},
  2446. success: function(data){
  2447. if (!nocheck && data.length > 0){
  2448. //There are problem with the copy target. Pop up overwrite rule selector
  2449. showDuplicateHandler(data);
  2450. }else{
  2451. //OK!
  2452. if (!ao_module_virtualDesktop){
  2453. requestCSRFToken(function(token){
  2454. $.ajax({
  2455. type: 'POST',
  2456. url: `../../system/file_system/fileOpr`,
  2457. data: {opr: "copy" ,src: JSON.stringify(fileList), dest: targetDir,existsresp: overwriteMode, csrft: token},
  2458. success: function(data){
  2459. if (data.error !== undefined){
  2460. msgbox("remove",data.error);
  2461. }else{
  2462. //OK
  2463. msgbox("checkmark",fileList.length + applocale.getString("message/copy/success", " objects copied."))
  2464. refreshList();
  2465. }
  2466. hideAllPopupWindows();
  2467. }
  2468. });
  2469. });
  2470. }else{
  2471. //Pass the request to operation handler
  2472. var oprConfig = {
  2473. opr: "copy",
  2474. src: fileList,
  2475. dest: targetDir,
  2476. overwriteMode: overwriteMode,
  2477. callbackWindowID: ao_module_windowID,
  2478. callbackFunction: `callRefresh("${targetDir}")`
  2479. }
  2480. var configHash = encodeURIComponent(JSON.stringify(oprConfig));
  2481. var title = "Copying " + fileList.length;
  2482. if (fileList.length > 1){
  2483. title += " files";
  2484. }else{
  2485. title += " file";
  2486. }
  2487. parent.newFloatWindow({
  2488. url: "SystemAO/file_system/file_operation.html#" + configHash,
  2489. width: 400,
  2490. height: 220,
  2491. appicon: "SystemAO/file_system/img/selector.png",
  2492. title: title
  2493. });
  2494. hideAllPopupWindows();
  2495. }
  2496. }
  2497. }
  2498. });
  2499. }
  2500. }
  2501. //Callback function for file operation display
  2502. window.callRefresh = function(targetdir){
  2503. console.log(currentPath, targetdir);
  2504. if (currentPath == targetdir){
  2505. refreshList();
  2506. }
  2507. }
  2508. //This action may duplicate files. Show handler
  2509. function showDuplicateHandler(duplicateFileList){
  2510. $(".popup").fadeOut(100);
  2511. var duplicatedFileCounts = duplicateFileList.length;
  2512. showPopupWrapper();
  2513. $("#overwriteModeSelection").fadeIn(100);
  2514. $("#overwriteModeSelection").find(".owm-fc").text(duplicatedFileCounts);
  2515. var srcpath = duplicateFileList[0];
  2516. srcpath = srcpath.split("/");
  2517. srcpath.pop();
  2518. srcpath = srcpath.join("/");
  2519. $("#overwriteModeSelection").find(".owm-srcdir").text(srcpath);
  2520. $("#overwriteModeSelection").find(".owm-destdir").text(currentPath);
  2521. }
  2522. //Force delete. Use normal delete fucntion if you want to move things to recycle bin instead.
  2523. let forceDeleteList = [];
  2524. function forceDelete(confirmed=false){
  2525. if (confirmed == false){
  2526. //Show confirm box
  2527. let deletePendingList = [];
  2528. var listObject = $("#forceDeleteConfirmBox").find(".deleteFilelist")[0];
  2529. $(listObject).html("");
  2530. $(".selected.fileObject").each(function(data){
  2531. var thispath = $(this).attr("filepath");
  2532. var thisfilename = $(this).attr("filename");
  2533. var ext = thisfilename.split(".").pop();
  2534. var icon = ao_module_utils.getIconFromExt(ext);
  2535. deletePendingList.push(thispath);
  2536. $(listObject).append(`<div class="item ${currentTheme}" ><span style="display:inline-block;">${thisfilename}</span></div>`);
  2537. });
  2538. showPopupWrapper();
  2539. $("#forceDeleteConfirmBox").fadeIn(100);
  2540. forceDeleteList = deletePendingList;
  2541. }else{
  2542. //Start force delete function
  2543. $("#forceDeleteConfirmBox").fadeOut(100);
  2544. let fdlistLength = forceDeleteList.length;
  2545. requestCSRFToken(function(token){
  2546. $.ajax({
  2547. url: "../../system/file_system/fileOpr",
  2548. method:"POST",
  2549. data: {opr: "delete", src: JSON.stringify(forceDeleteList), csrft: token},
  2550. success: function(data){
  2551. if (data.error !== undefined){
  2552. msgbox("caution",data.error);
  2553. }else{
  2554. refreshList();
  2555. msgbox("checkmark",fdlistLength + applocale.getString("message/remove/success", " objects removed."))
  2556. }
  2557. hideAllPopupWindows();
  2558. }
  2559. });
  2560. //Finishing up delete sequence
  2561. forceDeleteList = [];
  2562. });
  2563. }
  2564. }
  2565. let deleteFileList = [];
  2566. function deleteFile(confirmed = false){
  2567. if (!confirmed){
  2568. //Show the confirm dialog
  2569. $("#deleteConfirmBox").find(".deleteFilelist").html("");
  2570. $(".fileObject.selected").each(function(data){
  2571. var thisfilename = $(this).attr('filename');
  2572. var thisFilepath = $(this).attr('filepath');
  2573. deleteFileList.push(thisFilepath);
  2574. $("#deleteConfirmBox").find(".deleteFilelist").append(`<div class="item ${currentTheme}" ><span style="display:inline-block;">${thisfilename}</span></div>`);
  2575. });
  2576. if (deleteFileList.length == 0){
  2577. //No files selected
  2578. return;
  2579. }else{
  2580. //File selected. Continue to delete
  2581. showPopupWrapper();
  2582. $("#deleteConfirmBox").fadeIn(100);
  2583. }
  2584. }else{
  2585. //Continue to delete files
  2586. let fdlistLength = deleteFileList.length;
  2587. requestCSRFToken(function(token){
  2588. $.ajax({
  2589. url: "../../system/file_system/fileOpr",
  2590. method:"POST",
  2591. data: {opr: "recycle", src: JSON.stringify(deleteFileList), csrft: token},
  2592. success: function(data){
  2593. if (data.error !== undefined){
  2594. msgbox("caution",data.error);
  2595. }else{
  2596. refreshList();
  2597. msgbox("checkmark",fdlistLength + applocale.getString("message/recycle/success", " objects moved to trash bin."))
  2598. }
  2599. if (currentPath == "user:/"){
  2600. //Reload the User root folder list
  2601. initRootDirs();
  2602. }
  2603. }
  2604. });
  2605. console.log(deleteFileList);
  2606. deleteFileList = [];
  2607. hideAllPopupWindows();
  2608. });
  2609. }
  2610. }
  2611. function cancelDelete(){
  2612. deleteFileList=[];
  2613. }
  2614. function cancelForceDelete(){
  2615. $("#forceDeleteConfirmBox").fadeOut(100);
  2616. forceDeleteList = [];
  2617. }
  2618. function upload(){
  2619. var input = document.createElement('input');
  2620. input.type = 'file';
  2621. input.multiple = true;
  2622. input.onchange = e => {
  2623. var files = e.target.files;
  2624. msgbox("upload",applocale.getString("message/upload/started", "Upload Started"));
  2625. for (var i = 0; i < files.length; i++){
  2626. uploadFile(files[i]);
  2627. }
  2628. }
  2629. input.click();
  2630. }
  2631. function updatePathDisplay(path){
  2632. var pathInfo = path.split("/");
  2633. var vdID = pathInfo[0];
  2634. //As path always end with /, pop the empty pathinfo from array
  2635. pathInfo.pop();
  2636. var l = pathInfo.length;
  2637. //Append the starting vdir
  2638. $(".pathDisplay").html("");
  2639. $(".pathDisplay").append(`<div class="section ${currentTheme} selectable" onclick="rootDir();"><i class="folder icon"></i> ${vdID}</div>`);
  2640. $(".pathDisplay").append(`<div class="divider ${currentTheme} whiteTheme">/</div>`);
  2641. //console.log(pathInfo);
  2642. if (l > 3){
  2643. //E.g. user:/Desktop/test/boo/ => Display as user:/.../test/boo/
  2644. $(".pathDisplay").append(`<div class="section ${currentTheme}">...</div>`);
  2645. $(".pathDisplay").append(`<div class="divider ${currentTheme} whiteTheme">/</div>`);
  2646. $(".pathDisplay").append(`<div class="section ${currentTheme} selectable" onclick="parentDir();">${shortenLongFoldername(pathInfo[l-2], 40)}</div>`);
  2647. $(".pathDisplay").append(`<div class="divider ${currentTheme} whiteTheme">/</div>`);
  2648. $(".pathDisplay").append(`<div class="section ${currentTheme} selectable" onclick="refreshList();">${shortenLongFoldername(pathInfo[l-1], 60)}</div>`);
  2649. }else if (l == 3){
  2650. $(".pathDisplay").append(`<div class="section ${currentTheme} selectable" onclick="parentDir();">${shortenLongFoldername(pathInfo[l-2], 40)}</div>`);
  2651. $(".pathDisplay").append(`<div class="divider ${currentTheme} whiteTheme">/</div>`);
  2652. $(".pathDisplay").append(`<div class="section ${currentTheme} selectable" onclick="refreshList();">${shortenLongFoldername(pathInfo[l-1], 60)}</div>`);
  2653. }else if (l == 2){
  2654. //E.g. user:/Desktop or user:/
  2655. $(".pathDisplay").append(`<div class="section ${currentTheme} selectable" onclick="refreshList();">${shortenLongFoldername(pathInfo[1], 80)}</div>`);
  2656. }
  2657. //Update the manual input field as well
  2658. $("#pathInputField").find("input").val(path);
  2659. }
  2660. function shortenLongFoldername(name, maxchar = 20){
  2661. var resultname = name;
  2662. if (name.length > maxchar){
  2663. //Shorten it
  2664. var offset = parseInt((maxchar - 2) / 2);
  2665. resultname = name.substr(0, offset) + "..." + name.substr(name.length - offset)
  2666. }
  2667. return resultname
  2668. }
  2669. function getExtFromPath(path){
  2670. if (path.includes(".") == false){
  2671. return "";
  2672. }
  2673. return path.split(".").pop();
  2674. }
  2675. function getFileObjectFromFID(fid){
  2676. var targetFileObject = null;
  2677. $(".fileObject").each(function(){
  2678. if ($(this).attr("fileid") == fid){
  2679. targetFileObject = $(this);
  2680. }
  2681. });
  2682. return targetFileObject;
  2683. }
  2684. function openViaButton(){
  2685. let fileOpenList = [];
  2686. let foldersToBeOpened=[];
  2687. $(".fileObject.selected").each(function(){
  2688. let type = $(this).attr("type");
  2689. let filepath = $(this).attr("filepath");
  2690. if (type == "file"){
  2691. fileOpenList.push(filepath);
  2692. }else if (type == "folder"){
  2693. foldersToBeOpened.push(filepath);
  2694. }
  2695. });
  2696. //Open files
  2697. openPathWithDefaultOpener(fileOpenList);
  2698. //Open folders
  2699. openFolderInNewWindow(foldersToBeOpened);
  2700. }
  2701. function openthis(object,evt=null){
  2702. if (evt !== null){
  2703. evt.preventDefault();
  2704. }
  2705. var objType = $(object).attr("type");
  2706. if ( objType == "file"){
  2707. //Open this file. Generate the access path from filepath
  2708. var filepath = $(object).attr("filepath");
  2709. //Only one path to be opened. Pass in as a single object array
  2710. openPathWithDefaultOpener([filepath]);
  2711. }else if (objType == "folder"){
  2712. //Open this folder
  2713. var folderPath = $(object).attr('filepath');
  2714. listDirectory(folderPath, function(){
  2715. //Scroll to top of the list
  2716. $("#folderView").stop().finish().animate({
  2717. scrollTop: 0
  2718. }, 300);
  2719. if ($(object).hasClass('dir') && isMobile){
  2720. toggleSidebar();
  2721. }
  2722. });
  2723. }else if (objType == "shortcut"){
  2724. //Load the shortcut information
  2725. getShortcutInfo($(object).attr('filepath'), function(shortcutInfo){
  2726. /*
  2727. Shortcut Info format
  2728. 0: Shortcut type
  2729. 1: Shortcut Name
  2730. 2: Shortcut target
  2731. 3: Shortcut icon image
  2732. */
  2733. if (shortcutInfo[0] == "module"){
  2734. //This is a module
  2735. if (ao_module_virtualDesktop){
  2736. //Open Module with VDI API
  2737. parent.openModule(shortcutInfo[2]);
  2738. }else{
  2739. //Open module in new tab
  2740. $.get("../../system/modules/getLaunchPara?module=" + shortcutInfo[2], function(data) {
  2741. window.open("../../" + data.StartDir);
  2742. });
  2743. }
  2744. }else if (shortcutInfo[0] == "folder"){
  2745. //This is a folder
  2746. listDirectory(shortcutInfo[2]);
  2747. }else if (shortcutInfo[0] == "url"){
  2748. //This is a url shortcut
  2749. window.open(shortcutInfo[2]);
  2750. }
  2751. console.log(shortcutInfo);
  2752. });
  2753. }
  2754. //Check if this opened in sidebar and in mobile mode. Close sidebar if yes
  2755. }
  2756. /*
  2757. Shortcut Info format
  2758. 0: Shortcut type
  2759. 1: Shortcut Name
  2760. 2: Shortcut target
  2761. 3: Shortcut icon image
  2762. */
  2763. function getShortcutInfo(filepath, callback){
  2764. $.get("../../media?file=" + filepath, function(data){
  2765. //This return the shortcut information. Split it and see what shortcut is this
  2766. data = data.split("\r\n").join("\n");
  2767. var shortcutInfo = data.trim().split("\n");
  2768. callback(shortcutInfo);
  2769. });
  2770. }
  2771. //Download the selected files.
  2772. function downloadFile(){
  2773. var fileList = [];
  2774. if ($(".fileObject.selected").length == 1 && $(".fileObject.selected").attr("type") == "file"){
  2775. //One file. Download directly.
  2776. var downloadURL = "../../media?file=" + encodeURIComponent($(".fileObject.selected").attr("filepath")) + "&download=true";
  2777. var filename = $(".fileObject.selected").attr("filename");
  2778. generateDownloadFromURL(downloadURL,escape(filename));
  2779. }else if ($(".fileObject.selected").length > 1 || ($(".fileObject.selected").length == 1 && $(".fileObject.selected").attr("type") == "folder")){
  2780. //Do zip and download for multiple files
  2781. $(".fileObject.selected").each(function(){
  2782. fileList.push($(this).attr("filepath"));
  2783. });
  2784. console.log("Zipping: ", fileList);
  2785. //Add a display for file compression
  2786. var fileCount = $(".fileObject.selected").length;
  2787. var displayString = applocale.getString("opr/zip/zipping", "Zipping ") + fileCount + applocale.getString("opr/zip/files", " files");
  2788. if (fileCount == 1){
  2789. //Use the filename as task name
  2790. displayString = applocale.getString("opr/zip/zipping", "Zipping ") + $(".fileObject.selected").attr("filename");
  2791. }
  2792. var taskUUID = appendUploadFileItem(displayString, -1);
  2793. $("#uploadTab").show();
  2794. //Set the progress bar to intermediate mode
  2795. let targetTaskDisplayObject = getUploadTaskByID(taskUUID);
  2796. targetTaskDisplayObject.find(".progress").addClass("preparing");
  2797. //Zip the file or folder
  2798. $.ajax({
  2799. url: "../../system/file_system/zipHandler",
  2800. data: {opr: "tmpzip", src: JSON.stringify(fileList), dest: ""},
  2801. method: "POST",
  2802. success: function(data){
  2803. if (data.error !== undefined){
  2804. //Error
  2805. targetTaskDisplayObject.find(".progress").removeClass("preparing").removeClass("primary").addClass("negative");
  2806. msgbox("remove",data.error);
  2807. }else{
  2808. //Zip completed.
  2809. targetTaskDisplayObject.find(".progress").removeClass("preparing").removeClass("primary").addClass("positive");
  2810. //Open the zip file
  2811. window.open("../../media?file=" + data + "&download=true");
  2812. }
  2813. targetTaskDisplayObject.find(".bar").css("width", "100%");
  2814. //Hide the taskbar after 5 secs
  2815. setTimeout(function(){
  2816. //Fade out this task
  2817. $(targetTaskDisplayObject).fadeOut('fast',
  2818. function(){
  2819. $(this).remove();
  2820. if ($(".uploadTask").length == 0){
  2821. $("#uploadTab").hide();
  2822. }
  2823. }
  2824. );
  2825. }, 3000);
  2826. },
  2827. error: function(){
  2828. targetTaskDisplayObject.find(".progress").removeClass("preparing").removeClass("primary").addClass("negative");
  2829. targetTaskDisplayObject.find(".bar").css("width", "100%");
  2830. msgbox("remove",applocale.getString("message/zip/fail", "Zipping failed due to unknown reason"));
  2831. setTimeout(function(){
  2832. if ($(".uploadTask").length == 0){
  2833. $("#uploadTab").hide();
  2834. }
  2835. }, 3000);
  2836. }
  2837. });
  2838. }else{
  2839. alert("No file selected!")
  2840. }
  2841. }
  2842. //Create a new file
  2843. function newfile(){
  2844. $(".popup").fadeOut('fast');
  2845. showPopupWrapper();
  2846. $("#newFile").fadeIn('fast');
  2847. $("#newFile").find(".duplicateWarning").hide();
  2848. $("#createNewFileName").parent().removeClass("error");
  2849. //Update the newfile list
  2850. $("#newFile").find(".newfilelist").html("");
  2851. requestCSRFToken(function(token){
  2852. $.ajax({
  2853. url: "../../system/file_system/newItem",
  2854. data: {csrft: token},
  2855. success: function(data){
  2856. if (data.error !== undefined){
  2857. return;
  2858. }
  2859. for (var i =0; i < data.length; i++){
  2860. var desc = data[i].Desc;
  2861. var ext = data[i].Ext;
  2862. var icon = ao_module_utils.getIconFromExt(ext);
  2863. $("#newFile").find(".newfilelist").append(`<div class="item newFileFormat" ext="${ext}"><i class="${icon} icon" style="margin-right:12px;"></i> ${desc}</div>`);
  2864. }
  2865. //Initialize the new file as txt
  2866. var filename = "newfile";
  2867. var finalFilename = filename;
  2868. var i = 0;
  2869. while (currentFilelist.includes(finalFilename)){
  2870. finalFilename = finalFilename + "(" + i + ")";
  2871. i++;
  2872. }
  2873. $("#createNewFileName").val(finalFilename + ".txt");
  2874. //Hook events for on click
  2875. $(".newFileFormat").off("click").on("click",function(data){
  2876. $(".newFileFormat").removeClass("selected");
  2877. $(this).addClass("selected");
  2878. //Parse the newfilename
  2879. var selectedExt = $(this).attr("ext");
  2880. var filename = "newfile";
  2881. var finalFilename = filename;
  2882. var i = 0;
  2883. while (currentFilelist.includes(finalFilename)){
  2884. finalFilename = finalFilename + "(" + i + ")";
  2885. i++;
  2886. }
  2887. $("#createNewFileName").val(filename + "." + selectedExt);
  2888. });
  2889. }
  2890. });
  2891. });
  2892. }
  2893. function filePermission(){
  2894. //Open file permission window
  2895. if ($(".fileObject.selected").length > 0){
  2896. //Build the filelist
  2897. var fileList = [];
  2898. $(".fileObject.selected").each(function(){
  2899. var filepath = $(this).attr("filepath");
  2900. fileList.push(filepath);
  2901. });
  2902. var hashPassthrough = encodeURIComponent(JSON.stringify(fileList));
  2903. ao_module_newfw({
  2904. url: "SystemAO/file_system/file_permission.html#" + hashPassthrough,
  2905. width: 340,
  2906. height: 480,
  2907. appicon: "SystemAO/file_system/img/properties.png",
  2908. title: "File Permissions",
  2909. })
  2910. }
  2911. }
  2912. function newFolder(confirmed = false){
  2913. if (confirmed == false){
  2914. //Launch the dialog for newFolder
  2915. $(".popup").fadeOut(100);
  2916. $("#createNewFolder").val("");
  2917. $("#createNewFolder").parent().removeClass("error").removeClass("success");
  2918. $("#newFolder").find(".duplicateWarning").hide();
  2919. showPopupWrapper();
  2920. $("#newFolder").fadeIn(100);
  2921. }else{
  2922. //Create new folder
  2923. var newFoldername = $("#createNewFolder").val();
  2924. if (newFoldername == ""){
  2925. $("#createNewFolder").parent().addClass("error");
  2926. return;
  2927. }
  2928. if (currentFilelist.includes(newFoldername)){
  2929. //Current filelist already contain a folder with the same name
  2930. $("#createNewFolder").parent().addClass("error");
  2931. $("#newFolder").find(".duplicateWarning").show();
  2932. return;
  2933. }
  2934. //OK to proceed.
  2935. $("#createNewFolder").parent().removeClass("error").addClass("success");
  2936. $("#newFolder").find(".duplicateWarning").hide();
  2937. requestCSRFToken(function(token){
  2938. $.ajax({
  2939. url: "../../system/file_system/newItem",
  2940. data: {type: "folder", src: currentPath, filename: newFoldername, csrft: token},
  2941. success: function(data){
  2942. if (data.error !== undefined){
  2943. msgbox("remove", data.error);
  2944. }else{
  2945. msgbox("checkmark",applocale.getString("message/newfolder/success", "New folder created."));
  2946. refreshList();
  2947. }
  2948. $("#newFolder").fadeOut('fast');
  2949. hideAllPopupWindows();
  2950. if (currentPath == "user:/"){
  2951. //Reload the User root folder list
  2952. initRootDirs();
  2953. }
  2954. }
  2955. });
  2956. });
  2957. }
  2958. }
  2959. function confirmNewFile(){
  2960. var filename = $("#createNewFileName").val();
  2961. if (filename == ""){
  2962. //Filename not set
  2963. $("#createNewFileName").parent().addClass("error");
  2964. return;
  2965. }else if(currentFilelist.includes(filename)){
  2966. //File with this name already exists
  2967. $("#createNewFileName").parent().addClass("error");
  2968. $("#newFile").find(".duplicateWarning").show();
  2969. return;
  2970. }
  2971. $("#createNewFileName").parent().removeClass("error");
  2972. //Ok to proceed
  2973. requestCSRFToken(function(token){
  2974. $.ajax({
  2975. url: "../../system/file_system/newItem",
  2976. data: {type: "file", src: currentPath, filename:filename,csrft: token},
  2977. success: function(data){
  2978. if (data.error !== undefined){
  2979. msgbox("remove",data.error);
  2980. }else{
  2981. msgbox("checkmark",filename + applocale.getString("message/newItem/success", " created."));
  2982. refreshList();
  2983. }
  2984. }
  2985. });
  2986. });
  2987. hideAllPopupWindows();
  2988. $("#newFile").fadeOut('fast');
  2989. }
  2990. //Open File Location
  2991. function openFileLocation(){
  2992. var folders = [];
  2993. $(".selected.fileObject").each(function(){
  2994. var thisFilepath = $(this).attr('filepath');
  2995. var thisFilename = $(this).attr('filename');
  2996. openPathInNewWindow(encodeURIComponent(JSON.stringify([{
  2997. filename: thisFilename,
  2998. filepath: thisFilepath
  2999. }])))
  3000. });
  3001. }
  3002. //OpenWith dialog
  3003. function openWith(){
  3004. if ($(".selected.fileObject").length == 0){
  3005. msgbox("question",applocale.getString("message/nofileSelected", "No file selected"));
  3006. return;
  3007. }
  3008. //Get a list of modules and append it into the selection list
  3009. $.get("../../system/modules/list",function(data){
  3010. if (data.error !== undefined){
  3011. console.log(data.error);
  3012. }else{
  3013. $("#openWithModuleList").html("");
  3014. for (var i =0; i < data.length; i++){
  3015. var thisModule = data[i];
  3016. var supportFW = `<div class="ts horizontal mini label"><i class="checkmark icon"></i>floatWindow Window</div>`;
  3017. var supportEmb = `<div class="ts horizontal mini label"><i class="checkmark icon"></i>Embedded Window</div>`;
  3018. if (!thisModule.SupportFW){
  3019. supportFW = "";
  3020. }
  3021. if (!thisModule.LaunchEmb){
  3022. supportEmb = "";
  3023. }
  3024. var launchInfo = encodeURIComponent(JSON.stringify(thisModule));
  3025. $("#openWithModuleList").append(`<div class="item selectable openWithModule" launchInfo="${launchInfo}" onclick="selectOpenWithModule(this, event);" ondblclick="selectOpenWithModule(this, event); openWithSelectedModule();">
  3026. <img class="ts avatar image" src="../../${thisModule.IconPath}">
  3027. <div class="content" style="padding-left:12px;">
  3028. <div class="header">${thisModule.Name}</div>
  3029. <div class="description">
  3030. ${supportFW}
  3031. ${supportEmb}
  3032. </div>
  3033. </div>
  3034. </div>`);
  3035. }
  3036. }
  3037. });
  3038. $(".openWithModule.popupbuttons").addClass("disabled");
  3039. if (!ao_module_virtualDesktop){
  3040. $("#openWith").find(".vdonly").hide();
  3041. }
  3042. showPopupWrapper();
  3043. $("#openWith").fadeIn('fast');
  3044. }
  3045. //Functions for handling open with module selection and file opening
  3046. function selectOpenWithModule(object, event){
  3047. event.preventDefault();
  3048. $(".openWithModule.popupbuttons").removeClass("disabled");
  3049. $(".openWithModule.selected").removeClass("selected");
  3050. $(object).addClass("selected");
  3051. }
  3052. function openWithSelectedModule(btn){
  3053. if ($(btn).hasClass("disabled")){
  3054. return false;
  3055. }
  3056. var targetModuleInfo = JSON.parse(decodeURIComponent($(".openWithModule.selected").attr("launchInfo")));
  3057. var targetObjects = $(".selected.fileObject");
  3058. console.log(targetModuleInfo);
  3059. //Phrase launch mode from the module info
  3060. var launchURL = targetModuleInfo.StartDir
  3061. var launchSize = [undefined, undefined];
  3062. var iconPath = targetModuleInfo.IconPath;
  3063. var title = targetModuleInfo.Name;
  3064. if (targetModuleInfo.SupportEmb){
  3065. //Launch with embedded mode
  3066. launchURL = targetModuleInfo.LaunchEmb;
  3067. if (targetModuleInfo.InitEmbSize !== null){
  3068. launchSize = targetModuleInfo.InitEmbSize
  3069. }
  3070. }else if (targetModuleInfo.SupportFW){
  3071. //Launch with floatWindow mode
  3072. launchURL = targetModuleInfo.LaunchFWDir;
  3073. if (targetModuleInfo.InitFWSize !== null){
  3074. launchSize = targetModuleInfo.InitFWSize
  3075. }
  3076. }else if (targetModuleInfo.StartDir !== ""){
  3077. //Launch with default mode
  3078. }else{
  3079. msgbox("remove",applocale.getString("message/moduleNotSupport", "This module has no endpoint for opening a file."));
  3080. return;
  3081. }
  3082. //Parse the filelist
  3083. var filelist = [];
  3084. $(targetObjects).each(function(){
  3085. var filename = $(this).attr("filename");
  3086. var filepath = $(this).attr("filepath");
  3087. filelist.push({
  3088. filename: filename,
  3089. filepath: filepath
  3090. });
  3091. });
  3092. fileHash = encodeURIComponent(JSON.stringify(filelist));
  3093. if (ao_module_virtualDesktop){
  3094. //Open the target module in a new fw
  3095. parent.newFloatWindow({
  3096. url: launchURL + "#" + fileHash,
  3097. width: launchSize[0],
  3098. height: launchSize[1],
  3099. appicon: iconPath,
  3100. title: title
  3101. });
  3102. }else{
  3103. //Redirect current window to the target module
  3104. window.location.href = "../../" + launchURL + "#" + fileHash;
  3105. }
  3106. hideAllPopupWindows();
  3107. }
  3108. function openFileWithModuleInNewTab(btn){
  3109. if ($(btn).hasClass("disabled")){
  3110. return false;
  3111. }
  3112. var targetModuleInfo = JSON.parse(decodeURIComponent($(".openWithModule.selected").attr("launchInfo")));
  3113. var targetObjects = $(".selected.fileObject");
  3114. //Parse the filelist
  3115. var filelist = [];
  3116. $(targetObjects).each(function(){
  3117. var filename = $(this).attr("filename");
  3118. var filepath = $(this).attr("filepath");
  3119. filelist.push({
  3120. filename: filename,
  3121. filepath: filepath
  3122. });
  3123. });
  3124. //Directly passing the file information to the startdir
  3125. fileHash = encodeURIComponent(JSON.stringify(filelist));
  3126. window.open("../../" + targetModuleInfo.StartDir + "#" + fileHash);
  3127. hideAllPopupWindows();
  3128. }
  3129. function openRawFileInFloatWindow(btn){
  3130. //Directly open this (or more than one) files / folder in floatWindow
  3131. var targetObjects = $(".selected.fileObject");
  3132. $(targetObjects).each(function(){
  3133. if ($(this).attr("type") == "file"){
  3134. var launchURL = "media?file=" + $(this).attr('filepath');
  3135. parent.newFloatWindow({
  3136. url: launchURL,
  3137. appicon: "img/system/file.png",
  3138. title: $(this).attr('filename'),
  3139. "background-color": "#1f1f1f"
  3140. });
  3141. }else if ($(this).attr("type") == "folder"){
  3142. var launchURL = "SystemAO/file_system/file_explorer.html#" + $(this).attr("filepath");
  3143. parent.newFloatWindow({
  3144. url: launchURL,
  3145. appicon: "SystemAO/file_system/img/small_icon.png",
  3146. title: "File Manager - " + $(this).attr('filename'),
  3147. });
  3148. }else{
  3149. //Not supported openeing type.
  3150. console.log("Failed to open file " + $(this).attr('filepath') + " . WIP")
  3151. }
  3152. });
  3153. hideAllPopupWindows();
  3154. }
  3155. //Open the filepaths in the given paramters
  3156. function openPathWithDefaultOpener(filepaths){
  3157. console.log("Opening: ", filepaths);
  3158. for (var i =0; i < filepaths.length; i++){
  3159. let filepath = JSON.parse(JSON.stringify(filepaths[i]));
  3160. var ext = "." + filepath.split(".").pop();
  3161. $.ajax({
  3162. url: "../../system/modules/getDefault",
  3163. method: "GET",
  3164. data: {opr: "launch", ext: ext, mode: "launch"},
  3165. success: function(data){
  3166. if (data.error !== undefined){
  3167. //No default opener assigned. Launch it with opener selector
  3168. var url = "SystemAO/file_system/defaultOpener.html";
  3169. var icon = "SystemAO/file_system/img/opener.png";
  3170. var title = "Select an opener WebApp: "
  3171. var openFileList = [];
  3172. var openFileObject = {
  3173. filepath: filepath,
  3174. filename: filepath.split("/").pop()
  3175. }
  3176. openFileList.push(openFileObject);
  3177. var openParamter = encodeURIComponent(JSON.stringify(openFileObject));
  3178. var ao_module_virtualDesktop = !(!parent.isDesktopMode);
  3179. console.log(window.innerHeight/2 - 510/20);
  3180. if (ao_module_virtualDesktop){
  3181. parent.newFloatWindow({
  3182. url: url + "#" + openParamter,
  3183. width: 320,
  3184. height: 510,
  3185. appicon: icon,
  3186. title: title
  3187. });
  3188. }else{
  3189. url = "defaultOpener.html";
  3190. window.open(url + "#" + openParamter);
  3191. }
  3192. }else{
  3193. //Assigned. Launch with given paramter
  3194. var url = data["StartDir"];
  3195. var size = [undefined, undefined];
  3196. var title = data["Name"];
  3197. var icon = "img/system/favicon.png";
  3198. if (data["IconPath"] != ""){
  3199. icon = data["IconPath"];
  3200. }
  3201. //Use floatWindow if exists
  3202. if (data["SupportFW"] == true && data["LaunchFWDir"] != ""){
  3203. url = data["LaunchFWDir"];
  3204. if (data["InitFWSize"] !== null){
  3205. size = data["InitFWSize"]
  3206. }
  3207. }
  3208. //Use embedded mode if exists
  3209. if (data["SupportEmb"] == true && data["LaunchEmb"] != ""){
  3210. url = data["LaunchEmb"];
  3211. if (data["InitEmbSize"] !== null){
  3212. size = data["InitEmbSize"]
  3213. }
  3214. }
  3215. //Build open File Hash Data Format
  3216. var openFileList = [];
  3217. var openFileObject = {
  3218. filepath: filepath,
  3219. filename: filepath.split("/").pop()
  3220. }
  3221. openFileList.push(openFileObject);
  3222. var openParamter = encodeURIComponent(JSON.stringify(openFileList));
  3223. //Add launch files info and launch floatWindow
  3224. var ao_module_virtualDesktop = !(!parent.isDesktopMode);
  3225. if (ao_module_virtualDesktop){
  3226. parent.newFloatWindow({
  3227. url: url + "#" + openParamter,
  3228. width: size[0],
  3229. height: size[1],
  3230. appicon: icon,
  3231. title: title
  3232. });
  3233. }else{
  3234. window.open("../../" + url + "#" + openParamter);
  3235. }
  3236. }
  3237. }
  3238. });
  3239. }
  3240. }
  3241. function openSelectedFolderInNewWindow(){
  3242. $(".fileObject.selected").each(function(){
  3243. if ($(this).attr("type") == "folder"){
  3244. console.log($(this).attr('filepath'));
  3245. openPathInNewWindow([$(this).attr('filepath')]);
  3246. }
  3247. })
  3248. }
  3249. function openSelectedVroot(){
  3250. $("#storageroot").find(".dir.item").each(function(){
  3251. if ($(this).hasClass("active")){
  3252. var thisRootPath = $(this).attr('filepath');
  3253. openPathInNewWindow([$(this).attr('filepath')]);
  3254. }
  3255. });
  3256. }
  3257. //Always open the first object locally, and open others in new floatWindows
  3258. function openFolderInNewWindow(paths){
  3259. if (paths.length > 0){
  3260. listDirectory(paths[0]);
  3261. for (var i = 1; i < paths.length; i++){
  3262. //newFloatWindow(location.href.replace(location.hash,"") + "#" + path[i])
  3263. openPathInNewWindow(paths[i]);
  3264. }
  3265. }
  3266. }
  3267. function openPathInNewWindow(path){
  3268. console.log("Opening in new File Maanger: ", window.location.pathname + "#" + path);
  3269. ao_module_newfw({
  3270. url: window.location.pathname + "#" + path,
  3271. appicon: "SystemAO/file_system/img/small_icon.png",
  3272. title: "File Manager",
  3273. width: 1080,
  3274. height: 580,
  3275. parent: ao_module_windowID,
  3276. });
  3277. }
  3278. //Preference setting and loading functions.
  3279. function setPreference(key, value){
  3280. $.ajax({
  3281. url:"../../system/file_system/preference?key=" + key + "&value=" + value,
  3282. success: function(data){
  3283. if (data.error !== undefined){
  3284. console.log(data);
  3285. }
  3286. }
  3287. });
  3288. }
  3289. function loadPreference(key, callback){
  3290. $.get("../../system/file_system/preference?key=" + key,function(data){
  3291. callback(data);
  3292. });
  3293. }
  3294. // ============================== WINDOW RESIZE FUNCTIONS =====================
  3295. $(document).ready(function(data){
  3296. if (window.innerWidth < 620 && !isMobile){
  3297. toggleSidebar(false);
  3298. }
  3299. initWindowSizes(false);
  3300. });
  3301. $(window).on("resize",function(){
  3302. initWindowSizes(false);
  3303. if (!isMobile && window.innerWidth < 620 && sideBarShown == true){
  3304. toggleSidebar(false);
  3305. }else if (!isMobile && window.innerWidth > 650 && sideBarShown == false){
  3306. toggleSidebar(false);
  3307. }
  3308. if (isMobile){
  3309. refreshList();
  3310. }
  3311. });
  3312. function handleShareFilebuttonClick(event, object){
  3313. event.preventDefault();
  3314. event.stopImmediatePropagation();
  3315. $(".fileObject.selected").removeClass("selected");
  3316. if (viewMode == "list"){
  3317. $(object).parent().parent().addClass("selected");
  3318. }else if (viewMode == "grid"){
  3319. $(object).parent().parent().parent().addClass("selected");
  3320. }
  3321. shareFile();
  3322. }
  3323. function shareFile(){
  3324. var selectedFiles = [];
  3325. $(".fileObject.selected").each(function(){
  3326. var thisFilepath = $(this).attr("filepath");
  3327. selectedFiles.push(thisFilepath);
  3328. });
  3329. if (selectedFiles.length != 1){
  3330. //Try to share more than 1 files, which is not supported
  3331. console.log("Multi share is current not supported");
  3332. return
  3333. }
  3334. //OK! Continue to generate link
  3335. var selectedFile = selectedFiles[0];
  3336. shareEditingObject = selectedFile;
  3337. $.ajax({
  3338. url: "../../system/file_system/share/new",
  3339. data: {path: selectedFile},
  3340. success: function(data){
  3341. if (data.error !== undefined){
  3342. alert(data.error);
  3343. }else{
  3344. //Build the predicted share endpoint
  3345. let protocol = "https://";
  3346. if (location.protocol !== 'https:') {
  3347. protocol = "http://";
  3348. }
  3349. //Continue to render QR Code and UI contents
  3350. $("#qrcode").html("");
  3351. var shareURL = protocol + window.location.hostname + ":" + window.location.port + "/share?id=" + data.UUID;
  3352. shareEditingUUID = data.UUID;
  3353. new QRCode(document.getElementById("qrcode"), shareURL);
  3354. $("#sharelink").text(shareURL);
  3355. $("#sharelink").attr("href", shareURL);
  3356. $(".shareoption").parent().removeClass("disabled");
  3357. $("#sharingRemoveBtn").show();
  3358. //Check the correct checkbox
  3359. var tagetCheckbox = data.Permission;
  3360. if (tagetCheckbox == "anyone"){
  3361. $("#anyone")[0].checked = true;
  3362. }else if (tagetCheckbox == "signedin"){
  3363. $("#signedin")[0].checked = true;
  3364. }else if (tagetCheckbox == "samegroup"){
  3365. $("#samegroup")[0].checked = true;
  3366. }
  3367. //Show the share file interface
  3368. $(".popup").fadeOut('fast');
  3369. showPopupWrapper();
  3370. $("#shareFile").fadeIn("fast");
  3371. //Reload the list
  3372. listDirectory(currentPath);
  3373. }
  3374. }
  3375. });
  3376. }
  3377. function removeSharing(){
  3378. if (shareEditingObject == ""){
  3379. return
  3380. }
  3381. //The target file to remove
  3382. var selectedFile = shareEditingObject;
  3383. $.ajax({
  3384. url: "../../system/file_system/share/delete",
  3385. data: {path: selectedFile},
  3386. success: function(data){
  3387. console.log(data);
  3388. $("#qrcode").html(`<img src="img/private.png">`);
  3389. $(".shareoption").parent().addClass("disabled");
  3390. $("#sharelink").text("(Sharing Removed)");
  3391. $("#sharelink").removeAttr("href");
  3392. $("#sharingRemoveBtn").hide();
  3393. //Reload the current filelist and hide the share interface
  3394. listDirectory(currentPath);
  3395. //Reset sharing file settings
  3396. shareEditingObject = ""
  3397. shareEditingUUID = ""
  3398. }
  3399. });
  3400. }
  3401. function updateShareSettings(object){
  3402. $(object).addClass("loading");
  3403. var shareMode = $("#shareSettingForm [name='shareopt']:checked").val();
  3404. $.ajax({
  3405. url: "../../system/file_system/share/edit",
  3406. data: {uuid: shareEditingUUID, mode: shareMode},
  3407. success: function(data){
  3408. if (data.error !== undefined){
  3409. alert(data.error);
  3410. }
  3411. $(object).removeClass("loading");
  3412. $(object).html(`<i class="checkmark icon"></i> Updated`);
  3413. $(object).addClass("positive");
  3414. setTimeout(function(){
  3415. $(object).html("Update");
  3416. $(object).removeClass("positive");
  3417. }, 3000);
  3418. }
  3419. })
  3420. }
  3421. function hideShare(){
  3422. hideAllPopupWindows();
  3423. }
  3424. function toggleSidebar(useAnimation=true){
  3425. //Fixing desktop bugs on showing the sidebar
  3426. if (isMobile){
  3427. $("#directorySidebar").stop().finish().animate({left: "toggle"},200);
  3428. }else{
  3429. if ($("#directorySidebar").offset().left < 0){
  3430. $("#directorySidebar").stop().finish().animate({left: 0},200);
  3431. }else{
  3432. $("#directorySidebar").stop().finish().animate({left: -1 * directorySidebarWidth},200);
  3433. }
  3434. }
  3435. sideBarShown = !sideBarShown;
  3436. initWindowSizes(useAnimation);
  3437. }
  3438. function initWindowSizes(animate=true){
  3439. var h = $("#navibar").css("height");
  3440. var hint = $("#navibar").height();
  3441. //$("#mainWindow").css("padding-top",h);
  3442. var windowHeight = window.innerHeight - hint - 12;
  3443. //console.log(windowHeight);
  3444. if (sideBarShown){
  3445. //Resize the sidebar
  3446. $("#directorySidebar").css("top",h);
  3447. $("#directorySidebar").css("width",directorySidebarWidth);
  3448. $("#directorySidebar").css("height",windowHeight + "px");
  3449. //Resize the file viewer
  3450. $("#folderView").css("top",h);
  3451. if (window.innerWidth > 650){
  3452. if (animate){
  3453. $("#folderView").stop().finish().animate({
  3454. left: directorySidebarWidth + 'px',
  3455. width: window.innerWidth - directorySidebarWidth - 2 + "px"
  3456. },200);
  3457. }else{
  3458. $("#folderView").css({
  3459. left: directorySidebarWidth + 'px',
  3460. width: window.innerWidth - directorySidebarWidth - 2 + "px"
  3461. });
  3462. }
  3463. }else{
  3464. //Window width too small to allow resizing sidebar shown. Overlap it
  3465. if (animate){
  3466. $("#folderView").stop().finish().animate({
  3467. left: directorySidebarWidth + 'px',
  3468. width: window.innerWidth + "px"
  3469. },200);
  3470. }else{
  3471. $("#folderView").css({
  3472. left: directorySidebarWidth + 'px',
  3473. width: window.innerWidth + "px"
  3474. });
  3475. }
  3476. }
  3477. if (isChromium){
  3478. //$("#mainWindow").css("height", window.innerWidth);
  3479. }
  3480. //$("#folderView").css("left",directorySidebarWidth + "px");
  3481. $("#folderView").css("height",windowHeight + "px");
  3482. }else{
  3483. $("#folderView").css("top",h);
  3484. if (animate){
  3485. $("#folderView").stop().finish().animate({
  3486. left:'0px',
  3487. width:(window.innerWidth - 2 + "px")
  3488. },200);
  3489. }else{
  3490. $("#folderView").css({
  3491. left:'0px',
  3492. width:(window.innerWidth - 2 + "px")
  3493. });
  3494. }
  3495. $("#folderView").css("height",windowHeight + "px");
  3496. }
  3497. }
  3498. function toggleDarkTheme(){
  3499. if ($(".darkTheme").length > 0){
  3500. //Set To Whitetheme
  3501. $(".darkTheme").removeClass("darkTheme").addClass("whiteTheme");
  3502. currentTheme = "whiteTheme";
  3503. $("#darkthemebtn").attr("class","moon icon");
  3504. $("#darkthemebtn").parent().addClass("inverted");
  3505. $(".dropdown").removeClass("inverted");
  3506. setPreference("file_explorer/theme","whiteTheme");
  3507. //If in vdi mode, update desktop's listMenu as well
  3508. if (ao_module_virtualDesktop){
  3509. parent.initTheme("whiteTheme");
  3510. }
  3511. $(".rightPad").css("margin-right", "37px");
  3512. }else{
  3513. //Set to DarkTheme
  3514. $(".whiteTheme").removeClass("whiteTheme").addClass("darkTheme");
  3515. currentTheme = "darkTheme";
  3516. $("#darkthemebtn").attr("class","sun icon");
  3517. $("#darkthemebtn").parent().removeClass("inverted");
  3518. $(".dropdown").addClass("inverted");
  3519. setPreference("file_explorer/theme","darkTheme");
  3520. //If in vdi mode, update desktop's listMenu as well
  3521. if (ao_module_virtualDesktop){
  3522. parent.initTheme("darkTheme");
  3523. }
  3524. $(".rightPad").css("margin-right", "40px");
  3525. }
  3526. }
  3527. function msgbox(icon, text){
  3528. $($(".msgbox").find("span")[0]).text(text);
  3529. $($(".msgbox").find("i")[0]).attr("class", icon + " icon");
  3530. $(".msgbox").stop().finish().slideDown('fast').delay(3000).slideUp('fast', function(){
  3531. initWindowSizes(false);
  3532. });
  3533. }
  3534. //Keyboard hotkey events
  3535. $(document).keydown(function(event){
  3536. if ($(':focus').is("input")){
  3537. //Do not block operations on input fields.
  3538. return;
  3539. }
  3540. if(event.which==17 || event.which == 91){
  3541. ctrlHold = true;
  3542. }else if (event.which == 16){
  3543. shiftHold = true;
  3544. }else if (event.which == 67 && ctrlHold == true){
  3545. //Ctrl + C
  3546. if (!$(".popup").is(":visible")){
  3547. event.preventDefault();
  3548. copy();
  3549. }
  3550. }else if (event.which == 88 && ctrlHold == true){
  3551. //Ctrl + X
  3552. if (!$(".popup").is(":visible")){
  3553. event.preventDefault();
  3554. cut();
  3555. }
  3556. }else if (event.which == 65 && ctrlHold == true){
  3557. //Ctrl + A
  3558. event.preventDefault();
  3559. $(".fileObject").addClass("selected");
  3560. }else if (event.which == 78 && shiftHold == true){
  3561. //Shift + N, Open new file manager window with current path
  3562. event.preventDefault();
  3563. openPathInNewWindow(currentPath);
  3564. }else if (event.which == 86 && ctrlHold == true){
  3565. if (!$(".popup").is(":visible")){
  3566. paste();
  3567. }
  3568. }else if (event.which == 46 && shiftHold == true){
  3569. //Shift + delete
  3570. forceDelete();
  3571. }else if (event.which == 46){
  3572. //Delete
  3573. deleteFile();
  3574. }else if (event.which == 38){
  3575. //Up Arrow
  3576. if ($(".popup:visible").length == 0){
  3577. //No popup visiable
  3578. if (ctrlHold == true){
  3579. //Parenet path
  3580. parentDir();
  3581. }else{
  3582. //Select the file on the upper
  3583. selectPreviousFile(event);
  3584. }
  3585. }
  3586. }else if (event.which == 40){
  3587. //Down arrow
  3588. if ($(".popup:visible").length == 0){
  3589. //No popup visiable
  3590. selectNextFile(event);
  3591. }
  3592. }else if (event.which == 39){
  3593. //Right arrow
  3594. if ($(".popup:visible").length == 0 && viewMode == "grid"){
  3595. //No popup visiable and grid mode
  3596. selectRightFile(event);
  3597. }
  3598. }else if (event.which == 37){
  3599. //Left arrow
  3600. if ($(".popup:visible").length == 0 && viewMode == "grid"){
  3601. //No popup visiable and grid mode
  3602. selectLeftFile(event);
  3603. }
  3604. }else if (event.which == 13){
  3605. //Enter key
  3606. if ($(".fileObject.selected").length > 0){
  3607. openViaButton();
  3608. }else if ($(".fileObject.hotSearchHighlight").length > 0 && $(".fileObject.selected").length == 0){
  3609. //Hot search selection mode
  3610. }
  3611. }else if (event.which == 27){
  3612. //Esc key
  3613. hideAllPopupWindows();
  3614. $(".fileObject.selected").removeClass("selected");
  3615. }else{
  3616. //Handle generic file search by consecutive typing
  3617. if (hotSearchTimer != null){
  3618. clearTimeout(hotSearchTimer);
  3619. }
  3620. $(".fileObject.selected").removeClass("selected");
  3621. hotSearchTimer = setTimeout(function(){
  3622. exitHotSearch();
  3623. }, 1000);
  3624. if (hotSearchBuffer.length > 0 && event.key == hotSearchBuffer.substr(hotSearchBuffer.length - 1, 1)){
  3625. //Jump to next result
  3626. hotSearchOffsetIndex++;
  3627. }else{
  3628. hotSearchOffsetIndex = 0;
  3629. hotSearchBuffer+= event.key;
  3630. }
  3631. handleHotSearch(hotSearchBuffer, hotSearchOffsetIndex);
  3632. }
  3633. });
  3634. $(document).keyup(function(event){
  3635. if(event.which==17 || event.which == 91){
  3636. ctrlHold = false;
  3637. }else if (event.which == 16){
  3638. shiftHold = false;
  3639. }
  3640. });
  3641. $("#directorySidebar").on("click",function(evt){
  3642. //Clear the button holding
  3643. $(".fileObject.selected").removeClass("selected");
  3644. shiftHold = false;
  3645. ctrlHold = false;
  3646. });
  3647. //Check if localstorage is availble
  3648. function lscheck(){
  3649. var test = 'test';
  3650. try {
  3651. localStorage.setItem(test, test);
  3652. localStorage.removeItem(test);
  3653. return true;
  3654. } catch(e) {
  3655. return false;
  3656. }
  3657. }
  3658. function selectNextFile(e){
  3659. e.preventDefault();
  3660. //Check if there are no selection. If yes, select the first file object
  3661. if ($(".fileObject.selected").length == 0 && $(".fileObject").length > 0){
  3662. //Select the first file object
  3663. $($(".fileObject")[0]).addClass("selected");
  3664. return
  3665. }else if ( $(".fileObject").length == 0){
  3666. //No file in this folder
  3667. return
  3668. }
  3669. //Already contain selected file on the interface. Seleect it
  3670. var baseObject = $($(".fileObject.selected")[0]);
  3671. if ($(".fileObject.selected").length > 1){
  3672. $(".fileObject.selected").removeClass("selected");
  3673. }
  3674. if (viewMode == "list"){
  3675. //Select the next file
  3676. var nextObject = $(".fileObject").eq( $(".fileObject").index( $(baseObject) ) + 1 );
  3677. if (nextObject.length > 0){
  3678. nextObject.addClass("selected");
  3679. scrollToFileObject(nextObject);
  3680. $(baseObject).removeClass("selected");
  3681. }
  3682. }else if (viewMode == "grid"){
  3683. var colobj = getFileObjectInTheSameCol(baseObject);
  3684. var nextObject = baseObject;
  3685. for (var i = 0; i < colobj.length; i++){
  3686. if ($(colobj[i]).hasClass("selected") && i != colobj.length - 1){
  3687. nextObject = colobj[i + 1];
  3688. }
  3689. }
  3690. $(baseObject).removeClass("selected");
  3691. nextObject.addClass("selected");
  3692. scrollToFileObject(nextObject);
  3693. }
  3694. }
  3695. function selectPreviousFile(e){
  3696. e.preventDefault();
  3697. //Check if there are no selection. If yes, select the first file object
  3698. if ($(".fileObject.selected").length == 0 && $(".fileObject").length > 0){
  3699. //Select the first file object
  3700. $($(".fileObject")[$(".fileObject").length - 1]).addClass("selected");
  3701. return
  3702. }else if ( $(".fileObject").length == 0){
  3703. //No file in this folder
  3704. return
  3705. }
  3706. var baseObject = $($(".fileObject.selected")[0]);
  3707. if ($(".fileObject.selected").length > 1){
  3708. $(".fileObject.selected").removeClass("selected");
  3709. }
  3710. if (viewMode == "list"){
  3711. //Select the previous file
  3712. if ($(".fileObject").index( $(baseObject) ) -1 < 0){
  3713. return;
  3714. }
  3715. var previousObject = $(".fileObject").eq( $(".fileObject").index( $(baseObject) ) -1 );
  3716. if (previousObject.length > 0){
  3717. previousObject.addClass("selected");
  3718. scrollToFileObject(previousObject);
  3719. $(baseObject).removeClass("selected");
  3720. }
  3721. }else if (viewMode == "grid"){
  3722. var colobj = getFileObjectInTheSameCol(baseObject);
  3723. var prevObj = baseObject;
  3724. for (var i = 0; i < colobj.length; i++){
  3725. if ($(colobj[i]).hasClass("selected") && i > 0){
  3726. prevObj = colobj[i - 1];
  3727. }
  3728. }
  3729. $(baseObject).removeClass("selected");
  3730. prevObj.addClass("selected");
  3731. scrollToFileObject(prevObj);
  3732. }
  3733. }
  3734. function scrollToFileObject(fileObject){
  3735. if (viewMode == "grid"){
  3736. $('#folderView').scrollTop($(fileObject)[0].offsetTop - ($("#directorySidebar").height()/2 - 340));
  3737. }else{
  3738. $('#folderView').scrollTop($(fileObject)[0].offsetTop - ($("#directorySidebar").height()/2 - 140));
  3739. }
  3740. }
  3741. //Grid mode left right opr
  3742. function selectLeftFile(e){
  3743. e.preventDefault();
  3744. if (viewMode != "grid"){
  3745. return;
  3746. }
  3747. if ($(".fileObject.selected").length == 0 && $(".fileObject").length > 0){
  3748. //Select the first file object
  3749. $($(".fileObject")[$(".fileObject").length - 1]).addClass("selected");
  3750. return
  3751. }else if ( $(".fileObject").length == 0){
  3752. //No file in this folder
  3753. return
  3754. }
  3755. var baseObject = $($(".fileObject.selected")[0]);
  3756. if ($(".fileObject").index( $(baseObject) ) -1 < 0){
  3757. return;
  3758. }
  3759. var previousObject = $(".fileObject").eq( $(".fileObject").index( $(baseObject) ) -1 );
  3760. if (previousObject.length > 0){
  3761. previousObject.addClass("selected");
  3762. scrollToFileObject(previousObject);
  3763. $(baseObject).removeClass("selected");
  3764. }
  3765. }
  3766. function selectRightFile(e){
  3767. e.preventDefault();
  3768. if (viewMode != "grid"){
  3769. return;
  3770. }
  3771. if ($(".fileObject.selected").length == 0 && $(".fileObject").length > 0){
  3772. //Select the first file object
  3773. $($(".fileObject")[0]).addClass("selected");
  3774. return
  3775. }else if ( $(".fileObject").length == 0){
  3776. //No file in this folder
  3777. return
  3778. }
  3779. var baseObject = $($(".fileObject.selected")[0]);
  3780. var nextObject = $(".fileObject").eq( $(".fileObject").index( $(baseObject) ) + 1 );
  3781. if (nextObject.length > 0){
  3782. nextObject.addClass("selected");
  3783. scrollToFileObject(nextObject);
  3784. $(baseObject).removeClass("selected");
  3785. }
  3786. }
  3787. //Functions for getting file objects in the same collume
  3788. function getFileObjectInTheSameCol(baseFileObject){
  3789. if (viewMode != "grid"){
  3790. return;
  3791. }
  3792. var baseOffset = $(baseFileObject).offset().left;
  3793. var fileObjectInTheSameCol = [];
  3794. $(".fileObject").each(function(){
  3795. if ($(this).offset().left == baseOffset){
  3796. let thisFileObject = $(this);
  3797. fileObjectInTheSameCol.push(thisFileObject);
  3798. }
  3799. });
  3800. return fileObjectInTheSameCol;
  3801. }
  3802. //Function for getting file objects in the same row
  3803. function getFileObjectInTheSameRow(baseFileObject){
  3804. if (viewMode != "grid"){
  3805. return;
  3806. }
  3807. var baseOffset = $(baseFileObject).offset().top;
  3808. var fileObjectInTheSameRow = [];
  3809. $(".fileObject").each(function(){
  3810. if ($(this).offset().top == baseOffset){
  3811. let thisFileObject = $(this);
  3812. fileObjectInTheSameRow.push(thisFileObject);
  3813. }
  3814. });
  3815. return fileObjectInTheSameRow;
  3816. }
  3817. //Handle drag drop upload
  3818. function drop(event){
  3819. event.preventDefault();
  3820. console.log(event, event.target)
  3821. //Check if this is file upload or file move / copy function
  3822. let dt = event.dataTransfer
  3823. let files = dt.files
  3824. if (files.length > 0){
  3825. //Upload file via dragdrop
  3826. msgbox("upload",applocale.getString("message/upload/started", "Upload Started"));
  3827. let items = event.dataTransfer.items;
  3828. for (let i=0; i<items.length; i++) {
  3829. let item = items[i].webkitGetAsEntry();
  3830. if (item) {
  3831. recursiveScanFilesUpload(item);
  3832. }
  3833. }
  3834. }else{
  3835. //File transfer within system
  3836. let filedata = event.dataTransfer.getData("filedata");
  3837. if (filedata != ""){
  3838. try{
  3839. let fileList = JSON.parse(filedata);
  3840. //Check if the file objects are from the same host
  3841. let localFiles = [];
  3842. let remoteFiles = [];
  3843. fileList.forEach(file => {
  3844. if (file.hostUUID == systemUUID){
  3845. //Local file
  3846. localFiles.push(file);
  3847. }else{
  3848. //Remote files
  3849. remoteFiles.push(file);
  3850. }
  3851. });
  3852. //Start processing the local files
  3853. let currentVroot = currentPath.split(":/").shift();
  3854. clipboard = [];
  3855. //Assume all files are from the same directory
  3856. if (localFiles.length > 0){
  3857. //Check if drag drop from the same directory
  3858. let currentDirname = currentPath.split("/")
  3859. currentDirname.pop();
  3860. currentDirname = currentDirname.join("/");
  3861. let firstFileDirname = localFiles[0].filepath.split("/")
  3862. firstFileDirname.pop();
  3863. firstFileDirname = firstFileDirname.join("/");
  3864. if (currentDirname == firstFileDirname){
  3865. //Drag start and drop location are the same directory
  3866. msgbox("remove",applocale.getString("message/destIdentical", "Source and destination file names are the same"));
  3867. return;
  3868. }
  3869. let fileVroot = localFiles[0].filepath.split(":/").shift();
  3870. if (currentVroot == fileVroot){
  3871. //Same device same root. Move the file
  3872. cutMode = true;
  3873. }else{
  3874. //Same device differnet root. Copy the file
  3875. cutMode = false;
  3876. }
  3877. //Move all localFiles into clipboard
  3878. localFiles.forEach(file => {
  3879. clipboard.push(file.filepath);
  3880. });
  3881. if (useLocalstorage){
  3882. localStorage.setItem("ao/file_system/clipboard",JSON.stringify(clipboard));
  3883. if (cutMode){
  3884. localStorage.setItem("ao/file_system/cutmode","true");
  3885. }else{
  3886. localStorage.setItem("ao/file_system/cutmode","false");
  3887. }
  3888. }
  3889. //Paste all the files to the current path
  3890. console.log(clipboard);
  3891. paste();
  3892. }
  3893. }catch(ex){
  3894. console.log(ex);
  3895. msgbox("remove",applocale.getString("message/decodeFilelistFail", "File drop failed. Unable to decode filelist."));
  3896. }
  3897. }
  3898. }
  3899. }
  3900. function recursiveScanFilesUpload(item, rootpath="", base=""){
  3901. var filesInside = [];
  3902. if (item.isDirectory) {
  3903. //This is a directory
  3904. let directoryReader = item.createReader();
  3905. directoryReader.readEntries(function(entries) {
  3906. entries.forEach(function(entry) {
  3907. recursiveScanFilesUpload(entry, rootpath + item.name + "/", base);
  3908. });
  3909. });
  3910. }else{
  3911. //This is a file. Upload it
  3912. item.file(function(fileObject){
  3913. if (isChrome || isSafari){
  3914. //WebKits
  3915. console.log("Upload Target", fileObject, rootpath);
  3916. uploadFile(fileObject, undefined, currentPath + rootpath);
  3917. }else{
  3918. //Firefox. Special handling for root path.
  3919. //Updates for Firefox 84.0.2 (64-bit), which changed minor implementation on relative path in folder updates
  3920. //This section of code is deprecated since then
  3921. /*
  3922. //As firefox will keep its file input relative path, we need to remove the root folder
  3923. //name from the rootpath passed in by the webkit API
  3924. if (rootpath.substr(rootpath.length - 1, 1) == "/"){
  3925. rootpath = rootpath.substr(0, rootpath.length - 1);
  3926. }
  3927. var rootpathInfo = rootpath.split("/");
  3928. if (rootpathInfo.length > 1){
  3929. //Uploading folder to folder. Extract the folder root name
  3930. rootpathInfo.pop();
  3931. }else{
  3932. //Uploading file to folder. Do nothing
  3933. }
  3934. rootpath = rootpathInfo.join("/") + "/";
  3935. console.log("Upload Target", fileObject, rootpath);
  3936. uploadFile(fileObject, undefined, currentPath + rootpath);
  3937. */
  3938. console.log(currentPath + rootpath);
  3939. uploadFile(fileObject, undefined, currentPath + base);
  3940. }
  3941. });
  3942. }
  3943. return filesInside;
  3944. }
  3945. function showCurrentDirectoryProperties(){
  3946. var fileList = [currentPath];
  3947. console.log(fileList);
  3948. var hashPassthrough = encodeURIComponent(JSON.stringify(fileList));
  3949. ao_module_newfw({
  3950. url: "SystemAO/file_system/file_properties.html#" + hashPassthrough,
  3951. width: 340,
  3952. height: 480,
  3953. appicon: "SystemAO/file_system/img/properties.png",
  3954. title: "File Properties",
  3955. });
  3956. }
  3957. function showVrootProperties(){
  3958. var rootname = [$("#storageroot").find(".dir.item.active").attr("filepath")];
  3959. var hashPassthrough = encodeURIComponent(JSON.stringify(rootname));
  3960. ao_module_newfw({
  3961. url: "SystemAO/disk/diskprop.html#" + hashPassthrough,
  3962. width: 420,
  3963. height: 580,
  3964. appicon: "img/system/drive.svg",
  3965. title: "Disk Properties",
  3966. });
  3967. }
  3968. function openBackupManager(){
  3969. var rootname = [$("#storageroot").find(".dir.item.active").attr("filepath")];
  3970. var hashPassthrough = encodeURIComponent(JSON.stringify(rootname));
  3971. ao_module_newfw({
  3972. url: "SystemAO/disk/disk_restore.html#" + hashPassthrough,
  3973. width: 410,
  3974. height: 580,
  3975. appicon: "img/system/backup.svg",
  3976. title: "Backup & Restore",
  3977. });
  3978. }
  3979. function showFileProperties(){
  3980. //Show the file list of the selected files
  3981. if ($(".fileObject.selected").length > 0){
  3982. //Build the filelist
  3983. var fileList = [];
  3984. $(".fileObject.selected").each(function(){
  3985. var filepath = $(this).attr("filepath");
  3986. fileList.push(filepath);
  3987. });
  3988. var hashPassthrough = encodeURIComponent(JSON.stringify(fileList));
  3989. ao_module_newfw({
  3990. url: "SystemAO/file_system/file_properties.html#" + hashPassthrough,
  3991. width: 340,
  3992. height: 480,
  3993. appicon: "SystemAO/file_system/img/properties.png",
  3994. title: "File Properties",
  3995. });
  3996. }
  3997. }
  3998. function initUploadMode(){
  3999. //Get the amount of RAM on the server side to check if low memory mode should be used.
  4000. $.ajax({
  4001. url: "../../system/info/getRAMinfo",
  4002. success: function(data){
  4003. if (data.error !== undefined){
  4004. //Permission denied or other reasons that cannot access harwdare info. Use default mode
  4005. lowMemoryMode = true;
  4006. }else{
  4007. //Check if ramsize > 1.8 GB (2GB). If yes, switch to large memory upload mode
  4008. var memsize = JSON.parse(data);
  4009. if (parseFloat(memsize)/ 1024 / 1024 / 1024 >= 3.8){
  4010. console.log("[File Explorer] Entering large memory upload mode")
  4011. lowMemoryMode = false;
  4012. }
  4013. }
  4014. },
  4015. error: function(){
  4016. //Hardware mode disabled. Always use low memory upload mode instead
  4017. lowMemoryMode = true;
  4018. }
  4019. });
  4020. }
  4021. let uploadBufferedRefreshTimer;
  4022. function uploadFile(file, uuid=undefined, targetDir=undefined) {
  4023. if (lowMemoryMode){
  4024. /*
  4025. Low Memory Upload Mode
  4026. */
  4027. var filename = encodeURIComponent(file.name);
  4028. var filesize = file.size;
  4029. //Generate a new file item
  4030. let taskUUID = uuid; //For queueing objects
  4031. if (taskUUID == undefined){
  4032. //If this is a new file to be uploaded
  4033. taskUUID = appendUploadFileItem(file.name, file.size);
  4034. }
  4035. //Push to upload pending list if the max concurrent upload is reached
  4036. if (uploadingFileCount >= maxConcurrentUpload){
  4037. let uploadDir = currentPath;
  4038. if (targetDir !== undefined){
  4039. uploadDir = targetDir;
  4040. }else if (isFirefox && uploadDir == currentPath && file.webkitRelativePath != ""){
  4041. //Use the webkitRelativePath instead of the name, this is a folder upload
  4042. //Deprecated for Firefox 84.0.2 updates
  4043. /*
  4044. let pathinfo = file.webkitRelativePath.split("/");
  4045. pathinfo.pop();
  4046. let subpath = pathinfo.join("/");
  4047. uploadDir = uploadDir + subpath;
  4048. */
  4049. uploadDir = targetDir;
  4050. }
  4051. uploadPendingList.push({
  4052. File: file,
  4053. UUID: taskUUID,
  4054. TargetDir: JSON.parse(JSON.stringify(uploadDir)),
  4055. });
  4056. return
  4057. }
  4058. function updateProgressForWebSocketUpload(uuid, progress){
  4059. $(".uploadTask").each(function(){
  4060. if ($(this).attr("taskID") == uuid){
  4061. //Update this progress bar
  4062. $(this).find(".bar").css("width",progress + "%");
  4063. if (progress == 100){
  4064. //When progress = 100 and the server is not response with 200,
  4065. //That means the upload has finish and server is processing the upload
  4066. $(this).find(".progress").addClass("indeterminate");
  4067. }
  4068. }
  4069. });
  4070. }
  4071. //Open the websocket
  4072. let path = currentPath;
  4073. let protocol = "wss://";
  4074. if (location.protocol !== 'https:') {
  4075. protocol = "ws://";
  4076. }
  4077. var port = window.location.port;
  4078. if (window.location.port == ""){
  4079. if (location.protocol !== 'https:') {
  4080. port = "80";
  4081. }else{
  4082. port = "443";
  4083. }
  4084. }
  4085. let uploadDir = currentPath;
  4086. if (targetDir !== undefined){
  4087. //Not uploading to current directory. Change upload path to target
  4088. uploadDir = targetDir;
  4089. }
  4090. //Fixing Firefox path issues on or above FF48.0
  4091. if (isFirefox && file.webkitRelativePath != ""){
  4092. //Use the webkitRelativePath instead of the name, this is a folder upload
  4093. let pathinfo = file.webkitRelativePath.split("/");
  4094. pathinfo.pop();
  4095. let subpath = pathinfo.join("/");
  4096. uploadDir = uploadDir + subpath;
  4097. //console.log("Firefox Mode: ", uploadDir, "Target Dir", targetDir)
  4098. }
  4099. let socket = new WebSocket(protocol + window.location.hostname + ":" + port + "/system/file_system/lowmemUpload?filename=" + filename + "&path=" + uploadDir);
  4100. let currentSendingIndex = 0;
  4101. let chunks = Math.ceil(file.size/uploadFileChunkSize,uploadFileChunkSize);
  4102. //Define a function for sending a particular chunk
  4103. function sendChunk(id){
  4104. var offsetStart = id*uploadFileChunkSize;
  4105. var offsetEnd = id*uploadFileChunkSize + uploadFileChunkSize;
  4106. var thisblob = file.slice(offsetStart,offsetEnd);
  4107. socket.send(thisblob);
  4108. //console.log(id + "/" + chunks);
  4109. //Update progress to first percentage
  4110. var progress = id / (chunks-1) * 100.0;
  4111. if (progress > 100){
  4112. progress = 100;
  4113. }
  4114. updateProgressForWebSocketUpload(taskUUID, progress)
  4115. }
  4116. //Update all UI elements
  4117. updateUploadFileCount();
  4118. uploadingFileCount++;
  4119. //Start sending
  4120. socket.onopen = function(e) {
  4121. if (filesize < uploadFileChunkSize){
  4122. //This file is smaller than chunk size, set it to somwhere within 10% - 20% so it doesn't look like it is stuck
  4123. updateProgressForWebSocketUpload(taskUUID, 10 + Math.floor(Math.random() * Math.floor(10)))
  4124. }
  4125. //Send the first chunk
  4126. sendChunk(0);
  4127. currentSendingIndex++;
  4128. };
  4129. socket.onmessage = function(event) {
  4130. //Append to the send index
  4131. var incomingValue = event.data;
  4132. if (incomingValue == "next"){
  4133. if (currentSendingIndex == chunks + 1){
  4134. //Already finished
  4135. socket.send("done");
  4136. }else{
  4137. //Send next chunk
  4138. sendChunk(currentSendingIndex);
  4139. currentSendingIndex++;
  4140. }
  4141. }else if (incomingValue == "OK"){
  4142. //Merge completed
  4143. $(".uploadTask").each(function(){
  4144. if ($(this).attr("taskID") == taskUUID){
  4145. //Update this progress bar to completed
  4146. $(this).find(".bar").css("width","100%");
  4147. $(this).find(".progress").attr("class","ts tiny positive progress");
  4148. $(this).find(".uploadTaskRemoveIcon").show();
  4149. $(this).addClass("ended");
  4150. $.when($(this).delay(1000).fadeOut("fast")).then(function(){
  4151. $(this).remove();
  4152. updateUploadFileCount();
  4153. });
  4154. }
  4155. });
  4156. }else{
  4157. //Try to parse it as JSON
  4158. try{
  4159. var resp = JSON.parse(incomingValue.split('\\' + '"').join("\""));
  4160. console.log(resp);
  4161. if (resp.error !== undefined){
  4162. //This is an error message
  4163. msgbox("remove",resp.error);
  4164. //Update the progress bar to error
  4165. $(".uploadTask").each(function(){
  4166. if ($(this).attr("taskID") == taskUUID){
  4167. //Update this progress bar to completed
  4168. $(this).find(".bar").css("width","100%");
  4169. $(this).find(".progress").attr("class","ts tiny negative progress");
  4170. $(this).find(".uploadTaskRemoveIcon").show();
  4171. $(this).addClass("ended");
  4172. }
  4173. });
  4174. }
  4175. }catch(ex){
  4176. //Something else
  4177. console.log(incomingValue);
  4178. console.log(ex);
  4179. }
  4180. }
  4181. };
  4182. socket.onclose = function(event) {
  4183. uploadingFileCount--;
  4184. updateUploadFileCount();
  4185. //After the previous file has uploaded / errored, check if there are another file needed to be uploaded
  4186. setTimeout(function(){
  4187. if (uploadPendingList.length > 0){
  4188. let nextFile = uploadPendingList.shift();
  4189. uploadFile(nextFile.File, nextFile.UUID, nextFile.TargetDir);
  4190. }
  4191. }, 100)
  4192. };
  4193. socket.onerror = function(error) {
  4194. console.log(error.message);
  4195. console.log("Unable to open WebSocket connection. Fall back to FORM POST upload mode. (Check your nginx / reverse proxy settings!!!)")
  4196. //Try to fallback to FORM POST upload mode
  4197. lowMemoryMode = false;
  4198. uploadPendingList.push({
  4199. File: file,
  4200. UUID: taskUUID,
  4201. TargetDir: JSON.parse(JSON.stringify(targetDir)),
  4202. });
  4203. return
  4204. /*
  4205. msgbox("caution","Upload failed due to unknown reason");
  4206. //Something went wrong. Set the color to red
  4207. $(".uploadTask").each(function(){
  4208. if ($(this).attr("taskID") == taskUUID){
  4209. //Update this progress bar to completed
  4210. $(this).find(".bar").css("width","100%");
  4211. $(this).find(".progress").attr("class","ts tiny negative progress");
  4212. $(this).find(".uploadTaskRemoveIcon").show();
  4213. $(this).addClass("ended");
  4214. }
  4215. });
  4216. */
  4217. };
  4218. }else{
  4219. /*
  4220. Standard Upload Mode
  4221. (For host with RAM >= 2GB)
  4222. */
  4223. //Create the task progress Object
  4224. let taskUUID = uuid; //For queueing objects
  4225. if (taskUUID == undefined){
  4226. //If this is a new file to be uploaded
  4227. taskUUID = appendUploadFileItem(file.name, file.size);
  4228. }
  4229. //Updates 22-10-2020
  4230. //Added file upload queuing system to prevent too many request on-the-fly at the same time
  4231. if (uploadingFileCount >= maxConcurrentUpload){
  4232. //Push to upload pending list
  4233. //Sometime files will be recursively uploaded (aka retry multiple time), hence the targetDir needed to be copied as well
  4234. let uploadDir = currentPath;
  4235. if (targetDir !== undefined){
  4236. uploadDir = targetDir;
  4237. }
  4238. uploadPendingList.push({
  4239. File: file,
  4240. UUID: taskUUID,
  4241. TargetDir: JSON.parse(JSON.stringify(uploadDir)),
  4242. });
  4243. return
  4244. }
  4245. //Prase upload Form
  4246. let uploadCurrentPath = JSON.parse(JSON.stringify(currentPath));
  4247. if (targetDir !== undefined){
  4248. //The upload paramter supplied targetDir
  4249. uploadCurrentPath = targetDir;
  4250. }
  4251. let url = '../../system/file_system/upload?path=' + uploadCurrentPath
  4252. //console.log("Uploading To => ", uploadCurrentPath, targetDir, currentPath);
  4253. let formData = new FormData()
  4254. let xhr = new XMLHttpRequest()
  4255. formData.append('file', file);
  4256. formData.append('path', uploadCurrentPath);
  4257. xhr.open('POST', url, true)
  4258. xhr.upload.addEventListener("progress", function(e) {
  4259. var progress = (e.loaded * 100.0 / e.total) || 100;
  4260. $(".uploadTask").each(function(){
  4261. if ($(this).attr("taskID") == taskUUID){
  4262. //Update this progress bar
  4263. $(this).find(".bar").css("width",progress + "%");
  4264. if (progress == 100){
  4265. //When progress = 100 and the server is not response with 200,
  4266. //That means the upload has finish and server is processing the upload
  4267. $(this).find(".progress").addClass("indeterminate");
  4268. }
  4269. }
  4270. });
  4271. })
  4272. xhr.addEventListener('readystatechange', function(e) {
  4273. if (xhr.readyState == 4 && xhr.status == 200) {
  4274. //Upload process ended
  4275. //Update task status
  4276. $(".uploadTask").each(function(){
  4277. if ($(this).attr("taskID") == taskUUID){
  4278. //Update this progress bar to completed
  4279. $(this).find(".bar").css("width","100%");
  4280. $(this).find(".progress").attr("class","ts tiny positive progress");
  4281. $(this).find(".uploadTaskRemoveIcon").show();
  4282. $(this).addClass("ended");
  4283. //Update 15-11-2020
  4284. //Remove this taskbar after 3 secounds to prevent lags during > 2000 uploads
  4285. $.when($(this).delay(1000).fadeOut("fast")).then(function(){
  4286. $(this).remove();
  4287. updateUploadFileCount();
  4288. });
  4289. }
  4290. });
  4291. var resp = JSON.parse(e.target.response);
  4292. if (resp.error !== undefined){
  4293. msgbox("caution",resp.error);
  4294. //Something went wrong. Set the color to red
  4295. $(".uploadTask").each(function(){
  4296. if ($(this).attr("taskID") == taskUUID){
  4297. //Update this progress bar to completed
  4298. $(this).find(".bar").css("width","100%");
  4299. $(this).find(".progress").attr("class","ts tiny negative progress");
  4300. $(this).find(".uploadTaskRemoveIcon").show();
  4301. $(this).addClass("ended");
  4302. }
  4303. });
  4304. }
  4305. uploadingFileCount--;
  4306. //After the previous file has uploaded / errored, check if there are another file needed to be uploaded
  4307. setTimeout(function(){
  4308. if (uploadPendingList.length > 0){
  4309. let nextFile = uploadPendingList.shift();
  4310. uploadFile(nextFile.File, nextFile.UUID, nextFile.TargetDir);
  4311. }
  4312. }, 100)
  4313. }else if (xhr.readyState == 4 && xhr.status != 200) {
  4314. msgbox("remove",applocale.getString( "message/uploadFailed", "File too big or the target disk is fulled"));
  4315. console.log(xhr);
  4316. $(".uploadTask").each(function(){
  4317. if ($(this).attr("taskID") == taskUUID){
  4318. //Upload screwed up. Show negative
  4319. $(this).find(".progress").attr("class","ts tiny negative progress");
  4320. $(this).find(".uploadTaskRemoveIcon").show();
  4321. $(this).addClass("ended");
  4322. }
  4323. });
  4324. uploadingFileCount--;
  4325. //After the previous file has uploaded / errored, check if there are another file needed to be uploaded
  4326. setTimeout(function(){
  4327. if (uploadPendingList.length > 0){
  4328. let nextFile = uploadPendingList.shift();
  4329. uploadFile(nextFile.File, nextFile.UUID, nextFile.TargetDir);
  4330. }
  4331. }, 100)
  4332. }
  4333. updateUploadFileCount();
  4334. })
  4335. xhr.send(formData);
  4336. uploadingFileCount++;
  4337. updateUploadFileCount();
  4338. }
  4339. }
  4340. //Clear all finished upload tasks
  4341. function clearAllUploadTask(){
  4342. $(".uploadTask.ended").slideUp('300',function(){
  4343. $(this).remove();
  4344. updateUploadFileCount();
  4345. });
  4346. }
  4347. function toggleSearch(){
  4348. //Start search mode
  4349. $(".searchbar").slideDown("fast", function(){
  4350. initWindowSizes(true);
  4351. });
  4352. $("#searhbtn").addClass("disabled");
  4353. //Force videmode to list
  4354. viewMode = "list"
  4355. $(".videmode.button").each(function(){
  4356. $(this).addClass('disabled');
  4357. });
  4358. searchMode = true;
  4359. //Adjust the css for mobile interface
  4360. if (isMobile){
  4361. $("#searchInput").parent().parent().css("width", window.innerWidth - 135 + "px");
  4362. }
  4363. //Clear current folderlist
  4364. $("#folderList").show();
  4365. $("#folderList").html(`<div class="ts basic segment ${currentTheme}">
  4366. <div class="ts header">
  4367. <i class="arrow up icon ${currentTheme}"></i> <span class="${currentTheme}">${applocale.getString("func/search/typeToStart", "Type to Start Search")}</span>
  4368. <div class="sub header ${currentTheme}" style="margin-top:12px;">${applocale.getString("func/search/tip1", "Type something in the search bar to start searching.")}<br>
  4369. ${applocale.getString("func/search/tip2", `Start wildcard matching with "/" (slash) and your wildcard string (e.g. /*.mp3)`)}</div>
  4370. </div>
  4371. </div>`);
  4372. $("#fileList").hide();
  4373. }
  4374. function hideSearchBar(skipFilelistRefresh = false){
  4375. $(".searchbar").slideUp("fast", function(){
  4376. initWindowSizes(true);
  4377. });
  4378. $("#searchInput").val("");
  4379. $("#searhbtn").removeClass("disabled");
  4380. $(".videmode.button").each(function(){
  4381. if ($(this).attr("mode") != "list"){
  4382. $(this).removeClass('disabled');
  4383. }
  4384. });
  4385. if (skipFilelistRefresh == false){
  4386. listDirectory(currentPath);
  4387. }
  4388. searchMode = false;
  4389. }
  4390. //Handle case sensitive in keyword searching
  4391. function toggleCaseSensitive(btn){
  4392. if ($(btn).hasClass("active")){
  4393. $(btn).removeClass("active");
  4394. searchCaseSensitive = false;
  4395. }else{
  4396. $(btn).addClass("active");
  4397. searchCaseSensitive = true;
  4398. }
  4399. }
  4400. function exitHotSearch(){
  4401. hotSearchBuffer = "";
  4402. hotSearchTimer = null;
  4403. //Move the file to "selected" mode
  4404. $(".hotSearchHighlight").addClass("selected");
  4405. $(".hotSearchHighlight").removeClass("hotSearchHighlight");
  4406. }
  4407. function handleHotSearch(starting, offset){
  4408. if (offset < 0){
  4409. offset = 0;
  4410. }
  4411. starting = starting.toLowerCase();
  4412. console.log(starting);
  4413. $(".hotSearchHighlight").removeClass("hotSearchHighlight");
  4414. let files = $(".fileObject");
  4415. let matchingFiles = [];
  4416. for (var i = 0; i < files.length; i++){
  4417. let thisFile = files[i];
  4418. if ($(thisFile).attr("filename") != undefined && $(thisFile).attr("filename").length > starting.length && $(thisFile).attr("filename").substr(0, starting.length).toLowerCase() == starting){
  4419. matchingFiles.push(thisFile);
  4420. }
  4421. }
  4422. //Loopback if offset overflow
  4423. let newOffset = offset;
  4424. if (offset > matchingFiles.length - 1){
  4425. newOffset =offset % matchingFiles.length;
  4426. }
  4427. var targetHighlightingFile = matchingFiles[newOffset];
  4428. $(targetHighlightingFile).addClass("hotSearchHighlight");
  4429. scrollToFileLocation($(targetHighlightingFile));
  4430. return;
  4431. }
  4432. function handleSearch(){
  4433. var keyword = $("#searchInput").val();
  4434. $("#folderList").html(`<div class="ts basic segment ${currentTheme}">
  4435. <i class="loading spinner icon ${currentTheme}"></i> <span class="${currentTheme}">Searching</span>
  4436. </div>`);
  4437. $("#fileList").hide();
  4438. $("#fileList").html("");
  4439. $.ajax({
  4440. url: "../../system/file_system/search",
  4441. data: {path: currentPath, keyword: keyword, casesensitive: searchCaseSensitive},
  4442. success: function(data){
  4443. if (data.error !== undefined){
  4444. msgbox("remove", data.error);
  4445. }else{
  4446. //Render the filelist
  4447. console.log(data);
  4448. if (data.length == 0){
  4449. $("#folderList").show();
  4450. $("#folderList").html(`<div class="ts basic segment ${currentTheme}">
  4451. <div class="ts header ${currentTheme}">
  4452. <i class="question icon" ${currentTheme}></i> <span class="${currentTheme}">No Matching Results</span>
  4453. <div class="sub header ${currentTheme}">The host return no matching results for your keyword "${keyword}". <br>Check your spelling and if your wildcard are valid.</div>
  4454. </div>
  4455. </div>`);
  4456. }else{
  4457. renderDirectory(data);
  4458. }
  4459. }
  4460. }, error: function(){
  4461. $("#folderList").html(`<div class="ts basic segment">
  4462. <div class="ts header">
  4463. <i class="remove icon"></i> Search Error
  4464. <div class="sub header">Search timeout</div>
  4465. </div>
  4466. </div>`);
  4467. }
  4468. })
  4469. }
  4470. function handleSearchBarPress(e){
  4471. if (e.keyCode == 13 || e.key == "Enter"){
  4472. e.preventDefault();
  4473. handleSearch();
  4474. }
  4475. }
  4476. function toggleCtrl(){
  4477. ctrlHold = !ctrlHold;
  4478. }
  4479. function getUploadTaskByID(taskUUID){
  4480. var task = undefined;
  4481. $("#uploadTab").find(".uploadTask").each(function(){
  4482. if ($(this).attr("taskid") == taskUUID){
  4483. task = $(this);
  4484. }
  4485. });
  4486. return task;
  4487. }
  4488. function appendUploadFileItem(filename, filesize){
  4489. var newuuid = uuidv4();
  4490. var humanReadableFilesize = 0;
  4491. if (filesize < 0){
  4492. humanReadableFilesize = applocale.getString("message/unknownSize", "Unknown Size")
  4493. }else{
  4494. humanReadableFilesize = bytesToSize(filesize);
  4495. }
  4496. $("#uploadProgressList").append(`<div class="uploadTask" taskID="${newuuid}">
  4497. <p style="width: calc(100% - 15px);">${filename} (${humanReadableFilesize})</p>
  4498. <div class="ts tiny primary progress" style="margin-top:-12px;">
  4499. <div class="bar" style="width: 0%"></div>
  4500. </div>
  4501. <div class="uploadTaskRemoveIcon" onclick="removeThisTask(this);" style="display:none;">
  4502. <i class="remove icon"></i>
  4503. </div>
  4504. </div>`);
  4505. return newuuid;
  4506. }
  4507. function removeThisTask(object){
  4508. $(object).parent().fadeOut('fast',
  4509. function(){
  4510. $(this).remove();
  4511. updateUploadFileCount();
  4512. }
  4513. );
  4514. }
  4515. function toggleUploadList(){
  4516. $("#uploadProgressList").toggle();
  4517. if ($("#uploadProgressList").is(":visible")){
  4518. $("#hideUploadButton").html('<i class="caret down icon"></i>');
  4519. }else{
  4520. $("#hideUploadButton").html('<i class="caret up icon"></i>');
  4521. }
  4522. }
  4523. function updateUploadFileCount(){
  4524. $("#uploadCount").text(uploadingFileCount);
  4525. $("#waitingCount").text(uploadPendingList.length);
  4526. if (uploadingFileCount == 0 && $(".uploadTask").length == 0){
  4527. $("#uploadTab").hide();
  4528. }else{
  4529. $("#uploadTab").show();
  4530. }
  4531. }
  4532. function bytesToSize(bytes) {
  4533. var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];
  4534. if (bytes == 0) return '0 Byte';
  4535. var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
  4536. return Math.round(bytes / Math.pow(1024, i) * 100, 2) / 100 + ' ' + sizes[i];
  4537. }
  4538. function uuidv4() {
  4539. return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
  4540. var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
  4541. return v.toString(16);
  4542. });
  4543. }
  4544. function dropToFolder(event){
  4545. event.preventDefault();
  4546. event.stopImmediatePropagation();
  4547. console.log("Drop to folder detected");
  4548. //Extract target folder path from object
  4549. var targetPath = $(event.target).attr("filepath");
  4550. if (targetPath == ""){
  4551. return
  4552. }
  4553. //Check if this is upload or file move drag
  4554. var files = event.dataTransfer.files;
  4555. if (files.length > 0){
  4556. //Upload mode. Extract the target folder basename from path
  4557. if (targetPath.substr(targetPath.length -1,1) == "/"){
  4558. targetPath = targetPath.substr(0, targetPath.length-1);
  4559. }
  4560. var folderBase = targetPath.split("/").pop() + "/";
  4561. var items = event.dataTransfer.items;
  4562. for (let i=0; i<items.length; i++) {
  4563. let item = items[i].webkitGetAsEntry();
  4564. if (item) {
  4565. recursiveScanFilesUpload(item, folderBase, folderBase);
  4566. }
  4567. }
  4568. }else if (event.dataTransfer.getData("filedata") != ""){
  4569. var targetVroot = targetPath.split(":/").shift();
  4570. //Get the source files
  4571. var filelist = JSON.parse(event.dataTransfer.getData("filedata"));
  4572. if (filelist.length > 0){
  4573. var srcVroot = filelist[0].filepath.split(":/").shift();
  4574. if (srcVroot == targetVroot){
  4575. //Use move mode
  4576. cutMode = true;
  4577. }else{
  4578. //Use copy mode
  4579. cutMode = false;
  4580. }
  4581. //Parse the filelist
  4582. clipboard = [];
  4583. filelist.forEach(file=>{
  4584. clipboard.push(file.filepath);
  4585. });
  4586. if (useLocalstorage){
  4587. localStorage.setItem("ao/file_system/clipboard",JSON.stringify(clipboard));
  4588. localStorage.setItem("ao/file_system/cutmode","true");
  4589. }
  4590. //Perform operations
  4591. paste(targetPath, false)
  4592. }
  4593. }
  4594. }
  4595. function allowDrop(event){
  4596. event.preventDefault();
  4597. }
  4598. $(".popupWrapper").on("click",function(){
  4599. hideAllPopupWindows();
  4600. });
  4601. function hideAllPopupWindows(){
  4602. $(".popup").fadeOut(100);
  4603. $(".popupWrapper").fadeOut(100);
  4604. $('body').css("overflow","");
  4605. }
  4606. function showPopupWrapper(){
  4607. $(".popupWrapper").fadeIn('fast');
  4608. $('body').css("overflow","hidden");
  4609. }
  4610. //Handle keydown of enter on certain input boxes
  4611. function handleEnterKeyDown(event, handler){
  4612. if (event.which == 13){
  4613. handler();
  4614. }
  4615. }
  4616. //Generate a download link and press it
  4617. function generateDownloadFromURL(url, filename){
  4618. let a = document.createElement('a')
  4619. a.href = url;
  4620. a.download = filename;
  4621. document.body.appendChild(a)
  4622. a.click()
  4623. document.body.removeChild(a)
  4624. }
  4625. //Update sorting method for file listing
  4626. function updateSortingMethods(){
  4627. var method = $("#sortingMethodSelector").val();
  4628. sortMode = method;
  4629. //Save it to server side
  4630. $.ajax({
  4631. url: "../../system/file_system/sortMode",
  4632. method: "POST",
  4633. data: {opr: "set", folder: currentPath, mode: sortMode},
  4634. success: function(data){
  4635. //console.log("Sort mode saved: " + data)
  4636. refreshList();
  4637. }
  4638. });
  4639. }
  4640. function requestCSRFToken(callback){
  4641. $.ajax({
  4642. url: "../../system/csrf/new",
  4643. success: function(token){
  4644. callback(token);
  4645. }
  4646. })
  4647. }
  4648. </script>
  4649. </body>
  4650. </html>