import com.vaadin.client.BrowserInfo;
import com.vaadin.client.LayoutManager;
import com.vaadin.client.ServerConnector;
+import com.vaadin.client.communication.StateChangeEvent;
import com.vaadin.client.ui.AbstractComponentConnector;
import com.vaadin.client.ui.layout.ElementResizeEvent;
import com.vaadin.client.ui.layout.ElementResizeListener;
import com.vaadin.server.Responsive;
import com.vaadin.shared.ui.Connect;
+import com.vaadin.shared.util.SharedUtil;
/**
* The client side connector for the Responsive extension.
*/
protected static JavaScriptObject heightRangeCache;
+ /**
+ * The theme that was in use when the width and height range caches were
+ * created.
+ */
+ protected static String parsedTheme;
+
private static Logger getLogger() {
return Logger.getLogger(ResponsiveConnector.class.getName());
}
@Override
protected void extend(ServerConnector target) {
- // Initialize cache if not already done
- if (widthRangeCache == null) {
- searchForBreakPoints();
- }
-
this.target = (AbstractComponentConnector) target;
-
- // Get any breakpoints from the styles defined for this widget
- getBreakPointsFor(constructSelectorsForTarget());
-
// Start listening for size changes
LayoutManager.get(getConnection()).addElementResizeListener(
this.target.getWidget().getElement(), this);
target.getWidget().getElement(), this);
}
+ @Override
+ public void onStateChanged(StateChangeEvent event) {
+ super.onStateChanged(event);
+ // Changing the theme may introduce new style sheets so we may need to
+ // rebuild the cache
+ if (widthRangeCache == null
+ || !SharedUtil.equals(parsedTheme, getCurrentThemeName())) {
+ // updating break points
+ searchForBreakPoints();
+ }
+ // Get any breakpoints from the styles defined for this widget
+ getBreakPointsFor(constructSelectorsForTarget());
+ // make sure that the ranges are updated at least once regardless of
+ // resize events.
+ updateRanges();
+ }
+
+ private String getCurrentThemeName() {
+ return getConnection().getUIConnector().getActiveTheme();
+ }
+
+ private void searchForBreakPoints() {
+ searchForBreakPointsNative();
+ parsedTheme = getCurrentThemeName();
+ }
+
/**
* Build a cache of all 'width-range' and 'height-range' attribute selectors
* found in the stylesheets.
*/
- private static native void searchForBreakPoints()
+ private static native void searchForBreakPointsNative()
/*-{
// Initialize variables
@Override
public void onElementResize(final ElementResizeEvent event) {
- int width = event.getLayoutManager().getOuterWidth(event.getElement());
- int height = event.getLayoutManager()
- .getOuterHeight(event.getElement());
+ updateRanges();
+ }
+ private void updateRanges() {
+ LayoutManager layoutManager = LayoutManager.get(getConnection());
com.google.gwt.user.client.Element element = target.getWidget()
.getElement();
+ int width = layoutManager.getOuterWidth(element);
+ int height = layoutManager.getOuterHeight(element);
+
boolean forceRedraw = false;
String oldWidthRanges = currentWidthRanges;
String oldHeightRanges = currentHeightRanges;
// Loop through breakpoints and see which one applies to this width
- currentWidthRanges = resolveBreakpoint("width", width,
- event.getElement());
+ currentWidthRanges = resolveBreakpoint("width", width);
if (!"".equals(currentWidthRanges)) {
- target.getWidget().getElement()
- .setAttribute("width-range", currentWidthRanges);
+ element.setAttribute("width-range", currentWidthRanges);
forceRedraw = true;
} else {
element.removeAttribute("width-range");
}
// Loop through breakpoints and see which one applies to this height
- currentHeightRanges = resolveBreakpoint("height", height,
- event.getElement());
+ currentHeightRanges = resolveBreakpoint("height", height);
if (!"".equals(currentHeightRanges)) {
- target.getWidget().getElement()
- .setAttribute("height-range", currentHeightRanges);
+ element.setAttribute("height-range", currentHeightRanges);
forceRedraw = true;
} else {
element.removeAttribute("height-range");
// case some new styles are applied
if (!currentWidthRanges.equals(oldWidthRanges)
|| !currentHeightRanges.equals(oldHeightRanges)) {
- event.getLayoutManager().setNeedsMeasureRecursively(
- ResponsiveConnector.this.target);
+ layoutManager
+ .setNeedsMeasureRecursively(ResponsiveConnector.this.target);
}
}
}
}
- private native String resolveBreakpoint(String which, int size,
- Element element)
+ private native String resolveBreakpoint(String which, int size)
/*-{
// Default to "width" breakpoints
--- /dev/null
+/*
+ * Copyright 2000-2014 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.extensions;
+
+import com.vaadin.server.Responsive;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.Label;
+
+public class SetThemeAndResponsiveLayout extends AbstractTestUI {
+
+ @Override
+ protected void setup(VaadinRequest request) {
+ getLayout().setSizeFull();
+ CssLayout responsiveLayout = new CssLayout();
+ responsiveLayout.addStyleName("width-and-height");
+ responsiveLayout.setSizeFull();
+ setContent(responsiveLayout);
+ responsiveLayout
+ .addComponent(new Label(
+ "First set the theme using the button and then resize the browser window in both dimensions to see the background color change."));
+ Button setThemeButton = new Button("Set theme");
+ setThemeButton.addClickListener(new Button.ClickListener() {
+ @Override
+ public void buttonClick(ClickEvent event) {
+ setTheme("tests-responsive");
+ }
+ });
+ responsiveLayout.addComponent(setThemeButton);
+ Responsive.makeResponsive(responsiveLayout);
+ }
+
+ @Override
+ protected String getTestDescription() {
+ return "This test verifies that responsive works also when theme is set using setTheme method";
+ };
+
+ @Override
+ protected Integer getTicketNumber() {
+ return 15281;
+ };
+
+}
--- /dev/null
+/*
+ * Copyright 2000-2014 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.extensions;
+
+import static org.junit.Assert.assertEquals;
+
+import java.util.List;
+
+import org.junit.Before;
+import org.junit.Test;
+import org.openqa.selenium.remote.DesiredCapabilities;
+import org.openqa.selenium.support.ui.ExpectedConditions;
+import org.openqa.selenium.support.ui.WebDriverWait;
+
+import com.vaadin.testbench.By;
+import com.vaadin.testbench.elements.ButtonElement;
+import com.vaadin.testbench.elements.CssLayoutElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+public class SetThemeAndResponsiveLayoutTest extends MultiBrowserTest {
+
+ @Before
+ public void setUp() throws Exception {
+ // We need this in order to ensure that the initial width-range is
+ // width: 600px- and height: 500px-
+ testBench().resizeViewPortTo(1024, 768);
+ }
+
+ @Override
+ public List<DesiredCapabilities> getBrowsersToTest() {
+ // Seems like stylesheet onload is not fired on PhantomJS
+ // https://github.com/ariya/phantomjs/issues/12332
+ return super.getBrowsersExcludingPhantomJS();
+ }
+
+ @Test
+ public void testWidthAndHeightRanges() throws Exception {
+ openTestURL();
+ // IE sometimes has trouble waiting long enough.
+ new WebDriverWait(getDriver(), 30).until(ExpectedConditions
+ .presenceOfElementLocated(By
+ .cssSelector(".v-csslayout-width-and-height")));
+ // set the theme programmatically
+ $(ButtonElement.class).caption("Set theme").first().click();
+ new WebDriverWait(getDriver(), 30).until(ExpectedConditions
+ .presenceOfElementLocated(By.xpath("//div[@width-range]")));
+
+ // Verify both width-range and height-range.
+ assertEquals("600px-",
+ $(CssLayoutElement.class).first().getAttribute("width-range"));
+ assertEquals("500px-",
+ $(CssLayoutElement.class).first().getAttribute("height-range"));
+
+ // Resize
+ testBench().resizeViewPortTo(550, 450);
+
+ // Verify updated width-range and height-range.
+ assertEquals("0-599px",
+ $(CssLayoutElement.class).first().getAttribute("width-range"));
+ assertEquals("0-499px",
+ $(CssLayoutElement.class).first().getAttribute("height-range"));
+ }
+}
projects / vaadin-framework.git / commitdiff