Examples with CSSStyleDeclaration elemental.css.CSSStyleDeclaration used on opensource projects

Example 1 with CSSStyleDeclaration

use of elemental.css.CSSStyleDeclaration in project che by eclipse.

the class AnnotationGroupImpl method buildIncludedElement.

private elemental.dom.Element buildIncludedElement(Annotation annotation, int offset) {
    final elemental.dom.Element element = annotation.getImageElement();
    final CSSStyleDeclaration style = element.getStyle();
    int layer = annotation.getLayer();
    style.setZIndex(layer);
    style.setPosition(ABSOLUTE);
    style.setTop("0");
    style.setLeft("0");
    style.setRight("0");
    style.setBottom("0");
    element.getDataset().setAt(MESSAGE_DATASET_NAME, annotation.getText());
    element.getDataset().setAt(TYPE_DATASET_NAME, annotation.getType());
    element.getDataset().setAt(LAYER_DATASET_NAME, Integer.toString(layer));
    element.getDataset().setAt(OFFSET_DATASET_NAME, Integer.toString(offset));
    return element;
}

Example 2 with CSSStyleDeclaration

use of elemental.css.CSSStyleDeclaration in project che by eclipse.

the class AnimationController method show.

/**
     * Animates the element into view. Do not enable transitions in the CSS for this element, or the
     * animations may not work correctly. AnimationController will enable animations automatically.
     */
public void show(final Element element) {
    // Early exit if the element is shown or showing.
    if (isAnyState(element, State.SHOWN, State.SHOWING)) {
        return;
    }
    if (!isAnimated) {
        showWithoutAnimating(element);
        return;
    }
    // Cancel pending transition event listeners.
    hideEndHandler.unhandleEndFor(element);
    /*
     * Make this "visible" again so we can measure its eventual height (required
     * for CSS transitions). We will set its initial state in this event loop,
     * so the element will not be fully visible.
     */
    final CSSStyleDeclaration style = element.getStyle();
    element.getStyle().removeProperty("display");
    final int measuredHeight = getCurrentHeight(element);
    /*
     * Set the initial state, but not if the element is in the process of
     * hiding.
     */
    if (!isAnyState(element, State.HIDING)) {
        if (options.collapse) {
            // Start the animation at a height of zero.
            style.setHeight("0");
            // We want to animate from total height of 0
            style.setMarginTop("0");
            style.setMarginBottom("0");
            style.setPaddingTop("0");
            style.setPaddingBottom("0");
            CssUtils.setBoxShadow(element, "0 0");
            /*
         * Hide overflow if expanding the element, or the entire element will be
         * instantly visible. Do not do this by default, because it could hide
         * absolutely positioned elements outside of the root element, such as
         * the arrow on a tooltip.
         */
            AnimationUtils.backupOverflow(style);
        }
        if (options.fade) {
            style.setOpacity(0);
        }
    }
    // Give the browser a chance to accept the properties set above
    setState(element, State.SHOWING);
    schedule(element, new ScheduledCommand() {

        @Override
        public void execute() {
            // The user changed the state before this command executed.
            if (!clearLastCommand(element, this) || !isAnyState(element, State.SHOWING)) {
                return;
            }
            // Enable animations before setting the end state.
            AnimationUtils.enableTransitions(style);
            // Set the end state.
            if (options.collapse) {
                if (options.fixedHeight) {
                    // The element's styles have a fixed height set, so we just want to
                    // clear our override
                    style.setHeight("");
                } else {
                    // Give it an explicit height to animate to, because the element's
                    // height is auto otherwise
                    style.setHeight(measuredHeight + CSSStyleDeclaration.Unit.PX);
                }
                style.removeProperty("margin-top");
                style.removeProperty("margin-bottom");
                style.removeProperty("padding-top");
                style.removeProperty("padding-bottom");
                CssUtils.removeBoxShadow(element);
            }
            if (options.fade) {
                style.setOpacity(1);
            }
        }
    });
    // For webkit based browsers.
    showEndHandler.handleEndFor(element);
}

Example 3 with CSSStyleDeclaration

use of elemental.css.CSSStyleDeclaration in project che by eclipse.

the class AnimationUtils method animatePropertySet.

/**
     * Enables animations prior to setting the value for the specified style
     * property on the supplied element. The end result is that there property is
     * transitioned to.
     *
     * @param elem
     *         the {@link Element} we want to set the style property on.
     * @param property
     *         the name of the style property we want to set.
     * @param value
     *         the target value of the style property.
     * @param duration
     *         the time in seconds we want the transition to last.
     * @param animationCallback
     *         callback that is invoked when the animation
     *         completes. It will be passed a {@code null} event if the animation
     *         was pre-empted by some other animation on the same element.
     */
public static void animatePropertySet(final Element elem, String property, String value, double duration, final EventListener animationCallback) {
    final CSSStyleDeclaration style = elem.getStyle();
    enableTransitions(style, duration);
    if (UserAgent.isFirefox()) {
        // For FF4.
        new TransitionEndHandler(animationCallback).handleEndFor(elem, "transitionend");
    } else {
        // For webkit based browsers.
        // TODO: Keep an eye on whether or not webkit supports the
        // vendor prefix free version. If they ever do we should remove this.
        new TransitionEndHandler(animationCallback).handleEndFor(elem, Event.WEBKITTRANSITIONEND);
    }
    style.setProperty(property, value);
}

Example 4 with CSSStyleDeclaration

use of elemental.css.CSSStyleDeclaration in project che by eclipse.

the class ImageResourceUtils method applyImageResource.

/**
     * Applies the image resource to the specified element with the specified
     * horizontal and vertical background positions.
     * <p/>
     * The height and width of the element are not modified under the presumption
     * that if you specify the horizontal and vertical position, the image will
     * not be the only content of the element.
     */
public static void applyImageResource(Element elem, ImageResource image, String hPos, String vPos) {
    CSSStyleDeclaration style = elem.getStyle();
    style.setBackgroundImage("url(" + image.getSafeUri().asString() + ")");
    style.setProperty("background-repeat", "no-repeat");
    style.setProperty("background-position", hPos + " " + vPos);
    style.setOverflow("hidden");
}

Example 5 with CSSStyleDeclaration

use of elemental.css.CSSStyleDeclaration in project che by eclipse.

the class ScrollbarSizeCalculator method createContainer.

private Element createContainer() {
    Element container = Elements.createDivElement();
    final int containerSize = 500;
    CSSStyleDeclaration containerStyle = container.getStyle();
    containerStyle.setWidth(containerSize, CSSStyleDeclaration.Unit.PX);
    containerStyle.setHeight(containerSize, CSSStyleDeclaration.Unit.PX);
    containerStyle.setPosition(CSSStyleDeclaration.Position.ABSOLUTE);
    containerStyle.setLeft(-containerSize, CSSStyleDeclaration.Unit.PX);
    containerStyle.setTop(-containerSize, CSSStyleDeclaration.Unit.PX);
    Elements.getBody().appendChild(container);
    return container;
}