select figure element in ckeditor - capture click on figure element (or any children) - ckeditor

i'm looking for a way to capture and selection a figure element (or any of its children)
ideally, i would like this to bypass the selections of imgs (including objectResizing on imgs) when they are within a figure tag.
i've played around with capturing the events using the currentInstance event. not sure if this is the best approach or whether there is another event. Obviously, i need some kind of event bubbling to know whether the event target (ie. the img) is within a figure element.
i have a sense of how to do this in javascript/jquery, but i'm looking for the proper ckeditor approach, since this is done in ckeditor with imgs and tables.
i have found one possible solution, which enables me to select the figure element, whether i click on one of its children or the figure itself. however, a double click triggers other events associated with the children, so i need to find a way to cancel those other events in this case
editor.on( 'selectionChange', function( evt )
{
if ( editor.readOnly )
return;
/*
* only select our figure elements
*/
var element = evt.data.path.lastElement && evt.data.path.lastElement.getAscendant( 'figure', true );
if ( element && element.getName() == 'figure' && element.getAttribute( 'data-media-id' ) && element.getChildCount() ) {
editor.getSelection().selectElement(element);
}
});
editor.on( 'doubleclick', function( evt )
{
var element = evt.data.element.getAscendant( 'figure', true );
if ( !element.isReadOnly() )
{
if ( element.is( 'figure' ) || element.getParent().is( 'figure' ) )
{
editor.getSelection().selectElement( element );
editor.execCommand('imagemanager', element);
}
}
});

turns out, i just need to pretend to open a dialog. my issue with the doubleclick is that i am not using ckeditor's dialogs (because i am opening a ajax window and building it myself). so this prevents other windows from opening
editor.on( 'doubleclick', function( evt )
{
var element = evt.data.element.getAscendant( 'figure', true );
if ( !element.isReadOnly() )
{
if ( element.is( 'figure' ) || element.getParent().is( 'figure' ) )
{
editor.getSelection().selectElement( element );
editor.execCommand('imagemanager', element);
// :HACK: pretend to open a dialog, cancels other dialogs from opening
evt.data.dialog = '';
}
}
});

Related

In three.j,s what exactly does Object3D's traverseVisible() method do?

Does it:
Merely select objects within the camera's view frustum
Or does it actually do a z-depth type visibility check and only select those that are fully/partly visible on the screen - for a particular view
You can see what it does in the source code by clicking on the link at the bottom of the Object3D documentation.
traverseVisible( callback ) {
if ( this.visible === false ) return;
callback( this );
const children = this.children;
for ( let i = 0, l = children.length; i < l; i ++ ) {
children[ i ].traverseVisible( callback );
}
}
It only performs a check to see if visible === false, nothing more. There's no frustum or occlusion checks.

Navigating through different section in CKEditor 5

I want to move cursor through specific paragraph/section on clicking of a particular key.
how to to achieve this in CKEditor 5
editor.editing.view.document.on( 'keydown', ( evt, data ) => {
if ( data.keyCode == 39 ) {
//move cursor to next paragraph or element with some specific id
}
} );

CKEDITOR READONLY enable other buttons

I have a problem.
When I make the editor 'readonly' some of the buttons (copy, preview, full screen) stay enabled.
Normal
Select some text
How I can enabled other buttons when I select the text? (for example enabled button 'BGColor')
You can do something like this
Look for selection event.
CKEDITOR.instances["textarea"].on( 'selectionChange', function( evt ) {
// get desired command from ckeditor
var myCommand = this.getCommand( 'CKEDITOR_COMMAND_NAME' );
var mySelection = null;
// check if something is selected
var mySelection = this.getSelection().getNative() || this.window.$.getSelection() || this.document.$.selection;
if (!mySelection) {
// if not stay disable
myCommand.disable();
} else {
//if yes enable command
myCommand.enable();
}
});

SVG ― click halts animation in Chromium and Safari

right now I have totally no idea what could cause this strange bug and I hope to able to describe it as good as possible, but the code has grown big and to post all of it wont result in a clear question.
1. Setup:
A Box2dWeb animation in the background, where the triggering of the Step() method is done by window.requestAnimationFrame following the game loop implementation here in the »That's it« section. Every time the »draw« method is called, the b2body's transformation is handed over to a <div> and to a <g>. The <div> sets up the desired animation and the <g> acts as monitor of the body and resides into an inline <svg>.
Clicks are globally caught and if the user clicks on the <div> or on the <path> the target gains focus what leads to applying forces on the b2body.
2. Bug:
All in all everything works as expected, the animation runs fluid for the <div> and its corresponding <g>, clicking on both, the focus state changes correctly, BUT in chromium and Safari the <g> stops showing up the animation, when the user clicked on the <g>.
Here is the code that is used to set the transformation from the b2Body to the <g>:
function draw(){
var str = this._sprite.transform;
var mtrs = this._transformItem.matrix;
mtrs.a = str.a1;
mtrs.c = str.a2;
mtrs.e = str.a3;
mtrs.b = str.b1;
mtrs.d = str.b2;
mtrs.f = str.b3;
this._transformItem.setMatrix( mtrs );
}
where this._transformItem points to <g>.transform.baseVal.getItem( 0 ) and this._sprite.transform to a transform matrix of custom typ.
Here is the code to catch the clicks:
function getClickTargets( target ){
var targets = { 'sprite' : null, 'link' : null };
while( target ){
if( target.nodeName.toLowerCase() === 'a' &&
targets.link == null ){
targets.link = target;
}
if( target.hasAttribute &&
target.hasAttribute( 'data-sprite-id' ) &&
targets.sprite == null ){
targets.sprite = this._stage.getSpriteById(
target.getAttribute( 'data-sprite-id' ) );
}
if( target.nodeName.toLowerCase() == 'path' ){
var attr = target.getAttributeNS( NS, 'monitor-for-sprite' );
if( attr != '' ){
targets.sprite = this._stage.getSpriteById( attr );
}
}
if( targets.link != null && target.sprite != null ){
break;
}
target = target.parentNode;
}
return targets;
};
In FF, IE9/10, Chrome and Opera everything runs as it should and the only thing that causes the misbehavior is that a »click« happens with a <path> as target. The matrices a correct because the animation keeps on running correct for the <div>.
What could cause this, where should I search, does anybody has an idea or had a similar bug?
EDIT:
Might this be caused by the fact that the events are caught and processed »asynchronously« to the overall running »update ticks« ?
Edit 2:
I noticed that the same problem occurs if I am starting the web inspector and watch the elements, but than all <g> elements freeze.
Edit 3:
I have got it running now, at least in chromium, but I guess Safari will do it also. I slightly changed the »draw« function to this:
function(){
var str = this._sprite.transform;
var mtrs = this._transformItem.matrix;
mtrs.a = str.a1;
mtrs.c = str.a2;
mtrs.e = str.a3;
mtrs.b = str.b1;
mtrs.d = str.b2;
mtrs.f = str.b3;
//this._transformItem.setMatrix( mtrs ); //old line
this._transformList.replaceItem(
this._transformList.createSVGTransformFromMatrix( mtrs ), 0 ); //new working line
}
If somebody knows why it only works with a new »SVGTransform« it would be nice to let me know. Otherwise I assume that this is a kind of bug.

