Adding indexmenu version 2024-01-05 (ed06f21).
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
parent
92cc8375f2
commit
f339727d60
GPG key ID:
FBB4F0E80A80222F
766 changed files with 83299 additions and 0 deletions
|
|
@ -0,0 +1,714 @@
|
|||
/*!
|
||||
* jquery.fancytree.ariagrid.js
|
||||
*
|
||||
* Support ARIA compliant markup and keyboard navigation for tree grids with
|
||||
* embedded input controls.
|
||||
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
|
||||
*
|
||||
* @requires ext-table
|
||||
*
|
||||
* Copyright (c) 2008-2023, Martin Wendt (https://wwWendt.de)
|
||||
*
|
||||
* Released under the MIT license
|
||||
* https://github.com/mar10/fancytree/wiki/LicenseInfo
|
||||
*
|
||||
* @version 2.38.3
|
||||
* @date 2023-02-01T20:52:50Z
|
||||
*/
|
||||
|
||||
(function (factory) {
|
||||
if (typeof define === "function" && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define([
|
||||
"jquery",
|
||||
"./jquery.fancytree",
|
||||
"./jquery.fancytree.table",
|
||||
], factory);
|
||||
} else if (typeof module === "object" && module.exports) {
|
||||
// Node/CommonJS
|
||||
require("./jquery.fancytree.table"); // core + table
|
||||
module.exports = factory(require("jquery"));
|
||||
} else {
|
||||
// Browser globals
|
||||
factory(jQuery);
|
||||
}
|
||||
})(function ($) {
|
||||
"use strict";
|
||||
|
||||
/*******************************************************************************
|
||||
* Private functions and variables
|
||||
*/
|
||||
|
||||
// Allow these navigation keys even when input controls are focused
|
||||
|
||||
var FT = $.ui.fancytree,
|
||||
clsFancytreeActiveCell = "fancytree-active-cell",
|
||||
clsFancytreeCellMode = "fancytree-cell-mode",
|
||||
clsFancytreeCellNavMode = "fancytree-cell-nav-mode",
|
||||
VALID_MODES = ["allow", "force", "start", "off"],
|
||||
// Define which keys are handled by embedded <input> control, and should
|
||||
// *not* be passed to tree navigation handler in cell-edit mode:
|
||||
INPUT_KEYS = {
|
||||
text: ["left", "right", "home", "end", "backspace"],
|
||||
number: ["up", "down", "left", "right", "home", "end", "backspace"],
|
||||
checkbox: [],
|
||||
link: [],
|
||||
radiobutton: ["up", "down"],
|
||||
"select-one": ["up", "down"],
|
||||
"select-multiple": ["up", "down"],
|
||||
},
|
||||
NAV_KEYS = ["up", "down", "left", "right", "home", "end"];
|
||||
|
||||
/* Set aria-activedescendant on container to active cell's ID (generate one if required).*/
|
||||
function setActiveDescendant(tree, $target) {
|
||||
var id = $target ? $target.uniqueId().attr("id") : "";
|
||||
|
||||
tree.$container.attr("aria-activedescendant", id);
|
||||
}
|
||||
|
||||
/* Calculate TD column index (considering colspans).*/
|
||||
function getColIdx($tr, $td) {
|
||||
var colspan,
|
||||
td = $td.get(0),
|
||||
idx = 0;
|
||||
|
||||
$tr.children().each(function () {
|
||||
if (this === td) {
|
||||
return false;
|
||||
}
|
||||
colspan = $(this).prop("colspan");
|
||||
idx += colspan ? colspan : 1;
|
||||
});
|
||||
return idx;
|
||||
}
|
||||
|
||||
/* Find TD at given column index (considering colspans).*/
|
||||
function findTdAtColIdx($tr, colIdx) {
|
||||
var colspan,
|
||||
res = null,
|
||||
idx = 0;
|
||||
|
||||
$tr.children().each(function () {
|
||||
if (idx >= colIdx) {
|
||||
res = $(this);
|
||||
return false;
|
||||
}
|
||||
colspan = $(this).prop("colspan");
|
||||
idx += colspan ? colspan : 1;
|
||||
});
|
||||
return res;
|
||||
}
|
||||
|
||||
/* Find adjacent cell for a given direction. Skip empty cells and consider merged cells */
|
||||
function findNeighbourTd(tree, $target, keyCode) {
|
||||
var nextNode,
|
||||
node,
|
||||
navMap = { "ctrl+home": "first", "ctrl+end": "last" },
|
||||
$td = $target.closest("td"),
|
||||
$tr = $td.parent(),
|
||||
treeOpts = tree.options,
|
||||
colIdx = getColIdx($tr, $td),
|
||||
$tdNext = null;
|
||||
|
||||
keyCode = navMap[keyCode] || keyCode;
|
||||
|
||||
switch (keyCode) {
|
||||
case "left":
|
||||
$tdNext = treeOpts.rtl ? $td.next() : $td.prev();
|
||||
break;
|
||||
case "right":
|
||||
$tdNext = treeOpts.rtl ? $td.prev() : $td.next();
|
||||
break;
|
||||
case "up":
|
||||
case "down":
|
||||
case "ctrl+home":
|
||||
case "ctrl+end":
|
||||
node = $tr[0].ftnode;
|
||||
nextNode = tree.findRelatedNode(node, keyCode);
|
||||
if (nextNode) {
|
||||
nextNode.makeVisible();
|
||||
nextNode.setActive();
|
||||
$tdNext = findTdAtColIdx($(nextNode.tr), colIdx);
|
||||
}
|
||||
break;
|
||||
case "home":
|
||||
$tdNext = treeOpts.rtl
|
||||
? $tr.children("td").last()
|
||||
: $tr.children("td").first();
|
||||
break;
|
||||
case "end":
|
||||
$tdNext = treeOpts.rtl
|
||||
? $tr.children("td").first()
|
||||
: $tr.children("td").last();
|
||||
break;
|
||||
}
|
||||
return $tdNext && $tdNext.length ? $tdNext : null;
|
||||
}
|
||||
|
||||
/* Return a descriptive string of the current mode. */
|
||||
function getGridNavMode(tree) {
|
||||
if (tree.$activeTd) {
|
||||
return tree.forceNavMode ? "cell-nav" : "cell-edit";
|
||||
}
|
||||
return "row";
|
||||
}
|
||||
|
||||
/* .*/
|
||||
function activateEmbeddedLink($td) {
|
||||
// $td.find( "a" )[ 0 ].trigger("click"); // does not work (always)?
|
||||
// $td.find( "a" ).trigger("click");
|
||||
var event = document.createEvent("MouseEvent"),
|
||||
a = $td.find("a")[0]; // document.getElementById('nameOfID');
|
||||
|
||||
event = new CustomEvent("click");
|
||||
a.dispatchEvent(event);
|
||||
}
|
||||
|
||||
/**
|
||||
* [ext-ariagrid] Set active cell and activate cell-nav or cell-edit mode if needed.
|
||||
* Pass $td=null to enter row-mode.
|
||||
*
|
||||
* See also FancytreeNode#setActive(flag, {cell: idx})
|
||||
*
|
||||
* @param {jQuery | Element | integer} [$td]
|
||||
* @param {Event|null} [orgEvent=null]
|
||||
* @alias Fancytree#activateCell
|
||||
* @requires jquery.fancytree.ariagrid.js
|
||||
* @since 2.23
|
||||
*/
|
||||
$.ui.fancytree._FancytreeClass.prototype.activateCell = function (
|
||||
$td,
|
||||
orgEvent
|
||||
) {
|
||||
var colIdx,
|
||||
$input,
|
||||
$tr,
|
||||
res,
|
||||
tree = this,
|
||||
$prevTd = this.$activeTd || null,
|
||||
newNode = $td ? FT.getNode($td) : null,
|
||||
prevNode = $prevTd ? FT.getNode($prevTd) : null,
|
||||
anyNode = newNode || prevNode,
|
||||
$prevTr = $prevTd ? $prevTd.closest("tr") : null;
|
||||
|
||||
anyNode.debug(
|
||||
"activateCell(" +
|
||||
($prevTd ? $prevTd.text() : "null") +
|
||||
") -> " +
|
||||
($td ? $td.text() : "OFF")
|
||||
);
|
||||
|
||||
// Make available as event
|
||||
|
||||
if ($td) {
|
||||
FT.assert($td.length, "Invalid active cell");
|
||||
colIdx = getColIdx($(newNode.tr), $td);
|
||||
res = this._triggerNodeEvent("activateCell", newNode, orgEvent, {
|
||||
activeTd: tree.$activeTd,
|
||||
colIdx: colIdx,
|
||||
mode: null, // editMode ? "cell-edit" : "cell-nav"
|
||||
});
|
||||
if (res === false) {
|
||||
return false;
|
||||
}
|
||||
this.$container.addClass(clsFancytreeCellMode);
|
||||
this.$container.toggleClass(
|
||||
clsFancytreeCellNavMode,
|
||||
!!this.forceNavMode
|
||||
);
|
||||
$tr = $td.closest("tr");
|
||||
if ($prevTd) {
|
||||
// cell-mode => cell-mode
|
||||
if ($prevTd.is($td)) {
|
||||
return;
|
||||
}
|
||||
$prevTd
|
||||
.removeAttr("tabindex")
|
||||
.removeClass(clsFancytreeActiveCell);
|
||||
|
||||
if (!$prevTr.is($tr)) {
|
||||
// We are moving to a different row: only the inputs in the
|
||||
// active row should be tabbable
|
||||
$prevTr.find(">td :input,a").attr("tabindex", "-1");
|
||||
}
|
||||
}
|
||||
$tr.find(">td :input:enabled,a").attr("tabindex", "0");
|
||||
newNode.setActive();
|
||||
$td.addClass(clsFancytreeActiveCell);
|
||||
this.$activeTd = $td;
|
||||
|
||||
$input = $td.find(":input:enabled,a");
|
||||
this.debug("Focus input", $input);
|
||||
if ($input.length) {
|
||||
$input.focus();
|
||||
setActiveDescendant(this, $input);
|
||||
} else {
|
||||
$td.attr("tabindex", "-1").focus();
|
||||
setActiveDescendant(this, $td);
|
||||
}
|
||||
} else {
|
||||
res = this._triggerNodeEvent("activateCell", prevNode, orgEvent, {
|
||||
activeTd: null,
|
||||
colIdx: null,
|
||||
mode: "row",
|
||||
});
|
||||
if (res === false) {
|
||||
return false;
|
||||
}
|
||||
// $td == null: switch back to row-mode
|
||||
this.$container.removeClass(
|
||||
clsFancytreeCellMode + " " + clsFancytreeCellNavMode
|
||||
);
|
||||
// console.log("activateCell: set row-mode for " + this.activeNode, $prevTd);
|
||||
if ($prevTd) {
|
||||
// cell-mode => row-mode
|
||||
$prevTd
|
||||
.removeAttr("tabindex")
|
||||
.removeClass(clsFancytreeActiveCell);
|
||||
// In row-mode, only embedded inputs of the active row are tabbable
|
||||
$prevTr
|
||||
.find("td")
|
||||
.blur() // we need to blur first, because otherwise the focus frame is not reliably removed(?)
|
||||
.removeAttr("tabindex");
|
||||
$prevTr.find(">td :input,a").attr("tabindex", "-1");
|
||||
this.$activeTd = null;
|
||||
// The cell lost focus, but the tree still needs to capture keys:
|
||||
this.activeNode.setFocus();
|
||||
setActiveDescendant(this, $tr);
|
||||
} else {
|
||||
// row-mode => row-mode (nothing to do)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/*******************************************************************************
|
||||
* Extension code
|
||||
*/
|
||||
$.ui.fancytree.registerExtension({
|
||||
name: "ariagrid",
|
||||
version: "2.38.3",
|
||||
// Default options for this extension.
|
||||
options: {
|
||||
// Internal behavior flags
|
||||
activateCellOnDoubelclick: true,
|
||||
cellFocus: "allow",
|
||||
// TODO: use a global tree option `name` or `title` instead?:
|
||||
label: "Tree Grid", // Added as `aria-label` attribute
|
||||
},
|
||||
|
||||
treeInit: function (ctx) {
|
||||
var tree = ctx.tree,
|
||||
treeOpts = ctx.options,
|
||||
opts = treeOpts.ariagrid;
|
||||
|
||||
// ariagrid requires the table extension to be loaded before itself
|
||||
if (tree.ext.grid) {
|
||||
this._requireExtension("grid", true, true);
|
||||
} else {
|
||||
this._requireExtension("table", true, true);
|
||||
}
|
||||
if (!treeOpts.aria) {
|
||||
$.error("ext-ariagrid requires `aria: true`");
|
||||
}
|
||||
if ($.inArray(opts.cellFocus, VALID_MODES) < 0) {
|
||||
$.error("Invalid `cellFocus` option");
|
||||
}
|
||||
this._superApply(arguments);
|
||||
|
||||
// The combination of $activeTd and forceNavMode determines the current
|
||||
// navigation mode:
|
||||
this.$activeTd = null; // active cell (null in row-mode)
|
||||
this.forceNavMode = true;
|
||||
|
||||
this.$container
|
||||
.addClass("fancytree-ext-ariagrid")
|
||||
.toggleClass(clsFancytreeCellNavMode, !!this.forceNavMode)
|
||||
.attr("aria-label", "" + opts.label);
|
||||
this.$container
|
||||
.find("thead > tr > th")
|
||||
.attr("role", "columnheader");
|
||||
|
||||
// Store table options for easier evaluation of default actions
|
||||
// depending of active cell column
|
||||
this.nodeColumnIdx = treeOpts.table.nodeColumnIdx;
|
||||
this.checkboxColumnIdx = treeOpts.table.checkboxColumnIdx;
|
||||
if (this.checkboxColumnIdx == null) {
|
||||
this.checkboxColumnIdx = this.nodeColumnIdx;
|
||||
}
|
||||
|
||||
this.$container
|
||||
.on("focusin", function (event) {
|
||||
// Activate node if embedded input gets focus (due to a click)
|
||||
var node = FT.getNode(event.target),
|
||||
$td = $(event.target).closest("td");
|
||||
|
||||
// tree.debug( "focusin: " + ( node ? node.title : "null" ) +
|
||||
// ", target: " + ( $td ? $td.text() : null ) +
|
||||
// ", node was active: " + ( node && node.isActive() ) +
|
||||
// ", last cell: " + ( tree.$activeTd ? tree.$activeTd.text() : null ) );
|
||||
// tree.debug( "focusin: target", event.target );
|
||||
|
||||
// TODO: add ":input" as delegate filter instead of testing here
|
||||
if (
|
||||
node &&
|
||||
!$td.is(tree.$activeTd) &&
|
||||
$(event.target).is(":input")
|
||||
) {
|
||||
node.debug("Activate cell on INPUT focus event");
|
||||
tree.activateCell($td);
|
||||
}
|
||||
})
|
||||
.on("fancytreeinit", function (event, data) {
|
||||
if (
|
||||
opts.cellFocus === "start" ||
|
||||
opts.cellFocus === "force"
|
||||
) {
|
||||
tree.debug("Enforce cell-mode on init");
|
||||
tree.debug(
|
||||
"init",
|
||||
tree.getActiveNode() || tree.getFirstChild()
|
||||
);
|
||||
(
|
||||
tree.getActiveNode() || tree.getFirstChild()
|
||||
).setActive(true, { cell: tree.nodeColumnIdx });
|
||||
tree.debug(
|
||||
"init2",
|
||||
tree.getActiveNode() || tree.getFirstChild()
|
||||
);
|
||||
}
|
||||
})
|
||||
.on("fancytreefocustree", function (event, data) {
|
||||
// Enforce cell-mode when container gets focus
|
||||
if (opts.cellFocus === "force" && !tree.$activeTd) {
|
||||
var node = tree.getActiveNode() || tree.getFirstChild();
|
||||
tree.debug("Enforce cell-mode on focusTree event");
|
||||
node.setActive(true, { cell: 0 });
|
||||
}
|
||||
})
|
||||
// .on("fancytreeupdateviewport", function(event, data) {
|
||||
// tree.debug(event.type, data);
|
||||
// })
|
||||
.on("fancytreebeforeupdateviewport", function (event, data) {
|
||||
// When scrolling, the TR may be re-used by another node, so the
|
||||
// active cell marker an
|
||||
// tree.debug(event.type, data);
|
||||
if (tree.viewport && tree.$activeTd) {
|
||||
tree.info("Cancel cell-mode due to scroll event.");
|
||||
tree.activateCell(null);
|
||||
}
|
||||
});
|
||||
},
|
||||
nodeClick: function (ctx) {
|
||||
var targetType = ctx.targetType,
|
||||
tree = ctx.tree,
|
||||
node = ctx.node,
|
||||
event = ctx.originalEvent,
|
||||
$target = $(event.target),
|
||||
$td = $target.closest("td");
|
||||
|
||||
tree.debug(
|
||||
"nodeClick: node: " +
|
||||
(node ? node.title : "null") +
|
||||
", targetType: " +
|
||||
targetType +
|
||||
", target: " +
|
||||
($td.length ? $td.text() : null) +
|
||||
", node was active: " +
|
||||
(node && node.isActive()) +
|
||||
", last cell: " +
|
||||
(tree.$activeTd ? tree.$activeTd.text() : null)
|
||||
);
|
||||
|
||||
if (tree.$activeTd) {
|
||||
// If already in cell-mode, activate new cell
|
||||
tree.activateCell($td);
|
||||
if ($target.is(":input")) {
|
||||
return;
|
||||
} else if (
|
||||
$target.is(".fancytree-checkbox") ||
|
||||
$target.is(".fancytree-expander")
|
||||
) {
|
||||
return this._superApply(arguments);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return this._superApply(arguments);
|
||||
},
|
||||
nodeDblclick: function (ctx) {
|
||||
var tree = ctx.tree,
|
||||
treeOpts = ctx.options,
|
||||
opts = treeOpts.ariagrid,
|
||||
event = ctx.originalEvent,
|
||||
$td = $(event.target).closest("td");
|
||||
|
||||
// console.log("nodeDblclick", tree.$activeTd, ctx.options.ariagrid.cellFocus)
|
||||
if (
|
||||
opts.activateCellOnDoubelclick &&
|
||||
!tree.$activeTd &&
|
||||
opts.cellFocus === "allow"
|
||||
) {
|
||||
// If in row-mode, activate new cell
|
||||
tree.activateCell($td);
|
||||
return false;
|
||||
}
|
||||
return this._superApply(arguments);
|
||||
},
|
||||
nodeRenderStatus: function (ctx) {
|
||||
// Set classes for current status
|
||||
var res,
|
||||
node = ctx.node,
|
||||
$tr = $(node.tr);
|
||||
|
||||
res = this._super(ctx);
|
||||
|
||||
if (node.parent) {
|
||||
$tr.attr("aria-level", node.getLevel())
|
||||
.attr("aria-setsize", node.parent.children.length)
|
||||
.attr("aria-posinset", node.getIndex() + 1);
|
||||
|
||||
// 2018-06-24: not required according to
|
||||
// https://github.com/w3c/aria-practices/issues/132#issuecomment-397698250
|
||||
// if ( $tr.is( ":hidden" ) ) {
|
||||
// $tr.attr( "aria-hidden", true );
|
||||
// } else {
|
||||
// $tr.removeAttr( "aria-hidden" );
|
||||
// }
|
||||
|
||||
// this.debug("nodeRenderStatus: " + this.$activeTd + ", " + $tr.attr("aria-expanded"));
|
||||
// In cell-mode, move aria-expanded attribute from TR to first child TD
|
||||
if (this.$activeTd && $tr.attr("aria-expanded") != null) {
|
||||
$tr.remove("aria-expanded");
|
||||
$tr.find("td")
|
||||
.eq(this.nodeColumnIdx)
|
||||
.attr("aria-expanded", node.isExpanded());
|
||||
} else {
|
||||
$tr.find("td")
|
||||
.eq(this.nodeColumnIdx)
|
||||
.removeAttr("aria-expanded");
|
||||
}
|
||||
}
|
||||
return res;
|
||||
},
|
||||
nodeSetActive: function (ctx, flag, callOpts) {
|
||||
var $td,
|
||||
node = ctx.node,
|
||||
tree = ctx.tree,
|
||||
$tr = $(node.tr);
|
||||
|
||||
flag = flag !== false;
|
||||
node.debug("nodeSetActive(" + flag + ")", callOpts);
|
||||
// Support custom `cell` option
|
||||
if (flag && callOpts && callOpts.cell != null) {
|
||||
// `cell` may be a col-index, <td>, or `$(td)`
|
||||
if (typeof callOpts.cell === "number") {
|
||||
$td = findTdAtColIdx($tr, callOpts.cell);
|
||||
} else {
|
||||
$td = $(callOpts.cell);
|
||||
}
|
||||
tree.activateCell($td);
|
||||
return;
|
||||
}
|
||||
// tree.debug( "nodeSetActive: activeNode " + this.activeNode );
|
||||
return this._superApply(arguments);
|
||||
},
|
||||
nodeKeydown: function (ctx) {
|
||||
var handleKeys,
|
||||
inputType,
|
||||
res,
|
||||
$td,
|
||||
$embeddedCheckbox = null,
|
||||
tree = ctx.tree,
|
||||
node = ctx.node,
|
||||
treeOpts = ctx.options,
|
||||
opts = treeOpts.ariagrid,
|
||||
event = ctx.originalEvent,
|
||||
eventString = FT.eventToString(event),
|
||||
$target = $(event.target),
|
||||
$activeTd = this.$activeTd,
|
||||
$activeTr = $activeTd ? $activeTd.closest("tr") : null,
|
||||
colIdx = $activeTd ? getColIdx($activeTr, $activeTd) : -1,
|
||||
forceNav =
|
||||
$activeTd &&
|
||||
tree.forceNavMode &&
|
||||
$.inArray(eventString, NAV_KEYS) >= 0;
|
||||
|
||||
if (opts.cellFocus === "off") {
|
||||
return this._superApply(arguments);
|
||||
}
|
||||
|
||||
if ($target.is(":input:enabled")) {
|
||||
inputType = $target.prop("type");
|
||||
} else if ($target.is("a")) {
|
||||
inputType = "link";
|
||||
}
|
||||
if ($activeTd && $activeTd.find(":checkbox:enabled").length === 1) {
|
||||
$embeddedCheckbox = $activeTd.find(":checkbox:enabled");
|
||||
inputType = "checkbox";
|
||||
}
|
||||
tree.debug(
|
||||
"nodeKeydown(" +
|
||||
eventString +
|
||||
"), activeTd: '" +
|
||||
($activeTd && $activeTd.text()) +
|
||||
"', inputType: " +
|
||||
inputType
|
||||
);
|
||||
|
||||
if (inputType && eventString !== "esc" && !forceNav) {
|
||||
handleKeys = INPUT_KEYS[inputType];
|
||||
if (handleKeys && $.inArray(eventString, handleKeys) >= 0) {
|
||||
return; // Let input control handle the key
|
||||
}
|
||||
}
|
||||
|
||||
switch (eventString) {
|
||||
case "right":
|
||||
if ($activeTd) {
|
||||
// Cell mode: move to neighbour (stop on right border)
|
||||
$td = findNeighbourTd(tree, $activeTd, eventString);
|
||||
if ($td) {
|
||||
tree.activateCell($td);
|
||||
}
|
||||
} else if (
|
||||
node &&
|
||||
!node.isExpanded() &&
|
||||
node.hasChildren() !== false
|
||||
) {
|
||||
// Row mode and current node can be expanded:
|
||||
// default handling will expand.
|
||||
break;
|
||||
} else {
|
||||
// Row mode: switch to cell-mode
|
||||
$td = $(node.tr).find(">td").first();
|
||||
tree.activateCell($td);
|
||||
}
|
||||
return false; // no default handling
|
||||
|
||||
case "left":
|
||||
case "home":
|
||||
case "end":
|
||||
case "ctrl+home":
|
||||
case "ctrl+end":
|
||||
case "up":
|
||||
case "down":
|
||||
if ($activeTd) {
|
||||
// Cell mode: move to neighbour
|
||||
$td = findNeighbourTd(tree, $activeTd, eventString);
|
||||
// Note: $td may be null if we move outside bounds. In this case
|
||||
// we switch back to row-mode (i.e. call activateCell(null) ).
|
||||
if (!$td && "left right".indexOf(eventString) < 0) {
|
||||
// Only switch to row-mode if left/right hits the bounds
|
||||
return false;
|
||||
}
|
||||
if ($td || opts.cellFocus !== "force") {
|
||||
tree.activateCell($td);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
break;
|
||||
|
||||
case "esc":
|
||||
if ($activeTd && !tree.forceNavMode) {
|
||||
// Switch from cell-edit-mode to cell-nav-mode
|
||||
// $target.closest( "td" ).focus();
|
||||
tree.forceNavMode = true;
|
||||
tree.debug("Enter cell-nav-mode");
|
||||
tree.$container.toggleClass(
|
||||
clsFancytreeCellNavMode,
|
||||
!!tree.forceNavMode
|
||||
);
|
||||
return false;
|
||||
} else if ($activeTd && opts.cellFocus !== "force") {
|
||||
// Switch back from cell-mode to row-mode
|
||||
tree.activateCell(null);
|
||||
return false;
|
||||
}
|
||||
// tree.$container.toggleClass( clsFancytreeCellNavMode, !!tree.forceNavMode );
|
||||
break;
|
||||
|
||||
case "return":
|
||||
// Let user override the default action.
|
||||
// This event is triggered in row-mode and cell-mode
|
||||
res = tree._triggerNodeEvent(
|
||||
"defaultGridAction",
|
||||
node,
|
||||
event,
|
||||
{
|
||||
activeTd: tree.$activeTd ? tree.$activeTd[0] : null,
|
||||
colIdx: colIdx,
|
||||
mode: getGridNavMode(tree),
|
||||
}
|
||||
);
|
||||
if (res === false) {
|
||||
return false;
|
||||
}
|
||||
// Implement default actions (for cell-mode only).
|
||||
if ($activeTd) {
|
||||
// Apply 'default action' for embedded cell control
|
||||
if (colIdx === this.nodeColumnIdx) {
|
||||
node.toggleExpanded();
|
||||
} else if (colIdx === this.checkboxColumnIdx) {
|
||||
// TODO: only in checkbox mode!
|
||||
node.toggleSelected();
|
||||
} else if ($embeddedCheckbox) {
|
||||
// Embedded checkboxes are always toggled (ignoring `autoFocusInput`)
|
||||
$embeddedCheckbox.prop(
|
||||
"checked",
|
||||
!$embeddedCheckbox.prop("checked")
|
||||
);
|
||||
} else if (tree.forceNavMode && $target.is(":input")) {
|
||||
tree.forceNavMode = false;
|
||||
tree.$container.removeClass(
|
||||
clsFancytreeCellNavMode
|
||||
);
|
||||
tree.debug("enable cell-edit-mode");
|
||||
} else if ($activeTd.find("a").length === 1) {
|
||||
activateEmbeddedLink($activeTd);
|
||||
}
|
||||
} else {
|
||||
// ENTER in row-mode: Switch from row-mode to cell-mode
|
||||
// TODO: it was also suggested to expand/collapse instead
|
||||
// https://github.com/w3c/aria-practices/issues/132#issuecomment-407634891
|
||||
$td = $(node.tr).find(">td").nth(this.nodeColumnIdx);
|
||||
tree.activateCell($td);
|
||||
}
|
||||
return false; // no default handling
|
||||
|
||||
case "space":
|
||||
if ($activeTd) {
|
||||
if (colIdx === this.checkboxColumnIdx) {
|
||||
node.toggleSelected();
|
||||
} else if ($embeddedCheckbox) {
|
||||
$embeddedCheckbox.prop(
|
||||
"checked",
|
||||
!$embeddedCheckbox.prop("checked")
|
||||
);
|
||||
}
|
||||
return false; // no default handling
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
// Allow to focus input by typing alphanum keys
|
||||
}
|
||||
return this._superApply(arguments);
|
||||
},
|
||||
treeSetOption: function (ctx, key, value) {
|
||||
var tree = ctx.tree,
|
||||
opts = tree.options.ariagrid;
|
||||
|
||||
if (key === "ariagrid") {
|
||||
// User called `$().fancytree("option", "ariagrid.SUBKEY", VALUE)`
|
||||
if (value.cellFocus !== opts.cellFocus) {
|
||||
if ($.inArray(value.cellFocus, VALID_MODES) < 0) {
|
||||
$.error("Invalid `cellFocus` option");
|
||||
}
|
||||
// TODO: fix current focus and mode
|
||||
}
|
||||
}
|
||||
return this._superApply(arguments);
|
||||
},
|
||||
});
|
||||
// Value returned by `require('jquery.fancytree..')`
|
||||
return $.ui.fancytree;
|
||||
}); // End of closure
|
||||
Loading…
Add table
Add a link
Reference in a new issue