Develop Reference

How can i check whether an element can host Shadow DOM?

Elements that allow Shadow DOM are specified here:
https://docs.w3cub.com/dom/element/attachshadow/
How can i validate if an element supports Shadow DOM or not ?
if (myElement.attachShadow) {
...
}
does not seem to work.

You could try and catch if unsupported.
try {
let shadowRoot = elem.attachShadow( { mode: "open" } );
shadowRoot.innerHTML = ...;
return true;
} catch( err ) {
return false;
}
You could also turn this into a helper, but if you need to use it several times, it might then be a good idea to store the results after checking each element.
function canAttachShadow( elem ) {
try {
elem.cloneNode().attachShadow( { mode: "open" } );
return true;
}
catch( err ) {
return false;
}
}
console.log( "a", canAttachShadow( document.createElement( "a" ) ) );
console.log( "article", canAttachShadow( document.createElement( "article" ) ) );
If you really wish, you could also use the specs algorithm, which is a combination of
valid-custom-element-name and
the white list in your article (i.e today, "article", "aside",
"blockquote", "body", "div", "footer", "h1", "h2", "h3", "h4", "h5", "h6", "header", "main", "nav", "p", "section", or
"span"), however this white list may change in the future, so any code using it would need to get updated along with
the specs.

You can try do it like this:
if (document.myElement.createShadowRoot || document.myElement.attachShadow) {
// support shadow DOM
} else {
// not support
}

jstree open_node not working on child nodes

When my checkbox jstree has finished loading, I wish to pre open the last opened nodes (not select_node). The open_node function only seems to work on the top most parent level nodes. I even tried iterating through the node and calling open_node and it still doesn't work. I have the following:
// Create instance for checkbox jstree.
$(function () {
$('#myTree').jstree({
"core": {
"themes": {
'name': 'default',
"variant": "small",
"icons": false
},
},
"checkbox": {
"keep_selected_style": false,
"three_state": false,
},
"plugins": ["checkbox"]
});
});
$("#myTree").bind('ready.jstree', function (event, data) {
var $tree = $(this);
$($tree.jstree().get_json($tree, {
"flat": true
})).each(function (index, value) {
// lastOpenedNode.value contains the id of the last opened node
if ( nodeWasLastOpened(this.id) == true)
// ONLY OPENS TOP MOST PARENT NODES
$("#myTree").jstree().open_node(this.id);
})
});
Please help.

There is a private method you could use for that, _open_to, that will open all nodes down to the one you want to be shown. Check code below and demo - Fiddle.
$("#myTree").jstree()._open_to( lastOpenedNode.value );
or
if ( nodeWasLastOpened(this.id) )
$("#myTree").jstree()._open_to( this.id );
})

I can not populate JQuery Autocomplete input with a json request to cakephp

I am using JQuery autocomplete to send a json request to my cakephp application, the javascript code is from http://jqueryui.com/autocomplete/
$(function() {
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#tag-string" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
source:function(request, response){
$.getJSON("/articles/getTags/" + request.term + ".json", {
term : extractLast(request.term)
}, response);
},
search: function() {
// custom minLength
var term = extractLast( this.value );
if ( term.length < 1 ) {
return false;
}
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});(jQuery);
if i run the XMLHttpRequests on the chrome js console (where "c" is the term to search for)
$.getJSON("/articles/getTags/c.json")
i get this response text:
responseText: "{↵ "tags": [↵ {↵ "tag": "Calles"↵ },↵ {↵ "tag": "Circulacion"↵ },↵ {↵ "tag": "cognicion"↵ },↵ {↵ "tag": "Creatividad"↵ }↵ ]↵}"
but the input field does not populate with this values.
This is what i get (i've uploaded an image because is the easiest way to explaint it) on the "Tag String" input field

finally solved.
the json response send to jquery autocomplete must be formated with "value" and "label".
var ac = [
{
label: "One Thing",
value: "One-Thing"
},
{
label: "Two Thing",
value: "Two-Thing"
},
]

Toggle the State of a CKEditor plugin button

What is the correct way to toggle the state of a ckeditor plugin menu button based on the selection?
For example, in a link/unlink plugin, I would only want to enable unlink if the cursor is in a link.
editor.addCommand("unlink", {
exec: function (editor) {
//do something here
},
refresh: function (editor, path) {
// never seems to get fired. Is this even the right hook?
}
});
editor.ui.addButton("Unlink", {
label: "Unlink",
command: "unlink"
});
Thanks for the help!

There is CKEDITOR.commandDefinition#contextSensitive property that makes it possible to control the state of a command in a particular context.
For example, the actual implementation of Unlink button looks like:
CKEDITOR.unlinkCommand.prototype = {
exec: function( editor ) {
...
},
refresh: function( editor, path ) {
var element = path.lastElement && path.lastElement.getAscendant( 'a', true );
if ( element && element.getName() == 'a' && element.getAttribute( 'href' ) && element.getChildCount() )
this.setState( CKEDITOR.TRISTATE_OFF );
else
this.setState( CKEDITOR.TRISTATE_DISABLED );
},
contextSensitive: 1,
...
};

How to make dependant multiple selectable autocomplete using jQuery ui autocomplete

I am using jquery-ui's autocomplete in my project. It works great. Now I want to add autocomplete that is dependant on a previous select option.
I have one select and a text input with autocomplete.
<select id='type'>
<option value='languages'>Languages</option>
<option value='OS'>Operating Systems</option>
</select>
<input type='text' id='tags' />
I use a similar function for the autocomplete and it works.
$(function() {
var languages = [
"ActionScript",
"AppleScript",
"Asp",
"Scheme"
];
var os = [
"Windows",
"Mac OS X",
"Chrome",
];
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#tags" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
languages, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});
How can I link it to my onchange event of the previous select. So when I select operating systems. The autocomplete changes the array from languages to os.
I appreciate any help.

Try something along the following. You'll also need to restructure how your suggestion array is formatted slightly so it's more workable!
$("#type").change(function() {
var source = $(this).val().toLowerCase();
$("#tags").source(function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
sources[source], extractLast( request.term ) ) );
});
});
var sources = {
"languages": [
"ActionScript",
"AppleScript",
"Asp",
"Scheme"
],
"os": [
"Windows",
"Mac OS X",
"Chrome",
]
};