Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Balloon Toolbar #933

Closed
mlewand opened this issue Sep 19, 2017 · 3 comments
Closed

Balloon Toolbar #933

mlewand opened this issue Sep 19, 2017 · 3 comments
Labels
status:confirmed An issue confirmed by the development team. target:major Any docs related issue that should be merged into a major branch. type:feature A feature request.
Milestone

Comments

@mlewand
Copy link
Contributor

mlewand commented Sep 19, 2017

Are you reporting a feature request or a bug?

Feature request

Browser Compatibility

All supported browsers, except IE8 (see the "Internet Explorer 8 Compatibility" comment)

Provide detailed reproduction steps (if any)

We need a lightweight, inline toolbar component that could be displayed inside of an editor.

A Balloon Toolbar pointing to a Placeholder widget

The toolbar should be pointing at an element in the content, and should be updated automatically if the pointed element is moved, for example due to scrolling / browser resizing etc.

It should be possible to customize the toolbar appearance using CSS.

Contexts

This feature should also support a case where multiple different toolbars are registered at the same time, however only one (best match) should be visible at a time.

For instance there could be Link,Unlink,Image2 buttons for image2 widgets, NumberedList,BulletedList buttons for list elements and Bold,Underline buttons for any other selection.

In the case above we listed 3 different context, and based on selection only the best match will be shown by the Balloon Toolbar manager. This feature was added in #1195.

Example usages

  • Images (linking, image properties)
  • Tables (any operations from tabletools, so insert column, insert row, insert cell, cell properties etc.)
  • Widgets (for instance refetch option for embedded content)
  • Lists (so you can change list type)
  • Inline styling (bold, underline, italics)

Styling compatibility

If possible, the toolbar should look decently on any 3rd party skin that does not have dedicated styles for balloon toolbar. That was solved in #1136.

Technical details

Ideally it would be great if it's compatible with the existing button interfaces (I'm looking at CKEDITOR.ui.button) - it's fine to use a subclass though.

It make sense to extend the Balloon Panel plugin as it has a lot of logic that we should extend.

It should not have any dependencies on the standard Toolbar plugin.

Toolbar context matching

Context matching should be performed based on following criteria (starting with the highest priority):

  • Callback
  • Widget
  • CSS matching

Toolbar positioning

Contrary original Balloon Panel plugin which used any position possible - the toolbar should prefer displaying below the pointed element. Reason for this is that this way it will better integrate with mobile browsers, which display context menu over the selection.

Native mobile context menu at the top and Balloon Toolbar at the bottom of selection shown at the same time

Having our toolbar at the bottom and the native context menu on the top is the optimal solution (#1246).

@mlewand mlewand added status:confirmed An issue confirmed by the development team. type:feature A feature request. labels Sep 19, 2017
@mlewand mlewand added this to the 4.8.0 milestone Sep 19, 2017
@mlewand
Copy link
Contributor Author

mlewand commented Sep 19, 2017

I believe we can use a lot of logic from the balloon panel here.

@Comandeer Comandeer self-assigned this Sep 19, 2017
@mlewand mlewand assigned wojtekw92 and unassigned Comandeer Sep 20, 2017
@mlewand mlewand added the target:major Any docs related issue that should be merged into a major branch. label Nov 23, 2017
@mlewand mlewand changed the title Inline toolbar Balloon Toolbar Nov 27, 2017
@mlewand
Copy link
Contributor Author

mlewand commented Nov 27, 2017

Note we're in the middle of renaming process from Inline Toolbar to Balloon Toolbar (#1207), so some old task might refer to it as "Inline Toolbar".

@mlewand
Copy link
Contributor Author

mlewand commented Dec 1, 2017

Internet Explorer 8 Compatibility

During the course of development, we used options.cssSelector property, that uses HTMLElement.matches property which is not implemented in IE8.

Any other aspect of Balloon Toolbar looks to be working well on IE8, that is:

  • options.widgets
  • options.refresh

The toolbar itself positions well and works correctly on IE8, so there's no problem with that too.

So as long as you use options.refresh rather than options.cssSelector you'll have Balloon Toolbar working well on IE8 too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status:confirmed An issue confirmed by the development team. target:major Any docs related issue that should be merged into a major branch. type:feature A feature request.
Projects
None yet
Development

No branches or pull requests

3 participants