12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956395739583959396039613962396339643965396639673968396939703971397239733974397539763977397839793980398139823983398439853986398739883989399039913992399339943995399639973998399940004001400240034004400540064007400840094010401140124013401440154016401740184019402040214022402340244025402640274028402940304031403240334034403540364037403840394040404140424043404440454046404740484049405040514052405340544055405640574058405940604061406240634064406540664067406840694070407140724073407440754076407740784079408040814082408340844085 |
- /*!
- * jquery.fancytree.js
- * Dynamic tree view control, with support for lazy loading of branches.
- * https://github.com/mar10/fancytree/
- *
- * Copyright (c) 2006-2014, Martin Wendt (http://wwWendt.de)
- * Released under the MIT license
- * https://github.com/mar10/fancytree/wiki/LicenseInfo
- *
- * @version 2.2.0
- * @date 2014-06-28T17:15
- */
- /** Core Fancytree module.
- */
- // Start of local namespace
- ;(function($, window, document, undefined) {
- "use strict";
- // prevent duplicate loading
- if ( $.ui.fancytree && $.ui.fancytree.version ) {
- $.ui.fancytree.warn("Fancytree: ignored duplicate include");
- return;
- }
- /* *****************************************************************************
- * Private functions and variables
- */
- function _raiseNotImplemented(msg){
- msg = msg || "";
- $.error("Not implemented: " + msg);
- }
- function _assert(cond, msg){
- // TODO: see qunit.js extractStacktrace()
- if(!cond){
- msg = msg ? ": " + msg : "";
- $.error("Assertion failed" + msg);
- }
- }
- function consoleApply(method, args){
- var i, s,
- fn = window.console ? window.console[method] : null;
- if(fn){
- if(fn.apply){
- fn.apply(window.console, args);
- }else{
- // IE?
- s = "";
- for( i=0; i<args.length; i++){
- s += args[i];
- }
- fn(s);
- }
- }
- }
- /*Return true if x is a FancytreeNode.*/
- function _isNode(x){
- return !!(x.tree && x.statusNodeType !== undefined);
- }
- /** Return true if dotted version string is equal or higher than requested version.
- *
- * See http://jsfiddle.net/mar10/FjSAN/
- */
- function isVersionAtLeast(dottedVersion, major, minor, patch){
- var i, v, t,
- verParts = $.map($.trim(dottedVersion).split("."), function(e){ return parseInt(e, 10); }),
- testParts = $.map(Array.prototype.slice.call(arguments, 1), function(e){ return parseInt(e, 10); });
- for( i = 0; i < testParts.length; i++ ){
- v = verParts[i] || 0;
- t = testParts[i] || 0;
- if( v !== t ){
- return ( v > t );
- }
- }
- return true;
- }
- /** Return a wrapper that calls sub.methodName() and exposes
- * this : tree
- * this._local : tree.ext.EXTNAME
- * this._super : base.methodName()
- */
- function _makeVirtualFunction(methodName, tree, base, extension, extName){
- // $.ui.fancytree.debug("_makeVirtualFunction", methodName, tree, base, extension, extName);
- // if(rexTestSuper && !rexTestSuper.test(func)){
- // // extension.methodName() doesn't call _super(), so no wrapper required
- // return func;
- // }
- // Use an immediate function as closure
- var proxy = (function(){
- var prevFunc = tree[methodName], // org. tree method or prev. proxy
- baseFunc = extension[methodName], //
- _local = tree.ext[extName],
- _super = function(){
- return prevFunc.apply(tree, arguments);
- };
- // Return the wrapper function
- return function(){
- var prevLocal = tree._local,
- prevSuper = tree._super;
- try{
- tree._local = _local;
- tree._super = _super;
- return baseFunc.apply(tree, arguments);
- }finally{
- tree._local = prevLocal;
- tree._super = prevSuper;
- }
- };
- })(); // end of Immediate Function
- return proxy;
- }
- /**
- * Subclass `base` by creating proxy functions
- */
- function _subclassObject(tree, base, extension, extName){
- // $.ui.fancytree.debug("_subclassObject", tree, base, extension, extName);
- for(var attrName in extension){
- if(typeof extension[attrName] === "function"){
- if(typeof tree[attrName] === "function"){
- // override existing method
- tree[attrName] = _makeVirtualFunction(attrName, tree, base, extension, extName);
- }else if(attrName.charAt(0) === "_"){
- // Create private methods in tree.ext.EXTENSION namespace
- tree.ext[extName][attrName] = _makeVirtualFunction(attrName, tree, base, extension, extName);
- }else{
- $.error("Could not override tree." + attrName + ". Use prefix '_' to create tree." + extName + "._" + attrName);
- }
- }else{
- // Create member variables in tree.ext.EXTENSION namespace
- if(attrName !== "options"){
- tree.ext[extName][attrName] = extension[attrName];
- }
- }
- }
- }
- function _getResolvedPromise(context, argArray){
- if(context === undefined){
- return $.Deferred(function(){this.resolve();}).promise();
- }else{
- return $.Deferred(function(){this.resolveWith(context, argArray);}).promise();
- }
- }
- function _getRejectedPromise(context, argArray){
- if(context === undefined){
- return $.Deferred(function(){this.reject();}).promise();
- }else{
- return $.Deferred(function(){this.rejectWith(context, argArray);}).promise();
- }
- }
- function _makeResolveFunc(deferred, context){
- return function(){
- deferred.resolveWith(context);
- };
- }
- function _getElementDataAsDict($el){
- // Evaluate 'data-NAME' attributes with special treatment for 'data-json'.
- var d = $.extend({}, $el.data()),
- json = d.json;
- delete d.fancytree; // added to container by widget factory
- if( json ) {
- delete d.json;
- // <li data-json='...'> is already returned as object (http://api.jquery.com/data/#data-html5)
- d = $.extend(d, json);
- }
- return d;
- }
- // TODO: use currying
- function _makeNodeTitleMatcher(s){
- s = s.toLowerCase();
- return function(node){
- return node.title.toLowerCase().indexOf(s) >= 0;
- };
- }
- var i,
- FT = null, // initialized below
- ENTITY_MAP = {"&": "&", "<": "<", ">": ">", "\"": """, "'": "'", "/": "/"},
- //boolean attributes that can be set with equivalent class names in the LI tags
- CLASS_ATTRS = "active expanded focus folder hideCheckbox lazy selected unselectable".split(" "),
- CLASS_ATTR_MAP = {},
- // Top-level Fancytree node attributes, that can be set by dict
- NODE_ATTRS = "expanded extraClasses folder hideCheckbox key lazy refKey selected title tooltip unselectable".split(" "),
- NODE_ATTR_MAP = {},
- // Attribute names that should NOT be added to node.data
- NONE_NODE_DATA_MAP = {"active": true, "children": true, "data": true, "focus": true};
- for(i=0; i<CLASS_ATTRS.length; i++){ CLASS_ATTR_MAP[CLASS_ATTRS[i]] = true; }
- for(i=0; i<NODE_ATTRS.length; i++){ NODE_ATTR_MAP[NODE_ATTRS[i]] = true; }
- /* *****************************************************************************
- * FancytreeNode
- */
- /**
- * Creates a new FancytreeNode
- *
- * @class FancytreeNode
- * @classdesc A FancytreeNode represents the hierarchical data model and operations.
- *
- * @param {FancytreeNode} parent
- * @param {NodeData} obj
- *
- * @property {Fancytree} tree The tree instance
- * @property {FancytreeNode} parent The parent node
- * @property {string} key Node id (must be unique inside the tree)
- * @property {string} title Display name (may contain HTML)
- * @property {object} data Contains all extra data that was passed on node creation
- * @property {FancytreeNode[] | null | undefined} children Array of child nodes.<br>
- * For lazy nodes, null or undefined means 'not yet loaded'. Use an empty array
- * to define a node that has no children.
- * @property {boolean} expanded Use isExpanded(), setExpanded() to access this property.
- * @property {string} extraClasses Addtional CSS classes, added to the node's `<span>`
- * @property {boolean} folder Folder nodes have different default icons and click behavior.<br>
- * Note: Also non-folders may have children.
- * @property {string} statusNodeType null or type of temporarily generated system node like 'loading', or 'error'.
- * @property {boolean} lazy True if this node is loaded on demand, i.e. on first expansion.
- * @property {boolean} selected Use isSelected(), setSelected() to access this property.
- * @property {string} tooltip Alternative description used as hover banner
- */
- function FancytreeNode(parent, obj){
- var i, l, name, cl;
- this.parent = parent;
- this.tree = parent.tree;
- this.ul = null;
- this.li = null; // <li id='key' ftnode=this> tag
- this.statusNodeType = null; // if this is a temp. node to display the status of its parent
- this._isLoading = false; // if this node itself is loading
- this._error = null; // {message: '...'} if a load error occured
- this.data = {};
- // TODO: merge this code with node.toDict()
- // copy attributes from obj object
- for(i=0, l=NODE_ATTRS.length; i<l; i++){
- name = NODE_ATTRS[i];
- this[name] = obj[name];
- }
- // node.data += obj.data
- if(obj.data){
- $.extend(this.data, obj.data);
- }
- // copy all other attributes to this.data.NAME
- for(name in obj){
- if(!NODE_ATTR_MAP[name] && !$.isFunction(obj[name]) && !NONE_NODE_DATA_MAP[name]){
- // node.data.NAME = obj.NAME
- this.data[name] = obj[name];
- }
- }
- // Fix missing key
- if( this.key == null ){ // test for null OR undefined
- if( this.tree.options.defaultKey ) {
- this.key = this.tree.options.defaultKey(this);
- _assert(this.key, "defaultKey() must return a unique key");
- } else {
- this.key = "_" + (FT._nextNodeKey++);
- }
- } else {
- this.key = "" + this.key; // Convert to string (#217)
- }
- // Fix tree.activeNode
- // TODO: not elegant: we use obj.active as marker to set tree.activeNode
- // when loading from a dictionary.
- if(obj.active){
- _assert(this.tree.activeNode === null, "only one active node allowed");
- this.tree.activeNode = this;
- }
- if( obj.selected ){ // #186
- this.tree.lastSelectedNode = this;
- }
- // TODO: handle obj.focus = true
- // Create child nodes
- this.children = null;
- cl = obj.children;
- if(cl && cl.length){
- this._setChildren(cl);
- }
- // Add to key/ref map (except for root node)
- // if( parent ) {
- this.tree._callHook("treeRegisterNode", this.tree, true, this);
- // }
- }
- FancytreeNode.prototype = /** @lends FancytreeNode# */{
- /* Return the direct child FancytreeNode with a given key, index. */
- _findDirectChild: function(ptr){
- var i, l,
- cl = this.children;
- if(cl){
- if(typeof ptr === "string"){
- for(i=0, l=cl.length; i<l; i++){
- if(cl[i].key === ptr){
- return cl[i];
- }
- }
- }else if(typeof ptr === "number"){
- return this.children[ptr];
- }else if(ptr.parent === this){
- return ptr;
- }
- }
- return null;
- },
- // TODO: activate()
- // TODO: activateSilently()
- /* Internal helper called in recursive addChildren sequence.*/
- _setChildren: function(children){
- _assert(children && (!this.children || this.children.length === 0), "only init supported");
- this.children = [];
- for(var i=0, l=children.length; i<l; i++){
- this.children.push(new FancytreeNode(this, children[i]));
- }
- },
- /**
- * Append (or insert) a list of child nodes.
- *
- * @param {NodeData[]} children array of child node definitions (also single child accepted)
- * @param {FancytreeNode | string | Integer} [insertBefore] child node (or key or index of such).
- * If omitted, the new children are appended.
- * @returns {FancytreeNode} first child added
- *
- * @see FancytreeNode#applyPatch
- */
- addChildren: function(children, insertBefore){
- var i, l, pos,
- firstNode = null,
- nodeList = [];
- if($.isPlainObject(children) ){
- children = [children];
- }
- if(!this.children){
- this.children = [];
- }
- for(i=0, l=children.length; i<l; i++){
- nodeList.push(new FancytreeNode(this, children[i]));
- }
- firstNode = nodeList[0];
- if(insertBefore == null){
- this.children = this.children.concat(nodeList);
- }else{
- insertBefore = this._findDirectChild(insertBefore);
- pos = $.inArray(insertBefore, this.children);
- _assert(pos >= 0, "insertBefore must be an existing child");
- // insert nodeList after children[pos]
- this.children.splice.apply(this.children, [pos, 0].concat(nodeList));
- }
- if( !this.parent || this.parent.ul || this.tr ){
- // render if the parent was rendered (or this is a root node)
- this.render();
- }
- if( this.tree.options.selectMode === 3 ){
- this.fixSelection3FromEndNodes();
- }
- return firstNode;
- },
- /**
- * Append or prepend a node, or append a child node.
- *
- * This a convenience function that calls addChildren()
- *
- * @param {NodeData} node node definition
- * @param {string} [mode=child] 'before', 'after', or 'child' ('over' is a synonym for 'child')
- * @returns {FancytreeNode} new node
- */
- addNode: function(node, mode){
- if(mode === undefined || mode === "over"){
- mode = "child";
- }
- switch(mode){
- case "after":
- return this.getParent().addChildren(node, this.getNextSibling());
- case "before":
- return this.getParent().addChildren(node, this);
- case "child":
- case "over":
- return this.addChildren(node);
- }
- _assert(false, "Invalid mode: " + mode);
- },
- /**
- * Append new node after this.
- *
- * This a convenience function that calls addNode(node, 'after')
- *
- * @param {NodeData} node node definition
- * @returns {FancytreeNode} new node
- */
- appendSibling: function(node){
- return this.addNode(node, "after");
- },
- /**
- * Modify existing child nodes.
- *
- * @param {NodePatch} patch
- * @returns {$.Promise}
- * @see FancytreeNode#addChildren
- */
- applyPatch: function(patch) {
- // patch [key, null] means 'remove'
- if(patch === null){
- this.remove();
- return _getResolvedPromise(this);
- }
- // TODO: make sure that root node is not collapsed or modified
- // copy (most) attributes to node.ATTR or node.data.ATTR
- var name, promise, v,
- IGNORE_MAP = { children: true, expanded: true, parent: true }; // TODO: should be global
- for(name in patch){
- v = patch[name];
- if( !IGNORE_MAP[name] && !$.isFunction(v)){
- if(NODE_ATTR_MAP[name]){
- this[name] = v;
- }else{
- this.data[name] = v;
- }
- }
- }
- // Remove and/or create children
- if(patch.hasOwnProperty("children")){
- this.removeChildren();
- if(patch.children){ // only if not null and not empty list
- // TODO: addChildren instead?
- this._setChildren(patch.children);
- }
- // TODO: how can we APPEND or INSERT child nodes?
- }
- if(this.isVisible()){
- this.renderTitle();
- this.renderStatus();
- }
- // Expand collapse (final step, since this may be async)
- if(patch.hasOwnProperty("expanded")){
- promise = this.setExpanded(patch.expanded);
- }else{
- promise = _getResolvedPromise(this);
- }
- return promise;
- },
- /** Collapse all sibling nodes.
- * @returns {$.Promise}
- */
- collapseSiblings: function() {
- return this.tree._callHook("nodeCollapseSiblings", this);
- },
- /** Copy this node as sibling or child of `node`.
- *
- * @param {FancytreeNode} node source node
- * @param {string} mode 'before' | 'after' | 'child'
- * @param {Function} [map] callback function(NodeData) that could modify the new node
- * @returns {FancytreeNode} new
- */
- copyTo: function(node, mode, map) {
- return node.addNode(this.toDict(true, map), mode);
- },
- /** Count direct and indirect children.
- *
- * @param {boolean} [deep=true] pass 'false' to only count direct children
- * @returns {int} number of child nodes
- */
- countChildren: function(deep) {
- var cl = this.children, i, l, n;
- if( !cl ){
- return 0;
- }
- n = cl.length;
- if(deep !== false){
- for(i=0, l=n; i<l; i++){
- n += cl[i].countChildren();
- }
- }
- return n;
- },
- // TODO: deactivate()
- /** Write to browser console if debugLevel >= 2 (prepending node info)
- *
- * @param {*} msg string or object or array of such
- */
- debug: function(msg){
- if( this.tree.options.debugLevel >= 2 ) {
- Array.prototype.unshift.call(arguments, this.toString());
- consoleApply("debug", arguments);
- }
- },
- /** Deprecated.
- * @deprecated since 2014-02-16. Use resetLazy() instead.
- */
- discard: function(){
- this.warn("FancytreeNode.discard() is deprecated since 2014-02-16. Use .resetLazy() instead.");
- return this.resetLazy();
- },
- // TODO: expand(flag)
- /**Find all nodes that contain `match` in the title.
- *
- * @param {string | function(node)} match string to search for, of a function that
- * returns `true` if a node is matched.
- * @returns {FancytreeNode[]} array of nodes (may be empty)
- * @see FancytreeNode#findAll
- */
- findAll: function(match) {
- match = $.isFunction(match) ? match : _makeNodeTitleMatcher(match);
- var res = [];
- this.visit(function(n){
- if(match(n)){
- res.push(n);
- }
- });
- return res;
- },
- /**Find first node that contains `match` in the title (not including self).
- *
- * @param {string | function(node)} match string to search for, of a function that
- * returns `true` if a node is matched.
- * @returns {FancytreeNode} matching node or null
- * @example
- * <b>fat</b> text
- */
- findFirst: function(match) {
- match = $.isFunction(match) ? match : _makeNodeTitleMatcher(match);
- var res = null;
- this.visit(function(n){
- if(match(n)){
- res = n;
- return false;
- }
- });
- return res;
- },
- /* Apply selection state (internal use only) */
- _changeSelectStatusAttrs: function (state) {
- var changed = false;
- switch(state){
- case false:
- changed = ( this.selected || this.partsel );
- this.selected = false;
- this.partsel = false;
- break;
- case true:
- changed = ( !this.selected || !this.partsel );
- this.selected = true;
- this.partsel = true;
- break;
- case undefined:
- changed = ( this.selected || !this.partsel );
- this.selected = false;
- this.partsel = true;
- break;
- default:
- _assert(false, "invalid state: " + state);
- }
- // this.debug("fixSelection3AfterLoad() _changeSelectStatusAttrs()", state, changed);
- if( changed ){
- this.renderStatus();
- }
- return changed;
- },
- /**
- * Fix selection status, after this node was (de)selected in multi-hier mode.
- * This includes (de)selecting all children.
- */
- fixSelection3AfterClick: function() {
- var flag = this.isSelected();
- // this.debug("fixSelection3AfterClick()");
- this.visit(function(node){
- node._changeSelectStatusAttrs(flag);
- });
- this.fixSelection3FromEndNodes();
- },
- /**
- * Fix selection status for multi-hier mode.
- * Only end-nodes are considered to update the descendants branch and parents.
- * Should be called after this node has loaded new children or after
- * children have been modified using the API.
- */
- fixSelection3FromEndNodes: function() {
- // this.debug("fixSelection3FromEndNodes()");
- _assert(this.tree.options.selectMode === 3, "expected selectMode 3");
- // Visit all end nodes and adjust their parent's `selected` and `partsel`
- // attributes. Return selection state true, false, or undefined.
- function _walk(node){
- var i, l, child, s, state, allSelected,someSelected,
- children = node.children;
- if( children && children.length ){
- // check all children recursively
- allSelected = true;
- someSelected = false;
- for( i=0, l=children.length; i<l; i++ ){
- child = children[i];
- // the selection state of a node is not relevant; we need the end-nodes
- s = _walk(child);
- if( s !== false ) {
- someSelected = true;
- }
- if( s !== true ) {
- allSelected = false;
- }
- }
- state = allSelected ? true : (someSelected ? undefined : false);
- }else{
- // This is an end-node: simply report the status
- // state = ( node.unselectable ) ? undefined : !!node.selected;
- state = !!node.selected;
- }
- node._changeSelectStatusAttrs(state);
- return state;
- }
- _walk(this);
- // Update parent's state
- this.visitParents(function(node){
- var i, l, child, state,
- children = node.children,
- allSelected = true,
- someSelected = false;
- for( i=0, l=children.length; i<l; i++ ){
- child = children[i];
- // When fixing the parents, we trust the sibling status (i.e.
- // we don't recurse)
- if( child.selected || child.partsel ) {
- someSelected = true;
- }
- if( !child.unselectable && !child.selected ) {
- allSelected = false;
- }
- }
- state = allSelected ? true : (someSelected ? undefined : false);
- node._changeSelectStatusAttrs(state);
- });
- },
- // TODO: focus()
- /**
- * Update node data. If dict contains 'children', then also replace
- * the hole sub tree.
- * @param {NodeData} dict
- *
- * @see FancytreeNode#addChildren
- * @see FancytreeNode#applyPatch
- */
- fromDict: function(dict) {
- // copy all other attributes to this.data.xxx
- for(var name in dict){
- if(NODE_ATTR_MAP[name]){
- // node.NAME = dict.NAME
- this[name] = dict[name];
- }else if(name === "data"){
- // node.data += dict.data
- $.extend(this.data, dict.data);
- }else if(!$.isFunction(dict[name]) && !NONE_NODE_DATA_MAP[name]){
- // node.data.NAME = dict.NAME
- this.data[name] = dict[name];
- }
- }
- if(dict.children){
- // recursively set children and render
- this.removeChildren();
- this.addChildren(dict.children);
- }
- this.renderTitle();
- /*
- var children = dict.children;
- if(children === undefined){
- this.data = $.extend(this.data, dict);
- this.render();
- return;
- }
- dict = $.extend({}, dict);
- dict.children = undefined;
- this.data = $.extend(this.data, dict);
- this.removeChildren();
- this.addChild(children);
- */
- },
- /** Return the list of child nodes (undefined for unexpanded lazy nodes).
- * @returns {FancytreeNode[] | undefined}
- */
- getChildren: function() {
- if(this.hasChildren() === undefined){ // TODO: only required for lazy nodes?
- return undefined; // Lazy node: unloaded, currently loading, or load error
- }
- return this.children;
- },
- /** Return the first child node or null.
- * @returns {FancytreeNode | null}
- */
- getFirstChild: function() {
- return this.children ? this.children[0] : null;
- },
- /** Return the 0-based child index.
- * @returns {int}
- */
- getIndex: function() {
- // return this.parent.children.indexOf(this);
- return $.inArray(this, this.parent.children); // indexOf doesn't work in IE7
- },
- /** Return the hierarchical child index (1-based, e.g. '3.2.4').
- * @returns {string}
- */
- getIndexHier: function(separator) {
- separator = separator || ".";
- var res = [];
- $.each(this.getParentList(false, true), function(i, o){
- res.push(o.getIndex() + 1);
- });
- return res.join(separator);
- },
- /** Return the parent keys separated by options.keyPathSeparator, e.g. "id_1/id_17/id_32".
- * @param {boolean} [excludeSelf=false]
- * @returns {string}
- */
- getKeyPath: function(excludeSelf) {
- var path = [],
- sep = this.tree.options.keyPathSeparator;
- this.visitParents(function(n){
- if(n.parent){
- path.unshift(n.key);
- }
- }, !excludeSelf);
- return sep + path.join(sep);
- },
- /** Return the last child of this node or null.
- * @returns {FancytreeNode | null}
- */
- getLastChild: function() {
- return this.children ? this.children[this.children.length - 1] : null;
- },
- /** Return node depth. 0: System root node, 1: visible top-level node, 2: first sub-level, ... .
- * @returns {int}
- */
- getLevel: function() {
- var level = 0,
- dtn = this.parent;
- while( dtn ) {
- level++;
- dtn = dtn.parent;
- }
- return level;
- },
- /** Return the successor node (under the same parent) or null.
- * @returns {FancytreeNode | null}
- */
- getNextSibling: function() {
- // TODO: use indexOf, if available: (not in IE6)
- if( this.parent ){
- var i, l,
- ac = this.parent.children;
- for(i=0, l=ac.length-1; i<l; i++){ // up to length-2, so next(last) = null
- if( ac[i] === this ){
- return ac[i+1];
- }
- }
- }
- return null;
- },
- /** Return the parent node (null for the system root node).
- * @returns {FancytreeNode | null}
- */
- getParent: function() {
- // TODO: return null for top-level nodes?
- return this.parent;
- },
- /** Return an array of all parent nodes (top-down).
- * @param {boolean} [includeRoot=false] Include the invisible system root node.
- * @param {boolean} [includeSelf=false] Include the node itself.
- * @returns {FancytreeNode[]}
- */
- getParentList: function(includeRoot, includeSelf) {
- var l = [],
- dtn = includeSelf ? this : this.parent;
- while( dtn ) {
- if( includeRoot || dtn.parent ){
- l.unshift(dtn);
- }
- dtn = dtn.parent;
- }
- return l;
- },
- /** Return the predecessor node (under the same parent) or null.
- * @returns {FancytreeNode | null}
- */
- getPrevSibling: function() {
- if( this.parent ){
- var i, l,
- ac = this.parent.children;
- for(i=1, l=ac.length; i<l; i++){ // start with 1, so prev(first) = null
- if( ac[i] === this ){
- return ac[i-1];
- }
- }
- }
- return null;
- },
- /** Return true if node has children. Return undefined if not sure, i.e. the node is lazy and not yet loaded).
- * @returns {boolean | undefined}
- */
- hasChildren: function() {
- if(this.lazy){
- if(this.children == null ){
- // null or undefined: Not yet loaded
- return undefined;
- }else if(this.children.length === 0){
- // Loaded, but response was empty
- return false;
- }else if(this.children.length === 1 && this.children[0].isStatusNode() ){
- // Currently loading or load error
- return undefined;
- }
- return true;
- }
- return !!this.children;
- },
- /** Return true if node has keyboard focus.
- * @returns {boolean}
- */
- hasFocus: function() {
- return (this.tree.hasFocus() && this.tree.focusNode === this);
- },
- /** Write to browser console if debugLevel >= 1 (prepending node info)
- *
- * @param {*} msg string or object or array of such
- */
- info: function(msg){
- if( this.tree.options.debugLevel >= 1 ) {
- Array.prototype.unshift.call(arguments, this.toString());
- consoleApply("info", arguments);
- }
- },
- /** Return true if node is active (see also FancytreeNode#isSelected).
- * @returns {boolean}
- */
- isActive: function() {
- return (this.tree.activeNode === this);
- },
- /** Return true if node is a direct child of otherNode.
- * @param {FancytreeNode} otherNode
- * @returns {boolean}
- */
- isChildOf: function(otherNode) {
- return (this.parent && this.parent === otherNode);
- },
- /** Return true, if node is a direct or indirect sub node of otherNode.
- * @param {FancytreeNode} otherNode
- * @returns {boolean}
- */
- isDescendantOf: function(otherNode) {
- if(!otherNode || otherNode.tree !== this.tree){
- return false;
- }
- var p = this.parent;
- while( p ) {
- if( p === otherNode ){
- return true;
- }
- p = p.parent;
- }
- return false;
- },
- /** Return true if node is expanded.
- * @returns {boolean}
- */
- isExpanded: function() {
- return !!this.expanded;
- },
- /** Return true if node is the first node of its parent's children.
- * @returns {boolean}
- */
- isFirstSibling: function() {
- var p = this.parent;
- return !p || p.children[0] === this;
- },
- /** Return true if node is a folder, i.e. has the node.folder attribute set.
- * @returns {boolean}
- */
- isFolder: function() {
- return !!this.folder;
- },
- /** Return true if node is the last node of its parent's children.
- * @returns {boolean}
- */
- isLastSibling: function() {
- var p = this.parent;
- return !p || p.children[p.children.length-1] === this;
- },
- /** Return true if node is lazy (even if data was already loaded)
- * @returns {boolean}
- */
- isLazy: function() {
- return !!this.lazy;
- },
- /** Return true if node is lazy and loaded. For non-lazy nodes always return true.
- * @returns {boolean}
- */
- isLoaded: function() {
- return !this.lazy || this.hasChildren() !== undefined; // Also checks if the only child is a status node
- },
- /** Return true if children are currently beeing loaded, i.e. a Ajax request is pending.
- * @returns {boolean}
- */
- isLoading: function() {
- return !!this._isLoading;
- },
- /** Return true if this is the (invisible) system root node.
- * @returns {boolean}
- */
- isRoot: function() {
- return (this.tree.rootNode === this);
- },
- /** Return true if node is selected, i.e. has a checkmark set (see also FancytreeNode#isActive).
- * @returns {boolean}
- */
- isSelected: function() {
- return !!this.selected;
- },
- /** Return true if this node is a temporarily generated system node like
- * 'loading', or 'error' (node.statusNodeType contains the type).
- * @returns {boolean}
- */
- isStatusNode: function() {
- return !!this.statusNodeType;
- },
- /** Return true if node is lazy and not yet loaded. For non-lazy nodes always return false.
- * @returns {boolean}
- */
- isUndefined: function() {
- return this.hasChildren() === undefined; // also checks if the only child is a status node
- },
- /** Return true if all parent nodes are expanded. Note: this does not check
- * whether the node is scrolled into the visible part of the screen.
- * @returns {boolean}
- */
- isVisible: function() {
- var i, l,
- parents = this.getParentList(false, false);
- for(i=0, l=parents.length; i<l; i++){
- if( ! parents[i].expanded ){ return false; }
- }
- return true;
- },
- /** Deprecated.
- * @deprecated since 2014-02-16: use load() instead.
- */
- lazyLoad: function(discard) {
- this.warn("FancytreeNode.lazyLoad() is deprecated since 2014-02-16. Use .load() instead.");
- return this.load(discard);
- },
- /**
- * Load all children of a lazy node.
- * @param {boolean} [forceReload=false] Pass true to discard any existing nodes before.
- * @returns {$.Promise}
- */
- load: function(forceReload) {
- var res, source,
- that = this;
- _assert( this.isLazy(), "load() requires a lazy node" );
- _assert( forceReload || this.isUndefined(), "Pass forceReload=true to re-load a lazy node" );
- if( this.isLoaded() ){
- this.resetLazy(); // also collapses
- }
- // This method is also called by setExpanded() and loadKeyPath(), so we
- // have to avoid recursion.
- source = this.tree._triggerNodeEvent("lazyLoad", this);
- if( source === false ) { // #69
- return _getResolvedPromise(this);
- }
- _assert(typeof source !== "boolean", "lazyLoad event must return source in data.result");
- res = this.tree._callHook("nodeLoadChildren", this, source);
- if( this.expanded ) {
- res.always(function(){
- that.render();
- });
- }
- return res;
- },
- /** Expand all parents and optionally scroll into visible area as neccessary.
- * Promise is resolved, when lazy loading and animations are done.
- * @param {object} [opts] passed to `setExpanded()`.
- * Defaults to {noAnimation: false, noEvents: false, scrollIntoView: true}
- * @returns {$.Promise}
- */
- makeVisible: function(opts) {
- var i,
- that = this,
- deferreds = [],
- dfd = new $.Deferred(),
- parents = this.getParentList(false, false),
- len = parents.length,
- effects = !(opts && opts.noAnimation === true),
- scroll = !(opts && opts.scrollIntoView === false);
- // Expand bottom-up, so only the top node is animated
- for(i = len - 1; i >= 0; i--){
- // that.debug("pushexpand" + parents[i]);
- deferreds.push(parents[i].setExpanded(true, opts));
- }
- $.when.apply($, deferreds).done(function(){
- // All expands have finished
- // that.debug("expand DONE", scroll);
- if( scroll ){
- that.scrollIntoView(effects).done(function(){
- // that.debug("scroll DONE");
- dfd.resolve();
- });
- } else {
- dfd.resolve();
- }
- });
- return dfd.promise();
- },
- /** Move this node to targetNode.
- * @param {FancytreeNode} targetNode
- * @param {string} mode <pre>
- * 'child': append this node as last child of targetNode.
- * This is the default. To be compatble with the D'n'd
- * hitMode, we also accept 'over'.
- * 'before': add this node as sibling before targetNode.
- * 'after': add this node as sibling after targetNode.</pre>
- * @param {function} [map] optional callback(FancytreeNode) to allow modifcations
- */
- moveTo: function(targetNode, mode, map) {
- if(mode === undefined || mode === "over"){
- mode = "child";
- }
- var pos,
- prevParent = this.parent,
- targetParent = (mode === "child") ? targetNode : targetNode.parent;
- if(this === targetNode){
- return;
- }else if( !this.parent ){
- throw "Cannot move system root";
- }else if( targetParent.isDescendantOf(this) ){
- throw "Cannot move a node to its own descendant";
- }
- // Unlink this node from current parent
- if( this.parent.children.length === 1 ) {
- this.parent.children = this.parent.lazy ? [] : null;
- this.parent.expanded = false;
- } else {
- pos = $.inArray(this, this.parent.children);
- _assert(pos >= 0);
- this.parent.children.splice(pos, 1);
- }
- // Remove from source DOM parent
- // if(this.parent.ul){
- // this.parent.ul.removeChild(this.li);
- // }
- // Insert this node to target parent's child list
- this.parent = targetParent;
- if( targetParent.hasChildren() ) {
- switch(mode) {
- case "child":
- // Append to existing target children
- targetParent.children.push(this);
- break;
- case "before":
- // Insert this node before target node
- pos = $.inArray(targetNode, targetParent.children);
- _assert(pos >= 0);
- targetParent.children.splice(pos, 0, this);
- break;
- case "after":
- // Insert this node after target node
- pos = $.inArray(targetNode, targetParent.children);
- _assert(pos >= 0);
- targetParent.children.splice(pos+1, 0, this);
- break;
- default:
- throw "Invalid mode " + mode;
- }
- } else {
- targetParent.children = [ this ];
- }
- // Parent has no <ul> tag yet:
- // if( !targetParent.ul ) {
- // // This is the parent's first child: create UL tag
- // // (Hidden, because it will be
- // targetParent.ul = document.createElement("ul");
- // targetParent.ul.style.display = "none";
- // targetParent.li.appendChild(targetParent.ul);
- // }
- // // Issue 319: Add to target DOM parent (only if node was already rendered(expanded))
- // if(this.li){
- // targetParent.ul.appendChild(this.li);
- // }^
- // Let caller modify the nodes
- if( map ){
- targetNode.visit(map, true);
- }
- // Handle cross-tree moves
- if( this.tree !== targetNode.tree ) {
- // Fix node.tree for all source nodes
- // _assert(false, "Cross-tree move is not yet implemented.");
- this.warn("Cross-tree moveTo is experimantal!");
- this.visit(function(n){
- // TODO: fix selection state and activation, ...
- n.tree = targetNode.tree;
- }, true);
- }
- // A collaposed node won't re-render children, so we have to remove it manually
- // if( !targetParent.expanded ){
- // prevParent.ul.removeChild(this.li);
- // }
- // Update HTML markup
- if( !prevParent.isDescendantOf(targetParent)) {
- prevParent.render();
- }
- if( !targetParent.isDescendantOf(prevParent) && targetParent !== prevParent) {
- targetParent.render();
- }
- // TODO: fix selection state
- // TODO: fix active state
- /*
- var tree = this.tree;
- var opts = tree.options;
- var pers = tree.persistence;
- // Always expand, if it's below minExpandLevel
- // tree.logDebug ("%s._addChildNode(%o), l=%o", this, ftnode, ftnode.getLevel());
- if ( opts.minExpandLevel >= ftnode.getLevel() ) {
- // tree.logDebug ("Force expand for %o", ftnode);
- this.bExpanded = true;
- }
- // In multi-hier mode, update the parents selection state
- // DT issue #82: only if not initializing, because the children may not exist yet
- // if( !ftnode.data.isStatusNode() && opts.selectMode==3 && !isInitializing )
- // ftnode._fixSelectionState();
- // In multi-hier mode, update the parents selection state
- if( ftnode.bSelected && opts.selectMode==3 ) {
- var p = this;
- while( p ) {
- if( !p.hasSubSel )
- p._setSubSel(true);
- p = p.parent;
- }
- }
- // render this node and the new child
- if ( tree.bEnableUpdate )
- this.render();
- return ftnode;
- */
- },
- /** Set focus relative to this node and optionally activate.
- *
- * @param {number} where The keyCode that would normally trigger this move,
- * e.g. `$.ui.keyCode.LEFT` would collapse the node if it
- * is expanded or move to the parent oterwise.
- * @param {boolean} [activate=true]
- * @returns {$.Promise}
- */
- navigate: function(where, activate) {
- var i, parents,
- handled = true,
- KC = $.ui.keyCode,
- sib = null;
- // Navigate to node
- function _goto(n){
- if( n ){
- try { n.makeVisible(); } catch(e) {} // #272
- // Node may still be hidden by a filter
- if( ! $(n.span).is(":visible") ) {
- n.debug("Navigate: skipping hidden node");
- n.navigate(where, activate);
- return;
- }
- return activate === false ? n.setFocus() : n.setActive();
- }
- }
- switch( where ) {
- case KC.BACKSPACE:
- if( this.parent && this.parent.parent ) {
- _goto(this.parent);
- }
- break;
- case KC.LEFT:
- if( this.expanded ) {
- this.setExpanded(false);
- _goto(this);
- } else if( this.parent && this.parent.parent ) {
- _goto(this.parent);
- }
- break;
- case KC.RIGHT:
- if( !this.expanded && (this.children || this.lazy) ) {
- this.setExpanded();
- _goto(this);
- } else if( this.children && this.children.length ) {
- _goto(this.children[0]);
- }
- break;
- case KC.UP:
- sib = this.getPrevSibling();
- while( sib && sib.expanded && sib.children && sib.children.length ){
- sib = sib.children[sib.children.length - 1];
- }
- if( !sib && this.parent && this.parent.parent ){
- sib = this.parent;
- }
- _goto(sib);
- break;
- case KC.DOWN:
- if( this.expanded && this.children && this.children.length ) {
- sib = this.children[0];
- } else {
- parents = this.getParentList(false, true);
- for(i=parents.length-1; i>=0; i--) {
- sib = parents[i].getNextSibling();
- if( sib ){ break; }
- }
- }
- _goto(sib);
- break;
- default:
- handled = false;
- }
- },
- /**
- * Remove this node (not allowed for system root).
- */
- remove: function() {
- return this.parent.removeChild(this);
- },
- /**
- * Remove childNode from list of direct children.
- * @param {FancytreeNode} childNode
- */
- removeChild: function(childNode) {
- return this.tree._callHook("nodeRemoveChild", this, childNode);
- },
- /**
- * Remove all child nodes and descendents. This converts the node into a leaf.<br>
- * If this was a lazy node, it is still considered 'loaded'; call node.resetLazy()
- * in order to trigger lazyLoad on next expand.
- */
- removeChildren: function() {
- return this.tree._callHook("nodeRemoveChildren", this);
- },
- /**
- * This method renders and updates all HTML markup that is required
- * to display this node in its current state.<br>
- * Note:
- * <ul>
- * <li>It should only be neccessary to call this method after the node object
- * was modified by direct access to its properties, because the common
- * API methods (node.setTitle(), moveTo(), addChildren(), remove(), ...)
- * already handle this.
- * <li> {@link FancytreeNode#renderTitle} and {@link FancytreeNode#renderStatus}
- * are implied. If changes are more local, calling only renderTitle() or
- * renderStatus() may be sufficient and faster.
- * <li>If a node was created/removed, node.render() must be called <i>on the parent</i>.
- * </ul>
- *
- * @param {boolean} [force=false] re-render, even if html markup was already created
- * @param {boolean} [deep=false] also render all descendants, even if parent is collapsed
- */
- render: function(force, deep) {
- return this.tree._callHook("nodeRender", this, force, deep);
- },
- /** Create HTML markup for the node's outer <span> (expander, checkbox, icon, and title).
- * @see Fancytree_Hooks#nodeRenderTitle
- */
- renderTitle: function() {
- return this.tree._callHook("nodeRenderTitle", this);
- },
- /** Update element's CSS classes according to node state.
- * @see Fancytree_Hooks#nodeRenderStatus
- */
- renderStatus: function() {
- return this.tree._callHook("nodeRenderStatus", this);
- },
- /**
- * Remove all children, collapse, and set the lazy-flag, so that the lazyLoad
- * event is triggered on next expand.
- */
- resetLazy: function() {
- this.removeChildren();
- this.expanded = false;
- this.lazy = true;
- this.children = undefined;
- this.renderStatus();
- },
- /** Schedule activity for delayed execution (cancel any pending request).
- * scheduleAction('cancel') will only cancel a pending request (if any).
- * @param {string} mode
- * @param {number} ms
- */
- scheduleAction: function(mode, ms) {
- if( this.tree.timer ) {
- clearTimeout(this.tree.timer);
- // this.tree.debug("clearTimeout(%o)", this.tree.timer);
- }
- this.tree.timer = null;
- var self = this; // required for closures
- switch (mode) {
- case "cancel":
- // Simply made sure that timer was cleared
- break;
- case "expand":
- this.tree.timer = setTimeout(function(){
- self.tree.debug("setTimeout: trigger expand");
- self.setExpanded(true);
- }, ms);
- break;
- case "activate":
- this.tree.timer = setTimeout(function(){
- self.tree.debug("setTimeout: trigger activate");
- self.setActive(true);
- }, ms);
- break;
- default:
- throw "Invalid mode " + mode;
- }
- // this.tree.debug("setTimeout(%s, %s): %s", mode, ms, this.tree.timer);
- },
- /**
- *
- * @param {boolean | PlainObject} [effects=false] animation options.
- * @param {object} [options=null] {topNode: null, effects: ..., parent: ...} this node will remain visible in
- * any case, even if `this` is outside the scroll pane.
- * @returns {$.Promise}
- */
- scrollIntoView: function(effects, options) {
- if( options !== undefined && _isNode(options) ) {
- this.warn("scrollIntoView() with 'topNode' option is deprecated since 2014-05-08. Use 'options.topNode' instead.");
- options = {topNode: options};
- }
- // this.$scrollParent = (this.options.scrollParent === "auto") ? $ul.scrollParent() : $(this.options.scrollParent);
- // this.$scrollParent = this.$scrollParent.length ? this.$scrollParent || this.$container;
- var topNodeY, nodeY, horzScrollbarHeight, containerOffsetTop,
- opts = $.extend({
- effects: (effects === true) ? {duration: 200, queue: false} : effects,
- scrollOfs: this.tree.options.scrollOfs,
- scrollParent: this.tree.options.scrollParent || this.tree.$container,
- topNode: null
- }, options),
- dfd = new $.Deferred(),
- that = this,
- nodeHeight = $(this.span).height(),
- $container = $(opts.scrollParent),
- topOfs = opts.scrollOfs.top || 0,
- bottomOfs = opts.scrollOfs.bottom || 0,
- containerHeight = $container.height(),// - topOfs - bottomOfs,
- scrollTop = $container.scrollTop(),
- $animateTarget = $container,
- isParentWindow = $container[0] === window,
- topNode = opts.topNode || null,
- newScrollTop = null;
- // this.debug("scrollIntoView(), scrollTop=", scrollTop, opts.scrollOfs);
- _assert($(this.span).is(":visible"), "scrollIntoView node is invisible"); // otherwise we cannot calc offsets
- if( isParentWindow ) {
- nodeY = $(this.span).offset().top;
- topNodeY = topNode ? $(topNode.span).offset().top : 0;
- $animateTarget = $("html,body");
- } else {
- _assert($container[0] !== document && $container[0] !== document.body, "scrollParent should be an simple element or `window`, not document or body.");
- containerOffsetTop = $container.offset().top,
- nodeY = $(this.span).offset().top - containerOffsetTop + scrollTop; // relative to scroll parent
- topNodeY = topNode ? $(topNode.span).offset().top - containerOffsetTop + scrollTop : 0;
- horzScrollbarHeight = Math.max(0, ($container.innerHeight() - $container[0].clientHeight));
- containerHeight -= horzScrollbarHeight;
- }
- // this.debug(" scrollIntoView(), nodeY=", nodeY, "containerHeight=", containerHeight);
- if( nodeY < (scrollTop + topOfs) ){
- // Node is above visible container area
- newScrollTop = nodeY - topOfs;
- // this.debug(" scrollIntoView(), UPPER newScrollTop=", newScrollTop);
- }else if((nodeY + nodeHeight) > (scrollTop + containerHeight - bottomOfs)){
- newScrollTop = nodeY + nodeHeight - containerHeight + bottomOfs;
- // this.debug(" scrollIntoView(), LOWER newScrollTop=", newScrollTop);
- // If a topNode was passed, make sure that it is never scrolled
- // outside the upper border
- if(topNode){
- _assert($(topNode.span).is(":visible"));
- if( topNodeY < newScrollTop ){
- newScrollTop = topNodeY - topOfs;
- // this.debug(" scrollIntoView(), TOP newScrollTop=", newScrollTop);
- }
- }
- }
- if(newScrollTop !== null){
- // this.debug(" scrollIntoView(), SET newScrollTop=", newScrollTop);
- if(opts.effects){
- opts.effects.complete = function(){
- dfd.resolveWith(that);
- };
- $animateTarget.stop(true).animate({
- scrollTop: newScrollTop
- }, opts.effects);
- }else{
- $animateTarget[0].scrollTop = newScrollTop;
- dfd.resolveWith(this);
- }
- }else{
- dfd.resolveWith(this);
- }
- return dfd.promise();
- },
- /**Activate this node.
- * @param {boolean} [flag=true] pass false to deactivate
- * @param {object} [opts] additional options. Defaults to {noEvents: false}
- */
- setActive: function(flag, opts){
- return this.tree._callHook("nodeSetActive", this, flag, opts);
- },
- /**Expand or collapse this node. Promise is resolved, when lazy loading and animations are done.
- * @param {boolean} [flag=true] pass false to collapse
- * @param {object} [opts] additional options. Defaults to {noAnimation: false, noEvents: false}
- * @returns {$.Promise}
- */
- setExpanded: function(flag, opts){
- return this.tree._callHook("nodeSetExpanded", this, flag, opts);
- },
- /**Set keyboard focus to this node.
- * @param {boolean} [flag=true] pass false to blur
- * @see Fancytree#setFocus
- */
- setFocus: function(flag){
- return this.tree._callHook("nodeSetFocus", this, flag);
- },
- // TODO: setLazyNodeStatus
- /**Select this node, i.e. check the checkbox.
- * @param {boolean} [flag=true] pass false to deselect
- */
- setSelected: function(flag){
- return this.tree._callHook("nodeSetSelected", this, flag);
- },
- /**Rename this node.
- * @param {string} title
- */
- setTitle: function(title){
- this.title = title;
- this.renderTitle();
- },
- /**Sort child list by title.
- * @param {function} [cmp] custom compare function(a, b) that returns -1, 0, or 1 (defaults to sort by title).
- * @param {boolean} [deep=false] pass true to sort all descendant nodes
- */
- sortChildren: function(cmp, deep) {
- var i,l,
- cl = this.children;
- if( !cl ){
- return;
- }
- cmp = cmp || function(a, b) {
- var x = a.title.toLowerCase(),
- y = b.title.toLowerCase();
- return x === y ? 0 : x > y ? 1 : -1;
- };
- cl.sort(cmp);
- if( deep ){
- for(i=0, l=cl.length; i<l; i++){
- if( cl[i].children ){
- cl[i].sortChildren(cmp, "$norender$");
- }
- }
- }
- if( deep !== "$norender$" ){
- this.render();
- }
- },
- /** Convert node (or whole branch) into a plain object.
- *
- * The result is compatible with node.addChildren().
- *
- * @param {boolean} recursive
- * @param {function} callback callback(dict) is called for every node, in order to allow modifications
- * @returns {NodeData}
- */
- toDict: function(recursive, callback) {
- var i, l, node,
- dict = {},
- self = this;
- $.each(NODE_ATTRS, function(i, a){
- if(self[a] || self[a] === false){
- dict[a] = self[a];
- }
- });
- if(!$.isEmptyObject(this.data)){
- dict.data = $.extend({}, this.data);
- if($.isEmptyObject(dict.data)){
- delete dict.data;
- }
- }
- if( callback ){
- callback(dict);
- }
- if( recursive ) {
- if(this.hasChildren()){
- dict.children = [];
- for(i=0, l=this.children.length; i<l; i++ ){
- node = this.children[i];
- if( !node.isStatusNode() ){
- dict.children.push(node.toDict(true, callback));
- }
- }
- }else{
- // dict.children = null;
- }
- }
- return dict;
- },
- /** Flip expanded status. */
- toggleExpanded: function(){
- return this.tree._callHook("nodeToggleExpanded", this);
- },
- /** Flip selection status. */
- toggleSelected: function(){
- return this.tree._callHook("nodeToggleSelected", this);
- },
- toString: function() {
- return "<FancytreeNode(#" + this.key + ", '" + this.title + "')>";
- },
- /** Call fn(node) for all child nodes.<br>
- * Stop iteration, if fn() returns false. Skip current branch, if fn() returns "skip".<br>
- * Return false if iteration was stopped.
- *
- * @param {function} fn the callback function.
- * Return false to stop iteration, return "skip" to skip this node and children only.
- * @param {boolean} [includeSelf=false]
- * @returns {boolean}
- */
- visit: function(fn, includeSelf) {
- var i, l,
- res = true,
- children = this.children;
- if( includeSelf === true ) {
- res = fn(this);
- if( res === false || res === "skip" ){
- return res;
- }
- }
- if(children){
- for(i=0, l=children.length; i<l; i++){
- res = children[i].visit(fn, true);
- if( res === false ){
- break;
- }
- }
- }
- return res;
- },
- /** Call fn(node) for all parent nodes, bottom-up, including invisible system root.<br>
- * Stop iteration, if fn() returns false.<br>
- * Return false if iteration was stopped.
- *
- * @param {function} fn the callback function.
- * Return false to stop iteration, return "skip" to skip this node and children only.
- * @param {boolean} [includeSelf=false]
- * @returns {boolean}
- */
- visitParents: function(fn, includeSelf) {
- // Visit parent nodes (bottom up)
- if(includeSelf && fn(this) === false){
- return false;
- }
- var p = this.parent;
- while( p ) {
- if(fn(p) === false){
- return false;
- }
- p = p.parent;
- }
- return true;
- },
- /** Write warning to browser console (prepending node info)
- *
- * @param {*} msg string or object or array of such
- */
- warn: function(msg){
- Array.prototype.unshift.call(arguments, this.toString());
- consoleApply("warn", arguments);
- }
- };
- /* *****************************************************************************
- * Fancytree
- */
- /**
- * Construct a new tree object.
- *
- * @class Fancytree
- * @classdesc The controller behind a fancytree.
- * This class also contains 'hook methods': see {@link Fancytree_Hooks}.
- *
- * @param {Widget} widget
- *
- * @property {FancytreeOptions} options
- * @property {FancytreeNode} rootNode
- * @property {FancytreeNode} activeNode
- * @property {FancytreeNode} focusNode
- * @property {jQueryObject} $div
- * @property {object} widget
- * @property {object} ext
- * @property {object} data
- * @property {object} options
- * @property {string} _id
- * @property {string} statusClassPropName
- * @property {string} ariaPropName
- * @property {string} nodeContainerAttrName
- * @property {string} $container
- * @property {FancytreeNode} lastSelectedNode
- */
- function Fancytree(widget) {
- this.widget = widget;
- this.$div = widget.element;
- this.options = widget.options;
- if( this.options && $.isFunction(this.options.lazyload) ) {
- if( ! $.isFunction(this.options.lazyLoad ) ) {
- this.options.lazyLoad = function() {
- FT.warn("The 'lazyload' event is deprecated since 2014-02-25. Use 'lazyLoad' (with uppercase L) instead.");
- widget.options.lazyload.apply(this, arguments);
- };
- }
- }
- this.ext = {}; // Active extension instances
- // allow to init tree.data.foo from <div data-foo=''>
- this.data = _getElementDataAsDict(this.$div);
- this._id = $.ui.fancytree._nextId++;
- this._ns = ".fancytree-" + this._id; // append for namespaced events
- this.activeNode = null;
- this.focusNode = null;
- this._hasFocus = null;
- this.lastSelectedNode = null;
- this.systemFocusElement = null;
- this.statusClassPropName = "span";
- this.ariaPropName = "li";
- this.nodeContainerAttrName = "li";
- // Remove previous markup if any
- this.$div.find(">ul.fancytree-container").remove();
- // Create a node without parent.
- var fakeParent = { tree: this },
- $ul;
- this.rootNode = new FancytreeNode(fakeParent, {
- title: "root",
- key: "root_" + this._id,
- children: null,
- expanded: true
- });
- this.rootNode.parent = null;
- // Create root markup
- $ul = $("<ul>", {
- "class": "ui-fancytree fancytree-container"
- }).appendTo(this.$div);
- this.$container = $ul;
- this.rootNode.ul = $ul[0];
- if(this.options.debugLevel == null){
- this.options.debugLevel = FT.debugLevel;
- }
- // Add container to the TAB chain
- // See http://www.w3.org/TR/wai-aria-practices/#focus_activedescendant
- this.$container.attr("tabindex", this.options.tabbable ? "0" : "-1");
- if(this.options.aria){
- this.$container
- .attr("role", "tree")
- .attr("aria-multiselectable", true);
- }
- }
- Fancytree.prototype = /** @lends Fancytree# */{
- /* Return a context object that can be re-used for _callHook().
- * @param {Fancytree | FancytreeNode | EventData} obj
- * @param {Event} originalEvent
- * @param {Object} extra
- * @returns {EventData}
- */
- _makeHookContext: function(obj, originalEvent, extra) {
- var ctx, tree;
- if(obj.node !== undefined){
- // obj is already a context object
- if(originalEvent && obj.originalEvent !== originalEvent){
- $.error("invalid args");
- }
- ctx = obj;
- }else if(obj.tree){
- // obj is a FancytreeNode
- tree = obj.tree;
- ctx = { node: obj, tree: tree, widget: tree.widget, options: tree.widget.options, originalEvent: originalEvent };
- }else if(obj.widget){
- // obj is a Fancytree
- ctx = { node: null, tree: obj, widget: obj.widget, options: obj.widget.options, originalEvent: originalEvent };
- }else{
- $.error("invalid args");
- }
- if(extra){
- $.extend(ctx, extra);
- }
- return ctx;
- },
- /* Trigger a hook function: funcName(ctx, [...]).
- *
- * @param {string} funcName
- * @param {Fancytree|FancytreeNode|EventData} contextObject
- * @param {any} [_extraArgs] optional additional arguments
- * @returns {any}
- */
- _callHook: function(funcName, contextObject, _extraArgs) {
- var ctx = this._makeHookContext(contextObject),
- fn = this[funcName],
- args = Array.prototype.slice.call(arguments, 2);
- if(!$.isFunction(fn)){
- $.error("_callHook('" + funcName + "') is not a function");
- }
- args.unshift(ctx);
- // this.debug("_hook", funcName, ctx.node && ctx.node.toString() || ctx.tree.toString(), args);
- return fn.apply(this, args);
- },
- /* Check if current extensions dependencies are met and throw an error if not.
- *
- * This method may be called inside the `treeInit` hook for custom extensions.
- *
- * @param {string} extension name of the required extension
- * @param {boolean} [required=true] pass `false` if the extension is optional, but we want to check for order if it is present
- * @param {boolean} [before] `true` if `name` must be included before this, `false` otherwise (use `null` if order doesn't matter)
- * @param {string} [message] optional error message (defaults to a descriptve error message)
- */
- _requireExtension: function(name, required, before, message) {
- before = !!before;
- var thisName = this._local.name,
- extList = this.options.extensions,
- isBefore = $.inArray(name, extList) < $.inArray(thisName, extList),
- isMissing = required && this.ext[name] == null,
- badOrder = !isMissing && before != null && (before !== isBefore);
- _assert(thisName && thisName !== name);
- if( isMissing || badOrder ){
- if( !message ){
- if( isMissing || required ){
- message = "'" + thisName + "' extension requires '" + name + "'";
- if( badOrder ){
- message += " to be registered " + (before ? "before" : "after") + " itself";
- }
- }else{
- message = "If used together, `" + name + "` must be registered " + (before ? "before" : "after") + " `" + thisName + "`";
- }
- }
- $.error(message);
- return false;
- }
- return true;
- },
- /** Activate node with a given key and fire focus and activate events.
- *
- * A prevously activated node will be deactivated.
- * If activeVisible option is set, all parents will be expanded as necessary.
- * Pass key = false, to deactivate the current node only.
- * @param {string} key
- * @returns {FancytreeNode} activated node (null, if not found)
- */
- activateKey: function(key) {
- var node = this.getNodeByKey(key);
- if(node){
- node.setActive();
- }else if(this.activeNode){
- this.activeNode.setActive(false);
- }
- return node;
- },
- /** (experimental)
- *
- * @param {Array} patchList array of [key, NodePatch] arrays
- * @returns {$.Promise} resolved, when all patches have been applied
- * @see TreePatch
- */
- applyPatch: function(patchList) {
- var dfd, i, p2, key, patch, node,
- patchCount = patchList.length,
- deferredList = [];
- for(i=0; i<patchCount; i++){
- p2 = patchList[i];
- _assert(p2.length === 2, "patchList must be an array of length-2-arrays");
- key = p2[0];
- patch = p2[1];
- node = (key === null) ? this.rootNode : this.getNodeByKey(key);
- if(node){
- dfd = new $.Deferred();
- deferredList.push(dfd);
- node.applyPatch(patch).always(_makeResolveFunc(dfd, node));
- }else{
- this.warn("could not find node with key '" + key + "'");
- }
- }
- // Return a promise that is resovled, when ALL patches were applied
- return $.when.apply($, deferredList).promise();
- },
- /* TODO: implement in dnd extension
- cancelDrag: function() {
- var dd = $.ui.ddmanager.current;
- if(dd){
- dd.cancel();
- }
- },
- */
- /** Return the number of nodes.
- * @returns {integer}
- */
- count: function() {
- return this.rootNode.countChildren();
- },
- /** Write to browser console if debugLevel >= 2 (prepending tree name)
- *
- * @param {*} msg string or object or array of such
- */
- debug: function(msg){
- if( this.options.debugLevel >= 2 ) {
- Array.prototype.unshift.call(arguments, this.toString());
- consoleApply("debug", arguments);
- }
- },
- // TODO: disable()
- // TODO: enable()
- // TODO: enableUpdate()
- // TODO: fromDict
- /**
- * Generate INPUT elements that can be submitted with html forms.
- *
- * In selectMode 3 only the topmost selected nodes are considered.
- *
- * @param {boolean | string} [selected=true]
- * @param {boolean | string} [active=true]
- */
- generateFormElements: function(selected, active) {
- // TODO: test case
- var nodeList,
- selectedName = (selected !== false) ? "ft_" + this._id + "[]" : selected,
- activeName = (active !== false) ? "ft_" + this._id + "_active" : active,
- id = "fancytree_result_" + this._id,
- $result = $("#" + id);
- if($result.length){
- $result.empty();
- }else{
- $result = $("<div>", {
- id: id
- }).hide().insertAfter(this.$container);
- }
- if(selectedName){
- nodeList = this.getSelectedNodes( this.options.selectMode === 3 );
- $.each(nodeList, function(idx, node){
- $result.append($("<input>", {
- type: "checkbox",
- name: selectedName,
- value: node.key,
- checked: true
- }));
- });
- }
- if(activeName && this.activeNode){
- $result.append($("<input>", {
- type: "radio",
- name: activeName,
- value: this.activeNode.key,
- checked: true
- }));
- }
- },
- /**
- * Return the currently active node or null.
- * @returns {FancytreeNode}
- */
- getActiveNode: function() {
- return this.activeNode;
- },
- /** Return the first top level node if any (not the invisible root node).
- * @returns {FancytreeNode | null}
- */
- getFirstChild: function() {
- return this.rootNode.getFirstChild();
- },
- /**
- * Return node that has keyboard focus.
- * @param {boolean} [ifTreeHasFocus=false] (not yet implemented)
- * @returns {FancytreeNode}
- */
- getFocusNode: function(ifTreeHasFocus) {
- // TODO: implement ifTreeHasFocus
- return this.focusNode;
- },
- /**
- * Return node with a given key or null if not found.
- * @param {string} key
- * @param {FancytreeNode} [searchRoot] only search below this node
- * @returns {FancytreeNode | null}
- */
- getNodeByKey: function(key, searchRoot) {
- // Search the DOM by element ID (assuming this is faster than traversing all nodes).
- // $("#...") has problems, if the key contains '.', so we use getElementById()
- var el, match;
- if(!searchRoot){
- el = document.getElementById(this.options.idPrefix + key);
- if( el ){
- return el.ftnode ? el.ftnode : null;
- }
- }
- // Not found in the DOM, but still may be in an unrendered part of tree
- // TODO: optimize with specialized loop
- // TODO: consider keyMap?
- searchRoot = searchRoot || this.rootNode;
- match = null;
- searchRoot.visit(function(node){
- // window.console.log("getNodeByKey(" + key + "): ", node.key);
- if(node.key === key) {
- match = node;
- return false;
- }
- }, true);
- return match;
- },
- /** Return the invisible system root node.
- * @returns {FancytreeNode}
- */
- getRootNode: function() {
- return this.rootNode;
- },
- /**
- * Return an array of selected nodes.
- * @param {boolean} [stopOnParents=false] only return the topmost selected
- * node (useful with selectMode 3)
- * @returns {FancytreeNode[]}
- */
- getSelectedNodes: function(stopOnParents) {
- var nodeList = [];
- this.rootNode.visit(function(node){
- if( node.selected ) {
- nodeList.push(node);
- if( stopOnParents === true ){
- return "skip"; // stop processing this branch
- }
- }
- });
- return nodeList;
- },
- /** Return true if the tree control has keyboard focus
- * @returns {boolean}
- */
- hasFocus: function(){
- return !!this._hasFocus;
- },
- /** Write to browser console if debugLevel >= 1 (prepending tree name)
- * @param {*} msg string or object or array of such
- */
- info: function(msg){
- if( this.options.debugLevel >= 1 ) {
- Array.prototype.unshift.call(arguments, this.toString());
- consoleApply("info", arguments);
- }
- },
- /*
- TODO: isInitializing: function() {
- return ( this.phase=="init" || this.phase=="postInit" );
- },
- TODO: isReloading: function() {
- return ( this.phase=="init" || this.phase=="postInit" ) && this.options.persist && this.persistence.cookiesFound;
- },
- TODO: isUserEvent: function() {
- return ( this.phase=="userEvent" );
- },
- */
- /**
- * Make sure that a node with a given ID is loaded, by traversing - and
- * loading - its parents. This method is ment for lazy hierarchies.
- * A callback is executed for every node as we go.
- * @example
- * tree.loadKeyPath("/_3/_23/_26/_27", function(node, status){
- * if(status === "loaded") {
- * console.log("loaded intermiediate node " + node);
- * }else if(status === "ok") {
- * node.activate();
- * }
- * });
- *
- * @param {string | string[]} keyPathList one or more key paths (e.g. '/3/2_1/7')
- * @param {function} callback callback(node, status) is called for every visited node ('loading', 'loaded', 'ok', 'error')
- * @returns {$.Promise}
- */
- loadKeyPath: function(keyPathList, callback, _rootNode) {
- var deferredList, dfd, i, path, key, loadMap, node, segList,
- root = _rootNode || this.rootNode,
- sep = this.options.keyPathSeparator,
- self = this;
- if(!$.isArray(keyPathList)){
- keyPathList = [keyPathList];
- }
- // Pass 1: handle all path segments for nodes that are already loaded
- // Collect distinct top-most lazy nodes in a map
- loadMap = {};
- for(i=0; i<keyPathList.length; i++){
- path = keyPathList[i];
- // strip leading slash
- if(path.charAt(0) === sep){
- path = path.substr(1);
- }
- // traverse and strip keys, until we hit a lazy, unloaded node
- segList = path.split(sep);
- while(segList.length){
- key = segList.shift();
- // node = _findDirectChild(root, key);
- node = root._findDirectChild(key);
- if(!node){
- this.warn("loadKeyPath: key not found: " + key + " (parent: " + root + ")");
- callback.call(this, key, "error");
- break;
- }else if(segList.length === 0){
- callback.call(this, node, "ok");
- break;
- }else if(!node.lazy || (node.hasChildren() !== undefined )){
- callback.call(this, node, "loaded");
- root = node;
- }else{
- callback.call(this, node, "loaded");
- // segList.unshift(key);
- if(loadMap[key]){
- loadMap[key].push(segList.join(sep));
- }else{
- loadMap[key] = [segList.join(sep)];
- }
- break;
- }
- }
- }
- // alert("loadKeyPath: loadMap=" + JSON.stringify(loadMap));
- // Now load all lazy nodes and continue itearation for remaining paths
- deferredList = [];
- // Avoid jshint warning 'Don't make functions within a loop.':
- function __lazyload(key, node, dfd){
- callback.call(self, node, "loading");
- node.load().done(function(){
- self.loadKeyPath.call(self, loadMap[key], callback, node).always(_makeResolveFunc(dfd, self));
- }).fail(function(errMsg){
- self.warn("loadKeyPath: error loading: " + key + " (parent: " + root + ")");
- callback.call(self, node, "error");
- dfd.reject();
- });
- }
- for(key in loadMap){
- node = root._findDirectChild(key);
- // alert("loadKeyPath: lazy node(" + key + ") = " + node);
- dfd = new $.Deferred();
- deferredList.push(dfd);
- __lazyload(key, node, dfd);
- }
- // Return a promise that is resovled, when ALL paths were loaded
- return $.when.apply($, deferredList).promise();
- },
- /** Re-fire beforeActivate and activate events. */
- reactivate: function(setFocus) {
- var node = this.activeNode;
- if( node ) {
- this.activeNode = null; // Force re-activating
- node.setActive();
- if( setFocus ){
- node.setFocus();
- }
- }
- },
- /** Reload tree from source and return a promise.
- * @param [source] optional new source (defaults to initial source data)
- * @returns {$.Promise}
- */
- reload: function(source) {
- this._callHook("treeClear", this);
- return this._callHook("treeLoad", this, source);
- },
- /**Render tree (i.e. create DOM elements for all top-level nodes).
- * @param {boolean} [force=false] create DOM elemnts, even is parent is collapsed
- * @param {boolean} [deep=false]
- */
- render: function(force, deep) {
- return this.rootNode.render(force, deep);
- },
- // TODO: selectKey: function(key, select)
- // TODO: serializeArray: function(stopOnParents)
- /**
- * @param {boolean} [flag=true]
- */
- setFocus: function(flag) {
- return this._callHook("treeSetFocus", this, flag);
- },
- /**
- * Return all nodes as nested list of {@link NodeData}.
- *
- * @param {boolean} [includeRoot=false] Returns the hidden system root node (and its children)
- * @param {function} [callback(node)] Called for every node
- * @returns {Array | object}
- * @see FancytreeNode#toDict
- */
- toDict: function(includeRoot, callback){
- var res = this.rootNode.toDict(true, callback);
- return includeRoot ? res : res.children;
- },
- /* Implicitly called for string conversions.
- * @returns {string}
- */
- toString: function(){
- return "<Fancytree(#" + this._id + ")>";
- },
- /* _trigger a widget event with additional node ctx.
- * @see EventData
- */
- _triggerNodeEvent: function(type, node, originalEvent, extra) {
- // this.debug("_trigger(" + type + "): '" + ctx.node.title + "'", ctx);
- var ctx = this._makeHookContext(node, originalEvent, extra),
- res = this.widget._trigger(type, originalEvent, ctx);
- if(res !== false && ctx.result !== undefined){
- return ctx.result;
- }
- return res;
- },
- /* _trigger a widget event with additional tree data. */
- _triggerTreeEvent: function(type, originalEvent) {
- // this.debug("_trigger(" + type + ")", ctx);
- var ctx = this._makeHookContext(this, originalEvent),
- res = this.widget._trigger(type, originalEvent, ctx);
- if(res !== false && ctx.result !== undefined){
- return ctx.result;
- }
- return res;
- },
- /** Call fn(node) for all nodes.
- *
- * @param {function} fn the callback function.
- * Return false to stop iteration, return "skip" to skip this node and children only.
- * @returns {boolean} false, if the iterator was stopped.
- */
- visit: function(fn) {
- return this.rootNode.visit(fn, false);
- },
- /** Write warning to browser console (prepending tree info)
- *
- * @param {*} msg string or object or array of such
- */
- warn: function(msg){
- Array.prototype.unshift.call(arguments, this.toString());
- consoleApply("warn", arguments);
- }
- };
- /**
- * These additional methods of the {@link Fancytree} class are 'hook functions'
- * that can be used and overloaded by extensions.
- * (See <a href="https://github.com/mar10/fancytree/wiki/TutorialExtensions">writing extensions</a>.)
- * @mixin Fancytree_Hooks
- */
- $.extend(Fancytree.prototype,
- /** @lends Fancytree_Hooks# */
- {
- /** Default handling for mouse click events.
- *
- * @param {EventData} ctx
- */
- nodeClick: function(ctx) {
- // this.tree.logDebug("ftnode.onClick(" + event.type + "): ftnode:" + this + ", button:" + event.button + ", which: " + event.which);
- var activate, expand,
- event = ctx.originalEvent,
- targetType = ctx.targetType,
- node = ctx.node;
- // TODO: use switch
- // TODO: make sure clicks on embedded <input> doesn't steal focus (see table sample)
- if( targetType === "expander" ) {
- // Clicking the expander icon always expands/collapses
- this._callHook("nodeToggleExpanded", ctx);
- // this._callHook("nodeSetFocus", ctx, true); // DT issue 95
- } else if( targetType === "checkbox" ) {
- // Clicking the checkbox always (de)selects
- this._callHook("nodeToggleSelected", ctx);
- this._callHook("nodeSetFocus", ctx, true); // DT issue 95
- } else {
- // Honor `clickFolderMode` for
- expand = false;
- activate = true;
- if( node.folder ) {
- switch( ctx.options.clickFolderMode ) {
- case 2: // expand only
- expand = true;
- activate = false;
- break;
- case 3: // expand and activate
- activate = true;
- expand = true; //!node.isExpanded();
- break;
- // else 1 or 4: just activate
- }
- }
- if( activate ) {
- this.nodeSetFocus(ctx);
- this._callHook("nodeSetActive", ctx, true);
- }
- if( expand ) {
- if(!activate){
- // this._callHook("nodeSetFocus", ctx);
- }
- // this._callHook("nodeSetExpanded", ctx, true);
- this._callHook("nodeToggleExpanded", ctx);
- }
- }
- // Make sure that clicks stop, otherwise <a href='#'> jumps to the top
- if(event.target.localName === "a" && event.target.className === "fancytree-title"){
- event.preventDefault();
- }
- // TODO: return promise?
- },
- /** Collapse all other children of same parent.
- *
- * @param {EventData} ctx
- * @param {object} callOpts
- */
- nodeCollapseSiblings: function(ctx, callOpts) {
- // TODO: return promise?
- var ac, i, l,
- node = ctx.node;
- if( node.parent ){
- ac = node.parent.children;
- for (i=0, l=ac.length; i<l; i++) {
- if ( ac[i] !== node && ac[i].expanded ){
- this._callHook("nodeSetExpanded", ac[i], false, callOpts);
- }
- }
- }
- },
- /** Default handling for mouse douleclick events.
- * @param {EventData} ctx
- */
- nodeDblclick: function(ctx) {
- // TODO: return promise?
- if( ctx.targetType === "title" && ctx.options.clickFolderMode === 4) {
- // this.nodeSetFocus(ctx);
- // this._callHook("nodeSetActive", ctx, true);
- this._callHook("nodeToggleExpanded", ctx);
- }
- // TODO: prevent text selection on dblclicks
- if( ctx.targetType === "title" ) {
- ctx.originalEvent.preventDefault();
- }
- },
- /** Default handling for mouse keydown events.
- *
- * NOTE: this may be called with node == null if tree (but no node) has focus.
- * @param {EventData} ctx
- */
- nodeKeydown: function(ctx) {
- // TODO: return promise?
- var res,
- event = ctx.originalEvent,
- node = ctx.node,
- tree = ctx.tree,
- opts = ctx.options,
- handled = true,
- activate = !(event.ctrlKey || !opts.autoActivate ),
- KC = $.ui.keyCode;
- // node.debug("ftnode.nodeKeydown(" + event.type + "): ftnode:" + this + ", charCode:" + event.charCode + ", keyCode: " + event.keyCode + ", which: " + event.which);
- // Set focus to first node, if no other node has the focus yet
- if( !node ){
- this.rootNode.getFirstChild().setFocus();
- node = ctx.node = this.focusNode;
- node.debug("Keydown force focus on first node");
- }
- switch( event.which ) {
- // charCodes:
- case KC.NUMPAD_ADD: //107: // '+'
- case 187: // '+' @ Chrome, Safari
- tree.nodeSetExpanded(ctx, true);
- break;
- case KC.NUMPAD_SUBTRACT: // '-'
- case 189: // '-' @ Chrome, Safari
- tree.nodeSetExpanded(ctx, false);
- break;
- case KC.SPACE:
- if(opts.checkbox){
- tree.nodeToggleSelected(ctx);
- }else{
- tree.nodeSetActive(ctx, true);
- }
- break;
- case KC.ENTER:
- tree.nodeSetActive(ctx, true);
- break;
- case KC.BACKSPACE:
- case KC.LEFT:
- case KC.RIGHT:
- case KC.UP:
- case KC.DOWN:
- res = node.navigate(event.which, activate);
- break;
- default:
- handled = false;
- }
- if(handled){
- event.preventDefault();
- }
- },
- // /** Default handling for mouse keypress events. */
- // nodeKeypress: function(ctx) {
- // var event = ctx.originalEvent;
- // },
- // /** Trigger lazyLoad event (async). */
- // nodeLazyLoad: function(ctx) {
- // var node = ctx.node;
- // if(this._triggerNodeEvent())
- // },
- /** Load child nodes (async).
- *
- * @param {EventData} ctx
- * @param {object[]|object|string|$.Promise|function} source
- * @returns {$.Promise} The deferred will be resolved as soon as the (ajax)
- * data was rendered.
- */
- nodeLoadChildren: function(ctx, source) {
- var ajax, delay,
- tree = ctx.tree,
- node = ctx.node;
- if($.isFunction(source)){
- source = source();
- }
- // TOTHINK: move to 'ajax' extension?
- if(source.url){
- // `source` is an Ajax options object
- ajax = $.extend({}, ctx.options.ajax, source);
- if(ajax.debugDelay){
- // simulate a slow server
- delay = ajax.debugDelay;
- if($.isArray(delay)){ // random delay range [min..max]
- delay = delay[0] + Math.random() * (delay[1] - delay[0]);
- }
- node.debug("nodeLoadChildren waiting debug delay " + Math.round(delay) + "ms");
- ajax.debugDelay = false;
- source = $.Deferred(function (dfd) {
- setTimeout(function () {
- $.ajax(ajax)
- .done(function () { dfd.resolveWith(this, arguments); })
- .fail(function () { dfd.rejectWith(this, arguments); });
- }, delay);
- });
- }else{
- source = $.ajax(ajax);
- }
- // TODO: change 'pipe' to 'then' for jQuery 1.8
- // $.pipe returns a new Promise with filtered results
- source = source.pipe(function (data, textStatus, jqXHR) {
- var res;
- if(typeof data === "string"){
- $.error("Ajax request returned a string (did you get the JSON dataType wrong?).");
- }
- // postProcess is similar to the standard dataFilter hook,
- // but it is also called for JSONP
- if( ctx.options.postProcess ){
- res = tree._triggerNodeEvent("postProcess", ctx, ctx.originalEvent, {response: data, dataType: this.dataType});
- data = $.isArray(res) ? res : data;
- } else if (data && data.hasOwnProperty("d") && ctx.options.enableAspx ) {
- // Process ASPX WebMethod JSON object inside "d" property
- data = (typeof data.d === "string") ? $.parseJSON(data.d) : data.d;
- }
- return data;
- }, function (jqXHR, textStatus, errorThrown) {
- return tree._makeHookContext(node, null, {
- error: jqXHR,
- args: Array.prototype.slice.call(arguments),
- message: errorThrown,
- details: jqXHR.status + ": " + errorThrown
- });
- });
- }
- if($.isFunction(source.promise)){
- // `source` is a deferred, i.e. ajax request
- _assert(!node.isLoading());
- // node._isLoading = true;
- tree.nodeSetStatus(ctx, "loading");
- source.done(function () {
- tree.nodeSetStatus(ctx, "ok");
- }).fail(function(error){
- var ctxErr;
- if (error.node && error.error && error.message) {
- // error is already a context object
- ctxErr = error;
- } else {
- ctxErr = tree._makeHookContext(node, null, {
- error: error, // it can be jqXHR or any custom error
- args: Array.prototype.slice.call(arguments),
- message: error ? (error.message || error.toString()) : ""
- });
- }
- tree._triggerNodeEvent("loaderror", ctxErr, null);
- tree.nodeSetStatus(ctx, "error", ctxErr.message, ctxErr.details);
- });
- }
- // $.when(source) resolves also for non-deferreds
- return $.when(source).done(function(children){
- var metaData;
- if( $.isPlainObject(children) ){
- // We got {foo: 'abc', children: [...]}
- // Copy extra properties to tree.data.foo
- _assert($.isArray(children.children), "source must contain (or be) an array of children");
- _assert(node.isRoot(), "source may only be an object for root nodes");
- metaData = children;
- children = children.children;
- delete metaData.children;
- $.extend(tree.data, metaData);
- }
- _assert($.isArray(children), "expected array of children");
- node._setChildren(children);
- // trigger fancytreeloadchildren
- // if( node.parent ) {
- tree._triggerNodeEvent("loadChildren", node);
- // }
- // }).always(function(){
- // node._isLoading = false;
- });
- },
- /** [Not Implemented] */
- nodeLoadKeyPath: function(ctx, keyPathList) {
- // TODO: implement and improve
- // http://code.google.com/p/dynatree/issues/detail?id=222
- },
- /**
- * Remove a single direct child of ctx.node.
- * @param {EventData} ctx
- * @param {FancytreeNode} childNode dircect child of ctx.node
- */
- nodeRemoveChild: function(ctx, childNode) {
- var idx,
- node = ctx.node,
- opts = ctx.options,
- subCtx = $.extend({}, ctx, {node: childNode}),
- children = node.children;
- // FT.debug("nodeRemoveChild()", node.toString(), childNode.toString());
- if( children.length === 1 ) {
- _assert(childNode === children[0]);
- return this.nodeRemoveChildren(ctx);
- }
- if( this.activeNode && (childNode === this.activeNode || this.activeNode.isDescendantOf(childNode))){
- this.activeNode.setActive(false); // TODO: don't fire events
- }
- if( this.focusNode && (childNode === this.focusNode || this.focusNode.isDescendantOf(childNode))){
- this.focusNode = null;
- }
- // TODO: persist must take care to clear select and expand cookies
- this.nodeRemoveMarkup(subCtx);
- this.nodeRemoveChildren(subCtx);
- idx = $.inArray(childNode, children);
- _assert(idx >= 0);
- // Unlink to support GC
- childNode.visit(function(n){
- n.parent = null;
- }, true);
- this._callHook("treeRegisterNode", this, false, childNode);
- if ( opts.removeNode ){
- opts.removeNode.call(ctx.tree, {type: "removeNode"}, subCtx);
- }
- // remove from child list
- children.splice(idx, 1);
- },
- /**Remove HTML markup for all descendents of ctx.node.
- * @param {EventData} ctx
- */
- nodeRemoveChildMarkup: function(ctx) {
- var node = ctx.node;
- // FT.debug("nodeRemoveChildMarkup()", node.toString());
- // TODO: Unlink attr.ftnode to support GC
- if(node.ul){
- if( node.isRoot() ) {
- $(node.ul).empty();
- } else {
- $(node.ul).remove();
- node.ul = null;
- }
- node.visit(function(n){
- n.li = n.ul = null;
- });
- }
- },
- /**Remove all descendants of ctx.node.
- * @param {EventData} ctx
- */
- nodeRemoveChildren: function(ctx) {
- var subCtx,
- tree = ctx.tree,
- node = ctx.node,
- children = node.children,
- opts = ctx.options;
- // FT.debug("nodeRemoveChildren()", node.toString());
- if(!children){
- return;
- }
- if( this.activeNode && this.activeNode.isDescendantOf(node)){
- this.activeNode.setActive(false); // TODO: don't fire events
- }
- if( this.focusNode && this.focusNode.isDescendantOf(node)){
- this.focusNode = null;
- }
- // TODO: persist must take care to clear select and expand cookies
- this.nodeRemoveChildMarkup(ctx);
- // Unlink children to support GC
- // TODO: also delete this.children (not possible using visit())
- subCtx = $.extend({}, ctx);
- node.visit(function(n){
- n.parent = null;
- tree._callHook("treeRegisterNode", tree, false, n);
- if ( opts.removeNode ){
- subCtx.node = n;
- opts.removeNode.call(ctx.tree, {type: "removeNode"}, subCtx);
- }
- });
- if( node.lazy ){
- // 'undefined' would be interpreted as 'not yet loaded' for lazy nodes
- node.children = [];
- } else{
- node.children = null;
- }
- this.nodeRenderStatus(ctx);
- },
- /**Remove HTML markup for ctx.node and all its descendents.
- * @param {EventData} ctx
- */
- nodeRemoveMarkup: function(ctx) {
- var node = ctx.node;
- // FT.debug("nodeRemoveMarkup()", node.toString());
- // TODO: Unlink attr.ftnode to support GC
- if(node.li){
- $(node.li).remove();
- node.li = null;
- }
- this.nodeRemoveChildMarkup(ctx);
- },
- /**
- * Create `<li><span>..</span> .. </li>` tags for this node.
- *
- * This method takes care that all HTML markup is created that is required
- * to display this node in it's current state.
- *
- * Call this method to create new nodes, or after the strucuture
- * was changed (e.g. after moving this node or adding/removing children)
- * nodeRenderTitle() and nodeRenderStatus() are implied.
- *
- * Note: if a node was created/removed, nodeRender() must be called for the
- * parent.
- * <code>
- * <li id='KEY' ftnode=NODE>
- * <span class='fancytree-node fancytree-expanded fancytree-has-children fancytree-lastsib fancytree-exp-el fancytree-ico-e'>
- * <span class="fancytree-expander"></span>
- * <span class="fancytree-checkbox"></span> // only present in checkbox mode
- * <span class="fancytree-icon"></span>
- * <a href="#" class="fancytree-title"> Node 1 </a>
- * </span>
- * <ul> // only present if node has children
- * <li id='KEY' ftnode=NODE> child1 ... </li>
- * <li id='KEY' ftnode=NODE> child2 ... </li>
- * </ul>
- * </li>
- * </code>
- *
- * @param {EventData} ctx
- * @param {boolean} [force=false] re-render, even if html markup was already created
- * @param {boolean} [deep=false] also render all descendants, even if parent is collapsed
- * @param {boolean} [collapsed=false] force root node to be collapsed, so we can apply animated expand later
- */
- nodeRender: function(ctx, force, deep, collapsed, _recursive) {
- /* This method must take care of all cases where the current data mode
- * (i.e. node hierarchy) does not match the current markup.
- *
- * - node was not yet rendered:
- * create markup
- * - node was rendered: exit fast
- * - children have been added
- * - childern have been removed
- */
- var childLI, childNode1, childNode2, i, l, next, subCtx,
- node = ctx.node,
- tree = ctx.tree,
- opts = ctx.options,
- aria = opts.aria,
- firstTime = false,
- parent = node.parent,
- isRootNode = !parent,
- children = node.children;
- // FT.debug("nodeRender(" + !!force + ", " + !!deep + ")", node.toString());
- if( ! isRootNode && ! parent.ul ) {
- // Calling node.collapse on a deep, unrendered node
- return;
- }
- _assert(isRootNode || parent.ul, "parent UL must exist");
- // if(node.li && (force || (node.li.parentNode !== node.parent.ul) ) ){
- // if(node.li.parentNode !== node.parent.ul){
- // // alert("unlink " + node + " (must be child of " + node.parent + ")");
- // this.warn("unlink " + node + " (must be child of " + node.parent + ")");
- // }
- // // this.debug("nodeRemoveMarkup...");
- // this.nodeRemoveMarkup(ctx);
- // }
- // Render the node
- if( !isRootNode ){
- // Discard markup on force-mode, or if it is not linked to parent <ul>
- if(node.li && (force || (node.li.parentNode !== node.parent.ul) ) ){
- if(node.li.parentNode !== node.parent.ul){
- // alert("unlink " + node + " (must be child of " + node.parent + ")");
- this.warn("unlink " + node + " (must be child of " + node.parent + ")");
- }
- // this.debug("nodeRemoveMarkup...");
- this.nodeRemoveMarkup(ctx);
- }
- // Create <li><span /> </li>
- // node.debug("render...");
- if( !node.li ) {
- // node.debug("render... really");
- firstTime = true;
- node.li = document.createElement("li");
- node.li.ftnode = node;
- if(aria){
- // TODO: why doesn't this work:
- // node.li.role = "treeitem";
- // $(node.li).attr("role", "treeitem")
- // .attr("aria-labelledby", "ftal_" + node.key);
- }
- if( node.key && opts.generateIds ){
- node.li.id = opts.idPrefix + node.key;
- }
- node.span = document.createElement("span");
- node.span.className = "fancytree-node";
- if(aria){
- $(node.span).attr("aria-labelledby", "ftal_" + node.key);
- }
- node.li.appendChild(node.span);
- // Create inner HTML for the <span> (expander, checkbox, icon, and title)
- this.nodeRenderTitle(ctx);
- // Allow tweaking and binding, after node was created for the first time
- if ( opts.createNode ){
- opts.createNode.call(tree, {type: "createNode"}, ctx);
- }
- }else{
- // this.nodeRenderTitle(ctx);
- this.nodeRenderStatus(ctx);
- }
- // Allow tweaking after node state was rendered
- if ( opts.renderNode ){
- opts.renderNode.call(tree, {type: "renderNode"}, ctx);
- }
- }
- // Visit child nodes
- if( children ){
- if( isRootNode || node.expanded || deep === true ) {
- // Create a UL to hold the children
- if( !node.ul ){
- node.ul = document.createElement("ul");
- if((collapsed === true && !_recursive) || !node.expanded){
- // hide top UL, so we can use an animation to show it later
- node.ul.style.display = "none";
- }
- if(aria){
- $(node.ul).attr("role", "group");
- }
- if ( node.li ) { // issue #67
- node.li.appendChild(node.ul);
- } else {
- node.tree.$div.append(node.ul);
- }
- }
- // Add child markup
- for(i=0, l=children.length; i<l; i++) {
- subCtx = $.extend({}, ctx, {node: children[i]});
- this.nodeRender(subCtx, force, deep, false, true);
- }
- // Remove <li> if nodes have moved to another parent
- childLI = node.ul.firstChild;
- while( childLI ){
- childNode2 = childLI.ftnode;
- if( childNode2 && childNode2.parent !== node ) {
- node.debug("_fixParent: remove missing " + childNode2, childLI);
- next = childLI.nextSibling;
- childLI.parentNode.removeChild(childLI);
- childLI = next;
- }else{
- childLI = childLI.nextSibling;
- }
- }
- // Make sure, that <li> order matches node.children order.
- childLI = node.ul.firstChild;
- for(i=0, l=children.length-1; i<l; i++) {
- childNode1 = children[i];
- childNode2 = childLI.ftnode;
- if( childNode1 !== childNode2 ) {
- // node.debug("_fixOrder: mismatch at index " + i + ": " + childNode1 + " != " + childNode2);
- node.ul.insertBefore(childNode1.li, childNode2.li);
- } else {
- childLI = childLI.nextSibling;
- }
- }
- }
- }else{
- // No children: remove markup if any
- if( node.ul ){
- // alert("remove child markup for " + node);
- this.warn("remove child markup for " + node);
- this.nodeRemoveChildMarkup(ctx);
- }
- }
- if( !isRootNode ){
- // Update element classes according to node state
- // this.nodeRenderStatus(ctx);
- // Finally add the whole structure to the DOM, so the browser can render
- if(firstTime){
- parent.ul.appendChild(node.li);
- }
- }
- },
- /** Create HTML for the node's outer <span> (expander, checkbox, icon, and title).
- *
- * nodeRenderStatus() is implied.
- * @param {EventData} ctx
- * @param {string} [title] optinal new title
- */
- nodeRenderTitle: function(ctx, title) {
- // set node connector images, links and text
- var id, imageSrc, nodeTitle, role, tabindex, tooltip,
- node = ctx.node,
- tree = ctx.tree,
- opts = ctx.options,
- aria = opts.aria,
- level = node.getLevel(),
- ares = [],
- icon = node.data.icon;
- if(title !== undefined){
- node.title = title;
- }
- if(!node.span){
- // Silently bail out if node was not rendered yet, assuming
- // node.render() will be called as the node becomes visible
- return;
- }
- // connector (expanded, expandable or simple)
- // TODO: optiimize this if clause
- if( level < opts.minExpandLevel ) {
- if(level > 1){
- if(aria){
- ares.push("<span role='button' class='fancytree-expander'></span>");
- }else{
- ares.push("<span class='fancytree-expander'></span>");
- }
- }
- // .. else (i.e. for root level) skip expander/connector alltogether
- } else {
- if(aria){
- ares.push("<span role='button' class='fancytree-expander'></span>");
- }else{
- ares.push("<span class='fancytree-expander'></span>");
- }
- }
- // Checkbox mode
- if( opts.checkbox && node.hideCheckbox !== true && !node.isStatusNode() ) {
- if(aria){
- ares.push("<span role='checkbox' class='fancytree-checkbox'></span>");
- }else{
- ares.push("<span class='fancytree-checkbox'></span>");
- }
- }
- // folder or doctype icon
- role = aria ? " role='img'" : "";
- if ( icon && typeof icon === "string" ) {
- imageSrc = (icon.charAt(0) === "/") ? icon : ((opts.imagePath || "") + icon);
- ares.push("<img src='" + imageSrc + "' class='fancytree-icon' alt='' />");
- } else if ( node.data.iconclass ) {
- // TODO: review and test and document
- ares.push("<span " + role + " class='fancytree-custom-icon" + " " + node.data.iconclass + "'></span>");
- } else if ( icon === true || (icon !== false && opts.icons !== false) ) {
- // opts.icons defines the default behavior.
- // node.icon == true/false can override this
- ares.push("<span " + role + " class='fancytree-icon'></span>");
- }
- // node title
- nodeTitle = "";
- // TODO: currently undocumented; may be removed?
- if ( opts.renderTitle ){
- nodeTitle = opts.renderTitle.call(tree, {type: "renderTitle"}, ctx) || "";
- }
- if(!nodeTitle){
- tooltip = node.tooltip ? " title='" + FT.escapeHtml(node.tooltip) + "'" : "";
- id = aria ? " id='ftal_" + node.key + "'" : "";
- role = aria ? " role='treeitem'" : "";
- tabindex = opts.titlesTabbable ? " tabindex='0'" : "";
- nodeTitle = "<span " + role + " class='fancytree-title'" + id + tooltip + tabindex + " id='title"+ node.key + "'>" + node.title + "</span>";
- }
- ares.push(nodeTitle);
- // Note: this will trigger focusout, if node had the focus
- //$(node.span).html(ares.join("")); // it will cleanup the jQuery data currently associated with SPAN (if any), but it executes more slowly
- node.span.innerHTML = ares.join("");
- // Update CSS classes
- this.nodeRenderStatus(ctx);
- },
- /** Update element classes according to node state.
- * @param {EventData} ctx
- */
- nodeRenderStatus: function(ctx) {
- // Set classes for current status
- var node = ctx.node,
- tree = ctx.tree,
- opts = ctx.options,
- // nodeContainer = node[tree.nodeContainerAttrName],
- hasChildren = node.hasChildren(),
- isLastSib = node.isLastSibling(),
- aria = opts.aria,
- // $ariaElem = aria ? $(node[tree.ariaPropName]) : null,
- $ariaElem = $(node.span).find(".fancytree-title"),
- cn = opts._classNames,
- cnList = [],
- statusElem = node[tree.statusClassPropName];
- if( !statusElem ){
- // if this function is called for an unrendered node, ignore it (will be updated on nect render anyway)
- return;
- }
- // Build a list of class names that we will add to the node <span>
- cnList.push(cn.node);
- if( tree.activeNode === node ){
- cnList.push(cn.active);
- // $(">span.fancytree-title", statusElem).attr("tabindex", "0");
- // tree.$container.removeAttr("tabindex");
- // }else{
- // $(">span.fancytree-title", statusElem).removeAttr("tabindex");
- // tree.$container.attr("tabindex", "0");
- }
- if( tree.focusNode === node ){
- cnList.push(cn.focused);
- if(aria){
- // $(">span.fancytree-title", statusElem).attr("tabindex", "0");
- // $(">span.fancytree-title", statusElem).attr("tabindex", "-1");
- // TODO: is this the right element for this attribute?
- $ariaElem
- .attr("aria-activedescendant", true);
- // .attr("tabindex", "-1");
- }
- }else if(aria){
- // $(">span.fancytree-title", statusElem).attr("tabindex", "-1");
- $ariaElem
- .removeAttr("aria-activedescendant");
- // .removeAttr("tabindex");
- }
- if( node.expanded ){
- cnList.push(cn.expanded);
- if(aria){
- $ariaElem.attr("aria-expanded", true);
- }
- }else if(aria){
- $ariaElem.removeAttr("aria-expanded");
- }
- if( node.folder ){
- cnList.push(cn.folder);
- }
- if( hasChildren !== false ){
- cnList.push(cn.hasChildren);
- }
- // TODO: required?
- if( isLastSib ){
- cnList.push(cn.lastsib);
- }
- if( node.lazy && node.children == null ){
- cnList.push(cn.lazy);
- }
- if( node.partsel ){
- cnList.push(cn.partsel);
- }
- if( node._isLoading ){
- cnList.push(cn.loading);
- }
- if( node._error ){
- cnList.push(cn.error);
- }
- if( node.selected ){
- cnList.push(cn.selected);
- if(aria){
- $ariaElem.attr("aria-selected", true);
- }
- }else if(aria){
- $ariaElem.attr("aria-selected", false);
- }
- if( node.extraClasses ){
- cnList.push(node.extraClasses);
- }
- // IE6 doesn't correctly evaluate multiple class names,
- // so we create combined class names that can be used in the CSS
- if( hasChildren === false ){
- cnList.push(cn.combinedExpanderPrefix + "n" +
- (isLastSib ? "l" : "")
- );
- }else{
- cnList.push(cn.combinedExpanderPrefix +
- (node.expanded ? "e" : "c") +
- (node.lazy && node.children == null ? "d" : "") +
- (isLastSib ? "l" : "")
- );
- }
- cnList.push(cn.combinedIconPrefix +
- (node.expanded ? "e" : "c") +
- (node.folder ? "f" : "")
- );
- // node.span.className = cnList.join(" ");
- statusElem.className = cnList.join(" ");
- // TODO: we should not set this in the <span> tag also, if we set it here:
- // Maybe most (all) of the classes should be set in LI instead of SPAN?
- if(node.li){
- node.li.className = isLastSib ? cn.lastsib : "";
- }
- },
- /** Activate node.
- * flag defaults to true.
- * If flag is true, the node is activated (must be a synchronous operation)
- * If flag is false, the node is deactivated (must be a synchronous operation)
- * @param {EventData} ctx
- * @param {boolean} [flag=true]
- * @param {object} [opts] additional options. Defaults to {noEvents: false}
- */
- nodeSetActive: function(ctx, flag, callOpts) {
- // Handle user click / [space] / [enter], according to clickFolderMode.
- callOpts = callOpts || {};
- var subCtx,
- node = ctx.node,
- tree = ctx.tree,
- opts = ctx.options,
- noEvents = (callOpts.noEvents === true),
- isActive = (node === tree.activeNode);
- // flag defaults to true
- flag = (flag !== false);
- // node.debug("nodeSetActive", flag);
- if(isActive === flag){
- // Nothing to do
- return _getResolvedPromise(node);
- }else if(flag && !noEvents && this._triggerNodeEvent("beforeActivate", node, ctx.originalEvent) === false ){
- // Callback returned false
- return _getRejectedPromise(node, ["rejected"]);
- }
- if(flag){
- if(tree.activeNode){
- _assert(tree.activeNode !== node, "node was active (inconsistency)");
- subCtx = $.extend({}, ctx, {node: tree.activeNode});
- tree.nodeSetActive(subCtx, false);
- _assert(tree.activeNode === null, "deactivate was out of sync?");
- }
- if(opts.activeVisible){
- // tree.nodeMakeVisible(ctx);
- node.makeVisible({scrollIntoView: false}); // nodeSetFocus will scroll
- }
- tree.activeNode = node;
- tree.nodeRenderStatus(ctx);
- tree.nodeSetFocus(ctx);
- if( !noEvents ) {
- tree._triggerNodeEvent("activate", node, ctx.originalEvent);
- }
- }else{
- _assert(tree.activeNode === node, "node was not active (inconsistency)");
- tree.activeNode = null;
- this.nodeRenderStatus(ctx);
- if( !noEvents ) {
- ctx.tree._triggerNodeEvent("deactivate", node, ctx.originalEvent);
- }
- }
- },
- /** Expand or collapse node, return Deferred.promise.
- *
- * @param {EventData} ctx
- * @param {boolean} [flag=true]
- * @param {object} [opts] additional options. Defaults to {noAnimation: false, noEvents: false}
- * @returns {$.Promise} The deferred will be resolved as soon as the (lazy)
- * data was retrieved, rendered, and the expand animation finshed.
- */
- nodeSetExpanded: function(ctx, flag, callOpts) {
- callOpts = callOpts || {};
- var _afterLoad, dfd, i, l, parents, prevAC,
- node = ctx.node,
- tree = ctx.tree,
- opts = ctx.options,
- noAnimation = (callOpts.noAnimation === true),
- noEvents = (callOpts.noEvents === true);
- // flag defaults to true
- flag = (flag !== false);
- // node.debug("nodeSetExpanded(" + flag + ")");
- if((node.expanded && flag) || (!node.expanded && !flag)){
- // Nothing to do
- // node.debug("nodeSetExpanded(" + flag + "): nothing to do");
- return _getResolvedPromise(node);
- }else if(flag && !node.lazy && !node.hasChildren() ){
- // Prevent expanding of empty nodes
- // return _getRejectedPromise(node, ["empty"]);
- return _getResolvedPromise(node);
- }else if( !flag && node.getLevel() < opts.minExpandLevel ) {
- // Prevent collapsing locked levels
- return _getRejectedPromise(node, ["locked"]);
- }else if ( !noEvents && this._triggerNodeEvent("beforeExpand", node, ctx.originalEvent) === false ){
- // Callback returned false
- return _getRejectedPromise(node, ["rejected"]);
- }
- // If this node inside a collpased node, no animation and scrolling is needed
- if( !noAnimation && !node.isVisible() ) {
- noAnimation = callOpts.noAnimation = true;
- }
- dfd = new $.Deferred();
- // Auto-collapse mode: collapse all siblings
- if( flag && !node.expanded && opts.autoCollapse ) {
- parents = node.getParentList(false, true);
- prevAC = opts.autoCollapse;
- try{
- opts.autoCollapse = false;
- for(i=0, l=parents.length; i<l; i++){
- // TODO: should return promise?
- this._callHook("nodeCollapseSiblings", parents[i], callOpts);
- }
- }finally{
- opts.autoCollapse = prevAC;
- }
- }
- // Trigger expand/collapse after expanding
- dfd.done(function(){
- if( flag && opts.autoScroll && !noAnimation ) {
- // Scroll down to last child, but keep current node visible
- node.getLastChild().scrollIntoView(true, {topNode: node}).always(function(){
- if( !noEvents ) {
- ctx.tree._triggerNodeEvent(flag ? "expand" : "collapse", ctx);
- }
- });
- } else {
- if( !noEvents ) {
- ctx.tree._triggerNodeEvent(flag ? "expand" : "collapse", ctx);
- }
- }
- });
- // vvv Code below is executed after loading finished:
- _afterLoad = function(callback){
- var duration, easing, isVisible, isExpanded;
- node.expanded = flag;
- // Create required markup, but make sure the top UL is hidden, so we
- // can animate later
- tree._callHook("nodeRender", ctx, false, false, true);
- // If the currently active node is now hidden, deactivate it
- // if( opts.activeVisible && this.activeNode && ! this.activeNode.isVisible() ) {
- // this.activeNode.deactivate();
- // }
- // Expanding a lazy node: set 'loading...' and call callback
- // if( bExpand && this.data.isLazy && this.childList === null && !this._isLoading ) {
- // this._loadContent();
- // return;
- // }
- // Hide children, if node is collapsed
- if( node.ul ) {
- isVisible = (node.ul.style.display !== "none");
- isExpanded = !!node.expanded;
- if ( isVisible === isExpanded ) {
- node.warn("nodeSetExpanded: UL.style.display already set");
- } else if ( !opts.fx || noAnimation ) {
- node.ul.style.display = ( node.expanded || !parent ) ? "" : "none";
- } else {
- duration = opts.fx.duration || 200;
- easing = opts.fx.easing;
- // node.debug("nodeSetExpanded: animate start...");
- $(node.ul).animate(opts.fx, duration, easing, function(){
- // node.debug("nodeSetExpanded: animate done");
- callback();
- });
- return;
- }
- }
- callback();
- };
- // ^^^ Code above is executed after loading finshed.
- // Load lazy nodes, if any. Then continue with _afterLoad()
- if(flag && node.lazy && node.hasChildren() === undefined){
- // node.debug("nodeSetExpanded: load start...");
- node.load().done(function(){
- // node.debug("nodeSetExpanded: load done");
- if(dfd.notifyWith){ // requires jQuery 1.6+
- dfd.notifyWith(node, ["loaded"]);
- }
- _afterLoad(function () { dfd.resolveWith(node); });
- }).fail(function(errMsg){
- _afterLoad(function () { dfd.rejectWith(node, ["load failed (" + errMsg + ")"]); });
- });
- /*
- var source = tree._triggerNodeEvent("lazyLoad", node, ctx.originalEvent);
- _assert(typeof source !== "boolean", "lazyLoad event must return source in data.result");
- node.debug("nodeSetExpanded: load start...");
- this._callHook("nodeLoadChildren", ctx, source).done(function(){
- node.debug("nodeSetExpanded: load done");
- if(dfd.notifyWith){ // requires jQuery 1.6+
- dfd.notifyWith(node, ["loaded"]);
- }
- _afterLoad.call(tree);
- }).fail(function(errMsg){
- dfd.rejectWith(node, ["load failed (" + errMsg + ")"]);
- });
- */
- }else{
- _afterLoad(function () { dfd.resolveWith(node); });
- }
- // node.debug("nodeSetExpanded: returns");
- return dfd.promise();
- },
- /** Focus ot blur this node.
- * @param {EventData} ctx
- * @param {boolean} [flag=true]
- */
- nodeSetFocus: function(ctx, flag) {
- // ctx.node.debug("nodeSetFocus(" + flag + ")");
- var ctx2,
- tree = ctx.tree,
- node = ctx.node;
- flag = (flag !== false);
- // Blur previous node if any
- if(tree.focusNode){
- if(tree.focusNode === node && flag){
- // node.debug("nodeSetFocus(" + flag + "): nothing to do");
- return;
- }
- ctx2 = $.extend({}, ctx, {node: tree.focusNode});
- tree.focusNode = null;
- this._triggerNodeEvent("blur", ctx2);
- this._callHook("nodeRenderStatus", ctx2);
- }
- // Set focus to container and node
- if(flag){
- if( !this.hasFocus() ){
- node.debug("nodeSetFocus: forcing container focus");
- // Note: we pass _calledByNodeSetFocus=true
- this._callHook("treeSetFocus", ctx, true, true);
- }
- // this.nodeMakeVisible(ctx);
- node.makeVisible({scrollIntoView: false});
- tree.focusNode = node;
- // node.debug("FOCUS...");
- // $(node.span).find(".fancytree-title").focus();
- this._triggerNodeEvent("focus", ctx);
- // if(ctx.options.autoActivate){
- // tree.nodeSetActive(ctx, true);
- // }
- if(ctx.options.autoScroll){
- node.scrollIntoView();
- }
- this._callHook("nodeRenderStatus", ctx);
- }
- },
- /** (De)Select node, return new status (sync).
- *
- * @param {EventData} ctx
- * @param {boolean} [flag=true]
- */
- nodeSetSelected: function(ctx, flag) {
- var node = ctx.node,
- tree = ctx.tree,
- opts = ctx.options;
- // flag defaults to true
- flag = (flag !== false);
- node.debug("nodeSetSelected(" + flag + ")", ctx);
- if( node.unselectable){
- return;
- }
- // TODO: !!node.expanded is nicer, but doesn't pass jshint
- // https://github.com/jshint/jshint/issues/455
- // if( !!node.expanded === !!flag){
- if((node.selected && flag) || (!node.selected && !flag)){
- return !!node.selected;
- }else if ( this._triggerNodeEvent("beforeSelect", node, ctx.originalEvent) === false ){
- return !!node.selected;
- }
- if(flag && opts.selectMode === 1){
- // single selection mode
- if(tree.lastSelectedNode){
- tree.lastSelectedNode.setSelected(false);
- }
- }else if(opts.selectMode === 3){
- // multi.hier selection mode
- node.selected = flag;
- // this._fixSelectionState(node);
- node.fixSelection3AfterClick();
- }
- node.selected = flag;
- this.nodeRenderStatus(ctx);
- tree.lastSelectedNode = flag ? node : null;
- tree._triggerNodeEvent("select", ctx);
- },
- /** Show node status (ok, loading, error) using styles and a dummy child node.
- *
- * @param {EventData} ctx
- * @param status
- * @param message
- * @param details
- */
- nodeSetStatus: function(ctx, status, message, details) {
- var node = ctx.node,
- tree = ctx.tree;
- // cn = ctx.options._classNames;
- function _clearStatusNode() {
- // Remove dedicated dummy node, if any
- var firstChild = ( node.children ? node.children[0] : null );
- if ( firstChild && firstChild.isStatusNode() ) {
- try{
- // I've seen exceptions here with loadKeyPath...
- if(node.ul){
- node.ul.removeChild(firstChild.li);
- firstChild.li = null; // avoid leaks (DT issue 215)
- }
- }catch(e){}
- if( node.children.length === 1 ){
- node.children = [];
- }else{
- node.children.shift();
- }
- }
- }
- function _setStatusNode(data, type) {
- // Create/modify the dedicated dummy node for 'loading...' or
- // 'error!' status. (only called for direct child of the invisible
- // system root)
- var firstChild = ( node.children ? node.children[0] : null );
- if ( firstChild && firstChild.isStatusNode() ) {
- $.extend(firstChild, data);
- tree._callHook("nodeRender", firstChild);
- } else {
- data.key = "_statusNode";
- node._setChildren([data]);
- node.children[0].statusNodeType = type;
- tree.render();
- }
- return node.children[0];
- }
- switch( status ){
- case "ok":
- _clearStatusNode();
- // $(node.span).removeClass(cn.loading).removeClass(cn.error);
- node._isLoading = false;
- node._error = null;
- node.renderStatus();
- break;
- case "loading":
- // $(node.span).removeClass(cn.error).addClass(cn.loading);
- if( !node.parent ) {
- _setStatusNode({
- title: tree.options.strings.loading + (message ? " (" + message + ") " : ""),
- tooltip: details,
- extraClasses: "fancytree-statusnode-wait"
- }, status);
- }
- node._isLoading = true;
- node._error = null;
- node.renderStatus();
- break;
- case "error":
- // $(node.span).removeClass(cn.loading).addClass(cn.error);
- _setStatusNode({
- title: tree.options.strings.loadError + (message ? " (" + message + ") " : ""),
- tooltip: details,
- extraClasses: "fancytree-statusnode-error"
- }, status);
- node._isLoading = false;
- node._error = { message: message, details: details };
- node.renderStatus();
- break;
- default:
- $.error("invalid node status " + status);
- }
- },
- /**
- *
- * @param {EventData} ctx
- */
- nodeToggleExpanded: function(ctx) {
- return this.nodeSetExpanded(ctx, !ctx.node.expanded);
- },
- /**
- * @param {EventData} ctx
- */
- nodeToggleSelected: function(ctx) {
- return this.nodeSetSelected(ctx, !ctx.node.selected);
- },
- /** Remove all nodes.
- * @param {EventData} ctx
- */
- treeClear: function(ctx) {
- var tree = ctx.tree;
- tree.activeNode = null;
- tree.focusNode = null;
- tree.$div.find(">ul.fancytree-container").empty();
- // TODO: call destructors and remove reference loops
- tree.rootNode.children = null;
- },
- /** Widget was created (called only once, even it re-initialized).
- * @param {EventData} ctx
- */
- treeCreate: function(ctx) {
- },
- /** Widget was destroyed.
- * @param {EventData} ctx
- */
- treeDestroy: function(ctx) {
- },
- /** Widget was (re-)initialized.
- * @param {EventData} ctx
- */
- treeInit: function(ctx) {
- //this.debug("Fancytree.treeInit()");
- this.treeLoad(ctx);
- },
- /** Parse Fancytree from source, as configured in the options.
- * @param {EventData} ctx
- * @param {object} [source] optional new source (use last data otherwise)
- */
- treeLoad: function(ctx, source) {
- var type, $ul,
- tree = ctx.tree,
- $container = ctx.widget.element,
- dfd,
- // calling context for root node
- rootCtx = $.extend({}, ctx, {node: this.rootNode});
- if(tree.rootNode.children){
- this.treeClear(ctx);
- }
- source = source || this.options.source;
- if(!source){
- type = $container.data("type") || "html";
- switch(type){
- case "html":
- $ul = $container.find(">ul:first");
- $ul.addClass("ui-fancytree-source ui-helper-hidden");
- source = $.ui.fancytree.parseHtml($ul);
- // allow to init tree.data.foo from <ul data-foo=''>
- this.data = $.extend(this.data, _getElementDataAsDict($ul));
- break;
- case "json":
- // $().addClass("ui-helper-hidden");
- source = $.parseJSON($container.text());
- if(source.children){
- if(source.title){tree.title = source.title;}
- source = source.children;
- }
- break;
- default:
- $.error("Invalid data-type: " + type);
- }
- }else if(typeof source === "string"){
- // TODO: source is an element ID
- _raiseNotImplemented();
- }
- // $container.addClass("ui-widget ui-widget-content ui-corner-all");
- // Trigger fancytreeinit after nodes have been loaded
- dfd = this.nodeLoadChildren(rootCtx, source).done(function(){
- tree.render();
- if( ctx.options.selectMode === 3 ){
- tree.rootNode.fixSelection3FromEndNodes();
- }
- tree._triggerTreeEvent("init", true);
- }).fail(function(){
- tree.render();
- tree._triggerTreeEvent("init", false);
- });
- return dfd;
- },
- /** Node was inserted into or removed from the tree.
- * @param {EventData} ctx
- * @param {boolean} add
- * @param {FancytreeNode} node
- */
- treeRegisterNode: function(ctx, add, node) {
- },
- /** Widget got focus.
- * @param {EventData} ctx
- * @param {boolean} [flag=true]
- */
- treeSetFocus: function(ctx, flag, _calledByNodeSetFocus) {
- flag = (flag !== false);
- // this.debug("treeSetFocus(" + flag + "), _calledByNodeSetFocus: " + _calledByNodeSetFocus);
- // this.debug(" focusNode: " + this.focusNode);
- // this.debug(" activeNode: " + this.activeNode);
- if( flag !== this.hasFocus() ){
- this._hasFocus = flag;
- this.$container.toggleClass("fancytree-treefocus", flag);
- this._triggerTreeEvent(flag ? "focusTree" : "blurTree");
- }
- }
- });
- /* ******************************************************************************
- * jQuery UI widget boilerplate
- */
- /**
- * The plugin (derrived from <a href=" http://api.jqueryui.com/jQuery.widget/">jQuery.Widget</a>).<br>
- * This constructor is not called directly. Use `$(selector).fancytree({})`
- * to initialize the plugin instead.<br>
- * <pre class="sh_javascript sunlight-highlight-javascript">// Access widget methods and members:
- * var tree = $("#tree").fancytree("getTree");
- * var node = $("#tree").fancytree("getActiveNode", "1234");
- * </pre>
- *
- * @mixin Fancytree_Widget
- */
- $.widget("ui.fancytree",
- /** @lends Fancytree_Widget# */
- {
- /**These options will be used as defaults
- * @type {FancytreeOptions}
- */
- options:
- {
- activeVisible: true,
- ajax: {
- type: "GET",
- cache: false, // false: Append random '_' argument to the request url to prevent caching.
- // timeout: 0, // >0: Make sure we get an ajax error if server is unreachable
- dataType: "json" // Expect json format and pass json object to callbacks.
- }, //
- aria: false, // TODO: default to true
- autoActivate: true,
- autoCollapse: false,
- // autoFocus: false,
- autoScroll: false,
- checkbox: false,
- /**defines click behavior*/
- clickFolderMode: 4,
- debugLevel: null, // 0..2 (null: use global setting $.ui.fancytree.debugInfo)
- disabled: false, // TODO: required anymore?
- enableAspx: true, // TODO: document
- extensions: [],
- fx: { height: "toggle", duration: 200 },
- generateIds: false,
- icons: true,
- idPrefix: "ft_",
- keyboard: true,
- keyPathSeparator: "/",
- minExpandLevel: 1,
- scrollOfs: {top: 0, bottom: 0},
- scrollParent: null,
- selectMode: 2,
- strings: {
- loading: "Loading…",
- loadError: "Load error!"
- },
- tabbable: true,
- titlesTabbable: false,
- _classNames: {
- node: "fancytree-node",
- folder: "fancytree-folder",
- combinedExpanderPrefix: "fancytree-exp-",
- combinedIconPrefix: "fancytree-ico-",
- hasChildren: "fancytree-has-children",
- active: "fancytree-active",
- selected: "fancytree-selected",
- expanded: "fancytree-expanded",
- lazy: "fancytree-lazy",
- focused: "fancytree-focused",
- partsel: "fancytree-partsel",
- lastsib: "fancytree-lastsib",
- loading: "fancytree-loading",
- error: "fancytree-error"
- },
- // events
- lazyLoad: null,
- postProcess: null
- },
- /* Set up the widget, Called on first $().fancytree() */
- _create: function() {
- this.tree = new Fancytree(this);
- this.$source = this.source || this.element.data("type") === "json" ? this.element
- : this.element.find(">ul:first");
- // Subclass Fancytree instance with all enabled extensions
- var extension, extName, i,
- extensions = this.options.extensions,
- base = this.tree;
- for(i=0; i<extensions.length; i++){
- extName = extensions[i];
- extension = $.ui.fancytree._extensions[extName];
- if(!extension){
- $.error("Could not apply extension '" + extName + "' (it is not registered, did you forget to include it?)");
- }
- // Add extension options as tree.options.EXTENSION
- // _assert(!this.tree.options[extName], "Extension name must not exist as option name: " + extName);
- this.tree.options[extName] = $.extend(true, {}, extension.options, this.tree.options[extName]);
- // Add a namespace tree.ext.EXTENSION, to hold instance data
- _assert(this.tree.ext[extName] === undefined, "Extension name must not exist as Fancytree.ext attribute: '" + extName + "'");
- // this.tree[extName] = extension;
- this.tree.ext[extName] = {};
- // Subclass Fancytree methods using proxies.
- _subclassObject(this.tree, base, extension, extName);
- // current extension becomes base for the next extension
- base = extension;
- }
- //
- this.tree._callHook("treeCreate", this.tree);
- // Note: 'fancytreecreate' event is fired by widget base class
- // this.tree._triggerTreeEvent("create");
- },
- /* Called on every $().fancytree() */
- _init: function() {
- this.tree._callHook("treeInit", this.tree);
- // TODO: currently we call bind after treeInit, because treeInit
- // might change tree.$container.
- // It would be better, to move ebent binding into hooks altogether
- this._bind();
- },
- /* Use the _setOption method to respond to changes to options */
- _setOption: function(key, value) {
- var callDefault = true,
- rerender = false;
- switch( key ) {
- case "aria":
- case "checkbox":
- case "icons":
- case "minExpandLevel":
- case "tabbable":
- // case "nolink":
- this.tree._callHook("treeCreate", this.tree);
- rerender = true;
- break;
- case "source":
- callDefault = false;
- this.tree._callHook("treeLoad", this.tree, value);
- break;
- }
- this.tree.debug("set option " + key + "=" + value + " <" + typeof(value) + ">");
- if(callDefault){
- // In jQuery UI 1.8, you have to manually invoke the _setOption method from the base widget
- $.Widget.prototype._setOption.apply(this, arguments);
- // TODO: In jQuery UI 1.9 and above, you use the _super method instead
- // this._super( "_setOption", key, value );
- }
- if(rerender){
- this.tree.render(true, false); // force, not-deep
- }
- },
- /** Use the destroy method to clean up any modifications your widget has made to the DOM */
- destroy: function() {
- this._unbind();
- this.tree._callHook("treeDestroy", this.tree);
- // this.element.removeClass("ui-widget ui-widget-content ui-corner-all");
- this.tree.$div.find(">ul.fancytree-container").remove();
- this.$source && this.$source.removeClass("ui-helper-hidden");
- // In jQuery UI 1.8, you must invoke the destroy method from the base widget
- $.Widget.prototype.destroy.call(this);
- // TODO: delete tree and nodes to make garbage collect easier?
- // TODO: In jQuery UI 1.9 and above, you would define _destroy instead of destroy and not call the base method
- },
- // -------------------------------------------------------------------------
- /* Remove all event handlers for our namespace */
- _unbind: function() {
- var ns = this.tree._ns;
- this.element.unbind(ns);
- this.tree.$container.unbind(ns);
- $(document).unbind(ns);
- },
- /* Add mouse and kyboard handlers to the container */
- _bind: function() {
- var that = this,
- opts = this.options,
- tree = this.tree,
- ns = tree._ns
- // selstartEvent = ( $.support.selectstart ? "selectstart" : "mousedown" )
- ;
- // Remove all previuous handlers for this tree
- this._unbind();
- //alert("keydown" + ns + "foc=" + tree.hasFocus() + tree.$container);
- // tree.debug("bind events; container: ", tree.$container);
- tree.$container.on("focusin" + ns + " focusout" + ns, function(event){
- var node = FT.getNode(event),
- flag = (event.type === "focusin");
- // tree.debug("Tree container got event " + event.type, node, event);
- // tree.treeOnFocusInOut.call(tree, event);
- if(node){
- // For example clicking into an <input> that is part of a node
- tree._callHook("nodeSetFocus", node, flag);
- }else{
- tree._callHook("treeSetFocus", tree, flag);
- }
- }).on("selectstart" + ns, "span.fancytree-title", function(event){
- // prevent mouse-drags to select text ranges
- // tree.debug("<span title> got event " + event.type);
- event.preventDefault();
- }).on("keydown" + ns, function(event){
- // TODO: also bind keyup and keypress
- // tree.debug("got event " + event.type + ", hasFocus:" + tree.hasFocus());
- // if(opts.disabled || opts.keyboard === false || !tree.hasFocus() ){
- if(opts.disabled || opts.keyboard === false ){
- return true;
- }
- var res,
- node = tree.focusNode, // node may be null
- ctx = tree._makeHookContext(node || tree, event),
- prevPhase = tree.phase;
- try {
- tree.phase = "userEvent";
- // If a 'fancytreekeydown' handler returns false, skip the default
- // handling (implemented by tree.nodeKeydown()).
- if(node){
- res = tree._triggerNodeEvent("keydown", node, event);
- }else{
- res = tree._triggerTreeEvent("keydown", event);
- }
- if ( res === "preventNav" ){
- res = true; // prevent keyboard navigation, but don't prevent default handling of embedded input controls
- } else if ( res !== false ){
- res = tree._callHook("nodeKeydown", ctx);
- }
- return res;
- } finally {
- tree.phase = prevPhase;
- }
- }).on("click" + ns + " dblclick" + ns, function(event){
- if(opts.disabled){
- return true;
- }
- var ctx,
- et = FT.getEventTarget(event),
- node = et.node,
- tree = that.tree,
- prevPhase = tree.phase;
- if( !node ){
- return true; // Allow bubbling of other events
- }
- ctx = tree._makeHookContext(node, event);
- // that.tree.debug("event(" + event.type + "): node: ", node);
- try {
- tree.phase = "userEvent";
- switch(event.type) {
- case "click":
- ctx.targetType = et.type;
- return ( tree._triggerNodeEvent("click", ctx, event) === false ) ? false : tree._callHook("nodeClick", ctx);
- case "dblclick":
- ctx.targetType = et.type;
- return ( tree._triggerNodeEvent("dblclick", ctx, event) === false ) ? false : tree._callHook("nodeDblclick", ctx);
- }
- // } catch(e) {
- // // var _ = null; // DT issue 117 // TODO
- // $.error(e);
- } finally {
- tree.phase = prevPhase;
- }
- });
- },
- /** Return the active node or null.
- * @returns {FancytreeNode}
- */
- getActiveNode: function() {
- return this.tree.activeNode;
- },
- /** Return the matching node or null.
- * @param {string} key
- * @returns {FancytreeNode}
- */
- getNodeByKey: function(key) {
- return this.tree.getNodeByKey(key);
- },
- /** Return the invisible system root node.
- * @returns {FancytreeNode}
- */
- getRootNode: function() {
- return this.tree.rootNode;
- },
- /** Return the current tree instance.
- * @returns {Fancytree}
- */
- getTree: function() {
- return this.tree;
- }
- });
- // $.ui.fancytree was created by the widget factory. Create a local shortcut:
- FT = $.ui.fancytree;
- /**
- * Static members in the `$.ui.fancytree` namespace.<br>
- * <br>
- * <pre class="sh_javascript sunlight-highlight-javascript">// Access static members:
- * var node = $.ui.fancytree.getNode(element);
- * alert($.ui.fancytree.version);
- * </pre>
- *
- * @mixin Fancytree_Static
- */
- $.extend($.ui.fancytree,
- /** @lends Fancytree_Static# */
- {
- /** @type {string} */
- version: "2.2.0", // Set to semver by 'grunt release'
- /** @type {string} */
- buildType: "production", // Set to 'production' by 'grunt build'
- /** @type {int} */
- debugLevel: 1, // Set to 1 by 'grunt build'
- // Used by $.ui.fancytree.debug() and as default for tree.options.debugLevel
- _nextId: 1,
- _nextNodeKey: 1,
- _extensions: {},
- // focusTree: null,
- /** Expose class object as $.ui.fancytree._FancytreeClass */
- _FancytreeClass: Fancytree,
- /** Expose class object as $.ui.fancytree._FancytreeNodeClass */
- _FancytreeNodeClass: FancytreeNode,
- /* Feature checks to provide backwards compatibility */
- jquerySupports: {
- // http://jqueryui.com/upgrade-guide/1.9/#deprecated-offset-option-merged-into-my-and-at
- positionMyOfs: isVersionAtLeast($.ui.version, 1, 9)
- },
- /** Throw an error if condition fails (debug method).
- * @param {boolean} cond
- * @param {string} msg
- */
- assert: function(cond, msg){
- return _assert(cond, msg);
- },
- /** Return a function that executes *fn* at most every *timeout* ms.
- * @param {integer} timeout
- * @param {function} fn
- * @param {boolean} [invokeAsap=false]
- * @param {any} [ctx]
- */
- debounce : function(timeout, fn, invokeAsap, ctx) {
- var timer;
- if(arguments.length === 3 && typeof invokeAsap !== "boolean") {
- ctx = invokeAsap;
- invokeAsap = false;
- }
- return function() {
- var args = arguments;
- ctx = ctx || this;
- invokeAsap && !timer && fn.apply(ctx, args);
- clearTimeout(timer);
- timer = setTimeout(function() {
- invokeAsap || fn.apply(ctx, args);
- timer = null;
- }, timeout);
- };
- },
- /** Write message to console if debugLevel >= 2
- * @param {string} msg
- */
- debug: function(msg){
- /*jshint expr:true */
- ($.ui.fancytree.debugLevel >= 2) && consoleApply("log", arguments);
- },
- /** Write error message to console.
- * @param {string} msg
- */
- error: function(msg){
- consoleApply("error", arguments);
- },
- /** Convert <, >, &, ", ', / to the equivalent entitites.
- *
- * @param {string} s
- * @returns {string}
- */
- escapeHtml: function(s){
- return ("" + s).replace(/[&<>"'\/]/g, function (s) {
- return ENTITY_MAP[s];
- });
- },
- /** Inverse of escapeHtml().
- *
- * @param {string} s
- * @returns {string}
- */
- unescapeHtml: function(s){
- var e = document.createElement("div");
- e.innerHTML = s;
- return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
- },
- /** Return a {node: FancytreeNode, type: TYPE} object for a mouse event.
- *
- * @param {Event} event Mouse event, e.g. click, ...
- * @returns {string} 'title' | 'prefix' | 'expander' | 'checkbox' | 'icon' | undefined
- */
- getEventTargetType: function(event){
- return this.getEventTarget(event).type;
- },
- /** Return a {node: FancytreeNode, type: TYPE} object for a mouse event.
- *
- * @param {Event} event Mouse event, e.g. click, ...
- * @returns {object} Return a {node: FancytreeNode, type: TYPE} object
- * TYPE: 'title' | 'prefix' | 'expander' | 'checkbox' | 'icon' | undefined
- */
- getEventTarget: function(event){
- var tcn = event && event.target ? event.target.className : "",
- res = {node: this.getNode(event.target), type: undefined};
- // We use a fast version of $(res.node).hasClass()
- // See http://jsperf.com/test-for-classname/2
- if( /\bfancytree-title\b/.test(tcn) ){
- res.type = "title";
- }else if( /\bfancytree-expander\b/.test(tcn) ){
- res.type = (res.node.hasChildren() === false ? "prefix" : "expander");
- }else if( /\bfancytree-checkbox\b/.test(tcn) || /\bfancytree-radio\b/.test(tcn) ){
- res.type = "checkbox";
- }else if( /\bfancytree-icon\b/.test(tcn) ){
- res.type = "icon";
- }else if( /\bfancytree-node\b/.test(tcn) ){
- // Somewhere near the title
- res.type = "title";
- }else if( event && event.target && $(event.target).closest(".fancytree-title").length ) {
- // #228: clicking an embedded element inside a title
- res.type = "title";
- }
- return res;
- },
- /** Return a FancytreeNode instance from element.
- *
- * @param {Element | jQueryObject | Event} el
- * @returns {FancytreeNode} matching node or null
- */
- getNode: function(el){
- if(el instanceof FancytreeNode){
- return el; // el already was a FancytreeNode
- }else if(el.selector !== undefined){
- el = el[0]; // el was a jQuery object: use the DOM element
- }else if(el.originalEvent !== undefined){
- el = el.target; // el was an Event
- }
- while( el ) {
- if(el.ftnode) {
- return el.ftnode;
- }
- el = el.parentNode;
- }
- return null;
- },
- /* Return a Fancytree instance from element.
- * TODO: this function could help to get around the data('fancytree') / data('ui-fancytree') problem
- * @param {Element | jQueryObject | Event} el
- * @returns {Fancytree} matching tree or null
- * /
- getTree: function(el){
- if(el instanceof Fancytree){
- return el; // el already was a Fancytree
- }else if(el.selector !== undefined){
- el = el[0]; // el was a jQuery object: use the DOM element
- }else if(el.originalEvent !== undefined){
- el = el.target; // el was an Event
- }
- ...
- return null;
- },
- */
- /** Write message to console if debugLevel >= 1
- * @param {string} msg
- */
- info: function(msg){
- /*jshint expr:true */
- ($.ui.fancytree.debugLevel >= 1) && consoleApply("info", arguments);
- },
- /**
- * Parse tree data from HTML <ul> markup
- *
- * @param {jQueryObject} $ul
- * @returns {NodeData[]}
- */
- parseHtml: function($ul) {
- // TODO: understand this:
- /*jshint validthis:true */
- var extraClasses, i, l, iPos, tmp, tmp2, classes, className,
- $children = $ul.find(">li"),
- children = [];
- $children.each(function() {
- var allData,
- $li = $(this),
- $liSpan = $li.find(">span:first", this),
- $liA = $liSpan.length ? null : $li.find(">a:first"),
- d = { tooltip: null, data: {} };
- if( $liSpan.length ) {
- d.title = $liSpan.html();
- } else if( $liA && $liA.length ) {
- // If a <li><a> tag is specified, use it literally and extract href/target.
- d.title = $liA.html();
- d.data.href = $liA.attr("href");
- d.data.target = $liA.attr("target");
- d.tooltip = $liA.attr("title");
- } else {
- // If only a <li> tag is specified, use the trimmed string up to
- // the next child <ul> tag.
- d.title = $li.html();
- iPos = d.title.search(/<ul/i);
- if( iPos >= 0 ){
- d.title = d.title.substring(0, iPos);
- }
- }
- d.title = $.trim(d.title);
- // Make sure all fields exist
- for(i=0, l=CLASS_ATTRS.length; i<l; i++){
- d[CLASS_ATTRS[i]] = undefined;
- }
- // Initialize to `true`, if class is set and collect extraClasses
- classes = this.className.split(" ");
- extraClasses = [];
- for(i=0, l=classes.length; i<l; i++){
- className = classes[i];
- if(CLASS_ATTR_MAP[className]){
- d[className] = true;
- }else{
- extraClasses.push(className);
- }
- }
- d.extraClasses = extraClasses.join(" ");
- // Parse node options from ID, title and class attributes
- tmp = $li.attr("title");
- if( tmp ){
- d.tooltip = tmp; // overrides <a title='...'>
- }
- tmp = $li.attr("id");
- if( tmp ){
- d.key = tmp;
- }
- // Add <li data-NAME='...'> as node.data.NAME
- allData = _getElementDataAsDict($li);
- if(allData && !$.isEmptyObject(allData)) {
- // #56: Allow to set special node.attributes from data-...
- for(i=0, l=NODE_ATTRS.length; i<l; i++){
- tmp = NODE_ATTRS[i];
- tmp2 = allData[tmp];
- if( tmp2 != null ) {
- delete allData[tmp];
- d[tmp] = tmp2;
- }
- }
- // All other data-... goes to node.data...
- $.extend(d.data, allData);
- }
- // Recursive reading of child nodes, if LI tag contains an UL tag
- $ul = $li.find(">ul:first");
- if( $ul.length ) {
- d.children = $.ui.fancytree.parseHtml($ul);
- }else{
- d.children = d.lazy ? undefined : null;
- }
- children.push(d);
- // FT.debug("parse ", d, children);
- });
- return children;
- },
- /** Add Fancytree extension definition to the list of globally available extensions.
- *
- * @param {object} definition
- */
- registerExtension: function(definition){
- _assert(definition.name != null, "extensions must have a `name` property.");
- _assert(definition.version != null, "extensions must have a `version` property.");
- $.ui.fancytree._extensions[definition.name] = definition;
- },
- /** Write warning message to console.
- * @param {string} msg
- */
- warn: function(msg){
- consoleApply("warn", arguments);
- }
- });
- }(jQuery, window, document));
|