Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Widget Inherit Css (gallery-widget-inherit-css) on cdn

Last Updated: 06/23/12

+ 0 -

Steven Olmsted

YUI Contributor

See 42 more by this user.

Created: 02/16/12
Last CDN Push: 03/23/12
Build Tag: gallery-2012.03.23-18-00
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.1
Free for use.

When a widget is rendered, the class attributes applied to nodes are based on the widget's NAME property. Class names might look like this: yui3-name, yui3-name-content, yui3-name-hidden, etc. When extending a widget, if a subclass has a different NAME, any css rules applied to the original widget's classes do not get inherited.

The subclass could be given the same NAME (or CSS_PREFIX) as the superclass, then the class attributes rendered by subclass and superclass would be the same and the superclass css would get applied to the subclass. This works out well but the two widgets can't be styled independently. It would be nice if the css would actually be allowed cascade from the superclass and be overwritten by the subclass.

The bounding box node rendered by the subclass does receive a class from the subclass and a class from the superclass. Unfortunately the same is not true for any other nodes rendered by the widget. Y.WidgetInheritCss is a class extension that fixes this situation. Every time the subclass renders a class with its name it will also render a class with the superclass name. This allows the css to cascade from the superclass and more specific rules can be written to target only the subclass. This also works with special cases like -disabled and -hidden. It's a bit of a hack but it should work.

This extension is a potential solution for these tickets:
http://yuilibrary.com/projects/yui3/ticket/2529359
http://yuilibrary.com/projects/yui3/ticket/2531632
http://yuilibrary.com/projects/yui3/ticket/2531623

Just include Y.WidgetInheritCss as a class extension when you extend a widget.

Code Sample

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.03.23-18-00'
}).use('gallery-widget-inherit-css', 'panel', function(Y) {
    var SubPanel = Y.Base.create('sub-panel', Y.Panel, [
        Y.WidgetInheritCss
    ], { ... })
 
    new SubPanel({
        bodyContent: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>',
        headerContent: 'Sub Panel'
    });
 
    // In css
    // .yui3-skin-sam .yui3-panel-content.yui3-sub-panel-content 
    // will select content box nodes rendered by SubPanel
});