Opened 5 years ago

Closed 4 years ago

#18045 closed defect (patchwelcome)

dojox.widget.AutoRotator or dojox.widget.rotator does not support nesting!

Reported by: cgaeking Owned by:
Priority: undecided Milestone: 1.13
Component: DojoX Widgets Version: 1.9.3
Keywords: Cc:
Blocked By: Blocking:

Description

Hello,

when nesting several rotatorwidgets the transition is not working properly anymore. I have made a demo at http://78.46.35.20/tst.html

The code that is not working looks like:

<div data-dojo-type="dojox.widget.AutoRotator" class="rotator" id="myAutoRotator2" data-dojo-id="myAutoRotatorInstance2" data-dojo-props="transition:'dojox.widget.rotator.crossFade', duration:2500">
    <div class="pane pane0">
                Pane 0<br/>Panning down to Pane 1
                <div data-dojo-type="dojox.widget.AutoRotator" class="subpane" id="myAutoRotator32" data-dojo-id="myAutoRotatorInstancer32" data-dojo-props="transition:'dojox.widget.rotator.panLeft', duration:500">
                        <div class="divsubpane">abcd</div>
                        <div class="divsubpane">efgh</div>
                        <div class="divsubpane">ijkl</div>
                </div>
    </div>
    <div class="pane pane1">Pane 1<br/>Panning right to Pane 2
                <div data-dojo-type="dojox.widget.AutoRotator" class="subpane" id="myAutoRotator42" data-dojo-id="myAutoRotatorInstancer42" data-dojo-props="transition:'dojox.widget.rotator.panLeft', duration:500">
                        <div class="divsubpane">abcd</div>
                        <div class="divsubpane">efgh</div>
                        <div class="divsubpane">ijkl</div>
                </div>
    </div>
    <div class="pane pane2">Pane 2<br/>Using default transition to pan left to Pane 0</div>
</div>


The second pane is not transitioning well.. Regards,

Christian Gäking

Change History (3)

comment:1 Changed 5 years ago by cgaeking

Hello,

in the meanwhile I found out what the reason is. In Rotator.js, the line

cb = _t._domNodeContentBox = domGeometry.getContentBox(node), 

is not working, because the parent-div is already set to display:none. That means all values returned by getContentBox are 0. So a maybe dirty hack to make this example work would look like: (The problem is that only the direct parent of the node will be unhidden, more nesting will not work..)

...
                           var _t = this,
                                t = _t.transition,
                                tt = _t._transitions = {},
                                idm = _t._idMap = {},
                                tp = _t.transitionParams = eval("({ " + _t.transitionParams + " })"),
                                node = _t._domNode = dom.byId(node),
                                cb = _t._domNodeContentBox = domGeometry.getContentBox(node), // we are going to assume the rotator will not be changing size

                                // default styles to apply to all the container node and rotator's panes
                                p = {
                                        left: 0,
                                        top: 0
                                },

                                warn = function(bt, dt){
                                        console.warn(_t.declaredClass, ' - Unable to find transition "', bt, '", defaulting to "', dt, '".');
                                };

                        // Check if parent is currently set to display=none to make getContentBox working
                        var par = node.parentNode;
                        if (domStyle.get(par, _displayStr)==_noneStr) {
                                domStyle.set(par, _displayStr, "block");
                                cb = _t._domNodeContentBox = domGeometry.getContentBox(node);
                                domStyle.set(par, _displayStr, _noneStr);
                        }

A more clean solution would be setting the display to none after the parsing of all widgets of the site..

Last edited 5 years ago by cgaeking (previous) (diff)

comment:2 Changed 5 years ago by cgaeking

What about using opacity instead of the display attribute to hide the elements? That would make it work generally.

comment:3 Changed 4 years ago by dylan

Milestone: tbd1.12
Resolution: patchwelcome
Status: newclosed

Given that no one has shown interest in creating a patch in more than a year, I'm closing this as patchwelcome. Please let us know if you would like to get involved in helping make this change to Dojo!

Note: See TracTickets for help on using tickets.