Disable the whole jsTree - javascript

I'm using jsTree and have a form on the right of it based on the selected node that can be edited/saved. The goal is to prevent the user from clicking anywhere else on the tree while they are editing the form.
Is there any way to temp disable/enable the tree functionality while still keeping the tree visually available?
I tried using the disable_node(obj) method and apply it to the root of the tree but doesn't seem to be a solution.
Any suggestions? Or this is not a possible feature for the jsTree lib?
Thanks

To disable selected node do it this way:
var node = $("#tree").jstree().get_selected();
$("#tree").jstree().disable_node(node);
To disable all nodes use:
$('#tree li').each( function() {
$("#tree").jstree().disable_node(this.id);
})
UPDATED
I didn't find a way to prevent opening a disabled node so I'm just disabling all the children of a closed node too.
See demo: Fiddle

Edit As pointed out by #charles disabling the nodes doesn't disable the menu plugin (at least with a custom menu) or drag'n'drop - Added point 4 to take care of this
To disable the whole tree
Disable all rendered nodes - disable each node by id or get an array of ids to do a single call to "disable_node"
Forbid the opening of new nodes - intercept and block the click event on the open icon
Forbid the opening of new nodes with double click - modify the current tree settings
If the tree is user modifiable in any way, temporary disable all modifications setting core.check_callback = false
Note The point 2 is base on undocumented features and (given the history of the jstree plugin) will probably not work on future releases
See the snippet for a demo
var data1 = [{
"id": "W",
"text": "World",
"state": { "opened": true },
"children": [{"text": "Asia"},
{"text": "Africa"},
{"text": "Europe",
"state": { "opened": false },
"children": [ "France","Germany","UK" ]
}]
}];
$('#Tree').jstree({
core: {data: data1,
check_callback: true
},
plugins: ['dnd','contextmenu','checkbox']
})
function DisableFlawed() {
// this is not enough
$('#Tree li.jstree-node').each(function() {
$('#Tree').jstree("disable_node", this.id)
})
}
function Disable() {
// disable visible nodes
$('#Tree li.jstree-node').each(function() {
$('#Tree').jstree("disable_node", this.id)
})
// block open new nodes
$('#Tree i.jstree-ocl')
.off('click.block')
.on('click.block', function() {
return false;
});
// eventually... dbl click
$('#Tree').jstree().settings.core.dblclick_toggle = false;
// eventually... block all edits
$('#Tree').jstree().settings.core.check_callback = false;
}
function Enable() {
// enable again visible nodes
$('#Tree li.jstree-node').each(function() {
$('#Tree').jstree("enable_node", this.id)
});
// ublock open new nodes
$('#Tree i.jstree-ocl')
//
.off('click.block');
// eventually... dbl click
$('#Tree').jstree().settings.core.dblclick_toggle = true;
// eventually... unblock all edits
// set to true OR reset to whatever user defined function you are using
$('#Tree').jstree().settings.core.check_callback = true;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<button onclick="DisableFlawed()">Disable (bad)</button>
<button onclick="Disable()">Disable (ok)</button>
<button onclick="Enable()">Enable</button>
<div id="Tree"></div>

How about this?
// get an instance of jstree.
var tree = $.jstree.create('#tree', { ... });
// disable all nodes with one line.
tree.disable_node(tree.get_json(null, { flat: true }));

In addition to Nikolay Ermakov's answer, disabling the nodes doesn't disable the menu plugin (at least with a custom menu) or drag'n'drop. If you want to do so, you need to add an extra check in these functions (tested with JsTree 3.2.1)
$('#tree').jstree({
// ...
contextmenu: {
items: customMenu
},
dnd: {
is_draggable: function (node) {
return !node[0].state.disabled;
}
},
});
function customMenu(node)
{
if (node.state.disabled)
return false;
// usual menu generation code
}
Another way is to use something jQuery BlockUI plugin to do some general blocking outside of jsTree.

Related

Monaco Editor: only show part of document

Is there a way to only show part of a document, or in monacos case of a model, while still getting intellisense for the whole document?
I only want a user to edit a part of a document, but the user should be able to get the right contextual intellisense.
It would be best for my usecase to hide the uneditable sections, but deactivating them would also be ok.
In case this is not possible, is there any embedded editor that can do this, or can this be achived by modifying the language server?
Monaco editor loads every line as a container under a section with the class name "view-lines". Once the editor content has loaded, set "display: none" to the corresponding container for each line that you want to hide.
Implementation: https://jsfiddle.net/renatodc/s6fxedo2/
let value = `function capitalizeFirstLetter(string) {
\treturn string.charAt(0).toUpperCase() + string.slice(1);
}
$(function() {
\tlet word = "script";
\tlet result = capitalizeFirstLetter(word);
\tconsole.log(result);
});
`
let linesToDisable = [1,2,3];
let editor = monaco.editor.create(document.getElementById('container'), {
value,
language: 'javascript',
theme: 'vs-dark',
scrollbar: {
vertical: "hidden",
handleMouseWheel: false
},
scrollBeyondLastLine: false
});
// onLoad event for Monaco Editor: https://github.com/Microsoft/monaco-editor/issues/115
let didScrollChangeDisposable = editor.onDidScrollChange(function() {
didScrollChangeDisposable.dispose();
setTimeout(function() {
$(".monaco-editor .view-lines > div").each(function(i) {
if(linesToDisable.includes(i+1)) {
$(this).css("display","none");
$(this).css("pointer-events","none");
}
});
},1000);
});
Scrolling from Monaco will render the lines again and break the implementation. To prevent this, disable the scrolling feature in Monaco, set a fixed height for the editor container, and use the browser or a parent container to scroll instead.
If you use the arrow keys 'up' or 'down' to navigate to the hidden content, the cursor will still work, and typing will break the implementation. You might be able to use the editor's onKeyDown event to prevent this.
If you're looking for a break-proof implementation, I would suggest loading Monaco editor only with the portion of the document that you wish to edit. Then extend the completion provider (Intellisense) as shown in this example: https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example
monaco.languages.registerCompletionItemProvider('javascript', {
provideCompletionItems: function(model, position) {
return {
suggestions: [
{
label: "capitalizeFirstLetter",
kind: monaco.languages.CompletionItemKind.Method,
documentation: "Capitalize the first letter of a word",
insertText: "capitalizeFirstLetter("
}
]
};
}
});
monaco.editor.create(document.getElementById("container"), {
value: `$(function() {
\tlet word = "script";
\tlet result = capitalizeFirstLetter(word);
\tconsole.log(result);
});
`,
language: "javascript"
});
Use an AST parser like Esprima to get the identifiers from your source document, and plug these into the suggestions array.

intro.js show and hide data-hint

I want to have a button that can turn on and off the 'hints' function in intro.js.
I have a working version to show and then hide but the show only works once. How can I get it to work repeatedly? This functionality works for the standard data-intro but not for data-hint.
<div class="jumbotron">
<h1 id='step1'>Hints</h1>
<p class="lead">Adding hints using JSON + callbacks</p>
<a id='step2' class="btn btn-large btn-success" href="javascript:void(0);">Add hints</a>
</div>
function addHints(){
intro = introJs();
intro.setOptions({
hints: [
{
element: document.querySelector('#step1'),
hint: "This is a tooltip.",
hintPosition: 'top-middle'
},
{
element: '#step2',
hint: 'More features, more fun.',
position: 'left'
},
{
element: '#step4',
hint: "<b>Another</b> step.",
hintPosition: 'top-middle'
}
]
});
intro.onhintsadded(function() {
console.log('all hints added');
});
intro.onhintclick(function(hintElement, item, stepId) {
console.log('hint clicked', hintElement, item, stepId);
});
intro.onhintclose(function (stepId) {
console.log('hint closed', stepId);
});
intro.addHints();
}
$(function() {
$('#step2').click(function(){
if ( $('#step2').hasClass('clicked') ) {
introJs().hideHints();
$('#step2').removeClass('clicked');
} else {
addHints();
$('#step2').addClass('clicked');
}
});
});
Instead of using hideHints intro.js API method just remove the div block of intro.js from DOM:
var introDiv = document.getElementsByClassName("introjs-hints")[0];
introDiv.parentNode.removeChild(introDiv);
(You can do the same thing with jQuery if you want to).
When the div is removed from DOM, just initialize hints once again as you do with your addHints method when you want to show hints and it'll work.
Instead of deleting the div block with javascript. You can use .removeHints()
This function is part of intro.js, but is not included in the documentation.
Perhaps a bit hacky, but this works for me...
First, put your hints into their own variable:
hints = [{...}, ...]
then, reset your hints in the intro options
intro.onhintclose(function(stepId) {
if (document.querySelectorAll('.introjs-hidehint').length === hints.length) {
intro.setOptions({hints: hints})
}
})
The hidden hints are given a class of introjs-hidehint, and document.querySelectorAll will return all of them in an array. Once that array is the same size as your hints array, reset your hints in your intro options and that will reset all your hints so you can show them all again.
Here's a more complete example that also allows:
(a) toggling hints on/off by clicking a button (located on a nav bar so used across multiple pages).
(b) once all hints have been clicked, the hints div gets removed so that clicking show hints button will again actually...show hints...
(c) allow you to store hints for multiple pages in a single json object array (re: nav bar).
var jquery = require('jquery');
var introJs = require('intro.js');
* ===========================================================================
* define onclick of hints button
* =========================================================================*/
jquery('#hints_button').on('click', function() {
if (document.getElementsByClassName('introjs-hints').length == 0){
addSomeHints();
}
else {
destroyHints();
};
});
/* ===========================================================================
* Add hints using the IntroJS library
* =========================================================================*/
/* define hints */
var theHints = [
{
element: document.querySelector('#step1'),
hint: "This is a tooltip.",
hintPosition: 'top-middle'
},
{
element: '#step2',
hint: 'More features, more fun.',
hintPosition: 'left'
},
{
element: '#step4',
hint: "<b>Another</b> step.",
hintPosition: 'top-middle'
}
];
/* generate hints with introjs */
function addSomeHints() {
intro = introJs();
intro.setOptions({
hints: theHints
});
intro.onhintclose(function (stepId) {
var remaining_hints = all_hints - document.getElementsByClassName("introjs-hidehint").length;
if (remaining_hints == 0) {
destroyHints();
};
});
/* add hints */
intro.addHints();
/* store number of hints created */
var all_hints = document.getElementsByClassName('introjs-hint').length;
};
/* remove hints div */
function destroyHints() {
var hintsDiv = document.getElementsByClassName("introjs-hints")[0]
hintsDiv.parentNode.removeChild(hintsDiv);
};
... hopefully this saves someone the 20 minutes it took me to piece together the answers and adapt it for what seems like a super common use case.

Can Firefox addon panel determine when it is shown and hidden?

I am using the Tool API to add a panel to Firefox DevTools.
I can define setup() and dispose() methods to handle initialization and teardown.
However I can’t figure out how to determine whether the panel is currently visible, or when it changes visibility. Is this event exposed somewhere?
To be clear, I only want to know that for my panel. So I want to know when my panel becomes visible, or when the user switches away to e.g. the Elements tab.
The dev/panel API does not expose a method for you to be notified when the visibility of your panel changes. However, you can go around the API and be informed that the visibility has changed.
The code below calls the function panelVisibilityChangedState when the visibility changes of the panel created by the extension within the Developer Tools Toolbox. As requested, this is only the state of the panel added by the extension. This add-on was tested while running multiprocess Firefox Developer Edition, version 50.0a2.
This code is based on the MDN repl-panel example available on GitHub.
main.js:
//This code is based on the MDN Dev Tools panel example available at:
// https://github.com/mdn/repl-panel
//Require the needed SDK modules
const { Panel } = require("dev/panel");
const { Tool } = require("dev/toolbox");
const { Class } = require("sdk/core/heritage");
const self = require("sdk/self");
var myRadio;
var devToolsToolbar;
var devToolsToolboxTabs;
var pickerContainer;
var panelIsVisible=false;
function panelVisibilityChangedState(isVisible){
//This function may be called slightly before the state change actually occurs.
panelIsVisible=isVisible;
console.log('Dev Tools Panel Changed State: visibility is now: ' + isVisible );
}
function devToolsClickHandler(event){
//The event fires before the value of the 'selected' attribute changes in response to
// this click, except when the event fires on the pick element. In that case, the
// 'selected' attribute is accurately 'false'.
let isSelected = myRadio.getAttribute('selected') === 'true';
let pickElementContains = pickerContainer.contains(event.target);
if(!devToolsToolboxTabs.contains(event.target) && !pickElementContains){
//Of the controls not in the devToolsToolboxTabs, only the pickElement changes
// the state of this panel being shown. The exception to this is the close
// button, but closing is detected via the panel's dispose method.
return;
}//else
let doesContain = myRadio.contains(event.target);
if((pickElementContains && panelIsVisible)
|| (doesContain && !isSelected) || (!doesContain && isSelected)) {
panelVisibilityChangedState(doesContain);
}
}
//Define a REPLPanel class that inherits from dev/panel
const REPLPanel = Class({
extends: Panel,
label: "Visi",
tooltip: "Demo Dev Tool Panel Visibility Notification",
icon: self.data.url("noIcon.png"),
url: self.data.url("blank-panel.html"),
setup: function(options) {
//Remember the button which was clicked to open this panel (actually a <radio>)
myRadio = require("sdk/window/utils").getFocusedElement()
//For convenience and to speed up the event handler, remember three elements.
// Obtain these elements using IDs, or unique class when no ID is available.
// This should be a bit more stable than using the location in the DOM
// relative to myRadio.
devToolsToolbar = myRadio.ownerDocument.querySelector('.devtools-tabbar');
//An alternate method of finding the Dev Tools toolbar:
//devToolsToolbar = myRadio.ownerDocument.getElementById('toolbox-tabs').parentNode;
//Another alternate method of finding the Dev Tools toolbar:
//devToolsToolbar = myRadio.parentNode.parentNode;
devToolsToolboxTabs = devToolsToolbar.querySelector('#toolbox-tabs');
pickerContainer = devToolsToolbar.querySelector('#toolbox-picker-container');
devToolsToolbar.addEventListener('click',devToolsClickHandler,false);
},
dispose: function() {
//Dev Tools panel is destroyed. Visibility is, obviously, false
if(panelIsVisible){
panelVisibilityChangedState(false);
}
},
onReady: function() {
//The panel is now visible and ready. If desired, this call to
// panelVisibilityChangedState could be placed in the 'setup' function.
panelVisibilityChangedState(true);
}
});
exports.REPLPanel = REPLPanel;
//Create a new tool, initialized with the REPLPanel's constructor
const replTool = new Tool({
panels: { repl: REPLPanel }
});
data/blank-panel.html:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
This is a blank panel
</body>
</html>
package.json:
{
"name": "dev-panel-visibility-notification",
"title": "dev-panel-visibility-notification",
"id": "dev-panel-visibility-notification#example",
"description": "Demonstrates calling a function when the visibillity of the add-on's Dev Tools panel changes.",
"author": "Makyen",
"license": "MPL 2.0",
"version": "0.1.0",
"main": "main.js"
}

How to disable nth level node if any (n-1)th node is selected in jsTree

Hi am using jsTree and created the below shown Tree
Now i want to disable n th node if (n-1) th node is selected,ie user cant able to select different level of nodes.
eg:
if user selected Koramangala,then infosys,Accenture,TCS,IBM,Wipro and their child nodes should be disable
If Bangalore is selected,Koramangala,electronicCity,WhiteField,Marathahally and their child should be disabled and disable same level childs in US& UK
Is it possible to achieve this requirement ????
Thanks in advance
You can use an attribute added by jsTree to all li elements - the aria-level attribute. It starts from 1 for root element and spans whole tree showing level for every node.
You will have to do this:
add some events to jsTree object - changed event to disable visible nodes from next level and below and open_node to update status of to-be disabled nodes previously hidden (non-existent in the DOM till this moment to be exact)
add conditionalselect plugin to disallow node selection if node is disabled
I kept the currently selected level in var currentlevel. You should check that it is kept local. Also you can surely optimize the code so it wouldn't repeat enable/disable functionality.
Check demo - JS Fiddle
Solution for the above mentioned requiremnt will be available here in jsFfiddle
Here am listing the features
At a time,only same level of nodes can be selectable
If select nth level node,then all lower level nodes will be disabled
If select nth level node and after that if select any higher level node is selected,then all lower level nodes selection will be removed
Here am adding the jquery code
var data = [{"id":"1","text":"India","state":{"opened":false},"parent":"#", "state": { "opened":true } },{"id":"1-1","text":"Banglore", "state": { "opened":true }, "parent":"1"},{"id":"1-1-1","text":"Koramangala","state":{"opened":false},"parent":"1-1"},{"id":"1-1-1-1","text":"Infosys ","state":{"opened":false},"parent":"1-1-1"},{"id":"1-1-1-1-1","text":"D","state":{"opened":false},"parent":"1-1-1-1"},{"id":"1-1-1-1-2","text":"E","state":{"opened":false},"parent":"1-1-1-1"},{"id":"1-1-1-1-3","text":"G","state":{"opened":false},"parent":"1-1-1-1"},{"id":"1-1-1-3","text":"Accenture ","state":{"opened":false},"parent":"1-1-1"},{"id":"1-1-1-3-8","text":"C","state":{"opened":false},"parent":"1-1-1-3"},{"id":"1-1-1-3:9","text":"E","state":{"opened":false},"parent":"1-1-1-3"},{"id":"1-1-2","text":"Electronic City","state":{"opened":false},"parent":"1-1"},{"id":"1-1-2-2","text":"TCS ","state":{"opened":false},"parent":"1-1-2"},{"id":"1-1-2-2-4","text":"C","state":{"opened":false},"parent":"1-1-2-2"},{"id":"1-1-2-2-5","text":"E","state":{"opened":false},"parent":"1-1-2-2"},{"id":"1-1-2-2-6","text":"F","state":{"opened":false},"parent":"1-1-2-2"},{"id":"1-1-2-2-7","text":"G","state":{"opened":false},"parent":"1-1-2-2"},{"id":"1-1-3","text":"WhiteField","state":{"opened":false},"parent":"1-1"},{"id":"1-1-3-4","text":"IBM ","state":{"opened":false},"parent":"1-1-3"},{"id":"1-1-3-4-10","text":"F","state":{"opened":false},"parent":"1-1-3-4"},{"id":"1-1-4","text":"Marathahally","state":{"opened":false},"parent":"1-1"},{"id":"1-1-4-5","text":"Wipro ","state":{"opened":false},"parent":"1-1-4"},{"id":"1-1-4-5-11","text":"G","state":{"opened":false},"parent":"1-1-4-5"},{"id":"1-2","text":"Chennai","state":{"opened":false},"parent":"1"},{"id":"1-2-5","text":"sholinganallur","state":{"opened":false},"parent":"1-2"},{"id":"1-2-6","text":"Tiruvanmiyur","state":{"opened":false},"parent":"1-2"},{"id":"2","text":"UK","state":{"opened":false},"parent":"#"},{"id":"2-3","text":"London","state":{"opened":false},"parent":"2"},{"id":"3","text":"US","state":{"opened":false},"parent":"#"},{"id":"3-4","text":"Texas","state":{"opened":false},"parent":"3"},{"id":"3-5","text":"Washington","state":{"opened":false},"parent":"3"},{"id":"3-6","text":"California","state":{"opened":false},"parent":"3"}]
$.jstree.defaults.core = {};
var currentlevel;
$('#tree')
.on('changed.jstree', function (event, data) {
if( data.action == 'select_node'){
$('#tree').find('li').removeClass('disabled_node');
console.log('select '+ data.node.text);
currentlevel = parseInt( $('#'+data.node.id).attr('aria-level') );
$('#tree').find('li').each( function() {
if($(this).attr('aria-level') > currentlevel) {
$(this).addClass('disabled_node');
// remove checks from levels below
$('#tree').jstree('deselect_node', '#'+this.id);
} else if($(this).attr('aria-level') < currentlevel) {
// remove checks from levels above
$('#tree').jstree('deselect_node', '#'+this.id);
}
});
}
if( data.action == 'deselect_node' && data.event && data.event.type === 'click'){
// if have other checked nodes at same level - do not enable children
if ( $('#tree').find('li:not(#'+data.node.id+')[aria-level="'+currentlevel+'"][aria-selected="true"]').length>0 ) {
return;
}
$('#tree').find('li').each( function() {
if($(this).attr('aria-level') > currentlevel) {
$(this).removeClass('disabled_node');
}
});
}
})
.on('open_node.jstree', function(event, obj ) {
$('#'+obj.node.id).find('li').each( function() {
if($(this).attr('aria-level') > currentlevel) {
$(this).addClass('disabled_node');
}
});
})
.jstree({
"core" : {
"data" : data,
"multiple": true,
"themes": {
"url": true,
"icons": true
}
},
"checkbox" : {
"three_state" : false
},
"conditionalselect" : function (node, event) {
return !$('#'+node.id).hasClass('disabled_node');
},
"plugins" : [ "checkbox","conditionalselect" ]
});
Thanks to nikolay-ermakov
All the other answers\fiddles listed above works in most scenarios but one. All the above scenarios works fine as long as all the nodes are expanded (becuase once you collapse a node, it is removed from the dom).
Assume you select a node at level three and then you collapse the node at level three and then you select a node at level 1, it system does not un-select level 3 node (as it was removed from dom when node was collapsed) and nodes at level 1 and 3 remains selected.
To fix the issue, I am sending the node an additional field in the JSON call level which tells you about the current level of the node.
var myTree = $('#tree');
myTree .on('changed.jstree', function(event, data) {
mee.disableTreeNodesAtOtherLevels(event,data,myTree );
});
disableTreeNodesAtOtherLevels(event,data, tree){
var currentlevel = parseInt($('#' + data.node.id).attr('aria-level'));
var selectedNodes = tree.jstree(true).get_selected(true);
for (var i = 0; i < selectedNodes.length; i++) {
if(selectedNodes[i].original.level !== currentlevel){
tree.jstree(true).deselect_node(selectedNodes[i], true);
}
}
}
All this works based on assumption the data you are binding to tree is having a property called level

How to change dojo content tab focus when closing a tab to focus on previous tab instead of first tab?

I'm using Dojo's Dijit Layout for generating content tab-panes similar to Dijit Theme Tester Demo. All of the tabs here are closeable.
The issue is: when I close a tab it goes back to the first tab in the list instead of the previous tab (available next to it).
You can think of it like opening a new tab in Firefox or Chrome and try closing the last tab.... on closing tab, it changes the focus to the previous tab which is a predictable behavior for working with tabs. But with dijit.TabContainers, by default it goes back to the very first tab instead of previous one. This is a serious flaw when you consider the UI basics.
I have checked with dojo docs, but don't found any hint on this. Any idea how to it?
Ok so when the [X] button on the dijit.layout.ContentPane (tab) is clicked an event onClose is generated, the dijit.layout.TabContainer is listening to this event, so when this happens, it executes the callback closeChild() then the function removeChild() is executed, this last one is the one you should override.
The tabContainer inherits this two functions from dijit.layout.StackContainer you should check the API documentation.
So for being able to modify the default behavior of the closing tabs, you should override the default functionality, in the example below i do this. Read the comments for info on where to add your logic.
E.g.
<script>
require([
"dojo/parser",
"dojo/_base/lang", //this is the one that has the extend function
"dojo/topic", //this is needed inside the overrided function
"dijit/layout/TabContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(Parser, lang, topic, tabContainer, contentPane){
Parser.parse();
// this will extend the tabContainer class and we will override the method in question
lang.extend(tabContainer, {
// this function, i copied it from the dijit.layout.StackContainer class
removeChild: function(/*dijit._Widget*/ page){
// for this to work i had to add as first argument the string "startup"
this.inherited("startup", arguments);
if(this._started){
// also had to call the dojo.topic class in the require statement
topic.publish(this.id + "-removeChild", page);
}
if(this._descendantsBeingDestroyed){ return; }
if(this.selectedChildWidget === page){
this.selectedChildWidget = undefined;
if(this._started){
var children = this.getChildren();
if(children.length){
// this is what you want to add your logic
// the var children (array) contains a list of all the tabs
// the index selects the tab starting from left to right
// left most being the 0 index
this.selectChild(children[0]);
}
}
}
if(this._started){
this.layout();
}
}
});
// now you can use your modified tabContainer WALAAAAAAA!
// from here on, normal programmatic tab creation
var tc = new tabContainer({
style: "height: 100%; width: 100%;",
}, "tab-container-div-id");
var cp1 = new contentPane({
title: "First Tab",
closable: true
});
tc.addChild(cp1);
var cp2 = new contentPane({
title: "Second Tab",
closable: true
});
tc.addChild(cp2);
var cp3 = new contentPane({
title: "Third Tab",
selected: true,
closable: true
});
tc.addChild(cp3);
tc.startup();
});
</script>
In Dojo 1.10, reverting to the previous tab is the normal behaviour for TabContainers (instead of reverting to the first tab).
Presumably, you could use dojo/aspect to get the old behaviour (warning: not tested):
require( [ 'dijit/registry', 'dojo/aspect', 'dojo/_base/lang' ],
function( registry, aspect, lang )
{
var tabContainer = registry.byId( 'tab_container');
aspect.before( tabContainer, 'removeChild', lang.hitch( tabContainer, function( page )
{
if(this.selectedChildWidget === page)
{
this.selectedChildWidget = undefined;
if(this._started)
{
var children = this.getChildren();
this.selectChild( children[0] );
}
}
return page;
} ) );
}
);
Or, alternatively, you could use the onClose extension point on a tab's ContentPane:
require( [ 'dijit/registry', 'dojo/_base/lang' ],
function( registry, lang ) {
newTabPane.onClose = lang.hitch(this, function () {
// select first
var tabContainer = registry.byId('tab_container'),
all_tabs = tabContainer.getChildren();
tabContainer.selectChild( all_tabs[0] );
// allow save to go ahead
return true;
});
}
);
Obviously, both these approaches would allow you to select a specific different pane on a tab being closed instead with a little tweaking...

Categories