Q.Window stop dragging when offsetTop < 0?

[chrise]

Hey,

I'm using the Q.Window for a PDF-Preview with Acrobat in an iframe,
looks pretty cool and works perfect
BUT dragging the window above the upper edge of the browser window
makes it impossible to drag again or even close the window.
Now I'm looking for something to stop the drag event in onDrag when
Q.Window's offsetTop is less 0.
Any ideas?

Trying something like this:

new Q.Window({
title: "PDF Viewer",
text: '<iframe .....></iframe>',
width: 640,
height: 800,
onDrag: function(self) {
if (self.holder.offsetTop < 0) {
// stop dragging now
}
}
});

Thanks in advance,
chrise

[wonderingwout]

Hi Chrise,

This is a known issue and will be fixed in the next release.
But in the meantime you can do something like

...
onEndDrag: function(self) {
var top = parseInt(self.holder.getStyle('top'));
if (top < 0)
self.holder.setStyle({ top: '0px' });
}
...

I didn't test this but it should work.

Wout

[chrise]

Thanx Wout, this works.
Create support, told my boss to donate the project.

[wonderingwout]

Hi Chrise,

Donations are very much appreciated
:-)

[jbogdani]

Hi,
I suppose it would be better to have the possibility to constrain the
window position inside the $('q_wrapper'), just to have the
possibility to have a fixed working place for the windows.
It's easy to fix the $('q_wrapper') dimensions outside Q.Window with
CSS, JS, etc.
I think I'll use the suggested onEndDrag method to test this for my
web app!

Thank you in advance,
Julian

PS. thank you very much for Q and Q.Window! Great classes!

[wonderingwout]

Yes indeed, you're right.
I'll provide a boolean option to constrain the within the current
viewport.

Currently I'm working on scripty2 compatibility within the whole
toolset.
So you can use Q with both scriptaculous and scripty2.

Next thing on the list is the constraint for Q.Window.
Keep an eye on our blog or twitter...

Nice to hear so many people enjoy Q.
Wout

[jbogdani]

Here it is a working example:

onEndDrag: function(self) {
var top = parseInt(self.holder.getStyle('top'));

var left = parseInt(self.holder.getStyle('left'));
var limits=$('q_wrapper').positionedOffset();
if (top < limits.top) self.holder.setStyle({ top: limits.top
+'px' });
if (left< limits.left) self.holder.setStyle({ left: limits.left
+'px' });
}

I made it a default option for Q.Window class!
Hope this helps..

I'll post soon some more changes I've made to both Q and Q.Window to
fit my necessities that can be useful to someone else or to further
develop!

[wonderingwout]

Good start, but it should also work for bottom and right.

I've quickly built and published an alpha releas of the Q.Window class
here:

http://download.qutensil.com/0.1.2.alpha/q.window.js

You can use that one for the time being.
In the next release there will be an option to turn this snapping off
and on.

Greetings.
Wout

[jbogdani]

That's right!
I was just fixing it now!
Here it is:
onEndDrag: function(self) {
var position={};
position.top = parseInt(self.holder.getStyle('top'));
position.left = parseInt(self.holder.getStyle('left'));
var dimen=self.holder.getDimensions();
position.right = position.left+dimen.width;
var limits=$('q_wrapper').positionedOffset();
var dimen=$('q_wrapper').getDimensions();
limits.bottom=(limits.top+dimen.height);
limits.right=(limits.left+dimen.width);

// top & bottom fix:
if (position.top < limits.top) self.holder.setStyle({ top:
limits.top+'px' });
if (position.top > limits.bottom) self.holder.setStyle({ top:
(limits.bottom-30)+'px' });

// left & right fix:
if (position.right<(limits.left+30)) self.holder.setStyle({ left:
limits.left+'px' });
if (position.left>(limits.right-30)) self.holder.setStyle({ left:
(limits.right-30)+'px' });
}
I'm going to check the new release.

Thanks

[wonderingwout]

I didn't test the script thoroughly.
If you find a bug, please report it so I can fix it for the next
release.

Thanks.
Wout