홈 탐색 도움말
로그인
TC
/
arozos
1
0
포크 0
파일 이슈 0 풀 리퀘스트 0 위키
트리: fe4e938964
브랜치 태그
arozos
/
web
/
desktop.system

desktop.system 282 KB
히스토리 Raw

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423442444254426442744284429443044314432443344344435443644374438443944404441444244434444444544464447444844494450445144524453445444554456445744584459446044614462446344644465446644674468446944704471447244734474447544764477447844794480448144824483448444854486448744884489449044914492449344944495449644974498449945004501450245034504450545064507450845094510451145124513451445154516451745184519452045214522452345244525452645274528452945304531453245334534453545364537453845394540454145424543454445454546454745484549455045514552455345544555455645574558455945604561456245634564456545664567456845694570457145724573457445754576457745784579458045814582458345844585458645874588458945904591459245934594459545964597459845994600460146024603460446054606460746084609461046114612461346144615461646174618461946204621462246234624462546264627462846294630463146324633463446354636463746384639464046414642464346444645464646474648464946504651465246534654465546564657465846594660466146624663466446654666466746684669467046714672467346744675467646774678467946804681468246834684468546864687468846894690469146924693469446954696469746984699470047014702470347044705470647074708470947104711471247134714471547164717471847194720472147224723472447254726472747284729473047314732473347344735473647374738473947404741474247434744474547464747474847494750475147524753475447554756475747584759476047614762476347644765476647674768476947704771477247734774477547764777477847794780478147824783478447854786478747884789479047914792479347944795479647974798479948004801480248034804480548064807480848094810481148124813481448154816481748184819482048214822482348244825482648274828482948304831483248334834483548364837483848394840484148424843484448454846484748484849485048514852485348544855485648574858485948604861486248634864486548664867486848694870487148724873487448754876487748784879488048814882488348844885488648874888488948904891489248934894489548964897489848994900490149024903490449054906490749084909491049114912491349144915491649174918491949204921492249234924492549264927492849294930493149324933493449354936493749384939494049414942494349444945494649474948494949504951495249534954495549564957495849594960496149624963496449654966496749684969497049714972497349744975497649774978497949804981498249834984498549864987498849894990499149924993499449954996499749984999500050015002500350045005500650075008500950105011501250135014501550165017501850195020502150225023502450255026502750285029503050315032503350345035503650375038503950405041504250435044504550465047504850495050505150525053505450555056505750585059506050615062506350645065506650675068506950705071507250735074507550765077507850795080508150825083508450855086508750885089509050915092509350945095509650975098509951005101510251035104510551065107510851095110511151125113511451155116511751185119512051215122512351245125512651275128512951305131513251335134513551365137513851395140514151425143514451455146514751485149515051515152515351545155515651575158515951605161516251635164516551665167516851695170517151725173517451755176517751785179518051815182518351845185518651875188518951905191519251935194519551965197519851995200520152025203520452055206520752085209521052115212521352145215521652175218521952205221522252235224522552265227522852295230523152325233523452355236523752385239524052415242524352445245524652475248524952505251525252535254525552565257525852595260526152625263526452655266526752685269527052715272527352745275527652775278527952805281528252835284528552865287528852895290529152925293529452955296529752985299530053015302530353045305530653075308530953105311531253135314531553165317531853195320532153225323532453255326532753285329533053315332533353345335533653375338533953405341534253435344534553465347534853495350535153525353535453555356535753585359536053615362536353645365536653675368536953705371537253735374537553765377537853795380538153825383538453855386538753885389539053915392539353945395539653975398539954005401540254035404540554065407540854095410541154125413541454155416541754185419542054215422542354245425542654275428542954305431543254335434543554365437543854395440544154425443544454455446544754485449545054515452545354545455545654575458545954605461546254635464546554665467546854695470547154725473547454755476547754785479548054815482548354845485548654875488548954905491549254935494549554965497549854995500550155025503550455055506550755085509551055115512551355145515551655175518551955205521552255235524552555265527552855295530553155325533553455355536553755385539554055415542554355445545554655475548554955505551555255535554555555565557555855595560556155625563556455655566556755685569557055715572557355745575557655775578557955805581558255835584558555865587558855895590559155925593559455955596559755985599560056015602560356045605560656075608560956105611561256135614561556165617561856195620562156225623562456255626562756285629563056315632563356345635563656375638563956405641564256435644564556465647564856495650565156525653565456555656565756585659566056615662566356645665566656675668566956705671567256735674567556765677567856795680568156825683568456855686568756885689569056915692569356945695569656975698569957005701570257035704570557065707570857095710571157125713571457155716571757185719572057215722572357245725572657275728572957305731573257335734573557365737573857395740574157425743574457455746574757485749575057515752575357545755575657575758575957605761576257635764576557665767576857695770577157725773577457755776577757785779578057815782578357845785578657875788578957905791579257935794579557965797579857995800580158025803580458055806580758085809581058115812581358145815581658175818581958205821582258235824582558265827582858295830583158325833583458355836583758385839584058415842584358445845584658475848584958505851585258535854585558565857585858595860586158625863586458655866586758685869587058715872587358745875587658775878587958805881588258835884588558865887588858895890589158925893589458955896589758985899590059015902590359045905590659075908590959105911591259135914591559165917591859195920592159225923592459255926592759285929593059315932593359345935593659375938593959405941594259435944594559465947594859495950595159525953595459555956595759585959596059615962596359645965596659675968596959705971597259735974597559765977597859795980598159825983598459855986598759885989599059915992599359945995599659975998599960006001600260036004600560066007600860096010601160126013601460156016601760186019602060216022602360246025602660276028602960306031603260336034603560366037603860396040604160426043604460456046604760486049605060516052605360546055605660576058605960606061606260636064606560666067606860696070607160726073607460756076607760786079608060816082608360846085608660876088608960906091609260936094609560966097609860996100610161026103610461056106610761086109611061116112611361146115611661176118611961206121612261236124612561266127612861296130613161326133613461356136613761386139614061416142614361446145614661476148614961506151615261536154615561566157615861596160616161626163616461656166616761686169617061716172617361746175617661776178617961806181618261836184618561866187618861896190619161926193619461956196619761986199620062016202620362046205620662076208620962106211621262136214621562166217621862196220622162226223622462256226622762286229623062316232623362346235623662376238623962406241624262436244624562466247624862496250625162526253625462556256625762586259626062616262626362646265626662676268626962706271627262736274627562766277627862796280628162826283628462856286628762886289629062916292629362946295629662976298629963006301630263036304630563066307630863096310631163126313631463156316631763186319632063216322632363246325632663276328632963306331633263336334633563366337633863396340634163426343634463456346634763486349635063516352635363546355635663576358635963606361636263636364636563666367636863696370637163726373637463756376637763786379638063816382638363846385638663876388638963906391639263936394639563966397639863996400640164026403640464056406640764086409641064116412641364146415641664176418641964206421642264236424642564266427642864296430643164326433643464356436643764386439644064416442644364446445644664476448644964506451645264536454645564566457645864596460646164626463646464656466646764686469647064716472647364746475647664776478647964806481648264836484648564866487648864896490649164926493649464956496649764986499650065016502650365046505650665076508650965106511651265136514651565166517651865196520652165226523652465256526652765286529653065316532653365346535653665376538653965406541654265436544654565466547654865496550655165526553655465556556655765586559656065616562656365646565656665676568656965706571657265736574657565766577657865796580658165826583658465856586658765886589659065916592659365946595659665976598659966006601660266036604660566066607660866096610661166126613661466156616661766186619662066216622662366246625662666276628662966306631663266336634663566366637663866396640664166426643664466456646664766486649665066516652665366546655665666576658665966606661666266636664666566666667666866696670667166726673667466756676667766786679668066816682668366846685668666876688668966906691669266936694669566966697669866996700670167026703670467056706670767086709671067116712671367146715671667176718671967206721672267236724672567266727672867296730673167326733673467356736673767386739674067416742674367446745674667476748674967506751675267536754675567566757675867596760676167626763676467656766676767686769677067716772677367746775677667776778677967806781678267836784678567866787678867896790679167926793679467956796679767986799680068016802680368046805680668076808680968106811681268136814681568166817681868196820682168226823682468256826682768286829683068316832683368346835683668376838683968406841684268436844 
  1. <html>
    2. 

  2. 

  3. <head>
    4. 

  4.     <title>ArozOS Desktop</title>
    5. 

  5.     <meta charset="UTF-8">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <link rel="stylesheet" href="./script/semantic/semantic.min.css">
    8. 

  8.     <link id="fwcss" rel="stylesheet" href="./script/ao.css">
    9. 

  9.     <link rel="stylesheet" href="./script/contextmenu.css">
    10. 

  10.     <link rel="stylesheet" href="./SystemAO/desktop/script/jsCalendar/source/jsCalendar.css">
    11. 

  11.     <script type="text/javascript" src="./script/jquery.min.js"></script>
    12. 

  12.     <script type="text/javascript" src="./script/semantic/semantic.min.js"></script>
    13. 

  13.     <script type="text/javascript" src="./script/ao_module.js"></script>
    14. 

  14.     <script type="text/javascript" src="./SystemAO/desktop/script/jsCalendar/source/jsCalendar.js"></script>
    15. 

  15.     <script type="text/javascript" src="./script/applocale.js"></script>
    16. 

  16.     <!-- <script type="text/javascript" src="./script/html2canvas.min.js"></script> -->
    17. 

  17.     <link rel="icon" href="img/system/favicon.png">
    18. 

  18.     <style>
    19. 

  19.         body {
    20. 

  20.             background-repeat: no-repeat;
    21. 

  21.             background-size: cover;
    22. 

  22.             background-position: center;
    23. 

  23.             background-image: url('img/desktop/bg/init.jpg');
    24. 

  24.             width: 100%;
    25. 

  25.             height: 100%;
    26. 

  26.             overflow: hidden;
    27. 

  27.             line-height: 1.4385em;
    28. 

  28.         }
    29. 

  29. 

  30.         body:not(.darkTheme){
    31. 

  31.             color: #5a5a5a;
    32. 

  32.         }
    33. 

  33. 

  34.         body.darkTheme{
    35. 

  35.             color: #f0f0f0;
    36. 

  36.         }
    37. 

  37. 

  38.         * {
    39. 

  39.             position: relative;
    40. 

  40.             font-family: "SF Pro TC","SF Pro Text","SF Pro Icons","PingFang TC","Helvetica Neue","Helvetica","Arial","Microsoft JhengHei",wf_SegoeUI,"Segoe UI",Segoe,"Segoe WP",Tahoma,Verdana,Ubuntu,"Bitstream Vera Sans","DejaVu Sans",Tahoma,微軟正黑體,"LiHei Pro","WenQuanYi Micro Hei","Droid Sans Fallback","AR PL UMing TW",Roboto,"Helvetica Neue","Hiragino Maru Gothic ProN",メイリオ,"ヒラギノ丸ゴ ProN W4",Meiryo,"Droid Sans",sans-serif;
    41. 

  41.             box-sizing: border-box;
    42. 

  42.             letter-spacing: -.02em;
    43. 

  43.         }
    44. 

  44. 

  45.         .ui.button{
    46. 

  46.             background-color: #eeeeee;
    47. 

  47.         }
    48. 

  48. 

  49.         .ui.progress{
    50. 

  50.             background-color: #eeeeee;
    51. 

  51.         }
    52. 

  52.         
    53. 

  53.         .backgroundFrame {
    54. 

  54.             height: 100%;
    55. 

  55.             min-width: 100%;
    56. 

  56.             background-repeat: no-repeat;
    57. 

  57.             background-size: cover;
    58. 

  58.             border: 0px solid transparent;
    59. 

  59.             background-position: center;
    60. 

  60.             position: absolute;
    61. 

  61.             opacity: 0;
    62. 

  62.             top: 0;
    63. 

  63.             left: 0;
    64. 

  64.             -webkit-transition: opacity 2s ease-in-out;
    65. 

  65.             -moz-transition: opacity 2s ease-in-out;
    66. 

  66.             -o-transition: opacity 2s ease-in-out;
    67. 

  67.             transition: opacity 2s ease-in-out;
    68. 

  68. 

  69.         }
    70. 

  70.         
    71. 

  71.         .background-wrapper {
    72. 

  72.             border: 0px solid transparent;
    73. 

  73.             overflow: hidden;
    74. 

  74.             width: 100%;
    75. 

  75.             height: 100%;
    76. 

  76.             position: fixed;
    77. 

  77.             left: 0px;
    78. 

  78.             top: 0px;
    79. 

  79.             user-select: none;
    80. 

  80.             -moz-user-select: none;
    81. 

  81.             -webkit-user-drag: none;
    82. 

  82.             -webkit-user-select: none;
    83. 

  83.             -ms-user-select: none;
    84. 

  84.         }
    85. 

  85.         
    86. 

  86.         .showBackground {
    87. 

  87.             opacity: 1;
    88. 

  88.         }
    89. 

  89.         
    90. 

  90.         .icon-wrapper {
    91. 

  91.             height: 100%;
    92. 

  92.             width: 100%;
    93. 

  93.             position: fixed;
    94. 

  94.             top: 0px;
    95. 

  95.             left: 0px;
    96. 

  96.             padding: 5px;
    97. 

  97.         }
    98. 

  98.         
    99. 

  99.         .launchIcon {
    100. 

  100.             position: fixed;
    101. 

  101.             cursor: pointer;
    102. 

  102.             padding: 2px;
    103. 

  103.         }
    104. 

  104.         
    105. 

  105.         .launchIconImage.small {
    106. 

  106.             width: 48px;
    107. 

  107.             height: 48px;
    108. 

  108.         }
    109. 

  109.         
    110. 

  110.         .launchIconImage.medium {
    111. 

  111.             width: 68px;
    112. 

  112.             height: 68px;
    113. 

  113.         }
    114. 

  114.         
    115. 

  115.         .launchIconImage.big {
    116. 

  116.             width: 82px;
    117. 

  117.             height: 82px;
    118. 

  118.         }
    119. 

  119.         
    120. 

  120.         .launchIconWrapper {
    121. 

  121.             padding-bottom: 0.6em;
    122. 

  122.             max-height: calc(100% - 4px);
    123. 

  123.             width: calc(100% - 4px);
    124. 

  124.             margin: 2px;
    125. 

  125.             border-radius: 3px;
    126. 

  126.             position: absolute;
    127. 

  127.         }
    128. 

  128.         
    129. 

  129.         .launchIconWrapper.selected {
    130. 

  130.             background: rgba(250, 250, 250, 0.4) !important;
    131. 

  131.         }
    132. 

  132.         
    133. 

  133.         .launchIconText {
    134. 

  134.             color: white;
    135. 

  135.             text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    136. 

  136.             text-align: center;
    137. 

  137.             text-overflow: ellipsis;
    138. 

  138.             overflow: hidden;
    139. 

  139.             word-break: break-all;
    140. 

  140.             width: 100%;
    141. 

  141.             font-variant-numeric: tabular-nums lining-nums;
    142. 

  142.         }
    143. 

  143.         
    144. 

  144.         .launchIconWrapper:hover {
    145. 

  145.             background: rgba(250, 250, 250, 0.2);
    146. 

  146.         }
    147. 

  147.         
    148. 

  148.         .launchIconText.small {
    149. 

  149.             margin-top: -3px;
    150. 

  150.             font-size: 70%;
    151. 

  151.             line-height: 1.55em;
    152. 

  152.             /*
    153. 

  153.                 Fixed the issue of text being trimmed off due to lineheight setting
    154. 

  154.             */
    155. 

  155.             font-family: sans-serif !important;
    156. 

  156.         }
    157. 

  157.         
    158. 

  158.         .launchIconText.medium {
    159. 

  159.             margin-top: -2px;
    160. 

  160.             font-size: 90%;
    161. 

  161.             line-height: 1.2em;
    162. 

  162.         }
    163. 

  163.         
    164. 

  164.         .launchIconText.big {
    165. 

  165.             margin-top: -6px;
    166. 

  166.             font-size: 110%;
    167. 

  167.         }
    168. 

  168. 

  169.         .launchIconText.longTextSplit{
    170. 

  170.             white-space: nowrap;
    171. 

  171.             overflow: hidden;
    172. 

  172.             text-overflow: ellipsis;
    173. 

  173.         }
    174. 

  174.         
    175. 

  175.         .navimenu {
    176. 

  176.             position: fixed;
    177. 

  177.             z-index: 1110;
    178. 

  178.             width: 100%;
    179. 

  179.             height: 36px;
    180. 

  180.             left: 0px;
    181. 

  181.             bottom: 0px;
    182. 

  182.             padding-left: 8px;
    183. 

  183.             padding-right: 8px;
    184. 

  184.         }
    185. 

  185. 

  186.         /* Connection loss indicator */
    187. 

  187.         #connectionLost{
    188. 

  188.             position: fixed;
    189. 

  189.             z-index: 1000;
    190. 

  190.             right: 1em;
    191. 

  191.             top: calc(30px + 1em);
    192. 

  192.             display: none;
    193. 

  193.         }
    194. 

  194. 

  195.         #connectionLost .ui.card{
    196. 

  196.             box-shadow: none;
    197. 

  197.             border: 0px solid transparent;
    198. 

  198.             color: white;
    199. 

  199.         }
    200. 

  200. 

  201.         /* Theme Color css settings */
    202. 

  202.         .themeColor {
    203. 

  203.             background-color: rgba(14,14,14,0.5);
    204. 

  204.             backdrop-filter: blur(4px);
    205. 

  205.         }
    206. 

  206. 

  207.         .themeColorSolid{
    208. 

  208.             background-color: rgba(14,14,14,0.9);
    209. 

  209.             backdrop-filter: blur(4px);
    210. 

  210.         }
    211. 

  211.         
    212. 

  212.         .navimenu .item {
    213. 

  213.             height: 36px;
    214. 

  214.             display: inline-block;
    215. 

  215.             vertical-align: top;
    216. 

  216.         }
    217. 

  217.         
    218. 

  218.         .navimenu .item.padding {
    219. 

  219.             display: inline-block;
    220. 

  220.             width: 12px;
    221. 

  221.         }
    222. 

  222.         
    223. 

  223.         .navimenu .item.clickable:hover {
    224. 

  224.             background-color: rgba(250, 250, 250, 0.2);
    225. 

  225.             cursor: pointer;
    226. 

  226.         }
    227. 

  227.         /* Floatwindow control button related css*/
    228. 

  228.         
    229. 

  229.         .navimenu .item.floatWindowButton {
    230. 

  230.             padding: 8px;
    231. 

  231.             padding-top: 10px;
    232. 

  232.             vertical-align: top;
    233. 

  233.             width: 200px;
    234. 

  234.             overflow: hidden;
    235. 

  235.             font-size: 90%;
    236. 

  236.             text-overflow: ellipsis;
    237. 

  237.             white-space: nowrap;
    238. 

  238.             word-break: break-all;
    239. 

  239.             color: white;
    240. 

  240.         }
    241. 

  241.         
    242. 

  242.         .navimenu .item.floatWindowButton .floatWindowAppIcon {
    243. 

  243.             height: 20px;
    244. 

  244.             margin-top: -2px;
    245. 

  245.             margin-right: 8px;
    246. 

  246.             display: inline-block;
    247. 

  247.         }
    248. 

  248.         
    249. 

  249.         .navimenu .item.floatWindowButton .floatWindowTitle {
    250. 

  250.             display: inline;
    251. 

  251.             color: white;
    252. 

  252.             padding-top: 5px;
    253. 

  253.             vertical-align: top;
    254. 

  254.         }
    255. 

  255.         
    256. 

  256.         .navimenu .item.floatWindowButton.hideText {
    257. 

  257.             width: 36px;
    258. 

  258.         }
    259. 

  259.         
    260. 

  260.         .navimenu .item.floatWindowButton.hideText .floatWindowTitle {
    261. 

  261.             display: none;
    262. 

  262.         }
    263. 

  263.         
    264. 

  264.         .navimenu .item.floatWindowButton.hideText .floatWindowAppIcon {
    265. 

  265.             margin-right: 0px;
    266. 

  266.         }
    267. 

  267.         
    268. 

  268.         #fwdragpanel {
    269. 

  269.             position: fixed;
    270. 

  270.             width: 100%;
    271. 

  271.             height: 100%;
    272. 

  272.             top: 0px;
    273. 

  273.             left: 0px;
    274. 

  274.             z-index: 100;
    275. 

  275.             display: none;
    276. 

  276.         }
    277. 

  277. 

  278.         #tfwdragpanel{
    279. 

  279.             position: fixed;
    280. 

  280.             width: 100%;
    281. 

  281.             height: 100%;
    282. 

  282.             top: 0px;
    283. 

  283.             left: 0px;
    284. 

  284.             z-index: 500;
    285. 

  285.             display: none;
    286. 

  286.         }
    287. 

  287.         
    288. 

  288.         #stackedWindowList {
    289. 

  289.             position: fixed;
    290. 

  290.             z-index: 1112;
    291. 

  291.             left: 0px;
    292. 

  292.             bottom: 36px;
    293. 

  293.             width: 300px;
    294. 

  294.             padding-bottom: 4px;
    295. 

  295.             display: none;
    296. 

  296.         }
    297. 

  297.         
    298. 

  298.         #stackedWindowList .item {
    299. 

  299.             padding: 6px;
    300. 

  300.             display: inline-block;
    301. 

  301.             color: white;
    302. 

  302.             width: 100%;
    303. 

  303.         }
    304. 

  304.         
    305. 

  305.         #stackedWindowList .item img {
    306. 

  306.             display: inline-block;
    307. 

  307.             vertical-align: bottom;
    308. 

  308.             width: 20px;
    309. 

  309.             height: 20px;
    310. 

  310.             margin-right: 12px;
    311. 

  311.             margin-top: 0px;
    312. 

  312.             margin-left: 4px;
    313. 

  313.         }
    314. 

  314.         
    315. 

  315.         #stackedWindowList .item span {
    316. 

  316.             overflow: hidden;
    317. 

  317.             word-break: break-all;
    318. 

  318.             text-overflow: ellipsis;
    319. 

  319.             white-space: nowrap;
    320. 

  320.             width: calc(100% - 2em);
    321. 

  321.             display: inline-block;
    322. 

  322.         }
    323. 

  323.         
    324. 

  324.         #stackedWindowList .item.clickable:hover {
    325. 

  325.             background-color: rgba(250, 250, 250, 0.2);
    326. 

  326.             cursor: pointer;
    327. 

  327.         }
    328. 

  328.         
    329. 

  329.         #stackedWindowList .item .closebtn {
    330. 

  330.             position: absolute;
    331. 

  331.             right: 0px;
    332. 

  332.             top: 8px;
    333. 

  333.         }
    334. 

  334.         
    335. 

  335.         #stackedWindowList .item .closebtn>img {
    336. 

  336.             height: 15px;
    337. 

  337.             width: 15px;
    338. 

  338.         }
    339. 

  339.         
    340. 

  340.         #listMenu {
    341. 

  341.             position: fixed;
    342. 

  342.             bottom: 36px;
    343. 

  343.             left: 0px;
    344. 

  344.             height: 500px;
    345. 

  345.             width: 400px;
    346. 

  346.             background-color: #fcffff;
    347. 

  347.             box-shadow: 3px 3px 5px 0px rgba(207, 207, 207, 0.37);
    348. 

  348.             z-index: 1113;
    349. 

  349.         }
    350. 

  350. 

  351.         #listMenu.darkTheme{
    352. 

  352.             background-color: #242330;
    353. 

  353.             color: white;
    354. 

  354.             -webkit-box-shadow: 7px -6px 7px -1px rgba(92,92,92,0.2);
    355. 

  355.             -moz-box-shadow: 7px -6px 7px -1px rgba(92,92,92,0.2);
    356. 

  356.             box-shadow: 7px -6px 7px -1px rgba(92,92,92,0.2);
    357. 

  357.         }
    358. 

  358.         
    359. 

  359.         #listMenu .searchBar{
    360. 

  360.             width: 100%;
    361. 

  361.             border-bottom: 2px solid #34b7eb;
    362. 

  362.         }
    363. 

  363. 

  364.         i.darkTheme{
    365. 

  365.             color: white;
    366. 

  366.         }
    367. 

  367. 

  368.         #listMenu #searchBar.darkTheme::selection{
    369. 

  369.             background: white;
    370. 

  370.         }
    371. 

  371. 

  372.         #listMenu.darkTheme .searchBar input{
    373. 

  373.             background-color: #17161f !important;
    374. 

  374.             color: white !important;
    375. 

  375.             border: 1px solid #17161f;
    376. 

  376.         }
    377. 

  377.         
    378. 

  378.         #listMenu .listItemWrapper {
    379. 

  379.             overflow: hidden;
    380. 

  380.             height: 462px;
    381. 

  381.         }
    382. 

  382.         
    383. 

  383.         .listItemWrapper .groups{
    384. 

  384.             position: relative;
    385. 

  385.         }
    386. 

  386. 

  387.         #listMenu .listItemWrapper .groups {
    388. 

  388.             background-color: #f5f5f5;
    389. 

  389.             width: 120px;
    390. 

  390.             height: 100%;
    391. 

  391.             display: inline-block;
    392. 

  392.             overflow-y: auto;
    393. 

  393.             padding-top: 8px;
    394. 

  394.         }
    395. 

  395. 

  396.         #listMenu.darkTheme .listItemWrapper .groups {
    397. 

  397.             background-color: #17161f;
    398. 

  398.             color: white;
    399. 

  399.         }
    400. 

  400.         
    401. 

  401.         #listMenu .listItemWrapper .groups .item {
    402. 

  402.             padding-left: 7px;
    403. 

  403.             padding-bottom: 6px;
    404. 

  404.             padding-top: 6px;
    405. 

  405.             cursor: pointer;
    406. 

  406.         }
    407. 

  407.         
    408. 

  408.         #listMenu .listItemWrapper .groups .item.selected {
    409. 

  409.             color: #34b7eb;
    410. 

  410.         }
    411. 

  411.         
    412. 

  412.         #listMenu .listItemWrapper .groups .item:hover {
    413. 

  413.             background-color: #dedede;
    414. 

  414.         }
    415. 

  415. 

  416.         #listMenu.darkTheme .listItemWrapper .groups .item:hover {
    417. 

  417.             background-color: #242330;
    418. 

  418.         }
    419. 

  419.         
    420. 

  420.         #listMenu .listItemWrapper .items {
    421. 

  421.             height: 100%;
    422. 

  422.             width: calc(100% - 120px - 5px);
    423. 

  423.             display: inline-block;
    424. 

  424.             overflow-y: auto;
    425. 

  425.             padding-top: 8px;
    426. 

  426.             box-shadow: -2px 0px 5px 0px rgba(194, 194, 194, 0.5);
    427. 

  427.             vertical-align: top;
    428. 

  428.         }
    429. 

  429. 

  430.         #listMenu.darkTheme .listItemWrapper .items {
    431. 

  431.             box-shadow: 0px 0px 0px 0px transparent;
    432. 

  432.         }
    433. 

  433.         
    434. 

  434.         #listMenu .listItemWrapper .items .item {
    435. 

  435.             padding-left: 12px;
    436. 

  436.             padding-top: 8px;
    437. 

  437.             padding-bottom: 8px;
    438. 

  438.             cursor: pointer;
    439. 

  439.         }
    440. 

  440.         
    441. 

  441.         #listMenu .listItemWrapper .items .item:hover {
    442. 

  442.             background-color: #f5f5f5;
    443. 

  443.         }
    444. 

  444. 

  445.         #listMenu.darkTheme .listItemWrapper .items .item:hover {
    446. 

  446.             background-color: #17161f !important;
    447. 

  447.             margin-right: 5px;
    448. 

  448.         }
    449. 

  449.         
    450. 

  450.         #listMenu .listItemWrapper .items .item img {
    451. 

  451.             width: 26px;
    452. 

  452.             margin-right: 12px;
    453. 

  453.             vertical-align: middle;
    454. 

  454.         }
    455. 

  455.         
    456. 

  456.         #listMenu .poweroption {
    457. 

  457.             position: absolute;
    458. 

  458.             bottom: 0px;
    459. 

  459.             left: 0px;
    460. 

  460.             padding: 6px;
    461. 

  461.             padding-left: 7px;
    462. 

  462.             width: 100%;
    463. 

  463.             cursor: pointer;
    464. 

  464.         }
    465. 

  465.         
    466. 

  466.         #listMenu .poweroption:hover {
    467. 

  467.             background-color: #dedede;
    468. 

  468.         }
    469. 

  469. 

  470.         #listMenu.darkTheme .poweroption:hover {
    471. 

  471.             background-color: #242330;
    472. 

  472.         }
    473. 

  473.         
    474. 

  474.         #contextmenu {
    475. 

  475.             position: fixed;
    476. 

  476.             z-index: 3000;
    477. 

  477.             left: 20px;
    478. 

  478.             top: 20px;
    479. 

  479.         }
    480. 

  480.         
    481. 

  481.         #contextmenu .item {
    482. 

  482.             padding: 0.6em 1em !important;
    483. 

  483.         }
    484. 

  484.         
    485. 

  485.         #subcontextmenu .item {
    486. 

  486.             padding: 0.6em 1em !important;
    487. 

  487.         }
    488. 

  488.         
    489. 

  489.         #selectionPanel {
    490. 

  490.             background-color: rgba(39, 108, 227, 0.3);
    491. 

  491.             border: 1px solid #276ce3;
    492. 

  492.             position: fixed;
    493. 

  493.             height: 100px;
    494. 

  494.             width: 100px;
    495. 

  495.             display: none;
    496. 

  496.         }
    497. 

  497.         
    498. 

  498.         .renameInput {
    499. 

  499.             background-color: white;
    500. 

  500.             border: 1px solid black;
    501. 

  501.             width: calc(100% - 4px);
    502. 

  502.             margin-left: 4px;
    503. 

  503.             position: absolute;
    504. 

  504.             resize: none;
    505. 

  505. 

  506.             outline: none;
    507. 

  507.             border: 1px solid #0c0c0f;
    508. 

  508.             -webkit-box-shadow: none;
    509. 

  509.             -moz-box-shadow: none;
    510. 

  510.             box-shadow: none;
    511. 

  511. 

  512.         }
    513. 

  513.         
    514. 

  514.         .renameInput.big {
    515. 

  515.             bottom: 0px;
    516. 

  516.             left: 0px;
    517. 

  517.             font-size: 16px;
    518. 

  518.             line-height: 1;
    519. 

  519.         }
    520. 

  520.         
    521. 

  521.         .renameInput.medium {
    522. 

  522.             bottom: 8px;
    523. 

  523.             left: 0px;
    524. 

  524.             height: 32px;
    525. 

  525.             font-size: 12px;
    526. 

  526.             line-height: 1;
    527. 

  527.         }
    528. 

  528.         
    529. 

  529.         .renameInput.small {
    530. 

  530.             bottom: 3px;
    531. 

  531.             left: 0px;
    532. 

  532.             height: 24px;
    533. 

  533.             font-size: 11px;
    534. 

  534.             line-height: 1;
    535. 

  535.         }
    536. 

  536. 

  537.         #statusbar{
    538. 

  538.             z-index:0;
    539. 

  539.             width:100%;
    540. 

  540.             height:28px;
    541. 

  541.             position: absolute;
    542. 

  542.             background-color: rgba(0,0,0,0.9);
    543. 

  543.             color:white;
    544. 

  544.             backdrop-filter: blur(4px);
    545. 

  545.             text-align:center;
    546. 

  546.             display: flex;
    547. 

  547.             justify-content: space-between;
    548. 

  548.         }
    549. 

  549. 

  550.         .clock{
    551. 

  551.             text-align: center;
    552. 

  552.             cursor:pointer; 
    553. 

  553.             user-select: none;
    554. 

  554.         }
    555. 

  555. 

  556.         .statusbarpadding{
    557. 

  557.             padding-top: 0.2em;
    558. 

  558.         }
    559. 

  559. 

  560.         .hostname{
    561. 

  561.             text-align:left; 
    562. 

  562.             pointer-events:none;
    563. 

  563.             padding-left:18px;
    564. 

  564.             white-space: nowrap;
    565. 

  565.             user-select: none;
    566. 

  566.         }
    567. 

  567. 

  568.         .quicktools{
    569. 

  569.             padding-left: 0.7em;
    570. 

  570.             text-align:center; 
    571. 

  571.             height: 100%;
    572. 

  572.         }
    573. 

  573. 

  574.         .quicktools:hover{
    575. 

  575.             background-color: rgba(240,240,240,0.2);
    576. 

  576.         }
    577. 

  577. 

  578.         .qtwrapper{
    579. 

  579.             padding:4px;
    580. 

  580.             padding-right: 8px;
    581. 

  581.             cursor:pointer;
    582. 

  582.         }
    583. 

  583. 

  584.         .notificationbar{
    585. 

  585.             position: fixed;
    586. 

  586.             top:28px;
    587. 

  587.             left: 0;
    588. 

  588.             width:100%;
    589. 

  589.             height: calc(100% - 28px);
    590. 

  590.             z-index:1114;
    591. 

  591.         }
    592. 

  592. 

  593.         .notificationbar .content{
    594. 

  594.             position: relative;
    595. 

  595.             background-color:white;
    596. 

  596.             margin-top:6px;
    597. 

  597.             margin-left: auto;
    598. 

  598.             margin-right: auto;
    599. 

  599.             width:30%;
    600. 

  600.             min-width:650px;
    601. 

  601.             height:400px;
    602. 

  602.             padding: 3px;
    603. 

  603.             border-radius: 5px;
    604. 

  604.             pointer-events: auto;
    605. 

  605.         }
    606. 

  606. 

  607.         .notificationbar #notificationlist{
    608. 

  608.             position: relative;
    609. 

  609.             width: calc(100% - 302px); 
    610. 

  610.             padding:8px; 
    611. 

  611.             margin-top:5px; 
    612. 

  612.             padding-top:22px; 
    613. 

  613.             overflow-y:auto; 
    614. 

  614.             overflow-x:hidden; 
    615. 

  615.             height: calc(100% - 12px);
    616. 

  616.         }
    617. 

  617. 

  618.         .notificationbar .cover{
    619. 

  619.             backdrop-filter: blur(2px);
    620. 

  620.             -webkit-backdrop-filter: blur(2px);
    621. 

  621.             position:fixed;
    622. 

  622.             top:28px;
    623. 

  623.             left:0;
    624. 

  624.             width:100%;
    625. 

  625.             height: calc(100%);
    626. 

  626.             pointer-events: auto;
    627. 

  627.         }
    628. 

  628. 

  629.         @supports not (backdrop-filter: blur(2px)) {
    630. 

  630.             .notificationbar .cover{
    631. 

  631.                 /*
    632. 

  632.                 //Replaced with Javascript implementation on Firefox
    633. 

  633.                 background-color: rgba(24,24,24,0.3);
    634. 

  634.                 */
    635. 

  635.             }
    636. 

  636.             
    637. 

  637.             #bgwrapper{
    638. 

  638.                 transition: all 0.5s ease;
    639. 

  639.             }
    640. 

  640. 

  641.             #iconwrapper{
    642. 

  642.                 transition: all 0.5s ease;
    643. 

  643.             }
    644. 

  644. 

  645.             #navimenu{
    646. 

  646.                 transition: all 0.5s ease;
    647. 

  647.             }
    648. 

  648. 

  649. 

  650.         }
    651. 

  651. 

  652.         .notification .title{
    653. 

  653.             font-weight:bold;
    654. 

  654.             font-size:120%;
    655. 

  655.         }
    656. 

  656. 

  657.         .notification .notifycontent{
    658. 

  658.             margin-top:-12px;
    659. 

  659.         }
    660. 

  660. 

  661.         .notificationbar .clearall{
    662. 

  662.             position:absolute;
    663. 

  663.             top:0px;
    664. 

  664.             right:4px;
    665. 

  665.             cursor:pointer;
    666. 

  666.         }
    667. 

  667. 

  668.         .nonotification{
    669. 

  669.             opacity: 0.3;
    670. 

  670.             pointer-events:none;
    671. 

  671.             position:absolute;
    672. 

  672.             margin-top:9em;
    673. 

  673.             width:100%;
    674. 

  674.             user-select: none;
    675. 

  675.         }
    676. 

  676. 

  677.         .notification.object .closebtn{
    678. 

  678.             position:absolute;
    679. 

  679.             top:3px;
    680. 

  680.             right:3px;
    681. 

  681.             cursor:pointer;
    682. 

  682.         }
    683. 

  683. 

  684.         .notification.object{
    685. 

  685.             position: relative;
    686. 

  686.             padding-left:7px;
    687. 

  687.             border-left: 3px solid transparent;
    688. 

  688.             cursor:pointer;
    689. 

  689.         }
    690. 

  690. 

  691.         .notification.object:hover{
    692. 

  692.             /*
    693. 

  693.                 border-left: 3px solid #83D8FF;
    694. 

  694.             */
    695. 

  695.         }
    696. 

  696. 

  697.         .blured{
    698. 

  698.             filter: blur(2px);
    699. 

  699.         }
    700. 

  700. 

  701.         #quickAccessPanel{
    702. 

  702.             background-color:white;
    703. 

  703.             position:absolute;
    704. 

  704.             top:28px;
    705. 

  705.             right:4px;
    706. 

  706.             z-index:114;
    707. 

  707.             width:300px;
    708. 

  708.             border-radius: 10px;
    709. 

  709.             border-top-right-radius: 0px;
    710. 

  710.             border-top-left-radius: 0px;
    711. 

  711.             border: 1px solid #ebebeb;
    712. 

  712.             padding-top:8px;
    713. 

  713.             padding-bottom:8px;
    714. 

  714.         }
    715. 

  715. 

  716.         #quickAccessPanel .item{
    717. 

  717.             padding-left:12px;
    718. 

  718.             padding-right:12px;
    719. 

  719.             padding-top:4px;
    720. 

  720.             padding-bottom:4px;
    721. 

  721.             cursor:pointer;
    722. 

  722.             border-left: 3px solid transparent;
    723. 

  723.             
    724. 

  724.         }
    725. 

  725. 

  726.         #quickAccessPanel:not(.darkTheme) .item{
    727. 

  727.             color: #5a5a5a;
    728. 

  728.         }
    729. 

  729. 

  730.         #quickAccessPanel.darkTheme .item{
    731. 

  731.             color: #eeeeee;
    732. 

  732.         }
    733. 

  733. 

  734.         #quickAccessPanel .item:hover{
    735. 

  735.            background-color:#fafafa;
    736. 

  736.         }
    737. 

  737. 

  738.         /*
    739. 

  739.             Handle dark theme for the quick access panel
    740. 

  740.         */
    741. 

  741. 

  742.         #quickAccessPanel.darkTheme{
    743. 

  743.             background-color: #242330;
    744. 

  744.             color: white;
    745. 

  745.             border: 1px solid transparent;
    746. 

  746.             -webkit-box-shadow: -5px 4px 7px -1px rgba(92,92,92,0.2);
    747. 

  747.             -moz-box-shadow: -5px 4px 7px -1px rgba(92,92,92,0.2);
    748. 

  748.             box-shadow: -5px 4px 7px -1px rgba(92,92,92,0.2);
    749. 

  749.         }
    750. 

  750.         #quickAccessPanel.darkTheme .item:hover{
    751. 

  751.            background-color:#17161f;
    752. 

  752.         }
    753. 

  753.         #quickAccessPanel.darkTheme .header{
    754. 

  754.            color: white;
    755. 

  755.         }
    756. 

  756.         #quickAccessPanel.darkTheme .progress{
    757. 

  757.            background-color: #0c0c0f;
    758. 

  758.         }
    759. 

  759.         #quickAccessPanel.darkTheme .header{
    760. 

  760.            color: white;
    761. 

  761.         }
    762. 

  762.         #quickAccessPanel.darkTheme .inverted.button{
    763. 

  763.            background-color: #17161f;
    764. 

  764.            border: 1px solid black;
    765. 

  765.         }
    766. 

  766. 

  767.         .item.module{
    768. 

  768.             cursor:pointer;
    769. 

  769.         }
    770. 

  770. 

  771.         .item.module:hover{
    772. 

  772.             background-color:#f5f5f5 !important;
    773. 

  773.         }
    774. 

  774. 

  775.         .fileShareIndicator.small{
    776. 

  776.             position: absolute;
    777. 

  777.             top: calc(50% - 8px);
    778. 

  778.             left: 8px;
    779. 

  779.             height: 10px;
    780. 

  780.             width: 10px;
    781. 

  781.         }
    782. 

  782. 

  783.         .fileShareIndicator.medium{
    784. 

  784.             position: absolute;
    785. 

  785.             top: calc(50% - 8px);
    786. 

  786.             left: 10px;
    787. 

  787.             height: 16px;
    788. 

  788.             width: 16px;
    789. 

  789.         }
    790. 

  790. 

  791.         .fileShareIndicator.big{
    792. 

  792.             position: absolute;
    793. 

  793.             top: calc(50% - 8px);
    794. 

  794.             left: 12px;
    795. 

  795.             height: 18px;
    796. 

  796.             width: 18px;
    797. 

  797.         }
    798. 

  798. 

  799.         .fileShareIndicator img{
    800. 

  800.             width: 100%;
    801. 

  801.         }
    802. 

  802. 

  803.         .disabled{
    804. 

  804.             pointer-events: none;
    805. 

  805.             opacity: 0.5;
    806. 

  806.         }
    807. 

  807. 

  808.         .stackedWindowButton{
    809. 

  809.             text-overflow: ellipsis !important;
    810. 

  810.             white-space: nowrap;
    811. 

  811.             word-break: break-all;
    812. 

  812.         }
    813. 

  813. 

  814.         .iframewrapper iframe{
    815. 

  815.             border: 0px;
    816. 

  816.         }
    817. 

  817. 

  818.          /* Offline blinking warning css */
    819. 

  819.          @-moz-keyframes blink {
    820. 

  820.                 0% {
    821. 

  821.                     opacity:1;
    822. 

  822.                 }
    823. 

  823.                 50% {
    824. 

  824.                     opacity:0;
    825. 

  825.                 }
    826. 

  826.                 100% {
    827. 

  827.                     opacity:1;
    828. 

  828.                 }
    829. 

  829.             } 
    830. 

  830. 

  831.             @-webkit-keyframes blink {
    832. 

  832.                 0% {
    833. 

  833.                     opacity:1;
    834. 

  834.                 }
    835. 

  835.                 50% {
    836. 

  836.                     opacity:0;
    837. 

  837.                 }
    838. 

  838.                 100% {
    839. 

  839.                     opacity:1;
    840. 

  840.                 }
    841. 

  841.             }
    842. 

  842.             /* IE */
    843. 

  843.             @-ms-keyframes blink {
    844. 

  844.                 0% {
    845. 

  845.                     opacity:1;
    846. 

  846.                 }
    847. 

  847.                 50% {
    848. 

  848.                     opacity:0;
    849. 

  849.                 }
    850. 

  850.                 100% {
    851. 

  851.                     opacity:1;
    852. 

  852.                 }
    853. 

  853.             } 
    854. 

  854.             /* Opera and prob css3 final iteration */
    855. 

  855.             @keyframes blink {
    856. 

  856.                 0% {
    857. 

  857.                     opacity:1;
    858. 

  858.                 }
    859. 

  859.                 50% {
    860. 

  860.                     opacity:0;
    861. 

  861.                 }
    862. 

  862.                 100% {
    863. 

  863.                     opacity:1;
    864. 

  864.                 }
    865. 

  865.             } 
    866. 

  866.             .blink-image {
    867. 

  867.                 -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
    868. 

  868.                 -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
    869. 

  869.                 -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
    870. 

  870.                 animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
    871. 

  871.             }
    872. 

  872. 

  873.             /*
    874. 

  874.                 Hover file decriptor UI
    875. 

  875.             */
    876. 

  876.             .fileDescription {
    877. 

  877.                 width:200px;
    878. 

  878.                 position:fixed;
    879. 

  879.                 z-index:10;
    880. 

  880.                 background:white;
    881. 

  881.                 padding: 10px;
    882. 

  882.                 border: 1px solid #2c2c2c;
    883. 

  883.                 -webkit-box-shadow: 6px 5px 10px -3px rgba(0,0,0,0.75);
    884. 

  884.                 -moz-box-shadow: 6px 5px 10px -3px rgba(0,0,0,0.75);
    885. 

  885.                 box-shadow: 6px 5px 10px -3px rgba(0,0,0,0.75);
    886. 

  886.                 padding:2px;
    887. 

  887.                 word-wrap: break-word;
    888. 

  888.             }
    889. 

  889.     
    890. 

  890. 

  891.             
    892. 

  892. 

  893. 

  894. 

  895.         /*
    896. 

  896.                 Z-index layering
    897. 

  897.                 Layer -1 : Background Images
    898. 

  898.                 Layer 0 - 99: Not focused tab
    899. 

  899.                 Layer 100: Focused tab drag drop layer
    900. 

  900.                 Layer 101: Focused Tab / File Descriptor Tag
    901. 

  901.                 ...
    902. 

  902.                 Layer 400 - 499: Non-focused top most FloatWindows
    903. 

  903.                 Layer 500: Top Mot FloatWindow drag drop layer
    904. 

  904.                 Layer 501: Top Most FloatWindow
    905. 

  905.                 ...
    906. 

  906.                 Layer 1000: Connection lost indicator
    907. 

  907.                 ...
    908. 

  908.                 Layer 1110: Navigation Bar
    909. 

  909.                 Layer 1112: Stacked Window List
    910. 

  910.                 Layer 1113: List Menu
    911. 

  911.                 Layer 1114: Notification Bar background bluring layer
    912. 

  912.                 Layer 1115: Notification Bar
    913. 

  913.                 ...
    914. 

  914.                 Layer 3000: contextmenu
    915. 

  915.             */
    916. 

  916.     </style>
    917. 

  917.     <script>
    918. 

  918.         //Force redirection if it is on mobile
    919. 

  919.         if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    920. 

  920.             window.location.href = "mobile.system";
    921. 

  921.         }
    922. 

  922.     </script>
    923. 

  923. </head>
    924. 

  924. 

  925. <body style="background-color:black;">
    926. 

  926.     <!-- Background frames-->
    927. 

  927.     <div id="bgwrapper" class="background-wrapper" allowdrop="true" ondrop="drop(event)" ondragstart="return false;" onclick="event.preventDefault(); hideAllContextMenus();" ondblclick="event.preventDefault();event.stopImmediatePropagation();" ondragover="allowDrop(event);"
    928. 

  928.         align="center" draggable="false">
    929. 

  929.     </div>
    930. 

  930.     <!-- Top Status Bar -->
    931. 

  931.     <div id="statusbar">
    932. 

  932.         <div class="hostname statusbarpadding">
    933. 

  933.             Welcome
    934. 

  934.         </div>
    935. 

  935.         <div class="clock statusbarpadding" onclick="toggleNotification();" ontouchstart="toggleNotification();">
    936. 

  936.             ArozOS Desktop
    937. 

  937.         </div>
    938. 

  938.         <div class="quicktools statusbarpadding" onclick="showToolPanel();" ontouchend="showToolPanel();">
    939. 

  939.             <div class="qtwrapper">
    940. 

  940.                 <i class="content icon"></i>
    941. 

  941.             </div>
    942. 

  942.         </div>
    943. 

  943.     </div>
    944. 

  944.     <!-- Calendar and Notification -->
    945. 

  945.     <div class="notificationbar" style="display:none;">        
    946. 

  946.         <div class="cover" onclick='toggleNotification("hide");' ontouchstart='toggleNotification("hide");'></div>
    947. 

  947.         <div class="content">
    948. 

  948.             <div id="notificationlist">
    949. 

  949.                 <div class="nonotification">
    950. 

  950.                     <h4 class="ui center aligned icon header">
    951. 

  951.                         <i class="bell icon"></i><span locale="notification/nonotification">No Notification</span>
    952. 

  952.                     </h4>
    953. 

  953.                 </div>
    954. 

  954.                 <a class="clearall" onclick="clearAllNotification();" locale="notification/clear">Clear All</a>
    955. 

  955.             </div>
    956. 

  956.             <div style="position:absolute; right:3px; top:3px; padding-top:8px;">
    957. 

  957.                 <div class="ui header" style="padding-left:22px;">
    958. 

  958.                     <div id="dayofweek" class="sub header"></div>
    959. 

  959.                     <span id="largedate" style="font-size:120%;"></span>
    960. 

  960.                 </div>
    961. 

  961.                 <div class="auto-jsCalendar blue"></div>
    962. 

  962.             </div>
    963. 

  963.         </div>
    964. 

  964. 

  965.        
    966. 

  966.     </div>
    967. 

  967.     <!-- Desktop icons-->
    968. 

  968.     <div id="iconwrapper">
    969. 

  969.         
    970. 

  970.     </div>
    971. 

  971. 

  972.     <!-- File Descriptors -->
    973. 

  973.     <div id="fileDescriptor" class="fileDescription" style="font-size: 80%;display:none;z-index:101;">No Information</div>
    974. 

  974. 

  975.     <!-- Navigation Menu-->
    976. 

  976.     <div id="navimenu" class="navimenu themeColor">
    977. 

  977.         <div class="item clickable system" onclick="toggleListMenu();" ontouchstart="toggleListMenu();" >
    978. 

  978.             <img style="height:36px;" src="img/desktop/system_icon/list.png"></img>
    979. 

  979.         </div>
    980. 

  980.         <div class="item padding system"></div>
    981. 

  981.     </div>
    982. 

  982. 

  983.     <!-- floatWindow dragging panel-->
    984. 

  984.     <div id="fwdragpanel"></div>
    985. 

  985.     <div id="tfwdragpanel"></div>
    986. 

  986. 

  987.     <!-- Selection panel-->
    988. 

  988.     <div id="selectionPanel"></div>
    989. 

  989. 

  990.     <!-- Stacked windows listing container-->
    991. 

  991.     <div id="stackedWindowList" class="themeColor"></div>
    992. 

  992. 

  993.     <!-- List menu -->
    994. 

  994.     <div id="listMenu" class="" style="display:none;">
    995. 

  995.         <div class="searchBar" onkeydown="searchModule(event);">
    996. 

  996.             <div class="ui icon fluid input" style="border-radius: 0px !important;">
    997. 

  997.                 <input id="searchBar" type="text" placeholder="Search" style="border-radius: 0px !important; border: 0px solid transparent;">
    998. 

  998.                 <i class="search icon"></i>
    999. 

  999.             </div>
    1000. 

  1000.         </div>
    1001. 

  1001.         <div class="listItemWrapper">
    1002. 

  1002.             <div class="groups">
    1003. 

  1003.                 <div locale="listmenu/catergory/searchResults" id="searchResults" class="item" style="display:none;">Search Results</div>
    1004. 

  1004.                 <div locale="listmenu/catergory/all" class="item groupType selected" group="All">All</div>
    1005. 

  1005.                 <div locale="listmenu/catergory/media" class="item groupType" group="Media">Media</div>
    1006. 

  1006.                 <div locale="listmenu/catergory/office" class="item groupType" group="Office">Office</div>
    1007. 

  1007.                 <div locale="listmenu/catergory/download" class="item groupType" group="Download">Download</div>
    1008. 

  1008.                 <div locale="listmenu/catergory/files" class="item groupType" group="Files">Files</div>
    1009. 

  1009.                 <div locale="listmenu/catergory/internet" class="item groupType" group="Internet">Internet</div>
    1010. 

  1010.                 <div locale="listmenu/catergory/settings" class="item groupType" group="System Settings">System Settings</div>
    1011. 

  1011.                 <div locale="listmenu/catergory/tools" class="item groupType" group="System Tools">System Tools</div>
    1012. 

  1012.                 <div locale="listmenu/catergory/utils" class="item groupType" group="Utilities">Utilities</div>
    1013. 

  1013.                 <div locale="listmenu/catergory/other" class="item groupType" group="Other">Other</div>
    1014. 

  1014.                 <div class="poweroption">
    1015. 

  1015.                     <img id="powerIcon" style="width:18px; vertical-align: top; margin-right:4px;" src="img/system/power.svg"></img> <span locale="listmenu/catergory/exit">Exit</span>
    1016. 

  1016.                 </div>
    1017. 

  1017.             </div>
    1018. 

  1018.             <div id="listMenuItem" class="items">
    1019. 

  1019. 

  1020.             </div>
    1021. 

  1021.         </div>
    1022. 

  1022. 

  1023.     </div>
    1024. 

  1024. 

  1025.     <div id="contextmenu" class="aroz contextmenu" style="display:none;">
    1026. 

  1026. 

  1027.     </div>
    1028. 

  1028. 

  1029.     <div id="subcontextmenu" class="aroz contextmenu" style="display:none;">
    1030. 

  1030. 

  1031.     </div>
    1032. 

  1032. 

  1033.     <!-- Disconnected. Reconnecting interface -->
    1034. 

  1034.     <div id="connectionLost">
    1035. 

  1035.         <div class="ui inverted card themeColor" style="width: 300px; background-color: rgba(14,14,14,0.5);">
    1036. 

  1036.             <div class="content">
    1037. 

  1037.                 <div class="header"><img class="ui mini image blink-image" style="vertical-align:bottom; padding-right: 0.5em;" src="SystemAO/desktop/icons/connlost.svg"><span locale="error/connlost/title" style="color: white;">Connection Lost</span></div>
    1038. 

  1038.                 <div class="description" locale="error/connlost" style="color: white;">
    1039. 

  1039.                     Connection to server is lost. Please wait until this warning disappear before further operations.
    1040. 

  1040.                 </div>
    1041. 

  1041.             </div>
    1042. 

  1042.             <div class="ui fluid bottom attached buttons">
    1043. 

  1043.                 <button locale="error/connlost/recheck" class="ui opinion button" style="background-color: rgba(14,14,14,0.2); color: white;" onclick="handleManualCheckReconnect(this);">Check Again</button>
    1044. 

  1044.                 <button locale="error/connlost/wait" class="ui secondary opinion button" style="background-color: rgba(14,14,14,0.5); color: white;">Wait</button>
    1045. 

  1045.             </div>
    1046. 

  1046.         </div>
    1047. 

  1047.     </div>
    1048. 

  1048. 

  1049.     <div id="quickAccessPanel" class="" style="display:none;">
    1050. 

  1050.         <div class="ui small items" style="margin-bottom: 0;">
    1051. 

  1051.             <div class="item">
    1052. 

  1052.                 <div class="ui mini image">
    1053. 

  1053.                     <img class="usericon" src="img/desktop/system_icon/user.svg">
    1054. 

  1054.                 </div>
    1055. 

  1055.                 <div class="content" style="padding-left: 1em;">
    1056. 

  1056.                     <div id="username" class="header" style="font-weight: 500; font-size: 1.22em;">User</div>
    1057. 

  1057.                     <div class="meta" style="margin-top: 0.15em;">
    1058. 

  1058.                         <div id="usergroups">@Users</div>
    1059. 

  1059.                     </div>
    1060. 

  1060.                 </div>
    1061. 

  1061.                 <div class="actions">
    1062. 

  1062.                     <div class="ui small button" onclick="logout(); hideToolPanel();">
    1063. 

  1063.                         <i class="log out icon"></i> <span locale="quickAccess/logout">Logout</span>
    1064. 

  1064.                     </div>
    1065. 

  1065.                 </div>
    1066. 

  1066.             </div>
    1067. 

  1067.         </div>
    1068. 

  1068.         <div class="item" style="padding-bottom:12px;">
    1069. 

  1069.             <i class="volume up icon"></i> <span locale="quickAccess/sysvol">System Global Volume</span>
    1070. 

  1070.             <div class="ui fluid small progress" style="margin-top:8px; margin-bottom:8px; cursor:pointer;" onclick="updateVolume(this,event);" >
    1071. 

  1071.                 <div id="volumebar" class="bar" style="width: 0%; min-width: 0px; background-color:#52C9FF;  cursor:pointer;"></div>
    1072. 

  1072.             </div>
    1073. 

  1073.         </div>
    1074. 

  1074.         <div class="item" style="padding-bottom:12px;">
    1075. 

  1075.             <i class="lightbulb icon"></i> <span locale="quickAccess/brightness">Brightness</span>
    1076. 

  1076.             <div class="ui fluid small progress" style="margin-top:8px; margin-bottom:8px; cursor:pointer;" onclick="updateBrightness(this,event);" >
    1077. 

  1077.                 <div id="brightnessbar" class="bar" style="width: 100%; min-width: 0px; background-color:#52C9FF;  cursor:pointer;"></div>
    1078. 

  1078.             </div>
    1079. 

  1079.         </div>
    1080. 

  1080.         <div class="item" id="settingButton" onclick="showSystemSettings(); hideToolPanel();" ontouchend="showSystemSettings(); hideToolPanel();">
    1081. 

  1081.             <i class="setting icon"></i> <span locale="quickAccess/settings">System Settings</span>
    1082. 

  1082.             <!-- <div style="float:right;"><i class="caret right icon"></i></div> -->
    1083. 

  1083.         </div>
    1084. 

  1084.         <div class="item" onclick="fullscreen(); hideToolPanel();" ontouchend="fullscreen(); hideToolPanel();">
    1085. 

  1085.             <i class="expand icon"></i> <span locale="quickAccess/fullscreen">Toggle Fullscreen</span>
    1086. 

  1086.         </div>
    1087. 

  1087.         <div class="ui divider" style="margin: 0.4em;"></div>
    1088. 

  1088.         <div class="item hardware" onclick="restart(); hideToolPanel();" ontouchend="restart(); hideToolPanel();">
    1089. 

  1089.             <i class="repeat icon"></i> <span locale="quickAccess/restart">Restart</span>
    1090. 

  1090.         </div>
    1091. 

  1091.         <div class="item hardware" style="color:#b51d1d;"  onclick="shutdown(); hideToolPanel();" ontouchend="shutdown(); hideToolPanel();">
    1092. 

  1092.             <i class="power icon"></i> <span locale="quickAccess/poweroff">Power Off</span>
    1093. 

  1093.         </div>
    1094. 

  1094.     </div>
    1095. 

  1095.     <div>
    1096. 

  1096.         <canvas id="textWidthCanvas" style="display:none;"></canvas>
    1097. 

  1097.     </div>
    1098. 

  1098.     <script>
    1099. 

  1099. 

  1100.         /*
    1101. 

  1101.         ArOZ Online Desktop Interface
    1102. 

  1102. 

  1103.         This script maintain the usability of the desktop environment.
    1104. 

  1104.         This is not identical to the previous Desktop environment used in ArOZ Online BETA.
    1105. 

  1105.         */
    1106. 

  1106. 

  1107.         //System environment variables
    1108. 

  1108.         var isDesktopMode = true;
    1109. 

  1109.         var loggingOut = false;
    1110. 

  1110. 

  1111.         //Desktop background related
    1112. 

  1112.         var desktopThemeList = []; //Storing the list of background installed
    1113. 

  1113.         var currentBackgroundList = []; //Current list of background files
    1114. 

  1114.         var currentUserTheme = ""; //The theme for current user. 
    1115. 

  1115.         var backgroundCrossfadeInterval = 30000; //Time between the crossfade of each background image
    1116. 

  1116.         var nextSlideshowIndex = 0; //The next background image index to be shown
    1117. 

  1117.         var backgroundIntervalCounter; //The interval object for background changer
    1118. 

  1118.         var desktopThemeColor = ""; //The current desktop theme color, which renders to the status bar and suchs
    1119. 

  1119. 

  1120.         //Desktop icon realted
    1121. 

  1121.         var desktopIconSize = "medium"; //Size of desktop icons. Allow {small / medium / big}
    1122. 

  1122.         var desktopIconPack = "default"; //Desktop icon pack to be used. Located under desktop/file_icon/{pack-name}
    1123. 

  1123.         var desktopGrids = []; //Reference virtual grid for icons on desktop
    1124. 

  1124.         var iconSize = []; //Defined the icon size for the desktop icons
    1125. 

  1125.         var desktopFileList = []; //Temperature storage of desktop filenames
    1126. 

  1126.         var startDragRelatuve = []; //Relative location of where the icon being start dragging
    1127. 

  1127.         var iconOffsetXY = [0,20];  //Pixel to offset for the icon location
    1128. 

  1128. 

  1129.         //Float window related
    1130. 

  1130.         var focusedWindow;
    1131. 

  1131.         const maxWindowCount = 100;
    1132. 

  1132.         var movingWindow = false;
    1133. 

  1133.         var resizingWindow = false;
    1134. 

  1134.         var resizingEdgeID = 0; //Resizing edge. {0, 1, 2, 3, 4, 5, 6} => None, Right, Right Bottom Corner, Bottom, Left Bottom Corner, Left, TOp
    1135. 

  1135.         var stackedFloatWindowListShown = false;
    1136. 

  1136. 

  1137.         //Laucnh icon related
    1138. 

  1138.         var multiSelecting = false;
    1139. 

  1139.         var multiSelectionStartPoint = [-1, -1];
    1140. 

  1140.         var clickDownOffset = [-1, -1];
    1141. 

  1141.         var renameMode = false;
    1142. 

  1142.         var operationTargetLaunchIcon;
    1143. 

  1143.         var currentMousePosition = [-1, -1];
    1144. 

  1144. 

  1145.         //Document key bindings
    1146. 

  1146.         var ctrlHold = false;
    1147. 

  1147.         var shiftHold = false;
    1148. 

  1148. 

  1149.         //ListMenu Related Paramters
    1150. 

  1150.         var moduleInstalled = [];
    1151. 

  1151.         var listMenuShown = false;
    1152. 

  1152. 

  1153.         //Context Menu variables
    1154. 

  1154.         var menuStartLocation = [0, 0];
    1155. 

  1155. 

  1156.         //Input Method Editor objects
    1157. 

  1157.         window.ime = {
    1158. 

  1158.             handler: null,
    1159. 

  1159.             focus: null
    1160. 

  1160.         };
    1161. 

  1161. 

  1162.         //Upload related
    1163. 

  1163.         let uploadFileChunkSize = 1024 * 512; //512KB per chunk in low memory upload
    1164. 

  1164. 

  1165.         //Others
    1166. 

  1166.         var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    1167. 

  1167.         var daysNames = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    1168. 

  1168.         var hostInfo = {};
    1169. 

  1169.         var userInfo = {};
    1170. 

  1170.         var hardwareman = false;
    1171. 

  1171.         var downloadMode = false;
    1172. 

  1172.         var lowMemoryMode = true;
    1173. 

  1173. 

  1174.         //Browser and device detection
    1175. 

  1175.         var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    1176. 

  1176.         var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
    1177. 

  1177.         var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
    1178. 

  1178.         var isMacOS = (navigator.appVersion.indexOf("Mac")!=-1);
    1179. 

  1179.         var isTouchScreen = (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
    1180. 

  1180. 

  1181.         //Check and prepare localization
    1182. 

  1182.         if (applocale){
    1183. 

  1183.             //Applocale found. Do localization
    1184. 

  1184.             applocale.init("./SystemAO/locale/desktop.json", function(){
    1185. 

  1185.                 applocale.translate();
    1186. 

  1186.                 initDesktop();
    1187. 

  1187.             });
    1188. 

  1188.         }else{
    1189. 

  1189.             //Applocale not found. Is this a trim down version of ArozOS?
    1190. 

  1190.             var applocale = {
    1191. 

  1191.                 getString: function(key, original){
    1192. 

  1192.                     return original;
    1193. 

  1193.                 }
    1194. 

  1194.             }
    1195. 

  1195.             initDesktop();
    1196. 

  1196.         }
    1197. 

  1197. 

  1198.         function initDesktop(){
    1199. 

  1199.             //Initiation functions
    1200. 

  1200.             initDesktopTheme();
    1201. 

  1201.             initDesktopHostInfo();
    1202. 

  1202.             initDesktopUserInfo();
    1203. 

  1203.             initBackgroundSwitchingAnimation();
    1204. 

  1204.             //Commented for debug purpose
    1205. 

  1205.             initUploadMode();
    1206. 

  1206.             initModuleList();
    1207. 

  1207.             initDesktopIconPreference()
    1208. 

  1208.             initUserDefinedThemeColor();
    1209. 

  1209.             hookFloatWindowEvents();
    1210. 

  1210.             hookLaunchMenuEvents();
    1211. 

  1211.             initTheme();
    1212. 

  1212.             initStartupSounds();
    1213. 

  1213. 

  1214.             //Login cookie expire check
    1215. 

  1215.             setInterval(function() {
    1216. 

  1216.                 checkConnection();
    1217. 

  1217.             }, 15000);
    1218. 

  1218.         }
    1219. 

  1219. 

  1220.         function handleManualCheckReconnect(button){
    1221. 

  1221.             $(button).addClass("loading");
    1222. 

  1222.             checkConnection(undefined, function(status){
    1223. 

  1223.                 let oldText = $(button).text();
    1224. 

  1224.                 $(button).removeClass("loading");
    1225. 

  1225.                 if (status == false){
    1226. 

  1226.                     //Still unable to connect. Show cross icon
    1227. 

  1227.                     $(button).html(`<i class="remove icon"></i>`);
    1228. 

  1228.                     setTimeout(function(){
    1229. 

  1229.                         //Restore its original text after 5 sec
    1230. 

  1230.                         $(button).text(oldText);
    1231. 

  1231.                     }, 5000);
    1232. 

  1232.                 }
    1233. 

  1233.             });
    1234. 

  1234.         }
    1235. 

  1235. 

  1236.       
    1237. 

  1237.         function checkConnection(timeout=15000, callback=undefined){
    1238. 

  1238.             $.ajax({
    1239. 

  1239.                 url: 'system/auth/checkLogin',
    1240. 

  1240.                 success: function(data) {
    1241. 

  1241.                     if (data == true) {
    1242. 

  1242.                         //Continue session
    1243. 

  1243.                     } else {
    1244. 

  1244.                         //Session timeout. Redirect to system index
    1245. 

  1245.                         loggingOut = true;
    1246. 

  1246.                         window.location.href = "index.html";
    1247. 

  1247.                     }
    1248. 

  1248.                     $("#connectionLost").hide();
    1249. 

  1249.                     document.title = hostInfo.Hostname;
    1250. 

  1250.                     if (callback != undefined){
    1251. 

  1251.                         callback(true);
    1252. 

  1252.                     }
    1253. 

  1253.                 },
    1254. 

  1254.                 error: function(evt) {
    1255. 

  1255.                     //Server closed or freezed?
    1256. 

  1256.                     $("#connectionLost").show();
    1257. 

  1257.                     document.title = "Reconnecting...";
    1258. 

  1258.                     if (callback != undefined){
    1259. 

  1259.                         callback(false);
    1260. 

  1260.                     }
    1261. 

  1261.                 },
    1262. 

  1262.                 timeout: timeout
    1263. 

  1263.             });
    1264. 

  1264.         }
    1265. 

  1265. 

  1266.         //Keep the clock updated
    1267. 

  1267.         setInterval(function(){
    1268. 

  1268.             updateClockTime();
    1269. 

  1269.         },5000);
    1270. 

  1270.         updateClockTime();
    1271. 

  1271.         function updateClockTime(){
    1272. 

  1272.             var d = new Date();
    1273. 

  1273.             var display = monthNames[d.getMonth()] + " " + d.getDate() + " " + zeropad(d.getHours(),2) + ":" + zeropad(d.getMinutes(),2);
    1274. 

  1274.             
    1275. 

  1275.             if ($(".notification.object").length > 0){
    1276. 

  1276.                 display += `<span style="color: #f54242; margin-left: 8px; float: center;"><i class="notice circle icon"></i></span>`;
    1277. 

  1277.             }
    1278. 

  1278.             $(".clock").html(display);
    1279. 

  1279.             var largedate = monthNames[d.getMonth()] + " " + d.getDate() + " " + d.getFullYear() 
    1280. 

  1280.             $("#largedate").text(largedate);
    1281. 

  1281.             var dow = daysNames[d.getDay()];
    1282. 

  1282.             $("#dayofweek").text(dow);
    1283. 

  1283.         }
    1284. 

  1284. 

  1285.         function zeropad(n, width, z) {
    1286. 

  1286.             z = z || '0';
    1287. 

  1287.             n = n + '';
    1288. 

  1288.             return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
    1289. 

  1289.         }
    1290. 

  1290. 

  1291.         function showToolPanel(){
    1292. 

  1292.             $("#quickAccessPanel").slideToggle("fast");
    1293. 

  1293.         }
    1294. 

  1294.         function hideToolPanel(){
    1295. 

  1295.             $("#quickAccessPanel").slideUp("fast");
    1296. 

  1296.         }
    1297. 

  1297. 

  1298.         function initStartupSounds(){
    1299. 

  1299.             $.ajax({
    1300. 

  1300.                 url: "system/desktop/preference",
    1301. 

  1301.                 method: "POST",
    1302. 

  1302.                 data: {preference: "startup-audio"},
    1303. 

  1303.                 success: function(data){
    1304. 

  1304.                     if (data == undefined || data == ""){
    1305. 

  1305.                         return;
    1306. 

  1306.                     }
    1307. 

  1307.                     var currentGlobalVol = localStorage.getItem("global_volume");
    1308. 

  1308.                     if (currentGlobalVol != null && currentGlobalVol != undefined && currentGlobalVol != ""){
    1309. 

  1309.                         
    1310. 

  1310.                     }else{
    1311. 

  1311.                         currentGlobalVol = 0;
    1312. 

  1312.                     }
    1313. 

  1313. 

  1314.                     var audio = new Audio("media?file=" + data);
    1315. 

  1315.                     audio.volume = currentGlobalVol;
    1316. 

  1316.                     audio.play();
    1317. 

  1317.                 }
    1318. 

  1318.             });
    1319. 

  1319.         }
    1320. 

  1320. 

  1321.         function initDesktopUserInfo(){
    1322. 

  1322.             $.get("system/desktop/user", function(data){
    1323. 

  1323.                 if (data.error !== undefined){
    1324. 

  1324.                     alert(data.error);
    1325. 

  1325.                 }else{
    1326. 

  1326.                     userInfo = data;
    1327. 

  1327.                    
    1328. 

  1328. 

  1329.                     //Update the user tag
    1330. 

  1330.                     $("#username").text(userInfo.Username);
    1331. 

  1331.                     $("#usergroups").text("@" + userInfo.UserGroups.join("/"));
    1332. 

  1332.                     $("#usergroups").attr("title",userInfo.UserGroups.join(" / "));
    1333. 

  1333.                     if (data.UserIcon !== ""){
    1334. 

  1334.                         $(".usericon").attr("src",data.UserIcon);
    1335. 

  1335.                     }
    1336. 

  1336. 

  1337.                     if (data.IsAdmin == false){
    1338. 

  1338.                         //Hide the power buttons
    1339. 

  1339.                         $(".hardware").hide();
    1340. 

  1340.                     }else{
    1341. 

  1341.                         //User is admin. Add admin icon
    1342. 

  1342.                         $("#username").append(`<i style="margin-left: 0.4em; color: #${desktopThemeColor}" class="small shield alternate icon themed text"></i>`);
    1343. 

  1343.                     }
    1344. 

  1344.                 }
    1345. 

  1345.             });
    1346. 

  1346.         }
    1347. 

  1347. 

  1348.         function initDesktopHostInfo(){
    1349. 

  1349.             //Load the data into variable
    1350. 

  1350.             $.get("system/desktop/host",function(data){
    1351. 

  1351.                 hostInfo = data;
    1352. 

  1352.                 
    1353. 

  1353.                 //Update the ui element as well
    1354. 

  1354.                 $(".hostname").text(hostInfo.Hostname);
    1355. 

  1355.                 document.title = hostInfo.Hostname;
    1356. 

  1356. 

  1357.             });
    1358. 

  1358. 

  1359.             //Setup volume bar
    1360. 

  1360.             var currentGlobalVol = localStorage.getItem("global_volume");
    1361. 

  1361.             if (currentGlobalVol != null && currentGlobalVol != undefined && currentGlobalVol != ""){
    1362. 

  1362.                 $("#volumebar").css("width", currentGlobalVol * 100 + "%");
    1363. 

  1363.             }else{
    1364. 

  1364.                 currentGlobalVol = 0;
    1365. 

  1365.                 localStorage.setItem("global_volume",currentGlobalVol);
    1366. 

  1366.             }
    1367. 

  1367. 

  1368.             //Setup brightness
    1369. 

  1369.             var currentBrightness = localStorage.getItem("brightness");
    1370. 

  1370.             if (currentBrightness != null && currentBrightness != undefined && currentBrightness != ""){
    1371. 

  1371.                 $("#brightnessbar").css("width", currentBrightness * 100 + "%");
    1372. 

  1372.                 $("body").css("filter", `brightness(${currentBrightness * 100}%)`);
    1373. 

  1373.             }else{
    1374. 

  1374.                 currentBrightness = 1;
    1375. 

  1375.                 localStorage.setItem("brightness",currentBrightness);
    1376. 

  1376.             }
    1377. 

  1377.             
    1378. 

  1378. 

  1379.             //Check if hardware management mode is enabled. Hide buttons if needed
    1380. 

  1380.             $.get("system/power/accessCheck",function(data){
    1381. 

  1381.                 if (data == true){
    1382. 

  1382.                     //Hardware management mode is on
    1383. 

  1383.                     hardwareman = true;
    1384. 

  1384.                 }else{
    1385. 

  1385.                     //Hardware management mode is off
    1386. 

  1386.                     $(".item.hardware").hide();
    1387. 

  1387.                     hardwareman = false;
    1388. 

  1388.                 }   
    1389. 

  1389.             });
    1390. 

  1390. 

  1391.         }
    1392. 

  1392. 

  1393.         function toggleNotification(action=undefined){
    1394. 

  1394.             var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
    1395. 

  1395.             if (typeof action == "undefined"){
    1396. 

  1396.                 $(".notificationbar").stop().finish().fadeToggle("fast", function(){
    1397. 

  1397.                     if ($(this).is(":visible")){
    1398. 

  1398.                         if (isFirefox){
    1399. 

  1399.                             $("#bgwrapper").addClass("blured");
    1400. 

  1400.                             $("#iconwrapper").addClass("blured");
    1401. 

  1401.                             $("#navimenu").addClass("blured");
    1402. 

  1402.                             $(".floatWindow").addClass("blured");
    1403. 

  1403.                             $("#listMenu").addClass("blured");
    1404. 

  1404.                         }
    1405. 

  1405.                     }else{
    1406. 

  1406.                         if (isFirefox){
    1407. 

  1407.                             $("#bgwrapper").removeClass("blured");
    1408. 

  1408.                             $("#iconwrapper").removeClass("blured");
    1409. 

  1409.                             $("#navimenu").removeClass("blured");
    1410. 

  1410.                             $(".floatWindow").removeClass("blured");
    1411. 

  1411.                             $("#listMenu").removeClass("blured");
    1412. 

  1412.                         }
    1413. 

  1413.                     }
    1414. 

  1414.                 });
    1415. 

  1415.             }else{
    1416. 

  1416.                 if (action == "hide"){
    1417. 

  1417.                     $(".notificationbar").stop().finish().fadeOut("fast");
    1418. 

  1418.                     if (isFirefox){
    1419. 

  1419.                         $("#bgwrapper").removeClass("blured");
    1420. 

  1420.                         $("#iconwrapper").removeClass("blured");
    1421. 

  1421.                         $("#navimenu").removeClass("blured");
    1422. 

  1422.                         $(".floatWindow").removeClass("blured");
    1423. 

  1423.                         $("#listMenu").removeClass("blured");
    1424. 

  1424.                     }
    1425. 

  1425.                   
    1426. 

  1426.                 }else if (action == "show"){
    1427. 

  1427.                     $(".notificationbar").stop().finish().fadeIn("fast");
    1428. 

  1428.                     if (isFirefox){
    1429. 

  1429.                         $("#bgwrapper").addClass("blured");
    1430. 

  1430.                         $("#iconwrapper").addClass("blured");
    1431. 

  1431.                         $("#navimenu").addClass("blured");
    1432. 

  1432.                         $(".floatWindow").addClass("blured");
    1433. 

  1433.                         $("#listMenu").addClass("blured");
    1434. 

  1434.                     }
    1435. 

  1435.                 }
    1436. 

  1436.             }
    1437. 

  1437.         }
    1438. 

  1438. 

  1439.         // ===================== LIST MENU EVENTS FUNCTIONS ===============
    1440. 

  1440. 

  1441.         function toggleListMenu() {
    1442. 

  1442.             $("#listMenu").stop().finish().animate({
    1443. 

  1443.                 height: "toggle"
    1444. 

  1444.             }, 300, function() {
    1445. 

  1445.                 if ($("#listMenu").offset().top == 0) {
    1446. 

  1446.                     listMenuShown = false;
    1447. 

  1447.                 } else {
    1448. 

  1448.                     listMenuShown = true;
    1449. 

  1449.                 }
    1450. 

  1450.             });
    1451. 

  1451.         }
    1452. 

  1452. 

  1453.         function initDesktopIconPreference() {
    1454. 

  1454.             getStorage("iconsize", function(catergory) {
    1455. 

  1455.                 if (["small", "medium", "big"].includes(catergory)) {
    1456. 

  1456.                     desktopIconSize = catergory;
    1457. 

  1457.                 }
    1458. 

  1458.                 refresh();
    1459. 

  1459.                 hideAllContextMenus();
    1460. 

  1460.             });
    1461. 

  1461.         }
    1462. 

  1462. 

  1463.         function hideListMenu() {
    1464. 

  1464.             if (listMenuShown) {
    1465. 

  1465.                 $("#listMenu").animate({
    1466. 

  1466.                     height: "hide"
    1467. 

  1467.                 }, 300);
    1468. 

  1468.                 listMenuShown = false;
    1469. 

  1469.             }
    1470. 

  1470.         }
    1471. 

  1471. 

  1472.         function initModuleList() {
    1473. 

  1473.             $.ajax({
    1474. 

  1474.                 url: "system/modules/list",
    1475. 

  1475.                 success: function(data) {
    1476. 

  1476.                     moduleInstalled = data;
    1477. 

  1477.                     listModulesType("All");
    1478. 

  1478.                     checkFileSystemAccess();
    1479. 

  1479. 

  1480.                     //Hide the system setting button if access is denied
    1481. 

  1481.                     var allowSettingAccess = false;
    1482. 

  1482.                     moduleInstalled.forEach(thismod => {
    1483. 

  1483.                         if (thismod.Name == "System Setting"){
    1484. 

  1484.                             allowSettingAccess = true;
    1485. 

  1485.                         }
    1486. 

  1486.                     });
    1487. 

  1487.                     if (!allowSettingAccess){
    1488. 

  1488.                         $("#settingButton").hide();
    1489. 

  1489.                     }
    1490. 

  1490.                 }
    1491. 

  1491.             });
    1492. 

  1492.         }
    1493. 

  1493. 

  1494.         function hookLaunchMenuEvents(){
    1495. 

  1495.             $(".groupType").on("click touchstart",function(){
    1496. 

  1496.                 moduleTypeButtonClicked(this);
    1497. 

  1497.             });
    1498. 

  1498.             $(".poweroption").on("click touchstart",function(){
    1499. 

  1499.                 logout();
    1500. 

  1500.             });
    1501. 

  1501.         }
    1502. 

  1502. 

  1503.         function moduleTypeButtonClicked(object) {
    1504. 

  1504.             var groupType = $(object).attr("group");
    1505. 

  1505.             listModulesType(groupType);
    1506. 

  1506.             $(".groupType.selected").removeClass("selected");
    1507. 

  1507.             $(object).addClass("selected");
    1508. 

  1508.             $("#searchResults").slideUp('fast');
    1509. 

  1509.             $("#searchBar").val("");
    1510. 

  1510.         }
    1511. 

  1511. 

  1512.         function listModulesType(groupType) {
    1513. 

  1513.             var listingItems = [];
    1514. 

  1514.             if (groupType == "All") {
    1515. 

  1515.                 //List all of the items
    1516. 

  1516.                 for (var i = 0; i < moduleInstalled.length; i++) {
    1517. 

  1517.                     if (moduleInstalled[i]["StartDir"] != "") {
    1518. 

  1518.                         listingItems.push(moduleInstalled[i]);
    1519. 

  1519.                     }
    1520. 

  1520.                 }
    1521. 

  1521.             } else if (groupType == "Other") {
    1522. 

  1522.                 var excludeList = ["Media", "Office", "Download", "Files", "Internet", "System Settings", "System Tools", "Utilities"];
    1523. 

  1523.                 //List the Other groups
    1524. 

  1524.                 for (var i = 0; i < moduleInstalled.length; i++) {
    1525. 

  1525.                     if (excludeList.includes(moduleInstalled[i]["Group"]) == false && moduleInstalled[i]["StartDir"] != "") {
    1526. 

  1526.                         console.log(moduleInstalled[i]["Group"]);
    1527. 

  1527.                         listingItems.push(moduleInstalled[i]);
    1528. 

  1528.                     }
    1529. 

  1529.                 }
    1530. 

  1530.             } else {
    1531. 

  1531.                 //List the given group
    1532. 

  1532.                 for (var i = 0; i < moduleInstalled.length; i++) {
    1533. 

  1533.                     if (moduleInstalled[i]["Group"] == groupType && moduleInstalled[i]["StartDir"] != "") {
    1534. 

  1534.                         listingItems.push(moduleInstalled[i]);
    1535. 

  1535.                     }
    1536. 

  1536.                 }
    1537. 

  1537.             }
    1538. 

  1538. 

  1539.             //List the item to the listmenu
    1540. 

  1540.             $("#listMenuItem").html("");
    1541. 

  1541.             for (var i = 0; i < listingItems.length; i++) {
    1542. 

  1542.                 var thisModule = listingItems[i];
    1543. 

  1543.                 generateListMenuItem(thisModule);
    1544. 

  1544.             }
    1545. 

  1545.             if (listingItems.length == 0) {
    1546. 

  1546.                 $("#listMenuItem").html(`<div class="item module"><span><img src="img/system/not found.png">No WebApp found</span></div>`)
    1547. 

  1547.             }
    1548. 

  1548.         }
    1549. 

  1549. 

  1550.         //Given a module information and generate a selectable item in the list menu
    1551. 

  1551.         function generateListMenuItem(thisModule) {
    1552. 

  1552.             var icon = thisModule["IconPath"];
    1553. 

  1553.             if (icon == "") {
    1554. 

  1554.                 //Use default system icon
    1555. 

  1555.                 icon = "img/system/service.png";
    1556. 

  1556.             }
    1557. 

  1557.             var name = thisModule["Name"];
    1558. 

  1558.             var startdir = thisModule["StartDir"];
    1559. 

  1559.             var fwsupport = "false";
    1560. 

  1560.             if (thisModule["SupportFW"]) {
    1561. 

  1561.                 fwsupport = "true";
    1562. 

  1562.             }
    1563. 

  1563.             $("#listMenuItem").append(`<div class="item module" module="${name}" startdir="${startdir}" fw="${fwsupport}" onclick="openModuleFromMenu(this);" ontouchstart="openModuleFromMenu(this);">
    1564. 

  1564.                         <span>
    1565. 

  1565.                             <img src="${icon}"></img>
    1566. 

  1566.                             ${name}
    1567. 

  1567.                         </span>
    1568. 

  1568.                     </div>`);
    1569. 

  1569.         }
    1570. 

  1570. 

  1571.         function searchModule(event) {
    1572. 

  1572.             if (event.which == 13) {
    1573. 

  1573.                 var keyword = $("#searchBar").val().toLowerCase();
    1574. 

  1574.                 var results = [];
    1575. 

  1575.                 var lessAccurateResults = [];
    1576. 

  1576.                 $(".groupType.selected").removeClass("selected");
    1577. 

  1577.                 $("#searchResults").addClass("selected").slideDown('fast');
    1578. 

  1578.                 //Load all search results
    1579. 

  1579.                 for (var i = 0; i < moduleInstalled.length; i++) {
    1580. 

  1580.                     var thisModule = moduleInstalled[i];
    1581. 

  1581.                     if (thisModule["StartDir"] == ""){
    1582. 

  1582.                         continue;
    1583. 

  1583.                     }
    1584. 

  1584.                     var pathInfo = thisModule["StartDir"].split("/");
    1585. 

  1585.                     for (var j = 0; j < pathInfo.length; j++) {
    1586. 

  1586.                         pathInfo[j] = pathInfo[j].toLowerCase();
    1587. 

  1587.                     }
    1588. 

  1588.                     if (thisModule["Name"].toLowerCase().includes(keyword)) {
    1589. 

  1589.                         results.push(thisModule);
    1590. 

  1590.                     } else if (pathInfo.includes(keyword.toLowerCase()) || pathInfo.includes(keyword.split(" ").join("_").toLowerCase())) {
    1591. 

  1591.                         lessAccurateResults.push(thisModule);
    1592. 

  1592.                     }
    1593. 

  1593.                 }
    1594. 

  1594.                 results = results.concat(lessAccurateResults);
    1595. 

  1595.                 //Append the results to list
    1596. 

  1596.                 $("#listMenuItem").html("");
    1597. 

  1597.                 for (var i = 0; i < results.length; i++) {
    1598. 

  1598.                     generateListMenuItem(results[i]);
    1599. 

  1599.                 }
    1600. 

  1600. 

  1601.                 if (results.length == 0) {
    1602. 

  1602.                     //Append a custom no results div to the content
    1603. 

  1603.                     $("#listMenuItem").append(` <div class="item">
    1604. 

  1604.                         <span>
    1605. 

  1605.                             <img src="img/system/not found.png"></img>
    1606. 

  1606.                             No Result
    1607. 

  1607.                         </span>
    1608. 

  1608.                     </div>`);
    1609. 

  1609.                 }
    1610. 

  1610.             }
    1611. 

  1611.         }
    1612. 

  1612. 

  1613.         function openModuleFromMenu(object) {
    1614. 

  1614.             var moduleName = $(object).attr("module");
    1615. 

  1615.             openModule(moduleName);
    1616. 

  1616.         }
    1617. 

  1617. 

  1618.         function openModule(moduleName, callback=undefined) {
    1619. 

  1619.             $.get("system/modules/getLaunchPara?module=" + moduleName, function(data) {
    1620. 

  1620.                 if (data.error !== undefined) {
    1621. 

  1621.                     //Something went wrong.
    1622. 

  1622.                     console.log("Unable to open module " + moduleName);
    1623. 

  1623.                     if (data.error == "Not logged in."){
    1624. 

  1624.                         //Session expired
    1625. 

  1625.                         window.location.href = "login.system";
    1626. 

  1626.                     }
    1627. 

  1627.                 } else {
    1628. 

  1628.                     //Launch the given module
    1629. 

  1629.                     var url = data["StartDir"];
    1630. 

  1630.                     var size = [undefined, undefined];
    1631. 

  1631.                     var icon = "img/system/favicon.png";
    1632. 

  1632.                     if (data["IconPath"] != "") {
    1633. 

  1633.                         icon = data["IconPath"];
    1634. 

  1634.                     }
    1635. 

  1635.                     var title = data["Name"];
    1636. 

  1636.                     //Check if the module support fw mode. If yes, launch with fwmode url. IF not, launch to index
    1637. 

  1637.                     if (data["SupportFW"] == true) {
    1638. 

  1638.                         console.log(data["LaunchFWDir"]);
    1639. 

  1639.                         if (data["LaunchFWDir"] != null && data["LaunchFWDir"] != "") {
    1640. 

  1640.                             url = data["LaunchFWDir"];
    1641. 

  1641.                         }
    1642. 

  1642. 

  1643.                         if (data["InitFWSize"] != null) {
    1644. 

  1644.                             size = data["InitFWSize"];
    1645. 

  1645.                         }
    1646. 

  1646.                     }
    1647. 

  1647. 

  1648.                     //Launch the given module
    1649. 

  1649.                     var uuid = newFloatWindow({
    1650. 

  1650.                         url: url,
    1651. 

  1651.                         width: size[0],
    1652. 

  1652.                         height: size[1],
    1653. 

  1653.                         appicon: icon,
    1654. 

  1654.                         title: title
    1655. 

  1655.                     });
    1656. 

  1656. 

  1657.                     if (callback !== undefined){
    1658. 

  1658.                         callback();
    1659. 

  1659.                     }
    1660. 

  1660.                     hideListMenu();
    1661. 

  1661.                 }
    1662. 

  1662.             });
    1663. 

  1663.         }
    1664. 

  1664. 

  1665. 

  1666.         // ===================== FLOAT WINDOWS EVENTS =====================
    1667. 

  1667. 

  1668.         function hookFloatWindowEvents() {
    1669. 

  1669.             //Handle floatWindow mouse drag events
    1670. 

  1670.             $(".fwdragger").off("mousedown").on("mousedown", function(evt) {
    1671. 

  1671.                 evt.preventDefault();
    1672. 

  1672.                 evt.stopImmediatePropagation();
    1673. 

  1673.                 fwdown($(this).parent(), evt);
    1674. 

  1674.             });
    1675. 

  1675.             $(".fwdragger").off("mousemove").on("mousemove", function(evt) {
    1676. 

  1676.                 evt.preventDefault();
    1677. 

  1677.                 evt.stopImmediatePropagation();
    1678. 

  1678.                 fwmove($(this).parent(), evt);
    1679. 

  1679. 

  1680.                 //Add cusor change on resizble position reach
    1681. 

  1681.                 let hoverOffset = [event.pageX - $(this).offset().left, event.pageY - $(this).offset().top];
    1682. 

  1682.                 if (hoverOffset[1] <= 3){
    1683. 

  1683.                     $(this).addClass("resizbleCursor");
    1684. 

  1684.                 }else{
    1685. 

  1685.                     $(this).removeClass("resizbleCursor");
    1686. 

  1686.                 }
    1687. 

  1687.             });
    1688. 

  1688.             $(".fwdragger").off("mouseup").on("mouseup", function(evt) {
    1689. 

  1689.                 evt.preventDefault();
    1690. 

  1690.                 evt.stopImmediatePropagation();
    1691. 

  1691.                 fwup($(this).parent(), evt);
    1692. 

  1692.             });
    1693. 

  1693. 

  1694.             $(".fwdragger").off("touchstart").on("touchstart", function(evt) {
    1695. 

  1695.                 evt.preventDefault();
    1696. 

  1696.                 evt.stopImmediatePropagation();
    1697. 

  1697.                 fwdown($(this).parent(), evt);
    1698. 

  1698.             });
    1699. 

  1699.             $(".fwdragger").off("touchmove").on("touchmove", function(evt) {
    1700. 

  1700.                 evt.preventDefault();
    1701. 

  1701.                 evt.stopImmediatePropagation();
    1702. 

  1702.                 fwmove($(this).parent(), evt);
    1703. 

  1703.             });
    1704. 

  1704.             $(".fwdragger").off("touchend").on("touchend", function(evt) {
    1705. 

  1705.                 evt.preventDefault();
    1706. 

  1706.                 evt.stopImmediatePropagation();
    1707. 

  1707.                 fwup($(this).parent(), evt);
    1708. 

  1708.             });
    1709. 

  1709. 

  1710.             $(".fwdragger").off("dblclick").on("dblclick", function(evt) {
    1711. 

  1711.                 //Activate full screen
    1712. 

  1712.                 evt.preventDefault();
    1713. 

  1713.                 evt.stopImmediatePropagation();
    1714. 

  1714.                 //Emulate keypress on maximize btn
    1715. 

  1715.                 toggleMax($(this).parent().find(".maxToogleButton").parent()[0], evt);
    1716. 

  1716.             });
    1717. 

  1717. 

  1718.             //Floatwindow operations for touch devices
    1719. 

  1719.             $(".maxtoggle").off("touchstart").on("touchstart",function(evt){
    1720. 

  1720.                 evt.preventDefault();
    1721. 

  1721.                 evt.stopImmediatePropagation();
    1722. 

  1722.                 toggleMax(this, evt);
    1723. 

  1723.             });
    1724. 

  1724. 

  1725.             $(".mintoggle").off("touchstart").on("touchstart",function(evt){
    1726. 

  1726.                 evt.preventDefault();
    1727. 

  1727.                 evt.stopImmediatePropagation();
    1728. 

  1728.                 min(this, evt);
    1729. 

  1729.             });
    1730. 

  1730. 

  1731.             $(".closetoggle").off("touchstart").on("touchstart",function(evt){
    1732. 

  1732.                 evt.preventDefault();
    1733. 

  1733.                 evt.stopImmediatePropagation();
    1734. 

  1734.                 closeFloatWindow(this,evt);
    1735. 

  1735.             });
    1736. 

  1736. 

  1737.             $(".dockleft").off("touchstart").on("touchstart",function(evt){
    1738. 

  1738.                 evt.preventDefault();
    1739. 

  1739.                 evt.stopImmediatePropagation();
    1740. 

  1740.                 dockWindowToLeft($(this).parent().parent().parent());
    1741. 

  1741.             });
    1742. 

  1742. 

  1743.             $(".dockright").off("touchstart").on("touchstart",function(evt){
    1744. 

  1744.                 evt.preventDefault();
    1745. 

  1745.                 evt.stopImmediatePropagation();
    1746. 

  1746.                 dockWindowToRight($(this).parent().parent().parent());
    1747. 

  1747.             });
    1748. 

  1748. 

  1749.             //floatWindow events for mouse
    1750. 

  1750.             $(".maxtoggle").off("mousedown").on("mousedown",function(evt){
    1751. 

  1751.                 evt.preventDefault();
    1752. 

  1752.                 evt.stopImmediatePropagation();
    1753. 

  1753.                 toggleMax(this, evt);
    1754. 

  1754.             });
    1755. 

  1755. 

  1756.             $(".mintoggle").off("mousedown").on("mousedown",function(evt){
    1757. 

  1757.                 evt.preventDefault();
    1758. 

  1758.                 evt.stopImmediatePropagation();
    1759. 

  1759.                 min(this, evt);
    1760. 

  1760.             });
    1761. 

  1761. 

  1762.             $(".closetoggle").off("mousedown").on("mousedown",function(evt){
    1763. 

  1763.                 evt.preventDefault();
    1764. 

  1764.                 evt.stopImmediatePropagation();
    1765. 

  1765.                 closeFloatWindow(this,evt);
    1766. 

  1766.             });
    1767. 

  1767. 

  1768.             $(".dockleft").off("mousedown").on("mousedown",function(evt){
    1769. 

  1769.                 evt.preventDefault();
    1770. 

  1770.                 evt.stopImmediatePropagation();
    1771. 

  1771.                 dockWindowToLeft($(this).parent().parent().parent());
    1772. 

  1772.             });
    1773. 

  1773. 

  1774.             $(".dockright").off("mousedown").on("mousedown",function(evt){
    1775. 

  1775.                 evt.preventDefault();
    1776. 

  1776.                 evt.stopImmediatePropagation();
    1777. 

  1777.                 dockWindowToRight($(this).parent().parent().parent());
    1778. 

  1778.             });
    1779. 

  1779. 

  1780.             //Float Window events for resizing
    1781. 

  1781.             $(".iframewrapper").off("mousedown").on("mousedown", function(evt) {
    1782. 

  1782.                 evt.preventDefault();
    1783. 

  1783.                 evt.stopImmediatePropagation();
    1784. 

  1784.                 if ($(this).parent().hasClass("fixedsize")) {
    1785. 

  1785.                     return false;
    1786. 

  1786.                 }
    1787. 

  1787.                 resizeDown($(this).parent(), evt);
    1788. 

  1788.             });
    1789. 

  1789. 

  1790.             $(".iframewrapper").off("mousemove").on("mousemove", function(evt) {
    1791. 

  1791.                 evt.preventDefault();
    1792. 

  1792.                 evt.stopImmediatePropagation();
    1793. 

  1793.                 if (resizingWindow == true) {
    1794. 

  1794.                     //Resizeing Move
    1795. 

  1795.                     resizeMove($(this).parent(), evt);
    1796. 

  1796.                 } else {
    1797. 

  1797.                     //Dragdropping move
    1798. 

  1798.                     fwmove($(this).parent(), evt);
    1799. 

  1799.                 }
    1800. 

  1800. 

  1801.             });
    1802. 

  1802. 

  1803.             $(".iframewrapper").off("mouseup").on("mouseup", function(evt) {
    1804. 

  1804.                 evt.preventDefault();
    1805. 

  1805.                 evt.stopImmediatePropagation();
    1806. 

  1806.                 resizeUp($(this).parent(), evt);
    1807. 

  1807.             });
    1808. 

  1808. 

  1809. 

  1810.             $(".iframewrapper").off("mouseover").on("mouseover", function(evt) {
    1811. 

  1811.                 var object = $(this).parent();
    1812. 

  1812.                 if ($(object).hasClass("fixedsize")) {
    1813. 

  1813.                     return false;
    1814. 

  1814.                 }
    1815. 

  1815.                 var dx = event.pageX - $(object).find(".iframewrapper").offset().left;
    1816. 

  1816.                 var dy = event.pageY - $(object).offset().top;
    1817. 

  1817.                 if (dx < 10 && dy > $(object).height() - 10) {
    1818. 

  1818.                     //Left Bottom Corner
    1819. 

  1819.                     $(".iframewrapper").attr("class", "iframewrapper leftCorner");
    1820. 

  1820.                 } else if (dx > $(object).width() - 10 && dy > $(object).height() - 10) {
    1821. 

  1821.                     //Right Bottom Corner
    1822. 

  1822.                     $(".iframewrapper").attr("class", "iframewrapper rightCorner");
    1823. 

  1823.                 } else if (dx < 10) {
    1824. 

  1824.                     //Dragging left edge
    1825. 

  1825.                     $(".iframewrapper").attr("class", "iframewrapper widthHover");
    1826. 

  1826.                 } else if (dx > $(object).width() - 10) {
    1827. 

  1827.                     //Dragging right edge
    1828. 

  1828.                     $(".iframewrapper").attr("class", "iframewrapper widthHover");
    1829. 

  1829.                 } else if (dy > $(object).height() - 10) {
    1830. 

  1830.                     //Bottom Edge
    1831. 

  1831.                     $(".iframewrapper").attr("class", "iframewrapper heighHover");
    1832. 

  1832.                 } else {
    1833. 

  1833.                     //???
    1834. 

  1834.                     $(".iframewrapper").attr("class", "iframewrapper");
    1835. 

  1835.                 }
    1836. 

  1836.             });
    1837. 

  1837. 

  1838.             //Hook events on the floatWindow button
    1839. 

  1839.             $(".floatWindowButton").off("click touchstart").on("click touchstart", function(event) {
    1840. 

  1840.                 event.preventDefault();
    1841. 

  1841.                 event.stopImmediatePropagation();
    1842. 

  1842.                 $("#stackedWindowList").css("left", $(this).offset().left);
    1843. 

  1843.                 //Generate the stackedWindowList
    1844. 

  1844.                 var windowIdList = JSON.parse(decodeURIComponent($(this).attr("windowidgroup")));
    1845. 

  1845.                 if (windowIdList.length == 1) {
    1846. 

  1846.                     //There are only one window in this group. 
    1847. 

  1847.                    
    1848. 

  1848.                     //Focus that floatWindow if it is in the back
    1849. 

  1849.                     var targetFW = getFloatWindowByID(windowIdList[0]);
    1850. 

  1850.                     if (FloatWindowIsTopped(targetFW) && !($(targetFW).css('display') == 'none')){
    1851. 

  1851.                         //Top Window. Hide it
    1852. 

  1852.                         $(targetFW).fadeOut(100);
    1853. 

  1853.                     }else{
    1854. 

  1854.                         //Bring it to front
    1855. 

  1855.                         $(targetFW).fadeIn(100);
    1856. 

  1856.                         MoveFloatWindowToTop(targetFW);
    1857. 

  1857.                         stackedFloatWindowListShown = false;
    1858. 

  1858.                     }
    1859. 

  1859. 

  1860.                     if (checkIfFloatWindowOutsideWindowArea(targetFW)){
    1861. 

  1861.                         //This floatWindow is outside of the display area.
    1862. 

  1862.                         resetFloatWindowPosition(targetFW);
    1863. 

  1863.                     }
    1864. 

  1864.                     $("#stackedWindowList").hide();
    1865. 

  1865.                 } else {
    1866. 

  1866.                     //Get icon for each windows and build the list objects
    1867. 

  1867.                     $("#stackedWindowList").html("");
    1868. 

  1868.                     for (var i = 0; i < windowIdList.length; i++) {
    1869. 

  1869.                         var iconURL = getFloatWindowIconByID(windowIdList[i]);
    1870. 

  1870.                         var title = getFloatWindowTitleByID(windowIdList[i]);
    1871. 

  1871.                         $("#stackedWindowList").append(`<div class="stackedWindowButton item clickable" windowId="${windowIdList[i]}" onclick="bringFloatWindowToFrontByFWB(this,event);"  ontouchstart="bringFloatWindowToFrontByFWB(this,event);"><span><img src="${iconURL}"></img>${title}</span><div class="closebtn" onclick="closeFWviaFWB(this,event);"><img src="img/system/close.png"></img></div></div>`);
    1872. 

  1872.                     }
    1873. 

  1873.                     $("#stackedWindowList").show();
    1874. 

  1874.                     stackedFloatWindowListShown = true;
    1875. 

  1875.                 }
    1876. 

  1876. 

  1877.             });
    1878. 

  1878.         }
    1879. 

  1879. 

  1880.         var tapedTwiceTouch = false;
    1881. 

  1881.         var timeoutObject;
    1882. 

  1882.         var tappingTarget = undefined;
    1883. 

  1883.         function doubleTouchHandler(object, event, callback) {
    1884. 

  1884.             if(!tapedTwiceTouch) {
    1885. 

  1885.                 tapedTwiceTouch = true;
    1886. 

  1886.                 tappingTarget = object;
    1887. 

  1887.                 timeoutObject = setTimeout( function() { tapedTwiceTouch = false; }, 300 );
    1888. 

  1888.                 return false;
    1889. 

  1889.             }
    1890. 

  1890.             if (tappingTarget == object){
    1891. 

  1891.                 //Double click on the same icon
    1892. 

  1892.                 event.preventDefault();
    1893. 

  1893.                 callback(object, event);
    1894. 

  1894.                 tappingTarget = undefined;
    1895. 

  1895.             }else{
    1896. 

  1896.                 //Although it touch twice within 300ms, but it is on different target
    1897. 

  1897.                 //Update the tab target instead.
    1898. 

  1898.                 tappingTarget = object;
    1899. 

  1899.                 tapedTwiceTouch = true;
    1900. 

  1900.                 clearTimeout(timeoutObject);
    1901. 

  1901.                 timeoutObject = setTimeout( function() { tapedTwiceTouch = false; }, 300 );
    1902. 

  1902.             }
    1903. 

  1903.            
    1904. 

  1904.         }
    1905. 

  1905. 

  1906.         function openViaTouch(object, event){
    1907. 

  1907.             iconDoubleClicked(object,event);
    1908. 

  1908.         }
    1909. 

  1909. 

  1910.         //Handle focus through floatWindow taskbar button
    1911. 

  1911.         function bringFloatWindowToFrontByFWB(object, event) {
    1912. 

  1912.             event.preventDefault();
    1913. 

  1913.             event.stopImmediatePropagation();
    1914. 

  1914.             var targetWFID = $(object).attr("windowId");
    1915. 

  1915.             var targetFW = getFloatWindowByID(targetWFID);
    1916. 

  1916.             if (targetFW == undefined){
    1917. 

  1917.                 //fw not found
    1918. 

  1918.                 return;
    1919. 

  1919.             }
    1920. 

  1920.             $(targetFW).fadeIn(100);
    1921. 

  1921.             MoveFloatWindowToTop(targetFW);
    1922. 

  1922.             stackedFloatWindowListShown = false;
    1923. 

  1923.             $("#stackedWindowList").hide();
    1924. 

  1924.         }
    1925. 

  1925. 

  1926. 

  1927.         //Close FloatWindow via fwid
    1928. 

  1928.         function closeFloatWindowViaID(fwid){
    1929. 

  1929.             var thisFW = getFloatWindowByID(fwid);
    1930. 

  1930.             closeFloatWindow(thisFW.find(".close"), null);
    1931. 

  1931.         }
    1932. 

  1932. 

  1933.         //Close FloatWindow via the floatWindowBody
    1934. 

  1934.         function closeFWviaFWB(object, event=null) {
    1935. 

  1935.             if (event != null){
    1936. 

  1936.                 event.preventDefault();
    1937. 

  1937.                 event.stopImmediatePropagation();
    1938. 

  1938.             }
    1939. 

  1939.           
    1940. 

  1940.             var targetWFID = $(object).parent().attr("windowId");
    1941. 

  1941.             var targetFW = getFloatWindowByID(targetWFID);
    1942. 

  1942.             if (targetFW == undefined){
    1943. 

  1943.                 //fw not found
    1944. 

  1944.                 return;
    1945. 

  1945.             }
    1946. 

  1946.             closeFloatWindow(targetFW.find(".close"), event);
    1947. 

  1947.             $(object).parent().remove();
    1948. 

  1948.             if ($("#stackedWindowList").find(".item").length == 0) {
    1949. 

  1949.                 //There are no more things in this tab. Close this list as well.
    1950. 

  1950.                 stackedFloatWindowListShown = false;
    1951. 

  1951.                 $("#stackedWindowList").hide();
    1952. 

  1952.             }
    1953. 

  1953.         }
    1954. 

  1954. 

  1955.         //Check if the given floatWindow DOM object is located outside the screen area.
    1956. 

  1956.         function checkIfFloatWindowOutsideWindowArea(targetFW, checkForCompletelyOutside=true){
    1957. 

  1957.             let fwTop = $(targetFW).offset().top;
    1958. 

  1958.             let fwLeft = $(targetFW).offset().left;
    1959. 

  1959.             let fwBottom = $(targetFW).offset().left + $(targetFW).width();
    1960. 

  1960.             let fwRight = $(targetFW).offset().top + $(targetFW).height();
    1961. 

  1961. 

  1962.             //Check for floatWindow complete
    1963. 

  1963.             if (checkForCompletelyOutside){
    1964. 

  1964.                 if (fwBottom < 0 || fwTop > window.innerHeight + 1){
    1965. 

  1965.                     return true;
    1966. 

  1966.                 }else if (fwRight < 0 || fwLeft > window.innerWidth + 1){
    1967. 

  1967.                     return true;
    1968. 

  1968.                 }
    1969. 

  1969.                 return false;
    1970. 

  1970.             }else{
    1971. 

  1971.                 //Check if any edge of the fw is outside of the document window
    1972. 

  1972.                 if (fwTop < 0 || fwBottom > window.innerHeight + 1){
    1973. 

  1973.                     return true;
    1974. 

  1974.                 }else if (fwLeft < 0 || fwRight > window.innerWidth + 1){
    1975. 

  1975.                     return true;
    1976. 

  1976.                 }
    1977. 

  1977. 

  1978.                 return false;
    1979. 

  1979.             }
    1980. 

  1980.         }
    1981. 

  1981. 

  1982.         //Reset the given floatWindow object position on screen
    1983. 

  1983.         function resetFloatWindowPosition(targetFW, center=true){
    1984. 

  1984.             if (center == true){
    1985. 

  1985.                 //Calculate the corner position of the target
    1986. 

  1986.                 var newTop = window.innerHeight/2 - $(targetFW).height()/2;
    1987. 

  1987.                 var newLeft = window.innerWidth/2 - $(targetFW).width()/2;
    1988. 

  1988.                 $(targetFW).css({
    1989. 

  1989.                     left: newLeft,
    1990. 

  1990.                     top: newTop,
    1991. 

  1991.                 });
    1992. 

  1992.             }else{
    1993. 

  1993.                 //Reset to origin + 10
    1994. 

  1994.                 $(targetFW).css({
    1995. 

  1995.                     left: 10,
    1996. 

  1996.                     top: 10,
    1997. 

  1997.                 });
    1998. 

  1998.             }
    1999. 

  1999.         }
    2000. 

  2000. 

  2001.         //Handle floatWindow resize events
    2002. 

  2002.         let resizingWindowTarget;
    2003. 

  2003.         let resizingMinX = 0;
    2004. 

  2004.         let minxWidth = 120;
    2005. 

  2005.         let minHeight = 100;
    2006. 

  2006.         function resizeDown(object, event) {
    2007. 

  2007.             //Mouse down, start resizing
    2008. 

  2008.             resizingWindow = true;
    2009. 

  2009.             resizingWindowTarget = object;
    2010. 

  2010.             resizingMinX = $(object).offset().left + $(object).width() - minxWidth;
    2011. 

  2011.             MoveFloatWindowToTop(object);
    2012. 

  2012.             if ($(object).hasClass("topmost")){
    2013. 

  2013.                 //Top most windows
    2014. 

  2014.                 $("#tfwdragpanel").show();
    2015. 

  2015.             }else{
    2016. 

  2016.                 //Normal Windows
    2017. 

  2017.                 $('.floatWindow.topmost').css("pointer-events", "none");
    2018. 

  2018.                 $('.floatWindow.topmost').css("opacity", 0.7);
    2019. 

  2019.                 $("#fwdragpanel").show();
    2020. 

  2020.             }
    2021. 

  2021.           
    2022. 

  2022.             
    2023. 

  2023.             $(object).find(".iframecover").show();
    2024. 

  2024. 

  2025.             //Check which edge is the user dragging
    2026. 

  2026.             var dx = event.pageX - $(object).find(".iframewrapper").offset().left;
    2027. 

  2027.             var dy = event.pageY - $(object).offset().top;
    2028. 

  2028. 

  2029.             if (dx < 10 && dy > $(object).height() - 10) {
    2030. 

  2030.                 //Left Bottom Corner
    2031. 

  2031.                 resizingEdgeID = 4;
    2032. 

  2032.                 $(object).find(".iframewrapper").css('cursor', 'sw-resize');
    2033. 

  2033.             } else if (dx > $(object).width() - 10 && dy > $(object).height() - 10) {
    2034. 

  2034.                 //Right Bottom Corner
    2035. 

  2035.                 resizingEdgeID = 2;
    2036. 

  2036.                 $(object).find(".iframewrapper").css('cursor', 'se-resize');
    2037. 

  2037.             } else if (dx < 10) {
    2038. 

  2038.                 //Dragging left edge
    2039. 

  2039.                 resizingEdgeID = 5;
    2040. 

  2040.                 $(object).find(".iframewrapper").css('cursor', 'w-resize');
    2041. 

  2041.             } else if (dx > $(object).width() - 10) {
    2042. 

  2042.                 //Dragging right edge
    2043. 

  2043.                 resizingEdgeID = 1;
    2044. 

  2044.                 $(object).find(".iframewrapper").css('cursor', 'w-resize');
    2045. 

  2045.             } else if (dy > $(object).height() - 10) {
    2046. 

  2046.                 //Bottom Edge
    2047. 

  2047.                 resizingEdgeID = 3;
    2048. 

  2048.                 $(object).find(".iframewrapper").css('cursor', 's-resize');
    2049. 

  2049.             } 
    2050. 

  2050. 

  2051.             //For upper edge, see fwdown() handler
    2052. 

  2052.         }
    2053. 

  2053. 

  2054.         function resizeMove(object, event) {
    2055. 

  2055.             var posX = event.pageX;
    2056. 

  2056.             var posY = event.pageY;
    2057. 

  2057.             
    2058. 

  2058.             if (resizingWindow == true && resizingEdgeID != 0) {
    2059. 

  2059.                 if (resizingEdgeID == 1) {
    2060. 

  2060.                     //Width = posX - floatWindow width + 2 (for border width)
    2061. 

  2061.                     var newWidth = posX - $(object).offset().left + 2;
    2062. 

  2062.                     $(object).css("width", Math.max(newWidth, minxWidth));
    2063. 

  2063.                 } else if (resizingEdgeID == 2) {
    2064. 

  2064.                     var newWidth = posX - $(object).offset().left + 2;
    2065. 

  2065.                     var newHeight = posY - $(object).offset().top + 2;
    2066. 

  2066.                     $(object).css({
    2067. 

  2067.                         width: Math.max(newWidth, minxWidth),
    2068. 

  2068.                         height: Math.max(newHeight, minHeight)
    2069. 

  2069.                     });
    2070. 

  2070.                 } else if (resizingEdgeID == 3) {
    2071. 

  2071.                     var newHeight = posY - $(object).offset().top + 2;
    2072. 

  2072.                     $(object).css("height", Math.max(newHeight,minHeight));
    2073. 

  2073.                 } else if (resizingEdgeID == 4) {
    2074. 

  2074.                     var newWidth = $(object).offset().left - posX + $(object).width();
    2075. 

  2075.                     var newHeight = posY - $(object).offset().top + 2;
    2076. 

  2076.                     
    2077. 

  2077.                     if (newWidth < minxWidth){
    2078. 

  2078.                         posX = resizingMinX;
    2079. 

  2079.                     }
    2080. 

  2080.                     
    2081. 

  2081.                     $(object).css({
    2082. 

  2082.                         width: Math.max(newWidth, minxWidth),
    2083. 

  2083.                         height: Math.max(newHeight, minHeight),
    2084. 

  2084.                         left: posX
    2085. 

  2085.                     });
    2086. 

  2086.                 } else if (resizingEdgeID == 5) {
    2087. 

  2087.                     var newWidth = $(object).offset().left - posX + $(object).width();
    2088. 

  2088.                     if (newWidth < minxWidth){
    2089. 

  2089.                         posX = resizingMinX;
    2090. 

  2090.                     }
    2091. 

  2091.                     
    2092. 

  2092.                     $(object).css({
    2093. 

  2093.                         width: Math.max(newWidth, minxWidth),
    2094. 

  2094.                         left: posX
    2095. 

  2095.                     });
    2096. 

  2096.                 } else if (resizingEdgeID == 6){
    2097. 

  2097.                     var newHeight = $(object).height() - (posY - $(object).offset().top) + 2;
    2098. 

  2098.                     $(object).css({
    2099. 

  2099.                         "top": posY - 2,
    2100. 

  2100.                         "height": Math.max(newHeight,minHeight),
    2101. 

  2101.                     });
    2102. 

  2102.                 }
    2103. 

  2103.             }
    2104. 

  2104.         }
    2105. 

  2105. 

  2106.         function resizeUp(object, event) {
    2107. 

  2107.             resizingWindow = false;
    2108. 

  2108.             resizingEdgeID = 0;
    2109. 

  2109.             $("#fwdragpanel").hide();
    2110. 

  2110.             $("#tfwdragpanel").hide();
    2111. 

  2111.             $('.floatWindow.topmost').css("pointer-events", "auto");
    2112. 

  2112.             $('.floatWindow.topmost').css("opacity", 1);
    2113. 

  2113. 

  2114.             $(object).find(".iframecover").hide();
    2115. 

  2115.             $(object).find(".iframewrapper").css('cursor', '');
    2116. 

  2116.             //Force minmium width and height on any floatWindow objects
    2117. 

  2117.             if ($(object).width() < 120) {
    2118. 

  2118.                 $(object).css("width", "120px");
    2119. 

  2119.             }
    2120. 

  2120.             if ($(object).height() < 120) {
    2121. 

  2121.                 $(object).css("height", "120px");
    2122. 

  2122.             }
    2123. 

  2123.             resizingWindowTarget = undefined;
    2124. 

  2124. 

  2125.             $(".topmost").show();
    2126. 

  2126. 

  2127.         }
    2128. 

  2128. 

  2129.         //Hook body mousemove assistant events
    2130. 

  2130.         $("body").on("mousemove", function(evt) {
    2131. 

  2131.             if (focusedWindow !== undefined && movingWindow == true) {
    2132. 

  2132.                 fwmove(focusedWindow, evt);
    2133. 

  2133.             } else if (focusedWindow !== undefined && resizingWindow == true) {
    2134. 

  2134.                 resizeMove(focusedWindow, evt);
    2135. 

  2135.             } else if (multiSelecting == true) {
    2136. 

  2136.                 movingMultiSelectionArea(evt);
    2137. 

  2137.             }
    2138. 

  2138.         });
    2139. 

  2139. 

  2140.         //Hook body clicke vents
    2141. 

  2141.         $("body").on("click", function(evt) {
    2142. 

  2142.             if (stackedFloatWindowListShown == true) {
    2143. 

  2143.                 //Hide the stacked Float Window list if it is shown
    2144. 

  2144.                 $("#stackedWindowList").hide();
    2145. 

  2145.                 stackedFloatWindowListShown = false;
    2146. 

  2146.             }
    2147. 

  2147. 

  2148.             if (renameMode == true){
    2149. 

  2149.                 //Exit rename mode if the target is not on the editing launchIcon
    2150. 

  2150.                 //console.log(evt.target);
    2151. 

  2151.                 var isBackground = false;
    2152. 

  2152.                 if ($(evt.target).attr("id") && $(evt.target).attr("id").length >= 4 &&  $(evt.target).attr("id").substr(0, 3) == "dbg"){
    2153. 

  2153.                     isBackground = true;
    2154. 

  2154.                 }
    2155. 

  2155.                 if ($(evt.target).is("body") || isBackground){
    2156. 

  2156.                     //End rename mode
    2157. 

  2157.                     exitRenameMode();
    2158. 

  2158.                 }
    2159. 

  2159.             }
    2160. 

  2160.         });
    2161. 

  2161. 

  2162.         //Convert touch events to click events
    2163. 

  2163.         function mapEventFromTouch(event){
    2164. 

  2164.             if (typeof event.originalEvent == "undefined"){
    2165. 

  2165.                 //Mouse click / down / up events
    2166. 

  2166.                 return event;
    2167. 

  2167.             }
    2168. 

  2168.             try{
    2169. 

  2169.                 //Touch events
    2170. 

  2170.                 if (typeof event.pageX == "undefined"){
    2171. 

  2171.                     event.pageX = event.originalEvent.touches[0].pageX;
    2172. 

  2172.                 }
    2173. 

  2173.                 if (typeof event.pageY == "undefined"){
    2174. 

  2174.                     event.pageY = event.originalEvent.touches[0].pageY;
    2175. 

  2175.                 }
    2176. 

  2176.                 return event;
    2177. 

  2177.             }catch{
    2178. 

  2178.                 return event;
    2179. 

  2179.             }
    2180. 

  2180.            
    2181. 

  2181.         }
    2182. 

  2182. 

  2183.         //Please pass in the floatWindow object instead of the dragger
    2184. 

  2184.         function fwdown(object, event) {
    2185. 

  2185.             event = mapEventFromTouch(event);
    2186. 

  2186. 

  2187.             //Hide all contenxt menus
    2188. 

  2188.             hideAllContextMenus();
    2189. 

  2189. 

  2190.             //Move the window to the top layer
    2191. 

  2191.             MoveFloatWindowToTop(object);
    2192. 

  2192.             
    2193. 

  2193.             //Show the background drag panel
    2194. 

  2194.             if ($(object).hasClass("topmost")){
    2195. 

  2195.                 $("#tfwdragpanel").show();
    2196. 

  2196.             }else{
    2197. 

  2197.                 
    2198. 

  2198.                 $('.floatWindow.topmost').css("pointer-events", "none");
    2199. 

  2199.                 $('.floatWindow.topmost').css("opacity", 0.7);
    2200. 

  2200.                 $("#fwdragpanel").show();
    2201. 

  2201.             }
    2202. 

  2202.             
    2203. 

  2203.             
    2204. 

  2204.             //Get the relative click offset of the down event
    2205. 

  2205.             clickDownOffset = [event.pageX - $(object).offset().left, event.pageY - $(object).offset().top];
    2206. 

  2206.             if (clickDownOffset[1] <= 3){
    2207. 

  2207.                 //Resizing Top Edge
    2208. 

  2208.                 resizingWindow = true;
    2209. 

  2209.                 resizingWindowTarget = $(object).parent();
    2210. 

  2210.                 resizingEdgeID = 6;
    2211. 

  2211.             }else{
    2212. 

  2212.                 //Moving Window
    2213. 

  2213.                 movingWindow = true;
    2214. 

  2214.                 
    2215. 

  2215.             }
    2216. 

  2216.             $(object).find(".iframecover").show();
    2217. 

  2217.             
    2218. 

  2218.         } 
    2219. 

  2219. 

  2220.         function fwmove(object, event) {
    2221. 

  2221.             event = mapEventFromTouch(event);
    2222. 

  2222.             if (movingWindow == true) {
    2223. 

  2223.                 //Check if the object is maximized. If yes, minimized it
    2224. 

  2224.                 if ($(object).attr("max") == "true") {
    2225. 

  2225.                     var originalSize = JSON.parse(decodeURIComponent($(object).attr("orgsize")));
    2226. 

  2226.                     $(object).attr("max", "false");
    2227. 

  2227.                     $(object).attr("orgsize", "");
    2228. 

  2228.                     //Calculate new left right offsets
    2229. 

  2229.                     var clickRatio = event.pageX / window.innerWidth;
    2230. 

  2230.                     var newLeft = event.pageX - (clickRatio * originalSize[0]);
    2231. 

  2231.                     originalSize
    2232. 

  2232.                     $(object).css({
    2233. 

  2233.                         width: originalSize[0],
    2234. 

  2234.                         height: originalSize[1],
    2235. 

  2235.                         left: newLeft,
    2236. 

  2236.                         right: "auto",
    2237. 

  2237.                         top: event.Y - 2
    2238. 

  2238.                     });
    2239. 

  2239.                     clickDownOffset[0] = clickRatio * originalSize[0];
    2240. 

  2240.                     clickDownOffset[1] = 2;
    2241. 

  2241.                     //Restore the maximize icon
    2242. 

  2242.                     $(object).find(".maxToogleButton").attr('src', "img/system/max.svg");
    2243. 

  2243.                     $(object).find(".dockright").removeClass("disabled");
    2244. 

  2244.                     $(object).find(".dockleft").removeClass("disabled");
    2245. 

  2245.                 }
    2246. 

  2246. 

  2247.                 $(object).css("left", event.pageX - clickDownOffset[0]);
    2248. 

  2248.                 $(object).css("top", event.pageY - clickDownOffset[1]);
    2249. 

  2249.             } else if (resizingWindow && resizingEdgeID == 6){
    2250. 

  2250.                 resizeMove($(object), event);
    2251. 

  2251.             }
    2252. 

  2252.         }
    2253. 

  2253. 

  2254.         //Dock the window object to left
    2255. 

  2255.         function dockWindowToLeft(object){
    2256. 

  2256.             var originalSize = [$(object).width(), $(object).height(), $(object).offset().left, $(object).offset().top];
    2257. 

  2257.             $(object).attr("orgsize", encodeURIComponent(JSON.stringify(originalSize)));
    2258. 

  2258.             $(object).css({
    2259. 

  2259.                 width: "50%",
    2260. 

  2260.                 height: "calc(100% - 36px)",
    2261. 

  2261.                 left: "0px",
    2262. 

  2262.                 right: "auto",
    2263. 

  2263.                 top: "0px"
    2264. 

  2264.             });
    2265. 

  2265.             $(object).attr("max", "true");
    2266. 

  2266.             $(object).find(".maxToogleButton").attr('src', "img/system/restore.svg");
    2267. 

  2267.             $(object).find(".dockright").addClass("disabled");
    2268. 

  2268.             $(object).find(".dockleft").addClass("disabled");
    2269. 

  2269.         }
    2270. 

  2270. 

  2271.         //Dock the window object to right
    2272. 

  2272.         function dockWindowToRight(object){
    2273. 

  2273.             var originalSize = [$(object).width(), $(object).height(), $(object).offset().left, $(object).offset().top];
    2274. 

  2274.             $(object).attr("orgsize", encodeURIComponent(JSON.stringify(originalSize)));
    2275. 

  2275.             $(object).css({
    2276. 

  2276.                 width: "50%",
    2277. 

  2277.                 height: "calc(100% - 36px)",
    2278. 

  2278.                 right: "0px",
    2279. 

  2279.                 left: "auto",
    2280. 

  2280.                 top: "0px"
    2281. 

  2281.             });
    2282. 

  2282.             $(object).attr("max", "true");
    2283. 

  2283.             $(object).find(".maxToogleButton").attr('src', "img/system/restore.svg");
    2284. 

  2284.             $(object).find(".dockright").addClass("disabled");
    2285. 

  2285.             $(object).find(".dockleft").addClass("disabled");
    2286. 

  2286.         }
    2287. 

  2287. 

  2288.         function fwup(object, event) {
    2289. 

  2289.             event = mapEventFromTouch(event);
    2290. 

  2290.             if (movingWindow) {
    2291. 

  2291.                 $("#fwdragpanel").hide();
    2292. 

  2292.                 $("#tfwdragpanel").hide();
    2293. 

  2293.                 $('.floatWindow.topmost').css("pointer-events", "auto");
    2294. 

  2294.                 $('.floatWindow.topmost').css("opacity", 1);
    2295. 

  2295. 

  2296.                 $(object).find(".iframecover").hide();
    2297. 

  2297.                 movingWindow = false;
    2298. 

  2298. 

  2299.                 //Float Window Snapping Logic
    2300. 

  2300.                 //Check if the window location is drag to the edge of the screen. If yes, toggle half screen fullscreen
    2301. 

  2301.                 //Not need to check for if max because it must be minimized during drag move
    2302. 

  2302.                 var dockMode = false;
    2303. 

  2303.                 if (event.pageX < 10) {
    2304. 

  2304.                     //Dock to left
    2305. 

  2305.                     dockWindowToLeft(object);
    2306. 

  2306.                 } else if (event.pageX > window.innerWidth - 10) {
    2307. 

  2307.                     //Dock to right
    2308. 

  2308.                     dockWindowToRight(object);
    2309. 

  2309.                 }
    2310. 

  2310.             }else if (resizingWindow && resizingEdgeID == 6){
    2311. 

  2311.                 resizeUp($(object), event);
    2312. 

  2312.             }
    2313. 

  2313.         }
    2314. 

  2314. 

  2315.         //Handle floatWindow min, max and close
    2316. 

  2316.         function min(object, event) {
    2317. 

  2317.             event.preventDefault();
    2318. 

  2318.             event.stopImmediatePropagation();
    2319. 

  2319.             if (event.type == "mousedown" && event.which != 1) {
    2320. 

  2320.                 //Ignore right mouse down
    2321. 

  2321.                 return;
    2322. 

  2322.             }
    2323. 

  2323.             var fw = $(object).parent().parent().parent();
    2324. 

  2324.             $(fw).fadeOut(100);
    2325. 

  2325.         }
    2326. 

  2326. 

  2327.         function toggleMax(object, event) {
    2328. 

  2328.             event.preventDefault();
    2329. 

  2329.             event.stopImmediatePropagation();
    2330. 

  2330.             event = mapEventFromTouch(event);
    2331. 

  2331.             if (event.type == "mousedown" && event.which != 1) {
    2332. 

  2332.                 //Ignore right mouse down
    2333. 

  2333.                 return;
    2334. 

  2334.             }
    2335. 

  2335.             if ($(object).css('display') == 'none'){
    2336. 

  2336.                 //This windows do not allow resizing. 
    2337. 

  2337.                 return;
    2338. 

  2338.             }
    2339. 

  2339.             var fw = $(object).parent().parent().parent();
    2340. 

  2340.             var maxedAlready = $(fw).attr('max');
    2341. 

  2341.             MoveFloatWindowToTop(fw);
    2342. 

  2342.             //Add transition animation
    2343. 

  2343.             $(fw).css({
    2344. 

  2344.                 "transition": "width 0.3s ease-out,  height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out"
    2345. 

  2345.             });
    2346. 

  2346. 

  2347.             //Remove transition animation after complete wth 50ms buffer
    2348. 

  2348.             setTimeout(function(){
    2349. 

  2349.                 $(fw).css({
    2350. 

  2350.                 "transition": ""
    2351. 

  2351.                 });
    2352. 

  2352.             }, 350);
    2353. 

  2353.            
    2354. 

  2354.             if (maxedAlready == "true") {
    2355. 

  2355.                 //Resize to original
    2356. 

  2356.                 console.log($(fw));
    2357. 

  2357.                 var originalSize = JSON.parse(decodeURIComponent($(fw).attr("orgsize")));
    2358. 

  2358.                
    2359. 

  2359.                 $(fw).attr("max", "false");
    2360. 

  2360.                 $(fw).attr("orgsize", "");
    2361. 

  2361.                 $(fw).css({
    2362. 

  2362.                     width: originalSize[0],
    2363. 

  2363.                     height: originalSize[1],
    2364. 

  2364.                     left: originalSize[2],
    2365. 

  2365.                     top: originalSize[3]
    2366. 

  2366.                 });
    2367. 

  2367.                 $(fw).find(".maxToogleButton").attr('src', "img/system/max.svg");
    2368. 

  2368.                 $(fw).find(".dockright").removeClass("disabled");
    2369. 

  2369.                 $(fw).find(".dockleft").removeClass("disabled");
    2370. 

  2370.             } else {
    2371. 

  2371.                 //Maxmize
    2372. 

  2372.                 var originalSize = [$(fw).width(), $(fw).height(), $(fw).offset().left, $(fw).offset().top];
    2373. 

  2373.                 $(fw).attr("orgsize", encodeURIComponent(JSON.stringify(originalSize)));
    2374. 

  2374.                 $(fw).css({
    2375. 

  2375.                     width: "100%",
    2376. 

  2376.                     height: "calc(100% - 36px)",
    2377. 

  2377.                     left: "0px",
    2378. 

  2378.                     top: "0px"
    2379. 

  2379.                 });
    2380. 

  2380.                 $(fw).attr("max", "true");
    2381. 

  2381.                 $(fw).find(".maxToogleButton").attr('src', "img/system/restore.svg")
    2382. 

  2382.             }
    2383. 

  2383.         }
    2384. 

  2384. 

  2385.         function closeFloatWindow(object, event=null) {
    2386. 

  2386.             if (event != null){
    2387. 

  2387.                 if (event.type == "mousedown" && event.which != 1) {
    2388. 

  2388.                     //Ignore right mouse down on close buttons
    2389. 

  2389.                     return;
    2390. 

  2390.                 }
    2391. 

  2391.                 event.preventDefault();
    2392. 

  2392.                 event.stopImmediatePropagation();
    2393. 

  2393.             }
    2394. 

  2394.          
    2395. 

  2395.             if ($(object).is("img")) {
    2396. 

  2396.                 object = $(object).panret();
    2397. 

  2397.             }
    2398. 

  2398.             var fw = $(object).parent().parent().parent();
    2399. 

  2399.             var contentWindow = $(fw).find("iframe")[0].contentWindow;
    2400. 

  2400.             try {
    2401. 

  2401.                 if (contentWindow.ao_module_close === undefined) {
    2402. 

  2402.                     //This module do not use ao_module wrapper. Close it directly.
    2403. 

  2403.                     closeFwProcess($(fw).attr("windowId"));
    2404. 

  2404.                 } else {
    2405. 

  2405.                     //Pass the closing events to the window itself
    2406. 

  2406.                     contentWindow.ao_module_close();
    2407. 

  2407.                 }
    2408. 

  2408.             } catch (ex) {
    2409. 

  2409.                 //Problems of closing floatWindow. Force closing.
    2410. 

  2410.                 closeFwProcess($(fw).attr("windowId"));
    2411. 

  2411.             }
    2412. 

  2412. 

  2413.             //Find the btn object that contains the windowID
    2414. 

  2414.             var closingWindowID = $(fw).attr("windowId");
    2415. 

  2415.             $("#stackedWindowList").hide();
    2416. 

  2416.             resizeAllFloatWindowButtons();
    2417. 

  2417.             hideAllContextMenus();
    2418. 

  2418.         }
    2419. 

  2419. 

  2420.         function findFloatWindowButtonWithID(windowID) {
    2421. 

  2421.             var targetButtonObject;
    2422. 

  2422.             $(".floatWindowButton").each(function() {
    2423. 

  2423.                 var originalIDlist = JSON.parse(decodeURIComponent($(this).attr('windowIDGroup')));
    2424. 

  2424.                 originalIDlist = originalIDlist.map(String);
    2425. 

  2425.                 if (originalIDlist.includes(windowID)) {
    2426. 

  2426.                     targetButtonObject = $(this);
    2427. 

  2427.                 }
    2428. 

  2428.             });
    2429. 

  2429.             return targetButtonObject;
    2430. 

  2430.         }
    2431. 

  2431. 

  2432.         function closeFwProcess(windowID) {
    2433. 

  2433.             //Close the floatwindow process
    2434. 

  2434.             $(".floatWindow").each(function() {
    2435. 

  2435.                 if ($(this).attr("windowId") == windowID) {
    2436. 

  2436.                     $(this).remove();
    2437. 

  2437.                 }
    2438. 

  2438.             });
    2439. 

  2439. 

  2440.             //Remove the button from menu as well
    2441. 

  2441.             var targetTab = findFloatWindowButtonWithID(windowID);
    2442. 

  2442.             var originalIDlist = JSON.parse(decodeURIComponent($(targetTab).attr('windowIDGroup')));
    2443. 

  2443.             originalIDlist = originalIDlist.map(String);
    2444. 

  2444.             if (originalIDlist.length > 1) {
    2445. 

  2445.                 //There are more than 1 floatWindow in this tab.
    2446. 

  2446.                 var newIDList = [];
    2447. 

  2447.                 for (var i = 0; i < originalIDlist.length; i++) {
    2448. 

  2448.                     if (originalIDlist[i] != windowID) {
    2449. 

  2449.                         newIDList.push(originalIDlist[i]);
    2450. 

  2450.                     }
    2451. 

  2451.                 }
    2452. 

  2452.                 newIDListAttr = encodeURIComponent(JSON.stringify(newIDList));
    2453. 

  2453.                 //console.log("Newlist",newIDList);
    2454. 

  2454.                 $(targetTab).attr("windowIDGroup", newIDListAttr);
    2455. 

  2455.             } else {
    2456. 

  2456.                 //This is the only floatWindow in this tab. Remove the tab itself.
    2457. 

  2457.                 $(targetTab).remove();
    2458. 

  2458.             }
    2459. 

  2459.         }
    2460. 

  2460. 

  2461.         function PinFloatWindowToTopMostMode(object){
    2462. 

  2462.             if ($(".floatwindow.topmost").length >= 100){
    2463. 

  2463.                 //Cannot add more topmost fw
    2464. 

  2464.                 console.log("Max number of top most floatWindow reached")
    2465. 

  2465.                 return
    2466. 

  2466.             }
    2467. 

  2467.             //Move the current fw to top, its z index is now 101
    2468. 

  2468.             MoveFloatWindowToTop(object);
    2469. 

  2469.             var windowID = $(object).attr("windowId");
    2470. 

  2470.             console.log("[Desktop] Pinning window ID: " + windowID)
    2471. 

  2471.             //Move this to fixed layer position
    2472. 

  2472.             $(object).addClass("topmost");
    2473. 

  2473.             $(object).css("z-index", 501);
    2474. 

  2474.         }
    2475. 

  2475. 

  2476.         function UnpinFloatWindowFromTopMostMode(object){
    2477. 

  2477.             $(object).removeClass("topmost");
    2478. 

  2478.             if (focusedWindow == object){
    2479. 

  2479.                 focusedWindow = undefined;
    2480. 

  2480.                 $(object).css("z-index", 1);
    2481. 

  2481.             }
    2482. 

  2482.             
    2483. 

  2483.             MoveFloatWindowToTop(object);
    2484. 

  2484.         }
    2485. 

  2485. 

  2486.         function FloatWindowIsTopped(object){
    2487. 

  2487.             if ($(object).attr("windowId") == $(focusedWindow).attr("windowId")) {
    2488. 

  2488.                 //Top Window
    2489. 

  2489.                 return true;
    2490. 

  2490.             }
    2491. 

  2491. 

  2492.             return false;
    2493. 

  2493.         }
    2494. 

  2494. 

  2495.         function MoveFloatWindowToTop(object) {
    2496. 

  2496.             var windowID = $(object).attr("windowId");
    2497. 

  2497.             var windowZindex = $(object).css("z-index");
    2498. 

  2498.             //Shift down all floatWindows that has z-index higher than this window by 2
    2499. 

  2499.             if (windowID == $(focusedWindow).attr("windowId")) {
    2500. 

  2500.                 //This window already at the top
    2501. 

  2501.                 return;
    2502. 

  2502.             }
    2503. 

  2503. 

  2504.             if ($(focusedWindow).hasClass("topmost") && $(object).hasClass("topmost")){
    2505. 

  2505.                 //The previous focused windows is topmost. Move it to layer 500
    2506. 

  2506.                 $(focusedWindow).css("z-index", 500);
    2507. 

  2507.                 $(".floatWindow.topmost").each(function(){
    2508. 

  2508.                     var thisWindowZIndex = $(this).css("z-index");
    2509. 

  2509.                     if (parseInt(thisWindowZIndex) > parseInt(windowZindex)) {
    2510. 

  2510.                         if ($(this).attr("windowId") != windowID) {
    2511. 

  2511.                             $(this).css("z-index", thisWindowZIndex - 1);
    2512. 

  2512.                         }
    2513. 

  2513.                     }
    2514. 

  2514.                 });
    2515. 

  2515.             }else if ($(focusedWindow).hasClass("topmost") && !$(object).hasClass("topmost")){
    2516. 

  2516.                 //The previous focused windows is topmost but the current one is not.
    2517. 

  2517.                 //No need to move the top most windows but need to move every 101 windows to 100
    2518. 

  2518.                 $(".floatWindow:not(.topmost)").each(function(){
    2519. 

  2519.                     if ($(this).css("z-index") == 101){
    2520. 

  2520.                         $(this).css("z-index", 100);
    2521. 

  2521.                     }
    2522. 

  2522.                 });
    2523. 

  2523.             
    2524. 

  2524.             }else if (!$(focusedWindow).hasClass("topmost") && $(object).hasClass("topmost")){
    2525. 

  2525.                 //The previous focused window is normal but now focusing on top most windows.
    2526. 

  2526.                 $(".floatWindow.topmost").each(function(){
    2527. 

  2527.                     if ($(this).css("z-index") == 501){
    2528. 

  2528.                         $(this).css("z-index", 500);
    2529. 

  2529.                     }
    2530. 

  2530.                 });
    2531. 

  2531.                 
    2532. 

  2532.             }else{
    2533. 

  2533.                 //The previous focused windows is normal windows. Move it to 100
    2534. 

  2534.                 $(focusedWindow).css("z-index", 100);
    2535. 

  2535. 

  2536.                 //Shift all the other windows down
    2537. 

  2537.                 $(".floatWindow").each(function() {
    2538. 

  2538.                     if ($(this).hasClass("topmost")){
    2539. 

  2539.                         return;
    2540. 

  2540.                     }
    2541. 

  2541.                     var thisWindowZIndex = $(this).css("z-index");
    2542. 

  2542.                     if (parseInt(thisWindowZIndex) > parseInt(windowZindex)) {
    2543. 

  2543.                         if ($(this).attr("windowId") != windowID) {
    2544. 

  2544.                             $(this).css("z-index", thisWindowZIndex - 1);
    2545. 

  2545.                             //console.log($(this).attr("windowId"), $(this).css("z-index"));
    2546. 

  2546.                         }
    2547. 

  2547.                     }
    2548. 

  2548.                 });
    2549. 

  2549.             }
    2550. 

  2550. 

  2551.             if ($(object).hasClass("topmost")){
    2552. 

  2552.                 //The new windows is a topmost window
    2553. 

  2553.                 $(object).css("z-index", 501);
    2554. 

  2554.             }else{
    2555. 

  2555.                 $(object).css("z-index", 101);
    2556. 

  2556.             }
    2557. 

  2557.            
    2558. 

  2558.             
    2559. 

  2559.             focusedWindow = $(object);
    2560. 

  2560.             
    2561. 

  2561.             //Check if this div is hidden. If yes, fade it in.
    2562. 

  2562.             if ($(object).is(":hidden")) {
    2563. 

  2563.                 $(object).fadeIn(100);
    2564. 

  2564.             }
    2565. 

  2565. 

  2566.             //Focus on the top most floatWindow
    2567. 

  2567.             var iframe = focusedWindow.find("iframe")[0];
    2568. 

  2568.             iframe.contentWindow.focus();
    2569. 

  2569. 

  2570.         }
    2571. 

  2571. 

  2572.         function newFloatWindow(config, callback=undefined) {
    2573. 

  2573.             //Check if the number of floatWindow already reaching its maxmium
    2574. 

  2574.             if ($(".floatWindow").length > maxWindowCount){
    2575. 

  2575.                 console.log("Max number of floatWindow reached.");
    2576. 

  2576.                 return;
    2577. 

  2577.             }
    2578. 

  2578.             //Generate new floatwindow startup config from object
    2579. 

  2579.             var url = defaultOrKey(config, "about:blank", "url");
    2580. 

  2580.             var uuid = defaultOrKey(config, (new Date()).getTime(), "uid");
    2581. 

  2581.             var width = defaultOrKey(config, 854, "width");
    2582. 

  2582.             var height = defaultOrKey(config, 480, "height");
    2583. 

  2583.             var moduleIcon = defaultOrKey(config, "img/system/favicon.png", "appicon");
    2584. 

  2584.             var title = defaultOrKey(config, "New floatWindow", "title");
    2585. 

  2585.             var left = defaultOrKey(config, 100, "left");
    2586. 

  2586.             var top = defaultOrKey(config, 100, "top");
    2587. 

  2587.             var parentWindowID = defaultOrKey(config, "", "parent");
    2588. 

  2588.             var callbackFunctionName = defaultOrKey(config, "", "callback");
    2589. 

  2589.             var bgcolor = defaultOrKey(config, "", "background-color");
    2590. 

  2590. 

  2591.             //Encode function name
    2592. 

  2592.             callbackFunctionName = encodeURIComponent(callbackFunctionName);
    2593. 

  2593. 

  2594.             //Validate paramters
    2595. 

  2595.             if (width > window.innerWidth) {
    2596. 

  2596.                 width = window.innerWidth;
    2597. 

  2597.             }
    2598. 

  2598.             if (height > window.innerHeight) {
    2599. 

  2599.                 height = window.innerHeight;
    2600. 

  2600.             }
    2601. 

  2601.             if (left + width > window.innerWidth) {
    2602. 

  2602.                 left = 0;
    2603. 

  2603.             }
    2604. 

  2604.             if (top + height > window.innerHeight) {
    2605. 

  2605.                 top = 0;
    2606. 

  2606.             }
    2607. 

  2607. 

  2608.             //Check if the location already cotain any window
    2609. 

  2609.             while (floatWindowLocationDuplicated(left, top)) {
    2610. 

  2610.                 left += 30;
    2611. 

  2611.                 top += 30;
    2612. 

  2612.             }
    2613. 

  2613. 

  2614.             //Check if the opening require a overwrite on background color
    2615. 

  2615.             var backgroundStyle = "";
    2616. 

  2616.             if (bgcolor !== ""){
    2617. 

  2617.                 backgroundStyle = `background-color: ${bgcolor};`;
    2618. 

  2618.             }
    2619. 

  2619. 

  2620.             //Check if the theme color is applied. If yes, generate the floatWindow with overwritten theem color
    2621. 

  2621.             var overWriteThemeColor = "";
    2622. 

  2622.             if (desktopThemeColor != ""){
    2623. 

  2623.                 overWriteThemeColor = `background-color: ${hexToRgbA(desktopThemeColor, 0.85)}`;
    2624. 

  2624.             }
    2625. 

  2625. 

  2626.             //Updates 2022-06-24: Added touch screen docking buttons
    2627. 

  2627.             let dockButtons = `<div class="buttons dockleft">
    2628. 

  2628.                 <img src="img/system/dleft.svg"></img>
    2629. 

  2629.             </div>
    2630. 

  2630.             <div class="buttons dockright">
    2631. 

  2631.                 <img src="img/system/dright.svg"></img>
    2632. 

  2632.             </div>`;
    2633. 

  2633.             if (!isTouchScreen){
    2634. 

  2634.                 dockButtons = "";
    2635. 

  2635.             }
    2636. 

  2636.             //Append the floatWindow into the body
    2637. 

  2637.             $("body").append(`<div class="floatWindow" windowId="${uuid}" parent="${parentWindowID}" callback="${callbackFunctionName}" style="z-index:0; width:${width}px; height:${height}px; left:${left}px; top:${top}px;${backgroundStyle}">
    2638. 

  2638.                 <div class="controls fwdragger themeColorSolid" style="${overWriteThemeColor}">
    2639. 

  2639.                     <img class="moduleicon" src="${moduleIcon}"></img>
    2640. 

  2640.                     <div class="title">${title}</div>
    2641. 

  2641.                     <div class="fwcontrol">
    2642. 

  2642.                         ${dockButtons}
    2643. 

  2643.                         <div class="buttons mintoggle" style="margin-left: 1em;">
    2644. 

  2644.                             <img src="img/system/min.svg"></img>
    2645. 

  2645.                         </div>
    2646. 

  2646.                         <div class="buttons maxtoggle">
    2647. 

  2647.                             <img class="maxToogleButton" src="img/system/max.svg"></img>
    2648. 

  2648.                         </div>
    2649. 

  2649.                         <div class="buttons closetoggle close">
    2650. 

  2650.                             <img src="img/system/close.svg"></img>
    2651. 

  2651.                         </div>
    2652. 

  2652.                     </div>
    2653. 

  2653.                 </div>
    2654. 

  2654.                 <div class="iframewrapper">
    2655. 

  2655.                     <iframe src="${url}" allowfullscreen="true"></iframe>
    2656. 

  2656.                     <div class="iframecover"></div>
    2657. 

  2657.                 </div>
    2658. 

  2658.             </div>`);
    2659. 

  2659.             var newWindowObject = getFloatWindowByID(uuid);
    2660. 

  2660.             //console.log(newWindowObject);
    2661. 

  2661.             MoveFloatWindowToTop(newWindowObject);
    2662. 

  2662. 

  2663.             //Append window to taskbar
    2664. 

  2664.             var groupInfo = url.split("/");
    2665. 

  2665.             var group = "";
    2666. 

  2666.             if (groupInfo.length == 1) {
    2667. 

  2667.                 group = groupInfo[0];
    2668. 

  2668.             } else {
    2669. 

  2669.                 groupInfo.pop();
    2670. 

  2670.                 group = groupInfo.join("/");
    2671. 

  2671.             }
    2672. 

  2672. 

  2673.             //File system windows require special grouping based on their filename
    2674. 

  2674.             if (url.includes("SystemAO/file_system/")){
    2675. 

  2675.                 group = url.split("/").pop().split(".").join("_");
    2676. 

  2676.             }else if (url.includes("SystemAO/utilities/")){
    2677. 

  2677.                 group = url.split("/").pop().split(".").join("_");
    2678. 

  2678.                 if (group.includes("#")){
    2679. 

  2679.                     group = group.split("#")[0];
    2680. 

  2680.                 }
    2681. 

  2681.             }
    2682. 

  2682. 

  2683.             //Check if the group already exists.
    2684. 

  2684.             var groupExists = false;
    2685. 

  2685.             var targetGroupingTab;
    2686. 

  2686.             $(".floatWindowButton").each(function() {
    2687. 

  2687.                 if ($(this).attr("group") == group) {
    2688. 

  2688.                     groupExists = true;
    2689. 

  2689.                     targetGroupingTab = $(this);
    2690. 

  2690.                 }
    2691. 

  2691.             });
    2692. 

  2692. 

  2693.             //Check if the group is System Explorer and held special treatment if yes
    2694. 

  2694.             if (group.split("/").shift() == "SystemAO") {
    2695. 

  2695.                 if (url.includes("file_explorer.html") && groupExists) {
    2696. 

  2696.                     //File Manager. Group them
    2697. 

  2697.                     group = "file_explorer";
    2698. 

  2698.                 }else if (url.includes("utilities") && groupExists){
    2699. 

  2699.                     //Allow grouping
    2700. 

  2700. 

  2701.                 } else {
    2702. 

  2702.                     //Do not group anything from SystemAO other than file explorer
    2703. 

  2703.                     groupExists = false;
    2704. 

  2704.                 }
    2705. 

  2705.             }
    2706. 

  2706. 

  2707.             if (groupExists == false) {
    2708. 

  2708.                 //Append the item to taskbar
    2709. 

  2709.                 var windowIDGroup = encodeURIComponent(JSON.stringify([uuid]));
    2710. 

  2710.                 var floatWindowButtonObject = ` <div class="item clickable floatWindowButton onscreen" group="${group}" windowIDGroup="${windowIDGroup}">
    2711. 

  2711.                                                         <img class="floatWindowAppIcon" src="${moduleIcon}"></img>
    2712. 

  2712.                                                         <p class="floatWindowTitle">${title}</p>
    2713. 

  2713.                                                     </div>`;
    2714. 

  2714.                 $(".navimenu").append(floatWindowButtonObject);
    2715. 

  2715.             } else {
    2716. 

  2716.                 //Group already exists. Add tab into that group.
    2717. 

  2717.                 var originalIDlist = JSON.parse(decodeURIComponent($(targetGroupingTab).attr('windowIDGroup')));
    2718. 

  2718.                 originalIDlist.push(uuid);
    2719. 

  2719.                 //Encode and put the group list back to the object
    2720. 

  2720.                 var newIDList = encodeURIComponent(JSON.stringify(originalIDlist));
    2721. 

  2721.                 $(targetGroupingTab).attr("windowIDGroup", newIDList);
    2722. 

  2722.             }
    2723. 

  2723.             hookFloatWindowEvents();
    2724. 

  2724.             resizeAllFloatWindowButtons();
    2725. 

  2725. 

  2726.             if (callback !== undefined){
    2727. 

  2727.                 callback(uuid);
    2728. 

  2728.             }
    2729. 

  2729.         }
    2730. 

  2730. 

  2731.         function resizeAllFloatWindowButtons() {
    2732. 

  2732.             var fwbTotalWidth = $(".floatWindowButton").length * 200;
    2733. 

  2733.             if (fwbTotalWidth > window.innerWidth * 0.7) {
    2734. 

  2734.                 $(".floatWindowButton").addClass("hideText");
    2735. 

  2735.             } else {
    2736. 

  2736.                 $(".floatWindowButton").removeClass("hideText");
    2737. 

  2737.             }
    2738. 

  2738.         }
    2739. 

  2739. 

  2740. 

  2741.         function floatWindowLocationDuplicated(left, top) {
    2742. 

  2742.             var duplicated = false;
    2743. 

  2743.             $(".floatWindow").each(function() {
    2744. 

  2744.                 if ($(this).offset().left == left && $(this).offset().top == top) {
    2745. 

  2745.                     duplicated = true;
    2746. 

  2746.                 }
    2747. 

  2747.             });
    2748. 

  2748.             return duplicated;
    2749. 

  2749.         }
    2750. 

  2750. 

  2751.         function defaultOrKey(object, defaultvalue, key) {
    2752. 

  2752.             if (object[key] !== undefined) {
    2753. 

  2753.                 return object[key];
    2754. 

  2754.             }
    2755. 

  2755.             return defaultvalue;
    2756. 

  2756.         }
    2757. 

  2757. 

  2758.         function getFloatWindowByID(id) {
    2759. 

  2759.             var targetWindow = undefined;
    2760. 

  2760.             $(".floatWindow").each(function() {
    2761. 

  2761.                 if ($(this).attr("windowId") == id) {
    2762. 

  2762.                     targetWindow = $(this);
    2763. 

  2763.                 }
    2764. 

  2764.             });
    2765. 

  2765.             return targetWindow;
    2766. 

  2766.         }
    2767. 

  2767.         
    2768. 

  2768.         function getFloatWindowIconByID(id) {
    2769. 

  2769.             var targetIconURL = "img/system/favicon.png";
    2770. 

  2770.             $(".floatWindow").each(function() {
    2771. 

  2771.                 if ($(this).attr("windowId") == id) {
    2772. 

  2772.                     //This window ID matched the target fw
    2773. 

  2773.                     targetIconURL = $(this).find(".moduleicon").attr('src');
    2774. 

  2774.                 }
    2775. 

  2775.             });
    2776. 

  2776.             return targetIconURL;
    2777. 

  2777.         }
    2778. 

  2778. 

  2779.         function getFloatWindowTitleByID(id) {
    2780. 

  2780.             var title = "";
    2781. 

  2781.             $(".floatWindow").each(function() {
    2782. 

  2782.                 if ($(this).attr("windowId") == id) {
    2783. 

  2783.                     //This window ID matched the target fw
    2784. 

  2784.                     title = $(this).find(".title").text();
    2785. 

  2785.                 }
    2786. 

  2786.             });
    2787. 

  2787.             return title;
    2788. 

  2788.         }
    2789. 

  2789. 

  2790.         function setFloatWindowResizePolicy(targetFWId, resizble = true) {
    2791. 

  2791.             var targetfw = getFloatWindowByID(targetFWId);
    2792. 

  2792.             if (resizble) {
    2793. 

  2793.                 $(targetfw).find(".maxtoggle").show();
    2794. 

  2794.                 if (isTouchScreen){
    2795. 

  2795.                     $(targetfw).find(".dockleft").show();
    2796. 

  2796.                     $(targetfw).find(".dockright").show();
    2797. 

  2797.                 }
    2798. 

  2798.                 $(targetfw).removeClass("fixedsize");
    2799. 

  2799.             } else {
    2800. 

  2800.                 $(targetfw).find(".maxtoggle").hide();
    2801. 

  2801.                 if (isTouchScreen){
    2802. 

  2802.                     $(targetfw).find(".dockleft").hide();
    2803. 

  2803.                     $(targetfw).find(".dockright").hide();
    2804. 

  2804.                 }
    2805. 

  2805.                 $(targetfw).addClass("fixedsize");
    2806. 

  2806.             }
    2807. 

  2807.         }
    2808. 

  2808. 

  2809.         function setFloatWindowSize(targetFWId, newWidth, newHeight) {
    2810. 

  2810.             var targetfw = getFloatWindowByID(targetFWId);
    2811. 

  2811.             $(targetfw).css({
    2812. 

  2812.                 height: newHeight,
    2813. 

  2813.                 width: newWidth
    2814. 

  2814.             });
    2815. 

  2815.         }
    2816. 

  2816. 

  2817.         function setFloatWindowTitle(targetFWId, newTitle) {
    2818. 

  2818.             var targetfw = getFloatWindowByID(targetFWId);
    2819. 

  2819.             $(targetfw).find(".title").text(newTitle);
    2820. 

  2820.             
    2821. 

  2821.         }
    2822. 

  2822. 

  2823.         function openFileWithModule(moduleLaunchInfo, openFileList) {
    2824. 

  2824.             var url = moduleLaunchInfo["StartDir"];
    2825. 

  2825.             var size = [undefined, undefined];
    2826. 

  2826.             var title = moduleLaunchInfo["Name"];
    2827. 

  2827.             var icon = "img/system/favicon.png";
    2828. 

  2828.             if (moduleLaunchInfo["IconPath"] != "") {
    2829. 

  2829.                 icon = moduleLaunchInfo["IconPath"];
    2830. 

  2830.             }
    2831. 

  2831.             //Use floatWindow if exists
    2832. 

  2832.             if (moduleLaunchInfo["SupportFW"] == true && moduleLaunchInfo["LaunchFWDir"] != "") {
    2833. 

  2833.                 url = moduleLaunchInfo["LaunchFWDir"];
    2834. 

  2834.                 if (moduleLaunchInfo["InitFWSize"] !== null) {
    2835. 

  2835.                     size = moduleLaunchInfo["InitFWSize"]
    2836. 

  2836.                 }
    2837. 

  2837.             }
    2838. 

  2838.             //Use embedded mode if exists
    2839. 

  2839.             if (moduleLaunchInfo["SupportEmb"] == true && moduleLaunchInfo["LaunchEmb"] != "") {
    2840. 

  2840.                 url = moduleLaunchInfo["LaunchEmb"];
    2841. 

  2841.                 if (moduleLaunchInfo["InitEmbSize"] !== null) {
    2842. 

  2842.                     size = moduleLaunchInfo["InitEmbSize"]
    2843. 

  2843.                 }
    2844. 

  2844.             }
    2845. 

  2845. 

  2846.             var openParamter = encodeURIComponent(JSON.stringify(openFileList));
    2847. 

  2847. 

  2848.             //Add launch files info and launch floatWindow
    2849. 

  2849.             parent.newFloatWindow({
    2850. 

  2850.                 url: url + "#" + openParamter,
    2851. 

  2851.                 width: size[0],
    2852. 

  2852.                 height: size[1],
    2853. 

  2853.                 appicon: icon,
    2854. 

  2854.                 title: title
    2855. 

  2855.             });
    2856. 

  2856.         }
    2857. 

  2857. 

  2858.         //====================== DESKTOP THEME RELATED FUNCTIONS =====================
    2859. 

  2859. 

  2860.         //Initiate desktop theme list and user current theme
    2861. 

  2861.         function initDesktopTheme() {
    2862. 

  2862.             //Update 1 April 2021: Check if the user customize the desktop with the given path
    2863. 

  2863. 

  2864.             $.get("system/desktop/theme", function(data) {
    2865. 

  2865.                 //Return a list of theme stored on the system
    2866. 

  2866.                 desktopThemeList = data;
    2867. 

  2867.                 $.get("system/desktop/theme?get=true", function(data) {
    2868. 

  2868.                     //Get the user theme settings
    2869. 

  2869.                     changeDesktopTheme(data);
    2870. 

  2870.                 });
    2871. 

  2871.             });
    2872. 

  2872.         }
    2873. 

  2873. 

  2874.         function setDesktopTheme(themeName) {
    2875. 

  2875.             $.get("system/desktop/theme?set=" + themeName, function(data) {
    2876. 

  2876.                 //Get the user theme settings
    2877. 

  2877.                 changeDesktopTheme(themeName);
    2878. 

  2878.                 if (data.includes("Error")) {
    2879. 

  2879.                     console.log(data);
    2880. 

  2880.                 }
    2881. 

  2881.             });
    2882. 

  2882.         }
    2883. 

  2883. 

  2884.         //Actiave background cross fade changing animation
    2885. 

  2885.         function initBackgroundSwitchingAnimation() {
    2886. 

  2886.             if (localStorage.getItem("ao/desktop/backgroundInterval") !== null && !isNaN(parseInt(localStorage.getItem("ao/desktop/backgroundInterval")))){
    2887. 

  2887.                 //Localstorage has interval setting that is not NaN
    2888. 

  2888.                 backgroundCrossfadeInterval = parseInt(localStorage.getItem("ao/desktop/backgroundInterval")) * 1000;
    2889. 

  2889.             }
    2890. 

  2890. 

  2891.             backgroundIntervalCounter = setInterval(function() {
    2892. 

  2892.                 $("body").css("background-image", "none").css({
    2893. 

  2893.                     'background-color': '#000000'
    2894. 

  2894.                 });
    2895. 

  2895.                 $(".showBackground").removeClass("showBackground");
    2896. 

  2896.                 $($(".backgroundFrame")[nextSlideshowIndex]).addClass("showBackground");
    2897. 

  2897.                 nextSlideshowIndex++;
    2898. 

  2898.                 if (nextSlideshowIndex > currentBackgroundList.length - 1) {
    2899. 

  2899.                     nextSlideshowIndex = 0;
    2900. 

  2900.                 }
    2901. 

  2901.             }, backgroundCrossfadeInterval);
    2902. 

  2902.         }
    2903. 

  2903. 

  2904.         //Function for changing the desktop theme
    2905. 

  2905.         function changeDesktopTheme(targetThemeName) {
    2906. 

  2906.             currentUserTheme = targetThemeName;
    2907. 

  2907. 

  2908.             if (currentUserTheme.includes(":/") == false){
    2909. 

  2909.                 //This is default theme pack name
    2910. 

  2910.                 for (var i = 0; i < desktopThemeList.length; i++) {
    2911. 

  2911.                     var thisTheme = desktopThemeList[i];
    2912. 

  2912.                     if (thisTheme["Theme"] == targetThemeName) {
    2913. 

  2913.                         //Use this config as the target theme
    2914. 

  2914.                         currentBackgroundList = thisTheme["Bglist"];
    2915. 

  2915.                         break;
    2916. 

  2916.                     }
    2917. 

  2917.                 }
    2918. 

  2918.                 //Initiate the background image.
    2919. 

  2919.                 $("#bgwrapper").html("");
    2920. 

  2920.                 for (var i = 0; i < currentBackgroundList.length; i++) {
    2921. 

  2921.                     var id = "dbg" + i;
    2922. 

  2922.                     var thisImage = "img/desktop/bg/" + currentUserTheme + "/" + currentBackgroundList[i];
    2923. 

  2923.                     $("#bgwrapper").append('<img id="' + id + '" rel="preload" draggable="false" onclick="this.focus();" style="background-image:url(\'' + thisImage + '\');" class="backgroundFrame"></img>');
    2924. 

  2924.                 }
    2925. 

  2925.                 setTimeout(function() {
    2926. 

  2926.                     $("#dbg0").addClass("showBackground");
    2927. 

  2927.                 }, 300);
    2928. 

  2928. 

  2929.                 if (currentBackgroundList.length == 1) {
    2930. 

  2930.                     //There are only 1 background in this pack. Make the next slice be 0 as well.
    2931. 

  2931.                     nextSlideshowIndex = 0;
    2932. 

  2932.                 }else if (currentBackgroundList.length == 0){
    2933. 

  2933.                     //Background no longer exists. Change to default
    2934. 

  2934.                     changeDesktopTheme("default");
    2935. 

  2935.                 } else {
    2936. 

  2936.                     nextSlideshowIndex = 1;
    2937. 

  2937.                 }
    2938. 

  2938.             }else{
    2939. 

  2939.                 //This is user defined photo file
    2940. 

  2940.                 $.get("system/desktop/theme?load=" + targetThemeName, function(data){
    2941. 

  2941.                     if (data.error !== undefined){
    2942. 

  2942.                         //The folder is gone. Use default instead
    2943. 

  2943.                         console.log(data.error);
    2944. 

  2944.                         changeDesktopTheme("default");
    2945. 

  2945.                     }else{
    2946. 

  2946.                         //OK! Load it
    2947. 

  2947.                         currentBackgroundList = data;
    2948. 

  2948.      
    2949. 

  2949.                         $("#bgwrapper").html("");
    2950. 

  2950.                         for (var i = 0; i < currentBackgroundList.length; i++) {
    2951. 

  2951.                             var id = "dbg" + i;
    2952. 

  2952.                             var thisImage = "media/?file=" + currentBackgroundList[i];
    2953. 

  2953.                             $("#bgwrapper").append('<img id="' + id + '" rel="preload" draggable="false" style="background-image:url(\'' + thisImage + '\');" class="backgroundFrame"></img>');
    2954. 

  2954.                         }
    2955. 

  2955.                         setTimeout(function() {
    2956. 

  2956.                             $("#dbg0").addClass("showBackground");
    2957. 

  2957.                         }, 300);
    2958. 

  2958. 

  2959.                         if (currentBackgroundList.length == 1) {
    2960. 

  2960.                             //There are only 1 background in this pack. Make the next slice be 0 as well.
    2961. 

  2961.                             nextSlideshowIndex = 0;
    2962. 

  2962.                         }else if (currentBackgroundList.length == 0){
    2963. 

  2963.                             //Background no longer exists. Change to default
    2964. 

  2964.                             changeDesktopTheme("default");
    2965. 

  2965.                         } else {
    2966. 

  2966.                             nextSlideshowIndex = 1;
    2967. 

  2967.                         }
    2968. 

  2968. 

  2969.                     }
    2970. 

  2970.                 });
    2971. 

  2971.                
    2972. 

  2972.             }
    2973. 

  2973. 

  2974.         }
    2975. 

  2975. 

  2976.         $("#bgwrapper").on("click", function(evt) {
    2977. 

  2977.             evt.preventDefault();
    2978. 

  2978.         });
    2979. 

  2979. 

  2980.         //================== DESKTOP FILE LOCATION FUNCTIONS ====================
    2981. 

  2981.         function initDesktopFiles(optionObject = {}, callback = undefined) {
    2982. 

  2982.             $.get("system/desktop/listDesktop", function(data) {
    2983. 

  2983.                 //Prase optionObject
    2984. 

  2984.                 var noflash = false;
    2985. 

  2985.                 if (typeof optionObject.noflash !== "undefined"){
    2986. 

  2986.                     noflash = optionObject.noflash;
    2987. 

  2987.                 }
    2988. 

  2988.                 if (noflash){
    2989. 

  2989.                     //Only clean out those object that not exists in the new filelist
    2990. 

  2990.                     var existsingFilepaths = [];
    2991. 

  2991.                     if (data != null){
    2992. 

  2992.                         for (var i =0; i < data.length; i++){
    2993. 

  2993.                             existsingFilepaths.push(data[i].Filepath);
    2994. 

  2994.                         }
    2995. 

  2995.                     }else{
    2996. 

  2996.                         //Nothing on desktop
    2997. 

  2997.                     }
    2998. 

  2998.                    
    2999. 

  2999.                     //console.log(existsingFilepaths);
    3000. 

  3000.                     //If the launchIcon path is not in the latest list, remove it from desktop
    3001. 

  3001.                     $(".launchIcon").each(function(){
    3002. 

  3002.                         if (existsingFilepaths.includes($(this).attr("filepath")) == false){
    3003. 

  3003.                            $(this).remove();
    3004. 

  3004.                         }
    3005. 

  3005.                     });
    3006. 

  3006.                 }else{
    3007. 

  3007.                     //Cleanup all previous icons
    3008. 

  3008.                     $("#iconwrapper").children().each(function(){
    3009. 

  3009.                         if ($(this).hasClass("launchIcon") && $(this).attr("type") == "dummy"){
    3010. 

  3010.                             //Special kind of launchIcon. Skip this
    3011. 

  3011.                             return;
    3012. 

  3012.                         }
    3013. 

  3013.                         $(this).remove();
    3014. 

  3014.                     });
    3015. 

  3015.                 }
    3016. 

  3016.                 //Allocate new items location
    3017. 

  3017.                 var iheight = 106;
    3018. 

  3018.                 var iwidth = 70;
    3019. 

  3019.                 var padding = 16;
    3020. 

  3020.                 if (desktopIconSize == "small") {
    3021. 

  3021.                     iheight = 82;
    3022. 

  3022.                     iwidth = 50;
    3023. 

  3023.                 } else if (desktopIconSize == "medium") {
    3024. 

  3024.                     iheight = 106;
    3025. 

  3025.                     iwidth = 70;
    3026. 

  3026.                 } else if (desktopIconSize == "big") {
    3027. 

  3027.                     iheight = 124;
    3028. 

  3028.                     iwidth = 84;
    3029. 

  3029.                 }
    3030. 

  3030. 

  3031.                 iconSize = [iwidth, iheight];
    3032. 

  3032.                 var screenHeight = window.innerHeight;
    3033. 

  3033.                 var screenWidth = window.innerWidth;
    3034. 

  3034. 

  3035.                 var vc = Math.floor((screenHeight - 20 - padding) / iheight);
    3036. 

  3036.                 var hc = Math.floor((screenWidth - padding) / iwidth);
    3037. 

  3037. 

  3038.                 var slots = []; //A 2D array for storing relative to absolute locations
    3039. 

  3039.                 for (var j = 0; j < hc; j++) {
    3040. 

  3040.                     var thisLocationList = [];
    3041. 

  3041.                     for (var i = 0; i < vc; i++) {
    3042. 

  3042.                         var thisLocation = [j * iwidth + padding, i * iheight + padding];
    3043. 

  3043.                         thisLocationList.push(thisLocation);
    3044. 

  3044.                     }
    3045. 

  3045.                     slots.push(thisLocationList);
    3046. 

  3046.                 }
    3047. 

  3047.                 //Store the root position (0,0) in rootPosition
    3048. 

  3048.                 let rootPosition = JSON.parse(JSON.stringify(slots[0][0]));
    3049. 

  3049.                 desktopGrids = JSON.parse(JSON.stringify(slots));
    3050. 

  3050. 

  3051.                 //Assign items to desktop
    3052. 

  3052.                 var unallocatedFiles = [];
    3053. 

  3053.                 let remainingSlots = JSON.parse(JSON.stringify(slots));
    3054. 

  3054.                 desktopFileList = [];
    3055. 

  3055.                 if (data === null){
    3056. 

  3056.                     //No files on desktop
    3057. 

  3057.                     return;
    3058. 

  3058.                 }
    3059. 

  3059.                 for (var i = 0; i < data.length; i++) {
    3060. 

  3060.                     var thisFile = data[i];
    3061. 

  3061.                     desktopFileList.push(JSON.parse(JSON.stringify(thisFile.Filename)));
    3062. 

  3062.                     //Get icon from the icon list
    3063. 

  3063.                     var location = [thisFile.IconX, thisFile.IconY];
    3064. 

  3064.                     if (location[0] == -1 && location[1] == -1) {
    3065. 

  3065.                         //This file is not located. Push it into unallocatedFileList
    3066. 

  3066.                         unallocatedFiles.push(thisFile);
    3067. 

  3067.                     } else if (location[0] >= slots.length || location[1] >= slots[0].length) {
    3068. 

  3068.                         //This file is outside of the screen area. Set to be be unallocatedFiles as well
    3069. 

  3069.                         unallocatedFiles.push(thisFile);
    3070. 

  3070.                     } else {
    3071. 

  3071.                         //This file is already located. Push it location into occupiedSlots
    3072. 

  3072.                         //var screenX = location[0] * iwidth + padding/2;
    3073. 

  3073.                         //var screenY = location[1] * iheight + padding/2;
    3074. 

  3074.                         var screenLocation = slots[location[0]][location[1]];
    3075. 

  3075. 

  3076.                         //Remove this object from remaining slots
    3077. 

  3077.                         remainingSlots[location[0]][location[1]] = undefined;
    3078. 

  3078.                         //console.log(thisFile, screenLocation[0], screenLocation[1], iheight, iwidth);
    3079. 

  3079.                         appendIconAtLocation(thisFile, screenLocation[0], screenLocation[1], iheight, iwidth, noflash);
    3080. 

  3080.                     }
    3081. 

  3081.                 }
    3082. 

  3082. 

  3083.                 //Foreach remaining files, assign a location for it.
    3084. 

  3084.                 var walk = [slots.length, slots[0].length];
    3085. 

  3085.                 var current = [0, 0];
    3086. 

  3086.                 for (var i = 0; i < unallocatedFiles.length; i++) {
    3087. 

  3087.                     var thisFile = unallocatedFiles[i];
    3088. 

  3088.                     try{
    3089. 

  3089.                         while (typeof(remainingSlots[current[0]][current[1]]) == "undefined") {
    3090. 

  3090.                             //This slot is not usabled. Next slot.
    3091. 

  3091.                             current[1] += 1;
    3092. 

  3092.                             if (current[1] >= walk[1]) {
    3093. 

  3093.                                 current[1] = 0;
    3094. 

  3094.                                 current[0] += 1;
    3095. 

  3095.                             }
    3096. 

  3096. 

  3097.                             if (typeof(remainingSlots[current[0]]) == "undefined"){
    3098. 

  3098.                                 //Not enough space to fit the item. Move it to 0 0 instead
    3099. 

  3099.                                 current = [-1,-1];
    3100. 

  3100.                                 console.log(current);
    3101. 

  3101.                                 break;
    3102. 

  3102.                             }
    3103. 

  3103.                             
    3104. 

  3104.                         }
    3105. 

  3105.                     }catch{
    3106. 

  3106.                         //Something went wrong while assigning positions. Set at root location
    3107. 

  3107.                         current = [-1,-1];
    3108. 

  3108.                     }
    3109. 

  3109.                     
    3110. 

  3110.                     //Append the icon to screen
    3111. 

  3111.                     if (current[0] == -1 && current[1] == -1){
    3112. 

  3112.                         //Screen overflow. Stack the file at (0,0)
    3113. 

  3113.                         screenLocation = [rootPosition[0], rootPosition[1]];
    3114. 

  3114.                         console.log(screenLocation);
    3115. 

  3115.                     }else{
    3116. 

  3116.                         screenLocation = remainingSlots[current[0]][current[1]];
    3117. 

  3117.                         remainingSlots[current[0]][current[1]] = undefined;
    3118. 

  3118.                     }
    3119. 

  3119.                     
    3120. 

  3120.                     appendIconAtLocation(thisFile, screenLocation[0], screenLocation[1], iheight, iwidth, noflash);
    3121. 

  3121. 

  3122.                     //Save the icon location to server
    3123. 

  3123.                     $.ajax({
    3124. 

  3124.                         url: "system/desktop/files",
    3125. 

  3125.                         method: "POST",
    3126. 

  3126.                         data: {"set": thisFile.Filename, "x": current[0], "y": current[1]},
    3127. 

  3127.                         success: function(data) {
    3128. 

  3128.                             if (data.error !== undefined) {
    3129. 

  3129.                                 console.log(data.error);
    3130. 

  3130.                             }
    3131. 

  3131.                         }
    3132. 

  3132.                     });
    3133. 

  3133.                     
    3134. 

  3134.                 }
    3135. 

  3135. 

  3136.                 //Update the desktop hash to prevent the auto refresh by hash
    3137. 

  3137.                 getDesktopHash(function(hash){
    3138. 

  3138.                     desktopFileHash = hash;
    3139. 

  3139.                 });
    3140. 

  3140. 

  3141.                 if (callback !== undefined) {
    3142. 

  3142.                     //console.log(callback);
    3143. 

  3143.                     callback();
    3144. 

  3144.                 }
    3145. 

  3145.             });
    3146. 

  3146.         }
    3147. 

  3147. 

  3148.         //Handle desktop file multi selection and dragging
    3149. 

  3149.         $("#bgwrapper").on("mousedown", function(evt) {
    3150. 

  3150.             initMultiSelection(evt);
    3151. 

  3151.         });
    3152. 

  3152.         $("#bgwrapper").on("touchstart", function(evt) {
    3153. 

  3153.             initMultiSelection(evt);
    3154. 

  3154.         });
    3155. 

  3155. 

  3156.         $("body").on("mouseup", function(evt) {
    3157. 

  3157.             mainWindowMouseup(evt);
    3158. 

  3158. 

  3159.         });
    3160. 

  3160.         $("body").on("touchend", function(evt) {
    3161. 

  3161.             mainWindowMouseup(evt);
    3162. 

  3162.         });
    3163. 

  3163. 

  3164.         $("#selectionPanel").on("mouseup", function(event) {
    3165. 

  3165. 

  3166.         });
    3167. 

  3167. 

  3168.         function mainWindowMouseup(event) {
    3169. 

  3169.             if (event.pageX == multiSelectionStartPoint[0] && event.pageY == multiSelectionStartPoint[1]) {
    3170. 

  3170.                 //Pressdown and up at the same location
    3171. 

  3171.                 $(".launchIconWrapper.selected").removeClass("selected");
    3172. 

  3172.                 endMultiSelection(event);
    3173. 

  3173.             } else {
    3174. 

  3174.                 //Press down and up at different location
    3175. 

  3175.                 endMultiSelection(event);
    3176. 

  3176.             }
    3177. 

  3177. 

  3178.             if (resizingWindow){
    3179. 

  3179.                 //Resizing floatWindow out of the window bound (aka someone don't know how to resize a window correctly)
    3180. 

  3180.                 resizingWindow = false;
    3181. 

  3181.                 resizingEdgeID = 0;
    3182. 

  3182.                 $("#fwdragpanel").hide();
    3183. 

  3183.                 $("#tfwdragpanel").hide();
    3184. 

  3184.                 $('.floatWindow.topmost').css("pointer-events", "auto");
    3185. 

  3185.                 $('.floatWindow.topmost').css("opacity", 1);
    3186. 

  3186.                 $(resizingWindowTarget).find(".iframecover").hide();
    3187. 

  3187.                 $(resizingWindowTarget).find(".iframewrapper").css('cursor', '');
    3188. 

  3188.             }
    3189. 

  3189.             
    3190. 

  3190.         }
    3191. 

  3191. 

  3192.         function initMultiSelection(event) {
    3193. 

  3193.             event.preventDefault();
    3194. 

  3194.             multiSelecting = true;
    3195. 

  3195.             hideAllContextMenus();
    3196. 

  3196.             $("#selectionPanel").css({
    3197. 

  3197.                 left: event.pageX,
    3198. 

  3198.                 top: event.pageY,
    3199. 

  3199.                 width: 0,
    3200. 

  3200.                 height: 0
    3201. 

  3201.             });
    3202. 

  3202.             $("#selectionPanel").show();
    3203. 

  3203.             multiSelectionStartPoint = [event.pageX, event.pageY];
    3204. 

  3204.         }
    3205. 

  3205. 

  3206.         function movingMultiSelectionArea(event) {
    3207. 

  3207.             event.preventDefault();
    3208. 

  3208.             var sx = multiSelectionStartPoint[0];
    3209. 

  3209.             var sy = multiSelectionStartPoint[1];
    3210. 

  3210.             var ex = event.pageX;
    3211. 

  3211.             var ey = event.pageY;
    3212. 

  3212. 

  3213.             var newleft = sx;
    3214. 

  3214.             if (ex < sx) {
    3215. 

  3215.                 newleft = ex;
    3216. 

  3216.             }
    3217. 

  3217. 

  3218.             var newtop = sy;
    3219. 

  3219.             if (ey < sy) {
    3220. 

  3220.                 newtop = ey;
    3221. 

  3221.             }
    3222. 

  3222. 

  3223.             var newWidth = Math.abs(sx - ex);
    3224. 

  3224.             var newHeight = Math.abs(sy - ey);
    3225. 

  3225.             $("#selectionPanel").css({
    3226. 

  3226.                 left: newleft,
    3227. 

  3227.                 top: newtop,
    3228. 

  3228.                 width: newWidth,
    3229. 

  3229.                 height: newHeight
    3230. 

  3230.             });
    3231. 

  3231. 

  3232.             //Select all the launch icon selected
    3233. 

  3233.             selectAllLaunchIconInRange(newleft, newleft + newWidth, newtop, newtop + newHeight);
    3234. 

  3234.         }
    3235. 

  3235. 

  3236.         function endMultiSelection(event) {
    3237. 

  3237.             event.preventDefault();
    3238. 

  3238.             multiSelecting = false;
    3239. 

  3239.             multiSelectionStartPoint = [-1, -1];
    3240. 

  3240.             $("#selectionPanel").hide();
    3241. 

  3241.         }
    3242. 

  3242. 

  3243.         function selectAllLaunchIconInRange(minX, maxX, minY, maxY) {
    3244. 

  3244.             //Select launch icons from its center point
    3245. 

  3245.             var xOffset = iconSize[0] / 2;
    3246. 

  3246.             var yOffset = iconSize[1] / 2;
    3247. 

  3247.             $(".launchIconWrapper.selected").removeClass("selected");
    3248. 

  3248.             $(".launchIcon").each(function() {
    3249. 

  3249.                 //Calculate center point for this icon
    3250. 

  3250.                 var thisX = $(this).offset().left + xOffset;
    3251. 

  3251.                 var thisY = $(this).offset().top + yOffset;
    3252. 

  3252.                 if (thisX > minX && thisX < maxX) {
    3253. 

  3253.                     if (thisY > minY && thisY < maxY) {
    3254. 

  3254.                         $(this).find(".launchIconWrapper").addClass("selected");
    3255. 

  3255.                     }
    3256. 

  3256.                 }
    3257. 

  3257.             });
    3258. 

  3258.         }
    3259. 

  3259. 

  3260.         function redrawDesktopGrids() {
    3261. 

  3261.             var iheight = 106;
    3262. 

  3262.             var iwidth = 70;
    3263. 

  3263.             var padding = 16;
    3264. 

  3264.             if (desktopIconSize == "small") {
    3265. 

  3265.                 iheight = 82;
    3266. 

  3266.                 iwidth = 50;
    3267. 

  3267.             } else if (desktopIconSize == "medium") {
    3268. 

  3268.                 iheight = 106;
    3269. 

  3269.                 iwidth = 70;
    3270. 

  3270.             } else if (desktopIconSize == "big") {
    3271. 

  3271.                 iheight = 124;
    3272. 

  3272.                 iwidth = 84;
    3273. 

  3273.             }
    3274. 

  3274. 

  3275.             iconSize = [iwidth, iheight];
    3276. 

  3276.             var screenHeight = window.innerHeight;
    3277. 

  3277.             var screenWidth = window.innerWidth;
    3278. 

  3278. 

  3279.             var vc = Math.floor((screenHeight - 20 - padding) / iheight);
    3280. 

  3280.             var hc = Math.floor((screenWidth - padding) / iwidth);
    3281. 

  3281. 

  3282.             var slots = []; //A 2D array for storing relative to absolute locations
    3283. 

  3283.             for (var j = 0; j < hc; j++) {
    3284. 

  3284.                 var thisLocationList = [];
    3285. 

  3285.                 for (var i = 0; i < vc; i++) {
    3286. 

  3286.                     var thisLocation = [j * iwidth + padding, i * iheight + padding];
    3287. 

  3287.                     thisLocationList.push(thisLocation);
    3288. 

  3288.                 }
    3289. 

  3289.                 slots.push(thisLocationList);
    3290. 

  3290.             }
    3291. 

  3291. 

  3292.             desktopGrids = JSON.parse(JSON.stringify(slots));
    3293. 

  3293.         }
    3294. 

  3294. 

  3295.         function getTextPixelWidth(measureText){
    3296. 

  3296.             let canvas = document.getElementById('textWidthCanvas');
    3297. 

  3297.             let ctx = canvas.getContext('2d');
    3298. 

  3298.             let text = ctx.measureText(measureText);
    3299. 

  3299.             let estimatedFilenameSize = text.width;
    3300. 

  3300.             if (desktopIconSize == "small"){
    3301. 

  3301.                 estimatedFilenameSize = estimatedFilenameSize * 0.8679245283018868;
    3302. 

  3302.             }else if (desktopIconSize == "big"){
    3303. 

  3303.                 estimatedFilenameSize = estimatedFilenameSize * 1.509433962264151;
    3304. 

  3304.             }else{
    3305. 

  3305.                 estimatedFilenameSize = estimatedFilenameSize * 1.2452830188679245;
    3306. 

  3306.             }
    3307. 

  3307.             return estimatedFilenameSize;
    3308. 

  3308.         }
    3309. 

  3309. 

  3310.         function appendIconAtLocation(filedata, screenX, screenY, iheight, iwidth, updateMode=false) {
    3311. 

  3311.             //Get the icon from extension
    3312. 

  3312.             var icon = ao_module_utils.getIconFromExt(filedata.Ext.substring(1, filedata.Ext.length));
    3313. 

  3313.             var imagePath = "img/desktop/files_icon/" + desktopIconPack + "/" + icon + ".png";
    3314. 

  3314.             //Handle special icon types here
    3315. 

  3315.             var size = desktopIconSize;
    3316. 

  3316.             var filename = JSON.parse(JSON.stringify(filedata.Filename));
    3317. 

  3317.             var filepath = JSON.parse(JSON.stringify(filedata.Filepath));
    3318. 

  3318.             var isDir = JSON.parse(JSON.stringify(filedata.IsDir));
    3319. 

  3319.             var isEmptyDir = JSON.parse(JSON.stringify(filedata.IsEmptyDir));
    3320. 

  3320.             var isShared = JSON.parse(JSON.stringify(filedata.IsShared));
    3321. 

  3321.             var maxlength = 12;
    3322. 

  3322.             var type = "file";
    3323. 

  3323.             let shortenedName = filename;
    3324. 

  3324.             screenX += iconOffsetXY[0];
    3325. 

  3325.             screenY += iconOffsetXY[1];
    3326. 

  3326.             
    3327. 

  3327.             if (isDir) {
    3328. 

  3328.                 //Folder objects
    3329. 

  3329.                 icon = "folder outline";
    3330. 

  3330.                 if (isEmptyDir){
    3331. 

  3331.                     imagePath = "img/desktop/system_icon/folder.png";
    3332. 

  3332.                 }else{
    3333. 

  3333.                     imagePath = "img/desktop/system_icon/folder-with-content.png";
    3334. 

  3334.                 }
    3335. 

  3335.                 
    3336. 

  3336.                 type = "folder";
    3337. 

  3337.             } else if (isDir == false && icon == "folder outline") {
    3338. 

  3338.                 icon = "file outline";
    3339. 

  3339.                 imagePath = "img/desktop/files_icon/" + desktopIconPack + "/file outline.png";
    3340. 

  3340.                 type = "file";
    3341. 

  3341.             } else if (filedata.Ext == ".exe" || filedata.Ext == ".elf") {
    3342. 

  3342.                 //Executable objects
    3343. 

  3343.                 imagePath = "img/desktop/system_icon/script.png";
    3344. 

  3344.                 type = "executable";
    3345. 

  3345.             } else if (filedata.Ext == ".shortcut") {
    3346. 

  3346.                 //Shortcut
    3347. 

  3347.                 var shortcutImage = filedata.ShortcutImage;
    3348. 

  3348.                 shortenedName = JSON.parse(JSON.stringify(filedata.ShortcutName));
    3349. 

  3349.                 imagePath = shortcutImage;
    3350. 

  3350.                 type = "shortcut";
    3351. 

  3351.             }
    3352. 

  3352.             //Check if it is under small text mode
    3353. 

  3353.             if (size == "small"){
    3354. 

  3354.                 maxlength = 46;
    3355. 

  3355.             }else if (size == "big"){
    3356. 

  3356.                 maxlength = 80;
    3357. 

  3357.             }else{
    3358. 

  3358.                 maxlength = 66;
    3359. 

  3359.             }
    3360. 

  3360.             
    3361. 

  3361. 

  3362.             var estimatedFilenameSize = 0;
    3363. 

  3363.             if (type == "shortcut"){
    3364. 

  3364.                 estimatedFilenameSize = getTextPixelWidth(shortenedName);
    3365. 

  3365.             }else{
    3366. 

  3366.                 estimatedFilenameSize = getTextPixelWidth(filename);
    3367. 

  3367.                 shortenedName = filename;
    3368. 

  3368.                 if (estimatedFilenameSize > (maxlength * 2 - 10)) {
    3369. 

  3369.                     //This name is too long to fit inside two lines
    3370. 

  3370.                     var newFilenameLength = getTextPixelWidth(shortenedName + "...");
    3371. 

  3371.                     while (newFilenameLength >= (maxlength * 2 - 10)){
    3372. 

  3372.                         shortenedName = shortenedName.substr(0, shortenedName.length - 1);
    3373. 

  3373.                         newFilenameLength = getTextPixelWidth(shortenedName + "...");
    3374. 

  3374.                     }
    3375. 

  3375. 

  3376.                     shortenedName = shortenedName + "...";
    3377. 

  3377.                 }
    3378. 

  3378.             }
    3379. 

  3379. 

  3380.             if (estimatedFilenameSize < (maxlength * 2 - 10)  && estimatedFilenameSize > (maxlength - 5) && shortenedName.indexOf(" ") > 0){
    3381. 

  3381.                 //This is short enough to fit inside two lines and it contains space
    3382. 

  3382.                 //Try to see if there is a combination of splitting that fit inside two lines
    3383. 

  3383.                 var filenameSegments = shortenedName.split(" ");
    3384. 

  3384.                 var segEnd = 1;
    3385. 

  3385.                 var currentSegmentText = filenameSegments[0];
    3386. 

  3386.                 var currentSegmentWidth = getTextPixelWidth(currentSegmentText);
    3387. 

  3387.                 var spaceWidth = getTextPixelWidth(" ");
    3388. 

  3388.                 while(segEnd < filenameSegments.length && (currentSegmentWidth + spaceWidth)  < (maxlength - 5)){
    3389. 

  3389.                     //When it is not the last segment && can still fit more segment into current line
    3390. 

  3390.                     currentSegmentText = currentSegmentText + " " + filenameSegments[segEnd];
    3391. 

  3391.                     currentSegmentWidth = getTextPixelWidth(currentSegmentText);
    3392. 

  3392.                     segEnd++;
    3393. 

  3393.                 }
    3394. 

  3394.                 //Back trace one segment
    3395. 

  3395.                 segEnd--;
    3396. 

  3396. 

  3397.                 //Build the filename segmentation
    3398. 

  3398.                 var line1 = "";
    3399. 

  3399.                 var line2 = "";
    3400. 

  3400.                 for (var i = 0; i < segEnd; i++){
    3401. 

  3401.                     line1 += filenameSegments[i] + " ";
    3402. 

  3402.                 }
    3403. 

  3403.                 for (var i = segEnd; i < filenameSegments.length; i++){
    3404. 

  3404.                     line2 += filenameSegments[i] + " ";
    3405. 

  3405.                 }
    3406. 

  3406. 

  3407.                 line1 = line1.trim();
    3408. 

  3408.                 line2 = line2.trim();
    3409. 

  3409.                 if (line1 != "" && line1 != ""){
    3410. 

  3410.                     shortenedName = line1 + `<br>` + line2;
    3411. 

  3411.                 }else if (line1 == ""){
    3412. 

  3412.                     shortenedName = line2;
    3413. 

  3413.                 }else if (line2 == ""){
    3414. 

  3414.                     shortenedName = line1;
    3415. 

  3415.                 }
    3416. 

  3416.             }
    3417. 

  3417. 

  3418.             var compressedFiledata = ao_module_utils.objectToAttr(filedata);
    3419. 

  3419.             if (updateMode){
    3420. 

  3420.                 //Update the content that already exists for the same filepath object
    3421. 

  3421.                 var updateObject = undefined;
    3422. 

  3422.                 $(".launchIcon").each(function(){
    3423. 

  3423.                     if ($(this).attr("filedata") == compressedFiledata){
    3424. 

  3424.                         updateObject = $(this);
    3425. 

  3425.                     }
    3426. 

  3426.                 });
    3427. 

  3427. 

  3428.                 if (updateObject !== undefined){
    3429. 

  3429.                     //Check if content identical. If yes, skip rewrite
    3430. 

  3430.                     if (updateObject.attr("filedata") == compressedFiledata){
    3431. 

  3431.                         //Identical. Skipping
    3432. 

  3432.                     }else{
    3433. 

  3433.                         //Update its contents
    3434. 

  3434.                         updateObject.attr("type", type);
    3435. 

  3435.                         updateObject.attr("filename", filename);
    3436. 

  3436.                         updateObject.attr("filepath", filepath);
    3437. 

  3437.                         updateObject.attr("filedata", compressedFiledata);
    3438. 

  3438.                         updateObject.css("width", iwidth + "px");
    3439. 

  3439.                         updateObject.css("height", iheight + "px");
    3440. 

  3440.                         updateObject.css("left", screenX + "px");
    3441. 

  3441.                         updateObject.css("top", screenY + "px");
    3442. 

  3442.                     }
    3443. 

  3443.                 }else{
    3444. 

  3444.                     //No exists. Append to wrapper
    3445. 

  3445.                     appendDesktopIcon($("#iconwrapper"),{
    3446. 

  3446.                         type: type,
    3447. 

  3447.                         filename: filename,
    3448. 

  3448.                         filepath: filepath,
    3449. 

  3449.                         compressedFiledata: compressedFiledata,
    3450. 

  3450.                         iwidth: iwidth,
    3451. 

  3451.                         iheight: iheight,
    3452. 

  3452.                         screenX: screenX,
    3453. 

  3453.                         screenY: screenY,
    3454. 

  3454.                         size: size,
    3455. 

  3455.                         imagePath: imagePath,
    3456. 

  3456.                         shortenedName: shortenedName,
    3457. 

  3457.                         isShared: isShared,
    3458. 

  3458.                     });
    3459. 

  3459.                 }
    3460. 

  3460. 

  3461.             }else{
    3462. 

  3462.                 //Append into the desktop
    3463. 

  3463.                 appendDesktopIcon($("#iconwrapper"),{
    3464. 

  3464.                     type: type,
    3465. 

  3465.                     filename: filename,
    3466. 

  3466.                     filepath: filepath,
    3467. 

  3467.                     compressedFiledata: compressedFiledata,
    3468. 

  3468.                     iwidth: iwidth,
    3469. 

  3469.                     iheight: iheight,
    3470. 

  3470.                     screenX: screenX,
    3471. 

  3471.                     screenY: screenY,
    3472. 

  3472.                     size: size,
    3473. 

  3473.                     imagePath: imagePath,
    3474. 

  3474.                     shortenedName: shortenedName,
    3475. 

  3475.                     isShared: isShared,
    3476. 

  3476.                 });
    3477. 

  3477.             }
    3478. 

  3478.            
    3479. 

  3479.         }
    3480. 

  3480. 

  3481.         /*
    3482. 

  3482.             Main function to append desktop icon to desktop
    3483. 

  3483.             Usage: Pass in the target (as jquery object, usually $("#iconwrapper")) and properties with the following object
    3484. 

  3484.             properties = {
    3485. 

  3485.                 type: "",
    3486. 

  3486.                 filename: "",
    3487. 

  3487.                 filepath: "",
    3488. 

  3488.                 compressedFiledata: "",
    3489. 

  3489.                 iwidth: "",
    3490. 

  3490.                 iheight: "",
    3491. 

  3491.                 screenX: "",
    3492. 

  3492.                 screenY: "",
    3493. 

  3493.                 size: "",
    3494. 

  3494.                 imagePath: "",
    3495. 

  3495.                 shortenedName: "",
    3496. 

  3496.             }
    3497. 

  3497. 

  3498.             Where the enmty string is the value that require filling in
    3499. 

  3499.         */
    3500. 

  3500. 

  3501.         function appendDesktopIcon(target, properties){
    3502. 

  3502.             var htmlType = "div";
    3503. 

  3503.             if (properties.type == "file" && isChrome){
    3504. 

  3504.                 htmlType = "a";
    3505. 

  3505.             }
    3506. 

  3506. 

  3507.             var imageStyleOverride = "";
    3508. 

  3508.             //Special type of override for files
    3509. 

  3509.             if (properties.type == "shortcut"){
    3510. 

  3510.                 var fd = JSON.parse(decodeURIComponent(properties.compressedFiledata));
    3511. 

  3511.                 if (fd.ShortcutType == "url"){
    3512. 

  3512.                     imageStyleOverride = `padding: 8px;`;
    3513. 

  3513.                 }
    3514. 

  3514.             }
    3515. 

  3515.             
    3516. 

  3516.            
    3517. 

  3517.             var thisIcon = $(`<${htmlType} href="javascript:void(0);" class="launchIcon" 
    3518. 

  3518.                     type="${properties.type}" 
    3519. 

  3519.                     draggable="true" 
    3520. 

  3520.                     ondragover="allowDrop(event)" 
    3521. 

  3521.                     ondrop="drop(event)" 
    3522. 

  3522.                     ondragstart="drag(event)" 
    3523. 

  3523.                     onmousedown="iconClicked(this,event);" 
    3524. 

  3524.                     ondblclick="iconDoubleClicked(this,event);" 
    3525. 

  3525.                     ontouchstart="iconClicked(this,event); doubleTouchHandler(this, event,openViaTouch);"
    3526. 

  3526.                     filename="${properties.filename}" 
    3527. 

  3527.                     filepath="${properties.filepath}" 
    3528. 

  3528.                     filedata="${properties.compressedFiledata}" 
    3529. 

  3529.                     style="width:${properties.iwidth}px; height:${properties.iheight}px;left:${properties.screenX}px; top:${properties.screenY}px;">
    3530. 

  3530.                     <span class="launchIconWrapper">
    3531. 

  3531.                         <img class="launchIconImage ${properties.size}" src="${properties.imagePath}" style="${imageStyleOverride}" draggable="false"></img>
    3532. 

  3532.                         <p class="launchIconText ${properties.size}">${properties.shortenedName}</p>
    3533. 

  3533.                     </span>
    3534. 

  3534.                     </${htmlType}>`);
    3535. 

  3535. 

  3536.             $(target).append(thisIcon);
    3537. 

  3537. 

  3538.             //Updates 20 May 2021: Check if this file is shared. If yes, append the share icon
    3539. 

  3539.             if (typeof(properties.isShared) != "undefined" && properties.isShared == true){
    3540. 

  3540.                 setFileShareIndicator(properties.filename);
    3541. 

  3541.             }
    3542. 

  3542.             
    3543. 

  3543.             if (properties.type == "file" && isChrome){
    3544. 

  3544.                 console.log(isChrome);
    3545. 

  3545.                 let thisFilepath = properties.filepath;
    3546. 

  3546.                 $(thisIcon)[0].addEventListener("dragstart",function(evt){
    3547. 

  3547.                 //var filecontent = toDataUrl("media/?file=" + thisFilepath);
    3548. 

  3548.                 //var fileBase64 = window.btoa(filecontent);
    3549. 

  3549.                 var targetMime = "plain/text";
    3550. 

  3550.                     $.ajax({
    3551. 

  3551.                         url: "media/getMime/?file=" + encodeURIComponent(properties.filepath),
    3552. 

  3552.                         success: function(data){
    3553. 

  3553.                             if (data.error !== undefined){
    3554. 

  3554.                                 targetMime = "text/directory";
    3555. 

  3555.                             }else{
    3556. 

  3556.                                 targetMime = data;
    3557. 

  3557.                             }
    3558. 

  3558.                         },
    3559. 

  3559.                         async: false
    3560. 

  3560.                     });
    3561. 

  3561.                 evt.dataTransfer.setData("DownloadURL",targetMime+":"+ properties.filename +":"+ location.protocol + "//" + location.hostname + ":" + location.port + "/media/?file=" + encodeURIComponent(properties.filepath));
    3562. 

  3562.                 //evt.dataTransfer.setData("DownloadURL","video/mp4"+":"+"test.mp4"+":"+"data:"+"video/mp4"+";base64,"+fileBase64);
    3563. 

  3563.                 },false);
    3564. 

  3564.             }
    3565. 

  3565.         }
    3566. 

  3566. 

  3567.         //Folder description box
    3568. 

  3568.         var timeoutId;
    3569. 

  3569.         function attachDescriptionBoxEvents(){
    3570. 

  3570.             $(".launchIcon").off("hover").hover(function(event) {
    3571. 

  3571.                 let modulePath = $(this).attr("filepath");
    3572. 

  3572.                 let filename = $(this).attr("filename");
    3573. 

  3573.                 let filedata = JSON.parse( decodeURIComponent($(this).attr("filedata")));
    3574. 

  3574.                 
    3575. 

  3575.                 if (!timeoutId) {
    3576. 

  3576.                     if (renameMode == true){
    3577. 

  3577.                         //Renaming. Do not show hover info tab
    3578. 

  3578.                         return;
    3579. 

  3579.                     }
    3580. 

  3580.                     timeoutId = window.setTimeout(function() {
    3581. 

  3581.                         let position = [currentMousePosition[0] + 10, currentMousePosition[1] + 10];
    3582. 

  3582.                         timeoutId = null;
    3583. 

  3583.                         console.log(filedata, position);
    3584. 

  3584.                         $('#fileDescriptor').css('left',position[0] + "px");
    3585. 

  3585.                         $('#fileDescriptor').css('top',position[1] + "px");
    3586. 

  3586.                         if (filedata.IsShortcut){
    3587. 

  3587.                             $('#fileDescriptor').html(`<p><i class="linkify icon"></i> ${filedata.ShortcutName}<br><i class="folder icon"></i> ${filedata.ShortcutPath}</p>`);
    3588. 

  3588.                             $('#fileDescriptor').show();
    3589. 

  3589.                         }else{
    3590. 

  3590.                             $.ajax({
    3591. 

  3591.                                 url: "system/file_system/getProperties",
    3592. 

  3592.                                 data: {path: filedata.Filepath},
    3593. 

  3593.                                 success: function(data){
    3594. 

  3594.                                     $('#fileDescriptor').html(`<p>${filedata.Filename}<br><i class="file outline icon"></i> ${formatBytes(data.Filesize)} (${data.MimeType})<br><i class="time icon"></i> ${data.LastModTime}</p>`);
    3595. 

  3595.                                     if (!(data.MimeType == undefined)){
    3596. 

  3596.                                         $('#fileDescriptor').show();
    3597. 

  3597.                                     }
    3598. 

  3598.                                     
    3599. 

  3599.                                 }
    3600. 

  3600.                             })
    3601. 

  3601.                             
    3602. 

  3602.                         }
    3603. 

  3603.                         
    3604. 

  3604.                         
    3605. 

  3605.                     }, 1500);
    3606. 

  3606.                 }
    3607. 

  3607.             },
    3608. 

  3608.             function () {
    3609. 

  3609.                 if (timeoutId) {
    3610. 

  3610.                     window.clearTimeout(timeoutId);
    3611. 

  3611.                     timeoutId = null;
    3612. 

  3612.                 }else {
    3613. 

  3613.                     $('#fileDescriptor').hide();
    3614. 

  3614.                 }
    3615. 

  3615.             });
    3616. 

  3616.         }
    3617. 

  3617. 

  3618.         /*
    3619. 

  3619.             Share indicator settings
    3620. 

  3620.             This append or remove share from a particular file
    3621. 

  3621. 

  3622.             Only require filename as all files here are on desktop
    3623. 

  3623.         */
    3624. 

  3624. 

  3625.         function getFileObjectByFilename(filename){
    3626. 

  3626.             var result = null;
    3627. 

  3627.             $(".launchIcon").each(function(){
    3628. 

  3628.                 var thisFilename = $(this).attr("filename");
    3629. 

  3629.                 if (thisFilename == filename){
    3630. 

  3630.                     result = $(this);
    3631. 

  3631.                 }
    3632. 

  3632.             });
    3633. 

  3633. 

  3634.             return result;
    3635. 

  3635.         }
    3636. 

  3636. 

  3637.         function setFileShareIndicator(filename){
    3638. 

  3638.             var targetFileObject = getFileObjectByFilename(filename);
    3639. 

  3639.             if (targetFileObject == null){
    3640. 

  3640.                 return;
    3641. 

  3641.             }
    3642. 

  3642.             var sharedIcon = `<div class="fileShareIndicator ${desktopIconSize}">
    3643. 

  3643.                 <img src="img/desktop/system_icon/shared.png">
    3644. 

  3644.             </div>`;
    3645. 

  3645. 

  3646.             $(targetFileObject).find(".launchIconWrapper").append(sharedIcon);
    3647. 

  3647. 

  3648.         }
    3649. 

  3649. 

  3650.         function removeFileShareIndicator(filename){
    3651. 

  3651.             var targetFileObject = getFileObjectByFilename(filename);
    3652. 

  3652.             if (targetFileObject == null){
    3653. 

  3653.                 return;
    3654. 

  3654.             }
    3655. 

  3655. 

  3656.             var indicator = $(targetFileObject).find(".fileShareIndicator");
    3657. 

  3657.             if (indicator.length > 0){
    3658. 

  3658.                 indicator.remove();
    3659. 

  3659.             }
    3660. 

  3660.         }
    3661. 

  3661. 

  3662.         // ========================== LAUNCH ICON OPERATIONS ================
    3663. 

  3663. 

  3664.         //This function start all the launchicon related events
    3665. 

  3665.         function drag(ev) {
    3666. 

  3666.             //If rename mode, disable drag drop
    3667. 

  3667.             if (renameMode){
    3668. 

  3668.                 return false;
    3669. 

  3669.             }
    3670. 

  3670.             var target = ev.target;
    3671. 

  3671.             if (!($(ev.target).is("div") || $(ev.target).is("a"))) {
    3672. 

  3672.                 target = $(target).parent();
    3673. 

  3673.             }
    3674. 

  3674. 

  3675.             //Parse the standard filename / filepath data
    3676. 

  3676.             var filename = $(target).attr("filename");
    3677. 

  3677.             var filepath = $(target).attr('filepath');
    3678. 

  3678.             ev.dataTransfer.setData("filename", filename);
    3679. 

  3679.             ev.dataTransfer.setData("filepath", filepath);
    3680. 

  3680. 

  3681.             //Parse multifile selection filedata
    3682. 

  3682.             var filelist = [];
    3683. 

  3683.             if ($(".launchIconWrapper.selected").length > 0){
    3684. 

  3684.                 if (ctrlHold || $(".launchIconWrapper.selected").length > 1){
    3685. 

  3685.                     //Include all objects selected
    3686. 

  3686.                     $(".launchIconWrapper.selected").each(function(){
    3687. 

  3687.                         var fd = $(this).parent().attr("filedata");
    3688. 

  3688.                         fd = JSON.parse(decodeURIComponent(fd));
    3689. 

  3689.                         filelist.push({
    3690. 

  3690.                             filename: fd.Filename,
    3691. 

  3691.                             filepath: fd.Filepath,
    3692. 

  3692.                             hostUUID: hostInfo.DeviceUUID
    3693. 

  3693.                         });
    3694. 

  3694.                     });
    3695. 

  3695.                 }else{
    3696. 

  3696.                     //Only push the one selected
    3697. 

  3697.                     filelist.push({
    3698. 

  3698.                         filename: filename,
    3699. 

  3699.                         filepath: filepath,
    3700. 

  3700.                         hostUUID: hostInfo.DeviceUUID
    3701. 

  3701.                     });
    3702. 

  3702.                 }
    3703. 

  3703.             }else{
    3704. 

  3704.                 //There is no selected item on desktop. Use the drag drop one
    3705. 

  3705.                 filelist.push({
    3706. 

  3706.                     filename: filename,
    3707. 

  3707.                     filepath: filepath
    3708. 

  3708.                 });
    3709. 

  3709.             }
    3710. 

  3710.             
    3711. 

  3711.             //console.log(filelist);
    3712. 

  3712.             ev.dataTransfer.setData("filedata", JSON.stringify(filelist));
    3713. 

  3713.             console.log(filelist);
    3714. 

  3714.             //Set a flag on the drag events that these files are from Desktop GUI
    3715. 

  3715.             ev.dataTransfer.setData("desktopflag", "true");
    3716. 

  3716. 

  3717.             //Record the start drop relative position of the icon object
    3718. 

  3718.             var dx = ev.pageX - $(target).offset().left;
    3719. 

  3719.             var dy = ev.pageY - $(target).offset().top;
    3720. 

  3720.             startDragRelatuve = [dx, dy];
    3721. 

  3721.             ev.stopPropagation();
    3722. 

  3722.         }
    3723. 

  3723. 

  3724.         function drop(ev) {
    3725. 

  3725.             ev.preventDefault();
    3726. 

  3726.             ev.stopImmediatePropagation();
    3727. 

  3727.             var target = $(ev.target);
    3728. 

  3728.             if (!(target.is("div") || target.is("a"))) {
    3729. 

  3729.                 target = $(target).parent();
    3730. 

  3730.             }
    3731. 

  3731.             if (target.hasClass("launchIconWrapper")) {
    3732. 

  3732.                 target = target.parent();
    3733. 

  3733.             }
    3734. 

  3734.             var thisFilepath = $(target).attr("filepath");
    3735. 

  3735.             if (thisFilepath == ev.dataTransfer.getData("filepath")) {
    3736. 

  3736.                 //Drag and drop on the same item. Ignore it
    3737. 

  3737.                 return;
    3738. 

  3738.             }
    3739. 

  3739.             var sourceFilename = ev.dataTransfer.getData("filename");
    3740. 

  3740.             var sourceFilepath = ev.dataTransfer.getData("filepath");
    3741. 

  3741.             //To handle multiple file transfer from file explorer
    3742. 

  3742.             var sourceFilelist = ev.dataTransfer.getData("filedata"); 
    3743. 

  3743.             console.log(target)
    3744. 

  3744.             console.log(sourceFilename);
    3745. 

  3745.             console.log(sourceFilepath);
    3746. 

  3746.             if (sourceFilelist !== ""){
    3747. 

  3747.                 sourceFilelist = JSON.parse(sourceFilelist);
    3748. 

  3748.             }
    3749. 

  3749. 

  3750.             //Drop opererations
    3751. 

  3751.             if (target.attr("id") == "bgwrapper") {
    3752. 

  3752.                 if (sourceFilename == "" && sourceFilepath == "" && ev.dataTransfer.files.length > 0){
    3753. 

  3753.                     //Drag drop from external source. Upload to desktop
    3754. 

  3754.                     //Assign the locations for the objects
    3755. 

  3755.                     var files = ev.dataTransfer.files;
    3756. 

  3756.                     var gridMaxX = desktopGrids.length;
    3757. 

  3757.                     var gridMaxY = desktopGrids[0].length;
    3758. 

  3758.                     var targetLocation = findClosestGrid((ev.clientX), (ev.clientY), false);
    3759. 

  3759.                     var targetGridLocation = targetLocation[1];
    3760. 

  3760.                     var locations = [];
    3761. 

  3761.                    
    3762. 

  3762.                     //Rewrite of the upload file target location, 2022-02-02
    3763. 

  3763.                     //Back step the y location of drag point by 1
    3764. 

  3764.                     targetGridLocation[1] = targetGridLocation[1] - 1;
    3765. 

  3765.                     var nextLocation = JSON.parse(JSON.stringify(targetGridLocation));
    3766. 

  3766.                     for (var k =0; k < files.length; k++){
    3767. 

  3767.                         //Add 1 to the file y position
    3768. 

  3768.                         nextLocation[1] += 1;
    3769. 

  3769.                         if (nextLocation[1] >= gridMaxY){
    3770. 

  3770.                             //If y overflow, move to next x lane
    3771. 

  3771.                             nextLocation[0] += 1;
    3772. 

  3772.                             nextLocation[1] = 0;
    3773. 

  3773.                         }
    3774. 

  3774. 

  3775.                         if (nextLocation[0] >= desktopGrids.length){
    3776. 

  3776.                             //Desktop full. Force put to 0 0 
    3777. 

  3777.                             nextLocation[0] = 0;
    3778. 

  3778.                             nextLocation[1] = 0;
    3779. 

  3779.                             locations.push(JSON.parse(JSON.stringify(nextLocation)));
    3780. 

  3780.                             continue;
    3781. 

  3781.                         }
    3782. 

  3782. 

  3783. 

  3784.                         //Check if this position is occupied, update next placement location if true
    3785. 

  3785.                         console.log("Grid Location:", nextLocation[0], nextLocation[1]);
    3786. 

  3786.                         while (getObjectFromGridLocation(nextLocation[0], nextLocation[1]) !== undefined){
    3787. 

  3787.                             let gridLocation = getLocationFromGridIndex(nextLocation[0], nextLocation[1]);
    3788. 

  3788.                             let newAssignmentLocation = findClostestEmptyGridLocation(gridLocation[0],gridLocation[1]);
    3789. 

  3789.                             nextLocation = newAssignmentLocation[1];
    3790. 

  3790.                             console.log("Not empty. Updating")
    3791. 

  3791.                         }
    3792. 

  3792. 

  3793.                         locations.push(JSON.parse(JSON.stringify(nextLocation)));
    3794. 

  3794.                     }
    3795. 

  3795. 

  3796.                     /*
    3797. 

  3797.                     for (var k =0; k < files.length; k++){
    3798. 

  3798.                         var thisLocation = JSON.parse(JSON.stringify(targetGridLocation));
    3799. 

  3799.                         //Add k to y axis of the list.
    3800. 

  3800.                         thisLocation[1] += k;
    3801. 

  3801.                         if (thisLocation[1] >= gridMaxY){
    3802. 

  3802.                                 thisLocation[0]++;
    3803. 

  3803.                                 thisLocation[1] = thisLocation[1] % gridMaxY;
    3804. 

  3804.                         }
    3805. 

  3805.                         if (thisLocation[1] >= gridMaxY && thisLocation[0] >= gridMaxX){
    3806. 

  3806.                             //Desktop full. Force put to 0 0 
    3807. 

  3807.                             thisLocation[0] = 0;
    3808. 

  3808.                             thisLocation[1] = 0;
    3809. 

  3809.                             break;
    3810. 

  3810.                         }
    3811. 

  3811.                         while (getObjectFromGridLocation(thisLocation[0], thisLocation[1]) !== undefined){
    3812. 

  3812.                             thisLocation[1] += 1;
    3813. 

  3813.                             if (thisLocation[1] >= gridMaxY){
    3814. 

  3814.                                 //Over the screen. Shift to the row on the right
    3815. 

  3815.                                 thisLocation[0]++;
    3816. 

  3816.                                 thisLocation[1] = 0;
    3817. 

  3817.                             }
    3818. 

  3818. 

  3819.                             if (thisLocation[1] >= gridMaxY && thisLocation[0] >= gridMaxX){
    3820. 

  3820.                                 //Desktop full. Force put to 0 0 
    3821. 

  3821.                                 thisLocation[0] = 0;
    3822. 

  3822.                                 thisLocation[1] = 0;
    3823. 

  3823.                                 break;
    3824. 

  3824.                             }
    3825. 

  3825.                         }
    3826. 

  3826.                         locations.push(thisLocation)
    3827. 

  3827.                     }
    3828. 

  3828.                     */
    3829. 

  3829. 

  3830.                     console.log(locations, ev.dataTransfer.files);
    3831. 

  3831. 

  3832.                     //Register file locations
    3833. 

  3833.                     for (var j =0; j < locations.length; j++){
    3834. 

  3834.                         let thisFile = files[j];
    3835. 

  3835.                         let thisFilename = files[j].name;
    3836. 

  3836.                         let x = parseInt(locations[j][0]);
    3837. 

  3837.                         let y = parseInt(locations[j][1]);
    3838. 

  3838.                         let uploadIconUUID = generateUploadingIcon(thisFile.name, [x,y]);
    3839. 

  3839.                         var refreshTimer;
    3840. 

  3840.                         uploadFile(thisFile,function(){
    3841. 

  3841.                             console.log("Uploader callback");
    3842. 

  3842.                             $.ajax({
    3843. 

  3843.                                 url: "system/desktop/files",
    3844. 

  3844.                                 method: "POST",
    3845. 

  3845.                                 data: {"set": thisFilename, "x": x, "y": y},
    3846. 

  3846.                                 success: function(data) {
    3847. 

  3847.                                     //Refresh the desktop
    3848. 

  3848.                                     clearTimeout(refreshTimer);
    3849. 

  3849.                                     refreshTimer = setTimeout(function(){
    3850. 

  3850.                                         refresh(undefined, false);
    3851. 

  3851.                                     }, 500)
    3852. 

  3852.                                     
    3853. 

  3853.                                 }
    3854. 

  3854.                             });
    3855. 

  3855.                         }, uploadIconUUID);
    3856. 

  3856.                         
    3857. 

  3857.                     }
    3858. 

  3858.                 }else if (sourceFilelist.length > 0 && Array.isArray(sourceFilelist)){
    3859. 

  3859.                     //Drag drop multiple files from desktop or file explorer to desktop
    3860. 

  3860.                     var desktopFlag = ev.dataTransfer.getData("desktopflag"); 
    3861. 

  3861.                     if (desktopFlag == "" || desktopFlag === undefined || desktopFlag == null){
    3862. 

  3862.                         //This is a file drag drop from not desktop to desktop
    3863. 

  3863.                         var filelist = ev.dataTransfer.getData("filedata");
    3864. 

  3864.                         if (filelist != ""){
    3865. 

  3865.                             filelist = JSON.parse(filelist);
    3866. 

  3866.                             if (filelist.length == 0){
    3867. 

  3867.                                 return
    3868. 

  3868.                             }
    3869. 

  3869. 

  3870.                             //Get the position for this drop events and arrange grid locations
    3871. 

  3871.                             var gridPosition = gridPositionAllocate(ev.clientX, ev.clientY, filelist.length);
    3872. 

  3872.                             console.log(gridPosition)
    3873. 

  3873. 

  3874.                             //Check if source is also from user:/
    3875. 

  3875.                             var srcVroot = filelist[0].filepath.split(":/").shift();
    3876. 

  3876.                             var mode = "copy"
    3877. 

  3877.                             var title = "Copying "
    3878. 

  3878.                             if (srcVroot == "user"){
    3879. 

  3879.                                 //Move
    3880. 

  3880.                                 mode = "move"
    3881. 

  3881.                                 title = "Moving "
    3882. 

  3882.                             }
    3883. 

  3883. 

  3884.                             var filepathList = [];
    3885. 

  3885.                             filelist.forEach(file => {
    3886. 

  3886.                                 filepathList.push(file.filepath)
    3887. 

  3887.                             });
    3888. 

  3888. 

  3889.                             //Start the file operation dialog
    3890. 

  3890.                             var oprConfig = {
    3891. 

  3891.                                 opr: mode,
    3892. 

  3892.                                 src: filepathList,
    3893. 

  3893.                                 dest: "user:/Desktop/",
    3894. 

  3894.                                 overwriteMode: "ask"
    3895. 

  3895.                             }
    3896. 

  3896.                             var configHash = encodeURIComponent(JSON.stringify(oprConfig));
    3897. 

  3897. 

  3898.                             //Genreate window title
    3899. 

  3899.                             title = title + filepathList.length;
    3900. 

  3900.                             if (filepathList.length > 1){
    3901. 

  3901.                                 title += " files";
    3902. 

  3902.                             }else{
    3903. 

  3903.                                 title += " file";
    3904. 

  3904.                             }
    3905. 

  3905. 

  3906.                             newFloatWindow({
    3907. 

  3907.                                 url: "SystemAO/file_system/file_operation.html#" + configHash,
    3908. 

  3908.                                 width: 400,
    3909. 

  3909.                                 height: 220,
    3910. 

  3910.                                 appicon: "SystemAO/file_system/img/selector.png",
    3911. 

  3911.                                 title: title
    3912. 

  3912.                             });
    3913. 

  3913. 

  3914. 

  3915. 

  3916.                         }
    3917. 

  3917. 

  3918.                         
    3919. 

  3919.                     }else{
    3920. 

  3920.                         //This is a file drag event from desktop, but more than one files.
    3921. 

  3921.                         //Pin the final location for the drag drop object
    3922. 

  3922.                         var sourceObject = getObjectFromPath(sourceFilepath);
    3923. 

  3923.                         var dx = startDragRelatuve[0];
    3924. 

  3924.                         var dy = startDragRelatuve[1];
    3925. 

  3925.                         var targetLocation = findClosestGrid((ev.clientX - dx), (ev.clientY - dy));
    3926. 

  3926.                         var closestLocation = targetLocation[0];
    3927. 

  3927.                         var duplicateObject = getObjectFromLocation(closestLocation[0]  + iconOffsetXY[0], closestLocation[1]  + iconOffsetXY[1]);
    3928. 

  3928.                         if (duplicateObject !== undefined) {
    3929. 

  3929.                             //There are already object there. Do nothing
    3930. 

  3930.                             console.log("Drop location duplicated!")
    3931. 

  3931.                             return;
    3932. 

  3932.                         }
    3933. 

  3933. 

  3934.                         //Get other objects that is not the one drag dropped
    3935. 

  3935.                         var iconOffset = {};
    3936. 

  3936.                         for (var i =0; i < sourceFilelist.length; i++){
    3937. 

  3937.                             var thisFile = sourceFilelist[i];
    3938. 

  3938.                             if (thisFile.filepath != sourceFilepath){
    3939. 

  3939.                                 //Calculate the x y offset of this icon to the drag drop one
    3940. 

  3940.                                 var thisIconObject = getObjectFromPath(thisFile.filepath);
    3941. 

  3941.                                 iconOffset[thisFile.filepath] = {
    3942. 

  3942.                                     dx: $(sourceObject).offset().left - $(thisIconObject).offset().left,
    3943. 

  3943.                                     dy: $(sourceObject).offset().top - $(thisIconObject).offset().top
    3944. 

  3944.                                 }
    3945. 

  3945.                                 //console.log(thisFile.filename, iconOffset[thisFile.filepath]);
    3946. 

  3946.                             }
    3947. 

  3947.                         }
    3948. 

  3948. 

  3949.                         //Move the drag drop object to the desiged location
    3950. 

  3950.                         $(sourceObject).css({
    3951. 

  3951.                             left: closestLocation[0] + iconOffsetXY[0],
    3952. 

  3952.                             top: closestLocation[1] + iconOffsetXY[1]
    3953. 

  3953.                         });
    3954. 

  3954. 

  3955.                         //Save the drag item location
    3956. 

  3956.                         $.ajax({
    3957. 

  3957.                             url: "system/desktop/files",
    3958. 

  3958.                             method: "POST",
    3959. 

  3959.                             data: {"set": sourceFilename, "x": targetLocation[1][0], "y": targetLocation[1][1]},
    3960. 

  3960.                             success: function(data) {
    3961. 

  3961.                                 //console.log(data);
    3962. 

  3962.                             }
    3963. 

  3963.                         });
    3964. 

  3964. 

  3965.                         //Move all the relative files to the main object
    3966. 

  3966.                         var relocatePendingObjects = [];
    3967. 

  3967.                         for (const [filepath, offset] of Object.entries(iconOffset)) {
    3968. 

  3968.                             let thisIconObject = getObjectFromPath(filepath);
    3969. 

  3969.                             let caluclatedLocation = [$(sourceObject).offset().left - offset.dx, $(sourceObject).offset().top - offset.dy];
    3970. 

  3970.                             let finalIconLocation = findClosestGrid(caluclatedLocation[0], caluclatedLocation[1]);
    3971. 

  3971.                         
    3972. 

  3972.                             //Move this icon to designed location
    3973. 

  3973.                             $(thisIconObject).css({
    3974. 

  3974.                                 left: finalIconLocation[0][0] + iconOffsetXY[0],
    3975. 

  3975.                                 top: finalIconLocation[0][1] + iconOffsetXY[1]
    3976. 

  3976.                             });
    3977. 

  3977. 

  3978.                             let thisIconFileData = JSON.parse(decodeURIComponent($(thisIconObject).attr("filedata")));
    3979. 

  3979.                             
    3980. 

  3980.                             //Record this in database
    3981. 

  3981.                             $.ajax({
    3982. 

  3982.                                 url: "system/desktop/files",
    3983. 

  3983.                                 method: "POST",
    3984. 

  3984.                                 data: {"set": thisIconFileData.Filename, "x": finalIconLocation[1][0], "y": finalIconLocation[1][1]},
    3985. 

  3985.                                 success: function(data) {
    3986. 

  3986.                                     //console.log(data);
    3987. 

  3987.                                 }
    3988. 

  3988.                             });
    3989. 

  3989.                             
    3990. 

  3990.                         }
    3991. 

  3991. 

  3992.                         //Get duplication objects
    3993. 

  3993.                         for (const [filepath, offset] of Object.entries(iconOffset)) {
    3994. 

  3994.                             let thisIconObject = getObjectFromPath(filepath);
    3995. 

  3995.                             //Check for duplication
    3996. 

  3996.                             var iconLocation = [$(thisIconObject).offset().left, $(thisIconObject).offset().top];
    3997. 

  3997.                             $(".launchIcon").each(function(){
    3998. 

  3998.                                 if ($(this).offset().left == iconLocation[0] && $(this).offset().top == iconLocation[1]){
    3999. 

  3999.                                     //This icon is at the target icon location
    4000. 

  4000.                                     if ($(this).attr("filepath") != filepath){
    4001. 

  4001.                                         relocatePendingObjects.push($(this));
    4002. 

  4002.                                     }
    4003. 

  4003.                                 }
    4004. 

  4004.                             });
    4005. 

  4005.                         }
    4006. 

  4006. 

  4007. 

  4008.                         //Relocate objects that is in the way of moving
    4009. 

  4009.                         for (var i = 0; i < relocatePendingObjects.length; i++){
    4010. 

  4010.                             var thisObject = relocatePendingObjects[i];
    4011. 

  4011.                             console.log(thisObject);
    4012. 

  4012.                             var thisX = $(thisObject).offset().left;
    4013. 

  4013.                             var thisY = $(thisObject).offset().top;
    4014. 

  4014.                             var nextEmptyGrid = findClostestEmptyGridLocation(thisX, thisY);
    4015. 

  4015.                             
    4016. 

  4016.                             //Move this file to the next empty grid location
    4017. 

  4017.                             $(thisObject).css({
    4018. 

  4018.                                 left: nextEmptyGrid[0][0] + iconOffsetXY[0],
    4019. 

  4019.                                 top: nextEmptyGrid[0][1] + iconOffsetXY[1]
    4020. 

  4020.                             });
    4021. 

  4021. 

  4022.                             //Save move record to db
    4023. 

  4023.                             let thisIconFileData = JSON.parse(decodeURIComponent($(thisObject).attr("filedata")));
    4024. 

  4024.                             $.ajax({
    4025. 

  4025.                                 url: "system/desktop/files",
    4026. 

  4026.                                 method: "POST",
    4027. 

  4027.                                 data: {"set": thisIconFileData.Filename, "x": nextEmptyGrid[1][0], "y": nextEmptyGrid[1][1]},
    4028. 

  4028.                                 success: function(data) {
    4029. 

  4029.                                     //console.log(data);
    4030. 

  4030.                                 }
    4031. 

  4031.                             });
    4032. 

  4032. 

  4033.                         }
    4034. 

  4034.                     }
    4035. 

  4035.                     
    4036. 

  4036.                 }else{
    4037. 

  4037.                     //Dropping a file onto other place on desktop
    4038. 

  4038.                     var sourceObject = getObjectFromPath(sourceFilepath);
    4039. 

  4039.                     var dx = startDragRelatuve[0];
    4040. 

  4040.                     var dy = startDragRelatuve[1];
    4041. 

  4041.                     var targetLocation = findClosestGrid((ev.clientX - dx), (ev.clientY - dy));
    4042. 

  4042.                     var closestLocation = targetLocation[0];
    4043. 

  4043.                     //Check if there are objects already at that location
    4044. 

  4044.                     var duplicateObject = getObjectFromLocation(closestLocation[0], closestLocation[1]);
    4045. 

  4045.                     if (duplicateObject !== undefined) {
    4046. 

  4046.                         //There are already object there. Do nothing
    4047. 

  4047.                         console.log("Drop location duplicated!")
    4048. 

  4048.                         return;
    4049. 

  4049.                     }
    4050. 

  4050.                     var closestGridIndex = targetLocation[1];
    4051. 

  4051.                     $(sourceObject).css({
    4052. 

  4052.                         left: closestLocation[0] + iconOffsetXY[0],
    4053. 

  4053.                         top: closestLocation[1] + iconOffsetXY[1]
    4054. 

  4054.                     });
    4055. 

  4055.                     $.ajax({
    4056. 

  4056.                         url: "system/desktop/files",
    4057. 

  4057.                         method: "POST",
    4058. 

  4058.                         data: {"set": sourceFilename, "x": closestGridIndex[0], "y": closestGridIndex[1]},
    4059. 

  4059.                         success: function(data) {
    4060. 

  4060.                             //console.log(data);
    4061. 

  4061.                         }
    4062. 

  4062.                     });
    4063. 

  4063.                 }
    4064. 

  4064.             } else if (target.attr("type") == "folder") {
    4065. 

  4065.                 //Move this file or folder into the target folder
    4066. 

  4066.                 var moveSources = [sourceFilepath];
    4067. 

  4067.                 if ($(".launchIconWrapper.selected").length > 1){
    4068. 

  4068.                     //Multi move operations
    4069. 

  4069.                     moveSources = [];
    4070. 

  4070.                     $(".launchIconWrapper.selected").each(function(){
    4071. 

  4071.                         var thisFileData = $(this).parent().attr("filedata");
    4072. 

  4072.                         thisFileData = JSON.parse(decodeURIComponent(thisFileData));
    4073. 

  4073.                         moveSources.push(thisFileData.Filepath);
    4074. 

  4074.                     });
    4075. 

  4075.                 }
    4076. 

  4076. 

  4077.                 //Get the move target location
    4078. 

  4078.                 var targetFd = $(target).attr("filedata");
    4079. 

  4079.                 targetFd = JSON.parse(decodeURIComponent(targetFd));
    4080. 

  4080. 

  4081.                 //Move it
    4082. 

  4082.                 moveSourceFilesToTarget(moveSources, targetFd.Filepath)
    4083. 

  4083. 

  4084.             } else if (target.attr("type") == "shortcut") {
    4085. 

  4085.                 //Opening with the shortcut
    4086. 

  4086.                 //Check shortcut type
    4087. 

  4087.                 let shortcutData = JSON.parse(decodeURIComponent($(target).attr("filedata")));
    4088. 

  4088.                 var shortcutType = shortcutData["ShortcutType"];
    4089. 

  4089.                 if (shortcutType == "module") {
    4090. 

  4090.                     //Open the source file with this module
    4091. 

  4091.                     let openFileList = [];
    4092. 

  4092.                     if ($(".launchiconwrapper.selected").length > 0 && !Array.isArray(sourceFilelist)) {
    4093. 

  4093.                         $(".launchiconwrapper.selected").each(function() {
    4094. 

  4094.                             let thisFileData = JSON.parse(decodeURIComponent($(this).parent().attr("filedata")));
    4095. 

  4095.                             openFileList.push({
    4096. 

  4096.                                 filename: thisFileData["Filename"],
    4097. 

  4097.                                 filepath: thisFileData["Filepath"]
    4098. 

  4098.                             });
    4099. 

  4099.                         });
    4100. 

  4100.                     }else if (sourceFilelist.length > 0 && Array.isArray(sourceFilelist)){
    4101. 

  4101.                         //Open file that is transfered from file explorer.
    4102. 

  4102.                         openFileList = sourceFilelist;
    4103. 

  4103.                         console.log(openFileList);
    4104. 

  4104.                     } else {
    4105. 

  4105.                         //Only pass in the current selected file.
    4106. 

  4106.                         openFileList.push({
    4107. 

  4107.                             filename: sourceFilename,
    4108. 

  4108.                             filepath: sourceFilepath
    4109. 

  4109.                         });
    4110. 

  4110.                     }
    4111. 

  4111. 

  4112.                     var shortcutModule = getModuleFromShortcutInfo(shortcutData);
    4113. 

  4113.                     //console.log(openFileList);
    4114. 

  4114.                     if (shortcutModule === undefined){
    4115. 

  4115.                         //This shortcut module is not found on this server
    4116. 

  4116.                         return;
    4117. 

  4117.                     }
    4118. 

  4118.                     openFileWithModule(shortcutModule, openFileList);
    4119. 

  4119.                 } else if (shortcutType == "folder") {
    4120. 

  4120.                     //Move the source file into this folder
    4121. 

  4121.                     var moveSources = [sourceFilepath];
    4122. 

  4122.                     if ($(".launchIconWrapper.selected").length > 1){
    4123. 

  4123.                         //Multi move operations
    4124. 

  4124.                         moveSources = [];
    4125. 

  4125.                         $(".launchIconWrapper.selected").each(function(){
    4126. 

  4126.                             var thisFileData = $(this).parent().attr("filedata");
    4127. 

  4127.                             thisFileData = JSON.parse(decodeURIComponent(thisFileData));
    4128. 

  4128.                             moveSources.push(thisFileData.Filepath);
    4129. 

  4129.                         });
    4130. 

  4130.                     }
    4131. 

  4131. 

  4132.                     //Extract shortcut info from the target
    4133. 

  4133.                     var targetPath = shortcutData.ShortcutPath;
    4134. 

  4134.                     moveSourceFilesToTarget(moveSources, targetPath);
    4135. 

  4135.                 }
    4136. 

  4136. 

  4137.             } else {
    4138. 

  4138.                 console.log("Unknown action type: ", target.attr("type"));
    4139. 

  4139.             }
    4140. 

  4140.         }
    4141. 

  4141. 

  4142.         
    4143. 

  4143.         //Use move if it is folder on desktop, use copy if it is a shortcut
    4144. 

  4144.         function moveSourceFilesToTarget(sourceList, target, opr="move"){
    4145. 

  4145.             var oprConfig = {
    4146. 

  4146.                 opr: opr,
    4147. 

  4147.                 src: sourceList,
    4148. 

  4148.                 dest: target,
    4149. 

  4149.                 callbackWindowID: "desktop",
    4150. 

  4150.                 callbackFunction: `refresh(undefined, true)`
    4151. 

  4151.             }
    4152. 

  4152.             var configHash = encodeURIComponent(JSON.stringify(oprConfig));
    4153. 

  4153.             var title = "Copying " + sourceList.length;
    4154. 

  4154.             if (sourceList.length > 1){
    4155. 

  4155.                 title += " files";
    4156. 

  4156.             }else{
    4157. 

  4157.                 title += " file";
    4158. 

  4158.             }
    4159. 

  4159. 

  4160.             //Create FloatWindow to handle the file operations
    4161. 

  4161.             newFloatWindow({
    4162. 

  4162.                 url: "SystemAO/file_system/file_operation.html#" + configHash,
    4163. 

  4163.                 width: 400,
    4164. 

  4164.                 height: 220,
    4165. 

  4165.                 appicon: "SystemAO/file_system/img/selector.png",
    4166. 

  4166.                 title: title
    4167. 

  4167.             });
    4168. 

  4168. 

  4169.             //Delete the file location from db
    4170. 

  4170.             sourceList.forEach(file => {
    4171. 

  4171.                 let filename = file.split("/").pop();
    4172. 

  4172.                 $.ajax({
    4173. 

  4173.                     url: "system/desktop/files",
    4174. 

  4174.                     data: {del: filename},
    4175. 

  4175.                     success: function(data){
    4176. 

  4176.                         if (data.error !== undefined){
    4177. 

  4177.                             console.log(data.error);
    4178. 

  4178.                         }
    4179. 

  4179.                     }
    4180. 

  4180.                 });
    4181. 

  4181.             });
    4182. 

  4182.         }
    4183. 

  4183. 

  4184.         function requestCSRFToken(callback){
    4185. 

  4185.             $.ajax({
    4186. 

  4186.                 url: "system/csrf/new",
    4187. 

  4187.                 success: function(token){
    4188. 

  4188.                     callback(token);
    4189. 

  4189.                 }
    4190. 

  4190.             });
    4191. 

  4191.         }
    4192. 

  4192.         
    4193. 

  4193.         function getModuleFromShortcutInfo(shortcutInfo) {
    4194. 

  4194.             var ShortcutPath = shortcutInfo["ShortcutPath"];
    4195. 

  4195.             if (ShortcutPath.includes("/") == false) {
    4196. 

  4196.                 //Legacy defination. Append /index.html at the back.
    4197. 

  4197.                 ShortcutPath = ShortcutPath + "/index.html";
    4198. 

  4198.             }
    4199. 

  4199. 

  4200.             //Try to match it with the module installed
    4201. 

  4201.             for (var i = 0; i < moduleInstalled.length; i++) {
    4202. 

  4202.                 if (moduleInstalled[i]["StartDir"] == ShortcutPath || moduleInstalled[i]["Name"] == shortcutInfo["ShortcutName"]) {
    4203. 

  4203.                     //This is the correct module to be loaded
    4204. 

  4204.                     return moduleInstalled[i];
    4205. 

  4205.                 }
    4206. 

  4206.             }
    4207. 

  4207.         }
    4208. 

  4208. 

  4209.         //Allocate the given number of grids from desktop 
    4210. 

  4210.         function gridPositionAllocate(posx, posy, numberOfGridNeeded=1){
    4211. 

  4211.             var gridMaxX = desktopGrids.length;
    4212. 

  4212.             var gridMaxY = desktopGrids[0].length;
    4213. 

  4213.             var targetLocation = findClosestGrid(posx, posy, false);
    4214. 

  4214.             var targetGridLocation = targetLocation[1];
    4215. 

  4215.             var previousEmptyGridPosition = targetGridLocation;
    4216. 

  4216.             var locations = [];
    4217. 

  4217. 

  4218.             for (var k =0; k < numberOfGridNeeded; k++){
    4219. 

  4219.                 var thisLocation = JSON.parse(JSON.stringify(previousEmptyGridPosition));
    4220. 

  4220.                 //Add k to y axis of the list.
    4221. 

  4221.                 thisLocation[1] += k;
    4222. 

  4222.                 if (thisLocation[1] >= gridMaxY){
    4223. 

  4223.                         thisLocation[0]++;
    4224. 

  4224.                         thisLocation[1] = 0;
    4225. 

  4225.                 }
    4226. 

  4226.                 if (thisLocation[1] >= gridMaxY && thisLocation[0] >= gridMaxX){
    4227. 

  4227.                     //Desktop full. Force put to 0 0 
    4228. 

  4228.                     thisLocation[0] = 0;
    4229. 

  4229.                     thisLocation[1] = 0;
    4230. 

  4230.                     break;
    4231. 

  4231.                 }
    4232. 

  4232.                 while (getObjectFromGridLocation(thisLocation[0], thisLocation[1]) !== undefined){
    4233. 

  4233.                     thisLocation[1] += 1;
    4234. 

  4234.                     if (thisLocation[1] >= gridMaxY){
    4235. 

  4235.                         //Over the screen. Shift to the row on the right
    4236. 

  4236.                         thisLocation[0]++;
    4237. 

  4237.                         thisLocation[1] = 0;
    4238. 

  4238.                     }
    4239. 

  4239. 

  4240.                     if (thisLocation[1] >= gridMaxY && thisLocation[0] >= gridMaxX){
    4241. 

  4241.                         //Desktop full. Force put to 0 0 
    4242. 

  4242.                         thisLocation[0] = 0;
    4243. 

  4243.                         thisLocation[1] = 0;
    4244. 

  4244.                         break;
    4245. 

  4245.                     }
    4246. 

  4246.                 }
    4247. 

  4247.                 previousEmptyGridPosition = JSON.parse(JSON.stringify(thisLocation))
    4248. 

  4248.                 locations.push(thisLocation)
    4249. 

  4249.             }
    4250. 

  4250. 

  4251.             return locations
    4252. 

  4252.         }
    4253. 

  4253. 

  4254.         function setIconDesktopLocation(sourceFilename, gridIndexX, gridIndexY, callback = undefined) {
    4255. 

  4255.             $.ajax({
    4256. 

  4256.                 url: "system/desktop/files",
    4257. 

  4257.                 method: "POST",
    4258. 

  4258.                 data: {"set": sourceFilename, "x": gridIndexX, "y": gridIndexY},
    4259. 

  4259.                 success: function(data) {
    4260. 

  4260.                     if (data.error !== undefined) {
    4261. 

  4261.                         console.log(data.error);
    4262. 

  4262.                     } else {
    4263. 

  4263.                         if (callback !== undefined) {
    4264. 

  4264.                             callback();
    4265. 

  4265.                         }
    4266. 

  4266.                     }
    4267. 

  4267.                 }
    4268. 

  4268.             });
    4269. 

  4269.         }
    4270. 

  4270. 

  4271.         //THIS FUNCTION IS NEEDED. DO NOT DELETE ALLOWDROP FUNCTION
    4272. 

  4272.         function allowDrop(ev) {
    4273. 

  4273.             ev.preventDefault();
    4274. 

  4274.         }
    4275. 

  4275. 

  4276.         //Pass in the object fullpath and return the icon object onscreen
    4277. 

  4277.         function getObjectFromPath(path) {
    4278. 

  4278.             var object;
    4279. 

  4279.             $(".launchIcon").each(function() {
    4280. 

  4280.                 if ($(this).attr("filepath") == path) {
    4281. 

  4281.                     object = $(this);
    4282. 

  4282.                 }
    4283. 

  4283.             });
    4284. 

  4284.             return object;
    4285. 

  4285.         }
    4286. 

  4286. 

  4287.         //Pass in the coordinate and check if there is another object at the same location
    4288. 

  4288.         function getObjectFromLocation(x, y) {
    4289. 

  4289.             var object;
    4290. 

  4290.             $(".launchIcon").each(function() {
    4291. 

  4291.                 if ($(this).position().left == x && $(this).position().top == y) {
    4292. 

  4292.                     object = $(this);
    4293. 

  4293.                 }
    4294. 

  4294.             });
    4295. 

  4295.             return object;
    4296. 

  4296.         }
    4297. 

  4297. 

  4298.         //Similar function to getObjectFromLocation but using grid coordinate instead of pixel coordinate
    4299. 

  4299.         function getObjectFromGridLocation(gx, gy){
    4300. 

  4300.             if (desktopGrids[gx] == undefined){
    4301. 

  4301.                 //X overflow
    4302. 

  4302.                 return false;
    4303. 

  4303.             }
    4304. 

  4304.             var pos = JSON.parse(JSON.stringify(desktopGrids[gx][gy]));
    4305. 

  4305.             pos[0] = pos[0] + iconOffsetXY[0];
    4306. 

  4306.             pos[1] = pos[1] + iconOffsetXY[1];
    4307. 

  4307.             return getObjectFromLocation(pos[0],pos[1]);
    4308. 

  4308.         }
    4309. 

  4309. 

  4310.         //Find the clostest empty grid, prioirty given to y first then x
    4311. 

  4311.         function findClostestEmptyGridLocation(x, y){
    4312. 

  4312.             //Reduce icon offset to the x y on screen coordinate
    4313. 

  4313.             x = x - iconOffsetXY[0];
    4314. 

  4314.             y = y - iconOffsetXY[1];
    4315. 

  4315.             //Get the grid index from absolute coordinate
    4316. 

  4316.             var currentGridLocation = getGridIndexFromLocation(x,y);
    4317. 

  4317.             //console.log(currentGridLocation);
    4318. 

  4318.             //Search for the next empty location
    4319. 

  4319.             var targetLocation = [[-1,-1],[-1,-1]];
    4320. 

  4320.             for (var i = currentGridLocation[0]; i < desktopGrids.length; i++){
    4321. 

  4321.                 var yStart = 0;
    4322. 

  4322.                 if (i == currentGridLocation[0]){
    4323. 

  4323.                     yStart = currentGridLocation[1];
    4324. 

  4324.                 }
    4325. 

  4325.                 for (k = yStart; k < desktopGrids[i].length; k++){
    4326. 

  4326.                     var thisLocation = JSON.parse(JSON.stringify(desktopGrids[i][k]));
    4327. 

  4327.                     var offsetedLocation = [thisLocation[0], thisLocation[1]];
    4328. 

  4328.                     var possibleDuplication = getObjectFromGridLocation(i,k);
    4329. 

  4329.                     //console.log( [i,k], offsetedLocation, possibleDuplication)
    4330. 

  4330.                     if (possibleDuplication === undefined){
    4331. 

  4331.                         //This is an empty slot
    4332. 

  4332.                         targetLocation = [offsetedLocation, [i,k]];
    4333. 

  4333.                         return targetLocation;
    4334. 

  4334.                     }
    4335. 

  4335.                 }
    4336. 

  4336.             }
    4337. 

  4337.             return targetLocation;
    4338. 

  4338.         }
    4339. 

  4339. 

  4340.         //Convert location to grid index
    4341. 

  4341.         function getGridIndexFromLocation(x,y){
    4342. 

  4342.             var gridIndex = [-1,-1];
    4343. 

  4343.             for (var i = 0; i < desktopGrids.length; i++){
    4344. 

  4344.                 var thisXAxis = desktopGrids[i];
    4345. 

  4345.                 if (thisXAxis[0][0] == x){
    4346. 

  4346.                     //This x matches. Match y
    4347. 

  4347.                     gridIndex[0] = i;
    4348. 

  4348.                     for (var k = 0; k < thisXAxis.length; k++){
    4349. 

  4349.                         var thisYAxis = thisXAxis[k];
    4350. 

  4350.                         if (thisYAxis[1] == y){
    4351. 

  4351.                             gridIndex[1] = k;
    4352. 

  4352.                             return gridIndex;
    4353. 

  4353.                         }
    4354. 

  4354.                     }
    4355. 

  4355.                 }
    4356. 

  4356.             }
    4357. 

  4357.             return gridIndex;
    4358. 

  4358.         }
    4359. 

  4359. 

  4360.         //Convert grid index to location
    4361. 

  4361.         function getLocationFromGridIndex(x, y){
    4362. 

  4362.             var location = [-1,-1];
    4363. 

  4363.             
    4364. 

  4364.             //Calculate the usable grid on screen
    4365. 

  4365.             var iheight = 106;
    4366. 

  4366.             var iwidth = 70;
    4367. 

  4367.             var padding = 16;
    4368. 

  4368.             if (desktopIconSize == "small") {
    4369. 

  4369.                 iheight = 82;
    4370. 

  4370.                 iwidth = 50;
    4371. 

  4371.             } else if (desktopIconSize == "medium") {
    4372. 

  4372.                 iheight = 106;
    4373. 

  4373.                 iwidth = 70;
    4374. 

  4374.             } else if (desktopIconSize == "big") {
    4375. 

  4375.                 iheight = 124;
    4376. 

  4376.                 iwidth = 84;
    4377. 

  4377.             }
    4378. 

  4378. 

  4379.             var screenHeight = window.innerHeight;
    4380. 

  4380.             var screenWidth = window.innerWidth;
    4381. 

  4381. 

  4382.             var vc = Math.floor((screenHeight - 20 - padding) / iheight);
    4383. 

  4383.             var hc = Math.floor((screenWidth - padding) / iwidth);
    4384. 

  4384. 

  4385.             //Calculate the position of this icon on the grid
    4386. 

  4386.             var resultX = padding + iwidth * x + iconOffsetXY[0];
    4387. 

  4387.             var resultY = padding + iheight * y + iconOffsetXY[1];
    4388. 

  4388. 

  4389.             return [resultX, resultY];
    4390. 

  4390.         }   
    4391. 

  4391. 

  4392. 

  4393.         //Set allow overshoot to allow drop point to get closest grid with x / y > cursor posx /y
    4394. 

  4394.         function findClosestGrid(x, y, allowOvershoot = true) {
    4395. 

  4395.             var minDx = window.innerWidth;
    4396. 

  4396.             var minDy = window.innerHeight;
    4397. 

  4397.             var finalLocation = [-1, -1];
    4398. 

  4398.             var gridLocation = [-1, -1];
    4399. 

  4399.             for (var i = 0; i < desktopGrids.length; i++) {
    4400. 

  4400.                 for (var j = 0; j < desktopGrids[0].length; j++) {
    4401. 

  4401.                     var thisGridLocation = desktopGrids[i][j];
    4402. 

  4402.                     var dx = x - thisGridLocation[0];
    4403. 

  4403.                     var dy = y - thisGridLocation[1];
    4404. 

  4404.                     if (allowOvershoot) {
    4405. 

  4405.                         if (Math.abs(dx) < minDx) {
    4406. 

  4406.                             minDx = Math.abs(x - thisGridLocation[0]);
    4407. 

  4407.                             finalLocation[0] = thisGridLocation[0];
    4408. 

  4408.                             gridLocation[0] = i;
    4409. 

  4409.                         }
    4410. 

  4410.                         if (Math.abs(dy) < minDy) {
    4411. 

  4411.                             minDy = Math.abs(y - thisGridLocation[1]);
    4412. 

  4412.                             finalLocation[1] = thisGridLocation[1];
    4413. 

  4413.                             gridLocation[1] = j;
    4414. 

  4414.                         }
    4415. 

  4415.                     } else {
    4416. 

  4416.                         if (dx < minDx && dx > 0) {
    4417. 

  4417.                             minDx = Math.abs(x - thisGridLocation[0]);
    4418. 

  4418.                             finalLocation[0] = thisGridLocation[0];
    4419. 

  4419.                             gridLocation[0] = i;
    4420. 

  4420.                         }
    4421. 

  4421.                         if (dy < minDy && dy > 0) {
    4422. 

  4422.                             minDy = Math.abs(y - thisGridLocation[1]);
    4423. 

  4423.                             finalLocation[1] = thisGridLocation[1];
    4424. 

  4424.                             gridLocation[1] = j;
    4425. 

  4425.                         }
    4426. 

  4426.                     }
    4427. 

  4427. 

  4428.                 }
    4429. 

  4429.             }
    4430. 

  4430.             return [finalLocation, gridLocation];
    4431. 

  4431.         }
    4432. 

  4432. 

  4433.         //Ask for confirmation before window close
    4434. 

  4434.         //Update 16 Feb 2021: Disabled confirmation and use a new method of implementing this later
    4435. 

  4435.         /*
    4436. 

  4436.         function myConfirmation() {
    4437. 

  4437.             if (!loggingOut){
    4438. 

  4438.                 return 'Your data might not been saved. Are you sure you want to quit?';
    4439. 

  4439.             }
    4440. 

  4440.         }
    4441. 

  4441. 

  4442.         window.onbeforeunload = myConfirmation;
    4443. 

  4443.         */
    4444. 

  4444. 

  4445.         function iconClicked(object, evt) {
    4446. 

  4446.             if (renameMode){
    4447. 

  4447.                 //Exit rename mode if icon is clicked during renaming
    4448. 

  4448.                 if ($(object).find(".renameInput").length == 0){
    4449. 

  4449.                     exitRenameMode();
    4450. 

  4450.                 }
    4451. 

  4451.                 
    4452. 

  4452.             }
    4453. 

  4453.             hideAllContextMenus();
    4454. 

  4454.         
    4455. 

  4455.             //Clicked on a launch icon.
    4456. 

  4456.             var alreadyHighlighted = $(object).find(".launchIconWrapper").hasClass("selected");
    4457. 

  4457.             if (alreadyHighlighted){
    4458. 

  4458.                 //Already selected
    4459. 

  4459.                 if (ctrlHold) {
    4460. 

  4460.                     //Selection
    4461. 

  4461.                     $(object).find(".launchIconWrapper").removeClass("selected");
    4462. 

  4462.                 }
    4463. 

  4463.             }else{
    4464. 

  4464.                 //Not selected yet
    4465. 

  4465.                 if (ctrlHold) {
    4466. 

  4466.                     //Add this into selection
    4467. 

  4467.                     $(object).find(".launchIconWrapper").addClass("selected");
    4468. 

  4468.                 }else{
    4469. 

  4469.                     //Remove all others and select this
    4470. 

  4470.                     $(".launchIconWrapper.selected").removeClass("selected");
    4471. 

  4471.                     $(object).find(".launchIconWrapper").addClass("selected");
    4472. 

  4472.                 }
    4473. 

  4473.             }
    4474. 

  4474.         }
    4475. 

  4475. 

  4476.         function iconDoubleClicked(object, evt=undefined) {
    4477. 

  4477.             //Don't allow opening when renaming
    4478. 

  4478.             if (renameMode){
    4479. 

  4479.                 return;
    4480. 

  4480.             }
    4481. 

  4481.             //Double click on a launch icon, tries to open it
    4482. 

  4482.             var filedata = ao_module_utils.attrToObject($(object).attr("filedata"));
    4483. 

  4483.             //console.log(filedata);
    4484. 

  4484.             if (filedata.IsDir) {
    4485. 

  4485.                 //This is a directory. Open with file explorer
    4486. 

  4486.                 newFloatWindow({
    4487. 

  4487.                     url: "SystemAO/file_system/file_explorer.html#" + encodeURIComponent(filedata.Filepath),
    4488. 

  4488.                     appicon: "SystemAO/file_system/img/small_icon.png",
    4489. 

  4489.                     width: 1080,
    4490. 

  4490.                     height: 580,
    4491. 

  4491.                     title: "File Manager"
    4492. 

  4492.                 });
    4493. 

  4493.             } else if (filedata.IsShortcut) {
    4494. 

  4494.                 //This is a shortcut. Open the target endpoint
    4495. 

  4495.                 var stype = filedata["ShortcutType"];
    4496. 

  4496.                 if (stype == "module") {
    4497. 

  4497.                     //Open the target module
    4498. 

  4498.                     openModule(filedata.ShortcutPath);
    4499. 

  4499.                 } else if (stype == "folder") {
    4500. 

  4500.                     //Open the target folder
    4501. 

  4501.                     openFolder(filedata.ShortcutPath)
    4502. 

  4502.                 }else if (stype == "url"){
    4503. 

  4503.                     //Open the target webpage in a new tab
    4504. 

  4504.                     newFloatWindow({
    4505. 

  4505.                         url: filedata.ShortcutPath,
    4506. 

  4506.                         appicon: filedata.ShortcutImage,
    4507. 

  4507.                         title: filedata.ShortcutName,
    4508. 

  4508.                         parent: filedata.ShortcutPath
    4509. 

  4509.                     })
    4510. 

  4510.                     //window.open(filedata.ShortcutPath);
    4511. 

  4511.                 }else{
    4512. 

  4512.                     console.log(filedata);
    4513. 

  4513.                 }
    4514. 

  4514.             } else {
    4515. 

  4515.                 //This is a file. Open it with default opener
    4516. 

  4516.                 $.ajax({
    4517. 

  4517.                     url: "system/modules/getDefault",
    4518. 

  4518.                     method: "GET",
    4519. 

  4519.                     data: {
    4520. 

  4520.                         opr: "launch",
    4521. 

  4521.                         ext: filedata.Ext,
    4522. 

  4522.                         mode: "launch"
    4523. 

  4523.                     },
    4524. 

  4524.                     success: function(data) {
    4525. 

  4525.                         if (data.error !== undefined) {
    4526. 

  4526.                             //No default opener assigned 
    4527. 

  4527.                             var url = "SystemAO/file_system/defaultOpener.html";
    4528. 

  4528.                             var icon = "SystemAO/file_system/img/opener.png";
    4529. 

  4529.                             var title = "Select an opener WebApp: "
    4530. 

  4530.                             var openFileList = [];
    4531. 

  4531.                             var openFileObject = {
    4532. 

  4532.                                 filepath: filedata.Filepath,
    4533. 

  4533.                                 filename: filedata.Filename
    4534. 

  4534.                             }
    4535. 

  4535.                             openFileList.push(openFileObject);
    4536. 

  4536.                             var openParamter = encodeURIComponent(JSON.stringify(openFileObject));
    4537. 

  4537.                             newFloatWindow({
    4538. 

  4538.                                 url: url + "#" + openParamter,
    4539. 

  4539.                                 width: 320,
    4540. 

  4540.                                 height: 510,
    4541. 

  4541.                                 appicon: icon,
    4542. 

  4542.                                 title: title
    4543. 

  4543.                             });
    4544. 

  4544.                         } else {
    4545. 

  4545.                             //Assigned. Launch with given paramter
    4546. 

  4546.                             var url = data["StartDir"];
    4547. 

  4547.                             var size = [undefined, undefined];
    4548. 

  4548.                             var title = data["Name"];
    4549. 

  4549.                             var icon = "img/system/favicon.png";
    4550. 

  4550.                             if (data["IconPath"] != "") {
    4551. 

  4551.                                 icon = data["IconPath"];
    4552. 

  4552.                             }
    4553. 

  4553.                             //Use floatWindow if exists
    4554. 

  4554.                             if (data["SupportFW"] == true && data["LaunchFWDir"] != "") {
    4555. 

  4555.                                 url = data["LaunchFWDir"];
    4556. 

  4556.                                 if (data["InitFWSize"] !== null) {
    4557. 

  4557.                                     size = data["InitFWSize"]
    4558. 

  4558.                                 }
    4559. 

  4559.                             }
    4560. 

  4560.                             //Use embedded mode if exists
    4561. 

  4561.                             if (data["SupportEmb"] == true && data["LaunchEmb"] != "") {
    4562. 

  4562.                                 url = data["LaunchEmb"];
    4563. 

  4563.                                 if (data["InitEmbSize"] !== null) {
    4564. 

  4564.                                     size = data["InitEmbSize"]
    4565. 

  4565.                                 }
    4566. 

  4566.                             }
    4567. 

  4567. 

  4568.                             //Build open File Hash Data Format
    4569. 

  4569.                             var openFileList = [];
    4570. 

  4570.                             var openFileObject = {
    4571. 

  4571.                                 filepath: filedata.Filepath,
    4572. 

  4572.                                 filename: filedata.Filename
    4573. 

  4573.                             }
    4574. 

  4574.                             openFileList.push(openFileObject);
    4575. 

  4575.                             var openParamter = encodeURIComponent(JSON.stringify(openFileList));
    4576. 

  4576. 

  4577.                             //Add launch files info and launch floatWindow
    4578. 

  4578.                             newFloatWindow({
    4579. 

  4579.                                 url: url + "#" + openParamter,
    4580. 

  4580.                                 width: size[0],
    4581. 

  4581.                                 height: size[1],
    4582. 

  4582.                                 appicon: icon,
    4583. 

  4583.                                 title: title
    4584. 

  4584.                             });
    4585. 

  4585.                         }
    4586. 

  4586.                     }
    4587. 

  4587.                 })
    4588. 

  4588.             }
    4589. 

  4589.         }
    4590. 

  4590. 

  4591.         $(window).on("resize", function(event) {
    4592. 

  4592.             redrawDesktopGrids();
    4593. 

  4593.             resizeAllFloatWindowButtons();
    4594. 

  4594.         })
    4595. 

  4595. 

  4596.         // ======================= DOCUMENT KEY BINDING =====================
    4597. 

  4597.         document.addEventListener('keydown', function(event) {
    4598. 

  4598.             let keycode = event.which || event.keyCode;
    4599. 

  4599.             if (keycode == "17") {
    4600. 

  4600.                 //Pressdown of Ctrl key
    4601. 

  4601.                 ctrlHold = true;
    4602. 

  4602.             } else if (keycode == "16") {
    4603. 

  4603.                 //Pressdown of Shift key
    4604. 

  4604.                 shiftHold = true;
    4605. 

  4605.             }else if (keycode == "27"){
    4606. 

  4606.                 //Cancel all floatwindow events and key events
    4607. 

  4607.                 $("#fwdragpanel").hide();
    4608. 

  4608.                 $("#tfwdragpanel").hide();
    4609. 

  4609.                 $(".floatWindow").find(".iframecover").hide();
    4610. 

  4610.                 movingWindow = false;
    4611. 

  4611.                 resizingWindow = false;
    4612. 

  4612.                 resizingEdgeID = 0;
    4613. 

  4613.                 multiSelecting = false;
    4614. 

  4614.                 ctrlHold = false;
    4615. 

  4615.                 shiftHold = false;
    4616. 

  4616.             }else if (keycode == "46"){
    4617. 

  4617.                 //Delete key
    4618. 

  4618. 

  4619.                 if (renameMode){
    4620. 

  4620.                     //Deleting content in textarea. Ignore delte action
    4621. 

  4621.                     return true
    4622. 

  4622.                 }
    4623. 

  4623.                 var deleteFilelist = [];
    4624. 

  4624.                 var deleteFilenameList = [];
    4625. 

  4625.                 $(".launchIconWrapper.selected").each(function(){
    4626. 

  4626.                     var fileObject = $(this).parent();
    4627. 

  4627.                     var fd = JSON.parse(decodeURIComponent((fileObject).attr("filedata")));
    4628. 

  4628.                     deleteFilelist.push(fd.Filepath);
    4629. 

  4629.                     deleteFilenameList.push(fd.Filename)
    4630. 

  4630.                 });
    4631. 

  4631. 

  4632.                 //Prase the filelist and pass to trash module
    4633. 

  4633.                 console.log(deleteFilelist);
    4634. 

  4634.                 generateCSRFToken(function(csrftoken){
    4635. 

  4635.                     $.ajax({
    4636. 

  4636.                         url: "system/file_system/fileOpr",
    4637. 

  4637.                         method:"POST",
    4638. 

  4638.                         data: {opr: "recycle", src: JSON.stringify(deleteFilelist), csrft: csrftoken},
    4639. 

  4639.                         success: function(data){
    4640. 

  4640.                             if (data.error !== undefined){
    4641. 

  4641.                                 alert(data.error);
    4642. 

  4642.                             }else{
    4643. 

  4643.                                 //Delete the file's desktop location
    4644. 

  4644.                                 deleteFilenameList.forEach(file => {
    4645. 

  4645.                                     $.ajax({
    4646. 

  4646.                                         url: "system/desktop/files",
    4647. 

  4647.                                         data: {del: file},
    4648. 

  4648.                                         success: function(data){
    4649. 

  4649.                                             if (data.error !== undefined){
    4650. 

  4650.                                                 console.log(data.error);
    4651. 

  4651.                                             }
    4652. 

  4652.                                            
    4653. 

  4653.                                         }
    4654. 

  4654.                                     });
    4655. 

  4655.                                 });
    4656. 

  4656.                                 refresh(undefined, true);
    4657. 

  4657.                             }
    4658. 

  4658.                         }
    4659. 

  4659.                     });
    4660. 

  4660.                 });
    4661. 

  4661.                 
    4662. 

  4662. 

  4663.                 
    4664. 

  4664.                
    4665. 

  4665.             }else if (keycode == "112" ){
    4666. 

  4666.                 //Enter key
    4667. 

  4667.                 if (!renameMode){
    4668. 

  4668.                     //Open selected object by emulating double click
    4669. 

  4669.                     $(".launchIconWrapper.selected").each(function(){
    4670. 

  4670.                         var object = $(this).parent();
    4671. 

  4671.                         iconDoubleClicked(object);
    4672. 

  4672.                     });
    4673. 

  4673.                     
    4674. 

  4674.                 }else if (renameMode){
    4675. 

  4675.                     event.preventDefault();
    4676. 

  4676.                     exitRenameMode();
    4677. 

  4677.                 }
    4678. 

  4678.             
    4679. 

  4679.             }else if (keycode == "67" && ctrlHold){
    4680. 

  4680.                 //Ctrl + C, copy
    4681. 

  4681.                 handleCopyOperation();
    4682. 

  4682.              }else if (keycode == "88" && ctrlHold){
    4683. 

  4683.                 //Ctrl + X, cut
    4684. 

  4684.                 handleCutOperation();
    4685. 

  4685.             }else if (keycode == "86" && ctrlHold){
    4686. 

  4686.                 //Ctrl + V, Paste
    4687. 

  4687.                 handlePasteOperation();
    4688. 

  4688.             }else{
    4689. 

  4689.                 //console.log(event.which);
    4690. 

  4690.             }
    4691. 

  4691.         });
    4692. 

  4692.         
    4693. 

  4693.         $(document).on("mousemove", function(event){
    4694. 

  4694.             currentMousePosition = [event.clientX, event.clientY];
    4695. 

  4695.         });
    4696. 

  4696. 

  4697.         $(document).keyup(function(event) {
    4698. 

  4698.             let keycode = event.which || event.keyCode;
    4699. 

  4699.             if (keycode == "17") {
    4700. 

  4700.                 ctrlHold = false;
    4701. 

  4701.             }else if (keycode == "16") {
    4702. 

  4702.                 shiftHold = false;
    4703. 

  4703.             }else if (keycode == "27"){
    4704. 

  4704.                 //ESC key, stop all floatWindow operations
    4705. 

  4705.                 console.log("%c[Desktop] Dragging function killed. Restarting all dragging elements.", 'color: #e64747');
    4706. 

  4706.                 movingWindow = false;
    4707. 

  4707.                 resizingWindow = false;
    4708. 

  4708.                 event.preventDefault();
    4709. 

  4709.             }else if (keycode == "13"){
    4710. 

  4710.                 //Enter key. open the selected object if exists
    4711. 

  4711.                 $(".launchIconWrapper.selected").each(function(){
    4712. 

  4712.                     console.log($(this).parent());
    4713. 

  4713.                     iconDoubleClicked($(this).parent(), event);
    4714. 

  4714.                 })
    4715. 

  4715.             }
    4716. 

  4716.         });
    4717. 

  4717. 

  4718.         $("#bgwrapper").on("mouseup", function(event) {
    4719. 

  4719.             //Deselect all selected icons
    4720. 

  4720.             event.preventDefault();
    4721. 

  4721.             event.stopImmediatePropagation();
    4722. 

  4722.             mainWindowMouseup(event);
    4723. 

  4723. 

  4724.         });
    4725. 

  4725. 

  4726.         function openFolder(virtualPath){
    4727. 

  4727.             newFloatWindow({
    4728. 

  4728.                 url: "SystemAO/file_system/file_explorer.html#" + encodeURIComponent(virtualPath),
    4729. 

  4729.                 appicon: "SystemAO/file_system/img/small_icon.png",
    4730. 

  4730.                 width:1080,
    4731. 

  4731.                 height:580,
    4732. 

  4732.                 title: "File Manager"
    4733. 

  4733.             });
    4734. 

  4734.         }
    4735. 

  4735. 

  4736.         function logout() {
    4737. 

  4737.             loggingOut = true;
    4738. 

  4738.             if (confirm("Exiting Session. Confirm?")){
    4739. 

  4739.                 $.get("system/auth/logout", function() {
    4740. 

  4740.                     window.location.href = "./";
    4741. 

  4741.                 });
    4742. 

  4742.             }
    4743. 

  4743.             hideAllContextMenus();
    4744. 

  4744.         }
    4745. 

  4745. 

  4746.         // ======================= CONTEXT MENU =============================
    4747. 

  4747. 

  4748.         window.addEventListener("contextmenu",
    4749. 

  4749.             function(e) {
    4750. 

  4750.                 e.preventDefault();
    4751. 

  4751.                 e.stopPropagation();
    4752. 

  4752.                 var clickTarget = $(e.target);
    4753. 

  4753.                 hideAllContextMenus();
    4754. 

  4754.                 showMenu = false;
    4755. 

  4755.                 $("#contextmenu").html("");
    4756. 

  4756.                 if (clickTarget.hasClass("launchIcon") || clickTarget.hasClass("launchIconImage") || clickTarget.hasClass("launchIconText")) {
    4757. 

  4757.                     //Click on an object on destkop
    4758. 

  4758.                     if (clickTarget.hasClass("launchIcon") == false) {
    4759. 

  4759.                         clickTarget = $(clickTarget).parent().parent();
    4760. 

  4760.                     }
    4761. 

  4761.                     if (!ctrlHold && !$(clickTarget).find(".launchIconWrapper").hasClass("selected")){
    4762. 

  4762.                         $(".launchIconWrapper.selected").removeClass("selected");
    4763. 

  4763.                     }
    4764. 

  4764.                     //Select this object
    4765. 

  4765.                     $(clickTarget).find(".launchIconWrapper").addClass("selected");
    4766. 

  4766.                     var objectType = $(clickTarget).attr("type");
    4767. 

  4767.                     operationTargetLaunchIcon = $(clickTarget);
    4768. 

  4768.                     //Check if selected more than one object
    4769. 

  4769.                     if ($(".launchIconWrapper.selected").length > 1){
    4770. 

  4770.                             //When the user selected more than one item on desktop
    4771. 

  4771.                             addContextMenuItem($("#contextmenu"), lcontex('Open'), undefined, "openIconViaMenu", false);
    4772. 

  4772.                             addContextMenuItem($("#contextmenu"), lcontex('Open With'), "<i class='caret right icon'></i>", "handleOpenWith", true);
    4773. 

  4773.                             //addContextMenuItem($("#contextmenu"), 'Share', "<i class='caret right icon'></i>", "handleFileShare", true);
    4774. 

  4774.                             addContextMenuSeperator($("#contextmenu"));
    4775. 

  4775.                             addContextMenuItem($("#contextmenu"), lcontex('Download in Zip'), "<i class='download icon'></i>", "downloadFile", false);
    4776. 

  4776.                             addContextMenuItem($("#contextmenu"), lcontex('Copy'), "<i class='copy icon'></i>", "handleCopyOperation", false);
    4777. 

  4777.                             addContextMenuItem($("#contextmenu"), lcontex('Cut'), "<i class='cut icon'></i>", "handleCutOperation", false);
    4778. 

  4778.                             addContextMenuItem($("#contextmenu"), lcontex('Delete'), "<i class='trash icon'></i>", "handleFileDelete", false);
    4779. 

  4779.                             addContextMenuSeperator($("#contextmenu"));
    4780. 

  4780.                             addContextMenuItem($("#contextmenu"), lcontex('Properties'), undefined, "openObjectProperty", false);
    4781. 

  4781. 

  4782.                     }else{
    4783. 

  4783.                         //When the user only selected one item
    4784. 

  4784.                         if (objectType == "file") {
    4785. 

  4785.                             addContextMenuItem($("#contextmenu"), lcontex('Open'), undefined, "openIconViaMenu", false);
    4786. 

  4786.                             addContextMenuItem($("#contextmenu"), lcontex('Open With'), "<i class='caret right icon'></i>", "handleOpenWith", true);
    4787. 

  4787.                             addContextMenuItem($("#contextmenu"), lcontex('Share'), "<i class='caret right icon'></i>", "handleFileShare", true);
    4788. 

  4788.                             addContextMenuSeperator($("#contextmenu"));
    4789. 

  4789.                             addContextMenuItem($("#contextmenu"), lcontex('Download'), "<i class='download icon'></i>", "downloadFile", false);
    4790. 

  4790.                             addContextMenuItem($("#contextmenu"), lcontex('Copy'), "<i class='copy icon'></i>", "handleCopyOperation", false);
    4791. 

  4791.                             addContextMenuItem($("#contextmenu"), lcontex('Cut'), "<i class='cut icon'></i>", "handleCutOperation", false);
    4792. 

  4792.                             addContextMenuItem($("#contextmenu"), lcontex('Rename'), undefined, "handleRename", false);
    4793. 

  4793.                             addContextMenuItem($("#contextmenu"), lcontex('Delete'), "<i class='trash icon'></i>", "handleFileDelete", false);
    4794. 

  4794.                             addContextMenuSeperator($("#contextmenu"));
    4795. 

  4795.                             addContextMenuItem($("#contextmenu"), lcontex('Properties'), undefined, "openObjectProperty", false);
    4796. 

  4796. 

  4797.                         } else if (objectType == "folder") {
    4798. 

  4798.                             addContextMenuItem($("#contextmenu"), lcontex('Open'), undefined, "openIconViaMenu", false);
    4799. 

  4799.                             addContextMenuItem($("#contextmenu"), lcontex('Zip here'), "<i class='zip icon'></i>", "handleZipFolder", false);
    4800. 

  4800.                             addContextMenuItem($("#contextmenu"), lcontex('Share'), "<i class='caret right icon'></i>", "handleFileShare", true);
    4801. 

  4801.                             addContextMenuSeperator($("#contextmenu"));
    4802. 

  4802.                             addContextMenuItem($("#contextmenu"), lcontex('Download as Zip'), "<i class='download icon'></i>", "downloadFile", false);
    4803. 

  4803.                             addContextMenuItem($("#contextmenu"), lcontex('Copy'), "<i class='copy icon'></i>", "handleCopyOperation", false);
    4804. 

  4804.                             addContextMenuItem($("#contextmenu"), lcontex('Cut'), "<i class='cut icon'></i>", "handleCutOperation", false);
    4805. 

  4805.                             addContextMenuItem($("#contextmenu"), lcontex('Rename'), undefined, "handleRename", false);
    4806. 

  4806.                             addContextMenuItem($("#contextmenu"), lcontex('Delete'), "<i class='trash icon'></i>", "handleFileDelete", false);
    4807. 

  4807.                             addContextMenuSeperator($("#contextmenu"));
    4808. 

  4808.                             addContextMenuItem($("#contextmenu"), lcontex('Properties'), undefined, "openObjectProperty", false);
    4809. 

  4809.                         } else if (objectType == "shortcut") {
    4810. 

  4810.                             var fd = JSON.parse(decodeURIComponent($(clickTarget).attr("filedata")));
    4811. 

  4811.                             console.log(fd);
    4812. 

  4812.                             if (fd.ShortcutType == "module"){
    4813. 

  4813.                                 //Public WebApp
    4814. 

  4814.                                 addContextMenuItem($("#contextmenu"), lcontex('Open'), undefined, "openIconViaMenu", false);
    4815. 

  4815.                                 addContextMenuItem($("#contextmenu"), lcontex('Open in New Tab'), "<i class='external icon'></i>", "openWebAppInNewTab", false);
    4816. 

  4816.                                 addContextMenuItem($("#contextmenu"), lcontex('Rename'), undefined, "handleRename", false);
    4817. 

  4817.                                 addContextMenuItem($("#contextmenu"), lcontex('Delete'), "<i class='trash icon'></i>", "handleFileDelete", false);
    4818. 

  4818. 

  4819.                             }else if (fd.ShortcutType == "folder"){
    4820. 

  4820.                                 //Folder
    4821. 

  4821.                                 addContextMenuItem($("#contextmenu"), lcontex('Open'), undefined, "openIconViaMenu", false);
    4822. 

  4822.                                 addContextMenuItem($("#contextmenu"), lcontex('Open File Location'), "<i class='folder open icon'></i>", "handleShortcutFolderOpen", false);
    4823. 

  4823.                                 addContextMenuItem($("#contextmenu"), lcontex('Rename'), undefined, "handleRename", false);
    4824. 

  4824.                                 addContextMenuItem($("#contextmenu"), lcontex('Delete'), "<i class='trash icon'></i>", "handleFileDelete", false);
    4825. 

  4825.                                 addContextMenuSeperator($("#contextmenu"));
    4826. 

  4826.                                 addContextMenuItem($("#contextmenu"), lcontex('Properties'), undefined, "openObjectProperty", false);
    4827. 

  4827.                           
    4828. 

  4828.                             }else{
    4829. 

  4829.                                 addContextMenuItem($("#contextmenu"), lcontex('Open'), undefined, "openIconViaMenu", false);
    4830. 

  4830.                                 addContextMenuItem($("#contextmenu"), lcontex('Delete'), "<i class='trash icon'></i>", "handleFileDelete", false);
    4831. 

  4831.                             }
    4832. 

  4832.                             
    4833. 

  4833.                           
    4834. 

  4834.                         }else{
    4835. 

  4835.                             console.log("Opening context menu on unknown type: ", objectType);
    4836. 

  4836.                         }
    4837. 

  4837.                     }
    4838. 

  4838.                     showMenu = true;
    4839. 

  4839. 

  4840.                 } else if (clickTarget.hasClass("backgroundFrame") || ((isSafari || (isMacOS && isChrome)) && $(clickTarget).attr("id") == "selectionPanel")) {
    4841. 

  4841.                     //Click on the background. Load background context menu.
    4842. 

  4842.                     addContextMenuItem($("#contextmenu"), lcontex('New'), "<i class='caret right icon'></i>", "newitemmenu", true);
    4843. 

  4843.                     addContextMenuItem($("#contextmenu"), lcontex('Refresh'), "<i class='refresh icon'></i>", "handleMenuRefresh", false);
    4844. 

  4844.                     addContextMenuItem($("#contextmenu"), lcontex('Open File Manager'), undefined, "openfm", false);
    4845. 

  4845.                     if (checkFileInClipboard()){
    4846. 

  4846.                         addContextMenuItem($("#contextmenu"), lcontex('Paste Here'), "<i class='paste icon'></i>", "handlePasteOperation", false);
    4847. 

  4847.                     }
    4848. 

  4848.                     addContextMenuItem($("#contextmenu"), lcontex('Personalization'), "<i class='paint brush icon'></i>", "personalization", false);
    4849. 

  4849.                     addContextMenuItem($("#contextmenu"), lcontex('Background'), "<i class='caret right icon'></i>", "background", true);
    4850. 

  4850.                     addContextMenuItem($("#contextmenu"), lcontex('Icon Size'), "<i class='caret right icon'></i>", "listIconsize", true);
    4851. 

  4851.                     addContextMenuItem($("#contextmenu"), lcontex('Toggle FullScreen'), "<i class='expand  icon'></i>", "fullscreen", false);
    4852. 

  4852.                     addContextMenuItem($("#contextmenu"), lcontex('Exit'), undefined, "logout", false);
    4853. 

  4853.                     showMenu = true;
    4854. 

  4854.                 }else if (clickTarget.hasClass("fwdragger") || (clickTarget.hasClass("title") && clickTarget.parent().hasClass("fwdragger"))){
    4855. 

  4855.                     //Click on the floatWindow object 
    4856. 

  4856.                     addContextMenuItem($("#contextmenu"), lcontex('Open in New Tab'), "<i class='external icon'></i>", "openSelectedFloatWindowInNewTab", false);
    4857. 

  4857.                     addContextMenuItem($("#contextmenu"), lcontex('Refresh'), "<i class='refresh icon'></i>", "refreshSelectedFloatWindow", false);
    4858. 

  4858.                     addContextMenuSeperator($("#contextmenu"));
    4859. 

  4859.                     addContextMenuItem($("#contextmenu"), lcontex('Minimize'), "<i class='window minimize icon'></i>", "minimizeSelectedFloatWindow", false);
    4860. 

  4860. 

  4861.                     if ($(clickTarget).parent().hasClass("fixedsize") == false && $(clickTarget).parent().parent().hasClass("fixedsize") == false){
    4862. 

  4862.                         //This FloatWindow is resizable
    4863. 

  4863.                         console.log($(clickTarget).parent());
    4864. 

  4864.                         if ($(clickTarget).parent().attr("max") !== undefined && $(clickTarget).parent().attr("max") == "true"){
    4865. 

  4865.                             addContextMenuItem($("#contextmenu"), lcontex('Restore'), "<i class='window window restore icon'></i>", "maximizeSelectedFloatWindow", false);
    4866. 

  4866.                         }else{
    4867. 

  4867.                             addContextMenuItem($("#contextmenu"), lcontex('Maximize'), "<i class='window maximize icon'></i>", "maximizeSelectedFloatWindow", false);
    4868. 

  4868.                         }
    4869. 

  4869.                         
    4870. 

  4870.                     }
    4871. 

  4871.                     addContextMenuItem($("#contextmenu"), lcontex('Close'), "<i class='remove icon'></i>", "closeSelectedFloatWindow", false);
    4872. 

  4872.                     showMenu = true;
    4873. 

  4873.                 } else if ($(clickTarget).hasClass("floatWindowButton") || $(clickTarget).parent().hasClass("floatWindowButton")){
    4874. 

  4874.                     if ($(clickTarget).parent().hasClass("floatWindowButton")){
    4875. 

  4875.                         clickTarget = $(clickTarget).parent();
    4876. 

  4876.                     }
    4877. 

  4877.                     //Get the ID list of this button group
    4878. 

  4878.                     var originalIDlist = JSON.parse(decodeURIComponent($(clickTarget).attr('windowIDGroup')));
    4879. 

  4879.                     var buttonGroupName = $(clickTarget).attr('group');
    4880. 

  4880.                     var displayText = lcontex('Close');
    4881. 

  4881.                     if (originalIDlist.length > 1){
    4882. 

  4882.                         //More than 1 window
    4883. 

  4883.                         displayText = lcontex('Close All');
    4884. 

  4884.                     }
    4885. 

  4885. 

  4886.                     addContextMenuItem($("#contextmenu"), displayText, "<i class='remove icon'></i>", `closeWindowGroup('${buttonGroupName}');`, false);
    4887. 

  4887.                     showMenu = true;
    4888. 

  4888.                 }
    4889. 

  4889. 

  4890.                 
    4891. 

  4891. 

  4892.                 if (showMenu){
    4893. 

  4893.                     //Toggle context menu
    4894. 

  4894.                     $("#contextmenu").show();
    4895. 

  4895.                     var startX = e.pageX;
    4896. 

  4896.                     var startY = e.pageY;
    4897. 

  4897.                     if (e.pageX > window.innerWidth / 2){
    4898. 

  4898.                         startX = e.pageX - $("#contextmenu").width();
    4899. 

  4899.                     }
    4900. 

  4900.                     if (e.pageY > window.innerHeight / 2){
    4901. 

  4901.                         startY = e.pageY -  $("#contextmenu").height();
    4902. 

  4902.                     }
    4903. 

  4903.                     $("#contextmenu").css({
    4904. 

  4904.                         left: startX,
    4905. 

  4905.                         top: startY
    4906. 

  4906.                     });
    4907. 

  4907.                     menuStartLocation = [e.pageX, e.pageY];
    4908. 

  4908.                 }
    4909. 

  4909.             }
    4910. 

  4910.         , true);
    4911. 

  4911.         
    4912. 

  4912.         //Localize context menu items using applocale
    4913. 

  4913.         function lcontex(key){
    4914. 

  4914.             if (applocale){
    4915. 

  4915.                 return applocale.getString("contextmenu/" + key, key);
    4916. 

  4916.             }else{
    4917. 

  4917.                 return key;
    4918. 

  4918.             }
    4919. 

  4919.         }
    4920. 

  4920. 

  4921.         function handleMenuRefresh() {
    4922. 

  4922.             //This function is here to remove the object and event passed in from menu pressed object
    4923. 

  4923.             refresh();
    4924. 

  4924.         }
    4925. 

  4925. 

  4926.         function newshortcut(){
    4927. 

  4927.             //Show the new shortcut creation tool
    4928. 

  4928.             newFloatWindow({
    4929. 

  4929.                 url: "SystemAO/desktop/shortcutCreator.html",
    4930. 

  4930.                 appicon: "img/desktop/system_icon/shortcut.png",
    4931. 

  4931.                 width:815,
    4932. 

  4932.                 height:485,
    4933. 

  4933.                 title: "New Shortcut"
    4934. 

  4934.             });
    4935. 

  4935.             hideAllContextMenus();
    4936. 

  4936.         }
    4937. 

  4937. 

  4938.         function openIconViaMenu(target, event){
    4939. 

  4939.             $(".launchIconWrapper.selected").each(function(){
    4940. 

  4940.                 iconObject = $(this).parent();
    4941. 

  4941.                 //Emulate a doubleclick on icon
    4942. 

  4942.                 iconDoubleClicked(iconObject, event);
    4943. 

  4943.             });
    4944. 

  4944.             hideAllContextMenus();
    4945. 

  4945.         }
    4946. 

  4946. 

  4947.         //Opening a shortcut module from desktop to new tab
    4948. 

  4948.         function openWebAppInNewTab(target, event){
    4949. 

  4949.             $(".launchIconWrapper.selected").each(function(){
    4950. 

  4950.                 var fd = JSON.parse(decodeURIComponent($(this).parent().attr("filedata")));
    4951. 

  4951.                 $.get("system/modules/getLaunchPara?module=" + fd.ShortcutPath, function(data) {
    4952. 

  4952.                     if (data.error !== undefined) {
    4953. 

  4953.                         console.log(data.error);
    4954. 

  4954.                     }else{
    4955. 

  4955.                         //Open in new tab
    4956. 

  4956.                         window.open(data.StartDir)
    4957. 

  4957.                     }
    4958. 

  4958.                 });
    4959. 

  4959.             });
    4960. 

  4960. 

  4961.             hideAllContextMenus();
    4962. 

  4962.         }
    4963. 

  4963. 

  4964.         function downloadFile(target, event){
    4965. 

  4965.             if ( $(".launchIconWrapper.selected").length == 1){
    4966. 

  4966.                 //Download this file directly
    4967. 

  4967.                 var rawfiledata = $(".launchIconWrapper.selected").parent().attr("filedata");
    4968. 

  4968.                 var filedata = JSON.parse(decodeURIComponent(rawfiledata));
    4969. 

  4969.                 var filepath = filedata.Filepath;
    4970. 

  4970.                 //Resolve the link to media download link
    4971. 

  4971.                 var downloadLink = "media/download?file=" + filepath;
    4972. 

  4972.                 window.open(downloadLink)
    4973. 

  4973. 

  4974.             }else if ($(".launchIconWrapper.selected").length > 1){
    4975. 

  4975.                 //Create a zip file using the fs api
    4976. 

  4976.                 var filelist = [];
    4977. 

  4977.                 $(".launchIconWrapper.selected").each(function(){
    4978. 

  4978.                     var filedata = JSON.parse(decodeURIComponent($(this).parent().attr("filedata")));
    4979. 

  4979.                     var filepath = filedata.Filepath;
    4980. 

  4980.                     filelist.push(filepath);
    4981. 

  4981.                 });
    4982. 

  4982. 

  4983.                 $.ajax({
    4984. 

  4984.                     url: "system/file_system/zipHandler",
    4985. 

  4985.                     data: {opr: "tmpzip", src: JSON.stringify(filelist), dest: ""},
    4986. 

  4986.                     method: "POST",
    4987. 

  4987.                     success: function(data){
    4988. 

  4988.                         if (data.error !== undefined){
    4989. 

  4989.                             alert(data.error);
    4990. 

  4990.                         }else{
    4991. 

  4991.                             //Zip completed.
    4992. 

  4992.                             window.open("media/download?file=" + data);
    4993. 

  4993.                         }
    4994. 

  4994.                     }
    4995. 

  4995.                 });
    4996. 

  4996.             }
    4997. 

  4997.             
    4998. 

  4998.             hideAllContextMenus();
    4999. 

  4999.         }
    5000. 

  5000. 

  5001.         function handleZipFolder(){
    5002. 

  5002.             var filelist = [];
    5003. 

  5003.             var filename = "desktop_" + new Date().getTime() + ".zip"
    5004. 

  5004.             if ($(".launchIconWrapper.selected").length == 1){
    5005. 

  5005.                 filename = $(".launchIconWrapper.selected").parent().attr('filename') + ".zip";
    5006. 

  5006.             }
    5007. 

  5007. 

  5008.             $(".launchIconWrapper.selected").each(function(){
    5009. 

  5009.                 var filedata = JSON.parse(decodeURIComponent($(this).parent().attr("filedata")));
    5010. 

  5010.                 var filepath = filedata.Filepath;
    5011. 

  5011.                 if (filedata.IsDir == true){
    5012. 

  5012.                     filelist.push(filepath);
    5013. 

  5013.                 }
    5014. 

  5014.             });
    5015. 

  5015.             $.ajax({
    5016. 

  5016.                     url: "system/file_system/zipHandler",
    5017. 

  5017.                     data: {opr: "zip", src: JSON.stringify(filelist), dest: "user:/Desktop/" + filename},
    5018. 

  5018.                     method: "POST",
    5019. 

  5019.                     success: function(data){
    5020. 

  5020.                         if (data.error !== undefined){
    5021. 

  5021.                             alert(data.error);
    5022. 

  5022.                         }else{
    5023. 

  5023.                             //Zip completed.
    5024. 

  5024.                             console.log(data);
    5025. 

  5025.                         }
    5026. 

  5026.                     }
    5027. 

  5027.                 });
    5028. 

  5028.             //console.log(filelist);
    5029. 

  5029.             hideAllContextMenus();
    5030. 

  5030.         }
    5031. 

  5031. 

  5032.         function handleOpenWith(target, event){
    5033. 

  5033.             $("#subcontextmenu").html("");
    5034. 

  5034.             //Updates 19 May 2021: Added support for better parsing Open With List
    5035. 

  5035.             var exts = [];
    5036. 

  5036.             //Get all exts from the selected files
    5037. 

  5037.             $(".launchIconWrapper.selected").each(function(){
    5038. 

  5038.                 var filename = $(this).parent().attr("filename");
    5039. 

  5039.                 var ext = "." + filename.split(".").pop();
    5040. 

  5040.                 exts.push(ext);
    5041. 

  5041.             });
    5042. 

  5042. 

  5043.             $.get("system/modules/list",function(data){
    5044. 

  5044.                 if (data.error !== undefined){
    5045. 

  5045.                     alert(data.error);
    5046. 

  5046.                 }else{
    5047. 

  5047.                     var supportedModuleCount = 0;
    5048. 

  5048.                     var openWithTargets = [];
    5049. 

  5049.                     for (var i =0; i < data.length; i++){
    5050. 

  5050.                         var thisModule = data[i];
    5051. 

  5051. 

  5052.                         //If this module support this ext, add it to list
    5053. 

  5053.                         var thisModuleSupportExt = thisModule.SupportedExt;
    5054. 

  5054.                         if (thisModule.Name == "File Manager"){
    5055. 

  5055.                             //Exceptional case
    5056. 

  5056.                             addContextMenuItem($("#subcontextmenu"), thisModule.Name, "", "openSelectedWith", false);
    5057. 

  5057.                         }
    5058. 

  5058.                         if (thisModuleSupportExt == null || thisModuleSupportExt.length == 0){
    5059. 

  5059.                             //Not supporting anything
    5060. 

  5060.                             continue;
    5061. 

  5061.                         }
    5062. 

  5062.                         thisModuleSupportExt.forEach(supportedExt => {
    5063. 

  5063.                             if (exts.includes(supportedExt)){
    5064. 

  5064.                                 //Add this to the menu
    5065. 

  5065.                                 addContextMenuItem($("#subcontextmenu"), thisModule.Name, "", "openSelectedWith", false);
    5066. 

  5066.                             }
    5067. 

  5067.                         })
    5068. 

  5068.                         
    5069. 

  5069. 

  5070.                         //if (thisModule.SupportEmb == true){
    5071. 

  5071.                         //    addContextMenuItem($("#subcontextmenu"), thisModule.Name, "", "openSelectedWith", false);
    5072. 

  5072.                         //}
    5073. 

  5073.                     }
    5074. 

  5074. 

  5075.                     //Add select more opener option
    5076. 

  5076.                     addContextMenuSeperator($("#subcontextmenu"));
    5077. 

  5077.                     addContextMenuItem($("#subcontextmenu"), lcontex("Select Other WebApps"), ``, "openOpenSelector", false);
    5078. 

  5078.                 }
    5079. 

  5079.                 showSubContextMenu(target);
    5080. 

  5080.             });
    5081. 

  5081.         }
    5082. 

  5082. 

  5083.         function handleFileShare(target, object){
    5084. 

  5084.             $("#subcontextmenu").html("");
    5085. 

  5085.             //Get the selected file
    5086. 

  5086.             var targetFile = $(".launchIconWrapper.selected")[0];
    5087. 

  5087.             var fileData = $(targetFile).parent().attr("filedata");
    5088. 

  5088.             if (fileData != undefined){
    5089. 

  5089.                 fileData = JSON.parse(decodeURIComponent(fileData));
    5090. 

  5090.                  //Check if the target file is shared
    5091. 

  5091.                  $.ajax({
    5092. 

  5092.                      url: "system/file_system/share/checkShared",
    5093. 

  5093.                      data: {path: fileData.Filepath},
    5094. 

  5094.                      success: function(data){
    5095. 

  5095.                         if (data.IsShared == true){
    5096. 

  5096.                             addContextMenuItem($("#subcontextmenu"), lcontex("Open Shared Link"), `<i class="external icon"></i>`, "openSharedLink", false, {
    5097. 

  5097.                                 payload: {
    5098. 

  5098.                                     uuid: data.ShareUUID.UUID
    5099. 

  5099.                                 }
    5100. 

  5100.                             });
    5101. 

  5101.                             addContextMenuItem($("#subcontextmenu"),  lcontex("Copy Link"), `<i class="copy icon"></i>`, "copySharedLink", false, {
    5102. 

  5102.                                 payload: {
    5103. 

  5103.                                     uuid: data.ShareUUID.UUID
    5104. 

  5104.                                 }
    5105. 

  5105.                             });
    5106. 

  5106.                             addContextMenuSeperator($("#subcontextmenu"));
    5107. 

  5107.                             addContextMenuTitle($("#subcontextmenu"), lcontex(`<i class="share alternate icon"></i> ${applocale.getString("contextmenu/Change Share Settings", "Change Share Settings")}]`));
    5108. 

  5108.                         }else{
    5109. 

  5109.                             addContextMenuTitle($("#subcontextmenu"), lcontex(`<i class="share alternate icon"></i> ${applocale.getString("contextmenu/Share this File", "Share this File")}`));
    5110. 

  5110.                         }
    5111. 

  5111. 

  5112.                         var checkmarkStyle = `style="color: #71ba68;"`;
    5113. 

  5113.                         var anyoneClass = "";
    5114. 

  5114.                         if (data.ShareUUID.Permission == "anyone"){
    5115. 

  5115.                             anyoneClass = `<i ${checkmarkStyle} class="checkmark icon"></i>`;
    5116. 

  5116.                         }
    5117. 

  5117.                         var signedinClass = "";
    5118. 

  5118.                         if (data.ShareUUID.Permission == "signedin"){
    5119. 

  5119.                             signedinClass = `<i ${checkmarkStyle} class="checkmark icon"></i>`;
    5120. 

  5120.                         }
    5121. 

  5121. 

  5122.                         var sameGroupClass = "";
    5123. 

  5123.                         if (data.ShareUUID.Permission == "samegroup"){
    5124. 

  5124.                             samegroup = `<i ${checkmarkStyle} class="checkmark icon"></i>`;
    5125. 

  5125.                         }
    5126. 

  5126. 

  5127.                         addContextMenuItem($("#subcontextmenu"), `<i class="globe icon"></i> ${applocale.getString("contextmenu/share/link","Anyone with Link")}`, anyoneClass, "shareWithThisPermission", false, {
    5128. 

  5128.                             payload: {
    5129. 

  5129.                                 type: "anyone"
    5130. 

  5130.                             }
    5131. 

  5131.                         });
    5132. 

  5132.                         addContextMenuItem($("#subcontextmenu"), `<i class="user circle outline icon"></i> ${applocale.getString( "contextmenu/share/signedin","Anyone Signed In")}`, signedinClass, "shareWithThisPermission", false, {
    5133. 

  5133.                             payload: {
    5134. 

  5134.                                 type: "signedin"
    5135. 

  5135.                             }
    5136. 

  5136.                         });
    5137. 

  5137.                         addContextMenuItem($("#subcontextmenu"), `<i class="users icon"></i> ${applocale.getString("contextmenu/share/samegroup","Same Group Users")}`, sameGroupClass, "shareWithThisPermission", false,{
    5138. 

  5138.                             payload: {
    5139. 

  5139.                                 type: "samegroup"
    5140. 

  5140.                             }
    5141. 

  5141.                         });
    5142. 

  5142.                         if (data.IsShared == true){
    5143. 

  5143.                             //This file is shared.
    5144. 

  5144.                             addContextMenuSeperator($("#subcontextmenu"));
    5145. 

  5145.                             addContextMenuItem($("#subcontextmenu"), lcontex("Remove Share"), `<i style="color: #d97762;" class="trash icon"></i>`, "shareWithThisPermission", false,{
    5146. 

  5146.                                 payload: {
    5147. 

  5147.                                     type: "remove"
    5148. 

  5148.                                 }
    5149. 

  5149.                             });
    5150. 

  5150.                         }
    5151. 

  5151.                      }
    5152. 

  5152.                  });
    5153. 

  5153.             }
    5154. 

  5154.             
    5155. 

  5155.             showSubContextMenu(target);
    5156. 

  5156.         }
    5157. 

  5157. 

  5158.         //Copy the shared link
    5159. 

  5159.         function copySharedLink(target, event){
    5160. 

  5160.             var payload = getContextMenuPayload(target);
    5161. 

  5161.             if (payload == null){
    5162. 

  5162.                 //Something wrong
    5163. 

  5163.                 return;
    5164. 

  5164.             }
    5165. 

  5165. 

  5166.             //Generate the share link
    5167. 

  5167.             let protocol = "https://";
    5168. 

  5168.             if (location.protocol !== 'https:') {
    5169. 

  5169.                 protocol = "http://";
    5170. 

  5170.             }
    5171. 

  5171.             var shareURL = protocol + window.location.hostname + ":" + window.location.port + "/share/" + payload.uuid;
    5172. 

  5172. 

  5173.             //Copy the text to clipboard
    5174. 

  5174.             const area = document.createElement('textarea');
    5175. 

  5175.             document.body.appendChild(area);
    5176. 

  5176. 

  5177.             area.value = shareURL;
    5178. 

  5178.             area.select();
    5179. 

  5179.             document.execCommand('copy');
    5180. 

  5180. 

  5181.             document.body.removeChild(area);
    5182. 

  5182. 

  5183.             //Update status so it show the user it has been coped
    5184. 

  5184.             $(target).html(`<i style="color: #71ba68;" class="checkmark icon"></i> ${lcontex("Copied")}`);
    5185. 

  5185.             setTimeout(function(){
    5186. 

  5186.                 if ($(target).length > 0){
    5187. 

  5187.                     $(target).html(`${lcontex("Copy Link")}
    5188. 

  5188.                         <span class="description">
    5189. 

  5189.                             <i class="copy icon"></i>
    5190. 

  5190.                         </span>`);
    5191. 

  5191.                 }
    5192. 

  5192.             }, 3000);
    5193. 

  5193.         }
    5194. 

  5194. 

  5195.         //Open the shared file link
    5196. 

  5196.         function openSharedLink(target, event){
    5197. 

  5197.             var payload = getContextMenuPayload(target);
    5198. 

  5198.             if (payload == null){
    5199. 

  5199.                 //Something wrong
    5200. 

  5200.                 return;
    5201. 

  5201.             }
    5202. 

  5202. 

  5203.             var targetURL = "share/" + payload.uuid;
    5204. 

  5204.             window.open(targetURL);
    5205. 

  5205. 

  5206.             hideAllContextMenus();
    5207. 

  5207.         }
    5208. 

  5208. 

  5209.         function shareWithThisPermission(target, event){
    5210. 

  5210.             var payload = getContextMenuPayload(target);
    5211. 

  5211.             if (payload == null){
    5212. 

  5212.                 //Something wrong
    5213. 

  5213.                 return;
    5214. 

  5214.             }
    5215. 

  5215. 

  5216.             //Get the selected file
    5217. 

  5217.             var selectedFileObjects = $(".launchIconWrapper.selected");
    5218. 

  5218.             if (selectedFileObjects.length == 0){
    5219. 

  5219.                 //Not found
    5220. 

  5220.                 return
    5221. 

  5221.             }else if (selectedFileObjects.length > 1){
    5222. 

  5222.                 //This should not happens. If it did happens, use the first one
    5223. 

  5223.                 selectedFileObjects = selectedFileObjects[0];
    5224. 

  5224.             }
    5225. 

  5225. 

  5226.             //Extract file information
    5227. 

  5227.             var fileData = $(selectedFileObjects).parent().attr("filedata");
    5228. 

  5228.             fileData = JSON.parse(decodeURIComponent(fileData));
    5229. 

  5229.             
    5230. 

  5230.             //Convert the desktop file data to ArozOS generic filedata
    5231. 

  5231.             var afd = {
    5232. 

  5232.                 "filename": fileData.Filename,
    5233. 

  5233.                 "filepath": fileData.Filepath,
    5234. 

  5234.                 "shareMode": payload.type
    5235. 

  5235.             };
    5236. 

  5236. 

  5237.             //Create a new share for this
    5238. 

  5238.             var targetURL = "SystemAO/file_system/file_share.html#" + encodeURIComponent(JSON.stringify([afd]));
    5239. 

  5239. 

  5240. 

  5241.             //Calculate the window spawn position
    5242. 

  5242.             var basePosition = $(selectedFileObjects).offset();
    5243. 

  5243.             var left = basePosition.left + 100;
    5244. 

  5244.             if (left + 320 > window.innerWidth){
    5245. 

  5245.                 left = basePosition.left - 350;
    5246. 

  5246.             }
    5247. 

  5247. 

  5248.             var top = basePosition.top;
    5249. 

  5249.             if (top + 480 > window.innerHeight){
    5250. 

  5250.                 top = window.innerHeight - 480;
    5251. 

  5251.             }
    5252. 

  5252. 

  5253.             newFloatWindow({
    5254. 

  5254.                 url: targetURL,
    5255. 

  5255.                 width: 330,
    5256. 

  5256.                 height: 480,
    5257. 

  5257.                 left: left,
    5258. 

  5258.                 top: top,
    5259. 

  5259.                 appicon: "SystemAO/file_system/img/share.svg",
    5260. 

  5260.                 title: "Share File"
    5261. 

  5261.             }, function(windowUUID){
    5262. 

  5262.                 //Set the window to fixed window
    5263. 

  5263.                 setFloatWindowResizePolicy(windowUUID, false);
    5264. 

  5264.             });
    5265. 

  5265. 

  5266.             hideAllContextMenus();
    5267. 

  5267.         }
    5268. 

  5268. 

  5269.         function openObjectProperty(target, object){
    5270. 

  5270.            var filelist = [];
    5271. 

  5271.            $(".launchIconWrapper.selected").each(function(){
    5272. 

  5272.                var filepath = $(this).parent().attr("filepath");
    5273. 

  5273.                filelist.push(filepath);
    5274. 

  5274.            });
    5275. 

  5275.            
    5276. 

  5276.            var hashPassthrough = encodeURIComponent(JSON.stringify(filelist));
    5277. 

  5277.             newFloatWindow({
    5278. 

  5278.                 url: "SystemAO/file_system/file_properties.html#" + hashPassthrough,
    5279. 

  5279.                 width: 340,
    5280. 

  5280.                 height: 480,
    5281. 

  5281.                 appicon: "SystemAO/file_system/img/properties.png",
    5282. 

  5282.                 title: "File Properties",
    5283. 

  5283.             });
    5284. 

  5284. 

  5285.             hideAllContextMenus();
    5286. 

  5286.         }
    5287. 

  5287. 

  5288.         //Open the file extension selector
    5289. 

  5289.         function openOpenSelector(target, event){
    5290. 

  5290.             var filedata = $($(".launchIconWrapper.selected")[0]).parent().attr("filedata")
    5291. 

  5291.             filedata = JSON.parse(decodeURIComponent(filedata));
    5292. 

  5292.             
    5293. 

  5293.             var fileDescriptor = {
    5294. 

  5294.                 filepath: filedata.Filepath,
    5295. 

  5295.                 filename: filedata.Filename
    5296. 

  5296.             }
    5297. 

  5297.             
    5298. 

  5298.             newFloatWindow({
    5299. 

  5299.                 url: "SystemAO/file_system/defaultOpener.html#" + encodeURIComponent(JSON.stringify(fileDescriptor)),
    5300. 

  5300.                 width: 320,
    5301. 

  5301.                 height: 510,
    5302. 

  5302.                 appicon: "SystemAO/file_system/img/opener.png",
    5303. 

  5303.                 title: "Select WebApp to Open File",
    5304. 

  5304.             });
    5305. 

  5305. 

  5306.             hideAllContextMenus();
    5307. 

  5307.         }
    5308. 

  5308. 

  5309.         function openSelectedWith(target, event){
    5310. 

  5310.             var targetModulename = $(target).text().trim();
    5311. 

  5311.             var openFileList = [];
    5312. 

  5312.             $(".selected.launchIconWrapper").each(function(){
    5313. 

  5313.                 var thisFiledata = JSON.parse(decodeURIComponent($(this).parent().attr("filedata")));
    5314. 

  5314.                openFileList.push({
    5315. 

  5315.                    filename: thisFiledata.Filename,
    5316. 

  5316.                    filepath: thisFiledata.Filepath
    5317. 

  5317.                });
    5318. 

  5318.             });
    5319. 

  5319. 

  5320.             //Find the launch info of the module
    5321. 

  5321.             var targetModuleInfo = undefined;
    5322. 

  5322.             for (var i =0; i < moduleInstalled.length; i++){
    5323. 

  5323.                 if (moduleInstalled[i].Name == targetModulename){
    5324. 

  5324.                     targetModuleInfo = JSON.parse(JSON.stringify(moduleInstalled[i]));
    5325. 

  5325.                 }
    5326. 

  5326.             }
    5327. 

  5327. 

  5328.            //Open the files with the given module
    5329. 

  5329.             openFileWithModule(targetModuleInfo, openFileList);
    5330. 

  5330.             hideAllContextMenus();
    5331. 

  5331.         }
    5332. 

  5332. 

  5333.         function getModuleInfoFromName(moduleName){
    5334. 

  5334.             for (var i = 0; i < moduleInstalled.length; i++){
    5335. 

  5335.                 if (moduleInstalled[i].Name == moduleName){
    5336. 

  5336.                     return moduleInstalled[i];
    5337. 

  5337.                 }
    5338. 

  5338.             }
    5339. 

  5339. 

  5340.             return false
    5341. 

  5341.         }
    5342. 

  5342. 

  5343.         /*
    5344. 

  5344.             This function is used to generate menu items for context menu.
    5345. 

  5345.             Options example
    5346. 

  5346.             {
    5347. 

  5347.                 payload: {
    5348. 

  5348.                     //Some JSON based payload here
    5349. 

  5349.                 }
    5350. 

  5350.             }
    5351. 

  5351.         */
    5352. 

  5352. 

  5353.         function addContextMenuItem(target, keyword, hotkey = undefined, functionName, containSubMenu = false, options=undefined) {
    5354. 

  5354.             var itemClass = "item";
    5355. 

  5355.             if (containSubMenu) {
    5356. 

  5356.                 itemClass = "item submenu";
    5357. 

  5357.             }
    5358. 

  5358. 

  5359.             var payload = "";
    5360. 

  5360.             if (options != undefined && options.payload != undefined){ 
    5361. 

  5361.                 payload = encodeURIComponent(JSON.stringify(options.payload));
    5362. 

  5362.             }
    5363. 

  5363. 

  5364.             if (hotkey !== undefined) {
    5365. 

  5365.                 target.append(`<div class="${itemClass}" onclick="${functionName}(this,event);" payload="${payload}">
    5366. 

  5366.                         ${keyword}
    5367. 

  5367.                         <span class="description">${hotkey}</span>
    5368. 

  5368.                     </div>`);
    5369. 

  5369.             } else {
    5370. 

  5370.                 target.append(`<div class="${itemClass}"  onclick="${functionName}(this,event);" payload="${payload}">
    5371. 

  5371.                         ${keyword}
    5372. 

  5372.                     </div>`);
    5373. 

  5373.             }
    5374. 

  5374.         }
    5375. 

  5375. 

  5376.         function getContextMenuPayload(object){
    5377. 

  5377.             var encodedPayload = $(object).attr("payload");
    5378. 

  5378.             if (encodedPayload != ""){
    5379. 

  5379.                 return JSON.parse(decodeURIComponent(encodedPayload));
    5380. 

  5380.             }else{
    5381. 

  5381.                 return null;
    5382. 

  5382.             }
    5383. 

  5383.         }
    5384. 

  5384. 

  5385.         function listIconsize(target, event) {
    5386. 

  5386.             $("#subcontextmenu").html("");
    5387. 

  5387.             var smallCheckmark = undefined;
    5388. 

  5388.             var mediumCheckmark = undefined;
    5389. 

  5389.             var bigCheckmark = undefined;
    5390. 

  5390.             if (desktopIconSize == "small") {
    5391. 

  5391.                 smallCheckmark = "<i class='checkmark icon'></i>";
    5392. 

  5392.             }
    5393. 

  5393.             if (desktopIconSize == "medium") {
    5394. 

  5394.                 mediumCheckmark = "<i class='checkmark icon'></i>";
    5395. 

  5395.             }
    5396. 

  5396. 

  5397.             if (desktopIconSize == "big") {
    5398. 

  5398.                 bigCheckmark = "<i class='checkmark icon'></i>";
    5399. 

  5399.             }
    5400. 

  5400.             addContextMenuItem($("#subcontextmenu"), lcontex("Small"), smallCheckmark, "setDesktopIconSize", false, {payload: "small"});
    5401. 

  5401.             addContextMenuItem($("#subcontextmenu"), lcontex("Medium"), mediumCheckmark, "setDesktopIconSize", false, {payload: "medium"});
    5402. 

  5402.             addContextMenuItem($("#subcontextmenu"), lcontex("Big"), bigCheckmark, "setDesktopIconSize", false, {payload: "big"});
    5403. 

  5403.             showSubContextMenu(target);
    5404. 

  5404.         }
    5405. 

  5405. 

  5406.         function setDesktopIconSize(target, evt) {
    5407. 

  5407.             var targetSize = $(target).attr("payload");
    5408. 

  5408.             targetSize = JSON.parse(decodeURIComponent(targetSize));
    5409. 

  5409.             if (["small", "medium", "big"].includes(targetSize)) {
    5410. 

  5410.                 desktopIconSize = targetSize;
    5411. 

  5411.             }
    5412. 

  5412.             refresh();
    5413. 

  5413.             setStorage("iconsize", desktopIconSize);
    5414. 

  5414.             hideAllContextMenus();
    5415. 

  5415.         }
    5416. 

  5416. 

  5417.         function addContextMenuSeperator(target) {
    5418. 

  5418.             $(target).append(`<div class="ui divider"></div>`);
    5419. 

  5419.         }
    5420. 

  5420. 

  5421.         function addContextMenuTitle(target, title){
    5422. 

  5422.             $(target).append(`<div class="header">
    5423. 

  5423.                 ${title}
    5424. 

  5424.             </div>`);
    5425. 

  5425.         }
    5426. 

  5426. 

  5427.         function background(target, evt) {
    5428. 

  5428.             $("#subcontextmenu").html('<div class="item"><i class="loading spinning icon"></i> Loading</div>');
    5429. 

  5429.             $.get("system/desktop/theme", function(data) {
    5430. 

  5430.                 $("#subcontextmenu").html("");
    5431. 

  5431.                 for (var i = 0; i < data.length; i++) {
    5432. 

  5432.                     if (currentUserTheme == data[i].Theme) {
    5433. 

  5433.                         addContextMenuItem($("#subcontextmenu"), data[i].Theme, "<i class='checkmark icon'></i>", "setTheme", false);
    5434. 

  5434.                     } else {
    5435. 

  5435.                         addContextMenuItem($("#subcontextmenu"), data[i].Theme, undefined, "setTheme", false);
    5436. 

  5436.                     }
    5437. 

  5437. 

  5438.                 }
    5439. 

  5439.             });
    5440. 

  5440.             showSubContextMenu(target);
    5441. 

  5441.         }
    5442. 

  5442. 

  5443.         //Set theme from button click
    5444. 

  5444.         function setTheme(target, evt) {
    5445. 

  5445.             var theme = $(target).text().trim();
    5446. 

  5446.             setDesktopTheme(theme);
    5447. 

  5447.             hideAllContextMenus();
    5448. 

  5448.         }
    5449. 

  5449. 

  5450.         function personalization() {
    5451. 

  5451.             //Show the personalization window
    5452. 

  5452.             newFloatWindow({
    5453. 

  5453.                 url: "SystemAO/desktop/personalization.html",
    5454. 

  5454.                 appicon: "SystemAO/desktop/img/personalization.png",
    5455. 

  5455.                 width:640,
    5456. 

  5456.                 height:480,
    5457. 

  5457.                 title: "Personalization"
    5458. 

  5458.             });
    5459. 

  5459.             hideAllContextMenus();
    5460. 

  5460.         }
    5461. 

  5461. 

  5462.         //New folder on the menu start location
    5463. 

  5463.         function newfolder(object, event) {
    5464. 

  5464.             var closestLocation = findClosestGrid(menuStartLocation[0], menuStartLocation[1], false);
    5465. 

  5465.             let closestPixelLocation = closestLocation[0];
    5466. 

  5466.             let closestGridIndexLocation = closestLocation[1];
    5467. 

  5467.             //Generate new foldername
    5468. 

  5468.             var newFolderName = "New Folder";
    5469. 

  5469.             var counter = 1;
    5470. 

  5470.             while (desktopFileList.includes(newFolderName)) {
    5471. 

  5471.                 newFolderName = `New Folder(${counter})`;
    5472. 

  5472.                 counter++;
    5473. 

  5473.             }
    5474. 

  5474. 

  5475.             //Check if there are already another object at that locaton
    5476. 

  5476.             var duplicateObject = getObjectFromLocation(closestPixelLocation[0], closestPixelLocation[1]);
    5477. 

  5477.             var createObjectLocation = true;
    5478. 

  5478.             if (duplicateObject !== undefined) {
    5479. 

  5479.                 //Ignore create position. Let it settle on next new slot.
    5480. 

  5480.                 createObjectLocation = false;
    5481. 

  5481.             }
    5482. 

  5482. 

  5483.             //Create the folder
    5484. 

  5484.             requestCSRFToken(function(token){
    5485. 

  5485.                 $.post("system/file_system/newItem", {
    5486. 

  5486.                     type: "folder",
    5487. 

  5487.                     src: "user:/Desktop/",
    5488. 

  5488.                     filename: newFolderName,
    5489. 

  5489.                     csrft: token
    5490. 

  5490.                 }).done(function(data) {
    5491. 

  5491.                     if (data.error !== undefined) {
    5492. 

  5492.                         alert(data.error);
    5493. 

  5493.                     } else {
    5494. 

  5494.                         if (createObjectLocation) {
    5495. 

  5495.                             setIconDesktopLocation(newFolderName, closestGridIndexLocation[0], closestGridIndexLocation[1], function() {
    5496. 

  5496.                                 //After set Desktop icon, refresh the page 
    5497. 

  5497.                                 refresh(function() {
    5498. 

  5498.                                     //After refresh the page, highlight the new folder and set it to rename mode
    5499. 

  5499.                                     var targetFolderObject = getObjectFromGridLocation(closestGridIndexLocation[0], closestGridIndexLocation[1]);
    5500. 

  5500.                                     console.log(targetFolderObject);
    5501. 

  5501.                                     enableRenameOnLaunchIconObject(targetFolderObject);
    5502. 

  5502.                                 });
    5503. 

  5503.                             });
    5504. 

  5504.                         }
    5505. 

  5505.                     }
    5506. 

  5506.                 });
    5507. 

  5507.             });
    5508. 

  5508. 

  5509.             hideAllContextMenus();
    5510. 

  5510.         }
    5511. 

  5511. 

  5512.         function enableRenameOnLaunchIconObject(object) {
    5513. 

  5513.             renameMode = true;
    5514. 

  5514.             $(".launchIcon").attr("draggable", "false");
    5515. 

  5515.             var filedata = JSON.parse(decodeURIComponent($(object).attr("filedata")));
    5516. 

  5516.             var originalName = filedata.Filename;
    5517. 

  5517.             if (filedata.IsShortcut){
    5518. 

  5518.                 //Shortcut. Use its display name instead
    5519. 

  5519.                 originalName = filedata.ShortcutName;
    5520. 

  5520.             }
    5521. 

  5521.             $(object).find(".launchIconText").hide();
    5522. 

  5522.             $(object).append(`<textarea class="renameInput ${desktopIconSize}" type="text" onkeydown="handleRenameKeydown(event);" ondragstart="return false;" dblclick="event.stopImmediatePropagation(); event.stopImmediatePropagation();"maxlength="32">${originalName}</textarea>`);
    5523. 

  5523.             $(object).find(".renameInput")[0].select();
    5524. 

  5524.             var index = originalName.lastIndexOf(".");
    5525. 

  5525.             console.log(index);
    5526. 

  5526.             if( index >= 0){
    5527. 

  5527.                 $(object).find(".renameInput")[0].setSelectionRange(0, index);
    5528. 

  5528.             }
    5529. 

  5529. 

  5530.             //Updates 4-5-2021: Added IME support on rename input
    5531. 

  5531.             $(object).find(".renameInput")[0].addEventListener("keydown", function(event){
    5532. 

  5532.                 if (window.ime && window.ime.handler != null){
    5533. 

  5533.                     window.ime.handler(event);
    5534. 

  5534.                 }else{
    5535. 

  5535.                     //No IME handler. Just continue the input
    5536. 

  5536.                 }
    5537. 

  5537.             });
    5538. 

  5538.             window.ime.focus = $(object).find(".renameInput")[0];
    5539. 

  5539.         }
    5540. 

  5540. 

  5541.         //Handle enter keypress on the rename textarea
    5542. 

  5542.         function handleRenameKeydown(e){
    5543. 

  5543.             if (e.keyCode == 13){
    5544. 

  5544.                 //Enter pressed
    5545. 

  5545.                 e.preventDefault();
    5546. 

  5546.                 exitRenameMode();
    5547. 

  5547.             }
    5548. 

  5548.         }
    5549. 

  5549. 

  5550.         function exitRenameMode() {
    5551. 

  5551.             if (renameMode) {
    5552. 

  5552.                 $(".launchIcon").attr("draggable", "true");
    5553. 

  5553.                 $(".launchIcon").find(".launchIconText").show();
    5554. 

  5554. 

  5555.                 //Update the folder to textarea content
    5556. 

  5556.                 $(".renameInput").each(function() {
    5557. 

  5557.                     if ($(this).val() == "") {
    5558. 

  5558.                         //Ignore this update
    5559. 

  5559.                         refresh(function() {
    5560. 

  5560.                             //Refresh the desktop
    5561. 

  5561.                         });                   
    5562. 

  5562.                         return;
    5563. 

  5563.                     } else {
    5564. 

  5564.                         var filedata = JSON.parse(decodeURIComponent($(this).parent().attr("filedata")));
    5565. 

  5565.                         var filepath = filedata.Filepath;
    5566. 

  5566.                         var newFilename = $(this).val();
    5567. 

  5567.                         
    5568. 

  5568.                         if (filedata.IsShortcut == true){
    5569. 

  5569.                             //Shortcut. Edit the shortcut content name
    5570. 

  5570.                             let currentInputTextArea = $(this);
    5571. 

  5571.                             $.ajax({
    5572. 

  5572.                                 url: "/system/desktop/opr/renameShortcut",
    5573. 

  5573.                                 data: {src: filepath, new: newFilename},
    5574. 

  5574.                                 success: function(data){
    5575. 

  5575.                                     if (data.error !== undefined){
    5576. 

  5576.                                         //Cancel the operation
    5577. 

  5577.                                         console.log("*ERROR* " + data.error);
    5578. 

  5578.                                         currentInputTextArea.remove();
    5579. 

  5579.                                     }else{
    5580. 

  5580.                                         //No need to update the shortcut position (as its name not changed)
    5581. 

  5581.                                         refresh(function() {
    5582. 

  5582.                                             //Refresh the desktop
    5583. 

  5583.                                         });
    5584. 

  5584.                                     }
    5585. 

  5585.                                 }
    5586. 

  5586.                             })
    5587. 

  5587.                         }else{
    5588. 

  5588.                             //Normal typed files / folder. Rename the object
    5589. 

  5589.                             let currentInputTextArea = $(this);
    5590. 

  5590. 

  5591.                             //Check if new filename is identaical to the old filename
    5592. 

  5592.                             var originalFilename = $(this).parent().attr("filename");
    5593. 

  5593.                             console.log("Launch Icon object", $(this).parent());
    5594. 

  5594. 

  5595.                             if (newFilename == originalFilename){
    5596. 

  5596.                                 //Filename has no changes
    5597. 

  5597.                                 currentInputTextArea.remove();
    5598. 

  5598.                                 return;
    5599. 

  5599.                             }
    5600. 

  5600.                             generateCSRFToken(function(csrftoken){
    5601. 

  5601.                                 $.ajax({
    5602. 

  5602.                                     url: "./system/file_system/fileOpr",
    5603. 

  5603.                                     method: "POST",
    5604. 

  5604.                                     data: {opr: "rename", src: JSON.stringify([filepath]), new: JSON.stringify([newFilename]), csrft: csrftoken},
    5605. 

  5605.                                     success: function(data){
    5606. 

  5606.                                         if (data.error !== undefined){
    5607. 

  5607.                                             //Cancel the operation
    5608. 

  5608.                                             alert(data.error);
    5609. 

  5609.                                             console.log("*ERROR* " + data.error);
    5610. 

  5610.                                             currentInputTextArea.remove();
    5611. 

  5611.                                         }else{
    5612. 

  5612.                                             //Update the new file position
    5613. 

  5613.                                             let closestLocation = findClosestGrid($(currentInputTextArea).parent().offset().left, $(currentInputTextArea).parent().offset().top);
    5614. 

  5614.                                             let closestGridIndexLocation = closestLocation[1];
    5615. 

  5615.                                             setIconDesktopLocation(newFilename, closestGridIndexLocation[0], closestGridIndexLocation[1], function(){
    5616. 

  5616.                                                 //Callback after setting location
    5617. 

  5617.                                                 refresh(function() {
    5618. 

  5618.                                                     //Refresh the desktop
    5619. 

  5619.                                                 });
    5620. 

  5620.                                             });
    5621. 

  5621.                                         }
    5622. 

  5622.                                     }
    5623. 

  5623.                                 });
    5624. 

  5624.                             });
    5625. 

  5625.                         }
    5626. 

  5626.                     }
    5627. 

  5627.                 });
    5628. 

  5628. 

  5629.                 renameMode = false;
    5630. 

  5630.             }
    5631. 

  5631.         }
    5632. 

  5632. 

  5633.         //Handle opening shortcut folder location
    5634. 

  5634.         function handleShortcutFolderOpen(object, event){
    5635. 

  5635.             var openPendingFolders = [];
    5636. 

  5636.             $(".launchIconWrapper.selected").each(function(){
    5637. 

  5637.                 var filedata = JSON.parse(decodeURIComponent($(this).parent().attr("filedata")));
    5638. 

  5638.                 console.log(filedata);
    5639. 

  5639.                 if (filedata.IsShortcut == true){
    5640. 

  5640.                     if (filedata.ShortcutType == "folder"){
    5641. 

  5641.                         openPendingFolders.push(filedata.ShortcutPath);
    5642. 

  5642.                     }else if (filedata.ShortcutType == "module"){
    5643. 

  5643.                         openPendingFolders.push("web:/" + filedata.ShortcutPath);
    5644. 

  5644.                     }
    5645. 

  5645.                     
    5646. 

  5646.                 }
    5647. 

  5647.             });
    5648. 

  5648. 

  5649.             //Open all folders
    5650. 

  5650.             openPendingFolders.forEach(folder => {
    5651. 

  5651.                 newFloatWindow({
    5652. 

  5652.                     url: "SystemAO/file_system/file_explorer.html#" + encodeURIComponent(folder),
    5653. 

  5653.                     appicon: "SystemAO/file_system/img/small_icon.png",
    5654. 

  5654.                     width:1080,
    5655. 

  5655.                     height:580,
    5656. 

  5656.                     title: "File Manager"
    5657. 

  5657.                 });
    5658. 

  5658.             })
    5659. 

  5659. 

  5660.             hideAllContextMenus();
    5661. 

  5661.         }
    5662. 

  5662. 

  5663.         //Handle basic desktop file operations
    5664. 

  5664.         function handleFileDelete(object, event){
    5665. 

  5665.             var deleteFileList = [];
    5666. 

  5666.             $(".launchIconWrapper.selected").each(function(){
    5667. 

  5667.                 var filedata = JSON.parse(decodeURIComponent($(this).parent().attr("filedata")));
    5668. 

  5668.                 deleteFileList.push(filedata.Filepath);
    5669. 

  5669.             });
    5670. 

  5670.             console.log(deleteFileList);
    5671. 

  5671.             generateCSRFToken(function(csrftoken){
    5672. 

  5672.                 $.ajax({
    5673. 

  5673.                     url: "system/file_system/fileOpr",
    5674. 

  5674.                     method:"POST",
    5675. 

  5675.                     data: {opr: "recycle", src: JSON.stringify(deleteFileList), csrft: csrftoken},
    5676. 

  5676.                     success: function(data){
    5677. 

  5677.                         if (data.error !== undefined){
    5678. 

  5678.                             alert(data.error);
    5679. 

  5679.                         }else{
    5680. 

  5680.                         refresh(undefined, true);
    5681. 

  5681.                         }
    5682. 

  5682.                     }
    5683. 

  5683.                 });
    5684. 

  5684.                 hideAllContextMenus();
    5685. 

  5685.             });
    5686. 

  5686.             
    5687. 

  5687.         }
    5688. 

  5688. 

  5689.         //File Rename
    5690. 

  5690.         let renamingItems = [];
    5691. 

  5691.         function handleRename(object, event){
    5692. 

  5692.             if ($('.launchIconWrapper.selected').length > 0){
    5693. 

  5693.                 //Enter rename mode
    5694. 

  5694.                 renamingItems = $('.launchIconWrapper.selected');
    5695. 

  5695.                 let renameTarget = $('.launchIconWrapper.selected')[0]
    5696. 

  5696.                 let fileObject = $(renameTarget).parent();
    5697. 

  5697.                 enableRenameOnLaunchIconObject(fileObject);
    5698. 

  5698.             }
    5699. 

  5699.             hideAllContextMenus();
    5700. 

  5700.         }
    5701. 

  5701. 

  5702.         function handleCopyOperation(){
    5703. 

  5703.             var clipboard = [];
    5704. 

  5704.             $(".launchIconWrapper.selected").each(function(){
    5705. 

  5705.                 var object = $(this).parent();
    5706. 

  5706.                 var fd = JSON.parse(decodeURIComponent($(object).attr("filedata")));
    5707. 

  5707.                 clipboard.push(fd.Filepath);
    5708. 

  5708.             });
    5709. 

  5709. 

  5710.             localStorage.setItem("ao/file_system/clipboard",JSON.stringify(clipboard));
    5711. 

  5711.             localStorage.setItem("ao/file_system/cutmode","false");
    5712. 

  5712.             copyStringToClipboard(JSON.stringify(clipboard));
    5713. 

  5713.             hideAllContextMenus();
    5714. 

  5714.         }
    5715. 

  5715. 

  5716.         function handleCutOperation(){
    5717. 

  5717.             var clipboard = [];
    5718. 

  5718.             $(".launchIconWrapper.selected").each(function(){
    5719. 

  5719.                 var object = $(this).parent();
    5720. 

  5720.                 var fd = JSON.parse(decodeURIComponent($(object).attr("filedata")));
    5721. 

  5721.                 clipboard.push(fd.Filepath);
    5722. 

  5722.             });
    5723. 

  5723. 

  5724.             localStorage.setItem("ao/file_system/clipboard",JSON.stringify(clipboard));
    5725. 

  5725.             localStorage.setItem("ao/file_system/cutmode","true");
    5726. 

  5726.             copyStringToClipboard(JSON.stringify(clipboard));
    5727. 

  5727.             hideAllContextMenus();
    5728. 

  5728.         }
    5729. 

  5729. 

  5730.         function checkFileInClipboard(){
    5731. 

  5731.             //Check if there are files in clipboard
    5732. 

  5732.             var crossFrameClipboard = localStorage.getItem("ao/file_system/clipboard");
    5733. 

  5733.             var useCutMode = localStorage.getItem("ao/file_system/cutmode");
    5734. 

  5734.             var fileList = [];
    5735. 

  5735.             if (crossFrameClipboard !== "" && crossFrameClipboard !== undefined && crossFrameClipboard !== null){
    5736. 

  5736.                 fileList = JSON.parse(crossFrameClipboard);
    5737. 

  5737.             }
    5738. 

  5738.             
    5739. 

  5739.             return fileList.length > 0;
    5740. 

  5740.         }
    5741. 

  5741. 

  5742.         function handlePasteOperation(){
    5743. 

  5743.             //Check if there are files in clipboard
    5744. 

  5744.             var crossFrameClipboard = localStorage.getItem("ao/file_system/clipboard");
    5745. 

  5745.             var useCutMode = localStorage.getItem("ao/file_system/cutmode");
    5746. 

  5746.             var fileList = [];
    5747. 

  5747.             if (crossFrameClipboard !== "" && crossFrameClipboard !== undefined && crossFrameClipboard !== null){
    5748. 

  5748.                 fileList = JSON.parse(crossFrameClipboard);
    5749. 

  5749.             }
    5750. 

  5750.             if (useCutMode !== "" && useCutMode !== undefined && useCutMode !== null){
    5751. 

  5751.                 thisOprCutMode = (useCutMode == "true");
    5752. 

  5752.             }
    5753. 

  5753. 

  5754.             var mode = "copy";
    5755. 

  5755.             var title = "Copying "
    5756. 

  5756.             if (thisOprCutMode){
    5757. 

  5757.                 mode = "move";
    5758. 

  5758.                 title = "Moving "
    5759. 

  5759.             }
    5760. 

  5760. 

  5761.             if (fileList.length > 0){
    5762. 

  5762.                 //There are something to move. Start the file operation dialog
    5763. 

  5763.                 var oprConfig = {
    5764. 

  5764.                     opr: mode,
    5765. 

  5765.                     src: fileList,
    5766. 

  5766.                     dest: "user:/Desktop/",
    5767. 

  5767.                     overwriteMode: "ask"
    5768. 

  5768.                 }
    5769. 

  5769.                 var configHash = encodeURIComponent(JSON.stringify(oprConfig));
    5770. 

  5770. 

  5771.                 //Genreate window title
    5772. 

  5772.                 var title = title + fileList.length;
    5773. 

  5773.                 if (fileList.length > 1){
    5774. 

  5774.                     title += " files";
    5775. 

  5775.                 }else{
    5776. 

  5776.                     title += " file";
    5777. 

  5777.                 }
    5778. 

  5778. 

  5779.                 newFloatWindow({
    5780. 

  5780.                     url: "SystemAO/file_system/file_operation.html#" + configHash,
    5781. 

  5781.                     width: 400,
    5782. 

  5782.                     height: 220,
    5783. 

  5783.                     appicon: "SystemAO/file_system/img/selector.png",
    5784. 

  5784.                     title: title
    5785. 

  5785.                 });
    5786. 

  5786.             }
    5787. 

  5787.             hideAllContextMenus();
    5788. 

  5788.         }
    5789. 

  5789. 

  5790.         //New item menus.
    5791. 

  5791.         function newitemmenu(target, event) {
    5792. 

  5792.             $("#subcontextmenu").html("");
    5793. 

  5793.             //Append the new folder option first
    5794. 

  5794.             addContextMenuItem($("#subcontextmenu"), lcontex('Folder'), "<i class='folder icon'></i>", "newfolder", true);
    5795. 

  5795.             addContextMenuItem($("#subcontextmenu"), lcontex('Shortcut'), "<i class='external icon'></i>", "newshortcut", true);
    5796. 

  5796.             addContextMenuItem($("#subcontextmenu"), lcontex('Upload'), "<i class='cloud upload icon'></i>", "upload", true);
    5797. 

  5797.             addContextMenuSeperator($("#subcontextmenu"));
    5798. 

  5798.             requestCSRFToken(function(token){
    5799. 

  5799.                 $.ajax({
    5800. 

  5800.                     url: "system/file_system/newItem",
    5801. 

  5801.                     data: {csrft: token},
    5802. 

  5802.                     success: function(data){
    5803. 

  5803.                         for (var i = 0; i < data.length; i++) {
    5804. 

  5804.                             var thisNewFile = data[i];
    5805. 

  5805.                             var icon = ao_module_utils.getIconFromExt(thisNewFile.Ext);
    5806. 

  5806.                             addContextMenuItem($("#subcontextmenu"), `<i class="${icon} icon" ext="${thisNewFile.Ext}"></i> ${thisNewFile.Desc}`, undefined, "newitem");
    5807. 

  5807.                         }
    5808. 

  5808.                         //Show sub-context menu
    5809. 

  5809.                         showSubContextMenu(target);
    5810. 

  5810.                     }
    5811. 

  5811.                 })
    5812. 

  5812.             });
    5813. 

  5813.         }
    5814. 

  5814. 

  5815.         function showSubContextMenu(target) {
    5816. 

  5816.             $("#subcontextmenu").show();
    5817. 

  5817.             var targetLeft = $("#contextmenu").offset().left + $("#contextmenu").width() + 2;
    5818. 

  5818.             var targetTop = $(target).offset().top - 1;
    5819. 

  5819.             if (targetLeft +  $("#subcontextmenu").width() > window.innerWidth){
    5820. 

  5820.                 //Overflow. Swtich to the left side of the menu
    5821. 

  5821.                 targetLeft = $("#contextmenu").offset().left - $("#subcontextmenu").width() - 2;
    5822. 

  5822.             }
    5823. 

  5823.             $("#subcontextmenu").css({
    5824. 

  5824.                 left: targetLeft,
    5825. 

  5825.                 top: targetTop
    5826. 

  5826.             });
    5827. 

  5827.             
    5828. 

  5828.         }
    5829. 

  5829. 

  5830.         //Create new file item with that filename
    5831. 

  5831.         function newitem(object, event) {
    5832. 

  5832.             var extension = $(object).find("i").attr("ext");
    5833. 

  5833. 

  5834.             //Generate a newfile name
    5835. 

  5835.             var newfn = "NewFile" + "." + extension;
    5836. 

  5836.             var counter = 1;
    5837. 

  5837.             while (desktopFileList.includes(newfn)){
    5838. 

  5838.                 newfn = "NewFile (" + counter + ")." + extension;
    5839. 

  5839.                 counter++;
    5840. 

  5840.             }
    5841. 

  5841. 

  5842.             //Get the location position
    5843. 

  5843.             let closestLocation = findClosestGrid(menuStartLocation[0], menuStartLocation[1], false);
    5844. 

  5844.             let closestGridIndexLocation = closestLocation[1];
    5845. 

  5845. 

  5846.             //Request backend to generate the new file
    5847. 

  5847.             generateCSRFToken(function(token){
    5848. 

  5848.                 $.ajax({
    5849. 

  5849.                     url: "system/file_system/newItem",
    5850. 

  5850.                     data: {type: "file",src: "user:/Desktop/",filename: newfn, csrft: token},
    5851. 

  5851.                     success: function(data){
    5852. 

  5852.                         if (data.error !== undefined){
    5853. 

  5853.                             alert(data.error);
    5854. 

  5854.                         }else{
    5855. 

  5855.                             //Set the icon location
    5856. 

  5856.                             setIconDesktopLocation(newfn, closestGridIndexLocation[0], closestGridIndexLocation[1], function(){
    5857. 

  5857.                                 //Refresh the desktop
    5858. 

  5858.                                 refresh(function(){
    5859. 

  5859.                                     var targetNewFile = getObjectFromGridLocation(closestGridIndexLocation[0], closestGridIndexLocation[1]);
    5860. 

  5860.                                     console.log("Renaming ", targetNewFile);
    5861. 

  5861.                                     enableRenameOnLaunchIconObject(targetNewFile);
    5862. 

  5862.                                 });
    5863. 

  5863.                             });
    5864. 

  5864.                         }
    5865. 

  5865.                     }
    5866. 

  5866.                 });
    5867. 

  5867.             });
    5868. 

  5868.             hideAllContextMenus();
    5869. 

  5869.         }
    5870. 

  5870. 

  5871. 

  5872.         document.getElementById("volumebar").parentNode.addEventListener("touchstart", function(e){
    5873. 

  5873.             updateVolume( document.getElementById("volumebar").parentNode, e);
    5874. 

  5874.         });
    5875. 

  5875. 

  5876.         document.getElementById("brightnessbar").parentNode.addEventListener("touchstart", function(e){
    5877. 

  5877.             updateBrightness( document.getElementById("brightnessbar").parentNode, e);
    5878. 

  5878.         });
    5879. 

  5879. 

  5880.         
    5881. 

  5881. 

  5882.         function getCoordinateFromEvent(e){
    5883. 

  5883.             var x = -1;
    5884. 

  5884.             var y = -1;
    5885. 

  5885.             if (e.originalEvent == undefined){
    5886. 

  5886.                 e.originalEvent = e;
    5887. 

  5887.             }
    5888. 

  5888.             if(e.type == 'touchstart' || e.type == 'touchmove' || e.type == 'touchend' || e.type == 'touchcancel'){
    5889. 

  5889.                 var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
    5890. 

  5890.                 x = touch.pageX;
    5891. 

  5891.                 y = touch.pageY;
    5892. 

  5892.             } else if (e.type == 'mousedown' || e.type == 'mouseup' || e.type == 'mousemove' || e.type == 'mouseover'|| e.type=='mouseout' || e.type=='mouseenter' || e.type=='mouseleave') {
    5893. 

  5893.                 x = e.clientX;
    5894. 

  5894.                 y = e.clientY;
    5895. 

  5895.             }else{
    5896. 

  5896.                 x = e.clientX;
    5897. 

  5897.                 y = e.clientY;
    5898. 

  5898.             }
    5899. 

  5899.             return [x,y];
    5900. 

  5900.         }
    5901. 

  5901. 

  5902.         function updateVolume(object, event){
    5903. 

  5903.             var width = $(object).width();
    5904. 

  5904.             var left = $(object).offset().left;
    5905. 

  5905.             var clickPosition = getCoordinateFromEvent(event)[0];
    5906. 

  5906.             var clickRel = clickPosition - left;
    5907. 

  5907.             var percentage = clickRel / width * 100;
    5908. 

  5908.             if (percentage < 0){
    5909. 

  5909.                 percentage = 0;
    5910. 

  5910.             }else if (percentage > 100){
    5911. 

  5911.                 percentage = 100;
    5912. 

  5912.             }
    5913. 

  5913.             //Update the global volume
    5914. 

  5914.             $(object).find(".bar").css("width",percentage + "%");
    5915. 

  5915.             localStorage.setItem("global_volume", clickRel / width);
    5916. 

  5916.         }
    5917. 

  5917. 

  5918.         //Update screen brightness, for those who use ArozOS on their TV
    5919. 

  5919.         function updateBrightness(object, event){
    5920. 

  5920.             var width = $(object).width();
    5921. 

  5921.             var left = $(object).offset().left;
    5922. 

  5922.             var clickPosition = getCoordinateFromEvent(event)[0];
    5923. 

  5923.             var clickRel = clickPosition - left;
    5924. 

  5924.             var percentage = clickRel / width * 100;
    5925. 

  5925.             if (percentage < 0){
    5926. 

  5926.                 percentage = 0;
    5927. 

  5927.             }else if (percentage > 100){
    5928. 

  5928.                 percentage = 100;
    5929. 

  5929.             }
    5930. 

  5930. 

  5931.             //Min is 3%
    5932. 

  5932.             if (percentage < 3){
    5933. 

  5933.                 percentage = 3;
    5934. 

  5934.             }
    5935. 

  5935. 

  5936.             //Set body brightness filter
    5937. 

  5937.             $("body").css("filter", `brightness(${percentage}%)`);
    5938. 

  5938. 

  5939.             //Save changes to localStorage
    5940. 

  5940.             currentBrightness = percentage;
    5941. 

  5941.             $(object).find(".bar").css("width",percentage + "%");
    5942. 

  5942.             localStorage.setItem("brightness", clickRel / width);
    5943. 

  5943.         }
    5944. 

  5944. 

  5945. 

  5946.         function refresh(callback = undefined, noflash=false) {
    5947. 

  5947.             //Refresh desktop contents
    5948. 

  5948.             let launchOption = {};
    5949. 

  5949.             if (noflash){
    5950. 

  5950.                 launchOption = {
    5951. 

  5951.                     noflash: true
    5952. 

  5952.                 };
    5953. 

  5953.             }
    5954. 

  5954. 

  5955.             if (callback == undefined) {
    5956. 

  5956.                 initDesktopFiles(launchOption, function(){
    5957. 

  5957.                     startThumbnailLoader();
    5958. 

  5958.                     attachDescriptionBoxEvents();
    5959. 

  5959.                 });
    5960. 

  5960.             } else {
    5961. 

  5961.                 initDesktopFiles(launchOption, function(){
    5962. 

  5962.                     startThumbnailLoader();
    5963. 

  5963.                     attachDescriptionBoxEvents();
    5964. 

  5964.                     callback()
    5965. 

  5965.                 });
    5966. 

  5966.             }
    5967. 

  5967. 

  5968.             hideAllContextMenus();
    5969. 

  5969.         }
    5970. 

  5970. 

  5971.         function startThumbnailLoader(){
    5972. 

  5972.             let path = "user:/Desktop";
    5973. 

  5973.             let protocol = "wss://";
    5974. 

  5974.             if (location.protocol !== 'https:') {
    5975. 

  5975.                 protocol = "ws://";
    5976. 

  5976.             }
    5977. 

  5977. 

  5978.             var port = window.location.port;
    5979. 

  5979.             if (window.location.port == ""){
    5980. 

  5980.                 if (location.protocol !== 'https:') {
    5981. 

  5981.                     port = "80";
    5982. 

  5982.                 }else{
    5983. 

  5983.                     port = "443";
    5984. 

  5984.                 }
    5985. 

  5985.             }
    5986. 

  5986. 

  5987.             thumbRenderWebSocket = new WebSocket(protocol + window.location.hostname + ":" + port + "/system/file_system/handleCacheRender?folder=" + path);
    5988. 

  5988. 

  5989.             thumbRenderWebSocket.onopen = function(e) {
    5990. 

  5990. 

  5991.             };
    5992. 

  5992. 

  5993.             thumbRenderWebSocket.onmessage = function(event) {
    5994. 

  5994.                 //Find the correct file in the current directory and place its image
    5995. 

  5995.                 let thumbData = JSON.parse(event.data);
    5996. 

  5996.                 $(".launchIcon").each(function(){
    5997. 

  5997.                     if (thumbData[1].length > 0){
    5998. 

  5998.                         if ($(this).attr("filename") == thumbData[0]){
    5999. 

  5999.                             let imageContainer = $(this).find(".launchIconImage");
    6000. 

  6000.                             imageContainer.attr("src","data:image/jpg;base64," + thumbData[1]);
    6001. 

  6001.                             imageContainer.css("padding", "0.6em");
    6002. 

  6002. 

  6003.                             //Load the application icon on this file
    6004. 

  6004.                             let filedata = $(this).attr("filedata");
    6005. 

  6005.                             if (filedata == undefined){
    6006. 

  6006.                                 return;
    6007. 

  6007.                             }
    6008. 

  6008.                             filedata = JSON.parse(decodeURIComponent(filedata));
    6009. 

  6009.                             $.ajax({
    6010. 

  6010.                                 url: "system/modules/getDefault",
    6011. 

  6011.                                 data: {opr: "launch", ext: filedata.Ext},
    6012. 

  6012.                                 method: "GET",
    6013. 

  6013.                                 success: function(data){
    6014. 

  6014.                                     if (data.error == undefined){
    6015. 

  6015.                                         let iconSize = 20;
    6016. 

  6016.                                         let topOffset = $(imageContainer).height() - iconSize/2 + 2;
    6017. 

  6017.                                         $(imageContainer).parent().append(`<img src="${data.IconPath}" style="position: absolute; right: 0px; top: ${topOffset}px; width: ${iconSize}px; height: ${iconSize}px; pointer-events:none;"></img>`);
    6018. 

  6018.                                     }
    6019. 

  6019.                                 }
    6020. 

  6020.                             });
    6021. 

  6021.                         }
    6022. 

  6022.                     }
    6023. 

  6023.                 });
    6024. 

  6024.             };
    6025. 

  6025. 

  6026.             thumbRenderWebSocket.onclose = function(event) {
    6027. 

  6027.                 //Transfer ended
    6028. 

  6028.             };
    6029. 

  6029. 

  6030.             thumbRenderWebSocket.onerror = function(error) {
    6031. 

  6031.                 console.log("Cannot connect to WebSocket cache renderer. Falling back to AJAX request");
    6032. 

  6032.                 startFallbackThumbnailLoader();
    6033. 

  6033.             };
    6034. 

  6034.         }
    6035. 

  6035. 

  6036.         function startFallbackThumbnailLoader(){
    6037. 

  6037.                 $(".launchIcon").each(function(){
    6038. 

  6038.                     let fd = JSON.parse(decodeURIComponent($(this).attr("filedata"))) 
    6039. 

  6039.                     let filepath = fd.Filepath;
    6040. 

  6040.                     let targetDOM = $(this);
    6041. 

  6041.                     $.ajax({
    6042. 

  6042.                         url: "system/file_system/loadThumbnail",
    6043. 

  6043.                         data: {vpath: filepath},
    6044. 

  6044.                         success: function(data){
    6045. 

  6045.                             if (data.error == undefined && data != undefined && data != ""){
    6046. 

  6046.                                 let imageContainer = $(targetDOM).find(".launchIconImage");
    6047. 

  6047.                                 imageContainer.attr("src","data:image/jpg;base64," + data);
    6048. 

  6048.                                 imageContainer.css("padding", "0.6em"); 
    6049. 

  6049.                                 
    6050. 

  6050.                                 $.ajax({
    6051. 

  6051.                                     url: "system/modules/getDefault",
    6052. 

  6052.                                     data: {opr: "launch", ext: fd.Ext},
    6053. 

  6053.                                     method: "GET",
    6054. 

  6054.                                     success: function(data){
    6055. 

  6055.                                         if (data.error == undefined){
    6056. 

  6056.                                             let iconSize = 20;
    6057. 

  6057.                                             let topOffset = $(imageContainer).height() - iconSize/2 + 2;
    6058. 

  6058.                                             $(imageContainer).parent().append(`<img src="${data.IconPath}" style="position: absolute; right: 0px; top: ${topOffset}px; width: ${iconSize}px; height: ${iconSize}px; pointer-events:none;"></img>`);
    6059. 

  6059.                                         }
    6060. 

  6060.                                     }
    6061. 

  6061.                                 });
    6062. 

  6062.                             }      
    6063. 

  6063.                         }
    6064. 

  6064.                     })
    6065. 

  6065.                 });
    6066. 

  6066.             }
    6067. 

  6067. 

  6068. 

  6069.         function openfm() {
    6070. 

  6070.             //Open file explorer on desktop
    6071. 

  6071.             newFloatWindow({
    6072. 

  6072.                 url: "SystemAO/file_system/file_explorer.html#" + encodeURIComponent("user:/Desktop"),
    6073. 

  6073.                 appicon: "SystemAO/file_system/img/small_icon.png",
    6074. 

  6074.                 width: 1080,
    6075. 

  6075.                 height: 580,
    6076. 

  6076.                 title: "File Manager"
    6077. 

  6077.             });
    6078. 

  6078.             hideAllContextMenus();
    6079. 

  6079.         }
    6080. 

  6080. 

  6081.         /*
    6082. 

  6082.             Notification and Notification bar related functions
    6083. 

  6083. 

  6084.             Usage:
    6085. 

  6085.             title -> The title of the notification
    6086. 

  6086.             content -> The content of the notification
    6087. 

  6087.             icon (optional) -> The icon of the notification
    6088. 

  6088.             windowOpenOption (optional) -> The window opening option for user onclick redirection
    6089. 

  6089.         */
    6090. 

  6090. 

  6091.         function sendNotification(title, content, icon="info circle", windowOpenOption=null){
    6092. 

  6092.             if (content.length > 100){
    6093. 

  6093.                 shortenContent = content.substring(0,100) + "...";
    6094. 

  6094.             }else{
    6095. 

  6095.                 shortenContent = content;
    6096. 

  6096.             }
    6097. 

  6097.             onClickOpenWindowOption = encodeURIComponent(JSON.parse(windowOpenOption));
    6098. 

  6098.             $("#notificationlist").append(` <div class="notification object" originalcontent="${content}" redirect="${onClickOpenWindowOption}" onclick="openNotification(this);">
    6099. 

  6099.                     <p class="title"><i class="${icon} icon"></i> ${title}</p>
    6100. 

  6100.                     <p class="notifycontent">${shortenContent}</p>
    6101. 

  6101.                     <div class="closebtn" onclick="event.stopImmediatePropagation(); closeThisNotification(this);"><i class="remove icon"></i></div>
    6102. 

  6102.                     <div class="ui divider"></div>
    6103. 

  6103.                 </div>`);
    6104. 

  6104.             $(".nonotification").hide();
    6105. 

  6105.             
    6106. 

  6106.         }
    6107. 

  6107. 

  6108.         function openNotification(obj){
    6109. 

  6109.             newWindowOpeningOption = JSON.parse(decodeURIComponent($(obj).attr("redirect")));
    6110. 

  6110.             if (newWindowOpeningOption == null){
    6111. 

  6111.                 //Ignore
    6112. 

  6112. 

  6113.             }else{
    6114. 

  6114.                 //Start a floatWindow to the given target
    6115. 

  6115.                 newFloatWindow(newWindowOpeningOption);
    6116. 

  6116.             }
    6117. 

  6117. 

  6118.             //Clear the notiication
    6119. 

  6119.             closeThisNotification($(obj).find(".closebtn"));
    6120. 

  6120. 

  6121.         }
    6122. 

  6122. 

  6123.         function closeThisNotification(obj){
    6124. 

  6124.             $(obj).parent().slideUp("fast",function(data){
    6125. 

  6125.                 $(this).remove();
    6126. 

  6126.                 if ($(".notification.object").length == 0){
    6127. 

  6127.                     $(".nonotification").show();
    6128. 

  6128.                 }
    6129. 

  6129.             });
    6130. 

  6130. 

  6131. 

  6132.         }
    6133. 

  6133. 

  6134.         function clearAllNotification(){
    6135. 

  6135.             $(".notification.object").slideUp('fast',function(data){
    6136. 

  6136.                 $(this).remove();
    6137. 

  6137.                 $(".nonotification").show();
    6138. 

  6138.             });
    6139. 

  6139.         }
    6140. 

  6140. 

  6141.         function hideAllContextMenus() {
    6142. 

  6142.             $("#subcontextmenu").hide();
    6143. 

  6143.             $("#contextmenu").hide()
    6144. 

  6144.             $("#quickAccessPanel").slideUp("fast");
    6145. 

  6145.         }
    6146. 

  6146. 

  6147.         function restart(){
    6148. 

  6148.             if (!hardwareman){
    6149. 

  6149.                 return
    6150. 

  6150.             }
    6151. 

  6151.             var apiObject = {
    6152. 

  6152.                 api: "/system/power/restart",
    6153. 

  6153.                 data: {},
    6154. 

  6154.                 title: applocale.getString("power/restart/text", "Password Required"),
    6155. 

  6155.                 desc: applocale.getString("power/restart/instruction", "for restarting the ArozOS Host"),
    6156. 

  6156.                 thisuser: true, //This username as default, set to false for entering other user
    6157. 

  6157.                 method: "GET"
    6158. 

  6158.             }
    6159. 

  6159. 

  6160.             apiObject = encodeURIComponent(JSON.stringify(apiObject));
    6161. 

  6161.             newFloatWindow({
    6162. 

  6162.                 url: "SystemAO/security/authreq.html#" + apiObject,
    6163. 

  6163.                 width: 480,
    6164. 

  6164.                 height: 300,
    6165. 

  6165.                 appicon: "SystemAO/security/img/lock.svg",
    6166. 

  6166.                 title: applocale.getString("power/restart/title", "Restart - Authentication Required"),
    6167. 

  6167.                 parent: ao_module_windowID,
    6168. 

  6168.                 callback: "handleRestartCallback"
    6169. 

  6169.             });
    6170. 

  6170.         }
    6171. 

  6171. 

  6172.         function shutdown(){
    6173. 

  6173.             if (!hardwareman){
    6174. 

  6174.                 return
    6175. 

  6175.             }
    6176. 

  6176. 

  6177.             var apiObject = {
    6178. 

  6178.                 api: "system/power/shutdown",
    6179. 

  6179.                 data: {},
    6180. 

  6180.                 title: `<i class='red exclamation triangle icon'></i> ${applocale.getString("power/shutdown/text", "Shutdown Host")} <i class='red exclamation triangle icon'></i>`,
    6181. 

  6181.                 desc: applocale.getString("power/shutdown/instruction", "Please enter your password to confirm operation."),
    6182. 

  6182.                 thisuser: true, //This username as default, set to false for entering other user
    6183. 

  6183.                 method: "GET",
    6184. 

  6184.                 success: "SystemAO/boot/shutdown.html" //Success redirection
    6185. 

  6185.             }
    6186. 

  6186.             apiObject = encodeURIComponent(JSON.stringify(apiObject));
    6187. 

  6187. 

  6188.             newFloatWindow({
    6189. 

  6189.                 url: "SystemAO/security/authreq.html#" + apiObject,
    6190. 

  6190.                 width: 480,
    6191. 

  6191.                 height: 300,
    6192. 

  6192.                 appicon: "SystemAO/security/img/lock.svg",
    6193. 

  6193.                 title: applocale.getString("power/shutdown/title", "Shutdown - Authentication Required"),
    6194. 

  6194.                 parent: ao_module_windowID,
    6195. 

  6195.                 callback: "handleShutdownCallback"
    6196. 

  6196.             });
    6197. 

  6197.            
    6198. 

  6198.         }
    6199. 

  6199. 

  6200.         //Check if this server is a low memory one
    6201. 

  6201.         function initUploadMode(){
    6202. 

  6202.             $.ajax({
    6203. 

  6203.                 url: "system/info/getRAMinfo",
    6204. 

  6204.                 success: function(data){
    6205. 

  6205.                     if (data.error !== undefined){
    6206. 

  6206.                         //Permission denied or other reasons that cannot access harwdare info. Use default mode
    6207. 

  6207.                         lowMemoryMode = true;
    6208. 

  6208.                     }else{
    6209. 

  6209.                         //Check if ramsize > 1.8 GB (2GB). If yes, switch to large memory upload mode
    6210. 

  6210.                         var memsize = JSON.parse(data);
    6211. 

  6211.                         if (parseFloat(memsize)/ 1024 / 1024 / 1024 >= 3.8){
    6212. 

  6212.                             console.log("%c[Desktop] Setting upload mode to large memory mode", 'color: #2ba16e');
    6213. 

  6213.                             lowMemoryMode = false;
    6214. 

  6214.                         }
    6215. 

  6215.                     }
    6216. 

  6216.                 },
    6217. 

  6217.                 error: function(){
    6218. 

  6218.                     //Hardware mode disabled. Always use low memory upload mode instead
    6219. 

  6219.                     lowMemoryMode = true;
    6220. 

  6220.                 }
    6221. 

  6221.             });
    6222. 

  6222.         }
    6223. 

  6223. 

  6224.         //Generate a loading icon for this upload task
    6225. 

  6225.         function generateUploadingIcon(filename, position){
    6226. 

  6226.             //Get position for appending
    6227. 

  6227.             var onScreenLocation = getLocationFromGridIndex(position[0], position[1]);
    6228. 

  6228.             //Append to UI
    6229. 

  6229.             var uploadIconUUID = Date.now();
    6230. 

  6230.             $("#iconwrapper").append(`<div href="javascript:void(0);" class="${uploadIconUUID} launchIcon" type="dummy" filename="${filename}" filepath="user:/Desktop/${filename}"  style="width:70px; height:106px;left:${onScreenLocation[0]}px; top:${onScreenLocation[1]}px;">
    6231. 

  6231.                 <span class="launchIconWrapper">
    6232. 

  6232.                     <img class="launchIconImage medium" src="img/desktop/files_icon/${desktopIconPack}/file upload.png" draggable="false">
    6233. 

  6233.                     <p class="launchIconText ${desktopIconSize}" >${applocale.getString( "upload/message/uploading", "Uploading")}</p>
    6234. 

  6234.                     <div class="ui tiny primary progress" style="margin-top: -4px;">
    6235. 

  6235.                         <div class="bar" style="min-width: 0px !important; width: 0%;"></div>
    6236. 

  6236.                     </div>
    6237. 

  6237.                 </span>
    6238. 

  6238.             </div>`);
    6239. 

  6239.             return uploadIconUUID;
    6240. 

  6240.         }
    6241. 

  6241. 

  6242.         function upload(){
    6243. 

  6243.             var input = document.createElement('input');
    6244. 

  6244.             input.type = 'file';
    6245. 

  6245.             input.multiple = true;
    6246. 

  6246.             input.onchange = e => { 
    6247. 

  6247.                 var files = e.target.files; 
    6248. 

  6248.                 for (var i = 0; i < files.length; i++){
    6249. 

  6249.                     uploadFile(files[i], function(){
    6250. 

  6250.                         refresh(undefined, true);
    6251. 

  6251.                     });
    6252. 

  6252.                 }
    6253. 

  6253.             }
    6254. 

  6254.             input.click();
    6255. 

  6255.             hideAllContextMenus();
    6256. 

  6256.         }
    6257. 

  6257. 

  6258.         function uploadFile(file, callback=undefined, uploadingIconUUID = undefined) {
    6259. 

  6259.             if (lowMemoryMode){
    6260. 

  6260.                 /*
    6261. 

  6261.                     Low Memory Upload Mode
    6262. 

  6262.                 */
    6263. 

  6263.                 var filename = encodeURIComponent(file.name);
    6264. 

  6264.                 var filesize = file.size;
    6265. 

  6265. 

  6266.                 //Open the websocket
    6267. 

  6267.                 let path = "user:/Desktop";
    6268. 

  6268.                 let protocol = "wss://";
    6269. 

  6269.                 if (location.protocol !== 'https:') {
    6270. 

  6270.                     protocol = "ws://";
    6271. 

  6271.                 }
    6272. 

  6272. 

  6273.                 var port = window.location.port;
    6274. 

  6274.                 if (window.location.port == ""){
    6275. 

  6275.                     if (location.protocol !== 'https:') {
    6276. 

  6276.                         port = "80";
    6277. 

  6277.                     }else{
    6278. 

  6278.                         port = "443";
    6279. 

  6279.                     }
    6280. 

  6280.                 }
    6281. 

  6281. 

  6282.                 let uploadDir = "user:/Desktop";
    6283. 

  6283.     
    6284. 

  6284.                 //Fixing Firefox path issues on or above FF48.0
    6285. 

  6285.                 if (isFirefox && file.webkitRelativePath != ""){
    6286. 

  6286.                     //Use the webkitRelativePath instead of the name, this is a folder upload
    6287. 

  6287.                     let pathinfo = file.webkitRelativePath.split("/");
    6288. 

  6288.                     pathinfo.pop();
    6289. 

  6289.                     let subpath = pathinfo.join("/");
    6290. 

  6290.                     uploadDir = uploadDir + subpath;
    6291. 

  6291.                 }
    6292. 

  6292. 

  6293.                 let socket = new WebSocket(protocol + window.location.hostname + ":" + port + "/system/file_system/lowmemUpload?filename=" + filename + "&path=" + uploadDir);
    6294. 

  6294.                 let currentSendingIndex = 0;
    6295. 

  6295.                 let chunks = Math.ceil(file.size/uploadFileChunkSize,uploadFileChunkSize);
    6296. 

  6296.                 
    6297. 

  6297.                 //Define a function for sending a particular chunk
    6298. 

  6298.                 function sendChunk(id, uploadingIconUUID){
    6299. 

  6299.                     let offsetStart = id*uploadFileChunkSize;
    6300. 

  6300.                     let offsetEnd = id*uploadFileChunkSize + uploadFileChunkSize;
    6301. 

  6301.                     let thisblob = file.slice(offsetStart,offsetEnd);
    6302. 

  6302.                     socket.send(thisblob);
    6303. 

  6303.                     //console.log(id + "/" + chunks);
    6304. 

  6304. 

  6305.                     //Update progress to first percentage
    6306. 

  6306.                     let progress = id / (chunks-1) * 100.0;
    6307. 

  6307.                     if (progress > 100){
    6308. 

  6308.                         progress = 100;
    6309. 

  6309.                     }
    6310. 

  6310. 

  6311. 

  6312.                     if (uploadingIconUUID != undefined){
    6313. 

  6313.                         //Update the progress on the object
    6314. 

  6314.                         $("." + uploadingIconUUID + ".launchIcon").find(".bar").css("width", progress + "%");
    6315. 

  6315.                         if (progress == 100){
    6316. 

  6316.                             $("." + uploadingIconUUID + ".launchIcon").find(".progress").addClass("indeterminate");
    6317. 

  6317.                         }
    6318. 

  6318.                     }
    6319. 

  6319.                  
    6320. 

  6320.                 }
    6321. 

  6321. 

  6322.                 //Start sending
    6323. 

  6323.                 socket.onopen = function(e) {
    6324. 

  6324.                     if (filesize < uploadFileChunkSize){
    6325. 

  6325.                         //This file is smaller than chunk size, set it to somwhere within 10% - 20% so it doesn't look like it is stuck
    6326. 

  6326.                         $("." + uploadingIconUUID + ".launchIcon").find(".bar").css("width", "15%");
    6327. 

  6327.                     }
    6328. 

  6328.                     
    6329. 

  6329.                     //Send the first chunk
    6330. 

  6330.                     sendChunk(0, uploadingIconUUID);
    6331. 

  6331.                     currentSendingIndex++;
    6332. 

  6332.                 };
    6333. 

  6333. 

  6334.                 socket.onmessage = function(event) {
    6335. 

  6335.                     //Append to the send index
    6336. 

  6336.                     var incomingValue = event.data;
    6337. 

  6337. 

  6338.                     if (incomingValue == "next"){
    6339. 

  6339.                         if (currentSendingIndex == chunks + 1){
    6340. 

  6340.                             //Already finished
    6341. 

  6341.                             socket.send("done");
    6342. 

  6342.                         }else{
    6343. 

  6343.                             //Send next chunk
    6344. 

  6344.                             sendChunk(currentSendingIndex, uploadingIconUUID);
    6345. 

  6345.                             currentSendingIndex++;
    6346. 

  6346.                         }
    6347. 

  6347.                       
    6348. 

  6348.                     }else if (incomingValue == "OK"){
    6349. 

  6349.                         //Merge completed
    6350. 

  6350.                         
    6351. 

  6351.                     }else{
    6352. 

  6352.                         //Try to parse it as JSON
    6353. 

  6353.                         try{
    6354. 

  6354.                             var resp = JSON.parse(incomingValue.split('\\' + '"').join("\""));
    6355. 

  6355.                             console.log(resp);
    6356. 

  6356.                             if (resp.error !== undefined){
    6357. 

  6357.                                 //This is an error message
    6358. 

  6358.                                 sendNotification("Upload Failed", resp.error, "remove")
    6359. 

  6359. 

  6360.                                 //Update the progress bar to error
    6361. 

  6361.                                 $("." + uploadingIconUUID + ".launchIcon").find(".progress").removeClass("primary").addClass("error");
    6362. 

  6362.                                 $("." + uploadingIconUUID + ".launchIcon").find(".launchIconText").text(applocale.getString("upload/message/failed", "Failed!"));
    6363. 

  6363.                                 setTimeout(function(){
    6364. 

  6364.                                     $("." + uploadingIconUUID + ".launchIcon").fadeOut(3000,function() { $(this).remove(); });
    6365. 

  6365.                                 }, 2000);
    6366. 

  6366.                             }
    6367. 

  6367.                         }catch(ex){
    6368. 

  6368.                             //Something else
    6369. 

  6369.                             console.log(incomingValue);
    6370. 

  6370.                             console.log(ex);
    6371. 

  6371.                         }
    6372. 

  6372.                     }
    6373. 

  6373. 

  6374.                 };
    6375. 

  6375. 

  6376.                 socket.onclose = function(event) {
    6377. 

  6377.                     $("." + uploadingIconUUID).remove();
    6378. 

  6378.                     if (callback != undefined){
    6379. 

  6379.                         callback();
    6380. 

  6380.                     }
    6381. 

  6381.                 };
    6382. 

  6382. 

  6383.                 socket.onerror = function(error) {
    6384. 

  6384.                     console.log(error.message);
    6385. 

  6385.                     console.log("[Desktop] Unable to open WebSocket connection. Fall back to FORM POST upload mode. (Check your nginx / reverse proxy settings!!!)")
    6386. 

  6386.                     //Try to fallback to FORM POST upload mode
    6387. 

  6387.                     lowMemoryMode = false;
    6388. 

  6388.                     uploadFile(thisFile, callback)
    6389. 

  6389.                     return
    6390. 

  6390.                 };
    6391. 

  6391.             }else{
    6392. 

  6392.                 let url = 'system/file_system/upload'
    6393. 

  6393.                 let uploadCurrentPath = "user:/Desktop/";
    6394. 

  6394.                 let formData = new FormData();
    6395. 

  6395.                 let xhr = new XMLHttpRequest();
    6396. 

  6396.                 formData.append('file', file);
    6397. 

  6397.                 formData.append('path', uploadCurrentPath);
    6398. 

  6398. 

  6399.                 xhr.open('POST', url, true)
    6400. 

  6400.                 xhr.upload.addEventListener("progress", function(e) {
    6401. 

  6401.                     console.log((e.loaded * 100.0 / e.total) || 100)
    6402. 

  6402.                     var progress = (e.loaded * 100.0 / e.total) || 100;
    6403. 

  6403.                     if (uploadingIconUUID != undefined){
    6404. 

  6404.                         //Update the progress on the object
    6405. 

  6405.                         $("." + uploadingIconUUID + ".launchIcon").find(".bar").css("width", progress + "%");
    6406. 

  6406.                         if (progress == 100){
    6407. 

  6407.                             $("." + uploadingIconUUID + ".launchIcon").find(".progress").addClass("indeterminate");
    6408. 

  6408.                         }
    6409. 

  6409.                     }
    6410. 

  6410.                 })
    6411. 

  6411. 

  6412.                 xhr.addEventListener('readystatechange', function(e) {
    6413. 

  6413.                     if (xhr.readyState == 4 && xhr.status == 200) {
    6414. 

  6414.                         //Upload Succ
    6415. 

  6415.                         $("." + uploadingIconUUID).remove();
    6416. 

  6416.                         if (callback !== undefined){
    6417. 

  6417.                             callback(e.target.response);
    6418. 

  6418.                         }
    6419. 

  6419.                     }
    6420. 

  6420.                     else if (xhr.readyState == 4 && xhr.status != 200) {
    6421. 

  6421.                         console.log("Upload failed :" + xhr.status);
    6422. 

  6422.                         //Set upload progress bar to error
    6423. 

  6423.                         $("." + uploadingIconUUID + ".launchIcon").find(".progress").removeClass("primary").addClass("error");
    6424. 

  6424.                         $("." + uploadingIconUUID + ".launchIcon").find(".launchIconText").text(applocale.getString("upload/message/failed", "Failed!"));
    6425. 

  6425.                         setTimeout(function(){
    6426. 

  6426.                             $("." + uploadingIconUUID + ".launchIcon").fadeOut(3000,function() { $(this).remove(); });
    6427. 

  6427.                         }, 2000);
    6428. 

  6428.                     }
    6429. 

  6429.                 })
    6430. 

  6430.                 xhr.send(formData);
    6431. 

  6431.             }
    6432. 

  6432.         }
    6433. 

  6433. 

  6434.         function setStorage(key, value, callback = undefined) {
    6435. 

  6435.             $.ajax({
    6436. 

  6436.                 url: "system/desktop/preference", 
    6437. 

  6437.                 data: {preference: key, value: value},
    6438. 

  6438.                 method: "POST",
    6439. 

  6439.                 success: function(data) {
    6440. 

  6440.                     if (data.error !== undefined) {
    6441. 

  6441.                         console.log(data.error);
    6442. 

  6442.                     } else {
    6443. 

  6443.                         if (callback !== undefined) {
    6444. 

  6444.                             callback();
    6445. 

  6445.                         }
    6446. 

  6446. 

  6447.                     }
    6448. 

  6448.                 }
    6449. 

  6449.             });
    6450. 

  6450.         }
    6451. 

  6451. 

  6452.         function getStorage(key, callback) {
    6453. 

  6453.             $.ajax({
    6454. 

  6454.                 url: "system/desktop/preference",
    6455. 

  6455.                 data: {preference: key},
    6456. 

  6456.                 success: callback
    6457. 

  6457.             });
    6458. 

  6458.         }
    6459. 

  6459. 

  6460.         function showSystemSettings(){
    6461. 

  6461.             var hasAccessToSetting = false;
    6462. 

  6462.             moduleInstalled.forEach(thismod => {
    6463. 

  6463.                 if (thismod.Name == "System Setting"){
    6464. 

  6464.                     openModule("System Setting");
    6465. 

  6465.                 }
    6466. 

  6466.             })
    6467. 

  6467.         }
    6468. 

  6468. 

  6469.         function initTheme(targetTheme=undefined){
    6470. 

  6470.             if (targetTheme == undefined){
    6471. 

  6471.                 $.get("system/file_system/preference?key=file_explorer/theme", function(data){
    6472. 

  6472.                     if (data == "darkTheme"){
    6473. 

  6473.                         setDarkTheme();
    6474. 

  6474.                     }
    6475. 

  6475.                 });
    6476. 

  6476.             }else{
    6477. 

  6477.                 //Manual override mode
    6478. 

  6478.                 if (targetTheme == "darkTheme"){
    6479. 

  6479.                     setDarkTheme();
    6480. 

  6480.                 }else if (targetTheme == "whiteTheme"){
    6481. 

  6481.                     setWhiteTheme();
    6482. 

  6482.                 }
    6483. 

  6483.             }
    6484. 

  6484.           
    6485. 

  6485.         }
    6486. 

  6486. 

  6487.         function setFloatWindowTheme(fwid, theme="dark"){
    6488. 

  6488.             var targetFW = getFloatWindowByID(fwid);
    6489. 

  6489.             if (theme == "dark"){
    6490. 

  6490.                 $(targetFW).removeClass("white");
    6491. 

  6491.             }else if (theme == "white"){
    6492. 

  6492.                 $(targetFW).addClass("white");
    6493. 

  6493.             }
    6494. 

  6494.         }
    6495. 

  6495. 

  6496.         function checkFileSystemAccess(){
    6497. 

  6497.             var allowReadWrite = false;
    6498. 

  6498.             moduleInstalled.forEach(thisModule => {
    6499. 

  6499.                 if (thisModule.Name == "File Manager"){
    6500. 

  6500.                     //This user has read write access to file system
    6501. 

  6501.                     allowReadWrite = true;
    6502. 

  6502.                 }
    6503. 

  6503.             });
    6504. 

  6504. 

  6505.             if (!allowReadWrite){
    6506. 

  6506.                 sendNotification(applocale.getString("error/connlost/readonly", "READ ONLY Account"), applocale.getString("error/connlost/readonl/infoy", "This account is read only. You cannot perform any file operations on this desktop."));
    6507. 

  6507.             }
    6508. 

  6508.         }
    6509. 

  6509. 

  6510.         function setDarkTheme(){
    6511. 

  6511.             $("#listMenu").addClass("darkTheme");
    6512. 

  6512.             $("#powerIcon").attr("src","img/system/power-white.svg");
    6513. 

  6513.             $("#quickAccessPanel").addClass("darkTheme");
    6514. 

  6514.             $("#quickAccessPanel").find(".button").addClass("inverted");
    6515. 

  6515.             $("#searchBar").addClass("darkTheme");
    6516. 

  6516.             $("#searchBar").parent().find("i").addClass("darkTheme");
    6517. 

  6517.             $("#usergroups").css("color", "white");
    6518. 

  6518.         }
    6519. 

  6519. 

  6520.         function setWhiteTheme(){
    6521. 

  6521.             $("#listMenu").removeClass("darkTheme");
    6522. 

  6522.             $("#powerIcon").attr("src","img/system/power.svg");
    6523. 

  6523.             $("#quickAccessPanel").removeClass("darkTheme");
    6524. 

  6524.             $("#quickAccessPanel").find(".button").removeClass("inverted");
    6525. 

  6525.             $("#searchBar").removeClass("darkTheme");
    6526. 

  6526.             $("#searchBar").parent().find("i").removeClass("darkTheme");
    6527. 

  6527.             $("#usergroups").css("color", "");
    6528. 

  6528.         }
    6529. 

  6529. 

  6530.         function hexToRgbA(hex, transparent=1){
    6531. 

  6531.             var c;
    6532. 

  6532.             if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
    6533. 

  6533.                 c= hex.substring(1).split('');
    6534. 

  6534.                 if(c.length== 3){
    6535. 

  6535.                     c= [c[0], c[0], c[1], c[1], c[2], c[2]];
    6536. 

  6536.                 }
    6537. 

  6537.                 c= '0x'+c.join('');
    6538. 

  6538.                 return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',' + transparent + ')';
    6539. 

  6539.             }
    6540. 

  6540.             throw new Error('Bad Hex');
    6541. 

  6541.         }
    6542. 

  6542. 

  6543.         function setThemeColor(newThemeColor){
    6544. 

  6544.             //Update the global theme color
    6545. 

  6545.             desktopThemeColor = newThemeColor;
    6546. 

  6546. 

  6547.             //Update the related elements
    6548. 

  6548.             $("#statusbar").css("background-color",newThemeColor);
    6549. 

  6549.             $("#navimenu").css("background-color",hexToRgbA(newThemeColor, 0.5));
    6550. 

  6550.             $(".floatWindow .controls").css("background-color",hexToRgbA(newThemeColor, 0.85));
    6551. 

  6551. 

  6552.             //List menu theme color bar
    6553. 

  6553.             $("#listMenu").find(".searchBar").css("border-bottom", "2px solid " + newThemeColor);
    6554. 

  6554.             $("#volumebar").css("background-color", newThemeColor);
    6555. 

  6555.             $("#brightnessbar").css("background-color", newThemeColor);
    6556. 

  6556.             $(".themed.text").css("color", newThemeColor);
    6557. 

  6557. 

  6558.             //Connection lost notification css
    6559. 

  6559.             $("#connectionLost").find(".ui.card").css("background-color", hexToRgbA(newThemeColor, 0.5));
    6560. 

  6560.         }
    6561. 

  6561. 

  6562.         //Load the user define theme color to overwrite the default color if exists
    6563. 

  6563.         function initUserDefinedThemeColor(){
    6564. 

  6564.             $.ajax({
    6565. 

  6565.                 url: "system/file_system/preference",
    6566. 

  6566.                 data: {key: "themecolor"},
    6567. 

  6567.                 success: function(data){
    6568. 

  6568.                     if (data.error == undefined && data != ""){
    6569. 

  6569.                         setThemeColor(data);
    6570. 

  6570.                     }
    6571. 

  6571.                 }
    6572. 

  6572.             });
    6573. 

  6573.         }
    6574. 

  6574. 

  6575.         //Float Window context menu
    6576. 

  6576.         function getFocusedFloatWindowID(){
    6577. 

  6577.             var targetFloatWindowId = "";
    6578. 

  6578.             $(".floatWindow").each(function() {
    6579. 

  6579.                 var thisWindowZIndex = $(this).css("z-index");
    6580. 

  6580.                 if (parseInt(thisWindowZIndex) == 101){
    6581. 

  6581.                     targetFloatWindowId =  $(this).attr("windowid");
    6582. 

  6582.                 }
    6583. 

  6583.             }); 
    6584. 

  6584.             return targetFloatWindowId;
    6585. 

  6585.         }
    6586. 

  6586. 

  6587.         function closeWindowGroup(groupName){
    6588. 

  6588.             $(".floatWindowButton").each(function(){
    6589. 

  6589.                 if ($(this).attr("group") == groupName){
    6590. 

  6590.                     var originalIDlist = JSON.parse(decodeURIComponent($(this).attr('windowIDGroup')));
    6591. 

  6591.                     originalIDlist.forEach(fwid => {
    6592. 

  6592.                         closeFloatWindowViaID(fwid);
    6593. 

  6593.                     });
    6594. 

  6594.                     
    6595. 

  6595.                 }
    6596. 

  6596.             })
    6597. 

  6597.         }
    6598. 

  6598. 

  6599.         function getFocusedFloatWindow(){
    6600. 

  6600.             var focusedFwId = getFocusedFloatWindowID();
    6601. 

  6601.             if (focusedFwId != ""){
    6602. 

  6602.                 var fw = getFloatWindowByID(focusedFwId);
    6603. 

  6603.                 return fw;
    6604. 

  6604.             }else{
    6605. 

  6605.                 return undefined;
    6606. 

  6606.             }
    6607. 

  6607.         }
    6608. 

  6608. 

  6609.         function refreshSelectedFloatWindow(target, event){
    6610. 

  6610.            var fw = getFocusedFloatWindow();
    6611. 

  6611.            if (fw != undefined){
    6612. 

  6612.                $(fw).find("iframe")[0].contentWindow.location.reload();
    6613. 

  6613.            }
    6614. 

  6614.            hideAllContextMenus();
    6615. 

  6615.         }
    6616. 

  6616. 

  6617.         function maximizeSelectedFloatWindow(target, event){
    6618. 

  6618.             var fw = getFocusedFloatWindow();
    6619. 

  6619.             if (fw != undefined){
    6620. 

  6620.                 toggleMax($(fw).find(".buttons.maxtoggle"),event);
    6621. 

  6621.             }
    6622. 

  6622.             hideAllContextMenus();
    6623. 

  6623.         }
    6624. 

  6624. 

  6625.         function minimizeSelectedFloatWindow(target, event){
    6626. 

  6626.             var fw = getFocusedFloatWindow();
    6627. 

  6627.             if (fw != undefined){
    6628. 

  6628.                 min($(fw).find(".buttons.mintoggle"),event);
    6629. 

  6629.             }
    6630. 

  6630.             hideAllContextMenus();
    6631. 

  6631.         }
    6632. 

  6632. 

  6633.         function openSelectedFloatWindowInNewTab(){
    6634. 

  6634.             var fw = getFocusedFloatWindow();
    6635. 

  6635.             if (fw != undefined){
    6636. 

  6636.                 try{
    6637. 

  6637.                     var currentURL = $(fw).find("iframe")[0].contentWindow.location;
    6638. 

  6638.                     window.open(currentURL);
    6639. 

  6639.                 }catch(ex){
    6640. 

  6640.                     //Maybe CORS. Try to get it from window's parent properties
    6641. 

  6641.                     let parentURL = $(fw).attr("parent");
    6642. 

  6642.                     if (parentURL != undefined){
    6643. 

  6643.                         window.open(parentURL);
    6644. 

  6644.                     }else{
    6645. 

  6645.                         console.log("Unable to access iframe object")
    6646. 

  6646.                     }
    6647. 

  6647.                 }
    6648. 

  6648.                
    6649. 

  6649.             }
    6650. 

  6650.             hideAllContextMenus();
    6651. 

  6651.         }
    6652. 

  6652. 

  6653.         function closeSelectedFloatWindow(target, event){
    6654. 

  6654.             var fw = getFocusedFloatWindow();
    6655. 

  6655.             if (fw != undefined){
    6656. 

  6656.                 closeFloatWindow($(fw).find(".buttons.closetoggle"),event);
    6657. 

  6657.             }
    6658. 

  6658.             hideAllContextMenus();
    6659. 

  6659.         }
    6660. 

  6660. 

  6661.         function fullscreen() {
    6662. 

  6662.             //Opening full screen will lead to hidden of all iframe for unknown reasons
    6663. 

  6663.             var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
    6664. 

  6664.                 (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
    6665. 

  6665.                 (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
    6666. 

  6666.                 (document.msFullscreenElement && document.msFullscreenElement !== null);
    6667. 

  6667.             var elem = document.documentElement;
    6668. 

  6668.             if (!isInFullScreen) {
    6669. 

  6669.                 if (elem.requestFullscreen) {
    6670. 

  6670.                     elem.requestFullscreen();
    6671. 

  6671.                 } else if (elem.mozRequestFullScreen) { /* Firefox */
    6672. 

  6672.                     elem.mozRequestFullScreen();
    6673. 

  6673.                 } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    6674. 

  6674.                     elem.webkitRequestFullscreen();
    6675. 

  6675.                 } else if (elem.msRequestFullscreen) { /* IE/Edge */
    6676. 

  6676.                     elem.msRequestFullscreen();
    6677. 

  6677.                 }
    6678. 

  6678.             } else {
    6679. 

  6679.                 if (document.exitFullscreen) {
    6680. 

  6680.                     document.exitFullscreen();
    6681. 

  6681.                 } else if (document.webkitExitFullscreen) {
    6682. 

  6682.                     document.webkitExitFullscreen();
    6683. 

  6683.                 } else if (document.mozCancelFullScreen) {
    6684. 

  6684.                     document.mozCancelFullScreen();
    6685. 

  6685.                 } else if (document.msExitFullscreen) {
    6686. 

  6686.                     document.msExitFullscreen();
    6687. 

  6687.                 }
    6688. 

  6688.             }
    6689. 

  6689. 

  6690.             hideAllContextMenus();
    6691. 

  6691.         }
    6692. 

  6692. 

  6693.         function copyStringToClipboard(content){
    6694. 

  6694.             var el = document.createElement('textarea');
    6695. 

  6695.             el.value = content;
    6696. 

  6696.             el.setAttribute('readonly', '');
    6697. 

  6697.             el.style = {position: 'absolute', left: '-9999px'};
    6698. 

  6698.             document.body.appendChild(el);
    6699. 

  6699.             el.select();
    6700. 

  6700.             document.execCommand('copy');
    6701. 

  6701.             document.body.removeChild(el);
    6702. 

  6702.         }
    6703. 

  6703. 

  6704. 

  6705.         /*
    6706. 

  6706.         var screenshotBuf = [];
    6707. 

  6707.         var totalFloatWindowsLeft = 0;
    6708. 

  6708.         function screenshot(){
    6709. 

  6709.             totalFloatWindowsLeft = $(".floatWindow").length;
    6710. 

  6710.             screenshotBuf = [];
    6711. 

  6711.             //Get a screenshot from each floatWindow
    6712. 

  6712.             $(".floatWindow").each(function(){
    6713. 

  6713.                 let contentWindow = $(this).find("iframe")[0].contentWindow;
    6714. 

  6714.                 let offsets = [$(this).find("iframe").offset().left, $(this).find("iframe").offset().top];
    6715. 

  6715.                 let thisWindowId = $(this).attr("windowid");
    6716. 

  6716.                 if (contentWindow.ao_module_screenshot){
    6717. 

  6717.                     contentWindow.ao_module_screenshot(function(capture){
    6718. 

  6718.                         screenshotBuf.push([thisWindowId,offsets,capture]);
    6719. 

  6719.                         totalFloatWindowsLeft--;
    6720. 

  6720. 

  6721.                         if (totalFloatWindowsLeft == 0){
    6722. 

  6722.                             //Merge the canvas
    6723. 

  6723.                             mergeScreenshotCanvas();
    6724. 

  6724.                         }
    6725. 

  6725.                     })
    6726. 

  6726.                 }else{
    6727. 

  6727.                     //Float window do not allow screenshot
    6728. 

  6728.                 }
    6729. 

  6729.             });
    6730. 

  6730. 

  6731.             if (totalFloatWindowsLeft == 0){
    6732. 

  6732.                 setTimeout(function(){
    6733. 

  6733.                     mergeScreenshotCanvas();
    6734. 

  6734.                 }, 500);
    6735. 

  6735.                 
    6736. 

  6736.             }
    6737. 

  6737.         }
    6738. 

  6738. 

  6739.         function mergeScreenshotCanvas(){
    6740. 

  6740.             //Merge the screenshots
    6741. 

  6741.             for (var i = 0; i < screenshotBuf.length; i++){
    6742. 

  6742.                 var thisWindowID = screenshotBuf[i][0];
    6743. 

  6743.                 var thisOffsets = screenshotBuf[i][1];
    6744. 

  6744.                 var thisCanvas = screenshotBuf[i][2];
    6745. 

  6745.                 var imgLink = thisCanvas.toDataURL();
    6746. 

  6746. 

  6747.                 //Overlay the iframe with image of screenshot
    6748. 

  6748.                 let targetFw = getFloatWindowByID(thisWindowID);
    6749. 

  6749.                 $(targetFw).find(".iframecover").append(`<img src="${imgLink}"/>`);
    6750. 

  6750.                 $(targetFw).find(".iframecover").show();
    6751. 

  6751.             }
    6752. 

  6752. 

  6753.             html2canvas(document.querySelector("body")).then(basecanvas => {
    6754. 

  6754.                 downloadCanvas(basecanvas);
    6755. 

  6755. 

  6756.                 //Clear up the mess
    6757. 

  6757.                 screenshotBuf.forEach(function(entry){
    6758. 

  6758.                     let targetFw = getFloatWindowByID(entry[0]);
    6759. 

  6759.                     $(targetFw).find(".iframecover").html("");
    6760. 

  6760.                     $(targetFw).find(".iframecover").hide();
    6761. 

  6761.                 });
    6762. 

  6762. 

  6763.                  //Reset paramters
    6764. 

  6764.                 totalFloatWindowsLeft = 0;
    6765. 

  6765.                 screenshotBuf = [];
    6766. 

  6766.             });
    6767. 

  6767. 

  6768.            
    6769. 

  6769.         }
    6770. 

  6770. 

  6771.         function downloadCanvas(canvas){
    6772. 

  6772.             var aDownloadLink = document.createElement('a');
    6773. 

  6773.             aDownloadLink.download = `screenshot_${new Date().toLocaleString(undefined, {year: 'numeric', month: '2-digit', day: '2-digit', weekday:"long", hour: '2-digit', hour12: false, minute:'2-digit', second:'2-digit'}).split(":").join("_").split("/").join("-")}.png`;
    6774. 

  6774.             aDownloadLink.href = canvas.toDataURL();
    6775. 

  6775.             aDownloadLink.click();
    6776. 

  6776.         }
    6777. 

  6777.         */
    6778. 

  6778. 

  6779.         //Function for converting bytes to human readable sizes
    6780. 

  6780.         function formatBytes(a,b=2){if(0===a)return"0 Bytes";const c=0>b?0:b,d=Math.floor(Math.log(a)/Math.log(1024));return parseFloat((a/Math.pow(1024,d)).toFixed(c))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][d]}
    6781. 

  6781. 

  6782.         /*
    6783. 

  6783.             Background services for keeping desktop files updated
    6784. 

  6784. 

  6785.             Same mechanism is used as file explorer
    6786. 

  6786.         */
    6787. 

  6787.         let desktopFileHash = "";
    6788. 

  6788.         setInterval(function(){
    6789. 

  6789.             getDesktopHash(function(hash){
    6790. 

  6790.                 if (desktopFileHash == ""){
    6791. 

  6791.                     //Initialization
    6792. 

  6792.                     desktopFileHash = hash;
    6793. 

  6793.                 }else if (desktopFileHash != hash){
    6794. 

  6794.                     //Changed on desktop files. Refresh
    6795. 

  6795.                     refresh(undefined, true);
    6796. 

  6796.                     desktopFileHash = hash;
    6797. 

  6797.                 }
    6798. 

  6798. 

  6799.                 //Else, no file change on desktop
    6800. 

  6800.             });
    6801. 

  6801.         }, 15000);
    6802. 

  6802. 

  6803.         function generateCSRFToken(callback){
    6804. 

  6804.             $.ajax({
    6805. 

  6805.                 url: "../../system/csrf/new",
    6806. 

  6806.                 success: function(token){
    6807. 

  6807.                     callback(token);
    6808. 

  6808.                 }
    6809. 

  6809.             })
    6810. 

  6810.         }
    6811. 

  6811. 

  6812.         function getDesktopHash(callback){
    6813. 

  6813.             $.ajax({
    6814. 

  6814.                 url: "system/file_system/listDirHash",
    6815. 

  6815.                 data: {dir: "user:/Desktop/"},
    6816. 

  6816.                 success: function(data){
    6817. 

  6817.                     if (data.error !== undefined){
    6818. 

  6818.                         
    6819. 

  6819.                     }
    6820. 

  6820.                     callback(data);
    6821. 

  6821.                 }
    6822. 

  6822.             })
    6823. 

  6823.         }
    6824. 

  6824. 

  6825.         function bindObjectToIMEEvents(object){
    6826. 

  6826.             object.addEventListener("keydown", function(event){
    6827. 

  6827.                 if (window.ime && window.ime.handler != null){
    6828. 

  6828.                     window.ime.handler(event);
    6829. 

  6829.                 }else{
    6830. 

  6830.                     //No IME handler. Just continue the input
    6831. 

  6831.                 }
    6832. 

  6832.             });
    6833. 

  6833. 

  6834.             object.addEventListener("focus", function(event){
    6835. 

  6835.                 if (window.ime){
    6836. 

  6836.                     //IME exists. Set this field to focused field
    6837. 

  6837.                     window.ime.focus = event.target;
    6838. 

  6838.                 }
    6839. 

  6839.             });
    6840. 

  6840.         }
    6841. 

  6841.     </script>
    6842. 

  6842. </body>
    6843. 

  6843. 

  6844. </html>
    6845.