Skip to content

Fix $ conflict from other frameworks #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
devsseb wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open

Fix $ conflict from other frameworks #3

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
238 changes: 121 additions & 117 deletions jquery-ui-droppable-iframe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,127 +6,131 @@
* Licensed under the MIT licenses.
*/

//Save native prepareOffsets method from ddmanager
var nativePrepareOffsets = $.ui.ddmanager.prepareOffsets;

//Overrided prepareOffsets method
$.ui.ddmanager.prepareOffsets = function(t, event) {
//Call parent method
nativePrepareOffsets.apply(this, arguments);

var m = $.ui.ddmanager.droppables[t.options.scope] || [];

for (i = 0; i < m.length; i++) {

//Iframe fixes
if ((doc = m[i].document[0]) !== document) {
var iframe = $((doc.defaultView || doc.parentWindow).frameElement);
var iframeOffset = iframe.offset();
var el = m[i].element;

//Check our droppable element is in the viewport of out iframe
var viewport = {
top: iframe.contents().scrollTop(),
left: iframe.contents().scrollLeft()
};
viewport.right = viewport.left + iframe.width();
viewport.bottom = viewport.top + iframe.height();

var bounds = el.offset();
bounds.right = bounds.left + el.outerWidth();
bounds.bottom = bounds.top + el.outerHeight();
if (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)) {
//In view port
var ytop = bounds.top - iframe.contents().scrollTop();
ytop = ytop < 0 ? 0 : ytop;
var xtop = bounds.left - iframe.contents().scrollLeft();
xtop = xtop < 0 ? 0 : xtop;
var ybottom = bounds.top + el.height() - iframe.contents().scrollTop();
ybottom = ybottom > iframe.height() ? iframe.height() : ybottom;
var xbottom = bounds.left + el.width() - iframe.contents().scrollLeft();
xbottom = xbottom > iframe.width() ? iframe.width() : xbottom;
m[i].offset.top = iframeOffset.top + ytop;
m[i].offset.left = iframeOffset.left + xtop;
m[i].proportions({
width: xbottom - xtop,
height: ybottom - ytop,
});

} else {
//Out of view port - skip
m[i].proportions().height = 0;
continue;
}

}

}
};

