Feature to make it possible to hook into elementspath events

[Joel]

I need some way to hook into events for elementspath items. I imagine it would not be hard to add some kind of event that happens when elementspath is rightclicked.

This would make it possible to build a custom elementspath context menu - which I need and which stops me from upgrading.

This could be done my modifying the current elementspath\plugin.js and adding to the path item template something like oncontextmenu="HoweverCKEHandlesEvents(event, currentElementsPath, index)" and then defining an onContextMenu handler exactly like onClick is defined;

var onClickHanlder = CKEDITOR.tools.addFunction( onClick );

// imitate onclick and build a contextmenu handling system like it...
function onContextMenu(elementIndex, event) {
	editor.focus();
	var element = editor._.elementsPath.list[elementIndex];
	var data = {};
	data.event = event;
	data.element = element;
	editor.execCommand('elementspathContextmenuForElement', data);
}

var onContextMenuHanlder = CKEDITOR.tools.addFunction(onContextMenu);

---

This would make it possible to create plugins that Greatly extend the usage of elementspath and is really not that very difficult to implement and wouldn't take that link I think. What do you think? This is a must have for me but I Really do not want to create my own "fork" of CKE to get this done. How quickly could this make it into the main trunk?

[Joel]

I managed to make the logic flow. In elementspath\plugin.js the following code would fire the event. I would submit/commit the code or discuss in the developers list if I had any idea how. I'll send a link to the list as a RFC. If anyone writes up some (detailed; for idiots) guide on how to commit this to github I would love to do so just to help out others that might benefit from a context menu on elementspath. Also I don't know how to JSDOC comment the event, sorry.

function onContextMenu( elementIndex ) {
	editor.focus();
	var element = editor._.elementsPath.list[ elementIndex ];
	var o = {};
	o.editor = editor;
	o.elementIndex = elementIndex;
	o.element = element;
	o.elementsPath = editor._.elementsPath;
	editor.fire( 'elementspathItemContextMenu', o);
}

var onContextMenuHanlder = CKEDITOR.tools.addFunction( onContextMenu );

The following line would be added to the path item template

' oncontextmenu="CKEDITOR.tools.callFunction({ctxMenuFn},{index}); return false;"' +

And this would be added to the code that creates the item

var item = pathItemTpl.output({
	...
	clickFn: onClickHanlder,
	ctxMenuFn: onContextMenuHanlder
});

And this could be used to attach/hook to the event

CKEDITOR.on( 'instanceReady', function(e) {
	e.editor.on('elementspathItemContextMenu', function(a,b,c) {
		console.log(a); // logic must flow
	});
});

[Jakub Ś]

If I understand correctly you want elements path to provide event hooks.

You want to use it to create elements path context menu but of course this can be used for other ideas.

Both ideas in fact sound interesting.

---

If anyone writes up some (detailed; for idiots) guide on how to commit this to github

Not detailed description but it's a start.

To get your proposed fix tested and applied (if it is correct) please get CKEditor 4 code from ​https://github.com/ckeditor/ckeditor-dev, prepare your fix and make a "pull request" (here is the example list of pull requests ​https://github.com/ckeditor/ckeditor-dev/pulls?direction=desc&page=1&sort=created&state=open). In comment please specify link to bug for which this fix was prepared. This is much faster way to get proposed fix implemented/rejected.

[Jakub Ś]

@req could you perhaps describe your use case exactly - what menu you want to apply to elements path?

[Joel]

Replying to j.swiderski: In my case from the menu the user could select one or many custom classes and attributes for the element. I want to post-process my content after saving and the custom classes would control the post-processing flow.

The hierarchy is important for my classes as the custom classes can control how and when an element is displayed (not these but could be similar: showOnlyToMembers, doNotIncludeInPDF, dontShowToLoggedInUsers, doNotTranslate, fadeIn, replaceWithUsername, thisIsWarningMessage). Especially in the case of nested lists or tables it's important that the user can easily see the current hierarchy and focus on the exact element they are manipulating.

Also, it could provide a place for options that are not included in all existing menus, like adding IDs for any element. I like to do this instead of adding to existing dialogs because this way my custom options are boxed into their own containers without a dependency and there are no styling issues.

Now its doable with something like

// inside instanceReady
editor.on('elementsPathUpdate', function( ev ) {
	//...
	$('.cke_path_item').each(function(e) {
		//...
		$(this).on('contextmenu', function(){
			// create menu here
		});
	});
});

[Jakub Ś]

NOTE: Perhaps single elements path element can be changed in two buttons. One button is element name that after click selects whole element (this is how it works now), second button is small triangle that after click expands menu (like menu button).

[Jakub Ś]

Similar issue has been reported in #13255.