SlickGrid - Editable Grid with Controls Visible by default

The SlickGrid supports editors for a cell that can be configured to be displayed on click or double click. However I don't see an option where, the editor is VISIBLE by default for all cells without having to click/double click on the cell.
Is it possible to support editors in slick grid where the editors are
"init" by default for all cells?
Is there a known workaround?
Thank you.
I know it's not exactly what you asked for, but I thought I'd add the code below in case anyone finds it useful. It's a semi-workaround and it at least lets the user navigate around the grid and start typing in the cell to edit, without having to "initialise" the edit first by pressing Enter or double-clicking the cell; a bit like editing an MS Excel sheet.
myGrid.onKeyDown.subscribe(function (e, args) {
var keyCode = $.ui.keyCode,
col,
activeCell = this.getActiveCell();
/////////////////////////////////////////////////////////////////////
// Allow instant editing like MS Excel (without presisng enter first
// to go into edit mode)
if (activeCell) {
col = activeCell.cell;
// Only for editable fields and not if edit is already in progress
if (this.getColumns()[col].editor && !this.getCellEditor()) {
// Ignore keys that should not activate edit mode
if ($.inArray(e.keyCode, [keyCode.LEFT, keyCode.RIGHT, keyCode.UP,
keyCode.DOWN, keyCode.PAGE_UP, keyCode.PAGE_DOWN,
keyCode.SHIFT, keyCode.CONTROL, keyCode.CAPS_LOCK,
keyCode.HOME, keyCode.END, keyCode.INSERT,
keyCode.TAB, keyCode.ENTER]) === -1) {
this.editActiveCell();
}
}
}
}
No. The grid is designed to have one cell editable at a time.
Below is what I ended up with (improved version njr101's answer) to make this work. I've added a check for CTRL key so it doesn't break the copy paste plugin I use on the grid.
function (e) {
var keyCode = $.ui.keyCode,
col,
activeCell = this.getActiveCell(),
activeCellNode = this.getActiveCellNode();
var isInEditMode = $(activeCellNode).hasClass("editable");
if (activeCell && !isInEditMode) {
col = activeCell.cell;
if (this.getColumns()[col].editor && !e.ctrlKey) {
if ($.inArray(e.keyCode, [keyCode.LEFT, keyCode.RIGHT, keyCode.UP,
keyCode.DOWN, keyCode.PAGE_UP, keyCode.PAGE_DOWN,
keyCode.SHIFT, keyCode.CONTROL, keyCode.CAPS_LOCK,
keyCode.HOME, keyCode.END, keyCode.INSERT,
keyCode.TAB, keyCode.ENTER]) === -1) {
this.editActiveCell();
}
}
}
};
and dont forget to subscribe:
slickGrid.onKeyDown.subscribe();
Update to use editor define in row metadata and not in column definition.
In my case, one row of two contains in cell 1 text editor and one row of two contains nothing.
grid.onKeyDown.subscribe( function ( e, args ) {
var keyCode = $.ui.keyCode;
var activeCell = this.getActiveCell();
if( activeCell ) {
// get metadata
var columnDefinition = grid.getColumns()[ activeCell.cell ];
var rowMetadata = dataView.getItemMetadata && dataView.getItemMetadata( activeCell.row );
var rowColMetadata = rowMetadata && rowMetadata.columns;
rowColMetadata = rowColMetadata && ( rowColMetadata[ columnDefinition.id ] || rowColMetadata[ activeCell.cell ] );
if ( rowColMetadata && rowColMetadata.editor && !this.getCellEditor() ) {
if( $.inArray( e.keyCode, [keyCode.LEFT, keyCode.RIGHT, keyCode.UP, keyCode.DOWN, keyCode.PAGE_UP, keyCode.PAGE_DOWN,
keyCode.SHIFT, keyCode.CONTROL, keyCode.CAPS_LOCK, keyCode.HOME, keyCode.END, keyCode.INSERT,
keyCode.TAB, keyCode.ENTER]) === -1 ) {
this.editActiveCell();
}
}
}
});

Resources