jquery.layout-latest.js 202 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460546154625463546454655466546754685469547054715472547354745475547654775478547954805481548254835484548554865487548854895490549154925493549454955496549754985499550055015502550355045505550655075508550955105511551255135514551555165517551855195520552155225523552455255526552755285529553055315532553355345535553655375538553955405541554255435544554555465547554855495550555155525553555455555556555755585559556055615562556355645565556655675568556955705571557255735574557555765577557855795580558155825583558455855586558755885589559055915592559355945595559655975598559956005601560256035604560556065607560856095610561156125613561456155616561756185619562056215622562356245625562656275628562956305631563256335634563556365637563856395640564156425643564456455646564756485649565056515652565356545655565656575658565956605661566256635664566556665667566856695670567156725673567456755676567756785679568056815682568356845685568656875688568956905691569256935694569556965697569856995700570157025703570457055706570757085709571057115712571357145715571657175718571957205721572257235724572557265727572857295730573157325733573457355736573757385739574057415742574357445745574657475748574957505751575257535754575557565757575857595760576157625763576457655766576757685769577057715772577357745775577657775778577957805781578257835784578557865787578857895790579157925793579457955796579757985799580058015802580358045805580658075808580958105811581258135814581558165817581858195820582158225823582458255826582758285829583058315832583358345835583658375838583958405841584258435844584558465847584858495850585158525853585458555856585758585859586058615862586358645865586658675868586958705871587258735874587558765877587858795880588158825883588458855886588758885889589058915892589358945895589658975898589959005901590259035904590559065907590859095910591159125913591459155916591759185919
  1. /**
  2. * @preserve
  3. * jquery.layout 1.3.0 - Release Candidate 30.74
  4. * $Date: 2012-10-28 08:00:00 (Sun, 28 Oct 2012) $
  5. * $Rev: 303007 $
  6. *
  7. * Copyright (c) 2012
  8. * Fabrizio Balliano (http://www.fabrizioballiano.net)
  9. * Kevin Dalman (http://allpro.net)
  10. *
  11. * Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)
  12. * and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.
  13. *
  14. * Changelog: http://layout.jquery-dev.net/changelog.cfm#1.3.0.rc30.74
  15. *
  16. * Docs: http://layout.jquery-dev.net/documentation.html
  17. * Tips: http://layout.jquery-dev.net/tips.html
  18. * Help: http://groups.google.com/group/jquery-ui-layout
  19. */
  20. /* JavaDoc Info: http://code.google.com/closure/compiler/docs/js-for-compiler.html
  21. * {!Object} non-nullable type (never NULL)
  22. * {?string} nullable type (sometimes NULL) - default for {Object}
  23. * {number=} optional parameter
  24. * {*} ALL types
  25. */
  26. // NOTE: For best readability, view with a fixed-width font and tabs equal to 4-chars
  27. ;(function ($) {
  28. // alias Math methods - used a lot!
  29. var min = Math.min
  30. , max = Math.max
  31. , round = Math.floor
  32. , isStr = function (v) { return $.type(v) === "string"; }
  33. /**
  34. * @param {!Object} Instance
  35. * @param {Array.<string>} a_fn
  36. */
  37. , runPluginCallbacks = function (Instance, a_fn) {
  38. if ($.isArray(a_fn))
  39. for (var i=0, c=a_fn.length; i<c; i++) {
  40. var fn = a_fn[i];
  41. try {
  42. if (isStr(fn)) // 'name' of a function
  43. fn = eval(fn);
  44. if ($.isFunction(fn))
  45. g(fn)( Instance );
  46. } catch (ex) {}
  47. }
  48. function g (f) { return f; }; // compiler hack
  49. }
  50. ;
  51. /*
  52. * GENERIC $.layout METHODS - used by all layouts
  53. */
  54. $.layout = {
  55. version: "1.3.rc30.74"
  56. , revision: 0.033007 // 1.3.0 final = 1.0300 - major(n+).minor(nn)+patch(nn+)
  57. // can update code here if $.browser is phased out or logic changes
  58. , browser: {
  59. mozilla: !!$.browser.mozilla
  60. , webkit: !!$.browser.webkit || !!$.browser.safari // webkit = jQ 1.4
  61. , msie: !!$.browser.msie
  62. , isIE6: $.browser.msie && $.browser.version == 6
  63. , boxModel: $.support.boxModel !== false || !$.browser.msie // ONLY IE reverts to old box-model - update for older jQ onReady
  64. , version: $.browser.version // not used in Layout core, but may be used by plugins
  65. }
  66. // *PREDEFINED* EFFECTS & DEFAULTS
  67. // MUST list effect here - OR MUST set an fxSettings option (can be an empty hash: {})
  68. , effects: {
  69. // Pane Open/Close Animations
  70. slide: {
  71. all: { duration: "fast" } // eg: duration: 1000, easing: "easeOutBounce"
  72. , north: { direction: "up" }
  73. , south: { direction: "down" }
  74. , east: { direction: "right"}
  75. , west: { direction: "left" }
  76. }
  77. , drop: {
  78. all: { duration: "slow" }
  79. , north: { direction: "up" }
  80. , south: { direction: "down" }
  81. , east: { direction: "right"}
  82. , west: { direction: "left" }
  83. }
  84. , scale: {
  85. all: { duration: "fast" }
  86. }
  87. // these are not recommended, but can be used
  88. , blind: {}
  89. , clip: {}
  90. , explode: {}
  91. , fade: {}
  92. , fold: {}
  93. , puff: {}
  94. // Pane Resize Animations
  95. , size: {
  96. all: { easing: "swing" }
  97. }
  98. }
  99. // INTERNAL CONFIG DATA - DO NOT CHANGE THIS!
  100. , config: {
  101. optionRootKeys: "effects,panes,north,south,west,east,center".split(",")
  102. , allPanes: "north,south,west,east,center".split(",")
  103. , borderPanes: "north,south,west,east".split(",")
  104. , oppositeEdge: {
  105. north: "south"
  106. , south: "north"
  107. , east: "west"
  108. , west: "east"
  109. }
  110. // offscreen data
  111. , offscreenCSS: { left: "-99999px", right: "auto" } // used by hide/close if useOffscreenClose=true
  112. , offscreenReset: "offscreenReset" // key used for data
  113. // CSS used in multiple places
  114. , hidden: { visibility: "hidden" }
  115. , visible: { visibility: "visible" }
  116. // layout element settings
  117. , resizers: {
  118. cssReq: {
  119. position: "absolute"
  120. , padding: 0
  121. , margin: 0
  122. , fontSize: "1px"
  123. , textAlign: "left" // to counter-act "center" alignment!
  124. , overflow: "hidden" // prevent toggler-button from overflowing
  125. // SEE $.layout.defaults.zIndexes.resizer_normal
  126. }
  127. , cssDemo: { // DEMO CSS - applied if: options.PANE.applyDemoStyles=true
  128. background: "#DDD"
  129. , border: "none"
  130. }
  131. }
  132. , togglers: {
  133. cssReq: {
  134. position: "absolute"
  135. , display: "block"
  136. , padding: 0
  137. , margin: 0
  138. , overflow: "hidden"
  139. , textAlign: "center"
  140. , fontSize: "1px"
  141. , cursor: "pointer"
  142. , zIndex: 1
  143. }
  144. , cssDemo: { // DEMO CSS - applied if: options.PANE.applyDemoStyles=true
  145. background: "#AAA"
  146. }
  147. }
  148. , content: {
  149. cssReq: {
  150. position: "relative" /* contain floated or positioned elements */
  151. }
  152. , cssDemo: { // DEMO CSS - applied if: options.PANE.applyDemoStyles=true
  153. overflow: "auto"
  154. , padding: "10px"
  155. }
  156. , cssDemoPane: { // DEMO CSS - REMOVE scrolling from 'pane' when it has a content-div
  157. overflow: "hidden"
  158. , padding: 0
  159. }
  160. }
  161. , panes: { // defaults for ALL panes - overridden by 'per-pane settings' below
  162. cssReq: {
  163. position: "absolute"
  164. , margin: 0
  165. // $.layout.defaults.zIndexes.pane_normal
  166. }
  167. , cssDemo: { // DEMO CSS - applied if: options.PANE.applyDemoStyles=true
  168. padding: "10px"
  169. , background: "#FFF"
  170. , border: "1px solid #BBB"
  171. , overflow: "auto"
  172. }
  173. }
  174. , north: {
  175. side: "top"
  176. , sizeType: "Height"
  177. , dir: "horz"
  178. , cssReq: {
  179. top: 0
  180. , bottom: "auto"
  181. , left: 0
  182. , right: 0
  183. , width: "auto"
  184. // height: DYNAMIC
  185. }
  186. }
  187. , south: {
  188. side: "bottom"
  189. , sizeType: "Height"
  190. , dir: "horz"
  191. , cssReq: {
  192. top: "auto"
  193. , bottom: 0
  194. , left: 0
  195. , right: 0
  196. , width: "auto"
  197. // height: DYNAMIC
  198. }
  199. }
  200. , east: {
  201. side: "right"
  202. , sizeType: "Width"
  203. , dir: "vert"
  204. , cssReq: {
  205. left: "auto"
  206. , right: 0
  207. , top: "auto" // DYNAMIC
  208. , bottom: "auto" // DYNAMIC
  209. , height: "auto"
  210. // width: DYNAMIC
  211. }
  212. }
  213. , west: {
  214. side: "left"
  215. , sizeType: "Width"
  216. , dir: "vert"
  217. , cssReq: {
  218. left: 0
  219. , right: "auto"
  220. , top: "auto" // DYNAMIC
  221. , bottom: "auto" // DYNAMIC
  222. , height: "auto"
  223. // width: DYNAMIC
  224. }
  225. }
  226. , center: {
  227. dir: "center"
  228. , cssReq: {
  229. left: "auto" // DYNAMIC
  230. , right: "auto" // DYNAMIC
  231. , top: "auto" // DYNAMIC
  232. , bottom: "auto" // DYNAMIC
  233. , height: "auto"
  234. , width: "auto"
  235. }
  236. }
  237. }
  238. // CALLBACK FUNCTION NAMESPACE - used to store reusable callback functions
  239. , callbacks: {}
  240. , getParentPaneElem: function (el) {
  241. // must pass either a container or pane element
  242. var $el = $(el)
  243. , layout = $el.data("layout") || $el.data("parentLayout");
  244. if (layout) {
  245. var $cont = layout.container;
  246. // see if this container is directly-nested inside an outer-pane
  247. if ($cont.data("layoutPane")) return $cont;
  248. var $pane = $cont.closest("."+ $.layout.defaults.panes.paneClass);
  249. // if a pane was found, return it
  250. if ($pane.data("layoutPane")) return $pane;
  251. }
  252. return null;
  253. }
  254. , getParentPaneInstance: function (el) {
  255. // must pass either a container or pane element
  256. var $pane = $.layout.getParentPaneElem(el);
  257. return $pane ? $pane.data("layoutPane") : null;
  258. }
  259. , getParentLayoutInstance: function (el) {
  260. // must pass either a container or pane element
  261. var $pane = $.layout.getParentPaneElem(el);
  262. return $pane ? $pane.data("parentLayout") : null;
  263. }
  264. , getEventObject: function (evt) {
  265. return typeof evt === "object" && evt.stopPropagation ? evt : null;
  266. }
  267. , parsePaneName: function (evt_or_pane) {
  268. // getEventObject() automatically calls .stopPropagation(), WHICH MUST BE DONE!
  269. var evt = $.layout.getEventObject( evt_or_pane );
  270. if (evt) {
  271. // ALWAYS stop propagation of events triggered in Layout!
  272. evt.stopPropagation();
  273. return $(this).data("layoutEdge");
  274. }
  275. else
  276. return evt_or_pane;
  277. }
  278. // LAYOUT-PLUGIN REGISTRATION
  279. // more plugins can added beyond this default list
  280. , plugins: {
  281. draggable: !!$.fn.draggable // resizing
  282. , effects: {
  283. core: !!$.effects // animimations (specific effects tested by initOptions)
  284. , slide: $.effects && ($.effects.slide || ($.effects.effect && $.effects.effect.slide)) // default effect
  285. }
  286. }
  287. // arrays of plugin or other methods to be triggered for events in *each layout* - will be passed 'Instance'
  288. , onCreate: [] // runs when layout is just starting to be created - right after options are set
  289. , onLoad: [] // runs after layout container and global events init, but before initPanes is called
  290. , onReady: [] // runs after initialization *completes* - ie, after initPanes completes successfully
  291. , onDestroy: [] // runs after layout is destroyed
  292. , onUnload: [] // runs after layout is destroyed OR when page unloads
  293. , afterOpen: [] // runs after setAsOpen() completes
  294. , afterClose: [] // runs after setAsClosed() completes
  295. /*
  296. * GENERIC UTILITY METHODS
  297. */
  298. // calculate and return the scrollbar width, as an integer
  299. , scrollbarWidth: function () { return window.scrollbarWidth || $.layout.getScrollbarSize('width'); }
  300. , scrollbarHeight: function () { return window.scrollbarHeight || $.layout.getScrollbarSize('height'); }
  301. , getScrollbarSize: function (dim) {
  302. var $c = $('<div style="position: absolute; top: -10000px; left: -10000px; width: 100px; height: 100px; overflow: scroll;"></div>').appendTo("body");
  303. var d = { width: $c.css("width") - $c[0].clientWidth, height: $c.height() - $c[0].clientHeight };
  304. $c.remove();
  305. window.scrollbarWidth = d.width;
  306. window.scrollbarHeight = d.height;
  307. return dim.match(/^(width|height)$/) ? d[dim] : d;
  308. }
  309. /**
  310. * Returns hash container 'display' and 'visibility'
  311. *
  312. * @see $.swap() - swaps CSS, runs callback, resets CSS
  313. * @param {!Object} $E jQuery element
  314. * @param {boolean=} [force=false] Run even if display != none
  315. * @return {!Object} Returns current style props, if applicable
  316. */
  317. , showInvisibly: function ($E, force) {
  318. if ($E && $E.length && (force || $E.css("display") === "none")) { // only if not *already hidden*
  319. var s = $E[0].style
  320. // save ONLY the 'style' props because that is what we must restore
  321. , CSS = { display: s.display || '', visibility: s.visibility || '' };
  322. // show element 'invisibly' so can be measured
  323. $E.css({ display: "block", visibility: "hidden" });
  324. return CSS;
  325. }
  326. return {};
  327. }
  328. /**
  329. * Returns data for setting size of an element (container or a pane).
  330. *
  331. * @see _create(), onWindowResize() for container, plus others for pane
  332. * @return JSON Returns a hash of all dimensions: top, bottom, left, right, outerWidth, innerHeight, etc
  333. */
  334. , getElementDimensions: function ($E, inset) {
  335. var
  336. // dimensions hash - start with current data IF passed
  337. d = { css: {}, inset: {} }
  338. , x = d.css // CSS hash
  339. , i = { bottom: 0 } // TEMP insets (bottom = complier hack)
  340. , N = $.layout.cssNum
  341. , off = $E.offset()
  342. , b, p, ei // TEMP border, padding
  343. ;
  344. d.offsetLeft = off.left;
  345. d.offsetTop = off.top;
  346. if (!inset) inset = {}; // simplify logic below
  347. $.each("Left,Right,Top,Bottom".split(","), function (idx, e) { // e = edge
  348. b = x["border" + e] = $.layout.borderWidth($E, e);
  349. p = x["padding"+ e] = $.layout.cssNum($E, "padding"+e);
  350. ei = e.toLowerCase();
  351. d.inset[ei] = inset[ei] >= 0 ? inset[ei] : p; // any missing insetX value = paddingX
  352. i[ei] = d.inset[ei] + b; // total offset of content from outer side
  353. });
  354. x.width = $E.css("width");
  355. x.height = $E.height();
  356. x.top = N($E,"top",true);
  357. x.bottom = N($E,"bottom",true);
  358. x.left = N($E,"left",true);
  359. x.right = N($E,"right",true);
  360. d.outerWidth = $E.outerWidth();
  361. d.outerHeight = $E.outerHeight();
  362. // calc the TRUE inner-dimensions, even in quirks-mode!
  363. d.innerWidth = max(0, d.outerWidth - i.left - i.right);
  364. d.innerHeight = max(0, d.outerHeight - i.top - i.bottom);
  365. // layoutWidth/Height is used in calcs for manual resizing
  366. // layoutW/H only differs from innerW/H when in quirks-mode - then is like outerW/H
  367. d.layoutWidth = $E.innerWidth();
  368. d.layoutHeight = $E.innerHeight();
  369. //if ($E.prop('tagName') === 'BODY') { debugData( d, $E.prop('tagName') ); } // DEBUG
  370. //d.visible = $E.is(":visible");// && x.width > 0 && x.height > 0;
  371. return d;
  372. }
  373. , getElementStyles: function ($E, list) {
  374. var
  375. CSS = {}
  376. , style = $E[0].style
  377. , props = list.split(",")
  378. , sides = "Top,Bottom,Left,Right".split(",")
  379. , attrs = "Color,Style,Width".split(",")
  380. , p, s, a, i, j, k
  381. ;
  382. for (i=0; i < props.length; i++) {
  383. p = props[i];
  384. if (p.match(/(border|padding|margin)$/))
  385. for (j=0; j < 4; j++) {
  386. s = sides[j];
  387. if (p === "border")
  388. for (k=0; k < 3; k++) {
  389. a = attrs[k];
  390. CSS[p+s+a] = style[p+s+a];
  391. }
  392. else
  393. CSS[p+s] = style[p+s];
  394. }
  395. else
  396. CSS[p] = style[p];
  397. };
  398. return CSS
  399. }
  400. /**
  401. * Return the innerWidth for the current browser/doctype
  402. *
  403. * @see initPanes(), sizeMidPanes(), initHandles(), sizeHandles()
  404. * @param {Array.<Object>} $E Must pass a jQuery object - first element is processed
  405. * @param {number=} outerWidth (optional) Can pass a width, allowing calculations BEFORE element is resized
  406. * @return {number} Returns the innerWidth of the elem by subtracting padding and borders
  407. */
  408. , cssWidth: function ($E, outerWidth) {
  409. // a 'calculated' outerHeight can be passed so borders and/or padding are removed if needed
  410. if (outerWidth <= 0) return 0;
  411. if (!$.layout.browser.boxModel) return outerWidth;
  412. // strip border and padding from outerWidth to get CSS Width
  413. var b = $.layout.borderWidth
  414. , n = $.layout.cssNum
  415. , W = outerWidth
  416. - b($E, "Left")
  417. - b($E, "Right")
  418. - n($E, "paddingLeft")
  419. - n($E, "paddingRight");
  420. return max(0,W);
  421. }
  422. /**
  423. * Return the innerHeight for the current browser/doctype
  424. *
  425. * @see initPanes(), sizeMidPanes(), initHandles(), sizeHandles()
  426. * @param {Array.<Object>} $E Must pass a jQuery object - first element is processed
  427. * @param {number=} outerHeight (optional) Can pass a width, allowing calculations BEFORE element is resized
  428. * @return {number} Returns the innerHeight of the elem by subtracting padding and borders
  429. */
  430. , cssHeight: function ($E, outerHeight) {
  431. // a 'calculated' outerHeight can be passed so borders and/or padding are removed if needed
  432. if (outerHeight <= 0) return 0;
  433. if (!$.layout.browser.boxModel) return outerHeight;
  434. // strip border and padding from outerHeight to get CSS Height
  435. var b = $.layout.borderWidth
  436. , n = $.layout.cssNum
  437. , H = outerHeight
  438. - b($E, "Top")
  439. - b($E, "Bottom")
  440. - n($E, "paddingTop")
  441. - n($E, "paddingBottom");
  442. return max(0,H);
  443. }
  444. /**
  445. * Returns the 'current CSS numeric value' for a CSS property - 0 if property does not exist
  446. *
  447. * @see Called by many methods
  448. * @param {Array.<Object>} $E Must pass a jQuery object - first element is processed
  449. * @param {string} prop The name of the CSS property, eg: top, width, etc.
  450. * @param {boolean=} [allowAuto=false] true = return 'auto' if that is value; false = return 0
  451. * @return {(string|number)} Usually used to get an integer value for position (top, left) or size (height, width)
  452. */
  453. , cssNum: function ($E, prop, allowAuto) {
  454. if (!$E.jquery) $E = $($E);
  455. var CSS = $.layout.showInvisibly($E)
  456. , p = $.css($E[0], prop, true)
  457. , v = allowAuto && p=="auto" ? p : Math.round(parseFloat(p) || 0);
  458. $E.css( CSS ); // RESET
  459. return v;
  460. }
  461. , borderWidth: function (el, side) {
  462. if (el.jquery) el = el[0];
  463. var b = "border"+ side.substr(0,1).toUpperCase() + side.substr(1); // left => Left
  464. return $.css(el, b+"Style", true) === "none" ? 0 : Math.round(parseFloat($.css(el, b+"Width", true)) || 0);
  465. }
  466. /**
  467. * Mouse-tracking utility - FUTURE REFERENCE
  468. *
  469. * init: if (!window.mouse) {
  470. * window.mouse = { x: 0, y: 0 };
  471. * $(document).mousemove( $.layout.trackMouse );
  472. * }
  473. *
  474. * @param {Object} evt
  475. *
  476. , trackMouse: function (evt) {
  477. window.mouse = { x: evt.clientX, y: evt.clientY };
  478. }
  479. */
  480. /**
  481. * SUBROUTINE for preventPrematureSlideClose option
  482. *
  483. * @param {Object} evt
  484. * @param {Object=} el
  485. */
  486. , isMouseOverElem: function (evt, el) {
  487. var
  488. $E = $(el || this)
  489. , d = $E.offset()
  490. , T = d.top
  491. , L = d.left
  492. , R = L + $E.outerWidth()
  493. , B = T + $E.outerHeight()
  494. , x = evt.pageX // evt.clientX ?
  495. , y = evt.pageY // evt.clientY ?
  496. ;
  497. // if X & Y are < 0, probably means is over an open SELECT
  498. return ($.layout.browser.msie && x < 0 && y < 0) || ((x >= L && x <= R) && (y >= T && y <= B));
  499. }
  500. /**
  501. * Message/Logging Utility
  502. *
  503. * @example $.layout.msg("My message"); // log text
  504. * @example $.layout.msg("My message", true); // alert text
  505. * @example $.layout.msg({ foo: "bar" }, "Title"); // log hash-data, with custom title
  506. * @example $.layout.msg({ foo: "bar" }, true, "Title", { sort: false }); -OR-
  507. * @example $.layout.msg({ foo: "bar" }, "Title", { sort: false, display: true }); // alert hash-data
  508. *
  509. * @param {(Object|string)} info String message OR Hash/Array
  510. * @param {(Boolean|string|Object)=} [popup=false] True means alert-box - can be skipped
  511. * @param {(Object|string)=} [debugTitle=""] Title for Hash data - can be skipped
  512. * @param {Object=} [debugOpts] Extra options for debug output
  513. */
  514. , msg: function (info, popup, debugTitle, debugOpts) {
  515. if ($.isPlainObject(info) && window.debugData) {
  516. if (typeof popup === "string") {
  517. debugOpts = debugTitle;
  518. debugTitle = popup;
  519. }
  520. else if (typeof debugTitle === "object") {
  521. debugOpts = debugTitle;
  522. debugTitle = null;
  523. }
  524. var t = debugTitle || "log( <object> )"
  525. , o = $.extend({ sort: false, returnHTML: false, display: false }, debugOpts);
  526. if (popup === true || o.display)
  527. debugData( info, t, o );
  528. else if (window.console)
  529. console.log(debugData( info, t, o ));
  530. }
  531. else if (popup)
  532. alert(info);
  533. else if (window.console)
  534. console.log(info);
  535. else {
  536. var id = "#layoutLogger"
  537. , $l = $(id);
  538. if (!$l.length)
  539. $l = createLog();
  540. $l.children("ul").append('<li style="padding: 4px 10px; margin: 0; border-top: 1px solid #CCC;">'+ info.replace(/\</g,"&lt;").replace(/\>/g,"&gt;") +'</li>');
  541. }
  542. function createLog () {
  543. var pos = $.support.fixedPosition ? 'fixed' : 'absolute'
  544. , $e = $('<div id="layoutLogger" style="position: '+ pos +'; top: 5px; z-index: 999999; max-width: 25%; overflow: hidden; border: 1px solid #000; border-radius: 5px; background: #FBFBFB; box-shadow: 0 2px 10px rgba(0,0,0,0.3);">'
  545. + '<div style="font-size: 13px; font-weight: bold; padding: 5px 10px; background: #F6F6F6; border-radius: 5px 5px 0 0; cursor: move;">'
  546. + '<span style="float: right; padding-left: 7px; cursor: pointer;" title="Remove Console" onclick="$(this).closest(\'#layoutLogger\').remove()">X</span>Layout console.log</div>'
  547. + '<ul style="font-size: 13px; font-weight: none; list-style: none; margin: 0; padding: 0 0 2px;"></ul>'
  548. + '</div>'
  549. ).appendTo("body");
  550. $e.css('left', $(window).width() - $e.outerWidth() - 5)
  551. if ($.ui.draggable) $e.draggable({ handle: ':first-child' });
  552. return $e;
  553. };
  554. }
  555. };
  556. // DEFAULT OPTIONS
  557. $.layout.defaults = {
  558. /*
  559. * LAYOUT & LAYOUT-CONTAINER OPTIONS
  560. * - none of these options are applicable to individual panes
  561. */
  562. name: "" // Not required, but useful for buttons and used for the state-cookie
  563. , containerClass: "ui-layout-container" // layout-container element
  564. , inset: null // custom container-inset values (override padding)
  565. , scrollToBookmarkOnLoad: true // after creating a layout, scroll to bookmark in URL (.../page.htm#myBookmark)
  566. , resizeWithWindow: true // bind thisLayout.resizeAll() to the window.resize event
  567. , resizeWithWindowDelay: 200 // delay calling resizeAll because makes window resizing very jerky
  568. , resizeWithWindowMaxDelay: 0 // 0 = none - force resize every XX ms while window is being resized
  569. , maskPanesEarly: false // true = create pane-masks on resizer.mouseDown instead of waiting for resizer.dragstart
  570. , onresizeall_start: null // CALLBACK when resizeAll() STARTS - NOT pane-specific
  571. , onresizeall_end: null // CALLBACK when resizeAll() ENDS - NOT pane-specific
  572. , onload_start: null // CALLBACK when Layout inits - after options initialized, but before elements
  573. , onload_end: null // CALLBACK when Layout inits - after EVERYTHING has been initialized
  574. , onunload_start: null // CALLBACK when Layout is destroyed OR onWindowUnload
  575. , onunload_end: null // CALLBACK when Layout is destroyed OR onWindowUnload
  576. , initPanes: true // false = DO NOT initialize the panes onLoad - will init later
  577. , showErrorMessages: true // enables fatal error messages to warn developers of common errors
  578. , showDebugMessages: false // display console-and-alert debug msgs - IF this Layout version _has_ debugging code!
  579. // Changing this zIndex value will cause other zIndex values to automatically change
  580. , zIndex: null // the PANE zIndex - resizers and masks will be +1
  581. // DO NOT CHANGE the zIndex values below unless you clearly understand their relationships
  582. , zIndexes: { // set _default_ z-index values here...
  583. pane_normal: 0 // normal z-index for panes
  584. , content_mask: 1 // applied to overlays used to mask content INSIDE panes during resizing
  585. , resizer_normal: 2 // normal z-index for resizer-bars
  586. , pane_sliding: 100 // applied to *BOTH* the pane and its resizer when a pane is 'slid open'
  587. , pane_animate: 1000 // applied to the pane when being animated - not applied to the resizer
  588. , resizer_drag: 10000 // applied to the CLONED resizer-bar when being 'dragged'
  589. }
  590. , errors: {
  591. pane: "pane" // description of "layout pane element" - used only in error messages
  592. , selector: "selector" // description of "jQuery-selector" - used only in error messages
  593. , addButtonError: "Error Adding Button \n\nInvalid "
  594. , containerMissing: "UI Layout Initialization Error\n\nThe specified layout-container does not exist."
  595. , centerPaneMissing: "UI Layout Initialization Error\n\nThe center-pane element does not exist.\n\nThe center-pane is a required element."
  596. , noContainerHeight: "UI Layout Initialization Warning\n\nThe layout-container \"CONTAINER\" has no height.\n\nTherefore the layout is 0-height and hence 'invisible'!"
  597. , callbackError: "UI Layout Callback Error\n\nThe EVENT callback is not a valid function."
  598. }
  599. /*
  600. * PANE DEFAULT SETTINGS
  601. * - settings under the 'panes' key become the default settings for *all panes*
  602. * - ALL pane-options can also be set specifically for each panes, which will override these 'default values'
  603. */
  604. , panes: { // default options for 'all panes' - will be overridden by 'per-pane settings'
  605. applyDemoStyles: false // NOTE: renamed from applyDefaultStyles for clarity
  606. , closable: true // pane can open & close
  607. , resizable: true // when open, pane can be resized
  608. , slidable: true // when closed, pane can 'slide open' over other panes - closes on mouse-out
  609. , initClosed: false // true = init pane as 'closed'
  610. , initHidden: false // true = init pane as 'hidden' - no resizer-bar/spacing
  611. // SELECTORS
  612. //, paneSelector: "" // MUST be pane-specific - jQuery selector for pane
  613. , contentSelector: ".ui-layout-content" // INNER div/element to auto-size so only it scrolls, not the entire pane!
  614. , contentIgnoreSelector: ".ui-layout-ignore" // element(s) to 'ignore' when measuring 'content'
  615. , findNestedContent: false // true = $P.find(contentSelector), false = $P.children(contentSelector)
  616. // GENERIC ROOT-CLASSES - for auto-generated classNames
  617. , paneClass: "ui-layout-pane" // Layout Pane
  618. , resizerClass: "ui-layout-resizer" // Resizer Bar
  619. , togglerClass: "ui-layout-toggler" // Toggler Button
  620. , buttonClass: "ui-layout-button" // CUSTOM Buttons - eg: '[ui-layout-button]-toggle/-open/-close/-pin'
  621. // ELEMENT SIZE & SPACING
  622. //, size: 100 // MUST be pane-specific -initial size of pane
  623. , minSize: 0 // when manually resizing a pane
  624. , maxSize: 0 // ditto, 0 = no limit
  625. , spacing_open: 6 // space between pane and adjacent panes - when pane is 'open'
  626. , spacing_closed: 6 // ditto - when pane is 'closed'
  627. , togglerLength_open: 50 // Length = WIDTH of toggler button on north/south sides - HEIGHT on east/west sides
  628. , togglerLength_closed: 50 // 100% OR -1 means 'full height/width of resizer bar' - 0 means 'hidden'
  629. , togglerAlign_open: "center" // top/left, bottom/right, center, OR...
  630. , togglerAlign_closed: "center" // 1 => nn = offset from top/left, -1 => -nn == offset from bottom/right
  631. , togglerContent_open: "" // text or HTML to put INSIDE the toggler
  632. , togglerContent_closed: "" // ditto
  633. // RESIZING OPTIONS
  634. , resizerDblClickToggle: true //
  635. , autoResize: true // IF size is 'auto' or a percentage, then recalc 'pixel size' whenever the layout resizes
  636. , autoReopen: true // IF a pane was auto-closed due to noRoom, reopen it when there is room? False = leave it closed
  637. , resizerDragOpacity: 1 // option for ui.draggable
  638. //, resizerCursor: "" // MUST be pane-specific - cursor when over resizer-bar
  639. , maskContents: false // true = add DIV-mask over-or-inside this pane so can 'drag' over IFRAMES
  640. , maskObjects: false // true = add IFRAME-mask over-or-inside this pane to cover objects/applets - content-mask will overlay this mask
  641. , maskZindex: null // will override zIndexes.content_mask if specified - not applicable to iframe-panes
  642. , resizingGrid: false // grid size that the resizers will snap-to during resizing, eg: [20,20]
  643. , livePaneResizing: false // true = LIVE Resizing as resizer is dragged
  644. , liveContentResizing: false // true = re-measure header/footer heights as resizer is dragged
  645. , liveResizingTolerance: 1 // how many px change before pane resizes, to control performance
  646. // SLIDING OPTIONS
  647. , sliderCursor: "pointer" // cursor when resizer-bar will trigger 'sliding'
  648. , slideTrigger_open: "click" // click, dblclick, mouseenter
  649. , slideTrigger_close: "mouseleave"// click, mouseleave
  650. , slideDelay_open: 300 // applies only for mouseenter event - 0 = instant open
  651. , slideDelay_close: 300 // applies only for mouseleave event (300ms is the minimum!)
  652. , hideTogglerOnSlide: false // when pane is slid-open, should the toggler show?
  653. , preventQuickSlideClose: $.layout.browser.webkit // Chrome triggers slideClosed as it is opening
  654. , preventPrematureSlideClose: false // handle incorrect mouseleave trigger, like when over a SELECT-list in IE
  655. // PANE-SPECIFIC TIPS & MESSAGES
  656. , tips: {
  657. Open: "Open" // eg: "Open Pane"
  658. , Close: "Close"
  659. , Resize: "Resize"
  660. , Slide: "Slide Open"
  661. , Pin: "Pin"
  662. , Unpin: "Un-Pin"
  663. , noRoomToOpen: "Not enough room to show this panel." // alert if user tries to open a pane that cannot
  664. , minSizeWarning: "Panel has reached its minimum size" // displays in browser statusbar
  665. , maxSizeWarning: "Panel has reached its maximum size" // ditto
  666. }
  667. // HOT-KEYS & MISC
  668. , showOverflowOnHover: false // will bind allowOverflow() utility to pane.onMouseOver
  669. , enableCursorHotkey: true // enabled 'cursor' hotkeys
  670. //, customHotkey: "" // MUST be pane-specific - EITHER a charCode OR a character
  671. , customHotkeyModifier: "SHIFT" // either 'SHIFT', 'CTRL' or 'CTRL+SHIFT' - NOT 'ALT'
  672. // PANE ANIMATION
  673. // NOTE: fxSss_open, fxSss_close & fxSss_size options (eg: fxName_open) are auto-generated if not passed
  674. , fxName: "slide" // ('none' or blank), slide, drop, scale -- only relevant to 'open' & 'close', NOT 'size'
  675. , fxSpeed: null // slow, normal, fast, 200, nnn - if passed, will OVERRIDE fxSettings.duration
  676. , fxSettings: {} // can be passed, eg: { easing: "easeOutBounce", duration: 1500 }
  677. , fxOpacityFix: true // tries to fix opacity in IE to restore anti-aliasing after animation
  678. , animatePaneSizing: false // true = animate resizing after dragging resizer-bar OR sizePane() is called
  679. /* NOTE: Action-specific FX options are auto-generated from the options above if not specifically set:
  680. fxName_open: "slide" // 'Open' pane animation
  681. fnName_close: "slide" // 'Close' pane animation
  682. fxName_size: "slide" // 'Size' pane animation - when animatePaneSizing = true
  683. fxSpeed_open: null
  684. fxSpeed_close: null
  685. fxSpeed_size: null
  686. fxSettings_open: {}
  687. fxSettings_close: {}
  688. fxSettings_size: {}
  689. */
  690. // CHILD/NESTED LAYOUTS
  691. , children: null // Layout-options for nested/child layout - even {} is valid as options
  692. , containerSelector: '' // if child is NOT 'directly nested', a selector to find it/them (can have more than one child layout!)
  693. , initChildren: true // true = child layout will be created as soon as _this_ layout completes initialization
  694. , destroyChildren: true // true = destroy child-layout if this pane is destroyed
  695. , resizeChildren: true // true = trigger child-layout.resizeAll() when this pane is resized
  696. // EVENT TRIGGERING
  697. , triggerEventsOnLoad: false // true = trigger onopen OR onclose callbacks when layout initializes
  698. , triggerEventsDuringLiveResize: true // true = trigger onresize callback REPEATEDLY if livePaneResizing==true
  699. // PANE CALLBACKS
  700. , onshow_start: null // CALLBACK when pane STARTS to Show - BEFORE onopen/onhide_start
  701. , onshow_end: null // CALLBACK when pane ENDS being Shown - AFTER onopen/onhide_end
  702. , onhide_start: null // CALLBACK when pane STARTS to Close - BEFORE onclose_start
  703. , onhide_end: null // CALLBACK when pane ENDS being Closed - AFTER onclose_end
  704. , onopen_start: null // CALLBACK when pane STARTS to Open
  705. , onopen_end: null // CALLBACK when pane ENDS being Opened
  706. , onclose_start: null // CALLBACK when pane STARTS to Close
  707. , onclose_end: null // CALLBACK when pane ENDS being Closed
  708. , onresize_start: null // CALLBACK when pane STARTS being Resized ***FOR ANY REASON***
  709. , onresize_end: null // CALLBACK when pane ENDS being Resized ***FOR ANY REASON***
  710. , onsizecontent_start: null // CALLBACK when sizing of content-element STARTS
  711. , onsizecontent_end: null // CALLBACK when sizing of content-element ENDS
  712. , onswap_start: null // CALLBACK when pane STARTS to Swap
  713. , onswap_end: null // CALLBACK when pane ENDS being Swapped
  714. , ondrag_start: null // CALLBACK when pane STARTS being ***MANUALLY*** Resized
  715. , ondrag_end: null // CALLBACK when pane ENDS being ***MANUALLY*** Resized
  716. }
  717. /*
  718. * PANE-SPECIFIC SETTINGS
  719. * - options listed below MUST be specified per-pane - they CANNOT be set under 'panes'
  720. * - all options under the 'panes' key can also be set specifically for any pane
  721. * - most options under the 'panes' key apply only to 'border-panes' - NOT the the center-pane
  722. */
  723. , north: {
  724. paneSelector: ".ui-layout-north"
  725. , size: "auto" // eg: "auto", "30%", .30, 200
  726. , resizerCursor: "n-resize" // custom = url(myCursor.cur)
  727. , customHotkey: "" // EITHER a charCode (43) OR a character ("o")
  728. }
  729. , south: {
  730. paneSelector: ".ui-layout-south"
  731. , size: "auto"
  732. , resizerCursor: "s-resize"
  733. , customHotkey: ""
  734. }
  735. , east: {
  736. paneSelector: ".ui-layout-east"
  737. , size: 200
  738. , resizerCursor: "e-resize"
  739. , customHotkey: ""
  740. }
  741. , west: {
  742. paneSelector: ".ui-layout-west"
  743. , size: 200
  744. , resizerCursor: "w-resize"
  745. , customHotkey: ""
  746. }
  747. , center: {
  748. paneSelector: ".ui-layout-center"
  749. , minWidth: 0
  750. , minHeight: 0
  751. }
  752. };
  753. $.layout.optionsMap = {
  754. // layout/global options - NOT pane-options
  755. layout: ("name,instanceKey,stateManagement,effects,inset,zIndexes,errors,"
  756. + "zIndex,scrollToBookmarkOnLoad,showErrorMessages,maskPanesEarly,"
  757. + "outset,resizeWithWindow,resizeWithWindowDelay,resizeWithWindowMaxDelay,"
  758. + "onresizeall,onresizeall_start,onresizeall_end,onload,onunload").split(",")
  759. // borderPanes: [ ALL options that are NOT specified as 'layout' ]
  760. // default.panes options that apply to the center-pane (most options apply _only_ to border-panes)
  761. , center: ("paneClass,contentSelector,contentIgnoreSelector,findNestedContent,applyDemoStyles,triggerEventsOnLoad,"
  762. + "showOverflowOnHover,maskContents,maskObjects,liveContentResizing,"
  763. + "containerSelector,children,initChildren,resizeChildren,destroyChildren,"
  764. + "onresize,onresize_start,onresize_end,onsizecontent,onsizecontent_start,onsizecontent_end").split(",")
  765. // options that MUST be specifically set 'per-pane' - CANNOT set in the panes (defaults) key
  766. , noDefault: ("paneSelector,resizerCursor,customHotkey").split(",")
  767. };
  768. /**
  769. * Processes options passed in converts flat-format data into subkey (JSON) format
  770. * In flat-format, subkeys are _currently_ separated with 2 underscores, like north__optName
  771. * Plugins may also call this method so they can transform their own data
  772. *
  773. * @param {!Object} hash Data/options passed by user - may be a single level or nested levels
  774. * @param {boolean=} [addKeys=false] Should the primary layout.options keys be added if they do not exist?
  775. * @return {Object} Returns hash of minWidth & minHeight
  776. */
  777. $.layout.transformData = function (hash, addKeys) {
  778. var json = addKeys ? { panes: {}, center: {} } : {} // init return object
  779. , branch, optKey, keys, key, val, i, c;
  780. if (typeof hash !== "object") return json; // no options passed
  781. // convert all 'flat-keys' to 'sub-key' format
  782. for (optKey in hash) {
  783. branch = json;
  784. val = hash[ optKey ];
  785. keys = optKey.split("__"); // eg: west__size or north__fxSettings__duration
  786. c = keys.length - 1;
  787. // convert underscore-delimited to subkeys
  788. for (i=0; i <= c; i++) {
  789. key = keys[i];
  790. if (i === c) { // last key = value
  791. if ($.isPlainObject( val ))
  792. branch[key] = $.layout.transformData( val ); // RECURSE
  793. else
  794. branch[key] = val;
  795. }
  796. else {
  797. if (!branch[key])
  798. branch[key] = {}; // create the subkey
  799. // recurse to sub-key for next loop - if not done
  800. branch = branch[key];
  801. }
  802. }
  803. }
  804. return json;
  805. };
  806. // INTERNAL CONFIG DATA - DO NOT CHANGE THIS!
  807. $.layout.backwardCompatibility = {
  808. // data used by renameOldOptions()
  809. map: {
  810. // OLD Option Name: NEW Option Name
  811. applyDefaultStyles: "applyDemoStyles"
  812. // CHILD/NESTED LAYOUTS
  813. , childOptions: "children"
  814. , initChildLayout: "initChildren"
  815. , destroyChildLayout: "destroyChildren"
  816. , resizeChildLayout: "resizeChildren"
  817. , resizeNestedLayout: "resizeChildren"
  818. // MISC Options
  819. , resizeWhileDragging: "livePaneResizing"
  820. , resizeContentWhileDragging: "liveContentResizing"
  821. , triggerEventsWhileDragging: "triggerEventsDuringLiveResize"
  822. , maskIframesOnResize: "maskContents"
  823. // STATE MANAGEMENT
  824. , useStateCookie: "stateManagement.enabled"
  825. , "cookie.autoLoad": "stateManagement.autoLoad"
  826. , "cookie.autoSave": "stateManagement.autoSave"
  827. , "cookie.keys": "stateManagement.stateKeys"
  828. , "cookie.name": "stateManagement.cookie.name"
  829. , "cookie.domain": "stateManagement.cookie.domain"
  830. , "cookie.path": "stateManagement.cookie.path"
  831. , "cookie.expires": "stateManagement.cookie.expires"
  832. , "cookie.secure": "stateManagement.cookie.secure"
  833. // OLD Language options
  834. , noRoomToOpenTip: "tips.noRoomToOpen"
  835. , togglerTip_open: "tips.Close" // open = Close
  836. , togglerTip_closed: "tips.Open" // closed = Open
  837. , resizerTip: "tips.Resize"
  838. , sliderTip: "tips.Slide"
  839. }
  840. /**
  841. * @param {Object} opts
  842. */
  843. , renameOptions: function (opts) {
  844. var map = $.layout.backwardCompatibility.map
  845. , oldData, newData, value
  846. ;
  847. for (var itemPath in map) {
  848. oldData = getBranch( itemPath );
  849. value = oldData.branch[ oldData.key ];
  850. if (value !== undefined) {
  851. newData = getBranch( map[itemPath], true );
  852. newData.branch[ newData.key ] = value;
  853. delete oldData.branch[ oldData.key ];
  854. }
  855. }
  856. /**
  857. * @param {string} path
  858. * @param {boolean=} [create=false] Create path if does not exist
  859. */
  860. function getBranch (path, create) {
  861. var a = path.split(".") // split keys into array
  862. , c = a.length - 1
  863. , D = { branch: opts, key: a[c] } // init branch at top & set key (last item)
  864. , i = 0, k, undef;
  865. for (; i<c; i++) { // skip the last key (data)
  866. k = a[i];
  867. if (D.branch[ k ] == undefined) { // child-key does not exist
  868. if (create) {
  869. D.branch = D.branch[ k ] = {}; // create child-branch
  870. }
  871. else // can't go any farther
  872. D.branch = {}; // branch is undefined
  873. }
  874. else
  875. D.branch = D.branch[ k ]; // get child-branch
  876. }
  877. return D;
  878. };
  879. }
  880. /**
  881. * @param {Object} opts
  882. */
  883. , renameAllOptions: function (opts) {
  884. var ren = $.layout.backwardCompatibility.renameOptions;
  885. // rename root (layout) options
  886. ren( opts );
  887. // rename 'defaults' to 'panes'
  888. if (opts.defaults) {
  889. if (typeof opts.panes !== "object")
  890. opts.panes = {};
  891. $.extend(true, opts.panes, opts.defaults);
  892. delete opts.defaults;
  893. }
  894. // rename options in the the options.panes key
  895. if (opts.panes) ren( opts.panes );
  896. // rename options inside *each pane key*, eg: options.west
  897. $.each($.layout.config.allPanes, function (i, pane) {
  898. if (opts[pane]) ren( opts[pane] );
  899. });
  900. return opts;
  901. }
  902. };
  903. /* ============================================================
  904. * BEGIN WIDGET: $( selector ).layout( {options} );
  905. * ============================================================
  906. */
  907. $.fn.layout = function (opts) {
  908. var
  909. // local aliases to global data
  910. browser = $.layout.browser
  911. , _c = $.layout.config
  912. // local aliases to utlity methods
  913. , cssW = $.layout.cssWidth
  914. , cssH = $.layout.cssHeight
  915. , elDims = $.layout.getElementDimensions
  916. , styles = $.layout.getElementStyles
  917. , evtObj = $.layout.getEventObject
  918. , evtPane = $.layout.parsePaneName
  919. /**
  920. * options - populated by initOptions()
  921. */
  922. , options = $.extend(true, {}, $.layout.defaults)
  923. , effects = options.effects = $.extend(true, {}, $.layout.effects)
  924. /**
  925. * layout-state object
  926. */
  927. , state = {
  928. // generate unique ID to use for event.namespace so can unbind only events added by 'this layout'
  929. id: "layout"+ $.now() // code uses alias: sID
  930. , initialized: false
  931. , paneResizing: false
  932. , panesSliding: {}
  933. , container: { // list all keys referenced in code to avoid compiler error msgs
  934. innerWidth: 0
  935. , innerHeight: 0
  936. , outerWidth: 0
  937. , outerHeight: 0
  938. , layoutWidth: 0
  939. , layoutHeight: 0
  940. }
  941. , north: { childIdx: 0 }
  942. , south: { childIdx: 0 }
  943. , east: { childIdx: 0 }
  944. , west: { childIdx: 0 }
  945. , center: { childIdx: 0 }
  946. }
  947. /**
  948. * parent/child-layout pointers
  949. */
  950. //, hasParentLayout = false - exists ONLY inside Instance so can be set externally
  951. , children = {
  952. north: null
  953. , south: null
  954. , east: null
  955. , west: null
  956. , center: null
  957. }
  958. /*
  959. * ###########################
  960. * INTERNAL HELPER FUNCTIONS
  961. * ###########################
  962. */
  963. /**
  964. * Manages all internal timers
  965. */
  966. , timer = {
  967. data: {}
  968. , set: function (s, fn, ms) { timer.clear(s); timer.data[s] = setTimeout(fn, ms); }
  969. , clear: function (s) { var t=timer.data; if (t[s]) {clearTimeout(t[s]); delete t[s];} }
  970. }
  971. /**
  972. * Alert or console.log a message - IF option is enabled.
  973. *
  974. * @param {(string|!Object)} msg Message (or debug-data) to display
  975. * @param {boolean=} [popup=false] True by default, means 'alert', false means use console.log
  976. * @param {boolean=} [debug=false] True means is a widget debugging message
  977. */
  978. , _log = function (msg, popup, debug) {
  979. var o = options;
  980. if ((o.showErrorMessages && !debug) || (debug && o.showDebugMessages))
  981. $.layout.msg( o.name +' / '+ msg, (popup !== false) );
  982. return false;
  983. }
  984. /**
  985. * Executes a Callback function after a trigger event, like resize, open or close
  986. *
  987. * @param {string} evtName Name of the layout callback, eg "onresize_start"
  988. * @param {(string|boolean)=} [pane=""] This is passed only so we can pass the 'pane object' to the callback
  989. * @param {(string|boolean)=} [skipBoundEvents=false] True = do not run events bound to the elements - only the callbacks set in options
  990. */
  991. , _runCallbacks = function (evtName, pane, skipBoundEvents) {
  992. var hasPane = pane && isStr(pane)
  993. , s = hasPane ? state[pane] : state
  994. , o = hasPane ? options[pane] : options
  995. , lName = options.name
  996. // names like onopen and onopen_end separate are interchangeable in options...
  997. , lng = evtName + (evtName.match(/_/) ? "" : "_end")
  998. , shrt = lng.match(/_end$/) ? lng.substr(0, lng.length - 4) : ""
  999. , fn = o[lng] || o[shrt]
  1000. , retVal = "NC" // NC = No Callback
  1001. , args = []
  1002. , $P
  1003. ;
  1004. if ( !hasPane && $.type(pane) === 'boolean' ) {
  1005. skipBoundEvents = pane; // allow pane param to be skipped for Layout callback
  1006. pane = "";
  1007. }
  1008. // first trigger the callback set in the options
  1009. if (fn) {
  1010. try {
  1011. // convert function name (string) to function object
  1012. if (isStr( fn )) {
  1013. if (fn.match(/,/)) {
  1014. // function name cannot contain a comma,
  1015. // so must be a function name AND a parameter to pass
  1016. args = fn.split(",")
  1017. , fn = eval(args[0]);
  1018. }
  1019. else // just the name of an external function?
  1020. fn = eval(fn);
  1021. }
  1022. // execute the callback, if exists
  1023. if ($.isFunction( fn )) {
  1024. if (args.length)
  1025. retVal = g(fn)(args[1]); // pass the argument parsed from 'list'
  1026. else if ( hasPane )
  1027. // pass data: pane-name, pane-element, pane-state, pane-options, and layout-name
  1028. retVal = g(fn)( pane, $Ps[pane], s, o, lName );
  1029. else // must be a layout/container callback - pass suitable info
  1030. retVal = g(fn)( Instance, s, o, lName );
  1031. }
  1032. }
  1033. catch (ex) {
  1034. _log( options.errors.callbackError.replace(/EVENT/, $.trim((pane || "") +" "+ lng)), false );
  1035. if ($.type(ex) === 'string' && string.length)
  1036. _log('Exception: '+ ex, false );
  1037. }
  1038. }
  1039. // trigger additional events bound directly to the pane
  1040. if (!skipBoundEvents && retVal !== false) {
  1041. if ( hasPane ) { // PANE events can be bound to each pane-elements
  1042. $P = $Ps[pane];
  1043. o = options[pane];
  1044. s = state[pane];
  1045. $P.triggerHandler('layoutpane'+ lng, [ pane, $P, s, o, lName ]);
  1046. if (shrt)
  1047. $P.triggerHandler('layoutpane'+ shrt, [ pane, $P, s, o, lName ]);
  1048. }
  1049. else { // LAYOUT events can be bound to the container-element
  1050. $N.triggerHandler('layout'+ lng, [ Instance, s, o, lName ]);
  1051. if (shrt)
  1052. $N.triggerHandler('layout'+ shrt, [ Instance, s, o, lName ]);
  1053. }
  1054. }
  1055. // ALWAYS resizeChildren after an onresize_end event - even during initialization
  1056. // IGNORE onsizecontent_end event because causes child-layouts to resize TWICE
  1057. if (hasPane && evtName === "onresize_end") // BAD: || evtName === "onsizecontent_end"
  1058. resizeChildren(pane+"", true); // compiler hack -force string
  1059. return retVal;
  1060. function g (f) { return f; }; // compiler hack
  1061. }
  1062. /**
  1063. * cure iframe display issues in IE & other browsers
  1064. */
  1065. , _fixIframe = function (pane) {
  1066. if (browser.mozilla) return; // skip FireFox - it auto-refreshes iframes onShow
  1067. var $P = $Ps[pane];
  1068. // if the 'pane' is an iframe, do it
  1069. if (state[pane].tagName === "IFRAME")
  1070. $P.css(_c.hidden).css(_c.visible);
  1071. else // ditto for any iframes INSIDE the pane
  1072. $P.find('IFRAME').css(_c.hidden).css(_c.visible);
  1073. }
  1074. /**
  1075. * @param {string} pane Can accept ONLY a 'pane' (east, west, etc)
  1076. * @param {number=} outerSize (optional) Can pass a width, allowing calculations BEFORE element is resized
  1077. * @return {number} Returns the innerHeight/Width of el by subtracting padding and borders
  1078. */
  1079. , cssSize = function (pane, outerSize) {
  1080. var fn = _c[pane].dir=="horz" ? cssH : cssW;
  1081. return fn($Ps[pane], outerSize);
  1082. }
  1083. /**
  1084. * @param {string} pane Can accept ONLY a 'pane' (east, west, etc)
  1085. * @return {Object} Returns hash of minWidth & minHeight
  1086. */
  1087. , cssMinDims = function (pane) {
  1088. // minWidth/Height means CSS width/height = 1px
  1089. var $P = $Ps[pane]
  1090. , dir = _c[pane].dir
  1091. , d = {
  1092. minWidth: 1001 - cssW($P, 1000)
  1093. , minHeight: 1001 - cssH($P, 1000)
  1094. }
  1095. ;
  1096. if (dir === "horz") d.minSize = d.minHeight;
  1097. if (dir === "vert") d.minSize = d.minWidth;
  1098. return d;
  1099. }
  1100. // TODO: see if these methods can be made more useful...
  1101. // TODO: *maybe* return cssW/H from these so caller can use this info
  1102. /**
  1103. * @param {(string|!Object)} el
  1104. * @param {number=} outerWidth
  1105. * @param {boolean=} [autoHide=false]
  1106. */
  1107. , setOuterWidth = function (el, outerWidth, autoHide) {
  1108. var $E = el, w;
  1109. if (isStr(el)) $E = $Ps[el]; // west
  1110. else if (!el.jquery) $E = $(el);
  1111. w = cssW($E, outerWidth);
  1112. $E.css({ width: w });
  1113. if (w > 0) {
  1114. if (autoHide && $E.data('autoHidden') && $E.innerHeight() > 0) {
  1115. $E.show().data('autoHidden', false);
  1116. if (!browser.mozilla) // FireFox refreshes iframes - IE does not
  1117. // make hidden, then visible to 'refresh' display after animation
  1118. $E.css(_c.hidden).css(_c.visible);
  1119. }
  1120. }
  1121. else if (autoHide && !$E.data('autoHidden'))
  1122. $E.hide().data('autoHidden', true);
  1123. }
  1124. /**
  1125. * @param {(string|!Object)} el
  1126. * @param {number=} outerHeight
  1127. * @param {boolean=} [autoHide=false]
  1128. */
  1129. , setOuterHeight = function (el, outerHeight, autoHide) {
  1130. var $E = el, h;
  1131. if (isStr(el)) $E = $Ps[el]; // west
  1132. else if (!el.jquery) $E = $(el);
  1133. h = cssH($E, outerHeight);
  1134. $E.css({ height: h, visibility: "visible" }); // may have been 'hidden' by sizeContent
  1135. if (h > 0 && $E.innerWidth() > 0) {
  1136. if (autoHide && $E.data('autoHidden')) {
  1137. $E.show().data('autoHidden', false);
  1138. if (!browser.mozilla) // FireFox refreshes iframes - IE does not
  1139. $E.css(_c.hidden).css(_c.visible);
  1140. }
  1141. }
  1142. else if (autoHide && !$E.data('autoHidden'))
  1143. $E.hide().data('autoHidden', true);
  1144. }
  1145. /**
  1146. * Converts any 'size' params to a pixel/integer size, if not already
  1147. * If 'auto' or a decimal/percentage is passed as 'size', a pixel-size is calculated
  1148. *
  1149. /**
  1150. * @param {string} pane
  1151. * @param {(string|number)=} size
  1152. * @param {string=} [dir]
  1153. * @return {number}
  1154. */
  1155. , _parseSize = function (pane, size, dir) {
  1156. if (!dir) dir = _c[pane].dir;
  1157. if (isStr(size) && size.match(/%/))
  1158. size = (size === '100%') ? -1 : parseInt(size, 10) / 100; // convert % to decimal
  1159. if (size === 0)
  1160. return 0;
  1161. else if (size >= 1)
  1162. return parseInt(size, 10);
  1163. var o = options, avail = 0;
  1164. if (dir=="horz") // north or south or center.minHeight
  1165. avail = sC.innerHeight - ($Ps.north ? o.north.spacing_open : 0) - ($Ps.south ? o.south.spacing_open : 0);
  1166. else if (dir=="vert") // east or west or center.minWidth
  1167. avail = sC.innerWidth - ($Ps.west ? o.west.spacing_open : 0) - ($Ps.east ? o.east.spacing_open : 0);
  1168. if (size === -1) // -1 == 100%
  1169. return avail;
  1170. else if (size > 0) // percentage, eg: .25
  1171. return round(avail * size);
  1172. else if (pane=="center")
  1173. return 0;
  1174. else { // size < 0 || size=='auto' || size==Missing || size==Invalid
  1175. // auto-size the pane
  1176. var dim = (dir === "horz" ? "height" : "width")
  1177. , $P = $Ps[pane]
  1178. , $C = dim === 'height' ? $Cs[pane] : false
  1179. , vis = $.layout.showInvisibly($P) // show pane invisibly if hidden
  1180. , szP = $P.css(dim) // SAVE current pane size
  1181. , szC = $C ? $C.css(dim) : 0 // SAVE current content size
  1182. ;
  1183. $P.css(dim, "auto");
  1184. if ($C) $C.css(dim, "auto");
  1185. size = (dim === "height") ? $P.outerHeight() : $P.outerWidth(); // MEASURE
  1186. $P.css(dim, szP).css(vis); // RESET size & visibility
  1187. if ($C) $C.css(dim, szC);
  1188. return size;
  1189. }
  1190. }
  1191. /**
  1192. * Calculates current 'size' (outer-width or outer-height) of a border-pane - optionally with 'pane-spacing' added
  1193. *
  1194. * @param {(string|!Object)} pane
  1195. * @param {boolean=} [inclSpace=false]
  1196. * @return {number} Returns EITHER Width for east/west panes OR Height for north/south panes
  1197. */
  1198. , getPaneSize = function (pane, inclSpace) {
  1199. var
  1200. $P = $Ps[pane]
  1201. , o = options[pane]
  1202. , s = state[pane]
  1203. , oSp = (inclSpace ? o.spacing_open : 0)
  1204. , cSp = (inclSpace ? o.spacing_closed : 0)
  1205. ;
  1206. if (!$P || s.isHidden)
  1207. return 0;
  1208. else if (s.isClosed || (s.isSliding && inclSpace))
  1209. return cSp;
  1210. else if (_c[pane].dir === "horz")
  1211. return $P.outerHeight() + oSp;
  1212. else // dir === "vert"
  1213. return $P.outerWidth() + oSp;
  1214. }
  1215. /**
  1216. * Calculate min/max pane dimensions and limits for resizing
  1217. *
  1218. * @param {string} pane
  1219. * @param {boolean=} [slide=false]
  1220. */
  1221. , setSizeLimits = function (pane, slide) {
  1222. if (!isInitialized()) return;
  1223. var
  1224. o = options[pane]
  1225. , s = state[pane]
  1226. , c = _c[pane]
  1227. , dir = c.dir
  1228. , type = c.sizeType.toLowerCase()
  1229. , isSliding = (slide != undefined ? slide : s.isSliding) // only open() passes 'slide' param
  1230. , $P = $Ps[pane]
  1231. , paneSpacing = o.spacing_open
  1232. // measure the pane on the *opposite side* from this pane
  1233. , altPane = _c.oppositeEdge[pane]
  1234. , altS = state[altPane]
  1235. , $altP = $Ps[altPane]
  1236. , altPaneSize = (!$altP || altS.isVisible===false || altS.isSliding ? 0 : (dir=="horz" ? $altP.outerHeight() : $altP.outerWidth()))
  1237. , altPaneSpacing = ((!$altP || altS.isHidden ? 0 : options[altPane][ altS.isClosed !== false ? "spacing_closed" : "spacing_open" ]) || 0)
  1238. // limitSize prevents this pane from 'overlapping' opposite pane
  1239. , containerSize = (dir=="horz" ? sC.innerHeight : sC.innerWidth)
  1240. , minCenterDims = cssMinDims("center")
  1241. , minCenterSize = dir=="horz" ? max(options.center.minHeight, minCenterDims.minHeight) : max(options.center.minWidth, minCenterDims.minWidth)
  1242. // if pane is 'sliding', then ignore center and alt-pane sizes - because 'overlays' them
  1243. , limitSize = (containerSize - paneSpacing - (isSliding ? 0 : (_parseSize("center", minCenterSize, dir) + altPaneSize + altPaneSpacing)))
  1244. , minSize = s.minSize = max( _parseSize(pane, o.minSize), cssMinDims(pane).minSize )
  1245. , maxSize = s.maxSize = min( (o.maxSize ? _parseSize(pane, o.maxSize) : 100000), limitSize )
  1246. , r = s.resizerPosition = {} // used to set resizing limits
  1247. , top = sC.inset.top
  1248. , left = sC.inset.left
  1249. , W = sC.innerWidth
  1250. , H = sC.innerHeight
  1251. , rW = o.spacing_open // subtract resizer-width to get top/left position for south/east
  1252. ;
  1253. switch (pane) {
  1254. case "north": r.min = top + minSize;
  1255. r.max = top + maxSize;
  1256. break;
  1257. case "west": r.min = left + minSize;
  1258. r.max = left + maxSize;
  1259. break;
  1260. case "south": r.min = top + H - maxSize - rW;
  1261. r.max = top + H - minSize - rW;
  1262. break;
  1263. case "east": r.min = left + W - maxSize - rW;
  1264. r.max = left + W - minSize - rW;
  1265. break;
  1266. };
  1267. }
  1268. /**
  1269. * Returns data for setting the size/position of center pane. Also used to set Height for east/west panes
  1270. *
  1271. * @return JSON Returns a hash of all dimensions: top, bottom, left, right, (outer) width and (outer) height
  1272. */
  1273. , calcNewCenterPaneDims = function () {
  1274. var d = {
  1275. top: getPaneSize("north", true) // true = include 'spacing' value for pane
  1276. , bottom: getPaneSize("south", true)
  1277. , left: getPaneSize("west", true)
  1278. , right: getPaneSize("east", true)
  1279. , width: 0
  1280. , height: 0
  1281. };
  1282. // NOTE: sC = state.container
  1283. // calc center-pane outer dimensions
  1284. d.width = sC.innerWidth - d.left - d.right; // outerWidth
  1285. d.height = sC.innerHeight - d.bottom - d.top; // outerHeight
  1286. // add the 'container border/padding' to get final positions relative to the container
  1287. d.top += sC.inset.top;
  1288. d.bottom += sC.inset.bottom;
  1289. d.left += sC.inset.left;
  1290. d.right += sC.inset.right;
  1291. return d;
  1292. }
  1293. /**
  1294. * @param {!Object} el
  1295. * @param {boolean=} [allStates=false]
  1296. */
  1297. , getHoverClasses = function (el, allStates) {
  1298. var
  1299. $El = $(el)
  1300. , type = $El.data("layoutRole")
  1301. , pane = $El.data("layoutEdge")
  1302. , o = options[pane]
  1303. , root = o[type +"Class"]
  1304. , _pane = "-"+ pane // eg: "-west"
  1305. , _open = "-open"
  1306. , _closed = "-closed"
  1307. , _slide = "-sliding"
  1308. , _hover = "-hover " // NOTE the trailing space
  1309. , _state = $El.hasClass(root+_closed) ? _closed : _open
  1310. , _alt = _state === _closed ? _open : _closed
  1311. , classes = (root+_hover) + (root+_pane+_hover) + (root+_state+_hover) + (root+_pane+_state+_hover)
  1312. ;
  1313. if (allStates) // when 'removing' classes, also remove alternate-state classes
  1314. classes += (root+_alt+_hover) + (root+_pane+_alt+_hover);
  1315. if (type=="resizer" && $El.hasClass(root+_slide))
  1316. classes += (root+_slide+_hover) + (root+_pane+_slide+_hover);
  1317. return $.trim(classes);
  1318. }
  1319. , addHover = function (evt, el) {
  1320. var $E = $(el || this);
  1321. if (evt && $E.data("layoutRole") === "toggler")
  1322. evt.stopPropagation(); // prevent triggering 'slide' on Resizer-bar
  1323. $E.addClass( getHoverClasses($E) );
  1324. }
  1325. , removeHover = function (evt, el) {
  1326. var $E = $(el || this);
  1327. $E.removeClass( getHoverClasses($E, true) );
  1328. }
  1329. , onResizerEnter = function (evt) { // ALSO called by toggler.mouseenter
  1330. var pane = $(this).data("layoutEdge")
  1331. , s = state[pane]
  1332. ;
  1333. // ignore closed-panes and mouse moving back & forth over resizer!
  1334. // also ignore if ANY pane is currently resizing
  1335. if ( s.isClosed || s.isResizing || state.paneResizing ) return;
  1336. if ($.fn.disableSelection)
  1337. $("body").disableSelection();
  1338. if (options.maskPanesEarly)
  1339. showMasks( pane, { resizing: true });
  1340. }
  1341. , onResizerLeave = function (evt, el) {
  1342. var e = el || this // el is only passed when called by the timer
  1343. , pane = $(e).data("layoutEdge")
  1344. , name = pane +"ResizerLeave"
  1345. ;
  1346. timer.clear(pane+"_openSlider"); // cancel slideOpen timer, if set
  1347. timer.clear(name); // cancel enableSelection timer - may re/set below
  1348. // this method calls itself on a timer because it needs to allow
  1349. // enough time for dragging to kick-in and set the isResizing flag
  1350. // dragging has a 100ms delay set, so this delay must be >100
  1351. if (!el) // 1st call - mouseleave event
  1352. timer.set(name, function(){ onResizerLeave(evt, e); }, 200);
  1353. // if user is resizing, then dragStop will enableSelection(), so can skip it here
  1354. else if ( !state.paneResizing ) { // 2nd call - by timer
  1355. if ($.fn.enableSelection)
  1356. $("body").enableSelection();
  1357. if (options.maskPanesEarly)
  1358. hideMasks();
  1359. }
  1360. }
  1361. /*
  1362. * ###########################
  1363. * INITIALIZATION METHODS
  1364. * ###########################
  1365. */
  1366. /**
  1367. * Initialize the layout - called automatically whenever an instance of layout is created
  1368. *
  1369. * @see none - triggered onInit
  1370. * @return mixed true = fully initialized | false = panes not initialized (yet) | 'cancel' = abort
  1371. */
  1372. , _create = function () {
  1373. // initialize config/options
  1374. initOptions();
  1375. var o = options
  1376. , s = state;
  1377. // TEMP state so isInitialized returns true during init process
  1378. s.creatingLayout = true;
  1379. // init plugins for this layout, if there are any (eg: stateManagement)
  1380. runPluginCallbacks( Instance, $.layout.onCreate );
  1381. // options & state have been initialized, so now run beforeLoad callback
  1382. // onload will CANCEL layout creation if it returns false
  1383. if (false === _runCallbacks("onload_start"))
  1384. return 'cancel';
  1385. // initialize the container element
  1386. _initContainer();
  1387. // bind hotkey function - keyDown - if required
  1388. initHotkeys();
  1389. // bind window.onunload
  1390. $(window).bind("unload."+ sID, unload);
  1391. // init plugins for this layout, if there are any (eg: customButtons)
  1392. runPluginCallbacks( Instance, $.layout.onLoad );
  1393. // if layout elements are hidden, then layout WILL NOT complete initialization!
  1394. // initLayoutElements will set initialized=true and run the onload callback IF successful
  1395. if (o.initPanes) _initLayoutElements();
  1396. delete s.creatingLayout;
  1397. return state.initialized;
  1398. }
  1399. /**
  1400. * Initialize the layout IF not already
  1401. *
  1402. * @see All methods in Instance run this test
  1403. * @return boolean true = layoutElements have been initialized | false = panes are not initialized (yet)
  1404. */
  1405. , isInitialized = function () {
  1406. if (state.initialized || state.creatingLayout) return true; // already initialized
  1407. else return _initLayoutElements(); // try to init panes NOW
  1408. }
  1409. /**
  1410. * Initialize the layout - called automatically whenever an instance of layout is created
  1411. *
  1412. * @see _create() & isInitialized
  1413. * @param {boolean=} [retry=false] // indicates this is a 2nd try
  1414. * @return An object pointer to the instance created
  1415. */
  1416. , _initLayoutElements = function (retry) {
  1417. // initialize config/options
  1418. var o = options;
  1419. // CANNOT init panes inside a hidden container!
  1420. if (!$N.is(":visible")) {
  1421. // handle Chrome bug where popup window 'has no height'
  1422. // if layout is BODY element, try again in 50ms
  1423. // SEE: http://layout.jquery-dev.net/samples/test_popup_window.html
  1424. if ( !retry && browser.webkit && $N[0].tagName === "BODY" )
  1425. setTimeout(function(){ _initLayoutElements(true); }, 50);
  1426. return false;
  1427. }
  1428. // a center pane is required, so make sure it exists
  1429. if (!getPane("center").length) {
  1430. return _log( o.errors.centerPaneMissing );
  1431. }
  1432. // TEMP state so isInitialized returns true during init process
  1433. state.creatingLayout = true;
  1434. // update Container dims
  1435. $.extend(sC, elDims( $N, o.inset )); // passing inset means DO NOT include insetX values
  1436. // initialize all layout elements
  1437. initPanes(); // size & position panes - calls initHandles() - which calls initResizable()
  1438. if (o.scrollToBookmarkOnLoad) {
  1439. var l = self.location;
  1440. if (l.hash) l.replace( l.hash ); // scrollTo Bookmark
  1441. }
  1442. // check to see if this layout 'nested' inside a pane
  1443. if (Instance.hasParentLayout)
  1444. o.resizeWithWindow = false;
  1445. // bind resizeAll() for 'this layout instance' to window.resize event
  1446. else if (o.resizeWithWindow)
  1447. $(window).bind("resize."+ sID, windowResize);
  1448. delete state.creatingLayout;
  1449. state.initialized = true;
  1450. // init plugins for this layout, if there are any
  1451. runPluginCallbacks( Instance, $.layout.onReady );
  1452. // now run the onload callback, if exists
  1453. _runCallbacks("onload_end");
  1454. return true; // elements initialized successfully
  1455. }
  1456. /**
  1457. * Initialize nested layouts for a specific pane - can optionally pass layout-options
  1458. *
  1459. * @param {(string|Object)} evt_or_pane The pane being opened, ie: north, south, east, or west
  1460. * @param {Object=} [opts] Layout-options - if passed, will OVERRRIDE options[pane].children
  1461. * @return An object pointer to the layout instance created - or null
  1462. */
  1463. , createChildren = function (evt_or_pane, opts) {
  1464. var pane = evtPane.call(this, evt_or_pane)
  1465. , $P = $Ps[pane]
  1466. ;
  1467. if (!$P) return;
  1468. var $C = $Cs[pane]
  1469. , s = state[pane]
  1470. , o = options[pane]
  1471. , sm = options.stateManagement || {}
  1472. , cos = opts ? (o.children = opts) : o.children
  1473. ;
  1474. if ( $.isPlainObject( cos ) )
  1475. cos = [ cos ]; // convert a hash to a 1-elem array
  1476. else if (!cos || !$.isArray( cos ))
  1477. return;
  1478. $.each( cos, function (idx, co) {
  1479. if ( !$.isPlainObject( co ) ) return;
  1480. // determine which element is supposed to be the 'child container'
  1481. // if pane has a 'containerSelector' OR a 'content-div', use those instead of the pane
  1482. var $containers = co.containerSelector ? $P.find( co.containerSelector ) : ($C || $P);
  1483. $containers.each(function(){
  1484. var $cont = $(this)
  1485. , child = $cont.data("layout") // see if a child-layout ALREADY exists on this element
  1486. ;
  1487. // if no layout exists, but children are set, try to create the layout now
  1488. if (!child) {
  1489. // TODO: see about moving this to the stateManagement plugin, as a method
  1490. // set a unique child-instance key for this layout, if not already set
  1491. setInstanceKey({ container: $cont, options: co }, s );
  1492. // If THIS layout has a hash in stateManagement.autoLoad,
  1493. // then see if it also contains state-data for this child-layout
  1494. // If so, copy the stateData to child.options.stateManagement.autoLoad
  1495. if ( sm.includeChildren && state.stateData[pane] ) {
  1496. // THIS layout's state was cached when its state was loaded
  1497. var paneChildren = state.stateData[pane].children || {}
  1498. , childState = paneChildren[ co.instanceKey ]
  1499. , co_sm = co.stateManagement || (co.stateManagement = { autoLoad: true })
  1500. ;
  1501. // COPY the stateData into the autoLoad key
  1502. if ( co_sm.autoLoad === true && childState ) {
  1503. co_sm.autoSave = false; // disable autoSave because saving handled by parent-layout
  1504. co_sm.includeChildren = true; // cascade option - FOR NOW
  1505. co_sm.autoLoad = $.extend(true, {}, childState); // COPY the state-hash
  1506. }
  1507. }
  1508. // create the layout
  1509. child = $cont.layout( co );
  1510. // if successful, update data
  1511. if (child) {
  1512. // add the child and update all layout-pointers
  1513. // MAY have already been done by child-layout calling parent.refreshChildren()
  1514. refreshChildren( pane, child );
  1515. }
  1516. }
  1517. });
  1518. });
  1519. }
  1520. , setInstanceKey = function (child, parentPaneState) {
  1521. // create a named key for use in state and instance branches
  1522. var $c = child.container
  1523. , o = child.options
  1524. , sm = o.stateManagement
  1525. , key = o.instanceKey || $c.data("layoutInstanceKey")
  1526. ;
  1527. if (!key) key = (sm && sm.cookie ? sm.cookie.name : '') || o.name; // look for a name/key
  1528. if (!key) key = "layout"+ (++parentPaneState.childIdx); // if no name/key found, generate one
  1529. else key = key.replace(/[^\w-]/gi, '_').replace(/_{2,}/g, '_'); // ensure is valid as a hash key
  1530. o.instanceKey = key;
  1531. $c.data("layoutInstanceKey", key); // useful if layout is destroyed and then recreated
  1532. return key;
  1533. }
  1534. /**
  1535. * @param {string} pane The pane being opened, ie: north, south, east, or west
  1536. * @param {Object=} newChild New child-layout Instance to add to this pane
  1537. */
  1538. , refreshChildren = function (pane, newChild) {
  1539. var $P = $Ps[pane]
  1540. , pC = children[pane]
  1541. , s = state[pane]
  1542. , o
  1543. ;
  1544. // check for destroy()ed layouts and update the child pointers & arrays
  1545. if ($.isPlainObject( pC )) {
  1546. $.each( pC, function (key, child) {
  1547. if (child.destroyed) delete pC[key]
  1548. });
  1549. // if no more children, remove the children hash
  1550. if ($.isEmptyObject( pC ))
  1551. pC = children[pane] = null; // clear children hash
  1552. }
  1553. // see if there is a directly-nested layout inside this pane
  1554. // if there is, then there can be only ONE child-layout, so check that...
  1555. if (!newChild && !pC) {
  1556. newChild = $P.data("layout");
  1557. }
  1558. // if a newChild instance was passed, add it to children[pane]
  1559. if (newChild) {
  1560. // update child.state
  1561. newChild.hasParentLayout = true; // set parent-flag in child
  1562. // instanceKey is a key-name used in both state and children
  1563. o = newChild.options;
  1564. // set a unique child-instance key for this layout, if not already set
  1565. setInstanceKey( newChild, s );
  1566. // add pointer to pane.children hash
  1567. if (!pC) pC = children[pane] = {}; // create an empty children hash
  1568. pC[ o.instanceKey ] = newChild.container.data("layout"); // add childLayout instance
  1569. }
  1570. // ALWAYS refresh the pane.children alias, even if null
  1571. Instance[pane].children = children[pane];
  1572. // if newChild was NOT passed - see if there is a child layout NOW
  1573. if (!newChild) {
  1574. createChildren(pane); // MAY create a child and re-call this method
  1575. }
  1576. }
  1577. , windowResize = function () {
  1578. var o = options
  1579. , delay = Number(o.resizeWithWindowDelay);
  1580. if (delay < 10) delay = 100; // MUST have a delay!
  1581. // resizing uses a delay-loop because the resize event fires repeatly - except in FF, but delay anyway
  1582. timer.clear("winResize"); // if already running
  1583. timer.set("winResize", function(){
  1584. timer.clear("winResize");
  1585. timer.clear("winResizeRepeater");
  1586. var dims = elDims( $N, o.inset );
  1587. // only trigger resizeAll() if container has changed size
  1588. if (dims.innerWidth !== sC.innerWidth || dims.innerHeight !== sC.innerHeight)
  1589. resizeAll();
  1590. }, delay);
  1591. // ALSO set fixed-delay timer, if not already running
  1592. if (!timer.data["winResizeRepeater"]) setWindowResizeRepeater();
  1593. }
  1594. , setWindowResizeRepeater = function () {
  1595. var delay = Number(options.resizeWithWindowMaxDelay);
  1596. if (delay > 0)
  1597. timer.set("winResizeRepeater", function(){ setWindowResizeRepeater(); resizeAll(); }, delay);
  1598. }
  1599. , unload = function () {
  1600. var o = options;
  1601. _runCallbacks("onunload_start");
  1602. // trigger plugin callabacks for this layout (eg: stateManagement)
  1603. runPluginCallbacks( Instance, $.layout.onUnload );
  1604. _runCallbacks("onunload_end");
  1605. }
  1606. /**
  1607. * Validate and initialize container CSS and events
  1608. *
  1609. * @see _create()
  1610. */
  1611. , _initContainer = function () {
  1612. var
  1613. N = $N[0]
  1614. , $H = $("html")
  1615. , tag = sC.tagName = N.tagName
  1616. , id = sC.id = N.id
  1617. , cls = sC.className = N.className
  1618. , o = options
  1619. , name = o.name
  1620. , props = "position,margin,padding,border"
  1621. , css = "layoutCSS"
  1622. , CSS = {}
  1623. , hid = "hidden" // used A LOT!
  1624. // see if this container is a 'pane' inside an outer-layout
  1625. , parent = $N.data("parentLayout") // parent-layout Instance
  1626. , pane = $N.data("layoutEdge") // pane-name in parent-layout
  1627. , isChild = parent && pane
  1628. , num = $.layout.cssNum
  1629. , $parent, n
  1630. ;
  1631. // sC = state.container
  1632. sC.selector = $N.selector.split(".slice")[0];
  1633. sC.ref = (o.name ? o.name +' layout / ' : '') + tag + (id ? "#"+id : cls ? '.['+cls+']' : ''); // used in messages
  1634. sC.isBody = (tag === "BODY");
  1635. // try to find a parent-layout
  1636. if (!isChild && !sC.isBody) {
  1637. $parent = $N.closest("."+ $.layout.defaults.panes.paneClass);
  1638. parent = $parent.data("parentLayout");
  1639. pane = $parent.data("layoutEdge");
  1640. isChild = parent && pane;
  1641. }
  1642. $N .data({
  1643. layout: Instance
  1644. , layoutContainer: sID // FLAG to indicate this is a layout-container - contains unique internal ID
  1645. })
  1646. .addClass(o.containerClass)
  1647. ;
  1648. var layoutMethods = {
  1649. destroy: ''
  1650. , initPanes: ''
  1651. , resizeAll: 'resizeAll'
  1652. , resize: 'resizeAll'
  1653. };
  1654. // loop hash and bind all methods - include layoutID namespacing
  1655. for (name in layoutMethods) {
  1656. $N.bind("layout"+ name.toLowerCase() +"."+ sID, Instance[ layoutMethods[name] || name ]);
  1657. }
  1658. // if this container is another layout's 'pane', then set child/parent pointers
  1659. if (isChild) {
  1660. // update parent flag
  1661. Instance.hasParentLayout = true;
  1662. // set pointers to THIS child-layout (Instance) in parent-layout
  1663. parent.refreshChildren( pane, Instance );
  1664. }
  1665. // SAVE original container CSS for use in destroy()
  1666. if (!$N.data(css)) {
  1667. // handle props like overflow different for BODY & HTML - has 'system default' values
  1668. if (sC.isBody) {
  1669. // SAVE <BODY> CSS
  1670. $N.data(css, $.extend( styles($N, props), {
  1671. height: $N.css("height")
  1672. , overflow: $N.css("overflow")
  1673. , overflowX: $N.css("overflowX")
  1674. , overflowY: $N.css("overflowY")
  1675. }));
  1676. // ALSO SAVE <HTML> CSS
  1677. $H.data(css, $.extend( styles($H, 'padding'), {
  1678. height: "auto" // FF would return a fixed px-size!
  1679. , overflow: $H.css("overflow")
  1680. , overflowX: $H.css("overflowX")
  1681. , overflowY: $H.css("overflowY")
  1682. }));
  1683. }
  1684. else // handle props normally for non-body elements
  1685. $N.data(css, styles($N, props+",top,bottom,left,right,width,height,overflow,overflowX,overflowY") );
  1686. }
  1687. try {
  1688. // common container CSS
  1689. CSS = {
  1690. overflow: hid
  1691. , overflowX: hid
  1692. , overflowY: hid
  1693. };
  1694. $N.css( CSS );
  1695. if (o.inset && !$.isPlainObject(o.inset)) {
  1696. // can specify a single number for equal outset all-around
  1697. n = parseInt(o.inset, 10) || 0
  1698. o.inset = {
  1699. top: n
  1700. , bottom: n
  1701. , left: n
  1702. , right: n
  1703. };
  1704. }
  1705. // format html & body if this is a full page layout
  1706. if (sC.isBody) {
  1707. // if HTML has padding, use this as an outer-spacing around BODY
  1708. if (!o.outset) {
  1709. // use padding from parent-elem (HTML) as outset
  1710. o.outset = {
  1711. top: num($H, "paddingTop")
  1712. , bottom: num($H, "paddingBottom")
  1713. , left: num($H, "paddingLeft")
  1714. , right: num($H, "paddingRight")
  1715. };
  1716. }
  1717. else if (!$.isPlainObject(o.outset)) {
  1718. // can specify a single number for equal outset all-around
  1719. n = parseInt(o.outset, 10) || 0
  1720. o.outset = {
  1721. top: n
  1722. , bottom: n
  1723. , left: n
  1724. , right: n
  1725. };
  1726. }
  1727. // HTML
  1728. $H.css( CSS ).css({
  1729. height: "100%"
  1730. , border: "none" // no border or padding allowed when using height = 100%
  1731. , padding: 0 // ditto
  1732. , margin: 0
  1733. });
  1734. // BODY
  1735. if (browser.isIE6) {
  1736. // IE6 CANNOT use the trick of setting absolute positioning on all 4 sides - must have 'height'
  1737. $N.css({
  1738. width: "100%"
  1739. , height: "100%"
  1740. , border: "none" // no border or padding allowed when using height = 100%
  1741. , padding: 0 // ditto
  1742. , margin: 0
  1743. , position: "relative"
  1744. });
  1745. // convert body padding to an inset option - the border cannot be measured in IE6!
  1746. if (!o.inset) o.inset = elDims( $N ).inset;
  1747. }
  1748. else { // use absolute positioning for BODY to allow borders & padding without overflow
  1749. $N.css({
  1750. width: "auto"
  1751. , height: "auto"
  1752. , margin: 0
  1753. , position: "absolute" // allows for border and padding on BODY
  1754. });
  1755. // apply edge-positioning created above
  1756. $N.css( o.outset );
  1757. }
  1758. // set current layout-container dimensions
  1759. $.extend(sC, elDims( $N, o.inset )); // passing inset means DO NOT include insetX values
  1760. }
  1761. else {
  1762. // container MUST have 'position'
  1763. var p = $N.css("position");
  1764. if (!p || !p.match(/(fixed|absolute|relative)/))
  1765. $N.css("position","relative");
  1766. // set current layout-container dimensions
  1767. if ( $N.is(":visible") ) {
  1768. $.extend(sC, elDims( $N, o.inset )); // passing inset means DO NOT change insetX (padding) values
  1769. if (sC.innerHeight < 1) // container has no 'height' - warn developer
  1770. _log( o.errors.noContainerHeight.replace(/CONTAINER/, sC.ref) );
  1771. }
  1772. }
  1773. // if container has min-width/height, then enable scrollbar(s)
  1774. if ( num($N, "minWidth") ) $N.parent().css("overflowX","auto");
  1775. if ( num($N, "minHeight") ) $N.parent().css("overflowY","auto");
  1776. } catch (ex) {}
  1777. }
  1778. /**
  1779. * Bind layout hotkeys - if options enabled
  1780. *
  1781. * @see _create() and addPane()
  1782. * @param {string=} [panes=""] The edge(s) to process
  1783. */
  1784. , initHotkeys = function (panes) {
  1785. panes = panes ? panes.split(",") : _c.borderPanes;
  1786. // bind keyDown to capture hotkeys, if option enabled for ANY pane
  1787. $.each(panes, function (i, pane) {
  1788. var o = options[pane];
  1789. if (o.enableCursorHotkey || o.customHotkey) {
  1790. $(document).bind("keydown."+ sID, keyDown); // only need to bind this ONCE
  1791. return false; // BREAK - binding was done
  1792. }
  1793. });
  1794. }
  1795. /**
  1796. * Build final OPTIONS data
  1797. *
  1798. * @see _create()
  1799. */
  1800. , initOptions = function () {
  1801. var data, d, pane, key, val, i, c, o;
  1802. // reprocess user's layout-options to have correct options sub-key structure
  1803. opts = $.layout.transformData( opts, true ); // panes = default subkey
  1804. // auto-rename old options for backward compatibility
  1805. opts = $.layout.backwardCompatibility.renameAllOptions( opts );
  1806. // if user-options has 'panes' key (pane-defaults), clean it...
  1807. if (!$.isEmptyObject(opts.panes)) {
  1808. // REMOVE any pane-defaults that MUST be set per-pane
  1809. data = $.layout.optionsMap.noDefault;
  1810. for (i=0, c=data.length; i<c; i++) {
  1811. key = data[i];
  1812. delete opts.panes[key]; // OK if does not exist
  1813. }
  1814. // REMOVE any layout-options specified under opts.panes
  1815. data = $.layout.optionsMap.layout;
  1816. for (i=0, c=data.length; i<c; i++) {
  1817. key = data[i];
  1818. delete opts.panes[key]; // OK if does not exist
  1819. }
  1820. }
  1821. // MOVE any NON-layout-options from opts-root to opts.panes
  1822. data = $.layout.optionsMap.layout;
  1823. var rootKeys = $.layout.config.optionRootKeys;
  1824. for (key in opts) {
  1825. val = opts[key];
  1826. if ($.inArray(key, rootKeys) < 0 && $.inArray(key, data) < 0) {
  1827. if (!opts.panes[key])
  1828. opts.panes[key] = $.isPlainObject(val) ? $.extend(true, {}, val) : val;
  1829. delete opts[key]
  1830. }
  1831. }
  1832. // START by updating ALL options from opts
  1833. $.extend(true, options, opts);
  1834. // CREATE final options (and config) for EACH pane
  1835. $.each(_c.allPanes, function (i, pane) {
  1836. // apply 'pane-defaults' to CONFIG.[PANE]
  1837. _c[pane] = $.extend(true, {}, _c.panes, _c[pane]);
  1838. d = options.panes;
  1839. o = options[pane];
  1840. // center-pane uses SOME keys in defaults.panes branch
  1841. if (pane === 'center') {
  1842. // ONLY copy keys from opts.panes listed in: $.layout.optionsMap.center
  1843. data = $.layout.optionsMap.center; // list of 'center-pane keys'
  1844. for (i=0, c=data.length; i<c; i++) { // loop the list...
  1845. key = data[i];
  1846. // only need to use pane-default if pane-specific value not set
  1847. if (!opts.center[key] && (opts.panes[key] || !o[key]))
  1848. o[key] = d[key]; // pane-default
  1849. }
  1850. }
  1851. else {
  1852. // border-panes use ALL keys in defaults.panes branch
  1853. o = options[pane] = $.extend(true, {}, d, o); // re-apply pane-specific opts AFTER pane-defaults
  1854. createFxOptions( pane );
  1855. // ensure all border-pane-specific base-classes exist
  1856. if (!o.resizerClass) o.resizerClass = "ui-layout-resizer";
  1857. if (!o.togglerClass) o.togglerClass = "ui-layout-toggler";
  1858. }
  1859. // ensure we have base pane-class (ALL panes)
  1860. if (!o.paneClass) o.paneClass = "ui-layout-pane";
  1861. });
  1862. // update options.zIndexes if a zIndex-option specified
  1863. var zo = opts.zIndex
  1864. , z = options.zIndexes;
  1865. if (zo > 0) {
  1866. z.pane_normal = zo;
  1867. z.content_mask = max(zo+1, z.content_mask); // MIN = +1
  1868. z.resizer_normal = max(zo+2, z.resizer_normal); // MIN = +2
  1869. }
  1870. // DELETE 'panes' key now that we are done - values were copied to EACH pane
  1871. delete options.panes;
  1872. function createFxOptions ( pane ) {
  1873. var o = options[pane]
  1874. , d = options.panes;
  1875. // ensure fxSettings key to avoid errors
  1876. if (!o.fxSettings) o.fxSettings = {};
  1877. if (!d.fxSettings) d.fxSettings = {};
  1878. $.each(["_open","_close","_size"], function (i,n) {
  1879. var
  1880. sName = "fxName"+ n
  1881. , sSpeed = "fxSpeed"+ n
  1882. , sSettings = "fxSettings"+ n
  1883. // recalculate fxName according to specificity rules
  1884. , fxName = o[sName] =
  1885. o[sName] // options.west.fxName_open
  1886. || d[sName] // options.panes.fxName_open
  1887. || o.fxName // options.west.fxName
  1888. || d.fxName // options.panes.fxName
  1889. || "none" // MEANS $.layout.defaults.panes.fxName == "" || false || null || 0
  1890. , fxExists = $.effects && ($.effects[fxName] || ($.effects.effect && $.effects.effect[fxName]))
  1891. ;
  1892. // validate fxName to ensure is valid effect - MUST have effect-config data in options.effects
  1893. if (fxName === "none" || !options.effects[fxName] || !fxExists)
  1894. fxName = o[sName] = "none"; // effect not loaded OR unrecognized fxName
  1895. // set vars for effects subkeys to simplify logic
  1896. var fx = options.effects[fxName] || {} // effects.slide
  1897. , fx_all = fx.all || null // effects.slide.all
  1898. , fx_pane = fx[pane] || null // effects.slide.west
  1899. ;
  1900. // create fxSpeed[_open|_close|_size]
  1901. o[sSpeed] =
  1902. o[sSpeed] // options.west.fxSpeed_open
  1903. || d[sSpeed] // options.west.fxSpeed_open
  1904. || o.fxSpeed // options.west.fxSpeed
  1905. || d.fxSpeed // options.panes.fxSpeed
  1906. || null // DEFAULT - let fxSetting.duration control speed
  1907. ;
  1908. // create fxSettings[_open|_close|_size]
  1909. o[sSettings] = $.extend(
  1910. true
  1911. , {}
  1912. , fx_all // effects.slide.all
  1913. , fx_pane // effects.slide.west
  1914. , d.fxSettings // options.panes.fxSettings
  1915. , o.fxSettings // options.west.fxSettings
  1916. , d[sSettings] // options.panes.fxSettings_open
  1917. , o[sSettings] // options.west.fxSettings_open
  1918. );
  1919. });
  1920. // DONE creating action-specific-settings for this pane,
  1921. // so DELETE generic options - are no longer meaningful
  1922. delete o.fxName;
  1923. delete o.fxSpeed;
  1924. delete o.fxSettings;
  1925. }
  1926. }
  1927. /**
  1928. * Initialize module objects, styling, size and position for all panes
  1929. *
  1930. * @see _initElements()
  1931. * @param {string} pane The pane to process
  1932. */
  1933. , getPane = function (pane) {
  1934. var sel = options[pane].paneSelector
  1935. if (sel.substr(0,1)==="#") // ID selector
  1936. // NOTE: elements selected 'by ID' DO NOT have to be 'children'
  1937. return $N.find(sel).eq(0);
  1938. else { // class or other selector
  1939. var $P = $N.children(sel).eq(0);
  1940. // look for the pane nested inside a 'form' element
  1941. return $P.length ? $P : $N.children("form:first").children(sel).eq(0);
  1942. }
  1943. }
  1944. /**
  1945. * @param {Object=} evt
  1946. */
  1947. , initPanes = function (evt) {
  1948. // stopPropagation if called by trigger("layoutinitpanes") - use evtPane utility
  1949. evtPane(evt);
  1950. // NOTE: do north & south FIRST so we can measure their height - do center LAST
  1951. $.each(_c.allPanes, function (idx, pane) {
  1952. addPane( pane, true );
  1953. });
  1954. // init the pane-handles NOW in case we have to hide or close the pane below
  1955. initHandles();
  1956. // now that all panes have been initialized and initially-sized,
  1957. // make sure there is really enough space available for each pane
  1958. $.each(_c.borderPanes, function (i, pane) {
  1959. if ($Ps[pane] && state[pane].isVisible) { // pane is OPEN
  1960. setSizeLimits(pane);
  1961. makePaneFit(pane); // pane may be Closed, Hidden or Resized by makePaneFit()
  1962. }
  1963. });
  1964. // size center-pane AGAIN in case we 'closed' a border-pane in loop above
  1965. sizeMidPanes("center");
  1966. // Chrome/Webkit sometimes fires callbacks BEFORE it completes resizing!
  1967. // Before RC30.3, there was a 10ms delay here, but that caused layout
  1968. // to load asynchrously, which is BAD, so try skipping delay for now
  1969. // process pane contents and callbacks, and init/resize child-layout if exists
  1970. $.each(_c.allPanes, function (idx, pane) {
  1971. afterInitPane(pane);
  1972. });
  1973. }
  1974. /**
  1975. * Add a pane to the layout - subroutine of initPanes()
  1976. *
  1977. * @see initPanes()
  1978. * @param {string} pane The pane to process
  1979. * @param {boolean=} [force=false] Size content after init
  1980. */
  1981. , addPane = function (pane, force) {
  1982. if (!force && !isInitialized()) return;
  1983. var
  1984. o = options[pane]
  1985. , s = state[pane]
  1986. , c = _c[pane]
  1987. , dir = c.dir
  1988. , fx = s.fx
  1989. , spacing = o.spacing_open || 0
  1990. , isCenter = (pane === "center")
  1991. , CSS = {}
  1992. , $P = $Ps[pane]
  1993. , size, minSize, maxSize, child
  1994. ;
  1995. // if pane-pointer already exists, remove the old one first
  1996. if ($P)
  1997. removePane( pane, false, true, false );
  1998. else
  1999. $Cs[pane] = false; // init
  2000. $P = $Ps[pane] = getPane(pane);
  2001. if (!$P.length) {
  2002. $Ps[pane] = false; // logic
  2003. return;
  2004. }
  2005. // SAVE original Pane CSS
  2006. if (!$P.data("layoutCSS")) {
  2007. var props = "position,top,left,bottom,right,width,height,overflow,zIndex,display,backgroundColor,padding,margin,border";
  2008. $P.data("layoutCSS", styles($P, props));
  2009. }
  2010. // create alias for pane data in Instance - initHandles will add more
  2011. Instance[pane] = {
  2012. name: pane
  2013. , pane: $Ps[pane]
  2014. , content: $Cs[pane]
  2015. , options: options[pane]
  2016. , state: state[pane]
  2017. , children: children[pane]
  2018. };
  2019. // add classes, attributes & events
  2020. $P .data({
  2021. parentLayout: Instance // pointer to Layout Instance
  2022. , layoutPane: Instance[pane] // NEW pointer to pane-alias-object
  2023. , layoutEdge: pane
  2024. , layoutRole: "pane"
  2025. })
  2026. .css(c.cssReq).css("zIndex", options.zIndexes.pane_normal)
  2027. .css(o.applyDemoStyles ? c.cssDemo : {}) // demo styles
  2028. .addClass( o.paneClass +" "+ o.paneClass+"-"+pane ) // default = "ui-layout-pane ui-layout-pane-west" - may be a dupe of 'paneSelector'
  2029. .bind("mouseenter."+ sID, addHover )
  2030. .bind("mouseleave."+ sID, removeHover )
  2031. ;
  2032. var paneMethods = {
  2033. hide: ''
  2034. , show: ''
  2035. , toggle: ''
  2036. , close: ''
  2037. , open: ''
  2038. , slideOpen: ''
  2039. , slideClose: ''
  2040. , slideToggle: ''
  2041. , size: 'sizePane'
  2042. , sizePane: 'sizePane'
  2043. , sizeContent: ''
  2044. , sizeHandles: ''
  2045. , enableClosable: ''
  2046. , disableClosable: ''
  2047. , enableSlideable: ''
  2048. , disableSlideable: ''
  2049. , enableResizable: ''
  2050. , disableResizable: ''
  2051. , swapPanes: 'swapPanes'
  2052. , swap: 'swapPanes'
  2053. , move: 'swapPanes'
  2054. , removePane: 'removePane'
  2055. , remove: 'removePane'
  2056. , createChildren: ''
  2057. , resizeChildren: ''
  2058. , resizeAll: 'resizeAll'
  2059. , resizeLayout: 'resizeAll'
  2060. }
  2061. , name;
  2062. // loop hash and bind all methods - include layoutID namespacing
  2063. for (name in paneMethods) {
  2064. $P.bind("layoutpane"+ name.toLowerCase() +"."+ sID, Instance[ paneMethods[name] || name ]);
  2065. }
  2066. // see if this pane has a 'scrolling-content element'
  2067. initContent(pane, false); // false = do NOT sizeContent() - called later
  2068. if (!isCenter) {
  2069. // call _parseSize AFTER applying pane classes & styles - but before making visible (if hidden)
  2070. // if o.size is auto or not valid, then MEASURE the pane and use that as its 'size'
  2071. size = s.size = _parseSize(pane, o.size);
  2072. minSize = _parseSize(pane,o.minSize) || 1;
  2073. maxSize = _parseSize(pane,o.maxSize) || 100000;
  2074. if (size > 0) size = max(min(size, maxSize), minSize);
  2075. s.autoResize = o.autoResize; // used with percentage sizes
  2076. // state for border-panes
  2077. s.isClosed = false; // true = pane is closed
  2078. s.isSliding = false; // true = pane is currently open by 'sliding' over adjacent panes
  2079. s.isResizing= false; // true = pane is in process of being resized
  2080. s.isHidden = false; // true = pane is hidden - no spacing, resizer or toggler is visible!
  2081. // array for 'pin buttons' whose classNames are auto-updated on pane-open/-close
  2082. if (!s.pins) s.pins = [];
  2083. }
  2084. // states common to ALL panes
  2085. s.tagName = $P[0].tagName;
  2086. s.edge = pane; // useful if pane is (or about to be) 'swapped' - easy find out where it is (or is going)
  2087. s.noRoom = false; // true = pane 'automatically' hidden due to insufficient room - will unhide automatically
  2088. s.isVisible = true; // false = pane is invisible - closed OR hidden - simplify logic
  2089. // init pane positioning
  2090. setPanePosition( pane );
  2091. // if pane is not visible,
  2092. if (dir === "horz") // north or south pane
  2093. CSS.height = cssH($P, size);
  2094. else if (dir === "vert") // east or west pane
  2095. CSS.width = cssW($P, size);
  2096. //else if (isCenter) {}
  2097. $P.css(CSS); // apply size -- top, bottom & height will be set by sizeMidPanes
  2098. if (dir != "horz") sizeMidPanes(pane, true); // true = skipCallback
  2099. // if manually adding a pane AFTER layout initialization, then...
  2100. if (state.initialized) {
  2101. initHandles( pane );
  2102. initHotkeys( pane );
  2103. }
  2104. // close or hide the pane if specified in settings
  2105. if (o.initClosed && o.closable && !o.initHidden)
  2106. close(pane, true, true); // true, true = force, noAnimation
  2107. else if (o.initHidden || o.initClosed)
  2108. hide(pane); // will be completely invisible - no resizer or spacing
  2109. else if (!s.noRoom)
  2110. // make the pane visible - in case was initially hidden
  2111. $P.css("display","block");
  2112. // ELSE setAsOpen() - called later by initHandles()
  2113. // RESET visibility now - pane will appear IF display:block
  2114. $P.css("visibility","visible");
  2115. // check option for auto-handling of pop-ups & drop-downs
  2116. if (o.showOverflowOnHover)
  2117. $P.hover( allowOverflow, resetOverflow );
  2118. // if manually adding a pane AFTER layout initialization, then...
  2119. if (state.initialized) {
  2120. afterInitPane( pane );
  2121. }
  2122. }
  2123. , afterInitPane = function (pane) {
  2124. var $P = $Ps[pane]
  2125. , s = state[pane]
  2126. , o = options[pane]
  2127. ;
  2128. if (!$P) return;
  2129. // see if there is a directly-nested layout inside this pane
  2130. if ($P.data("layout"))
  2131. refreshChildren( pane, $P.data("layout") );
  2132. // process pane contents and callbacks, and init/resize child-layout if exists
  2133. if (s.isVisible) { // pane is OPEN
  2134. if (state.initialized) // this pane was added AFTER layout was created
  2135. resizeAll(); // will also sizeContent
  2136. else
  2137. sizeContent(pane);
  2138. if (o.triggerEventsOnLoad)
  2139. _runCallbacks("onresize_end", pane);
  2140. else // automatic if onresize called, otherwise call it specifically
  2141. // resize child - IF inner-layout already exists (created before this layout)
  2142. resizeChildren(pane, true); // a previously existing childLayout
  2143. }
  2144. // init childLayouts - even if pane is not visible
  2145. if (o.initChildren && o.children)
  2146. createChildren(pane);
  2147. }
  2148. /**
  2149. * @param {string=} panes The pane(s) to process
  2150. */
  2151. , setPanePosition = function (panes) {
  2152. panes = panes ? panes.split(",") : _c.borderPanes;
  2153. // create toggler DIVs for each pane, and set object pointers for them, eg: $R.north = north toggler DIV
  2154. $.each(panes, function (i, pane) {
  2155. var $P = $Ps[pane]
  2156. , $R = $Rs[pane]
  2157. , o = options[pane]
  2158. , s = state[pane]
  2159. , side = _c[pane].side
  2160. , CSS = {}
  2161. ;
  2162. if (!$P) return; // pane does not exist - skip
  2163. // set css-position to account for container borders & padding
  2164. switch (pane) {
  2165. case "north": CSS.top = sC.inset.top;
  2166. CSS.left = sC.inset.left;
  2167. CSS.right = sC.inset.right;
  2168. break;
  2169. case "south": CSS.bottom = sC.inset.bottom;
  2170. CSS.left = sC.inset.left;
  2171. CSS.right = sC.inset.right;
  2172. break;
  2173. case "west": CSS.left = sC.inset.left; // top, bottom & height set by sizeMidPanes()
  2174. break;
  2175. case "east": CSS.right = sC.inset.right; // ditto
  2176. break;
  2177. case "center": // top, left, width & height set by sizeMidPanes()
  2178. }
  2179. // apply position
  2180. $P.css(CSS);
  2181. // update resizer position
  2182. if ($R && s.isClosed)
  2183. $R.css(side, sC.inset[side]);
  2184. else if ($R && !s.isHidden)
  2185. $R.css(side, sC.inset[side] + getPaneSize(pane));
  2186. });
  2187. }
  2188. /**
  2189. * Initialize module objects, styling, size and position for all resize bars and toggler buttons
  2190. *
  2191. * @see _create()
  2192. * @param {string=} [panes=""] The edge(s) to process
  2193. */
  2194. , initHandles = function (panes) {
  2195. panes = panes ? panes.split(",") : _c.borderPanes;
  2196. // create toggler DIVs for each pane, and set object pointers for them, eg: $R.north = north toggler DIV
  2197. $.each(panes, function (i, pane) {
  2198. var $P = $Ps[pane];
  2199. $Rs[pane] = false; // INIT
  2200. $Ts[pane] = false;
  2201. if (!$P) return; // pane does not exist - skip
  2202. var
  2203. o = options[pane]
  2204. , s = state[pane]
  2205. , c = _c[pane]
  2206. , paneId = o.paneSelector.substr(0,1) === "#" ? o.paneSelector.substr(1) : ""
  2207. , rClass = o.resizerClass
  2208. , tClass = o.togglerClass
  2209. , spacing = (s.isVisible ? o.spacing_open : o.spacing_closed)
  2210. , _pane = "-"+ pane // used for classNames
  2211. , _state = (s.isVisible ? "-open" : "-closed") // used for classNames
  2212. , I = Instance[pane]
  2213. // INIT RESIZER BAR
  2214. , $R = I.resizer = $Rs[pane] = $("<div></div>")
  2215. // INIT TOGGLER BUTTON
  2216. , $T = I.toggler = (o.closable ? $Ts[pane] = $("<div></div>") : false)
  2217. ;
  2218. //if (s.isVisible && o.resizable) ... handled by initResizable
  2219. if (!s.isVisible && o.slidable)
  2220. $R.attr("title", o.tips.Slide).css("cursor", o.sliderCursor);
  2221. $R // if paneSelector is an ID, then create a matching ID for the resizer, eg: "#paneLeft" => "paneLeft-resizer"
  2222. .attr("id", paneId ? paneId +"-resizer" : "" )
  2223. .data({
  2224. parentLayout: Instance
  2225. , layoutPane: Instance[pane] // NEW pointer to pane-alias-object
  2226. , layoutEdge: pane
  2227. , layoutRole: "resizer"
  2228. })
  2229. .css(_c.resizers.cssReq).css("zIndex", options.zIndexes.resizer_normal)
  2230. .css(o.applyDemoStyles ? _c.resizers.cssDemo : {}) // add demo styles
  2231. .addClass(rClass +" "+ rClass+_pane)
  2232. .hover(addHover, removeHover) // ALWAYS add hover-classes, even if resizing is not enabled - handle with CSS instead
  2233. .hover(onResizerEnter, onResizerLeave) // ALWAYS NEED resizer.mouseleave to balance toggler.mouseenter
  2234. .appendTo($N) // append DIV to container
  2235. ;
  2236. if (o.resizerDblClickToggle)
  2237. $R.bind("dblclick."+ sID, toggle );
  2238. if ($T) {
  2239. $T // if paneSelector is an ID, then create a matching ID for the resizer, eg: "#paneLeft" => "#paneLeft-toggler"
  2240. .attr("id", paneId ? paneId +"-toggler" : "" )
  2241. .data({
  2242. parentLayout: Instance
  2243. , layoutPane: Instance[pane] // NEW pointer to pane-alias-object
  2244. , layoutEdge: pane
  2245. , layoutRole: "toggler"
  2246. })
  2247. .css(_c.togglers.cssReq) // add base/required styles
  2248. .css(o.applyDemoStyles ? _c.togglers.cssDemo : {}) // add demo styles
  2249. .addClass(tClass +" "+ tClass+_pane)
  2250. .hover(addHover, removeHover) // ALWAYS add hover-classes, even if toggling is not enabled - handle with CSS instead
  2251. .bind("mouseenter", onResizerEnter) // NEED toggler.mouseenter because mouseenter MAY NOT fire on resizer
  2252. .appendTo($R) // append SPAN to resizer DIV
  2253. ;
  2254. // ADD INNER-SPANS TO TOGGLER
  2255. if (o.togglerContent_open) // ui-layout-open
  2256. $("<span>"+ o.togglerContent_open +"</span>")
  2257. .data({
  2258. layoutEdge: pane
  2259. , layoutRole: "togglerContent"
  2260. })
  2261. .data("layoutRole", "togglerContent")
  2262. .data("layoutEdge", pane)
  2263. .addClass("content content-open")
  2264. .css("display","none")
  2265. .appendTo( $T )
  2266. //.hover( addHover, removeHover ) // use ui-layout-toggler-west-hover .content-open instead!
  2267. ;
  2268. if (o.togglerContent_closed) // ui-layout-closed
  2269. $("<span>"+ o.togglerContent_closed +"</span>")
  2270. .data({
  2271. layoutEdge: pane
  2272. , layoutRole: "togglerContent"
  2273. })
  2274. .addClass("content content-closed")
  2275. .css("display","none")
  2276. .appendTo( $T )
  2277. //.hover( addHover, removeHover ) // use ui-layout-toggler-west-hover .content-closed instead!
  2278. ;
  2279. // ADD TOGGLER.click/.hover
  2280. enableClosable(pane);
  2281. }
  2282. // add Draggable events
  2283. initResizable(pane);
  2284. // ADD CLASSNAMES & SLIDE-BINDINGS - eg: class="resizer resizer-west resizer-open"
  2285. if (s.isVisible)
  2286. setAsOpen(pane); // onOpen will be called, but NOT onResize
  2287. else {
  2288. setAsClosed(pane); // onClose will be called
  2289. bindStartSlidingEvents(pane, true); // will enable events IF option is set
  2290. }
  2291. });
  2292. // SET ALL HANDLE DIMENSIONS
  2293. sizeHandles();
  2294. }
  2295. /**
  2296. * Initialize scrolling ui-layout-content div - if exists
  2297. *
  2298. * @see initPane() - or externally after an Ajax injection
  2299. * @param {string} pane The pane to process
  2300. * @param {boolean=} [resize=true] Size content after init
  2301. */
  2302. , initContent = function (pane, resize) {
  2303. if (!isInitialized()) return;
  2304. var
  2305. o = options[pane]
  2306. , sel = o.contentSelector
  2307. , I = Instance[pane]
  2308. , $P = $Ps[pane]
  2309. , $C
  2310. ;
  2311. if (sel) $C = I.content = $Cs[pane] = (o.findNestedContent)
  2312. ? $P.find(sel).eq(0) // match 1-element only
  2313. : $P.children(sel).eq(0)
  2314. ;
  2315. if ($C && $C.length) {
  2316. $C.data("layoutRole", "content");
  2317. // SAVE original Content CSS
  2318. if (!$C.data("layoutCSS"))
  2319. $C.data("layoutCSS", styles($C, "height"));
  2320. $C.css( _c.content.cssReq );
  2321. if (o.applyDemoStyles) {
  2322. $C.css( _c.content.cssDemo ); // add padding & overflow: auto to content-div
  2323. $P.css( _c.content.cssDemoPane ); // REMOVE padding/scrolling from pane
  2324. }
  2325. // ensure no vertical scrollbar on pane - will mess up measurements
  2326. if ($P.css("overflowX").match(/(scroll|auto)/)) {
  2327. $P.css("overflow", "hidden");
  2328. }
  2329. state[pane].content = {}; // init content state
  2330. if (resize !== false) sizeContent(pane);
  2331. // sizeContent() is called AFTER init of all elements
  2332. }
  2333. else
  2334. I.content = $Cs[pane] = false;
  2335. }
  2336. /**
  2337. * Add resize-bars to all panes that specify it in options
  2338. * -dependancy: $.fn.resizable - will skip if not found
  2339. *
  2340. * @see _create()
  2341. * @param {string=} [panes=""] The edge(s) to process
  2342. */
  2343. , initResizable = function (panes) {
  2344. var draggingAvailable = $.layout.plugins.draggable
  2345. , side // set in start()
  2346. ;
  2347. panes = panes ? panes.split(",") : _c.borderPanes;
  2348. $.each(panes, function (idx, pane) {
  2349. var o = options[pane];
  2350. if (!draggingAvailable || !$Ps[pane] || !o.resizable) {
  2351. o.resizable = false;
  2352. return true; // skip to next
  2353. }
  2354. var s = state[pane]
  2355. , z = options.zIndexes
  2356. , c = _c[pane]
  2357. , side = c.dir=="horz" ? "top" : "left"
  2358. , $P = $Ps[pane]
  2359. , $R = $Rs[pane]
  2360. , base = o.resizerClass
  2361. , lastPos = 0 // used when live-resizing
  2362. , r, live // set in start because may change
  2363. // 'drag' classes are applied to the ORIGINAL resizer-bar while dragging is in process
  2364. , resizerClass = base+"-drag" // resizer-drag
  2365. , resizerPaneClass = base+"-"+pane+"-drag" // resizer-north-drag
  2366. // 'helper' class is applied to the CLONED resizer-bar while it is being dragged
  2367. , helperClass = base+"-dragging" // resizer-dragging
  2368. , helperPaneClass = base+"-"+pane+"-dragging" // resizer-north-dragging
  2369. , helperLimitClass = base+"-dragging-limit" // resizer-drag
  2370. , helperPaneLimitClass = base+"-"+pane+"-dragging-limit" // resizer-north-drag
  2371. , helperClassesSet = false // logic var
  2372. ;
  2373. if (!s.isClosed)
  2374. $R.attr("title", o.tips.Resize)
  2375. .css("cursor", o.resizerCursor); // n-resize, s-resize, etc
  2376. $R.draggable({
  2377. containment: $N[0] // limit resizing to layout container
  2378. , axis: (c.dir=="horz" ? "y" : "x") // limit resizing to horz or vert axis
  2379. , delay: 0
  2380. , distance: 1
  2381. , grid: o.resizingGrid
  2382. // basic format for helper - style it using class: .ui-draggable-dragging
  2383. , helper: "clone"
  2384. , opacity: o.resizerDragOpacity
  2385. , addClasses: false // avoid ui-state-disabled class when disabled
  2386. //, iframeFix: o.draggableIframeFix // TODO: consider using when bug is fixed
  2387. , zIndex: z.resizer_drag
  2388. , start: function (e, ui) {
  2389. // REFRESH options & state pointers in case we used swapPanes
  2390. o = options[pane];
  2391. s = state[pane];
  2392. // re-read options
  2393. live = o.livePaneResizing;
  2394. // ondrag_start callback - will CANCEL hide if returns false
  2395. // TODO: dragging CANNOT be cancelled like this, so see if there is a way?
  2396. if (false === _runCallbacks("ondrag_start", pane)) return false;
  2397. s.isResizing = true; // prevent pane from closing while resizing
  2398. state.paneResizing = pane; // easy to see if ANY pane is resizing
  2399. timer.clear(pane+"_closeSlider"); // just in case already triggered
  2400. // SET RESIZER LIMITS - used in drag()
  2401. setSizeLimits(pane); // update pane/resizer state
  2402. r = s.resizerPosition;
  2403. lastPos = ui.position[ side ]
  2404. $R.addClass( resizerClass +" "+ resizerPaneClass ); // add drag classes
  2405. helperClassesSet = false; // reset logic var - see drag()
  2406. // DISABLE TEXT SELECTION (probably already done by resizer.mouseOver)
  2407. $('body').disableSelection();
  2408. // MASK PANES CONTAINING IFRAMES, APPLETS OR OTHER TROUBLESOME ELEMENTS
  2409. showMasks( pane, { resizing: true });
  2410. }
  2411. , drag: function (e, ui) {
  2412. if (!helperClassesSet) { // can only add classes after clone has been added to the DOM
  2413. //$(".ui-draggable-dragging")
  2414. ui.helper
  2415. .addClass( helperClass +" "+ helperPaneClass ) // add helper classes
  2416. .css({ right: "auto", bottom: "auto" }) // fix dir="rtl" issue
  2417. .children().css("visibility","hidden") // hide toggler inside dragged resizer-bar
  2418. ;
  2419. helperClassesSet = true;
  2420. // draggable bug!? RE-SET zIndex to prevent E/W resize-bar showing through N/S pane!
  2421. if (s.isSliding) $Ps[pane].css("zIndex", z.pane_sliding);
  2422. }
  2423. // CONTAIN RESIZER-BAR TO RESIZING LIMITS
  2424. var limit = 0;
  2425. if (ui.position[side] < r.min) {
  2426. ui.position[side] = r.min;
  2427. limit = -1;
  2428. }
  2429. else if (ui.position[side] > r.max) {
  2430. ui.position[side] = r.max;
  2431. limit = 1;
  2432. }
  2433. // ADD/REMOVE dragging-limit CLASS
  2434. if (limit) {
  2435. ui.helper.addClass( helperLimitClass +" "+ helperPaneLimitClass ); // at dragging-limit
  2436. window.defaultStatus = (limit>0 && pane.match(/(north|west)/)) || (limit<0 && pane.match(/(south|east)/)) ? o.tips.maxSizeWarning : o.tips.minSizeWarning;
  2437. }
  2438. else {
  2439. ui.helper.removeClass( helperLimitClass +" "+ helperPaneLimitClass ); // not at dragging-limit
  2440. window.defaultStatus = "";
  2441. }
  2442. // DYNAMICALLY RESIZE PANES IF OPTION ENABLED
  2443. // won't trigger unless resizer has actually moved!
  2444. if (live && Math.abs(ui.position[side] - lastPos) >= o.liveResizingTolerance) {
  2445. lastPos = ui.position[side];
  2446. resizePanes(e, ui, pane)
  2447. }
  2448. }
  2449. , stop: function (e, ui) {
  2450. $('body').enableSelection(); // RE-ENABLE TEXT SELECTION
  2451. window.defaultStatus = ""; // clear 'resizing limit' message from statusbar
  2452. $R.removeClass( resizerClass +" "+ resizerPaneClass ); // remove drag classes from Resizer
  2453. s.isResizing = false;
  2454. state.paneResizing = false; // easy to see if ANY pane is resizing
  2455. resizePanes(e, ui, pane, true); // true = resizingDone
  2456. }
  2457. });
  2458. });
  2459. /**
  2460. * resizePanes
  2461. *
  2462. * Sub-routine called from stop() - and drag() if livePaneResizing
  2463. *
  2464. * @param {!Object} evt
  2465. * @param {!Object} ui
  2466. * @param {string} pane
  2467. * @param {boolean=} [resizingDone=false]
  2468. */
  2469. var resizePanes = function (evt, ui, pane, resizingDone) {
  2470. var dragPos = ui.position
  2471. , c = _c[pane]
  2472. , o = options[pane]
  2473. , s = state[pane]
  2474. , resizerPos
  2475. ;
  2476. switch (pane) {
  2477. case "north": resizerPos = dragPos.top; break;
  2478. case "west": resizerPos = dragPos.left; break;
  2479. case "south": resizerPos = sC.layoutHeight - dragPos.top - o.spacing_open; break;
  2480. case "east": resizerPos = sC.layoutWidth - dragPos.left - o.spacing_open; break;
  2481. };
  2482. // remove container margin from resizer position to get the pane size
  2483. var newSize = resizerPos - sC.inset[c.side];
  2484. // Disable OR Resize Mask(s) created in drag.start
  2485. if (!resizingDone) {
  2486. // ensure we meet liveResizingTolerance criteria
  2487. if (Math.abs(newSize - s.size) < o.liveResizingTolerance)
  2488. return; // SKIP resize this time
  2489. // resize the pane
  2490. manualSizePane(pane, newSize, false, true); // true = noAnimation
  2491. sizeMasks(); // resize all visible masks
  2492. }
  2493. else { // resizingDone
  2494. // ondrag_end callback
  2495. if (false !== _runCallbacks("ondrag_end", pane))
  2496. manualSizePane(pane, newSize, false, true); // true = noAnimation
  2497. hideMasks(true); // true = force hiding all masks even if one is 'sliding'
  2498. if (s.isSliding) // RE-SHOW 'object-masks' so objects won't show through sliding pane
  2499. showMasks( pane, { resizing: true });
  2500. }
  2501. };
  2502. }
  2503. /**
  2504. * sizeMask
  2505. *
  2506. * Needed to overlay a DIV over an IFRAME-pane because mask CANNOT be *inside* the pane
  2507. * Called when mask created, and during livePaneResizing
  2508. */
  2509. , sizeMask = function () {
  2510. var $M = $(this)
  2511. , pane = $M.data("layoutMask") // eg: "west"
  2512. , s = state[pane]
  2513. ;
  2514. // only masks over an IFRAME-pane need manual resizing
  2515. if (s.tagName == "IFRAME" && s.isVisible) // no need to mask closed/hidden panes
  2516. $M.css({
  2517. top: s.offsetTop
  2518. , left: s.offsetLeft
  2519. , width: s.outerWidth
  2520. , height: s.outerHeight
  2521. });
  2522. /* ALT Method...
  2523. var $P = $Ps[pane];
  2524. $M.css( $P.position() ).css({ width: $P[0].offsetWidth, height: $P[0].offsetHeight });
  2525. */
  2526. }
  2527. , sizeMasks = function () {
  2528. $Ms.each( sizeMask ); // resize all 'visible' masks
  2529. }
  2530. /**
  2531. * @param {string} pane The pane being resized, animated or isSliding
  2532. * @param {Object=} [args] (optional) Options: which masks to apply, and to which panes
  2533. */
  2534. , showMasks = function (pane, args) {
  2535. var c = _c[pane]
  2536. , panes = ["center"]
  2537. , z = options.zIndexes
  2538. , a = $.extend({
  2539. objectsOnly: false
  2540. , animation: false
  2541. , resizing: true
  2542. , sliding: state[pane].isSliding
  2543. }, args )
  2544. , o, s
  2545. ;
  2546. if (a.resizing)
  2547. panes.push( pane );
  2548. if (a.sliding)
  2549. panes.push( _c.oppositeEdge[pane] ); // ADD the oppositeEdge-pane
  2550. if (c.dir === "horz") {
  2551. panes.push("west");
  2552. panes.push("east");
  2553. }
  2554. $.each(panes, function(i,p){
  2555. s = state[p];
  2556. o = options[p];
  2557. if (s.isVisible && ( o.maskObjects || (!a.objectsOnly && o.maskContents) )) {
  2558. getMasks(p).each(function(){
  2559. sizeMask.call(this);
  2560. this.style.zIndex = s.isSliding ? z.pane_sliding+1 : z.pane_normal+1
  2561. this.style.display = "block";
  2562. });
  2563. }
  2564. });
  2565. }
  2566. /**
  2567. * @param {boolean=} force Hide masks even if a pane is sliding
  2568. */
  2569. , hideMasks = function (force) {
  2570. // ensure no pane is resizing - could be a timing issue
  2571. if (force || !state.paneResizing) {
  2572. $Ms.hide(); // hide ALL masks
  2573. }
  2574. // if ANY pane is sliding, then DO NOT remove masks from panes with maskObjects enabled
  2575. else if (!force && !$.isEmptyObject( state.panesSliding )) {
  2576. var i = $Ms.length - 1
  2577. , p, $M;
  2578. for (; i >= 0; i--) {
  2579. $M = $Ms.eq(i);
  2580. p = $M.data("layoutMask");
  2581. if (!options[p].maskObjects) {
  2582. $M.hide();
  2583. }
  2584. }
  2585. }
  2586. }
  2587. /**
  2588. * @param {string} pane
  2589. */
  2590. , getMasks = function (pane) {
  2591. var $Masks = $([])
  2592. , $M, i = 0, c = $Ms.length
  2593. ;
  2594. for (; i<c; i++) {
  2595. $M = $Ms.eq(i);
  2596. if ($M.data("layoutMask") === pane)
  2597. $Masks = $Masks.add( $M );
  2598. }
  2599. if ($Masks.length)
  2600. return $Masks;
  2601. else
  2602. return createMasks(pane);
  2603. }
  2604. /**
  2605. * createMasks
  2606. *
  2607. * Generates both DIV (ALWAYS used) and IFRAME (optional) elements as masks
  2608. * An IFRAME mask is created *under* the DIV when maskObjects=true, because a DIV cannot mask an applet
  2609. *
  2610. * @param {string} pane
  2611. */
  2612. , createMasks = function (pane) {
  2613. var
  2614. $P = $Ps[pane]
  2615. , s = state[pane]
  2616. , o = options[pane]
  2617. , z = options.zIndexes
  2618. //, objMask = o.maskObjects && s.tagName != "IFRAME" // check for option
  2619. , $Masks = $([])
  2620. , isIframe, el, $M, css, i
  2621. ;
  2622. if (!o.maskContents && !o.maskObjects) return $Masks;
  2623. // if o.maskObjects=true, then loop TWICE to create BOTH kinds of mask, else only create a DIV
  2624. for (i=0; i < (o.maskObjects ? 2 : 1); i++) {
  2625. isIframe = o.maskObjects && i==0;
  2626. el = document.createElement( isIframe ? "iframe" : "div" );
  2627. $M = $(el).data("layoutMask", pane); // add data to relate mask to pane
  2628. el.className = "ui-layout-mask ui-layout-mask-"+ pane; // for user styling
  2629. css = el.style;
  2630. // styles common to both DIVs and IFRAMES
  2631. css.display = "block";
  2632. css.position = "absolute";
  2633. css.background = "#FFF";
  2634. if (isIframe) { // IFRAME-only props
  2635. el.frameborder = 0;
  2636. el.src = "about:blank";
  2637. //el.allowTransparency = true; - for IE, but breaks masking ability!
  2638. css.opacity = 0;
  2639. css.filter = "Alpha(Opacity='0')";
  2640. css.border = 0;
  2641. }
  2642. // if pane is an IFRAME, then must mask the pane itself
  2643. if (s.tagName == "IFRAME") {
  2644. // NOTE sizing done by a subroutine so can be called during live-resizing
  2645. css.zIndex = z.pane_normal+1; // 1-higher than pane
  2646. $N.append( el ); // append to LAYOUT CONTAINER
  2647. }
  2648. // otherwise put masks *inside the pane* to mask its contents
  2649. else {
  2650. $M.addClass("ui-layout-mask-inside-pane");
  2651. css.zIndex = o.maskZindex || z.content_mask; // usually 1, but customizable
  2652. css.top = 0;
  2653. css.left = 0;
  2654. css.width = "100%";
  2655. css.height = "100%";
  2656. $P.append( el ); // append INSIDE pane element
  2657. }
  2658. // add to return object
  2659. $Masks = $Masks.add( el );
  2660. // add Mask to cached array so can be resized & reused
  2661. $Ms = $Ms.add( el );
  2662. }
  2663. return $Masks;
  2664. }
  2665. /**
  2666. * Destroy this layout and reset all elements
  2667. *
  2668. * @param {boolean=} [destroyChildren=false] Destory Child-Layouts first?
  2669. */
  2670. , destroy = function (evt_or_destroyChildren, destroyChildren) {
  2671. // UNBIND layout events and remove global object
  2672. $(window).unbind("."+ sID); // resize & unload
  2673. $(document).unbind("."+ sID); // keyDown (hotkeys)
  2674. if (typeof evt_or_destroyChildren === "object")
  2675. // stopPropagation if called by trigger("layoutdestroy") - use evtPane utility
  2676. evtPane(evt_or_destroyChildren);
  2677. else // no event, so transfer 1st param to destroyChildren param
  2678. destroyChildren = evt_or_destroyChildren;
  2679. // need to look for parent layout BEFORE we remove the container data, else skips a level
  2680. //var parentPane = Instance.hasParentLayout ? $.layout.getParentPaneInstance( $N ) : null;
  2681. // reset layout-container
  2682. $N .clearQueue()
  2683. .removeData("layout")
  2684. .removeData("layoutContainer")
  2685. .removeClass(options.containerClass)
  2686. .unbind("."+ sID) // remove ALL Layout events
  2687. ;
  2688. // remove all mask elements that have been created
  2689. $Ms.remove();
  2690. // loop all panes to remove layout classes, attributes and bindings
  2691. $.each(_c.allPanes, function (i, pane) {
  2692. removePane( pane, false, true, destroyChildren ); // true = skipResize
  2693. });
  2694. // do NOT reset container CSS if is a 'pane' (or 'content') in an outer-layout - ie, THIS layout is 'nested'
  2695. var css = "layoutCSS";
  2696. if ($N.data(css) && !$N.data("layoutRole")) // RESET CSS
  2697. $N.css( $N.data(css) ).removeData(css);
  2698. // for full-page layouts, also reset the <HTML> CSS
  2699. if (sC.tagName === "BODY" && ($N = $("html")).data(css)) // RESET <HTML> CSS
  2700. $N.css( $N.data(css) ).removeData(css);
  2701. // trigger plugins for this layout, if there are any
  2702. runPluginCallbacks( Instance, $.layout.onDestroy );
  2703. // trigger state-management and onunload callback
  2704. unload();
  2705. // clear the Instance of everything except for container & options (so could recreate)
  2706. // RE-CREATE: myLayout = myLayout.container.layout( myLayout.options );
  2707. for (var n in Instance)
  2708. if (!n.match(/^(container|options)$/)) delete Instance[ n ];
  2709. // add a 'destroyed' flag to make it easy to check
  2710. Instance.destroyed = true;
  2711. // if this is a child layout, CLEAR the child-pointer in the parent
  2712. /* for now the pointer REMAINS, but with only container, options and destroyed keys
  2713. if (parentPane) {
  2714. var layout = parentPane.pane.data("parentLayout")
  2715. , key = layout.options.instanceKey || 'error';
  2716. // THIS SYNTAX MAY BE WRONG!
  2717. parentPane.children[key] = layout.children[ parentPane.name ].children[key] = null;
  2718. }
  2719. */
  2720. return Instance; // for coding convenience
  2721. }
  2722. /**
  2723. * Remove a pane from the layout - subroutine of destroy()
  2724. *
  2725. * @see destroy()
  2726. * @param {(string|Object)} evt_or_pane The pane to process
  2727. * @param {boolean=} [remove=false] Remove the DOM element?
  2728. * @param {boolean=} [skipResize=false] Skip calling resizeAll()?
  2729. * @param {boolean=} [destroyChild=true] Destroy Child-layouts? If not passed, obeys options setting
  2730. */
  2731. , removePane = function (evt_or_pane, remove, skipResize, destroyChild) {
  2732. if (!isInitialized()) return;
  2733. var pane = evtPane.call(this, evt_or_pane)
  2734. , $P = $Ps[pane]
  2735. , $C = $Cs[pane]
  2736. , $R = $Rs[pane]
  2737. , $T = $Ts[pane]
  2738. ;
  2739. // NOTE: elements can still exist even after remove()
  2740. // so check for missing data(), which is cleared by removed()
  2741. if ($P && $.isEmptyObject( $P.data() )) $P = false;
  2742. if ($C && $.isEmptyObject( $C.data() )) $C = false;
  2743. if ($R && $.isEmptyObject( $R.data() )) $R = false;
  2744. if ($T && $.isEmptyObject( $T.data() )) $T = false;
  2745. if ($P) $P.stop(true, true);
  2746. var o = options[pane]
  2747. , s = state[pane]
  2748. , d = "layout"
  2749. , css = "layoutCSS"
  2750. , pC = children[pane]
  2751. , hasChildren = $.isPlainObject( pC ) && !$.isEmptyObject( pC )
  2752. , destroy = destroyChild !== undefined ? destroyChild : o.destroyChildren
  2753. ;
  2754. // FIRST destroy the child-layout(s)
  2755. if (hasChildren && destroy) {
  2756. $.each( pC, function (key, child) {
  2757. if (!child.destroyed)
  2758. child.destroy(true);// tell child-layout to destroy ALL its child-layouts too
  2759. if (child.destroyed) // destroy was successful
  2760. delete pC[key];
  2761. });
  2762. // if no more children, remove the children hash
  2763. if ($.isEmptyObject( pC )) {
  2764. pC = children[pane] = null; // clear children hash
  2765. hasChildren = false;
  2766. }
  2767. }
  2768. // Note: can't 'remove' a pane element with non-destroyed children
  2769. if ($P && remove && !hasChildren)
  2770. $P.remove(); // remove the pane-element and everything inside it
  2771. else if ($P && $P[0]) {
  2772. // create list of ALL pane-classes that need to be removed
  2773. var root = o.paneClass // default="ui-layout-pane"
  2774. , pRoot = root +"-"+ pane // eg: "ui-layout-pane-west"
  2775. , _open = "-open"
  2776. , _sliding= "-sliding"
  2777. , _closed = "-closed"
  2778. , classes = [ root, root+_open, root+_closed, root+_sliding, // generic classes
  2779. pRoot, pRoot+_open, pRoot+_closed, pRoot+_sliding ] // pane-specific classes
  2780. ;
  2781. $.merge(classes, getHoverClasses($P, true)); // ADD hover-classes
  2782. // remove all Layout classes from pane-element
  2783. $P .removeClass( classes.join(" ") ) // remove ALL pane-classes
  2784. .removeData("parentLayout")
  2785. .removeData("layoutPane")
  2786. .removeData("layoutRole")
  2787. .removeData("layoutEdge")
  2788. .removeData("autoHidden") // in case set
  2789. .unbind("."+ sID) // remove ALL Layout events
  2790. // TODO: remove these extra unbind commands when jQuery is fixed
  2791. //.unbind("mouseenter"+ sID)
  2792. //.unbind("mouseleave"+ sID)
  2793. ;
  2794. // do NOT reset CSS if this pane/content is STILL the container of a nested layout!
  2795. // the nested layout will reset its 'container' CSS when/if it is destroyed
  2796. if (hasChildren && $C) {
  2797. // a content-div may not have a specific width, so give it one to contain the Layout
  2798. $C.width( $C.width() );
  2799. $.each( pC, function (key, child) {
  2800. child.resizeAll(); // resize the Layout
  2801. });
  2802. }
  2803. else if ($C)
  2804. $C.css( $C.data(css) ).removeData(css).removeData("layoutRole");
  2805. // remove pane AFTER content in case there was a nested layout
  2806. if (!$P.data(d))
  2807. $P.css( $P.data(css) ).removeData(css);
  2808. }
  2809. // REMOVE pane resizer and toggler elements
  2810. if ($T) $T.remove();
  2811. if ($R) $R.remove();
  2812. // CLEAR all pointers and state data
  2813. Instance[pane] = $Ps[pane] = $Cs[pane] = $Rs[pane] = $Ts[pane] = false;
  2814. s = { removed: true };
  2815. if (!skipResize)
  2816. resizeAll();
  2817. }
  2818. /*
  2819. * ###########################
  2820. * ACTION METHODS
  2821. * ###########################
  2822. */
  2823. /**
  2824. * @param {string} pane
  2825. */
  2826. , _hidePane = function (pane) {
  2827. var $P = $Ps[pane]
  2828. , o = options[pane]
  2829. , s = $P[0].style
  2830. ;
  2831. if (o.useOffscreenClose) {
  2832. if (!$P.data(_c.offscreenReset))
  2833. $P.data(_c.offscreenReset, { left: s.left, right: s.right });
  2834. $P.css( _c.offscreenCSS );
  2835. }
  2836. else
  2837. $P.hide().removeData(_c.offscreenReset);
  2838. }
  2839. /**
  2840. * @param {string} pane
  2841. */
  2842. , _showPane = function (pane) {
  2843. var $P = $Ps[pane]
  2844. , o = options[pane]
  2845. , off = _c.offscreenCSS
  2846. , old = $P.data(_c.offscreenReset)
  2847. , s = $P[0].style
  2848. ;
  2849. $P .show() // ALWAYS show, just in case
  2850. .removeData(_c.offscreenReset);
  2851. if (o.useOffscreenClose && old) {
  2852. if (s.left == off.left)
  2853. s.left = old.left;
  2854. if (s.right == off.right)
  2855. s.right = old.right;
  2856. }
  2857. }
  2858. /**
  2859. * Completely 'hides' a pane, including its spacing - as if it does not exist
  2860. * The pane is not actually 'removed' from the source, so can use 'show' to un-hide it
  2861. *
  2862. * @param {(string|Object)} evt_or_pane The pane being hidden, ie: north, south, east, or west
  2863. * @param {boolean=} [noAnimation=false]
  2864. */
  2865. , hide = function (evt_or_pane, noAnimation) {
  2866. if (!isInitialized()) return;
  2867. var pane = evtPane.call(this, evt_or_pane)
  2868. , o = options[pane]
  2869. , s = state[pane]
  2870. , $P = $Ps[pane]
  2871. , $R = $Rs[pane]
  2872. ;
  2873. if (!$P || s.isHidden) return; // pane does not exist OR is already hidden
  2874. // onhide_start callback - will CANCEL hide if returns false
  2875. if (state.initialized && false === _runCallbacks("onhide_start", pane)) return;
  2876. s.isSliding = false; // just in case
  2877. delete state.panesSliding[pane];
  2878. // now hide the elements
  2879. if ($R) $R.hide(); // hide resizer-bar
  2880. if (!state.initialized || s.isClosed) {
  2881. s.isClosed = true; // to trigger open-animation on show()
  2882. s.isHidden = true;
  2883. s.isVisible = false;
  2884. if (!state.initialized)
  2885. _hidePane(pane); // no animation when loading page
  2886. sizeMidPanes(_c[pane].dir === "horz" ? "" : "center");
  2887. if (state.initialized || o.triggerEventsOnLoad)
  2888. _runCallbacks("onhide_end", pane);
  2889. }
  2890. else {
  2891. s.isHiding = true; // used by onclose
  2892. close(pane, false, noAnimation); // adjust all panes to fit
  2893. }
  2894. }
  2895. /**
  2896. * Show a hidden pane - show as 'closed' by default unless openPane = true
  2897. *
  2898. * @param {(string|Object)} evt_or_pane The pane being opened, ie: north, south, east, or west
  2899. * @param {boolean=} [openPane=false]
  2900. * @param {boolean=} [noAnimation=false]
  2901. * @param {boolean=} [noAlert=false]
  2902. */
  2903. , show = function (evt_or_pane, openPane, noAnimation, noAlert) {
  2904. if (!isInitialized()) return;
  2905. var pane = evtPane.call(this, evt_or_pane)
  2906. , o = options[pane]
  2907. , s = state[pane]
  2908. , $P = $Ps[pane]
  2909. , $R = $Rs[pane]
  2910. ;
  2911. if (!$P || !s.isHidden) return; // pane does not exist OR is not hidden
  2912. // onshow_start callback - will CANCEL show if returns false
  2913. if (false === _runCallbacks("onshow_start", pane)) return;
  2914. s.isShowing = true; // used by onopen/onclose
  2915. //s.isHidden = false; - will be set by open/close - if not cancelled
  2916. s.isSliding = false; // just in case
  2917. delete state.panesSliding[pane];
  2918. // now show the elements
  2919. //if ($R) $R.show(); - will be shown by open/close
  2920. if (openPane === false)
  2921. close(pane, true); // true = force
  2922. else
  2923. open(pane, false, noAnimation, noAlert); // adjust all panes to fit
  2924. }
  2925. /**
  2926. * Toggles a pane open/closed by calling either open or close
  2927. *
  2928. * @param {(string|Object)} evt_or_pane The pane being toggled, ie: north, south, east, or west
  2929. * @param {boolean=} [slide=false]
  2930. */
  2931. , toggle = function (evt_or_pane, slide) {
  2932. if (!isInitialized()) return;
  2933. var evt = evtObj(evt_or_pane)
  2934. , pane = evtPane.call(this, evt_or_pane)
  2935. , s = state[pane]
  2936. ;
  2937. if (evt) // called from to $R.dblclick OR triggerPaneEvent
  2938. evt.stopImmediatePropagation();
  2939. if (s.isHidden)
  2940. show(pane); // will call 'open' after unhiding it
  2941. else if (s.isClosed)
  2942. open(pane, !!slide);
  2943. else
  2944. close(pane);
  2945. }
  2946. /**
  2947. * Utility method used during init or other auto-processes
  2948. *
  2949. * @param {string} pane The pane being closed
  2950. * @param {boolean=} [setHandles=false]
  2951. */
  2952. , _closePane = function (pane, setHandles) {
  2953. var
  2954. $P = $Ps[pane]
  2955. , s = state[pane]
  2956. ;
  2957. _hidePane(pane);
  2958. s.isClosed = true;
  2959. s.isVisible = false;
  2960. // UNUSED: if (setHandles) setAsClosed(pane, true); // true = force
  2961. }
  2962. /**
  2963. * Close the specified pane (animation optional), and resize all other panes as needed
  2964. *
  2965. * @param {(string|Object)} evt_or_pane The pane being closed, ie: north, south, east, or west
  2966. * @param {boolean=} [force=false]
  2967. * @param {boolean=} [noAnimation=false]
  2968. * @param {boolean=} [skipCallback=false]
  2969. */
  2970. , close = function (evt_or_pane, force, noAnimation, skipCallback) {
  2971. var pane = evtPane.call(this, evt_or_pane);
  2972. // if pane has been initialized, but NOT the complete layout, close pane instantly
  2973. if (!state.initialized && $Ps[pane]) {
  2974. _closePane(pane); // INIT pane as closed
  2975. return;
  2976. }
  2977. if (!isInitialized()) return;
  2978. var
  2979. $P = $Ps[pane]
  2980. , $R = $Rs[pane]
  2981. , $T = $Ts[pane]
  2982. , o = options[pane]
  2983. , s = state[pane]
  2984. , c = _c[pane]
  2985. , doFX, isShowing, isHiding, wasSliding;
  2986. // QUEUE in case another action/animation is in progress
  2987. $N.queue(function( queueNext ){
  2988. if ( !$P
  2989. || (!o.closable && !s.isShowing && !s.isHiding) // invalid request // (!o.resizable && !o.closable) ???
  2990. || (!force && s.isClosed && !s.isShowing) // already closed
  2991. ) return queueNext();
  2992. // onclose_start callback - will CANCEL hide if returns false
  2993. // SKIP if just 'showing' a hidden pane as 'closed'
  2994. var abort = !s.isShowing && false === _runCallbacks("onclose_start", pane);
  2995. // transfer logic vars to temp vars
  2996. isShowing = s.isShowing;
  2997. isHiding = s.isHiding;
  2998. wasSliding = s.isSliding;
  2999. // now clear the logic vars (REQUIRED before aborting)
  3000. delete s.isShowing;
  3001. delete s.isHiding;
  3002. if (abort) return queueNext();
  3003. doFX = !noAnimation && !s.isClosed && (o.fxName_close != "none");
  3004. s.isMoving = true;
  3005. s.isClosed = true;
  3006. s.isVisible = false;
  3007. // update isHidden BEFORE sizing panes
  3008. if (isHiding) s.isHidden = true;
  3009. else if (isShowing) s.isHidden = false;
  3010. if (s.isSliding) // pane is being closed, so UNBIND trigger events
  3011. bindStopSlidingEvents(pane, false); // will set isSliding=false
  3012. else // resize panes adjacent to this one
  3013. sizeMidPanes(_c[pane].dir === "horz" ? "" : "center", false); // false = NOT skipCallback
  3014. // if this pane has a resizer bar, move it NOW - before animation
  3015. setAsClosed(pane);
  3016. // CLOSE THE PANE
  3017. if (doFX) { // animate the close
  3018. lockPaneForFX(pane, true); // need to set left/top so animation will work
  3019. $P.hide( o.fxName_close, o.fxSettings_close, o.fxSpeed_close, function () {
  3020. lockPaneForFX(pane, false); // undo
  3021. if (s.isClosed) close_2();
  3022. queueNext();
  3023. });
  3024. }
  3025. else { // hide the pane without animation
  3026. _hidePane(pane);
  3027. close_2();
  3028. queueNext();
  3029. };
  3030. });
  3031. // SUBROUTINE
  3032. function close_2 () {
  3033. s.isMoving = false;
  3034. bindStartSlidingEvents(pane, true); // will enable if o.slidable = true
  3035. // if opposite-pane was autoClosed, see if it can be autoOpened now
  3036. var altPane = _c.oppositeEdge[pane];
  3037. if (state[ altPane ].noRoom) {
  3038. setSizeLimits( altPane );
  3039. makePaneFit( altPane );
  3040. }
  3041. if (!skipCallback && (state.initialized || o.triggerEventsOnLoad)) {
  3042. // onclose callback - UNLESS just 'showing' a hidden pane as 'closed'
  3043. if (!isShowing) _runCallbacks("onclose_end", pane);
  3044. // onhide OR onshow callback
  3045. if (isShowing) _runCallbacks("onshow_end", pane);
  3046. if (isHiding) _runCallbacks("onhide_end", pane);
  3047. }
  3048. }
  3049. }
  3050. /**
  3051. * @param {string} pane The pane just closed, ie: north, south, east, or west
  3052. */
  3053. , setAsClosed = function (pane) {
  3054. var
  3055. $P = $Ps[pane]
  3056. , $R = $Rs[pane]
  3057. , $T = $Ts[pane]
  3058. , o = options[pane]
  3059. , s = state[pane]
  3060. , side = _c[pane].side
  3061. , rClass = o.resizerClass
  3062. , tClass = o.togglerClass
  3063. , _pane = "-"+ pane // used for classNames
  3064. , _open = "-open"
  3065. , _sliding= "-sliding"
  3066. , _closed = "-closed"
  3067. ;
  3068. $R
  3069. .css(side, sC.inset[side]) // move the resizer
  3070. .removeClass( rClass+_open +" "+ rClass+_pane+_open )
  3071. .removeClass( rClass+_sliding +" "+ rClass+_pane+_sliding )
  3072. .addClass( rClass+_closed +" "+ rClass+_pane+_closed )
  3073. ;
  3074. // DISABLE 'resizing' when closed - do this BEFORE bindStartSlidingEvents?
  3075. if (o.resizable && $.layout.plugins.draggable)
  3076. $R
  3077. .draggable("disable")
  3078. .removeClass("ui-state-disabled") // do NOT apply disabled styling - not suitable here
  3079. .css("cursor", "default")
  3080. .attr("title","")
  3081. ;
  3082. // if pane has a toggler button, adjust that too
  3083. if ($T) {
  3084. $T
  3085. .removeClass( tClass+_open +" "+ tClass+_pane+_open )
  3086. .addClass( tClass+_closed +" "+ tClass+_pane+_closed )
  3087. .attr("title", o.tips.Open) // may be blank
  3088. ;
  3089. // toggler-content - if exists
  3090. $T.children(".content-open").hide();
  3091. $T.children(".content-closed").css("display","block");
  3092. }
  3093. // sync any 'pin buttons'
  3094. syncPinBtns(pane, false);
  3095. if (state.initialized) {
  3096. // resize 'length' and position togglers for adjacent panes
  3097. sizeHandles();
  3098. }
  3099. }
  3100. /**
  3101. * Open the specified pane (animation optional), and resize all other panes as needed
  3102. *
  3103. * @param {(string|Object)} evt_or_pane The pane being opened, ie: north, south, east, or west
  3104. * @param {boolean=} [slide=false]
  3105. * @param {boolean=} [noAnimation=false]
  3106. * @param {boolean=} [noAlert=false]
  3107. */
  3108. , open = function (evt_or_pane, slide, noAnimation, noAlert) {
  3109. if (!isInitialized()) return;
  3110. var pane = evtPane.call(this, evt_or_pane)
  3111. , $P = $Ps[pane]
  3112. , $R = $Rs[pane]
  3113. , $T = $Ts[pane]
  3114. , o = options[pane]
  3115. , s = state[pane]
  3116. , c = _c[pane]
  3117. , doFX, isShowing
  3118. ;
  3119. // QUEUE in case another action/animation is in progress
  3120. $N.queue(function( queueNext ){
  3121. if ( !$P
  3122. || (!o.resizable && !o.closable && !s.isShowing) // invalid request
  3123. || (s.isVisible && !s.isSliding) // already open
  3124. ) return queueNext();
  3125. // pane can ALSO be unhidden by just calling show(), so handle this scenario
  3126. if (s.isHidden && !s.isShowing) {
  3127. queueNext(); // call before show() because it needs the queue free
  3128. show(pane, true);
  3129. return;
  3130. }
  3131. if (s.autoResize && s.size != o.size) // resize pane to original size set in options
  3132. sizePane(pane, o.size, true, true, true); // true=skipCallback/noAnimation/forceResize
  3133. else
  3134. // make sure there is enough space available to open the pane
  3135. setSizeLimits(pane, slide);
  3136. // onopen_start callback - will CANCEL open if returns false
  3137. var cbReturn = _runCallbacks("onopen_start", pane);
  3138. if (cbReturn === "abort")
  3139. return queueNext();
  3140. // update pane-state again in case options were changed in onopen_start
  3141. if (cbReturn !== "NC") // NC = "No Callback"
  3142. setSizeLimits(pane, slide);
  3143. if (s.minSize > s.maxSize) { // INSUFFICIENT ROOM FOR PANE TO OPEN!
  3144. syncPinBtns(pane, false); // make sure pin-buttons are reset
  3145. if (!noAlert && o.tips.noRoomToOpen)
  3146. alert(o.tips.noRoomToOpen);
  3147. return queueNext(); // ABORT
  3148. }
  3149. if (slide) // START Sliding - will set isSliding=true
  3150. bindStopSlidingEvents(pane, true); // BIND trigger events to close sliding-pane
  3151. else if (s.isSliding) // PIN PANE (stop sliding) - open pane 'normally' instead
  3152. bindStopSlidingEvents(pane, false); // UNBIND trigger events - will set isSliding=false
  3153. else if (o.slidable)
  3154. bindStartSlidingEvents(pane, false); // UNBIND trigger events
  3155. s.noRoom = false; // will be reset by makePaneFit if 'noRoom'
  3156. makePaneFit(pane);
  3157. // transfer logic var to temp var
  3158. isShowing = s.isShowing;
  3159. // now clear the logic var
  3160. delete s.isShowing;
  3161. doFX = !noAnimation && s.isClosed && (o.fxName_open != "none");
  3162. s.isMoving = true;
  3163. s.isVisible = true;
  3164. s.isClosed = false;
  3165. // update isHidden BEFORE sizing panes - WHY??? Old?
  3166. if (isShowing) s.isHidden = false;
  3167. if (doFX) { // ANIMATE
  3168. // mask adjacent panes with objects
  3169. lockPaneForFX(pane, true); // need to set left/top so animation will work
  3170. $P.show( o.fxName_open, o.fxSettings_open, o.fxSpeed_open, function() {
  3171. lockPaneForFX(pane, false); // undo
  3172. if (s.isVisible) open_2(); // continue
  3173. queueNext();
  3174. });
  3175. }
  3176. else { // no animation
  3177. _showPane(pane);// just show pane and...
  3178. open_2(); // continue
  3179. queueNext();
  3180. };
  3181. });
  3182. // SUBROUTINE
  3183. function open_2 () {
  3184. s.isMoving = false;
  3185. // cure iframe display issues
  3186. _fixIframe(pane);
  3187. // NOTE: if isSliding, then other panes are NOT 'resized'
  3188. if (!s.isSliding) { // resize all panes adjacent to this one
  3189. sizeMidPanes(_c[pane].dir=="vert" ? "center" : "", false); // false = NOT skipCallback
  3190. }
  3191. // set classes, position handles and execute callbacks...
  3192. setAsOpen(pane);
  3193. };
  3194. }
  3195. /**
  3196. * @param {string} pane The pane just opened, ie: north, south, east, or west
  3197. * @param {boolean=} [skipCallback=false]
  3198. */
  3199. , setAsOpen = function (pane, skipCallback) {
  3200. var
  3201. $P = $Ps[pane]
  3202. , $R = $Rs[pane]
  3203. , $T = $Ts[pane]
  3204. , o = options[pane]
  3205. , s = state[pane]
  3206. , side = _c[pane].side
  3207. , rClass = o.resizerClass
  3208. , tClass = o.togglerClass
  3209. , _pane = "-"+ pane // used for classNames
  3210. , _open = "-open"
  3211. , _closed = "-closed"
  3212. , _sliding= "-sliding"
  3213. ;
  3214. $R
  3215. .css(side, sC.inset[side] + getPaneSize(pane)) // move the resizer
  3216. .removeClass( rClass+_closed +" "+ rClass+_pane+_closed )
  3217. .addClass( rClass+_open +" "+ rClass+_pane+_open )
  3218. ;
  3219. if (s.isSliding)
  3220. $R.addClass( rClass+_sliding +" "+ rClass+_pane+_sliding )
  3221. else // in case 'was sliding'
  3222. $R.removeClass( rClass+_sliding +" "+ rClass+_pane+_sliding )
  3223. removeHover( 0, $R ); // remove hover classes
  3224. if (o.resizable && $.layout.plugins.draggable)
  3225. $R .draggable("enable")
  3226. .css("cursor", o.resizerCursor)
  3227. .attr("title", o.tips.Resize);
  3228. else if (!s.isSliding)
  3229. $R.css("cursor", "default"); // n-resize, s-resize, etc
  3230. // if pane also has a toggler button, adjust that too
  3231. if ($T) {
  3232. $T .removeClass( tClass+_closed +" "+ tClass+_pane+_closed )
  3233. .addClass( tClass+_open +" "+ tClass+_pane+_open )
  3234. .attr("title", o.tips.Close); // may be blank
  3235. removeHover( 0, $T ); // remove hover classes
  3236. // toggler-content - if exists
  3237. $T.children(".content-closed").hide();
  3238. $T.children(".content-open").css("display","block");
  3239. }
  3240. // sync any 'pin buttons'
  3241. syncPinBtns(pane, !s.isSliding);
  3242. // update pane-state dimensions - BEFORE resizing content
  3243. $.extend(s, elDims($P));
  3244. if (state.initialized) {
  3245. // resize resizer & toggler sizes for all panes
  3246. sizeHandles();
  3247. // resize content every time pane opens - to be sure
  3248. sizeContent(pane, true); // true = remeasure headers/footers, even if 'pane.isMoving'
  3249. }
  3250. if (!skipCallback && (state.initialized || o.triggerEventsOnLoad) && $P.is(":visible")) {
  3251. // onopen callback
  3252. _runCallbacks("onopen_end", pane);
  3253. // onshow callback - TODO: should this be here?
  3254. if (s.isShowing) _runCallbacks("onshow_end", pane);
  3255. // ALSO call onresize because layout-size *may* have changed while pane was closed
  3256. if (state.initialized)
  3257. _runCallbacks("onresize_end", pane);
  3258. }
  3259. // TODO: Somehow sizePane("north") is being called after this point???
  3260. }
  3261. /**
  3262. * slideOpen / slideClose / slideToggle
  3263. *
  3264. * Pass-though methods for sliding
  3265. */
  3266. , slideOpen = function (evt_or_pane) {
  3267. if (!isInitialized()) return;
  3268. var evt = evtObj(evt_or_pane)
  3269. , pane = evtPane.call(this, evt_or_pane)
  3270. , s = state[pane]
  3271. , delay = options[pane].slideDelay_open
  3272. ;
  3273. // prevent event from triggering on NEW resizer binding created below
  3274. if (evt) evt.stopImmediatePropagation();
  3275. if (s.isClosed && evt && evt.type === "mouseenter" && delay > 0)
  3276. // trigger = mouseenter - use a delay
  3277. timer.set(pane+"_openSlider", open_NOW, delay);
  3278. else
  3279. open_NOW(); // will unbind events if is already open
  3280. /**
  3281. * SUBROUTINE for timed open
  3282. */
  3283. function open_NOW () {
  3284. if (!s.isClosed) // skip if no longer closed!
  3285. bindStopSlidingEvents(pane, true); // BIND trigger events to close sliding-pane
  3286. else if (!s.isMoving)
  3287. open(pane, true); // true = slide - open() will handle binding
  3288. };
  3289. }
  3290. , slideClose = function (evt_or_pane) {
  3291. if (!isInitialized()) return;
  3292. var evt = evtObj(evt_or_pane)
  3293. , pane = evtPane.call(this, evt_or_pane)
  3294. , o = options[pane]
  3295. , s = state[pane]
  3296. , delay = s.isMoving ? 1000 : 300 // MINIMUM delay - option may override
  3297. ;
  3298. if (s.isClosed || s.isResizing)
  3299. return; // skip if already closed OR in process of resizing
  3300. else if (o.slideTrigger_close === "click")
  3301. close_NOW(); // close immediately onClick
  3302. else if (o.preventQuickSlideClose && s.isMoving)
  3303. return; // handle Chrome quick-close on slide-open
  3304. else if (o.preventPrematureSlideClose && evt && $.layout.isMouseOverElem(evt, $Ps[pane]))
  3305. return; // handle incorrect mouseleave trigger, like when over a SELECT-list in IE
  3306. else if (evt) // trigger = mouseleave - use a delay
  3307. // 1 sec delay if 'opening', else .3 sec
  3308. timer.set(pane+"_closeSlider", close_NOW, max(o.slideDelay_close, delay));
  3309. else // called programically
  3310. close_NOW();
  3311. /**
  3312. * SUBROUTINE for timed close
  3313. */
  3314. function close_NOW () {
  3315. if (s.isClosed) // skip 'close' if already closed!
  3316. bindStopSlidingEvents(pane, false); // UNBIND trigger events - TODO: is this needed here?
  3317. else if (!s.isMoving)
  3318. close(pane); // close will handle unbinding
  3319. };
  3320. }
  3321. /**
  3322. * @param {(string|Object)} evt_or_pane The pane being opened, ie: north, south, east, or west
  3323. */
  3324. , slideToggle = function (evt_or_pane) {
  3325. var pane = evtPane.call(this, evt_or_pane);
  3326. toggle(pane, true);
  3327. }
  3328. /**
  3329. * Must set left/top on East/South panes so animation will work properly
  3330. *
  3331. * @param {string} pane The pane to lock, 'east' or 'south' - any other is ignored!
  3332. * @param {boolean} doLock true = set left/top, false = remove
  3333. */
  3334. , lockPaneForFX = function (pane, doLock) {
  3335. var $P = $Ps[pane]
  3336. , s = state[pane]
  3337. , o = options[pane]
  3338. , z = options.zIndexes
  3339. ;
  3340. if (doLock) {
  3341. showMasks( pane, { animation: true, objectsOnly: true });
  3342. $P.css({ zIndex: z.pane_animate }); // overlay all elements during animation
  3343. if (pane=="south")
  3344. $P.css({ top: sC.inset.top + sC.innerHeight - $P.outerHeight() });
  3345. else if (pane=="east")
  3346. $P.css({ left: sC.inset.left + sC.innerWidth - $P.outerWidth() });
  3347. }
  3348. else { // animation DONE - RESET CSS
  3349. hideMasks();
  3350. $P.css({ zIndex: (s.isSliding ? z.pane_sliding : z.pane_normal) });
  3351. if (pane=="south")
  3352. $P.css({ top: "auto" });
  3353. // if pane is positioned 'off-screen', then DO NOT screw with it!
  3354. else if (pane=="east" && !$P.css("left").match(/\-99999/))
  3355. $P.css({ left: "auto" });
  3356. // fix anti-aliasing in IE - only needed for animations that change opacity
  3357. if (browser.msie && o.fxOpacityFix && o.fxName_open != "slide" && $P.css("filter") && $P.css("opacity") == 1)
  3358. $P[0].style.removeAttribute('filter');
  3359. }
  3360. }
  3361. /**
  3362. * Toggle sliding functionality of a specific pane on/off by adding removing 'slide open' trigger
  3363. *
  3364. * @see open(), close()
  3365. * @param {string} pane The pane to enable/disable, 'north', 'south', etc.
  3366. * @param {boolean} enable Enable or Disable sliding?
  3367. */
  3368. , bindStartSlidingEvents = function (pane, enable) {
  3369. var o = options[pane]
  3370. , $P = $Ps[pane]
  3371. , $R = $Rs[pane]
  3372. , evtName = o.slideTrigger_open.toLowerCase()
  3373. ;
  3374. if (!$R || (enable && !o.slidable)) return;
  3375. // make sure we have a valid event
  3376. if (evtName.match(/mouseover/))
  3377. evtName = o.slideTrigger_open = "mouseenter";
  3378. else if (!evtName.match(/(click|dblclick|mouseenter)/))
  3379. evtName = o.slideTrigger_open = "click";
  3380. // must remove double-click-toggle when using dblclick-slide
  3381. if (o.resizerDblClickToggle && evtName.match(/click/)) {
  3382. $R[enable ? "unbind" : "bind"]('dblclick.'+ sID, toggle)
  3383. }
  3384. $R
  3385. // add or remove event
  3386. [enable ? "bind" : "unbind"](evtName +'.'+ sID, slideOpen)
  3387. // set the appropriate cursor & title/tip
  3388. .css("cursor", enable ? o.sliderCursor : "default")
  3389. .attr("title", enable ? o.tips.Slide : "")
  3390. ;
  3391. }
  3392. /**
  3393. * Add or remove 'mouseleave' events to 'slide close' when pane is 'sliding' open or closed
  3394. * Also increases zIndex when pane is sliding open
  3395. * See bindStartSlidingEvents for code to control 'slide open'
  3396. *
  3397. * @see slideOpen(), slideClose()
  3398. * @param {string} pane The pane to process, 'north', 'south', etc.
  3399. * @param {boolean} enable Enable or Disable events?
  3400. */
  3401. , bindStopSlidingEvents = function (pane, enable) {
  3402. var o = options[pane]
  3403. , s = state[pane]
  3404. , c = _c[pane]
  3405. , z = options.zIndexes
  3406. , evtName = o.slideTrigger_close.toLowerCase()
  3407. , action = (enable ? "bind" : "unbind")
  3408. , $P = $Ps[pane]
  3409. , $R = $Rs[pane]
  3410. ;
  3411. timer.clear(pane+"_closeSlider"); // just in case
  3412. if (enable) {
  3413. s.isSliding = true;
  3414. state.panesSliding[pane] = true;
  3415. // remove 'slideOpen' event from resizer
  3416. // ALSO will raise the zIndex of the pane & resizer
  3417. bindStartSlidingEvents(pane, false);
  3418. }
  3419. else {
  3420. s.isSliding = false;
  3421. delete state.panesSliding[pane];
  3422. }
  3423. // RE/SET zIndex - increases when pane is sliding-open, resets to normal when not
  3424. $P.css("zIndex", enable ? z.pane_sliding : z.pane_normal);
  3425. $R.css("zIndex", enable ? z.pane_sliding+2 : z.resizer_normal); // NOTE: mask = pane_sliding+1
  3426. // make sure we have a valid event
  3427. if (!evtName.match(/(click|mouseleave)/))
  3428. evtName = o.slideTrigger_close = "mouseleave"; // also catches 'mouseout'
  3429. // add/remove slide triggers
  3430. $R[action](evtName, slideClose); // base event on resize
  3431. // need extra events for mouseleave
  3432. if (evtName === "mouseleave") {
  3433. // also close on pane.mouseleave
  3434. $P[action]("mouseleave."+ sID, slideClose);
  3435. // cancel timer when mouse moves between 'pane' and 'resizer'
  3436. $R[action]("mouseenter."+ sID, cancelMouseOut);
  3437. $P[action]("mouseenter."+ sID, cancelMouseOut);
  3438. }
  3439. if (!enable)
  3440. timer.clear(pane+"_closeSlider");
  3441. else if (evtName === "click" && !o.resizable) {
  3442. // IF pane is not resizable (which already has a cursor and tip)
  3443. // then set the a cursor & title/tip on resizer when sliding
  3444. $R.css("cursor", enable ? o.sliderCursor : "default");
  3445. $R.attr("title", enable ? o.tips.Close : ""); // use Toggler-tip, eg: "Close Pane"
  3446. }
  3447. // SUBROUTINE for mouseleave timer clearing
  3448. function cancelMouseOut (evt) {
  3449. timer.clear(pane+"_closeSlider");
  3450. evt.stopPropagation();
  3451. }
  3452. }
  3453. /**
  3454. * Hides/closes a pane if there is insufficient room - reverses this when there is room again
  3455. * MUST have already called setSizeLimits() before calling this method
  3456. *
  3457. * @param {string} pane The pane being resized
  3458. * @param {boolean=} [isOpening=false] Called from onOpen?
  3459. * @param {boolean=} [skipCallback=false] Should the onresize callback be run?
  3460. * @param {boolean=} [force=false]
  3461. */
  3462. , makePaneFit = function (pane, isOpening, skipCallback, force) {
  3463. var
  3464. o = options[pane]
  3465. , s = state[pane]
  3466. , c = _c[pane]
  3467. , $P = $Ps[pane]
  3468. , $R = $Rs[pane]
  3469. , isSidePane = c.dir==="vert"
  3470. , hasRoom = false
  3471. ;
  3472. // special handling for center & east/west panes
  3473. if (pane === "center" || (isSidePane && s.noVerticalRoom)) {
  3474. // see if there is enough room to display the pane
  3475. // ERROR: hasRoom = s.minHeight <= s.maxHeight && (isSidePane || s.minWidth <= s.maxWidth);
  3476. hasRoom = (s.maxHeight >= 0);
  3477. if (hasRoom && s.noRoom) { // previously hidden due to noRoom, so show now
  3478. _showPane(pane);
  3479. if ($R) $R.show();
  3480. s.isVisible = true;
  3481. s.noRoom = false;
  3482. if (isSidePane) s.noVerticalRoom = false;
  3483. _fixIframe(pane);
  3484. }
  3485. else if (!hasRoom && !s.noRoom) { // not currently hidden, so hide now
  3486. _hidePane(pane);
  3487. if ($R) $R.hide();
  3488. s.isVisible = false;
  3489. s.noRoom = true;
  3490. }
  3491. }
  3492. // see if there is enough room to fit the border-pane
  3493. if (pane === "center") {
  3494. // ignore center in this block
  3495. }
  3496. else if (s.minSize <= s.maxSize) { // pane CAN fit
  3497. hasRoom = true;
  3498. if (s.size > s.maxSize) // pane is too big - shrink it
  3499. sizePane(pane, s.maxSize, skipCallback, true, force); // true = noAnimation
  3500. else if (s.size < s.minSize) // pane is too small - enlarge it
  3501. sizePane(pane, s.minSize, skipCallback, true, force); // true = noAnimation
  3502. // need s.isVisible because new pseudoClose method keeps pane visible, but off-screen
  3503. else if ($R && s.isVisible && $P.is(":visible")) {
  3504. // make sure resizer-bar is positioned correctly
  3505. // handles situation where nested layout was 'hidden' when initialized
  3506. var pos = s.size + sC.inset[c.side];
  3507. if ($.layout.cssNum( $R, c.side ) != pos) $R.css( c.side, pos );
  3508. }
  3509. // if was previously hidden due to noRoom, then RESET because NOW there is room
  3510. if (s.noRoom) {
  3511. // s.noRoom state will be set by open or show
  3512. if (s.wasOpen && o.closable) {
  3513. if (o.autoReopen)
  3514. open(pane, false, true, true); // true = noAnimation, true = noAlert
  3515. else // leave the pane closed, so just update state
  3516. s.noRoom = false;
  3517. }
  3518. else
  3519. show(pane, s.wasOpen, true, true); // true = noAnimation, true = noAlert
  3520. }
  3521. }
  3522. else { // !hasRoom - pane CANNOT fit
  3523. if (!s.noRoom) { // pane not set as noRoom yet, so hide or close it now...
  3524. s.noRoom = true; // update state
  3525. s.wasOpen = !s.isClosed && !s.isSliding;
  3526. if (s.isClosed){} // SKIP
  3527. else if (o.closable) // 'close' if possible
  3528. close(pane, true, true); // true = force, true = noAnimation
  3529. else // 'hide' pane if cannot just be closed
  3530. hide(pane, true); // true = noAnimation
  3531. }
  3532. }
  3533. }
  3534. /**
  3535. * sizePane / manualSizePane
  3536. * sizePane is called only by internal methods whenever a pane needs to be resized
  3537. * manualSizePane is an exposed flow-through method allowing extra code when pane is 'manually resized'
  3538. *
  3539. * @param {(string|Object)} evt_or_pane The pane being resized
  3540. * @param {number} size The *desired* new size for this pane - will be validated
  3541. * @param {boolean=} [skipCallback=false] Should the onresize callback be run?
  3542. * @param {boolean=} [noAnimation=false]
  3543. * @param {boolean=} [force=false] Force resizing even if does not seem necessary
  3544. */
  3545. , manualSizePane = function (evt_or_pane, size, skipCallback, noAnimation, force) {
  3546. if (!isInitialized()) return;
  3547. var pane = evtPane.call(this, evt_or_pane)
  3548. , o = options[pane]
  3549. , s = state[pane]
  3550. // if resizing callbacks have been delayed and resizing is now DONE, force resizing to complete...
  3551. , forceResize = force || (o.livePaneResizing && !s.isResizing)
  3552. ;
  3553. // ANY call to manualSizePane disables autoResize - ie, percentage sizing
  3554. s.autoResize = false;
  3555. // flow-through...
  3556. sizePane(pane, size, skipCallback, noAnimation, forceResize); // will animate resize if option enabled
  3557. }
  3558. /**
  3559. * @param {(string|Object)} evt_or_pane The pane being resized
  3560. * @param {number} size The *desired* new size for this pane - will be validated
  3561. * @param {boolean=} [skipCallback=false] Should the onresize callback be run?
  3562. * @param {boolean=} [noAnimation=false]
  3563. * @param {boolean=} [force=false] Force resizing even if does not seem necessary
  3564. */
  3565. , sizePane = function (evt_or_pane, size, skipCallback, noAnimation, force) {
  3566. if (!isInitialized()) return;
  3567. var pane = evtPane.call(this, evt_or_pane) // probably NEVER called from event?
  3568. , o = options[pane]
  3569. , s = state[pane]
  3570. , $P = $Ps[pane]
  3571. , $R = $Rs[pane]
  3572. , side = _c[pane].side
  3573. , dimName = _c[pane].sizeType.toLowerCase()
  3574. , skipResizeWhileDragging = s.isResizing && !o.triggerEventsDuringLiveResize
  3575. , doFX = noAnimation !== true && o.animatePaneSizing
  3576. , oldSize, newSize
  3577. ;
  3578. // QUEUE in case another action/animation is in progress
  3579. $N.queue(function( queueNext ){
  3580. // calculate 'current' min/max sizes
  3581. setSizeLimits(pane); // update pane-state
  3582. oldSize = s.size;
  3583. size = _parseSize(pane, size); // handle percentages & auto
  3584. size = max(size, _parseSize(pane, o.minSize));
  3585. size = min(size, s.maxSize);
  3586. if (size < s.minSize) { // not enough room for pane!
  3587. queueNext(); // call before makePaneFit() because it needs the queue free
  3588. makePaneFit(pane, false, skipCallback); // will hide or close pane
  3589. return;
  3590. }
  3591. // IF newSize is same as oldSize, then nothing to do - abort
  3592. if (!force && size === oldSize)
  3593. return queueNext();
  3594. s.newSize = size;
  3595. // onresize_start callback CANNOT cancel resizing because this would break the layout!
  3596. if (!skipCallback && state.initialized && s.isVisible)
  3597. _runCallbacks("onresize_start", pane);
  3598. // resize the pane, and make sure its visible
  3599. newSize = cssSize(pane, size);
  3600. if (doFX && $P.is(":visible")) { // ANIMATE
  3601. var fx = $.layout.effects.size[pane] || $.layout.effects.size.all
  3602. , easing = o.fxSettings_size.easing || fx.easing
  3603. , z = options.zIndexes
  3604. , props = {};
  3605. props[ dimName ] = newSize +'px';
  3606. s.isMoving = true;
  3607. // overlay all elements during animation
  3608. $P.css({ zIndex: z.pane_animate })
  3609. .show().animate( props, o.fxSpeed_size, easing, function(){
  3610. // reset zIndex after animation
  3611. $P.css({ zIndex: (s.isSliding ? z.pane_sliding : z.pane_normal) });
  3612. s.isMoving = false;
  3613. delete s.newSize;
  3614. sizePane_2(); // continue
  3615. queueNext();
  3616. });
  3617. }
  3618. else { // no animation
  3619. $P.css( dimName, newSize ); // resize pane
  3620. delete s.newSize;
  3621. // if pane is visible, then
  3622. if ($P.is(":visible"))
  3623. sizePane_2(); // continue
  3624. else {
  3625. // pane is NOT VISIBLE, so just update state data...
  3626. // when pane is *next opened*, it will have the new size
  3627. s.size = size; // update state.size
  3628. $.extend(s, elDims($P)); // update state dimensions
  3629. }
  3630. queueNext();
  3631. };
  3632. });
  3633. // SUBROUTINE
  3634. function sizePane_2 () {
  3635. /* Panes are sometimes not sized precisely in some browsers!?
  3636. * This code will resize the pane up to 3 times to nudge the pane to the correct size
  3637. */
  3638. var actual = dimName==='width' ? $P.outerWidth() : $P.outerHeight()
  3639. , tries = [{
  3640. pane: pane
  3641. , count: 1
  3642. , target: size
  3643. , actual: actual
  3644. , correct: (size === actual)
  3645. , attempt: size
  3646. , cssSize: newSize
  3647. }]
  3648. , lastTry = tries[0]
  3649. , thisTry = {}
  3650. , msg = 'Inaccurate size after resizing the '+ pane +'-pane.'
  3651. ;
  3652. while ( !lastTry.correct ) {
  3653. thisTry = { pane: pane, count: lastTry.count+1, target: size };
  3654. if (lastTry.actual > size)
  3655. thisTry.attempt = max(0, lastTry.attempt - (lastTry.actual - size));
  3656. else // lastTry.actual < size
  3657. thisTry.attempt = max(0, lastTry.attempt + (size - lastTry.actual));
  3658. thisTry.cssSize = cssSize(pane, thisTry.attempt);
  3659. $P.css( dimName, thisTry.cssSize );
  3660. thisTry.actual = dimName=='width' ? $P.outerWidth() : $P.outerHeight();
  3661. thisTry.correct = (size === thisTry.actual);
  3662. // log attempts and alert the user of this *non-fatal error* (if showDebugMessages)
  3663. if ( tries.length === 1) {
  3664. _log(msg, false, true);
  3665. _log(lastTry, false, true);
  3666. }
  3667. _log(thisTry, false, true);
  3668. // after 4 tries, is as close as its gonna get!
  3669. if (tries.length > 3) break;
  3670. tries.push( thisTry );
  3671. lastTry = tries[ tries.length - 1 ];
  3672. }
  3673. // END TESTING CODE
  3674. // update pane-state dimensions
  3675. s.size = size;
  3676. $.extend(s, elDims($P));
  3677. if (s.isVisible && $P.is(":visible")) {
  3678. // reposition the resizer-bar
  3679. if ($R) $R.css( side, size + sC.inset[side] );
  3680. // resize the content-div
  3681. sizeContent(pane);
  3682. }
  3683. if (!skipCallback && !skipResizeWhileDragging && state.initialized && s.isVisible)
  3684. _runCallbacks("onresize_end", pane);
  3685. // resize all the adjacent panes, and adjust their toggler buttons
  3686. // when skipCallback passed, it means the controlling method will handle 'other panes'
  3687. if (!skipCallback) {
  3688. // also no callback if live-resize is in progress and NOT triggerEventsDuringLiveResize
  3689. if (!s.isSliding) sizeMidPanes(_c[pane].dir=="horz" ? "" : "center", skipResizeWhileDragging, force);
  3690. sizeHandles();
  3691. }
  3692. // if opposite-pane was autoClosed, see if it can be autoOpened now
  3693. var altPane = _c.oppositeEdge[pane];
  3694. if (size < oldSize && state[ altPane ].noRoom) {
  3695. setSizeLimits( altPane );
  3696. makePaneFit( altPane, false, skipCallback );
  3697. }
  3698. // DEBUG - ALERT user/developer so they know there was a sizing problem
  3699. if (tries.length > 1)
  3700. _log(msg +'\nSee the Error Console for details.', true, true);
  3701. }
  3702. }
  3703. /**
  3704. * @see initPanes(), sizePane(), resizeAll(), open(), close(), hide()
  3705. * @param {(Array.<string>|string)} panes The pane(s) being resized, comma-delmited string
  3706. * @param {boolean=} [skipCallback=false] Should the onresize callback be run?
  3707. * @param {boolean=} [force=false]
  3708. */
  3709. , sizeMidPanes = function (panes, skipCallback, force) {
  3710. panes = (panes ? panes : "east,west,center").split(",");
  3711. $.each(panes, function (i, pane) {
  3712. if (!$Ps[pane]) return; // NO PANE - skip
  3713. var
  3714. o = options[pane]
  3715. , s = state[pane]
  3716. , $P = $Ps[pane]
  3717. , $R = $Rs[pane]
  3718. , isCenter= (pane=="center")
  3719. , hasRoom = true
  3720. , CSS = {}
  3721. // if pane is not visible, show it invisibly NOW rather than for *each call* in this script
  3722. , visCSS = $.layout.showInvisibly($P)
  3723. , newCenter = calcNewCenterPaneDims()
  3724. ;
  3725. // update pane-state dimensions
  3726. $.extend(s, elDims($P));
  3727. if (pane === "center") {
  3728. if (!force && s.isVisible && newCenter.width === s.outerWidth && newCenter.height === s.outerHeight) {
  3729. $P.css(visCSS);
  3730. return true; // SKIP - pane already the correct size
  3731. }
  3732. // set state for makePaneFit() logic
  3733. $.extend(s, cssMinDims(pane), {
  3734. maxWidth: newCenter.width
  3735. , maxHeight: newCenter.height
  3736. });
  3737. CSS = newCenter;
  3738. s.newWidth = CSS.width;
  3739. s.newHeight = CSS.height;
  3740. // convert OUTER width/height to CSS width/height
  3741. CSS.width = cssW($P, CSS.width);
  3742. // NEW - allow pane to extend 'below' visible area rather than hide it
  3743. CSS.height = cssH($P, CSS.height);
  3744. hasRoom = CSS.width >= 0 && CSS.height >= 0; // height >= 0 = ALWAYS TRUE NOW
  3745. // during layout init, try to shrink east/west panes to make room for center
  3746. if (!state.initialized && o.minWidth > newCenter.width) {
  3747. var
  3748. reqPx = o.minWidth - s.outerWidth
  3749. , minE = options.east.minSize || 0
  3750. , minW = options.west.minSize || 0
  3751. , sizeE = state.east.size
  3752. , sizeW = state.west.size
  3753. , newE = sizeE
  3754. , newW = sizeW
  3755. ;
  3756. if (reqPx > 0 && state.east.isVisible && sizeE > minE) {
  3757. newE = max( sizeE-minE, sizeE-reqPx );
  3758. reqPx -= sizeE-newE;
  3759. }
  3760. if (reqPx > 0 && state.west.isVisible && sizeW > minW) {
  3761. newW = max( sizeW-minW, sizeW-reqPx );
  3762. reqPx -= sizeW-newW;
  3763. }
  3764. // IF we found enough extra space, then resize the border panes as calculated
  3765. if (reqPx === 0) {
  3766. if (sizeE && sizeE != minE)
  3767. sizePane('east', newE, true, true, force); // true = skipCallback/noAnimation - initPanes will handle when done
  3768. if (sizeW && sizeW != minW)
  3769. sizePane('west', newW, true, true, force); // true = skipCallback/noAnimation
  3770. // now start over!
  3771. sizeMidPanes('center', skipCallback, force);
  3772. $P.css(visCSS);
  3773. return; // abort this loop
  3774. }
  3775. }
  3776. }
  3777. else { // for east and west, set only the height, which is same as center height
  3778. // set state.min/maxWidth/Height for makePaneFit() logic
  3779. if (s.isVisible && !s.noVerticalRoom)
  3780. $.extend(s, elDims($P), cssMinDims(pane))
  3781. if (!force && !s.noVerticalRoom && newCenter.height === s.outerHeight) {
  3782. $P.css(visCSS);
  3783. return true; // SKIP - pane already the correct size
  3784. }
  3785. // east/west have same top, bottom & height as center
  3786. CSS.top = newCenter.top;
  3787. CSS.bottom = newCenter.bottom;
  3788. s.newSize = newCenter.height
  3789. // NEW - allow pane to extend 'below' visible area rather than hide it
  3790. CSS.height = cssH($P, newCenter.height);
  3791. s.maxHeight = CSS.height;
  3792. hasRoom = (s.maxHeight >= 0); // ALWAYS TRUE NOW
  3793. if (!hasRoom) s.noVerticalRoom = true; // makePaneFit() logic
  3794. }
  3795. if (hasRoom) {
  3796. // resizeAll passes skipCallback because it triggers callbacks after ALL panes are resized
  3797. if (!skipCallback && state.initialized)
  3798. _runCallbacks("onresize_start", pane);
  3799. $P.css(CSS); // apply the CSS to pane
  3800. if (pane !== "center")
  3801. sizeHandles(pane); // also update resizer length
  3802. if (s.noRoom && !s.isClosed && !s.isHidden)
  3803. makePaneFit(pane); // will re-open/show auto-closed/hidden pane
  3804. if (s.isVisible) {
  3805. $.extend(s, elDims($P)); // update pane dimensions
  3806. if (state.initialized) sizeContent(pane); // also resize the contents, if exists
  3807. }
  3808. }
  3809. else if (!s.noRoom && s.isVisible) // no room for pane
  3810. makePaneFit(pane); // will hide or close pane
  3811. // reset visibility, if necessary
  3812. $P.css(visCSS);
  3813. delete s.newSize;
  3814. delete s.newWidth;
  3815. delete s.newHeight;
  3816. if (!s.isVisible)
  3817. return true; // DONE - next pane
  3818. /*
  3819. * Extra CSS for IE6 or IE7 in Quirks-mode - add 'width' to NORTH/SOUTH panes
  3820. * Normally these panes have only 'left' & 'right' positions so pane auto-sizes
  3821. * ALSO required when pane is an IFRAME because will NOT default to 'full width'
  3822. * TODO: Can I use width:100% for a north/south iframe?
  3823. * TODO: Sounds like a job for $P.outerWidth( sC.innerWidth ) SETTER METHOD
  3824. */
  3825. if (pane === "center") { // finished processing midPanes
  3826. var fix = browser.isIE6 || !browser.boxModel;
  3827. if ($Ps.north && (fix || state.north.tagName=="IFRAME"))
  3828. $Ps.north.css("width", cssW($Ps.north, sC.innerWidth));
  3829. if ($Ps.south && (fix || state.south.tagName=="IFRAME"))
  3830. $Ps.south.css("width", cssW($Ps.south, sC.innerWidth));
  3831. }
  3832. // resizeAll passes skipCallback because it triggers callbacks after ALL panes are resized
  3833. if (!skipCallback && state.initialized)
  3834. _runCallbacks("onresize_end", pane);
  3835. });
  3836. }
  3837. /**
  3838. * @see window.onresize(), callbacks or custom code
  3839. * @param {(Object|boolean)=} evt_or_refresh If 'true', then also reset pane-positioning
  3840. */
  3841. , resizeAll = function (evt_or_refresh) {
  3842. var oldW = sC.innerWidth
  3843. , oldH = sC.innerHeight
  3844. ;
  3845. // stopPropagation if called by trigger("layoutdestroy") - use evtPane utility
  3846. evtPane(evt_or_refresh);
  3847. // cannot size layout when 'container' is hidden or collapsed
  3848. if (!$N.is(":visible")) return;
  3849. if (!state.initialized) {
  3850. _initLayoutElements();
  3851. return; // no need to resize since we just initialized!
  3852. }
  3853. if (evt_or_refresh === true && $.isPlainObject(options.outset)) {
  3854. // update container CSS in case outset option has changed
  3855. $N.css( options.outset );
  3856. }
  3857. // UPDATE container dimensions
  3858. $.extend(sC, elDims( $N, options.inset ));
  3859. if (!sC.outerHeight) return;
  3860. // if 'true' passed, refresh pane & handle positioning too
  3861. if (evt_or_refresh === true) {
  3862. setPanePosition();
  3863. }
  3864. // onresizeall_start will CANCEL resizing if returns false
  3865. // state.container has already been set, so user can access this info for calcuations
  3866. if (false === _runCallbacks("onresizeall_start")) return false;
  3867. var // see if container is now 'smaller' than before
  3868. shrunkH = (sC.innerHeight < oldH)
  3869. , shrunkW = (sC.innerWidth < oldW)
  3870. , $P, o, s
  3871. ;
  3872. // NOTE special order for sizing: S-N-E-W
  3873. $.each(["south","north","east","west"], function (i, pane) {
  3874. if (!$Ps[pane]) return; // no pane - SKIP
  3875. o = options[pane];
  3876. s = state[pane];
  3877. if (s.autoResize && s.size != o.size) // resize pane to original size set in options
  3878. sizePane(pane, o.size, true, true, true); // true=skipCallback/noAnimation/forceResize
  3879. else {
  3880. setSizeLimits(pane);
  3881. makePaneFit(pane, false, true, true); // true=skipCallback/forceResize
  3882. }
  3883. });
  3884. sizeMidPanes("", true, true); // true=skipCallback/forceResize
  3885. sizeHandles(); // reposition the toggler elements
  3886. // trigger all individual pane callbacks AFTER layout has finished resizing
  3887. $.each(_c.allPanes, function (i, pane) {
  3888. $P = $Ps[pane];
  3889. if (!$P) return; // SKIP
  3890. if (state[pane].isVisible) // undefined for non-existent panes
  3891. _runCallbacks("onresize_end", pane); // callback - if exists
  3892. });
  3893. _runCallbacks("onresizeall_end");
  3894. //_triggerLayoutEvent(pane, 'resizeall');
  3895. }
  3896. /**
  3897. * Whenever a pane resizes or opens that has a nested layout, trigger resizeAll
  3898. *
  3899. * @param {(string|Object)} evt_or_pane The pane just resized or opened
  3900. */
  3901. , resizeChildren = function (evt_or_pane, skipRefresh) {
  3902. var pane = evtPane.call(this, evt_or_pane);
  3903. if (!options[pane].resizeChildren) return;
  3904. // ensure the pane-children are up-to-date
  3905. if (!skipRefresh) refreshChildren( pane );
  3906. var pC = children[pane];
  3907. if ($.isPlainObject( pC )) {
  3908. // resize one or more children
  3909. $.each( pC, function (key, child) {
  3910. child.resizeAll();
  3911. });
  3912. }
  3913. }
  3914. /**
  3915. * IF pane has a content-div, then resize all elements inside pane to fit pane-height
  3916. *
  3917. * @param {(string|Object)} evt_or_panes The pane(s) being resized
  3918. * @param {boolean=} [remeasure=false] Should the content (header/footer) be remeasured?
  3919. */
  3920. , sizeContent = function (evt_or_panes, remeasure) {
  3921. if (!isInitialized()) return;
  3922. var panes = evtPane.call(this, evt_or_panes);
  3923. panes = panes ? panes.split(",") : _c.allPanes;
  3924. $.each(panes, function (idx, pane) {
  3925. var
  3926. $P = $Ps[pane]
  3927. , $C = $Cs[pane]
  3928. , o = options[pane]
  3929. , s = state[pane]
  3930. , m = s.content // m = measurements
  3931. ;
  3932. if (!$P || !$C || !$P.is(":visible")) return true; // NOT VISIBLE - skip
  3933. // if content-element was REMOVED, update OR remove the pointer
  3934. if (!$C.length) {
  3935. initContent(pane, false); // false = do NOT sizeContent() - already there!
  3936. if (!$C) return; // no replacement element found - pointer have been removed
  3937. }
  3938. // onsizecontent_start will CANCEL resizing if returns false
  3939. if (false === _runCallbacks("onsizecontent_start", pane)) return;
  3940. // skip re-measuring offsets if live-resizing
  3941. if ((!s.isMoving && !s.isResizing) || o.liveContentResizing || remeasure || m.top == undefined) {
  3942. _measure();
  3943. // if any footers are below pane-bottom, they may not measure correctly,
  3944. // so allow pane overflow and re-measure
  3945. if (m.hiddenFooters > 0 && $P.css("overflow") === "hidden") {
  3946. $P.css("overflow", "visible");
  3947. _measure(); // remeasure while overflowing
  3948. $P.css("overflow", "hidden");
  3949. }
  3950. }
  3951. // NOTE: spaceAbove/Below *includes* the pane paddingTop/Bottom, but not pane.borders
  3952. var newH = s.innerHeight - (m.spaceAbove - s.css.paddingTop) - (m.spaceBelow - s.css.paddingBottom);
  3953. if (!$C.is(":visible") || m.height != newH) {
  3954. // size the Content element to fit new pane-size - will autoHide if not enough room
  3955. setOuterHeight($C, newH, true); // true=autoHide
  3956. m.height = newH; // save new height
  3957. };
  3958. if (state.initialized)
  3959. _runCallbacks("onsizecontent_end", pane);
  3960. function _below ($E) {
  3961. return max(s.css.paddingBottom, (parseInt($E.css("marginBottom"), 10) || 0));
  3962. };
  3963. function _measure () {
  3964. var
  3965. ignore = options[pane].contentIgnoreSelector
  3966. , $Fs = $C.nextAll().not(".ui-layout-mask").not(ignore || ":lt(0)") // not :lt(0) = ALL
  3967. , $Fs_vis = $Fs.filter(':visible')
  3968. , $F = $Fs_vis.filter(':last')
  3969. ;
  3970. m = {
  3971. top: $C[0].offsetTop
  3972. , height: $C.outerHeight()
  3973. , numFooters: $Fs.length
  3974. , hiddenFooters: $Fs.length - $Fs_vis.length
  3975. , spaceBelow: 0 // correct if no content footer ($E)
  3976. }
  3977. m.spaceAbove = m.top; // just for state - not used in calc
  3978. m.bottom = m.top + m.height;
  3979. if ($F.length)
  3980. //spaceBelow = (LastFooter.top + LastFooter.height) [footerBottom] - Content.bottom + max(LastFooter.marginBottom, pane.paddingBotom)
  3981. m.spaceBelow = ($F[0].offsetTop + $F.outerHeight()) - m.bottom + _below($F);
  3982. else // no footer - check marginBottom on Content element itself
  3983. m.spaceBelow = _below($C);
  3984. };
  3985. });
  3986. }
  3987. /**
  3988. * Called every time a pane is opened, closed, or resized to slide the togglers to 'center' and adjust their length if necessary
  3989. *
  3990. * @see initHandles(), open(), close(), resizeAll()
  3991. * @param {(string|Object)=} evt_or_panes The pane(s) being resized
  3992. */
  3993. , sizeHandles = function (evt_or_panes) {
  3994. var panes = evtPane.call(this, evt_or_panes)
  3995. panes = panes ? panes.split(",") : _c.borderPanes;
  3996. $.each(panes, function (i, pane) {
  3997. var
  3998. o = options[pane]
  3999. , s = state[pane]
  4000. , $P = $Ps[pane]
  4001. , $R = $Rs[pane]
  4002. , $T = $Ts[pane]
  4003. , $TC
  4004. ;
  4005. if (!$P || !$R) return;
  4006. var
  4007. dir = _c[pane].dir
  4008. , _state = (s.isClosed ? "_closed" : "_open")
  4009. , spacing = o["spacing"+ _state]
  4010. , togAlign = o["togglerAlign"+ _state]
  4011. , togLen = o["togglerLength"+ _state]
  4012. , paneLen
  4013. , left
  4014. , offset
  4015. , CSS = {}
  4016. ;
  4017. if (spacing === 0) {
  4018. $R.hide();
  4019. return;
  4020. }
  4021. else if (!s.noRoom && !s.isHidden) // skip if resizer was hidden for any reason
  4022. $R.show(); // in case was previously hidden
  4023. // Resizer Bar is ALWAYS same width/height of pane it is attached to
  4024. if (dir === "horz") { // north/south
  4025. //paneLen = $P.outerWidth(); // s.outerWidth ||
  4026. paneLen = sC.innerWidth; // handle offscreen-panes
  4027. s.resizerLength = paneLen;
  4028. left = $.layout.cssNum($P, "left")
  4029. $R.css({
  4030. width: cssW($R, paneLen) // account for borders & padding
  4031. , height: cssH($R, spacing) // ditto
  4032. , left: left > -9999 ? left : sC.inset.left // handle offscreen-panes
  4033. });
  4034. }
  4035. else { // east/west
  4036. paneLen = $P.outerHeight(); // s.outerHeight ||
  4037. s.resizerLength = paneLen;
  4038. $R.css({
  4039. height: cssH($R, paneLen) // account for borders & padding
  4040. , width: cssW($R, spacing) // ditto
  4041. , top: sC.inset.top + getPaneSize("north", true) // TODO: what if no North pane?
  4042. //, top: $.layout.cssNum($Ps["center"], "top")
  4043. });
  4044. }
  4045. // remove hover classes
  4046. removeHover( o, $R );
  4047. if ($T) {
  4048. if (togLen === 0 || (s.isSliding && o.hideTogglerOnSlide)) {
  4049. $T.hide(); // always HIDE the toggler when 'sliding'
  4050. return;
  4051. }
  4052. else
  4053. $T.show(); // in case was previously hidden
  4054. if (!(togLen > 0) || togLen === "100%" || togLen > paneLen) {
  4055. togLen = paneLen;
  4056. offset = 0;
  4057. }
  4058. else { // calculate 'offset' based on options.PANE.togglerAlign_open/closed
  4059. if (isStr(togAlign)) {
  4060. switch (togAlign) {
  4061. case "top":
  4062. case "left": offset = 0;
  4063. break;
  4064. case "bottom":
  4065. case "right": offset = paneLen - togLen;
  4066. break;
  4067. case "middle":
  4068. case "center":
  4069. default: offset = round((paneLen - togLen) / 2); // 'default' catches typos
  4070. }
  4071. }
  4072. else { // togAlign = number
  4073. var x = parseInt(togAlign, 10); //
  4074. if (togAlign >= 0) offset = x;
  4075. else offset = paneLen - togLen + x; // NOTE: x is negative!
  4076. }
  4077. }
  4078. if (dir === "horz") { // north/south
  4079. var width = cssW($T, togLen);
  4080. $T.css({
  4081. width: width // account for borders & padding
  4082. , height: cssH($T, spacing) // ditto
  4083. , left: offset // TODO: VERIFY that toggler positions correctly for ALL values
  4084. , top: 0
  4085. });
  4086. // CENTER the toggler content SPAN
  4087. $T.children(".content").each(function(){
  4088. $TC = $(this);
  4089. $TC.css("marginLeft", round((width-$TC.outerWidth())/2)); // could be negative
  4090. });
  4091. }
  4092. else { // east/west
  4093. var height = cssH($T, togLen);
  4094. $T.css({
  4095. height: height // account for borders & padding
  4096. , width: cssW($T, spacing) // ditto
  4097. , top: offset // POSITION the toggler
  4098. , left: 0
  4099. });
  4100. // CENTER the toggler content SPAN
  4101. $T.children(".content").each(function(){
  4102. $TC = $(this);
  4103. $TC.css("marginTop", round((height-$TC.outerHeight())/2)); // could be negative
  4104. });
  4105. }
  4106. // remove ALL hover classes
  4107. removeHover( 0, $T );
  4108. }
  4109. // DONE measuring and sizing this resizer/toggler, so can be 'hidden' now
  4110. if (!state.initialized && (o.initHidden || s.noRoom)) {
  4111. $R.hide();
  4112. if ($T) $T.hide();
  4113. }
  4114. });
  4115. }
  4116. /**
  4117. * @param {(string|Object)} evt_or_pane
  4118. */
  4119. , enableClosable = function (evt_or_pane) {
  4120. if (!isInitialized()) return;
  4121. var pane = evtPane.call(this, evt_or_pane)
  4122. , $T = $Ts[pane]
  4123. , o = options[pane]
  4124. ;
  4125. if (!$T) return;
  4126. o.closable = true;
  4127. $T .bind("click."+ sID, function(evt){ evt.stopPropagation(); toggle(pane); })
  4128. .css("visibility", "visible")
  4129. .css("cursor", "pointer")
  4130. .attr("title", state[pane].isClosed ? o.tips.Open : o.tips.Close) // may be blank
  4131. .show();
  4132. }
  4133. /**
  4134. * @param {(string|Object)} evt_or_pane
  4135. * @param {boolean=} [hide=false]
  4136. */
  4137. , disableClosable = function (evt_or_pane, hide) {
  4138. if (!isInitialized()) return;
  4139. var pane = evtPane.call(this, evt_or_pane)
  4140. , $T = $Ts[pane]
  4141. ;
  4142. if (!$T) return;
  4143. options[pane].closable = false;
  4144. // is closable is disable, then pane MUST be open!
  4145. if (state[pane].isClosed) open(pane, false, true);
  4146. $T .unbind("."+ sID)
  4147. .css("visibility", hide ? "hidden" : "visible") // instead of hide(), which creates logic issues
  4148. .css("cursor", "default")
  4149. .attr("title", "");
  4150. }
  4151. /**
  4152. * @param {(string|Object)} evt_or_pane
  4153. */
  4154. , enableSlidable = function (evt_or_pane) {
  4155. if (!isInitialized()) return;
  4156. var pane = evtPane.call(this, evt_or_pane)
  4157. , $R = $Rs[pane]
  4158. ;
  4159. if (!$R || !$R.data('draggable')) return;
  4160. options[pane].slidable = true;
  4161. if (state[pane].isClosed)
  4162. bindStartSlidingEvents(pane, true);
  4163. }
  4164. /**
  4165. * @param {(string|Object)} evt_or_pane
  4166. */
  4167. , disableSlidable = function (evt_or_pane) {
  4168. if (!isInitialized()) return;
  4169. var pane = evtPane.call(this, evt_or_pane)
  4170. , $R = $Rs[pane]
  4171. ;
  4172. if (!$R) return;
  4173. options[pane].slidable = false;
  4174. if (state[pane].isSliding)
  4175. close(pane, false, true);
  4176. else {
  4177. bindStartSlidingEvents(pane, false);
  4178. $R .css("cursor", "default")
  4179. .attr("title", "");
  4180. removeHover(null, $R[0]); // in case currently hovered
  4181. }
  4182. }
  4183. /**
  4184. * @param {(string|Object)} evt_or_pane
  4185. */
  4186. , enableResizable = function (evt_or_pane) {
  4187. if (!isInitialized()) return;
  4188. var pane = evtPane.call(this, evt_or_pane)
  4189. , $R = $Rs[pane]
  4190. , o = options[pane]
  4191. ;
  4192. if (!$R || !$R.data('draggable')) return;
  4193. o.resizable = true;
  4194. $R.draggable("enable");
  4195. if (!state[pane].isClosed)
  4196. $R .css("cursor", o.resizerCursor)
  4197. .attr("title", o.tips.Resize);
  4198. }
  4199. /**
  4200. * @param {(string|Object)} evt_or_pane
  4201. */
  4202. , disableResizable = function (evt_or_pane) {
  4203. if (!isInitialized()) return;
  4204. var pane = evtPane.call(this, evt_or_pane)
  4205. , $R = $Rs[pane]
  4206. ;
  4207. if (!$R || !$R.data('draggable')) return;
  4208. options[pane].resizable = false;
  4209. $R .draggable("disable")
  4210. .css("cursor", "default")
  4211. .attr("title", "");
  4212. removeHover(null, $R[0]); // in case currently hovered
  4213. }
  4214. /**
  4215. * Move a pane from source-side (eg, west) to target-side (eg, east)
  4216. * If pane exists on target-side, move that to source-side, ie, 'swap' the panes
  4217. *
  4218. * @param {(string|Object)} evt_or_pane1 The pane/edge being swapped
  4219. * @param {string} pane2 ditto
  4220. */
  4221. , swapPanes = function (evt_or_pane1, pane2) {
  4222. if (!isInitialized()) return;
  4223. var pane1 = evtPane.call(this, evt_or_pane1);
  4224. // change state.edge NOW so callbacks can know where pane is headed...
  4225. state[pane1].edge = pane2;
  4226. state[pane2].edge = pane1;
  4227. // run these even if NOT state.initialized
  4228. if (false === _runCallbacks("onswap_start", pane1)
  4229. || false === _runCallbacks("onswap_start", pane2)
  4230. ) {
  4231. state[pane1].edge = pane1; // reset
  4232. state[pane2].edge = pane2;
  4233. return;
  4234. }
  4235. var
  4236. oPane1 = copy( pane1 )
  4237. , oPane2 = copy( pane2 )
  4238. , sizes = {}
  4239. ;
  4240. sizes[pane1] = oPane1 ? oPane1.state.size : 0;
  4241. sizes[pane2] = oPane2 ? oPane2.state.size : 0;
  4242. // clear pointers & state
  4243. $Ps[pane1] = false;
  4244. $Ps[pane2] = false;
  4245. state[pane1] = {};
  4246. state[pane2] = {};
  4247. // ALWAYS remove the resizer & toggler elements
  4248. if ($Ts[pane1]) $Ts[pane1].remove();
  4249. if ($Ts[pane2]) $Ts[pane2].remove();
  4250. if ($Rs[pane1]) $Rs[pane1].remove();
  4251. if ($Rs[pane2]) $Rs[pane2].remove();
  4252. $Rs[pane1] = $Rs[pane2] = $Ts[pane1] = $Ts[pane2] = false;
  4253. // transfer element pointers and data to NEW Layout keys
  4254. move( oPane1, pane2 );
  4255. move( oPane2, pane1 );
  4256. // cleanup objects
  4257. oPane1 = oPane2 = sizes = null;
  4258. // make panes 'visible' again
  4259. if ($Ps[pane1]) $Ps[pane1].css(_c.visible);
  4260. if ($Ps[pane2]) $Ps[pane2].css(_c.visible);
  4261. // fix any size discrepancies caused by swap
  4262. resizeAll();
  4263. // run these even if NOT state.initialized
  4264. _runCallbacks("onswap_end", pane1);
  4265. _runCallbacks("onswap_end", pane2);
  4266. return;
  4267. function copy (n) { // n = pane
  4268. var
  4269. $P = $Ps[n]
  4270. , $C = $Cs[n]
  4271. ;
  4272. return !$P ? false : {
  4273. pane: n
  4274. , P: $P ? $P[0] : false
  4275. , C: $C ? $C[0] : false
  4276. , state: $.extend(true, {}, state[n])
  4277. , options: $.extend(true, {}, options[n])
  4278. }
  4279. };
  4280. function move (oPane, pane) {
  4281. if (!oPane) return;
  4282. var
  4283. P = oPane.P
  4284. , C = oPane.C
  4285. , oldPane = oPane.pane
  4286. , c = _c[pane]
  4287. // save pane-options that should be retained
  4288. , s = $.extend(true, {}, state[pane])
  4289. , o = options[pane]
  4290. // RETAIN side-specific FX Settings - more below
  4291. , fx = { resizerCursor: o.resizerCursor }
  4292. , re, size, pos
  4293. ;
  4294. $.each("fxName,fxSpeed,fxSettings".split(","), function (i, k) {
  4295. fx[k +"_open"] = o[k +"_open"];
  4296. fx[k +"_close"] = o[k +"_close"];
  4297. fx[k +"_size"] = o[k +"_size"];
  4298. });
  4299. // update object pointers and attributes
  4300. $Ps[pane] = $(P)
  4301. .data({
  4302. layoutPane: Instance[pane] // NEW pointer to pane-alias-object
  4303. , layoutEdge: pane
  4304. })
  4305. .css(_c.hidden)
  4306. .css(c.cssReq)
  4307. ;
  4308. $Cs[pane] = C ? $(C) : false;
  4309. // set options and state
  4310. options[pane] = $.extend(true, {}, oPane.options, fx);
  4311. state[pane] = $.extend(true, {}, oPane.state);
  4312. // change classNames on the pane, eg: ui-layout-pane-east ==> ui-layout-pane-west
  4313. re = new RegExp(o.paneClass +"-"+ oldPane, "g");
  4314. P.className = P.className.replace(re, o.paneClass +"-"+ pane);
  4315. // ALWAYS regenerate the resizer & toggler elements
  4316. initHandles(pane); // create the required resizer & toggler
  4317. // if moving to different orientation, then keep 'target' pane size
  4318. if (c.dir != _c[oldPane].dir) {
  4319. size = sizes[pane] || 0;
  4320. setSizeLimits(pane); // update pane-state
  4321. size = max(size, state[pane].minSize);
  4322. // use manualSizePane to disable autoResize - not useful after panes are swapped
  4323. manualSizePane(pane, size, true, true); // true/true = skipCallback/noAnimation
  4324. }
  4325. else // move the resizer here
  4326. $Rs[pane].css(c.side, sC.inset[c.side] + (state[pane].isVisible ? getPaneSize(pane) : 0));
  4327. // ADD CLASSNAMES & SLIDE-BINDINGS
  4328. if (oPane.state.isVisible && !s.isVisible)
  4329. setAsOpen(pane, true); // true = skipCallback
  4330. else {
  4331. setAsClosed(pane);
  4332. bindStartSlidingEvents(pane, true); // will enable events IF option is set
  4333. }
  4334. // DESTROY the object
  4335. oPane = null;
  4336. };
  4337. }
  4338. /**
  4339. * INTERNAL method to sync pin-buttons when pane is opened or closed
  4340. * Unpinned means the pane is 'sliding' - ie, over-top of the adjacent panes
  4341. *
  4342. * @see open(), setAsOpen(), setAsClosed()
  4343. * @param {string} pane These are the params returned to callbacks by layout()
  4344. * @param {boolean} doPin True means set the pin 'down', False means 'up'
  4345. */
  4346. , syncPinBtns = function (pane, doPin) {
  4347. if ($.layout.plugins.buttons)
  4348. $.each(state[pane].pins, function (i, selector) {
  4349. $.layout.buttons.setPinState(Instance, $(selector), pane, doPin);
  4350. });
  4351. }
  4352. ; // END var DECLARATIONS
  4353. /**
  4354. * Capture keys when enableCursorHotkey - toggle pane if hotkey pressed
  4355. *
  4356. * @see document.keydown()
  4357. */
  4358. function keyDown (evt) {
  4359. if (!evt) return true;
  4360. var code = evt.keyCode;
  4361. if (code < 33) return true; // ignore special keys: ENTER, TAB, etc
  4362. var
  4363. PANE = {
  4364. 38: "north" // Up Cursor - $.ui.keyCode.UP
  4365. , 40: "south" // Down Cursor - $.ui.keyCode.DOWN
  4366. , 37: "west" // Left Cursor - $.ui.keyCode.LEFT
  4367. , 39: "east" // Right Cursor - $.ui.keyCode.RIGHT
  4368. }
  4369. , ALT = evt.altKey // no worky!
  4370. , SHIFT = evt.shiftKey
  4371. , CTRL = evt.ctrlKey
  4372. , CURSOR = (CTRL && code >= 37 && code <= 40)
  4373. , o, k, m, pane
  4374. ;
  4375. if (CURSOR && options[PANE[code]].enableCursorHotkey) // valid cursor-hotkey
  4376. pane = PANE[code];
  4377. else if (CTRL || SHIFT) // check to see if this matches a custom-hotkey
  4378. $.each(_c.borderPanes, function (i, p) { // loop each pane to check its hotkey
  4379. o = options[p];
  4380. k = o.customHotkey;
  4381. m = o.customHotkeyModifier; // if missing or invalid, treated as "CTRL+SHIFT"
  4382. if ((SHIFT && m=="SHIFT") || (CTRL && m=="CTRL") || (CTRL && SHIFT)) { // Modifier matches
  4383. if (k && code === (isNaN(k) || k <= 9 ? k.toUpperCase().charCodeAt(0) : k)) { // Key matches
  4384. pane = p;
  4385. return false; // BREAK
  4386. }
  4387. }
  4388. });
  4389. // validate pane
  4390. if (!pane || !$Ps[pane] || !options[pane].closable || state[pane].isHidden)
  4391. return true;
  4392. toggle(pane);
  4393. evt.stopPropagation();
  4394. evt.returnValue = false; // CANCEL key
  4395. return false;
  4396. };
  4397. /*
  4398. * ######################################
  4399. * UTILITY METHODS
  4400. * called externally or by initButtons
  4401. * ######################################
  4402. */
  4403. /**
  4404. * Change/reset a pane overflow setting & zIndex to allow popups/drop-downs to work
  4405. *
  4406. * @param {Object=} [el] (optional) Can also be 'bound' to a click, mouseOver, or other event
  4407. */
  4408. function allowOverflow (el) {
  4409. if (!isInitialized()) return;
  4410. if (this && this.tagName) el = this; // BOUND to element
  4411. var $P;
  4412. if (isStr(el))
  4413. $P = $Ps[el];
  4414. else if ($(el).data("layoutRole"))
  4415. $P = $(el);
  4416. else
  4417. $(el).parents().each(function(){
  4418. if ($(this).data("layoutRole")) {
  4419. $P = $(this);
  4420. return false; // BREAK
  4421. }
  4422. });
  4423. if (!$P || !$P.length) return; // INVALID
  4424. var
  4425. pane = $P.data("layoutEdge")
  4426. , s = state[pane]
  4427. ;
  4428. // if pane is already raised, then reset it before doing it again!
  4429. // this would happen if allowOverflow is attached to BOTH the pane and an element
  4430. if (s.cssSaved)
  4431. resetOverflow(pane); // reset previous CSS before continuing
  4432. // if pane is raised by sliding or resizing, or its closed, then abort
  4433. if (s.isSliding || s.isResizing || s.isClosed) {
  4434. s.cssSaved = false;
  4435. return;
  4436. }
  4437. var
  4438. newCSS = { zIndex: (options.zIndexes.resizer_normal + 1) }
  4439. , curCSS = {}
  4440. , of = $P.css("overflow")
  4441. , ofX = $P.css("overflowX")
  4442. , ofY = $P.css("overflowY")
  4443. ;
  4444. // determine which, if any, overflow settings need to be changed
  4445. if (of != "visible") {
  4446. curCSS.overflow = of;
  4447. newCSS.overflow = "visible";
  4448. }
  4449. if (ofX && !ofX.match(/(visible|auto)/)) {
  4450. curCSS.overflowX = ofX;
  4451. newCSS.overflowX = "visible";
  4452. }
  4453. if (ofY && !ofY.match(/(visible|auto)/)) {
  4454. curCSS.overflowY = ofX;
  4455. newCSS.overflowY = "visible";
  4456. }
  4457. // save the current overflow settings - even if blank!
  4458. s.cssSaved = curCSS;
  4459. // apply new CSS to raise zIndex and, if necessary, make overflow 'visible'
  4460. $P.css( newCSS );
  4461. // make sure the zIndex of all other panes is normal
  4462. $.each(_c.allPanes, function(i, p) {
  4463. if (p != pane) resetOverflow(p);
  4464. });
  4465. };
  4466. /**
  4467. * @param {Object=} [el] (optional) Can also be 'bound' to a click, mouseOver, or other event
  4468. */
  4469. function resetOverflow (el) {
  4470. if (!isInitialized()) return;
  4471. if (this && this.tagName) el = this; // BOUND to element
  4472. var $P;
  4473. if (isStr(el))
  4474. $P = $Ps[el];
  4475. else if ($(el).data("layoutRole"))
  4476. $P = $(el);
  4477. else
  4478. $(el).parents().each(function(){
  4479. if ($(this).data("layoutRole")) {
  4480. $P = $(this);
  4481. return false; // BREAK
  4482. }
  4483. });
  4484. if (!$P || !$P.length) return; // INVALID
  4485. var
  4486. pane = $P.data("layoutEdge")
  4487. , s = state[pane]
  4488. , CSS = s.cssSaved || {}
  4489. ;
  4490. // reset the zIndex
  4491. if (!s.isSliding && !s.isResizing)
  4492. $P.css("zIndex", options.zIndexes.pane_normal);
  4493. // reset Overflow - if necessary
  4494. $P.css( CSS );
  4495. // clear var
  4496. s.cssSaved = false;
  4497. };
  4498. /*
  4499. * #####################
  4500. * CREATE/RETURN LAYOUT
  4501. * #####################
  4502. */
  4503. // validate that container exists
  4504. var $N = $(this).eq(0); // FIRST matching Container element
  4505. if (!$N.length) {
  4506. return _log( options.errors.containerMissing );
  4507. };
  4508. // Users retrieve Instance of a layout with: $N.layout() OR $N.data("layout")
  4509. // return the Instance-pointer if layout has already been initialized
  4510. if ($N.data("layoutContainer") && $N.data("layout"))
  4511. return $N.data("layout"); // cached pointer
  4512. // init global vars
  4513. var
  4514. $Ps = {} // Panes x5 - set in initPanes()
  4515. , $Cs = {} // Content x5 - set in initPanes()
  4516. , $Rs = {} // Resizers x4 - set in initHandles()
  4517. , $Ts = {} // Togglers x4 - set in initHandles()
  4518. , $Ms = $([]) // Masks - up to 2 masks per pane (IFRAME + DIV)
  4519. // aliases for code brevity
  4520. , sC = state.container // alias for easy access to 'container dimensions'
  4521. , sID = state.id // alias for unique layout ID/namespace - eg: "layout435"
  4522. ;
  4523. // create Instance object to expose data & option Properties, and primary action Methods
  4524. var Instance = {
  4525. // layout data
  4526. options: options // property - options hash
  4527. , state: state // property - dimensions hash
  4528. // object pointers
  4529. , container: $N // property - object pointers for layout container
  4530. , panes: $Ps // property - object pointers for ALL Panes: panes.north, panes.center
  4531. , contents: $Cs // property - object pointers for ALL Content: contents.north, contents.center
  4532. , resizers: $Rs // property - object pointers for ALL Resizers, eg: resizers.north
  4533. , togglers: $Ts // property - object pointers for ALL Togglers, eg: togglers.north
  4534. // border-pane open/close
  4535. , hide: hide // method - ditto
  4536. , show: show // method - ditto
  4537. , toggle: toggle // method - pass a 'pane' ("north", "west", etc)
  4538. , open: open // method - ditto
  4539. , close: close // method - ditto
  4540. , slideOpen: slideOpen // method - ditto
  4541. , slideClose: slideClose // method - ditto
  4542. , slideToggle: slideToggle // method - ditto
  4543. // pane actions
  4544. , setSizeLimits: setSizeLimits // method - pass a 'pane' - update state min/max data
  4545. , _sizePane: sizePane // method -intended for user by plugins only!
  4546. , sizePane: manualSizePane // method - pass a 'pane' AND an 'outer-size' in pixels or percent, or 'auto'
  4547. , sizeContent: sizeContent // method - pass a 'pane'
  4548. , swapPanes: swapPanes // method - pass TWO 'panes' - will swap them
  4549. , showMasks: showMasks // method - pass a 'pane' OR list of panes - default = all panes with mask option set
  4550. , hideMasks: hideMasks // method - ditto'
  4551. // pane element methods
  4552. , initContent: initContent // method - ditto
  4553. , addPane: addPane // method - pass a 'pane'
  4554. , removePane: removePane // method - pass a 'pane' to remove from layout, add 'true' to delete the pane-elem
  4555. , createChildren: createChildren // method - pass a 'pane' and (optional) layout-options (OVERRIDES options[pane].children
  4556. , refreshChildren: refreshChildren // method - pass a 'pane' and a layout-instance
  4557. // special pane option setting
  4558. , enableClosable: enableClosable // method - pass a 'pane'
  4559. , disableClosable: disableClosable // method - ditto
  4560. , enableSlidable: enableSlidable // method - ditto
  4561. , disableSlidable: disableSlidable // method - ditto
  4562. , enableResizable: enableResizable // method - ditto
  4563. , disableResizable: disableResizable// method - ditto
  4564. // utility methods for panes
  4565. , allowOverflow: allowOverflow // utility - pass calling element (this)
  4566. , resetOverflow: resetOverflow // utility - ditto
  4567. // layout control
  4568. , destroy: destroy // method - no parameters
  4569. , initPanes: isInitialized // method - no parameters
  4570. , resizeAll: resizeAll // method - no parameters
  4571. // callback triggering
  4572. , runCallbacks: _runCallbacks // method - pass evtName & pane (if a pane-event), eg: trigger("onopen", "west")
  4573. // alias collections of options, state and children - created in addPane and extended elsewhere
  4574. , hasParentLayout: false // set by initContainer()
  4575. , children: children // pointers to child-layouts, eg: Instance.children.west.layoutName
  4576. , north: false // alias group: { name: pane, pane: $Ps[pane], options: options[pane], state: state[pane], children: children[pane] }
  4577. , south: false // ditto
  4578. , west: false // ditto
  4579. , east: false // ditto
  4580. , center: false // ditto
  4581. };
  4582. // create the border layout NOW
  4583. if (_create() === 'cancel') // onload_start callback returned false to CANCEL layout creation
  4584. return null;
  4585. else // true OR false -- if layout-elements did NOT init (hidden or do not exist), can auto-init later
  4586. return Instance; // return the Instance object
  4587. }
  4588. /* OLD versions of jQuery only set $.support.boxModel after page is loaded
  4589. * so if this is IE, use support.boxModel to test for quirks-mode (ONLY IE changes boxModel).
  4590. */
  4591. $(function(){
  4592. var b = $.layout.browser;
  4593. if (b.msie) b.boxModel = $.support.boxModel;
  4594. });
  4595. })( jQuery );
  4596. // END Layout - keep internal vars internal!
  4597. // START Plugins - shared wrapper, no global vars
  4598. (function ($) {
  4599. /**
  4600. * jquery.layout.state 1.0
  4601. * $Date: 2011-07-16 08:00:00 (Sat, 16 July 2011) $
  4602. *
  4603. * Copyright (c) 2012
  4604. * Kevin Dalman (http://allpro.net)
  4605. *
  4606. * Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)
  4607. * and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.
  4608. *
  4609. * @requires: UI Layout 1.3.0.rc30.1 or higher
  4610. * @requires: $.ui.cookie (above)
  4611. *
  4612. * @see: http://groups.google.com/group/jquery-ui-layout
  4613. */
  4614. /*
  4615. * State-management options stored in options.stateManagement, which includes a .cookie hash
  4616. * Default options saves ALL KEYS for ALL PANES, ie: pane.size, pane.isClosed, pane.isHidden
  4617. *
  4618. * // STATE/COOKIE OPTIONS
  4619. * @example $(el).layout({
  4620. stateManagement: {
  4621. enabled: true
  4622. , stateKeys: "east.size,west.size,east.isClosed,west.isClosed"
  4623. , cookie: { name: "appLayout", path: "/" }
  4624. }
  4625. })
  4626. * @example $(el).layout({ stateManagement__enabled: true }) // enable auto-state-management using cookies
  4627. * @example $(el).layout({ stateManagement__cookie: { name: "appLayout", path: "/" } })
  4628. * @example $(el).layout({ stateManagement__cookie__name: "appLayout", stateManagement__cookie__path: "/" })
  4629. *
  4630. * // STATE/COOKIE METHODS
  4631. * @example myLayout.saveCookie( "west.isClosed,north.size,south.isHidden", {expires: 7} );
  4632. * @example myLayout.loadCookie();
  4633. * @example myLayout.deleteCookie();
  4634. * @example var JSON = myLayout.readState(); // CURRENT Layout State
  4635. * @example var JSON = myLayout.readCookie(); // SAVED Layout State (from cookie)
  4636. * @example var JSON = myLayout.state.stateData; // LAST LOADED Layout State (cookie saved in layout.state hash)
  4637. *
  4638. * CUSTOM STATE-MANAGEMENT (eg, saved in a database)
  4639. * @example var JSON = myLayout.readState( "west.isClosed,north.size,south.isHidden" );
  4640. * @example myLayout.loadState( JSON );
  4641. */
  4642. /**
  4643. * UI COOKIE UTILITY
  4644. *
  4645. * A $.cookie OR $.ui.cookie namespace *should be standard*, but until then...
  4646. * This creates $.ui.cookie so Layout does not need the cookie.jquery.js plugin
  4647. * NOTE: This utility is REQUIRED by the layout.state plugin
  4648. *
  4649. * Cookie methods in Layout are created as part of State Management
  4650. */
  4651. if (!$.ui) $.ui = {};
  4652. $.ui.cookie = {
  4653. // cookieEnabled is not in DOM specs, but DOES works in all browsers,including IE6
  4654. acceptsCookies: !!navigator.cookieEnabled
  4655. , read: function (name) {
  4656. var
  4657. c = document.cookie
  4658. , cs = c ? c.split(';') : []
  4659. , pair // loop var
  4660. ;
  4661. for (var i=0, n=cs.length; i < n; i++) {
  4662. pair = $.trim(cs[i]).split('='); // name=value pair
  4663. if (pair[0] == name) // found the layout cookie
  4664. return decodeURIComponent(pair[1]);
  4665. }
  4666. return null;
  4667. }
  4668. , write: function (name, val, cookieOpts) {
  4669. var
  4670. params = ''
  4671. , date = ''
  4672. , clear = false
  4673. , o = cookieOpts || {}
  4674. , x = o.expires
  4675. ;
  4676. if (x && x.toUTCString)
  4677. date = x;
  4678. else if (x === null || typeof x === 'number') {
  4679. date = new Date();
  4680. if (x > 0)
  4681. date.setDate(date.getDate() + x);
  4682. else {
  4683. date.setFullYear(1970);
  4684. clear = true;
  4685. }
  4686. }
  4687. if (date) params += ';expires='+ date.toUTCString();
  4688. if (o.path) params += ';path='+ o.path;
  4689. if (o.domain) params += ';domain='+ o.domain;
  4690. if (o.secure) params += ';secure';
  4691. document.cookie = name +'='+ (clear ? "" : encodeURIComponent( val )) + params; // write or clear cookie
  4692. }
  4693. , clear: function (name) {
  4694. $.ui.cookie.write(name, '', {expires: -1});
  4695. }
  4696. };
  4697. // if cookie.jquery.js is not loaded, create an alias to replicate it
  4698. // this may be useful to other plugins or code dependent on that plugin
  4699. if (!$.cookie) $.cookie = function (k, v, o) {
  4700. var C = $.ui.cookie;
  4701. if (v === null)
  4702. C.clear(k);
  4703. else if (v === undefined)
  4704. return C.read(k);
  4705. else
  4706. C.write(k, v, o);
  4707. };
  4708. // tell Layout that the state plugin is available
  4709. $.layout.plugins.stateManagement = true;
  4710. // Add State-Management options to layout.defaults
  4711. $.layout.config.optionRootKeys.push("stateManagement");
  4712. $.layout.defaults.stateManagement = {
  4713. enabled: false // true = enable state-management, even if not using cookies
  4714. , autoSave: true // Save a state-cookie when page exits?
  4715. , autoLoad: true // Load the state-cookie when Layout inits?
  4716. , animateLoad: true // animate panes when loading state into an active layout
  4717. , includeChildren: true // recurse into child layouts to include their state as well
  4718. // List state-data to save - must be pane-specific
  4719. , stateKeys: "north.size,south.size,east.size,west.size,"+
  4720. "north.isClosed,south.isClosed,east.isClosed,west.isClosed,"+
  4721. "north.isHidden,south.isHidden,east.isHidden,west.isHidden"
  4722. , cookie: {
  4723. name: "" // If not specified, will use Layout.name, else just "Layout"
  4724. , domain: "" // blank = current domain
  4725. , path: "" // blank = current page, '/' = entire website
  4726. , expires: "" // 'days' to keep cookie - leave blank for 'session cookie'
  4727. , secure: false
  4728. }
  4729. };
  4730. // Set stateManagement as a layout-option, NOT a pane-option
  4731. $.layout.optionsMap.layout.push("stateManagement");
  4732. /*
  4733. * State Management methods
  4734. */
  4735. $.layout.state = {
  4736. /**
  4737. * Get the current layout state and save it to a cookie
  4738. *
  4739. * myLayout.saveCookie( keys, cookieOpts )
  4740. *
  4741. * @param {Object} inst
  4742. * @param {(string|Array)=} keys
  4743. * @param {Object=} cookieOpts
  4744. */
  4745. saveCookie: function (inst, keys, cookieOpts) {
  4746. var o = inst.options
  4747. , sm = o.stateManagement
  4748. , oC = $.extend(true, {}, sm.cookie, cookieOpts || null)
  4749. , data = inst.state.stateData = inst.readState( keys || sm.stateKeys ) // read current panes-state
  4750. ;
  4751. $.ui.cookie.write( oC.name || o.name || "Layout", $.layout.state.encodeJSON(data), oC );
  4752. return $.extend(true, {}, data); // return COPY of state.stateData data
  4753. }
  4754. /**
  4755. * Remove the state cookie
  4756. *
  4757. * @param {Object} inst
  4758. */
  4759. , deleteCookie: function (inst) {
  4760. var o = inst.options;
  4761. $.ui.cookie.clear( o.stateManagement.cookie.name || o.name || "Layout" );
  4762. }
  4763. /**
  4764. * Read & return data from the cookie - as JSON
  4765. *
  4766. * @param {Object} inst
  4767. */
  4768. , readCookie: function (inst) {
  4769. var o = inst.options;
  4770. var c = $.ui.cookie.read( o.stateManagement.cookie.name || o.name || "Layout" );
  4771. // convert cookie string back to a hash and return it
  4772. return c ? $.layout.state.decodeJSON(c) : {};
  4773. }
  4774. /**
  4775. * Get data from the cookie and USE IT to loadState
  4776. *
  4777. * @param {Object} inst
  4778. */
  4779. , loadCookie: function (inst) {
  4780. var c = $.layout.state.readCookie(inst); // READ the cookie
  4781. if (c) {
  4782. inst.state.stateData = $.extend(true, {}, c); // SET state.stateData
  4783. inst.loadState(c); // LOAD the retrieved state
  4784. }
  4785. return c;
  4786. }
  4787. /**
  4788. * Update layout options from the cookie, if one exists
  4789. *
  4790. * @param {Object} inst
  4791. * @param {Object=} stateData
  4792. * @param {boolean=} animate
  4793. */
  4794. , loadState: function (inst, data, opts) {
  4795. if (!$.isPlainObject( data ) || $.isEmptyObject( data )) return;
  4796. // normalize data & cache in the state object
  4797. data = inst.state.stateData = $.layout.transformData( data ); // panes = default subkey
  4798. // add missing/default state-restore options
  4799. var smo = inst.options.stateManagement;
  4800. opts = $.extend({
  4801. animateLoad: false //smo.animateLoad
  4802. , includeChildren: smo.includeChildren
  4803. }, opts );
  4804. if (!inst.state.initialized) {
  4805. /*
  4806. * layout NOT initialized, so just update its options
  4807. */
  4808. // MUST remove pane.children keys before applying to options
  4809. // use a copy so we don't remove keys from original data
  4810. var o = $.extend(true, {}, data);
  4811. //delete o.center; // center has no state-data - only children
  4812. $.each($.layout.config.allPanes, function (idx, pane) {
  4813. if (o[pane]) delete o[pane].children;
  4814. });
  4815. // update CURRENT layout-options with saved state data
  4816. $.extend(true, inst.options, o);
  4817. }
  4818. else {
  4819. /*
  4820. * layout already initialized, so modify layout's configuration
  4821. */
  4822. var noAnimate = !opts.animateLoad
  4823. , o, c, h, state, open
  4824. ;
  4825. $.each($.layout.config.borderPanes, function (idx, pane) {
  4826. o = data[ pane ];
  4827. if (!$.isPlainObject( o )) return; // no key, skip pane
  4828. s = o.size;
  4829. c = o.initClosed;
  4830. h = o.initHidden;
  4831. ar = o.autoResize
  4832. state = inst.state[pane];
  4833. open = state.isVisible;
  4834. // reset autoResize
  4835. if (ar)
  4836. state.autoResize = ar;
  4837. // resize BEFORE opening
  4838. if (!open)
  4839. inst._sizePane(pane, s, false, false, false); // false=skipCallback/noAnimation/forceResize
  4840. // open/close as necessary - DO NOT CHANGE THIS ORDER!
  4841. if (h === true) inst.hide(pane, noAnimate);
  4842. else if (c === true) inst.close(pane, false, noAnimate);
  4843. else if (c === false) inst.open (pane, false, noAnimate);
  4844. else if (h === false) inst.show (pane, false, noAnimate);
  4845. // resize AFTER any other actions
  4846. if (open)
  4847. inst._sizePane(pane, s, false, false, noAnimate); // animate resize if option passed
  4848. });
  4849. /*
  4850. * RECURSE INTO CHILD-LAYOUTS
  4851. */
  4852. if (opts.includeChildren) {
  4853. var paneStateChildren, childState;
  4854. $.each(inst.children, function (pane, paneChildren) {
  4855. paneStateChildren = data[pane] ? data[pane].children : 0;
  4856. if (paneStateChildren && paneChildren) {
  4857. $.each(paneChildren, function (stateKey, child) {
  4858. childState = paneStateChildren[stateKey];
  4859. if (child && childState)
  4860. child.loadState( childState );
  4861. });
  4862. }
  4863. });
  4864. }
  4865. }
  4866. }
  4867. /**
  4868. * Get the *current layout state* and return it as a hash
  4869. *
  4870. * @param {Object=} inst // Layout instance to get state for
  4871. * @param {object=} [opts] // State-Managements override options
  4872. */
  4873. , readState: function (inst, opts) {
  4874. // backward compatility
  4875. if ($.type(opts) === 'string') opts = { keys: opts };
  4876. if (!opts) opts = {};
  4877. var sm = inst.options.stateManagement
  4878. , ic = opts.includeChildren
  4879. , recurse = ic !== undefined ? ic : sm.includeChildren
  4880. , keys = opts.stateKeys || sm.stateKeys
  4881. , alt = { isClosed: 'initClosed', isHidden: 'initHidden' }
  4882. , state = inst.state
  4883. , panes = $.layout.config.allPanes
  4884. , data = {}
  4885. , pair, pane, key, val
  4886. , ps, pC, child, array, count, branch
  4887. ;
  4888. if ($.isArray(keys)) keys = keys.join(",");
  4889. // convert keys to an array and change delimiters from '__' to '.'
  4890. keys = keys.replace(/__/g, ".").split(',');
  4891. // loop keys and create a data hash
  4892. for (var i=0, n=keys.length; i < n; i++) {
  4893. pair = keys[i].split(".");
  4894. pane = pair[0];
  4895. key = pair[1];
  4896. if ($.inArray(pane, panes) < 0) continue; // bad pane!
  4897. val = state[ pane ][ key ];
  4898. if (val == undefined) continue;
  4899. if (key=="isClosed" && state[pane]["isSliding"])
  4900. val = true; // if sliding, then *really* isClosed
  4901. ( data[pane] || (data[pane]={}) )[ alt[key] ? alt[key] : key ] = val;
  4902. }
  4903. // recurse into the child-layouts for each pane
  4904. if (recurse) {
  4905. $.each(panes, function (idx, pane) {
  4906. pC = inst.children[pane];
  4907. ps = state.stateData[pane];
  4908. if ($.isPlainObject( pC ) && !$.isEmptyObject( pC )) {
  4909. // ensure a key exists for this 'pane', eg: branch = data.center
  4910. branch = data[pane] || (data[pane] = {});
  4911. if (!branch.children) branch.children = {};
  4912. $.each( pC, function (key, child) {
  4913. // ONLY read state from an initialize layout
  4914. if ( child.state.initialized )
  4915. branch.children[ key ] = $.layout.state.readState( child );
  4916. // if we have PREVIOUS (onLoad) state for this child-layout, KEEP IT!
  4917. else if ( ps && ps.children && ps.children[ key ] ) {
  4918. branch.children[ key ] = $.extend(true, {}, ps.children[ key ] );
  4919. }
  4920. });
  4921. }
  4922. });
  4923. }
  4924. return data;
  4925. }
  4926. /**
  4927. * Stringify a JSON hash so can save in a cookie or db-field
  4928. */
  4929. , encodeJSON: function (JSON) {
  4930. return parse(JSON);
  4931. function parse (h) {
  4932. var D=[], i=0, k, v, t // k = key, v = value
  4933. , a = $.isArray(h)
  4934. ;
  4935. for (k in h) {
  4936. v = h[k];
  4937. t = typeof v;
  4938. if (t == 'string') // STRING - add quotes
  4939. v = '"'+ v +'"';
  4940. else if (t == 'object') // SUB-KEY - recurse into it
  4941. v = parse(v);
  4942. D[i++] = (!a ? '"'+ k +'":' : '') + v;
  4943. }
  4944. return (a ? '[' : '{') + D.join(',') + (a ? ']' : '}');
  4945. };
  4946. }
  4947. /**
  4948. * Convert stringified JSON back to a hash object
  4949. * @see $.parseJSON(), adding in jQuery 1.4.1
  4950. */
  4951. , decodeJSON: function (str) {
  4952. try { return $.parseJSON ? $.parseJSON(str) : window["eval"]("("+ str +")") || {}; }
  4953. catch (e) { return {}; }
  4954. }
  4955. , _create: function (inst) {
  4956. var _ = $.layout.state
  4957. , o = inst.options
  4958. , sm = o.stateManagement
  4959. ;
  4960. // ADD State-Management plugin methods to inst
  4961. $.extend( inst, {
  4962. // readCookie - update options from cookie - returns hash of cookie data
  4963. readCookie: function () { return _.readCookie(inst); }
  4964. // deleteCookie
  4965. , deleteCookie: function () { _.deleteCookie(inst); }
  4966. // saveCookie - optionally pass keys-list and cookie-options (hash)
  4967. , saveCookie: function (keys, cookieOpts) { return _.saveCookie(inst, keys, cookieOpts); }
  4968. // loadCookie - readCookie and use to loadState() - returns hash of cookie data
  4969. , loadCookie: function () { return _.loadCookie(inst); }
  4970. // loadState - pass a hash of state to use to update options
  4971. , loadState: function (stateData, opts) { _.loadState(inst, stateData, opts); }
  4972. // readState - returns hash of current layout-state
  4973. , readState: function (keys) { return _.readState(inst, keys); }
  4974. // add JSON utility methods too...
  4975. , encodeJSON: _.encodeJSON
  4976. , decodeJSON: _.decodeJSON
  4977. });
  4978. // init state.stateData key, even if plugin is initially disabled
  4979. inst.state.stateData = {};
  4980. // autoLoad MUST BE one of: data-array, data-hash, callback-function, or TRUE
  4981. if ( !sm.autoLoad ) return;
  4982. // When state-data exists in the autoLoad key USE IT,
  4983. // even if stateManagement.enabled == false
  4984. if ($.isPlainObject( sm.autoLoad )) {
  4985. if (!$.isEmptyObject( sm.autoLoad )) {
  4986. inst.loadState( sm.autoLoad );
  4987. }
  4988. }
  4989. else if ( sm.enabled ) {
  4990. // update the options from cookie or callback
  4991. // if options is a function, call it to get stateData
  4992. if ($.isFunction( sm.autoLoad )) {
  4993. var d = {};
  4994. try {
  4995. d = sm.autoLoad( inst, inst.state, inst.options, inst.options.name || '' ); // try to get data from fn
  4996. } catch (e) {}
  4997. if (d && $.isPlainObject( d ) && !$.isEmptyObject( d ))
  4998. inst.loadState(d);
  4999. }
  5000. else // any other truthy value will trigger loadCookie
  5001. inst.loadCookie();
  5002. }
  5003. }
  5004. , _unload: function (inst) {
  5005. var sm = inst.options.stateManagement;
  5006. if (sm.enabled && sm.autoSave) {
  5007. // if options is a function, call it to save the stateData
  5008. if ($.isFunction( sm.autoSave )) {
  5009. try {
  5010. sm.autoSave( inst, inst.state, inst.options, inst.options.name || '' ); // try to get data from fn
  5011. } catch (e) {}
  5012. }
  5013. else // any truthy value will trigger saveCookie
  5014. inst.saveCookie();
  5015. }
  5016. }
  5017. };
  5018. // add state initialization method to Layout's onCreate array of functions
  5019. $.layout.onCreate.push( $.layout.state._create );
  5020. $.layout.onUnload.push( $.layout.state._unload );
  5021. /**
  5022. * jquery.layout.buttons 1.0
  5023. * $Date: 2011-07-16 08:00:00 (Sat, 16 July 2011) $
  5024. *
  5025. * Copyright (c) 2012
  5026. * Kevin Dalman (http://allpro.net)
  5027. *
  5028. * Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)
  5029. * and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.
  5030. *
  5031. * @requires: UI Layout 1.3.0.rc30.1 or higher
  5032. *
  5033. * @see: http://groups.google.com/group/jquery-ui-layout
  5034. *
  5035. * Docs: [ to come ]
  5036. * Tips: [ to come ]
  5037. */
  5038. // tell Layout that the state plugin is available
  5039. $.layout.plugins.buttons = true;
  5040. // Add buttons options to layout.defaults
  5041. $.layout.defaults.autoBindCustomButtons = false;
  5042. // Specify autoBindCustomButtons as a layout-option, NOT a pane-option
  5043. $.layout.optionsMap.layout.push("autoBindCustomButtons");
  5044. /*
  5045. * Button methods
  5046. */
  5047. $.layout.buttons = {
  5048. /**
  5049. * Searches for .ui-layout-button-xxx elements and auto-binds them as layout-buttons
  5050. *
  5051. * @see _create()
  5052. *
  5053. * @param {Object} inst Layout Instance object
  5054. */
  5055. init: function (inst) {
  5056. var pre = "ui-layout-button-"
  5057. , layout = inst.options.name || ""
  5058. , name;
  5059. $.each("toggle,open,close,pin,toggle-slide,open-slide".split(","), function (i, action) {
  5060. $.each($.layout.config.borderPanes, function (ii, pane) {
  5061. $("."+pre+action+"-"+pane).each(function(){
  5062. // if button was previously 'bound', data.layoutName was set, but is blank if layout has no 'name'
  5063. name = $(this).data("layoutName") || $(this).attr("layoutName");
  5064. if (name == undefined || name === layout)
  5065. inst.bindButton(this, action, pane);
  5066. });
  5067. });
  5068. });
  5069. }
  5070. /**
  5071. * Helper function to validate params received by addButton utilities
  5072. *
  5073. * Two classes are added to the element, based on the buttonClass...
  5074. * The type of button is appended to create the 2nd className:
  5075. * - ui-layout-button-pin // action btnClass
  5076. * - ui-layout-button-pin-west // action btnClass + pane
  5077. * - ui-layout-button-toggle
  5078. * - ui-layout-button-open
  5079. * - ui-layout-button-close
  5080. *
  5081. * @param {Object} inst Layout Instance object
  5082. * @param {(string|!Object)} selector jQuery selector (or element) for button, eg: ".ui-layout-north .toggle-button"
  5083. * @param {string} pane Name of the pane the button is for: 'north', 'south', etc.
  5084. *
  5085. * @return {Array.<Object>} If both params valid, the element matching 'selector' in a jQuery wrapper - otherwise returns null
  5086. */
  5087. , get: function (inst, selector, pane, action) {
  5088. var $E = $(selector)
  5089. , o = inst.options
  5090. , err = o.errors.addButtonError
  5091. ;
  5092. if (!$E.length) { // element not found
  5093. $.layout.msg(err +" "+ o.errors.selector +": "+ selector, true);
  5094. }
  5095. else if ($.inArray(pane, $.layout.config.borderPanes) < 0) { // invalid 'pane' sepecified
  5096. $.layout.msg(err +" "+ o.errors.pane +": "+ pane, true);
  5097. $E = $(""); // NO BUTTON
  5098. }
  5099. else { // VALID
  5100. var btn = o[pane].buttonClass +"-"+ action;
  5101. $E .addClass( btn +" "+ btn +"-"+ pane )
  5102. .data("layoutName", o.name); // add layout identifier - even if blank!
  5103. }
  5104. return $E;
  5105. }
  5106. /**
  5107. * NEW syntax for binding layout-buttons - will eventually replace addToggle, addOpen, etc.
  5108. *
  5109. * @param {Object} inst Layout Instance object
  5110. * @param {(string|!Object)} selector jQuery selector (or element) for button, eg: ".ui-layout-north .toggle-button"
  5111. * @param {string} action
  5112. * @param {string} pane
  5113. */
  5114. , bind: function (inst, selector, action, pane) {
  5115. var _ = $.layout.buttons;
  5116. switch (action.toLowerCase()) {
  5117. case "toggle": _.addToggle (inst, selector, pane); break;
  5118. case "open": _.addOpen (inst, selector, pane); break;
  5119. case "close": _.addClose (inst, selector, pane); break;
  5120. case "pin": _.addPin (inst, selector, pane); break;
  5121. case "toggle-slide": _.addToggle (inst, selector, pane, true); break;
  5122. case "open-slide": _.addOpen (inst, selector, pane, true); break;
  5123. }
  5124. return inst;
  5125. }
  5126. /**
  5127. * Add a custom Toggler button for a pane
  5128. *
  5129. * @param {Object} inst Layout Instance object
  5130. * @param {(string|!Object)} selector jQuery selector (or element) for button, eg: ".ui-layout-north .toggle-button"
  5131. * @param {string} pane Name of the pane the button is for: 'north', 'south', etc.
  5132. * @param {boolean=} slide true = slide-open, false = pin-open
  5133. */
  5134. , addToggle: function (inst, selector, pane, slide) {
  5135. $.layout.buttons.get(inst, selector, pane, "toggle")
  5136. .click(function(evt){
  5137. inst.toggle(pane, !!slide);
  5138. evt.stopPropagation();
  5139. });
  5140. return inst;
  5141. }
  5142. /**
  5143. * Add a custom Open button for a pane
  5144. *
  5145. * @param {Object} inst Layout Instance object
  5146. * @param {(string|!Object)} selector jQuery selector (or element) for button, eg: ".ui-layout-north .toggle-button"
  5147. * @param {string} pane Name of the pane the button is for: 'north', 'south', etc.
  5148. * @param {boolean=} slide true = slide-open, false = pin-open
  5149. */
  5150. , addOpen: function (inst, selector, pane, slide) {
  5151. $.layout.buttons.get(inst, selector, pane, "open")
  5152. .attr("title", inst.options[pane].tips.Open)
  5153. .click(function (evt) {
  5154. inst.open(pane, !!slide);
  5155. evt.stopPropagation();
  5156. });
  5157. return inst;
  5158. }
  5159. /**
  5160. * Add a custom Close button for a pane
  5161. *
  5162. * @param {Object} inst Layout Instance object
  5163. * @param {(string|!Object)} selector jQuery selector (or element) for button, eg: ".ui-layout-north .toggle-button"
  5164. * @param {string} pane Name of the pane the button is for: 'north', 'south', etc.
  5165. */
  5166. , addClose: function (inst, selector, pane) {
  5167. $.layout.buttons.get(inst, selector, pane, "close")
  5168. .attr("title", inst.options[pane].tips.Close)
  5169. .click(function (evt) {
  5170. inst.close(pane);
  5171. evt.stopPropagation();
  5172. });
  5173. return inst;
  5174. }
  5175. /**
  5176. * Add a custom Pin button for a pane
  5177. *
  5178. * Four classes are added to the element, based on the paneClass for the associated pane...
  5179. * Assuming the default paneClass and the pin is 'up', these classes are added for a west-pane pin:
  5180. * - ui-layout-pane-pin
  5181. * - ui-layout-pane-west-pin
  5182. * - ui-layout-pane-pin-up
  5183. * - ui-layout-pane-west-pin-up
  5184. *
  5185. * @param {Object} inst Layout Instance object
  5186. * @param {(string|!Object)} selector jQuery selector (or element) for button, eg: ".ui-layout-north .toggle-button"
  5187. * @param {string} pane Name of the pane the pin is for: 'north', 'south', etc.
  5188. */
  5189. , addPin: function (inst, selector, pane) {
  5190. var _ = $.layout.buttons
  5191. , $E = _.get(inst, selector, pane, "pin");
  5192. if ($E.length) {
  5193. var s = inst.state[pane];
  5194. $E.click(function (evt) {
  5195. _.setPinState(inst, $(this), pane, (s.isSliding || s.isClosed));
  5196. if (s.isSliding || s.isClosed) inst.open( pane ); // change from sliding to open
  5197. else inst.close( pane ); // slide-closed
  5198. evt.stopPropagation();
  5199. });
  5200. // add up/down pin attributes and classes
  5201. _.setPinState(inst, $E, pane, (!s.isClosed && !s.isSliding));
  5202. // add this pin to the pane data so we can 'sync it' automatically
  5203. // PANE.pins key is an array so we can store multiple pins for each pane
  5204. s.pins.push( selector ); // just save the selector string
  5205. }
  5206. return inst;
  5207. }
  5208. /**
  5209. * Change the class of the pin button to make it look 'up' or 'down'
  5210. *
  5211. * @see addPin(), syncPins()
  5212. *
  5213. * @param {Object} inst Layout Instance object
  5214. * @param {Array.<Object>} $Pin The pin-span element in a jQuery wrapper
  5215. * @param {string} pane These are the params returned to callbacks by layout()
  5216. * @param {boolean} doPin true = set the pin 'down', false = set it 'up'
  5217. */
  5218. , setPinState: function (inst, $Pin, pane, doPin) {
  5219. var updown = $Pin.attr("pin");
  5220. if (updown && doPin === (updown=="down")) return; // already in correct state
  5221. var
  5222. o = inst.options[pane]
  5223. , pin = o.buttonClass +"-pin"
  5224. , side = pin +"-"+ pane
  5225. , UP = pin +"-up "+ side +"-up"
  5226. , DN = pin +"-down "+side +"-down"
  5227. ;
  5228. $Pin
  5229. .attr("pin", doPin ? "down" : "up") // logic
  5230. .attr("title", doPin ? o.tips.Unpin : o.tips.Pin)
  5231. .removeClass( doPin ? UP : DN )
  5232. .addClass( doPin ? DN : UP )
  5233. ;
  5234. }
  5235. /**
  5236. * INTERNAL function to sync 'pin buttons' when pane is opened or closed
  5237. * Unpinned means the pane is 'sliding' - ie, over-top of the adjacent panes
  5238. *
  5239. * @see open(), close()
  5240. *
  5241. * @param {Object} inst Layout Instance object
  5242. * @param {string} pane These are the params returned to callbacks by layout()
  5243. * @param {boolean} doPin True means set the pin 'down', False means 'up'
  5244. */
  5245. , syncPinBtns: function (inst, pane, doPin) {
  5246. // REAL METHOD IS _INSIDE_ LAYOUT - THIS IS HERE JUST FOR REFERENCE
  5247. $.each(inst.state[pane].pins, function (i, selector) {
  5248. $.layout.buttons.setPinState(inst, $(selector), pane, doPin);
  5249. });
  5250. }
  5251. , _load: function (inst) {
  5252. var _ = $.layout.buttons;
  5253. // ADD Button methods to Layout Instance
  5254. // Note: sel = jQuery Selector string
  5255. $.extend( inst, {
  5256. bindButton: function (sel, action, pane) { return _.bind(inst, sel, action, pane); }
  5257. // DEPRECATED METHODS
  5258. , addToggleBtn: function (sel, pane, slide) { return _.addToggle(inst, sel, pane, slide); }
  5259. , addOpenBtn: function (sel, pane, slide) { return _.addOpen(inst, sel, pane, slide); }
  5260. , addCloseBtn: function (sel, pane) { return _.addClose(inst, sel, pane); }
  5261. , addPinBtn: function (sel, pane) { return _.addPin(inst, sel, pane); }
  5262. });
  5263. // init state array to hold pin-buttons
  5264. for (var i=0; i<4; i++) {
  5265. var pane = $.layout.config.borderPanes[i];
  5266. inst.state[pane].pins = [];
  5267. }
  5268. // auto-init buttons onLoad if option is enabled
  5269. if ( inst.options.autoBindCustomButtons )
  5270. _.init(inst);
  5271. }
  5272. , _unload: function (inst) {
  5273. // TODO: unbind all buttons???
  5274. }
  5275. };
  5276. // add initialization method to Layout's onLoad array of functions
  5277. $.layout.onLoad.push( $.layout.buttons._load );
  5278. //$.layout.onUnload.push( $.layout.buttons._unload );
  5279. /**
  5280. * jquery.layout.browserZoom 1.0
  5281. * $Date: 2011-12-29 08:00:00 (Thu, 29 Dec 2011) $
  5282. *
  5283. * Copyright (c) 2012
  5284. * Kevin Dalman (http://allpro.net)
  5285. *
  5286. * Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)
  5287. * and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.
  5288. *
  5289. * @requires: UI Layout 1.3.0.rc30.1 or higher
  5290. *
  5291. * @see: http://groups.google.com/group/jquery-ui-layout
  5292. *
  5293. * TODO: Extend logic to handle other problematic zooming in browsers
  5294. * TODO: Add hotkey/mousewheel bindings to _instantly_ respond to these zoom event
  5295. */
  5296. // tell Layout that the plugin is available
  5297. $.layout.plugins.browserZoom = true;
  5298. $.layout.defaults.browserZoomCheckInterval = 1000;
  5299. $.layout.optionsMap.layout.push("browserZoomCheckInterval");
  5300. /*
  5301. * browserZoom methods
  5302. */
  5303. $.layout.browserZoom = {
  5304. _init: function (inst) {
  5305. // abort if browser does not need this check
  5306. if ($.layout.browserZoom.ratio() !== false)
  5307. $.layout.browserZoom._setTimer(inst);
  5308. }
  5309. , _setTimer: function (inst) {
  5310. // abort if layout destroyed or browser does not need this check
  5311. if (inst.destroyed) return;
  5312. var o = inst.options
  5313. , s = inst.state
  5314. // don't need check if inst has parentLayout, but check occassionally in case parent destroyed!
  5315. // MINIMUM 100ms interval, for performance
  5316. , ms = inst.hasParentLayout ? 5000 : Math.max( o.browserZoomCheckInterval, 100 )
  5317. ;
  5318. // set the timer
  5319. setTimeout(function(){
  5320. if (inst.destroyed || !o.resizeWithWindow) return;
  5321. var d = $.layout.browserZoom.ratio();
  5322. if (d !== s.browserZoom) {
  5323. s.browserZoom = d;
  5324. inst.resizeAll();
  5325. }
  5326. // set a NEW timeout
  5327. $.layout.browserZoom._setTimer(inst);
  5328. }
  5329. , ms );
  5330. }
  5331. , ratio: function () {
  5332. var w = window
  5333. , s = screen
  5334. , d = document
  5335. , dE = d.documentElement || d.body
  5336. , b = $.layout.browser
  5337. , v = b.version
  5338. , r, sW, cW
  5339. ;
  5340. // we can ignore all browsers that fire window.resize event onZoom
  5341. if ((b.msie && v > 8)
  5342. || !b.msie
  5343. ) return false; // don't need to track zoom
  5344. if (s.deviceXDPI && s.systemXDPI) // syntax compiler hack
  5345. return calc(s.deviceXDPI, s.systemXDPI);
  5346. // everything below is just for future reference!
  5347. if (b.webkit && (r = d.body.getBoundingClientRect))
  5348. return calc((r.left - r.right), d.body.offsetWidth);
  5349. if (b.webkit && (sW = w.outerWidth))
  5350. return calc(sW, w.innerWidth);
  5351. if ((sW = s.width) && (cW = dE.clientWidth))
  5352. return calc(sW, cW);
  5353. return false; // no match, so cannot - or don't need to - track zoom
  5354. function calc (x,y) { return (parseInt(x,10) / parseInt(y,10) * 100).toFixed(); }
  5355. }
  5356. };
  5357. // add initialization method to Layout's onLoad array of functions
  5358. $.layout.onReady.push( $.layout.browserZoom._init );
  5359. })( jQuery );