Skip to content

E
edx-platform
Commit 0785aeb9 by Andy Armstrong
Options

Merge pull request #10426 from edx/andya/update-draggabilly 

Upgrade draggabilly.js to fix Firefox iframe bug
parents 183fce37 18dabc33
Showing with 58 additions and 36 deletions
.jshintrc
......@@ -109,13 +109,18 @@
// The parameter "predef" should remain empty for this configuration file
// to remain as general as possible.
"predef": [
// jQuery library.
// jQuery globals
"jQuery", "$",
// Underscore.js library.
// Underscore.js globals
"_",
// Jasmine library.
// RequireJS globals
"define",
"require",
"RequireJS",
// Jasmine globals
"jasmine",
"describe", "xdescribe",
"it", "xit",
......@@ -126,12 +131,15 @@
"waitsFor",
"runs",
// jQuery-Jasmine library.
// jQuery-Jasmine globals
"loadFixtures",
"appendLoadFixtures",
"readFixtures",
"setFixtures",
"appendSetFixtures",
"spyOnEvent"
"spyOnEvent",
// Miscellaneous globals
"JSON"
]
}
cms/static/cms/js/require-config.js
......@@ -17,6 +17,7 @@ require.config({
paths: {
"domReady": "js/vendor/domReady",
"gettext": "/i18n",
"json2": "js/vendor/json2",
"mustache": "js/vendor/mustache",
"codemirror": "js/vendor/codemirror-compressed",
"codemirror/stex": "js/vendor/CodeMirror/stex",
......@@ -95,6 +96,9 @@ require.config({
]
},
shim: {
"json2": {
exports: "JSON"
},
"gettext": {
exports: "gettext"
},
......
cms/static/coffee/spec/main.coffee
......@@ -23,6 +23,7 @@ requirejs.config({
"jquery.simulate": "xmodule_js/common_static/js/vendor/jquery.simulate",
"datepair": "xmodule_js/common_static/js/vendor/timepicker/datepair",
"date": "xmodule_js/common_static/js/vendor/date",
"json2": "xmodule_js/common_static/js/vendor/json2",
"moment": "xmodule_js/common_static/js/vendor/moment.min",
"moment-with-locales": "xmodule_js/common_static/js/vendor/moment-with-locales.min",
"text": "xmodule_js/common_static/js/vendor/requirejs/text",
......@@ -58,6 +59,9 @@ requirejs.config({
"js/spec/test_utils": "js/spec/test_utils",
}
shim: {
"json2": {
exports: "JSON"
},
"gettext": {
exports: "gettext"
},
......
cms/static/js/utils/drag_and_drop.js
define(["jquery", "jquery.ui", "underscore", "gettext", "common/js/components/views/feedback_notification", "draggabilly",
"js/utils/module"],
function ($, ui, _, gettext, NotificationView, Draggabilly, ModuleUtils) {
define(["jquery", "jquery.ui", "underscore", "json2", "gettext", "draggabilly",
"js/utils/module", "common/js/components/views/feedback_notification"],
function ($, ui, _, JSON, gettext, Draggabilly, ModuleUtils, NotificationView) {
'use strict';
var contentDragger = {
var contentDragger = {
droppableClasses: 'drop-target drop-target-prepend drop-target-before drop-target-after',
validDropClass: "valid-drop",
expandOnDropClass: "expand-on-drop",
......@@ -17,14 +18,15 @@ define(["jquery", "jquery.ui", "underscore", "gettext", "common/js/components/vi
var eleY = ele.offset().top;
var eleYEnd = eleY + ele.outerHeight();
var containers = $(ele.data('droppable-class'));
var isSibling = function () {
return $(this).data('locator') !== undefined && !$(this).is(ele);
};
for (var i = 0; i < containers.length; i++) {
var container = $(containers[i]);
// Exclude the 'new unit' buttons, and make sure we don't
// prepend an element to itself
var siblings = container.children().filter(function () {
return $(this).data('locator') !== undefined && !$(this).is(ele);
});
var siblings = container.children().filter(isSibling);
// If the container is collapsed, check to see if the
// element is on top of its parent list -- don't check the
// position of the container
......@@ -37,8 +39,8 @@ define(["jquery", "jquery.ui", "underscore", "gettext", "common/js/components/vi
var collapseFudge = 10;
if (Math.abs(eleY - parentListTop) < collapseFudge ||
(eleY > parentListTop &&
eleYEnd - collapseFudge <= parentListTop + parentList.outerHeight())
) {
eleYEnd - collapseFudge <= parentListTop + parentList.outerHeight())
) {
return {
ele: container,
attachMethod: 'prepend',
......@@ -101,11 +103,12 @@ define(["jquery", "jquery.ui", "underscore", "gettext", "common/js/components/vi
}
else {
// Dragging up into end of list.
if (j === siblings.length - 1 && yChange < 0 && Math.abs(eleY - siblingYEnd) <= fudge) {
if (j === siblings.length - 1 && yChange < 0 &&
Math.abs(eleY - siblingYEnd) <= fudge) {
return {
ele: $sibling,
attachMethod: 'after'
};
ele: $sibling,
attachMethod: 'after'
};
}
// Dragging up or down into beginning of list.
else if (j === 0 && Math.abs(eleY - siblingY) <= fudge) {
......@@ -145,8 +148,8 @@ define(["jquery", "jquery.ui", "underscore", "gettext", "common/js/components/vi
// Information about the current drag.
dragState: {},
onDragStart: function (draggie, event, pointer) {
var ele = $(draggie.element);
onDragStart: function (draggable) {
var ele = $(draggable.element);
this.dragState = {
// Which element will be dropped into/onto on success
dropDestination: null,
......@@ -162,7 +165,9 @@ define(["jquery", "jquery.ui", "underscore", "gettext", "common/js/components/vi
if (!ele.hasClass(this.collapsedClass)) {
ele.addClass(this.collapsedClass);
ele.find('.expand-collapse').first().addClass('expand').removeClass('collapse');
// onDragStart gets called again after the collapse, so we can't just store a variable in the dragState.
// onDragStart gets called again after the collapse, so we can't
// just store a variable in the dragState.
ele.addClass(this.expandOnDropClass);
}
......@@ -171,7 +176,7 @@ define(["jquery", "jquery.ui", "underscore", "gettext", "common/js/components/vi
ele.removeClass('was-dragging');
},
onDragMove: function (draggie, event, pointer) {
onDragMove: function (draggable, event, pointer) {
// Handle scrolling of the browser.
var scrollAmount = 0;
var dragBuffer = 10;
......@@ -186,13 +191,13 @@ define(["jquery", "jquery.ui", "underscore", "gettext", "common/js/components/vi
return;
}
var yChange = draggie.dragPoint.y - this.dragState.lastY;
var yChange = draggable.dragPoint.y - this.dragState.lastY;
if (yChange !== 0) {
this.dragState.direction = yChange;
}
this.dragState.lastY = draggie.dragPoint.y;
this.dragState.lastY = draggable.dragPoint.y;
var ele = $(draggie.element);
var ele = $(draggable.element);
var destinationInfo = this.findDestination(ele, this.dragState.direction);
var destinationEle = destinationInfo.ele;
this.dragState.parentList = destinationInfo.parentList;
......@@ -215,8 +220,8 @@ define(["jquery", "jquery.ui", "underscore", "gettext", "common/js/components/vi
}
},
onDragEnd: function (draggie, event, pointer) {
var ele = $(draggie.element);
onDragEnd: function (draggable, event, pointer) {
var ele = $(draggable.element);
var destination = this.dragState.dropDestination;
// Clear dragging state in preparation for the next event.
......@@ -284,7 +289,7 @@ define(["jquery", "jquery.ui", "underscore", "gettext", "common/js/components/vi
// If drop was into a collapsed parent, the parent will have been
// expanded. Views using this class may need to track the
// collapse/expand state, so send it with the refresh callback.
var collapsed = element.hasClass(this.collapsedClass);
var collapsed = element.hasClass(contentDragger.collapsedClass);
if (_.isFunction(refresh)) { refresh(collapsed); }
};
......@@ -364,20 +369,20 @@ define(["jquery", "jquery.ui", "underscore", "gettext", "common/js/components/vi
if ($(element).data('droppable-class') !== options.droppableClass) {
$(element).data({
'droppable-class': options.droppableClass,
'parent-location-selector': options.parentLocationSelector,
'child-selector': options.type,
'refresh': options.refresh,
'ensureChildrenRendered': options.ensureChildrenRendered
'droppable-class': options.droppableClass,
'parent-location-selector': options.parentLocationSelector,
'child-selector': options.type,
'refresh': options.refresh,
'ensureChildrenRendered': options.ensureChildrenRendered
});
draggable = new Draggabilly(element, {
handle: options.handleClass,
containment: '.wrapper-dnd'
});
draggable.on('dragStart', _.bind(contentDragger.onDragStart, contentDragger));
draggable.on('dragMove', _.bind(contentDragger.onDragMove, contentDragger));
draggable.on('dragEnd', _.bind(contentDragger.onDragEnd, contentDragger));
draggable.on('dragStart', _.bind(contentDragger.onDragStart, contentDragger, draggable));
draggable.on('dragMove', _.bind(contentDragger.onDragMove, contentDragger, draggable));
draggable.on('dragEnd', _.bind(contentDragger.onDragEnd, contentDragger, draggable));
}
}
};
......
cms/static/js_test.yml
......@@ -59,6 +59,7 @@ lib_paths:
- xmodule_js/common_static/js/vendor/draggabilly.pkgd.js
- xmodule_js/common_static/js/vendor/date.js
- xmodule_js/common_static/js/vendor/domReady.js
- xmodule_js/common_static/js/vendor/json2.js
- xmodule_js/common_static/js/vendor/URI.min.js
- xmodule_js/common_static/js/vendor/jquery.smooth-scroll.min.js
- xmodule_js/common_static/coffee/src/jquery.immediateDescendents.js
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment