GWT: How to get css style attributes from current cursor positon or selected text?

Question

I had used https://code.google.com/p/google-web-toolkit/source/browse/tags/2.5.0/samples/showcase/src/com/google/gwt/sample/showcase/client/content/text/RichTextToolbar.java

I want to show font family, font size, color and BG-Color of the text, I am getting text color through (GWT) Formatter.getForeColor(), but remaining i don't know how to get.

Example: <font face="Arial">Apple </font><span style="background-color: rgb(255, 0, 0);"><font face="Courier" size="5">banana</font></span><br>

if cursor at in 'Apple' it should return font family is Arial, and if cursor at 'Banana' it should return font-family: Courier and size:3 and BG-Color: Red

For me no problem if the solution in JavaScript or JQuery or GWT.

I want to do toolbar like Google docs.

If any one have Idea please help me how to get it?

Answer 1

I see two options. Either you build the UI using GWT components, so you can add and read the style information in the code, or you try to get the element below the mouse pointer using JSNI and then try to analyze this element.

The first, probably easier, solution looks like this:

public class FontTest implements EntryPoint {

    public void onModuleLoad() {
        FlowPanel panel = new FlowPanel();
        Label labelA = new Label("Apple");
        labelA.getElement().getStyle().setProperty("fontFamily", "Arial");
        Label labelB = new Label("Banana");
        labelB.getElement().getStyle().setProperty("fontFamily", "Courier");
        labelB.getElement().getStyle().setFontSize(5, Unit.EM);
        labelB.getElement().getStyle().setBackgroundColor("rgb(255, 0, 0)");
        panel.add(labelA);
        panel.add(labelB);
        labelA.addMouseOverHandler(new FontMousOverHandler());
        labelB.addMouseOverHandler(new FontMousOverHandler());
        RootLayoutPanel.get().add(panel);
    }

    private static class FontMousOverHandler implements MouseOverHandler {
        @Override
        public void onMouseOver(MouseOverEvent event) {
            Label label = (Label) event.getSource();
            String font = label.getElement().getStyle()
                    .getProperty("fontFamily");
            String color = label.getElement().getStyle().getBackgroundColor();
            PopupPanel pp = new PopupPanel(true);
            pp.add(new Label(font + " / " + color));
            pp.setPopupPosition(label.getAbsoluteLeft(), label.getAbsoluteTop());
            pp.show();
        }
    }
}

The above sample is simplified, you'd have to make your code much smarter to handle all variations of HTML attributes, CSS style-names and direct styles.

The second option is to get the element that is currently below the mouse pointer. This can be done using some JSNI magic:

    private native Element getElementFromPoint(int x, int y) /*-{
            return $wnd.document.elementFromPoint(x, y);
    }-*/;

Of course you need a trigger to call the getElementFromPoint() method. You can use a MouseHandler as well or some kind of background code (a.k.a. Timer) to trigger. Once know where the mouse pointer is, get the element and analyze the style of element.