I am working with a project where I have to use Flexigrid.js; But I get lots of things are missing in the plug in. Like I want to disable some buttons whose I don't want to enable at initially. So, I couldn't do that.
So, I update the flexigrid.js and make that for everyone.
Hope this will help.
Thank you
If we want to add extra attributes like title, disable etc how to do this?
Answer: I have updated my flexigrid.js for doing that. I have changed the previous js and replaced fbutton div>span into input tag.
Change the following code
btnDiv.innerHTML = ("<div><span>") + (btn.hidename ? " " : btn.name) + ("</span></div>");
if (btn.bclass) $('span', btnDiv).addClass(btn.bclass).css({
paddingLeft: 20
});
if (btn.bimage) // if bimage defined, use its string as an image url for this buttons style (RS)
$('span',btnDiv).css( 'background', 'url('+btn.bimage+') no-repeat center left' );
$('span',btnDiv).css( 'paddingLeft', 20 );
if (btn.tooltip) // add title if exists (RS)
$('span',btnDiv)[0].title = btn.tooltip;
with
btnDiv.innerHTML = ("<input type='button' value='"+ (btn.hidename ? " " : btn.name)+"' name='"+ (btn.hidename ? " " : btn.name)+"'/>") ;
if (btn.bclass) $('input', btnDiv).addClass(btn.bclass).css({
paddingLeft: 20
});
if (btn.bimage) // if bimage defined, use its string as an image url for this buttons style (RS)
$('input',btnDiv).css( 'background', 'url('+btn.bimage+') no-repeat center left' );
$('span',btnDiv).css( 'paddingLeft', 20 );
if (btn.tooltip) // add title if exists (RS)
$('input',btnDiv)[0].title = btn.tooltip;
Then, check whether attribute property is exists or not and set the attributes
//checking attribute property is available or not
//Start
if (btn.attribute) {
var attributes = btn.attribute; //getting the attributes
for(var key in attributes){
if(key!="style" && key!="disable")
$('input',btnDiv).attr(key,attributes[key]);
else if(key=="disable" && attributes[key]){
$('input',btnDiv).attr("disabled","disable");
}
else if(key=="style"){ //getting style value in css
for(var style in attributes[key]){
$('input',btnDiv).css(style,attributes[key][style]);
}
}
}
}
//End
Now change the CSS for input.
.flexigrid div.fbutton input
{
float: left;
display: block;
padding: 3px;
border : none;
}
Work done. Now set your attribute property in the buttons.
Example :
buttons : [
{name: 'Add', bclass: 'add', onpress : test, attribute: {title:"add",disable:true,style:{'border':'1px solid black;'}}}
],
Reply me if any bug is found.
Thank you
Related
Hi i am extending the heading block using the filter hooks functions. so i am using the "blocks.registerBlockType" to add additional attributes. i am using the "editor.BlockEdit" to have my inspactor controls and update the attributes values. and i use the "blocks.getSaveContent.extraProps" to save the added attributes on the front end.
and indeed all attributes pass to the front side. but, the issue is that while editing none of the changes are reflected in the full site editor. the attributes are changing but it does not displayed inside the full site editor.
for example: this is a function that change the margin top attribute:
const updateMTDvalue = (newDTval) => {
setAttributes({ marginTop: (newDTval === undefined ? '' : newDTval) });
}
and as i said the new values does pass to the save function and works on the front end. but in the full site editor....nothing.
so i thought maybe i should add styles in the edit function like so:
if (attributes.desktopTop && attributes.desktopTop != undefined && attributes.desktopTop != '') {
props.attributes.style = {
...props.attributes.style,
'display': 'grid',
'--this-is-custom-variable': '#444',
marginTop: attributes.desktopTop + attributes.desktopUnit
};
}
as you can see i also try to hard code display and even a css custom property, as well as the attribute values. none of it pass the the element.
but when i have tried this:
props.attributes.style = {
...props.attributes.style,
'display': 'grid',
'--this-is-custom-variable': '#444',
marginTop: attributes.desktopTop + attributes.desktopUnit,
typography: {
fontSize: '3rem'
},
spacing: {
margin: {
top: fullTopM
}
}
};
the spacing and typography does work on the element inside the full site editor.
any idea why? why the update function itself, that update the attribute, does not change the element in the editor? and how can i add the styles to the element in the editor?
NOTICE i am talking about the full site editor, not the posts and pages editor.
So, i have this code, in react :
const sidebar = document.getElementsByClassName("pro-sidebar");
and, further, i try to change the width value using
function openNav() {
sidebar.style.width = "250px";}
and onClick={closeNav} on a button , but when i try to push the button, it gives me the next error : TypeError: Cannot read property 'style' of undefined.
Why??
We do not manually manipulate the DOM like this in React. Do something like this.
return (
<div style={styles.container} />
)
...
let styles = {
container: {
width: '20px'
}
}
You can use string interpolation on width to programmatically change it with your function.
I have a link like this:
<h1>
Title 001 - Stuff
</h1>
I want to style only "Title 001". It's possible to create a css rule to do this?
I don't remember how I did in the past, I think it was something like this:
h1 a[text="Title 001"]
But this doesn't work
And... then I want to know if it possible to do that with "Title XXX" where XXX is a dynamic number.
You can't select by content, but you can use attributes (as you nearly did already).
<h1>
Title 001 - Stuff
</h1>
a[data-content="Title 0001 - Stuff"] {
color: red;
}
Duplicate Content in Attribute
If you would like to avoid using JavaScript, you could duplicate the content (gasp) in an actual attribute, and select based on that attribute:
Title 001 - Stuff
And then select anything that starts with "Title":
a[data-content^="Title"] {
color: red;
}
Manually Test textContent
Alternatively, you'd have to take an approach with JavaScript:
var links = document.querySelectorAll( "a" );
var pattern = /^Title\s\d{3}/;
for ( var i = 0; i < links.length; i++ ) {
if ( pattern.test( links[ i ].textContent ) ) {
links[ i ].classList.add( "distinguish" );
}
}
This is simply one example of how you could add a .distinguish class to all matching elements.
Filtering with jQuery
If you are using jQuery (or a similar utility) you could accomplish this without so much verbosity:
$("a").filter(function () {
return /^Title/.test( $(this).text() );
}).addClass("distinguish");
Isolating "Title :digits:"
If you only want to isolate, and style, the Title XXX portion and you don't have access to the source templates, you could do this too with JavaScript:
$("a").html(function ( index, html ) {
return html.replace(/(Title \d+)/, "<span>$1</span>");
});
The above assumes you are using jQuery, but if you're not you can accomplish the same thing with the following:
var anchors = document.getElementsByTagName("a")
, length = anchors.length
, el;
while ( length-- ) {
el = anchors[ length ];
el.innerHTML = el.innerHTML.replace(/(Title \d+)/, "<span>$1</span>");
}
With css
Title 001 - Stuff
a[data-content^="Title"] {
color: red;
}.
But
Here is what you can do with jQuery in much smarter way,
$('a').filter(function (i, element) {
return element.text == "Title 001 - Stuff";
}).css('color','green');
Working fiddle
I'm afraid this is impossible in CSS.
You're using an attribute selector:
a[text="Title 001"]
and your <a> hasn't got an attribute called text.
You would have to use Javascript to handle such situation. There was once an idea to have a :contains() pseudo-selector but this has never been implemented.
How do I adding new aloha-button in aloha-multisplit-expanded box. (I want the ability to add unlimted number of styles. of course, not via administrator, but hard coded)
Adding style to aloha editor:
I will show here how to add simple style named “meg”
Add define to “root” for the button in sites\all\libraries\aloha\aloha\plugins\common\format\nls files.
"button.meg.tooltip":"Meg format desctiption"
At sites\all\libraries\aloha\aloha\plugins\common\format\lib\format-plugin.js add to "default button configuration" in “config” array, the name of the class, this way:
config: ['strong', ‘meg’, ‘em’….]
Add implementation for initialize style button in “initButtons” function:
Under switch(button), add ‘case’ for the new style:
Notice: 'span' tag used for implement ordinary css class with neutral tag.
Define the class “span.meg” as special style:
Add within your css main file (drupal site theme’s css) “span.meg” class:
span.meg {
color: green; }
Refresh your site for rebuild, and use the new style in floating aloha
Sample Code
// Additional special styles
case 'charm-meg':
that.multiSplitItems.push({
'name' : button,
'tooltip' : i18n.t('button.' + button + '.tooltip'),
'iconClass' : 'aloha-button ' + i18n.t('aloha-button-' + button),
'markup' : jQuery('<span class=' + button + '></span>'),
'click' : function () {
var
markup = jQuery('<span class=' + button + '></span>'),
rangeObject = Aloha.Selection.rangeObject,
foundMarkup,
selectedCells = jQuery('.aloha-cell-selected');
// formating workaround for table plugin
if ( selectedCells.length > 0 ) {
var cellMarkupCounter = 0;
selectedCells.each( function () {
var cellContent = jQuery(this).find('div'),
cellMarkup = cellContent.find(button);
if ( cellMarkup.length > 0 ) {
// unwrap all found markup text
// <td><b>text</b> foo <b>bar</b></td>
// and wrap the whole contents of the <td> into <b> tags
// <td><b>text foo bar</b></td>
cellMarkup.contents().unwrap();
cellMarkupCounter++;
}
cellContent.contents().wrap('<span class=' + button + '></span>');
});
// remove all markup if all cells have markup
if ( cellMarkupCounter == selectedCells.length ) {
selectedCells.find(button).contents().unwrap();
}
return false;
}
// formating workaround for table plugin
// check whether the markup is found in the range (at the start of the range)
foundMarkup = rangeObject.findMarkup(function() {
return this.nodeName.toLowerCase() == markup.get(0).nodeName.toLowerCase();
}, Aloha.activeEditable.obj);
if ( foundMarkup ) {
// remove the markup
if (rangeObject.isCollapsed()) {
// when the range is collapsed, we remove exactly the one DOM element
GENTICS.Utils.Dom.removeFromDOM(foundMarkup, rangeObject, true);
} else {
// the range is not collapsed, so we remove the markup from the range
GENTICS.Utils.Dom.removeMarkup(rangeObject, markup, Aloha.activeEditable.obj);
}
} else {
// when the range is collapsed, extend it to a word
if (rangeObject.isCollapsed()) {
GENTICS.Utils.Dom.extendToWord(rangeObject);
}
// add the markup
GENTICS.Utils.Dom.addMarkup(rangeObject, markup);
}
// select the modified range
rangeObject.select();
return false;
},
'tooltip' : i18n.t('<span class=' + button + '></span>'),
'toggle' : true
});
break;
I am trying to make a custome plugin in ckeditor. What I am trying to do is to make an ajax call to my server and get a list of items, which I dynamically present into a div. For each of these items I have set an onclick attribute. The problem is that I get an error that the function in the onclick attribute is not defined.
Code snippets below:
Dialog contents:
contents : [
{
id : 'information',
name : 'information',
label : 'Information',
elements : [
{
type:'vbox',
padding:0,
children:[
{
type : 'html',
html : '<div style="width: 100%; height: 150px; float: left; border: 1px solid #666666; overflow: auto;" id="results"></div>'
},
]
}]
List element which I insert in the div:
var html = '<a onclick="showMore(' + resultNum + ')">';
html += result;
html += '</a>';
return html;
I have tried to define showMore function with these two ways:
CKEDITOR.dialog.add('popup', function(editor)
{
function showMore() {}
}
and
CKEDITOR.dialog.add('popup', function(editor)
{
showMore : function() {} (in the return block)
}
like onOk, etc, but not luck with both approaches.
Is there any way to do this?
Thanks a lot in advance!!
The problem is that you must define the showMore function in your page, not as a part of the dialog.