We Keep Coding

Is there any way to make the quill better-table uneditable?

I have a quill editor with a quill-better-table module. I want it to be uneditable at certain times, so I set it to readOnly. This works for buttons and text, but the table is still editable. The context menu (operationMenu) is also available.
Is there any way to make the better-table uneditable?
const quill = new Quill('#editor-wrapper', {
theme: 'snow',
readOnly: this.readOnly || false,
modules: {
table: false, // disable table module
'better-table': {
operationMenu: {
items: {
unmergeCells: {
text: 'Another unmerge cells name'
}
}
},
toolbar: {
container: [
['tableCreate'], // custom button for create table
],
handlers: {
'tableCreate': () => this.addCreateTableBtnEvent()
}
},
}
}
})
addCreateTableBtnEvent: function () {
const table = quill.getModule('better-table');
table.insertTable(2, 2);
}

Maybe it's not an elegant solution and the modification must be taken into account if I upgrade quill-better-table.js in the future, but so far it works.
I edited the quill-better-table.js and put in checks whether the Quill editor is editable or not.
If it's not editable than there is no content menu or column tool on the quill-better-table.
You can skip any function of the quill-better-table in this way.
...
menuInitial(_ref)
{
let {
table,
left,
top
} = _ref;
var editable = this.quill.root.getAttribute("contenteditable")
if ( editable === 'true' )
{
this.domNode = document.createElement('div');
this.domNode.classList.add('qlbt-operation-menu');
..

CKeditor dialog Plugin dynamic content elements (Set on runtime like in onShow methode)

Actually, I want to show the attributes of clicked/selected element in the dialog, first, it does properly but when I close the dialog and open for any other element its show the prev attributes list because let listAttrElements = getListOfItems(elAttributes);
this line won't run again until reloading the page.
I just want to update the list whenever the modal opens for a single element, close open again for another element then values should be as per another element.
// Our dialog definition.
CKEDITOR.dialog.add( 'abbrDialog', function( editor ) {
let selection = editor.getSelection();
let element = selection.getStartElement();
let elAttributes = Object.keys(element.getAttributes());
let listAttrElements = getListOfItems(elAttributes);
return {
// Basic properties of the dialog window: title, minimum size.
title: 'Attributes',
minWidth: 400,
minHeight: 200,
// Dialog window content definition.
contents: [
{
// Definition of the Basic Settings dialog tab (page).
id: 'basic',
// label: 'Basic Settings',
// The tab content.
elements: listAttrElements
}
],
// Invoked when the dialog is loaded.
onShow: function() {
console.log('here in on show');
},
// This method is invoked once a user clicks the OK button, confirming the dialog.
onOk: function() {
CKEDITOR.dialog.getCurrent().reset();
},
onLoad: () => {
console.log('loaded')
}
};
});
function getListOfItems (attrObj) {
return attrObj.map ((el, index) => { return {
// Text input field for the abbreviation text.
type: 'checkbox',
id: index,
label: el,
// Called by the main setupContent method call on dialog initialization.
setup: function( element ) {
console.log('new setuop require')
this.setValue( element.getText() );
},
// Called by the main commitContent method call on dialog confirmation.
// set value onchange
commit: function( element ) {
element.setText( this.getValue() );
}
}});
}
Thanks in advance for the help!
https://github.com/ckeditor/ckeditor4/issues/4906#issuecomment-927666316

This is how I solved it:
editor.on('dialogHide', function (evt) {
if (evt.data.getName()=== 'abbrDialog') {
editor._.storedDialogs['abbrDialog'] = false
}
});

Change "div class" of jQuery tooltip

I´m using the jQuery UI tooltip plugin.
Now I want to change the <div class="ui-tooltip-content"> in <div class="ui-tooltip-content2"> with jQuery.
I´m using $('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content') inside the "each" function but it doesn´t show any effect. I don´t get an error in the console.
I´ve made a JSFiddle. Just inspect the tooltip and you will see that the class hasn´t changed.
Complete code:
$('*[data-id]').tooltip({
tooltipClass: "tooltipitem",
content: '<div class="loading">Laden...</p>',
hide: {
effect: "slide",
delay: "10000"
},
position: {
my: "left+153 top+20",
collision: "flipfit"
},
});
$('*[data-id]').each(function () {
let $tooltip = $(this);
let id = $tooltip.attr("data-id");
ajaxManager.add({
url: "https://xy.eu/datenbank/itemscript.php",
type: "GET",
cache: "true",
data: {
"var": id,
},
success: function (data) {
let $content = $(data);
let title = $content.siblings('[class^=item-titletl]').text()
let icon = $content.siblings('[class^=parent2]').html()
$tooltip.tooltip({
content: function () {
return [data];
},
});
$('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content');
$tooltip.attr("title", "=")
$("<img class='icon-small' src='https://xy.eu/images/icons/" + icon + "'/
>" + title + "</>").appendTo($tooltip);
}
});
});
});

The problem is that the tooltip appends when you hover over the element, that's why this code doesn't working, you element was not created yet, at that moment.
$('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content');
You can do it by adding this option, this will add additional class to ui-tooltip-content
classes: {
"ui-tooltip-content": "ui-tooltip-content2"
},
The full code will be
$tooltip.tooltip({
classes: {
"ui-tooltip-content": "ui-tooltip-content2"
},
content: function () {
return [data];
},
});
Remove this line:
$('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content');
You can check the docs here.

the problem is in your code you are trying to add and remove classes but the element is not present in DOM. I have modified your code
jQuery(document).ready(function ($) {
var ajaxManager = $.manageAjax.create('cacheQueue', {
queue: true,
cacheResponse: true
});
// Tooltip Script
$('*[data-id]').tooltip({
tooltipClass: "tooltipitem",
content: '<div class="loading">Laden...</p>',
hide: {
effect: "slide",
delay: "100000"
},
position: {
my: "left+153 top+20",
collision: "flipfit"
},
});
$('*[data-id]').each(function () {
let $tooltip = $(this);
let id = $tooltip.attr("data-id");
ajaxManager.add({
url: "https://elder-scrolls-online.eu/datenbank/itemscript.php",
type: "GET",
cache: "true",
data: {
"var": id,
},
success: function (data) {
let $content = $(data);
let title = $content.siblings('[class^=item-titletl]').text()
let icon = $content.siblings('[class^=parent2]').html()
$tooltip.tooltip({
content: function () {
return [data];
},
});
setTimeout(AdAndRemoveClass,500);
$tooltip.attr("title", "=")
console.log($tooltip)
$("<img class='icon-small' src='https://www.elder-scrolls-online.eu/images/icons/" + icon + "'/ >" + title + "</>").appendTo($tooltip);
}
});
});
});
function AdAndRemoveClass(){
var tool= $('.ui-tooltip-content');
if(tool.length ==0){
setTimeout(AdAndRemoveClass,500);
}
else{
console.log(tool)
tool.addClass('ui-tooltip-content2');
tool.removeClass('ui-tooltip-content');
}
}
check the working fiddle here

Semantic-ui popup Dynamic content

Semantic-ui ver. 2.0.8.
I currently use the following method to load dynamic content in a pop-up
JAVASCRIPT
var popupContent = null;
var popupLoading = '<i class="notched circle loading icon green"></i> wait...';
$('.vt').popup({
inline: true,
on: 'hover',
exclusive: true,
hoverable: true,
html: popupLoading,
variation: 'wide',
delay: {
show: 400,
hide: 400
},
onShow: function(el) { // load data (it could be called in an external function.)
var then = function(r) {
if (r.status) {
popupContent = r.data; // html string
} else {
// error
}
};
var data = {
id: el.dataset.id
};
ajax.data('http://example.site', data, then); // my custom $.ajax call
},
onVisible: function(el) { // replace popup content
this.html(popupUserVoteContent);
},
onHide: function(el) { // replace content with loading
this.html(popupLoading);
}
});
HTML
<h2 data-id="123" class="vt">10</h2>
<div class="ui popup" data-id="123"></div>
There 's a way to simplify the whole process?
For example with a element.popup ('refresh') after loading the new content?
I tried:
JAVASCRIPT
...
if (r.status) {
$('.ui.popup[data-id="123"]').html(r.data);
}
...
but it does not work.
I also tried using (replace) data-content into h2.vt but nothing.

The only improvement that comes to mind is to make the code a little cleaner (you only really need the onShow event, which fires before the popup shows) and avoid using a global variable (popupContent).
That said, the main idea is mostly the same - when the popup is supposed to show, you replace its content with some fake content (the loading animation), then trigger $.ajax and update the popup content as soon as the request completes.
var popupLoading = '<i class="notched circle loading icon green"></i> wait...';
$('.vt').popup({
inline: true,
on: 'hover',
exclusive: true,
hoverable: true,
html: popupLoading,
variation: 'wide',
delay: {
show: 400,
hide: 400
},
onShow: function (el) { // load data (it could be called in an external function.)
var popup = this;
popup.html(popupLoading);
$.ajax({
url: 'http://www.example.com/'
}).done(function(result) {
popup.html(result);
}).fail(function() {
popup.html('error');
});
}
});

Set jsTree Node to "Undetermined" State

I'm using jsTree to show a tree with checkboxes. Each level of nodes is loaded on-demand using the json_data plugin.
If a node's descendent is checked, then that node should be in an "undetermined state" (like ACME and USA).
The problem is, the tree starts out collapsed. ACME looks unchecked but should be undetermined. When I finally expand to a checked node, jsTree realizes the ancestors should be undetermined.
So I need to be able to put a checkbox in the undetermined state without loading its children.
With jsTree you can pre-check a box by adding the jstree-checked class to the <li>. I tried adding the jstree-undetermined class, but it doesn't work. It just puts them in a checked state.
Here's my code:
$("#tree").jstree({
plugins: ["json_data", "checkbox"],
json_data: {
ajax: {
url: '/api/group/node',
success: function (groups) {
var nodes = [];
for (var i=0; i<groups.length; i++) {
var group = groups[i];
var cssClass = "";
if(group.isSelected)
cssClass = "jstree-checked";
else if(group.isDecendantSelected)
cssClass = "jstree-undetermined";
nodes.push({
data: group.name,
attr: { 'class': cssClass }
});
}
return nodes;
}
}
}
})
My Question
How do I set a node to the undetermined state?

I had the same problem and the solution I found was this one:
var tree = $("#tree").jstree({
plugins: ["json_data", "checkbox"],
json_data: {
ajax: {
url: '/api/group/node',
success: function(groups) {
var nodes = [];
for (var i = 0; i < groups.length; i++) {
var group = groups[i];
var checkedState = "false";
if (group.isSelected)
checkedState = "true";
else if (group.isDecendantSelected)
checkedState = "undetermined";
nodes.push({
data: group.name,
attr: { 'checkedNode': checkedState }
});
}
return nodes;
},
complete: function () {
$('li[checkedNode="undetermined"]', tree).each(function () {
$(this).removeClass('jstree-unchecked').removeClass('jstree-checked').addClass('jstree-undetermined');
});
$('li[checkedNode="true"]', tree).each(function () {
$(this).removeClass('jstree-unchecked').removeClass('jstree-undetermined').addClass('jstree-checked');
});
$('li[checkedNode="false"]', tree).each(function () {
$(this).removeClass('jstree-checked').removeClass('jstree-undetermined').addClass('jstree-unchecked');
});
}
}
}
});
Hope it helps you!

Maybe this changed in the meanwhile...
But now (version 3.0.0) the really simple solution works:
{
id : "string" // will be autogenerated if omitted
text : "string" // node text
icon : "string" // string for custom
state : {
opened : boolean // is the node open
disabled : boolean // is the node disabled
selected : boolean // is the node selected
undetermined : boolean // is the node undetermined <<==== HERE: JUST SET THIS
},
children : [] // array of strings or objects
li_attr : {} // attributes for the generated LI node
a_attr : {} // attributes for the generated A node
}
Learned directly from the source code at: https://github.com/vakata/jstree/blob/6507d5d71272bc754eb1d198e4a0317725d771af/src/jstree.checkbox.js#L318

Thank you guys, and I found an additional trick which makes life a little better, but it requires a code change in jstree.js. Looks like an oversight:
Look at the get_undetermined function, and scan for the keyword break. That break should be a continue.
If you make that one change, then all you need to do is provide the state (for the main object and its children), and jstree will automatically take care of cascading upwards for undetermined state. It was bailing out early from the scripting and failing to catch all the undetermined nodes properly, requiring the above ugly workarounds for styling and such.
Here's my config (no special attrs or complete() function required) using AJAX:
var tree = $('#jstree').jstree({
"core": {
"themes": {
"variant": "large"
},
'data': {
'url': function (node) {
return "{{API}}/" + node.id + "?product_id={{Product.ID}}"
},
'dataType': 'json',
'type': 'GET',
'success': function (data) {
if (data.length == 0) {
data = rootStub
}
return {
'id': data.id,
'text': data.text,
'children': data.children,
'state': data.state,
}
}
}
},
"checkbox": {
// "keep_selected_style": false,
"three_state": false,
"cascade": "undetermined"
},
"plugins": ["wholerow", "checkbox"],
});