yui / yui3

A library for building richly interactive web applications.
http://yuilibrary.com/
Other
4.12k stars 1.29k forks source link

Drag and Drop Shim breaks when using Javascript fullscreen API #1518

Open rj33 opened 10 years ago

rj33 commented 10 years ago

It seems the shim brought in by dd-ddm (as opposed to dd-ddm-base) breaks drag and drop when using the FullScreen API provided by modern browsers.

I can reproduce this by using the slider (not required, but makes sure I'm not doing anything dumb myself when setting up Dragging), and the gallery full screen which provides a cross-browser convenience wrapper around the fullscreen functionality (the gallery component is deprecated, but the full screen component does not seem to be the source of the problem). I then explicitly ask for the dd-ddm module to make sure the shim code is loaded (it is on by default if you use dd-ddm as opposed to dd-ddm-base which doesn't have the shim code). You need to ask for this as slider only brings in dd-ddm-base.

If you try to drag the slider in the example code below, it works to start with, but then fails to slide properly after you click the full screen button. The full screen api takes a dom element as essentially the top level dom element, so things that do stuff with 'body' or other elements to get page sizing info will fail once in full screen mode, as these elements are not longer part of the rendered tree. I suspect the code using '' in the ddm.js code from: http://yuilibrary.com/yui/docs/api/files/dd_js_ddm.js.html#l2 is to blame here, specifically the code in the _pg_size and _createPG functions.

The code below should reproduce the problem (either remove the dd-ddm module from the module list or uncomment the code that sets useShim to false to that either of these two things remove the problem). If it helps anyone, it seems this behaviour started in 3.7.0, as 3.6.0 seems to work (although there are a few other glitches with the slider dragging pre 3.7.0 if you place the slider in the right kind of context (absolutely positioned containers inside relatively positioned containers that seem fixed now in the latest releases).

For anyone else having this problem, accessing the private dd object and turning off the shim should work, i.e.: slider._dd.set('useShim', false);

Or if you are using drag and drop directly and can pass in the useShim: false flag directly, that should also work (assuming you are using the d&d in a way that doesn't actually need the shim).

Test
Full Screen
rj33 commented 10 years ago

Can someone at least acknowledge if this is going to be accepted as a bug or not?