From 7baed0ae6efb930b6e55b2efb7a53f2ea6c05b50 Mon Sep 17 00:00:00 2001 From: Nitecube Date: Mon, 4 Dec 2017 21:10:24 +0900 Subject: [PATCH] jquery.fancytree: add methods for Fancytree. fixes FancytreeOptions and NodeData --- types/jquery.fancytree/index.d.ts | 50 ++++++++++++++++++- .../jquery.fancytree-tests.ts | 36 +++++++++++-- 2 files changed, 81 insertions(+), 5 deletions(-) diff --git a/types/jquery.fancytree/index.d.ts b/types/jquery.fancytree/index.d.ts index 34d90d9e8f..9c793a2c19 100644 --- a/types/jquery.fancytree/index.d.ts +++ b/types/jquery.fancytree/index.d.ts @@ -2,6 +2,7 @@ // Project: https://github.com/mar10/fancytree // Definitions by: Peter Palotas // Mahdi Abedi +// Nitecube // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.3 @@ -93,6 +94,12 @@ declare namespace Fancytree { */ findNextNode(match: (node: FancytreeNode) => boolean, startNode?: FancytreeNode): FancytreeNode; + /** Find all nodes that matches condition. + * + * @returns array of nodes (may be empty) + */ + findAll(match: string|((node: FancytreeNode) => boolean|undefined)): FancytreeNode[]; + /** Generate INPUT elements that can be submitted with html forms. In selectMode 3 only the topmost selected nodes are considered. */ generateFormElements(selected?: boolean, active?: boolean): void; @@ -283,6 +290,11 @@ declare namespace Fancytree { addChildren(child: Fancytree.NodeData, insertBefore?: number): FancytreeNode; + /** Add class to node's span tag and to .extraClasses. + * @param className class name + */ + addClass(className: string): void; + /** Append or prepend a node, or append a child node. This a convenience function that calls addChildren() * * @param mode 'before', 'after', 'firstChild', or 'child' ('over' is a synonym for 'child') (default='child') @@ -508,6 +520,11 @@ declare namespace Fancytree { */ removeChildren(): void; + /** Remove class from node's span tag and .extraClasses. + * @param className class name + */ + removeClass(className: string): void; + /** This method renders and updates all HTML markup that is required to display this node in its current state. * * @param force re-render, even if html markup was already created @@ -594,6 +611,13 @@ declare namespace Fancytree { */ toDict(recursive?: boolean, callback?: (dict: NodeData) => void): NodeData; + /** Set, clear, or toggle class of node's span tag and .extraClasses. + * @param {string} className class name (separate multiple classes by space) + * @param {boolean} [flag] true/false to add/remove class. If omitted, class is toggled. + * @return true if a class was added + */ + toggleClass(className: string, flag?: boolean): boolean; + /** Flip expanded status. */ toggleExpanded(): void; @@ -747,7 +771,7 @@ declare namespace Fancytree { /** Scroll node into visible area, when focused by keyboard (default: false). */ autoScroll?: boolean; /** Display checkboxes to allow selection (default: false) */ - checkbox?: boolean; + checkbox?: boolean|string|((event: JQueryEventObject, data: EventData) => boolean); /** Defines what happens, when the user click a folder node. (default: activate_dblclick_expands) */ clickFolderMode?: FancytreeClickFolderMode; /** 0..2 (null: use global setting $.ui.fancytree.debugInfo) */ @@ -792,13 +816,20 @@ declare namespace Fancytree { titlesTabbable?: boolean; /** Animation options, false:off (default: { effect: "blind", options: {direction: "vertical", scale: "box"}, duration: 200 }) */ toggleEffect?: JQueryUI.EffectOptions; + + /** (dynamic Option)Prevent (de-)selection using mouse or keyboard. */ + unselectable?: boolean|((event: JQueryEventObject, data: Fancytree.EventData) => boolean|undefined); + /** (dynamic Option)Ignore this node when calculating the partsel status of parent nodes in selectMode 3 propagation. */ + unselectableIgnore?: boolean|((event: JQueryEventObject, data: Fancytree.EventData) => boolean|undefined); + /** (dynamic Option)Use this as constant selected value (overriding selectMode 3 propagation). */ + unselectableStatus?: boolean|((event: JQueryEventObject, data: Fancytree.EventData) => boolean|undefined); } /** Data object passed to FancytreeNode() constructor. Note: typically these attributes are accessed by meber methods, e.g. `node.isExpanded()` and `node.setSelected(false)`. */ interface NodeData { /** node text (may contain HTML tags) */ title: string; - icon?: string; + icon?: boolean|string; /** unique key for this node (auto-generated if omitted) */ key?: string; /** (reserved) */ @@ -820,6 +851,21 @@ declare namespace Fancytree { extraClasses?: string; /** all properties from will be copied to `node.data` */ data?: Object; + + /** Will be added as title attribute of the node's icon span,thus enabling a tooltip. */ + iconTooltip?: string; + + /** If set, make this node a status node. Values: 'error', 'loading', 'nodata', 'paging'. */ + statusNodeType?: string; + + /** Made available as node.type. */ + type?: string; + + /** Ignore this node when calculating the partsel status of parent nodes in selectMode 3 propagation. */ + unselectableIgnore?: boolean; + + /** Use this as constant selected value(overriding selectMode 3 propagation). */ + unselectableStatus?: boolean; } /** Data object similar to NodeData, but with additional options. diff --git a/types/jquery.fancytree/jquery.fancytree-tests.ts b/types/jquery.fancytree/jquery.fancytree-tests.ts index 4fa52c790a..de1489de42 100644 --- a/types/jquery.fancytree/jquery.fancytree-tests.ts +++ b/types/jquery.fancytree/jquery.fancytree-tests.ts @@ -13,7 +13,8 @@ $("#tree").fancytree({ { title: "Folder 2", key: "2", folder: true, children: [ { title: "Node 2.1", key: "3" }, - { title: "Node 2.2", key: "4" } + { title: "Node 2.2", key: "4" }, + { title: "NOde 2.3", key: "5", icon: "./icon.svg", checkbox: "radio"} ] } ] @@ -24,7 +25,7 @@ $("#tree").fancytree({ click: (ev: JQueryEventObject, node: Fancytree.EventData) => { return true; }, - checkbox: true, + checkbox: "radio",//boolean or "radio" expand: () => { console.log("expanded"); }, @@ -38,8 +39,14 @@ $("#tree").fancytree({ if (data.node.isFolder()) { return false; } + }, + unselectable: function (event, data) { + return true; + }, + unselectableIgnore: false, + unselectableStatus: function (event, data) { + return false; } - }); //$("#tree").fancytree(); @@ -91,3 +98,26 @@ alert("We have " + tree.count() + " nodes."); // Use the API node.setTitle("New title"); + +// add/remove/toggle class +activeNode.addClass("test-class"); +activeNode.removeClass("test-class"); +activeNode.toggleClass("test-class"); +activeNode.toggleClass("test-class", true); + +// Fancytree.findAll() +var nodes: Fancytree.FancytreeNode[]; +nodes = tree.findAll((node) => { + return true; +}); +nodes = tree.findAll("Node"); + +node.addChildren({ + title: "New Node", + key: "15", + type: "book", + iconTooltip: "Icon toolip", + statusNodeType: "loading", + unselectableIgnore: true, + unselectableStatus: false, +}, 0); \ No newline at end of file