deliteful/ResponsiveColumns

A container that lays out its children according to the screen width. This widget relies on CSS media queries (http://www.w3.org/TR/css3-mediaqueries). You can define any number of screen classes by setting the breakpoints attribute. Then you must set the layout attribute on each child to configure a width for each screen class. The following example defines two screen classes: "phone" and "other" with a breakpoint at 500px. If the "phone" class is active, the first child width is 100% and the second child is hidden. If the screen is larger than 500px then the first child width is 20% and the second one fill the remaining space. html <d-responsive-columns breakpoints="{phone: '500px', other: ''}"> <div layout="{phone: '100%', other: '20%'}">...</div> <div layout="{phone: 'hidden', other: 'fill'}">...</div> </d-responsive-columns> When the screen width changes (browser window resize or actual device orientation change) and if a new screen class is applied by the container, a "change" event is emitted with 2 specific properties: screenClass (the new screen class) and mediaQueryList (the MediaQueryList instance at the origin of the change).

Table of Contents

Element Instantiation
Element Configuration
Events
Element Styling
Enterprise Use

Element Instantiation

See delite/Widget for full details on how instantiation lifecycle is working.

Declarative Instantiation

require(["delite/register", "deliteful/ResponsiveColumns", "requirejs-domready/domReady!"],
    function (register) {
        register.parse();
    }
);

<html>
    <d-responsive-columns breakpoints="{phone: '500px', other: ''}">
        <div layout="{phone: '100%', other: '20%'}">...</div>
        <div layout="{phone: 'hidden', other: 'fill'}">...</div>
    </d-responsive-columns>
</html>

Programmatic Instantiation

require([
    "deliteful/ResponsiveColumns",
    "requirejs-domready/domReady!"
], function(ResponsiveColumns){
    rc = new ResponsiveColumns();
    rc.breakpoints = "{'small': '500px', 'medium': '900px', 'large': ''}";
    var child = document.createElement("div");
    child.setAttribute("layout", "{'small': '100%', 'medium': '200px', 'large': '10%'}");
    child.innerHTML = "Child 1";
    rc.addChild(child);
    child = document.createElement("div");
    child.setAttribute("layout", "{'small': 'hidden', 'medium': 'fill', 'large': '30%'}");
    child.innerHTML = "Child 2";
    rc.addChild(child);
    child = document.createElement("div");
    child.innerHTML = "Child 3";
    child.setAttribute("layout", "{'small': 'hidden', 'medium': 'hidden', 'large': '60%'}");
    rc.addChild(child);
    rc.placeAt(document.body);
});

Element Configuration

deliteful/ResponsiveColumns support delite display infrastructure by inheriting from delite/DisplayContainer. For more informations, see the delite/DisplayContainer documentation.

Defining screen classes and children layout

Screen classes represent the different types of layout to be managed by the container. You can define any number of screen classes by setting the breakpoints attribute.

Children of the container must define their width for each screen class by setting their layout attribute. For example if breakpoints is '{small: "480px", medium: "1024px", large: ""}', this means that the class "small" is applied if the width is smaller than 480px, then the "medium" will be applied between 480px and 1024px. The class "large" is applied for larger screens. Defining the last class bound as an empty string is interpreted as +Infinity. Each child must have a layout property that defines values for "small", "medium" and "large" keys. Here is the full example: <d-responsive-columns id="rc" class="fill" breakpoints="{'small': '500px', 'medium': '900px', 'large': ''}"> <div layout="{'small': '100%', 'medium': '200px', 'large': '10%'}">A</div> <div layout="{'small': 'hidden', 'medium': 'fill', 'large': '30%'}">B</div> <div layout="{'small': 'hidden', 'medium': 'hidden', 'large': '60%'}">C</div> </d-responsive-columns>

Both breakpoints and layout properties are strings parsed internally by the standard JSON.parse(). To facilitate writing markup you can use single quotes when defining these properties, single quotes will be replaced by double quotes before interpreted by JSON.parse.

Note that the widget computes the default value of its breakpoints property using the values of the breakpoins provided by the deliteful/channelBreakpoints module. See the deliteful/channelBreakpoints documentation for information about how to statically customize these default breakpoint values.

Events

The delite/ResponsiveColumns class provides the following event:

event name dispatched cancelable bubbles properties
change the current screen class has changed True True
  • screenClass: the new screen class
  • mediaQueryList: the MediaQueryList that triggered the change

Element Styling

The default height of a deliteful/ResponsiveColumns is 100%. As a consequence, you must ensure that the height of every parent is defined (this includes <body> and <html>). You can read this external article for more information. You can set height of <body> and <html> to 100% by including defaultapp.css

Enterprise Use

Accessibility

Relies on browser.

Globalization

deliteful/ResponsiveColumns does not provide any internationalizable bundle.

Security

This widget has no specific security concern. Refer to delite/Widget for general security advice on this base class that deliteful/ResponsiveColumns is using.

Browser Support

This widget supports all supported browsers except Internet Explorer 9.