$.ui.plugin.add("draggable", "iframeScroll", {
drag: function(event, ui, i) {

var o = i.options;
var selector = o.iframeFix === true ? "iframe" : o.iframeFix;

//check if mouse in scroll zone
i.document.find(selector).each(function() {

var scrolled = false;
var iframeDocument;
var iframe = $(this);
var offset = iframe.offset();
offset.width = iframe.width();
offset.height = iframe.height();
//Check scroll top
if (offset.left < event.pageX && event.pageX < offset.left + offset.width) {
if (offset.top < event.pageY && event.pageY < offset.top + o.scrollSensitivity) {
iframeDocument = iframe.contents();
scrolled = iframeDocument.scrollTop(iframeDocument.scrollTop() - o.scrollSpeed);
(function($) {

//Save native prepareOffsets method from ddmanager
var nativePrepareOffsets = $.ui.ddmanager.prepareOffsets;

//Overrided prepareOffsets method
$.ui.ddmanager.prepareOffsets = function(t, event) {
//Call parent method
nativePrepareOffsets.apply(this, arguments);

var m = $.ui.ddmanager.droppables[t.options.scope] || [];

for (i = 0; i < m.length; i++) {

//Iframe fixes
if ((doc = m[i].document[0]) !== document) {
var iframe = $((doc.defaultView || doc.parentWindow).frameElement);
var iframeOffset = iframe.offset();
var el = m[i].element;

//Check our droppable element is in the viewport of out iframe
var viewport = {
top: iframe.contents().scrollTop(),
left: iframe.contents().scrollLeft()
};
viewport.right = viewport.left + iframe.width();
viewport.bottom = viewport.top + iframe.height();

var bounds = el.offset();
bounds.right = bounds.left + el.outerWidth();
bounds.bottom = bounds.top + el.outerHeight();
if (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)) {
//In view port
var ytop = bounds.top - iframe.contents().scrollTop();
ytop = ytop < 0 ? 0 : ytop;
var xtop = bounds.left - iframe.contents().scrollLeft();
xtop = xtop < 0 ? 0 : xtop;
var ybottom = bounds.top + el.height() - iframe.contents().scrollTop();
ybottom = ybottom > iframe.height() ? iframe.height() : ybottom;
var xbottom = bounds.left + el.width() - iframe.contents().scrollLeft();
xbottom = xbottom > iframe.width() ? iframe.width() : xbottom;
m[i].offset.top = iframeOffset.top + ytop;
m[i].offset.left = iframeOffset.left + xtop;
m[i].proportions({
width: xbottom - xtop,
height: ybottom - ytop,
});

} else {
//Out of view port - skip
m[i].proportions().height = 0;
continue;
}

}
//Check scroll down
if (offset.left < event.pageX && event.pageX < offset.left + offset.width) {
if ((offset.top + offset.height - o.scrollSensitivity) < event.pageY && event.pageY < offset.top + offset.height) {
iframeDocument = iframe.contents();
scrolled = iframeDocument.scrollTop(iframeDocument.scrollTop() + o.scrollSpeed);

}
};

$.ui.plugin.add("draggable", "iframeScroll", {
drag: function(event, ui, i) {

var o = i.options;
var selector = o.iframeFix === true ? "iframe" : o.iframeFix;

//check if mouse in scroll zone
i.document.find(selector).each(function() {

var scrolled = false;
var iframeDocument;
var iframe = $(this);
var offset = iframe.offset();
offset.width = iframe.width();
offset.height = iframe.height();
//Check scroll top
if (offset.left < event.pageX && event.pageX < offset.left + offset.width) {
if (offset.top < event.pageY && event.pageY < offset.top + o.scrollSensitivity) {
iframeDocument = iframe.contents();
scrolled = iframeDocument.scrollTop(iframeDocument.scrollTop() - o.scrollSpeed);
}
}
}
//Check scroll left
if (offset.left < event.pageX && event.pageX < offset.left + o.scrollSensitivity) {
if (offset.top < event.pageY && event.pageY < offset.top + offset.height) {
iframeDocument = iframe.contents();
scrolled = iframeDocument.scrollLeft(iframeDocument.scrollLeft() - o.scrollSpeed);
//Check scroll down
if (offset.left < event.pageX && event.pageX < offset.left + offset.width) {
if ((offset.top + offset.height - o.scrollSensitivity) < event.pageY && event.pageY < offset.top + offset.height) {
iframeDocument = iframe.contents();
scrolled = iframeDocument.scrollTop(iframeDocument.scrollTop() + o.scrollSpeed);
}
}
}
//Check scroll right
if ((offset.left + offset.width - o.scrollSensitivity) < event.pageX && event.pageX < offset.left + offset.width) {
if (offset.top < event.pageY && event.pageY < offset.top + offset.height) {
iframeDocument = iframe.contents();
scrolled = iframeDocument.scrollLeft(iframeDocument.scrollLeft() + o.scrollSpeed);
//Check scroll left
if (offset.left < event.pageX && event.pageX < offset.left + o.scrollSensitivity) {
if (offset.top < event.pageY && event.pageY < offset.top + offset.height) {
iframeDocument = iframe.contents();
scrolled = iframeDocument.scrollLeft(iframeDocument.scrollLeft() - o.scrollSpeed);
}
}
}

if (scrolled !== false && $.ui.ddmanager && !o.dropBehaviour) {
$.ui.ddmanager.prepareOffsets(i, event);
}

clearTimeout(i.scrollTimer);
if (i._mouseStarted) {
i.scrollTimer = setTimeout(function() {
//call drag trigger
i._trigger("drag", event);
//update offsets
if ($.ui.ddmanager) {
$.ui.ddmanager.drag(i, event);
//Check scroll right
if ((offset.left + offset.width - o.scrollSensitivity) < event.pageX && event.pageX < offset.left + offset.width) {
if (offset.top < event.pageY && event.pageY < offset.top + offset.height) {
iframeDocument = iframe.contents();
scrolled = iframeDocument.scrollLeft(iframeDocument.scrollLeft() + o.scrollSpeed);
}
}, 10);
}

}

if (scrolled !== false && $.ui.ddmanager && !o.dropBehaviour) {
$.ui.ddmanager.prepareOffsets(i, event);
}

clearTimeout(i.scrollTimer);
if (i._mouseStarted) {
i.scrollTimer = setTimeout(function() {
//call drag trigger
i._trigger("drag", event);
//update offsets
if ($.ui.ddmanager) {
$.ui.ddmanager.drag(i, event);
}
}, 10);
}


});
},
stop: function(event, ui, i) {
clearInterval(i.scrollTimer);
}
});

});
},
stop: function(event, ui, i) {
clearInterval(i.scrollTimer);
}
});
})(jQuery)