I'm currently reading the CKEditor 5 docs, and trying to understand how I could achieve the following conversion:
For every paragraph model, convert the view to a div with an inner span.
The following gets me half way there...
editor.conversion.elementToElement({ model: 'paragraph', view: 'div', converterPriority: 'high' })
And now all paragraph models are converted to divs (instead of <p> elements)
But how can I add the additional span element so that each paragraph model is rendered as:
<div><span>Text here...</span></div>
Will I have to switch to more specialized upcast, dataDowncast, and editorDowncast converters? Or can this still be handled via editor.conversion.elementToElement?
Update:
I've tried the following - which is very close:
editor.conversion.for('downcast').elementToElement({
model: 'paragraph',
view: (modelElement, conversionApi) => {
const { writer } = conversionApi
const divElement = writer.createContainerElement('div')
const spanElement = writer.createAttributeElement('span')
conversionApi.mapper.bindElements(modelElement, spanElement)
writer.insert(writer.createPositionAt(divElement, 0), spanElement)
return divElement
},
converterPriority: 'high',
})
However, this outputs the following:
<div>
Text here...
<span></span>
</div>
Struggling to get the modelElement inside the span :-(
For anyone else looking for this, I've posted a working solution here... CKEditor 5 Downcast Converter for Paragraph To Wrap Text in Span
I have a shop with 2 combinations. Yes and No. I added a customizable text to my products but I would like this text area to appear only when "yes" is selected. Can someone please help me do this?
Thanks!
Edit:
Thank you for replying. My code looks like this now:
//init the serialScroll for thumbs
$('#thumbs_list').serialScroll({
items:'li:visible',
prev:'#view_scroll_left',
next:'#view_scroll_right',
axis:'x',
offset:0,
start:0,
stop:true,
onBefore:serialScrollFixLock,
duration:700,
step: 2,
lazy: true,
lock: false,
force:false,
cycle:false
});
$('#group_22').change(function() {
$('.idTab10').toggle();
});
Sadly it doesn't work. Nothing happens. The (Yes) select ID is 22. Please advise.
I suggest you do that with jQuery.
You just have to modify the file /themes/your_theme/js/product.js
In this file, search for:
$(document).ready(function()
{
...
});
At the end of it, add the following code:
toggleCustomization(); // We launch the function on page load
$('#group_4').change(function() { // We launch the function when select is changed
toggleCustomization();
});
And right after closing $(document).ready(function(), add this function :
function toggleCustomization() { // Hide or Show Customization Form and Tab
if($('#group_4').val() == '23') { // We hide Customization Form and Tab if No is selected
$('#idTab10').hide();
$('a[href="#idTab10"]').hide();
} else { // We show Customization Form and Tab if Yes is selected
$('#idTab10').show();
$('a[href="#idTab10"]').show();
}
};
Where:
group_4 is the id of your Yes-No select
idTab10 is the id of the bloc containing all information about your customization field
23 is the value of 'No' in your select
I have a spider plot in using the graphing library of Dojo defined like this:
require([
"dojox/charting/Chart",
"dojox/charting/themes/Claro",
"dojox/charting/plot2d/Spider",
"dojox/charting/action2d/Tooltip",
"dojox/charting/widget/SelectableLegend",
"dojox/charting/axis2d/Default"
], function (Chart, theme, Spider, Tooltip, Legend, Default) {
var chart = new Chart(element).setTheme(theme).addPlot("default", {
type: Spider,
radius: 200,
fontColor: "black",
labelOffset: "-20"
});
var colors = ["blue", "red", "green", "yellow", "purple", "orange", "teal",
"maroon", "olive", "lime", "aqua", "fuchsia"];
$.each(factors, function (index, factor) {
chart.addAxis(factor.name, {
type: Default,
min: factor.min,
max: factor.max
});
});
$.each(presets, function (pIndex, preset) {
var data = [];
$.each(factors, function (fIndex, factor) {
data[factor.name] = preset.values[fIndex];
});
chart.addSeries(preset.short, data, {
fill: colors[pIndex % colors.length]
});
});
new Tooltip(chart, "default");
chart.render();
new Legend({
chart: chart,
horizontal: false
}, $(element).next(".legend")[0]);
});
I add a series for every member of an array called presets and I use a selectable legend that lets the user turn them on or off as they want. However, what I can't seem to find in the docs is how to start a series in the unselected, not visible state? What I ideally want to do is cap the number of series visible when the page loads because in some cases I have up to 14 presets and it just looks a mess until the user deselects a bunch. So I'd like to have, say, every preset above the first 5 be hidden at the start.
Here's a crude fiddle I've knocked to demonstrate. What I want is to have some of the series unselected when the plot is first displayed.
Update: I tried adding this after adding my series:
var checkboxes = $(".dijitCheckBoxInput").each((index, elem) => {
if (index > 4) {
elem.click();
}
});
Which works, but seems very fragile. If they change the class assigned to checkboxes, it'll break. Also, it prohibits me using more than one set of dojo checkboxes because I don't have a good way to tell the difference. (Note, the IDs of the checkboxes added by the SelectableLegend are dijit_form_CheckBox_0, dijit_form_CheckBox_1, etc, which also gives no useful information as to what they are related to). I thought I might be able to use the legend placeholder div as a way to select the descendant checkboxes, but it appears that Dojo replaces the placeholder entirely with a table.
i looked into the dojo code and found the area in which the shapes are toggled on & off whitin the SelectableLegend.js :
var legendCheckBox = query(".dijitCheckBox", legend)[0];
hub.connect(legendCheckBox, "onclick", this, function(e){
this._toggle(shapes, i, legend.vanished, originalDyn, seriesName, plotName);
legend.vanished = !legend.vanished;
e.stopPropagation();
});
The toggling process is very complex and is based on many local attributes:
_toggle: function(shapes, index, isOff, dyn, seriesName, plotName){
arrayUtil.forEach(shapes, function(shape, i){
var startFill = dyn.fills[i],
endFill = this._getTransitionFill(plotName),
startStroke = dyn.strokes[i],
endStroke = this.transitionStroke;
if(startFill){
if(endFill && (typeof startFill == "string" || startFill instanceof Color)){
fx.animateFill({
shape: shape,
color: {
start: isOff ? endFill : startFill,
end: isOff ? startFill : endFill
}
}).play();
}else{
shape.setFill(isOff ? startFill : endFill);
}
}
if(startStroke && !this.outline){
shape.setStroke(isOff ? startStroke : endStroke);
}
}, this);
}
I tried also checking & unchecking the dijit/form/Checkbox in a legend manually, but that does not trigger the _toggle function in any case, even if you do a render() / fullrender() on the chart.
With that in mind it seems that there is no other possibilty to toggle the series on and off than by firing the onclick events manually.
To make your code less fragile, you could access the Checkbox widgets within the legend manually using:
query(".dijitCheckBox", legend); // Should deliver an array containing
the widgets.
and triggering the onclick event on them. Their keynumber in the array should correspond to the order the series where added...
Dojo is a fine piece of work, please dont stop working with it !
dojox/charting/Series has an attribute called dirty which according to the API docs is a "flag indicating whether or not this element needs to be rendered".
Alternately, if you are limiting the display of some series you can write a separate interface for adding them. For example, loop over the first 5. Then create a select box or list of check boxes with all entries and an onchange event that calls chart.addSeries.
Keeping a reference to each series you create will allow you to later call destroy() or destroyRecursive() on it if the user no longer wishes it displayed.
So while ideally you could toggle the display of these series, the worst case senerio is that you just add, destroy, and read based on some user input.
Using a templated widget will allow you to keep this interface and the chart tightly linked and support reuse.
BTW, consider using "dojo/_base/array" and "dojo/query" in place of the jquery
I think i've got it !
I found another way to access the checkboxes ! It's the same way dojo uses internally to connect the "toggle code" to the onclick event. First take a look at this from SelectableLegend.js (Lines 150 - 156):
// toggle action
var legendCheckBox = query(".dijitCheckBox", legend)[0];
hub.connect(legendCheckBox, "onclick", this, function(e){
this._toggle(shapes, i, legend.vanished, originalDyn, seriesName, plotName);
legend.vanished = !legend.vanished;
e.stopPropagation();
});
It looks like they use the ".dijitCheckBox" class to find the checkbox dom element and connect to it using dojo/connect. Now based on that, i made this function:
function toggleSeries (legend,num) {
dojo.query("*",legend.legends[num])[0].click();
dijit.findWidgets(legend.legends[num])[0]._onClick(); }
It doesn't use any class definition (because of the *) and it accesses the areas where the checkboxes are from within the SelectableLegend. It needs the SelectableLegend and the number of the series you want to deactivate as parameters. Here the jsfiddle example with this function & hiding all 4 of your series with it:
http://jsfiddle.net/luciancd/92Dzv/17/
Also please notice the "onDomReady" Option in jsfiddle, without it: doesnt work in IE.
And the ready function within the code !
Lucian
I have updated your code http://jsfiddle.net/92Dzv/18/
Here is the key to toogle.
dom.byId(le._cbs[0].id).click();
dom.byId(le._cbs[2].id).click();
Choose the index of your legend and set to _cbs.
By this way le._cbs[0].id you will get the real id of checkbox (that inside in the widget) and then just use click()
Note : le is came from here.
var le = new Legend({
chart: chart,
horizontal: false
}, legend);
I have a bar chart and i want each bar to render in different color. So i tried using thems,
sample code is:
Ext.define('Ext.chart.theme.FancyTheme',{
extend : 'Ext.chart.theme.Base',
constructor : function(config){
this.callParent([Ext.apply({
colors : ['#9CC5C9','#D5544F','#D5544F','#5288DB']
},config)])
}
});
and my chart code is:
var tc = Ext.create('Ext.chart.Chart',{
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate : true,
insetPadding : 20,
theme: 'FancyTheme',
But all the bar colors are changing to same color i.e, to '#9cc5c9' in above example.
But i want bars to render in differnt colors as mentioned in theme. One more thing i dont want to use render function to render coloirs.
So wat is the soln to get different colors. Can anyone help me out!!
Sorry, but using a renderer is the correct solution. The colors property is used for successive series in a chart, such as multiple areas in the same plot space.
I don't understand why you don't want to use a renderer, but here's all you would need to do:
renderer: function(sprite, record, attr, index, store) {
var colors = ['#9CC5C9','#D5544F','#D5544F','#5288DB'];
return Ext.apply(attr, {
fill: colors[index % colors.length]
});
}
You can also extend Ext.chart.series.Bar. For example:
Ext.define('Ext.chart.series.MyBar', {
extend: 'Ext.chart.series.Bar',
//type: 'mybar',
alias: 'series.mybar',
getPaths: function() {
this.callParent(arguments);
var items = this.items,
i, iLen = items.length,
colors = this.colorArrayStyle,
colorsLength = colors && colors.length || 0;
for (var i = 0; i < iLen; ++i) {
items[i].attr.fill = colors[i % colorsLength];
}
}
});
Then in series you should use mybar instead of bar.
I have a TitlePane which I want to change the font color. I just cant. I need to do this programatically.
So far I have something like this:
var newPane = new TitlePane({title: paneName});
I have tried this as well:
var newPane = new TitlePane({title: paneName, id: paneName, style:{color:'red'}});
This sets the content of the pane red and no id is added anywhere :(
As per this API info I can only set three properties (title, content and open). How could I add an id and style(color) to the TitlePane! pls
Style it via Cascading Style Sheets. See how it works at jsFiddle: http://jsfiddle.net/phusick/63dHY/
To change the color of TitlePane title text by id
var titlePane1 = new TitlePane({
id: "titlePane1",
title: "some red title",
content: "Collapse me!"
}, "titlePane1");
use the following style:
#titlePane1 .dijitTitlePaneTextNode {
color: red;
}
Or by class
var titlePane2 = new TitlePane({
title: "some blue title",
content: "Collapse me!"
}, "titlePane2");
domClass.add(titlePane2.domNode, "blue"); // as of 'dojo/dom-class' module
use the following style:
.blue .dijitTitlePaneTextNode {
color: blue !important;
}
or change it directly via JavaScript (which I do not recommend):
titlePane2.titleNode.style.color = "green";
newPane.style({color: "red"});
OR
query(newPane).style({color: "red"});
OR
newPane.style.color = "red";