manchandavishal fbbb6e2cb3 Update event handling code for compatibility with jQuery 3.0 and above
This commit updates the event handling code to ensure compatibility
with jQuery 3.0 and higher versions. The previous code relied on the
window.jQuery.event.props property, which has been removed in jQuery 3.0.

The updated code checks if the dataTransfer property is defined in the
jQuery.event.special object. If not, it adds the property to ensure
proper functionality. This modification allows the code to work seamlessly
with jQuery 3.0 and above. For more info. please refer [1] and [2].

[1] https://jquery.com/upgrade-guide/3.0/#breaking-change-jquery-event-props-and-jquery-event-fixhooks-removed
[2] https://learn.jquery.com/events/event-extensions/

Closes-Bug: 2027728

Change-Id: Ibb6db39b3e78eb6634f06a10417a76d529703de8
2023-07-14 23:38:36 +05:30

195 lines
7.2 KiB
JavaScript

(function (ng) {
'use strict';
function isJqueryEventDataTransfer(){
return window.jQuery && (!window.jQuery.event.special.dataTransfer ||
!window.jQuery.event.special.dataTransfer.props || -1 ===
window.jQuery.event.special.dataTransfer.props.indexOf('dataTransfer'));/
}
if (isJqueryEventDataTransfer()) {
if (!window.jQuery.event.special.dataTransfer) {
window.jQuery.event.special.dataTransfer = {
props: ['dataTransfer']
};
} else if (!window.jQuery.event.special.dataTransfer.props) {
window.jQuery.event.special.dataTransfer.props = ['dataTransfer'];
} else if (-1 === window.jQuery.event.special.dataTransfer.props.indexOf('dataTransfer')) {
window.jQuery.event.special.dataTransfer.props.push('dataTransfer');
}
}
var module = ng.module('lrDragNDrop', []);
module.service('lrDragStore', ['$document', function (document) {
var store = {};
this.hold = function hold(key, item, collectionFrom, safe) {
store[key] = {
item: item,
collection: collectionFrom,
safe: safe === true
}
};
this.get = function (namespace) {
var
modelItem = store[namespace], itemIndex;
if (modelItem) {
itemIndex = modelItem.collection.indexOf(modelItem.item);
return modelItem.safe === true ? modelItem.item : modelItem.collection.splice(itemIndex, 1)[0];
} else {
return null;
}
};
this.clean = function clean() {
store = {};
};
this.isHolding = function (namespace) {
return store[namespace] !== undefined;
};
document.bind('dragend', this.clean);
}]);
module.service('lrDragHelper', function () {
var th = this;
th.parseRepeater = function(scope, attr) {
var
repeatExpression = attr.ngRepeat,
match;
if (!repeatExpression) {
throw Error('this directive must be used with ngRepeat directive');
}
match = repeatExpression.match(/^(.*\sin).(\S*)/);
if (!match) {
throw Error("Expected ngRepeat in form of '_item_ in _collection_' but got '" +
repeatExpression + "'.");
}
return scope.$eval(match[2]);
};
th.lrDragSrcDirective = function(store, safe) {
return function compileFunc(el, iattr) {
iattr.$set('draggable', true);
return function linkFunc(scope, element, attr) {
var
collection,
key = (safe === true ? attr.lrDragSrcSafe : attr.lrDragSrc ) || 'temp';
if(attr.lrDragData) {
scope.$watch(attr.lrDragData, function (newValue) {
collection = newValue;
});
} else {
collection = th.parseRepeater(scope, attr);
}
element.bind('dragstart', function (evt) {
store.hold(key, collection[scope.$index], collection, safe);
if(angular.isDefined(evt.dataTransfer)) {
evt.dataTransfer.setData('text/html', null); //FF/jQuery fix
}
});
}
}
}
});
module.directive('lrDragSrc', ['lrDragStore', 'lrDragHelper', function (store, dragHelper) {
return{
compile: dragHelper.lrDragSrcDirective(store)
};
}]);
module.directive('lrDragSrcSafe', ['lrDragStore', 'lrDragHelper', function (store, dragHelper) {
return{
compile: dragHelper.lrDragSrcDirective(store, true)
};
}]);
module.directive('lrDropTarget', ['lrDragStore', 'lrDragHelper', '$parse', function (store, dragHelper, $parse) {
return {
link: function (scope, element, attr) {
var
collection,
key = attr.lrDropTarget || 'temp',
classCache = null;
function isAfter(x, y) {
//check if below or over the diagonal of the box element
return (element[0].offsetHeight - x * element[0].offsetHeight / element[0].offsetWidth) < y;
}
function resetStyle() {
if (classCache !== null) {
element.removeClass(classCache);
classCache = null;
}
}
if(attr.lrDragData) {
scope.$watch(attr.lrDragData, function (newValue) {
collection = newValue;
});
} else {
collection = dragHelper.parseRepeater(scope, attr);
}
element.bind('drop', function (evt) {
var
collectionCopy = ng.copy(collection),
item = store.get(key),
dropIndex, i, l;
if (item !== null) {
dropIndex = scope.$index;
dropIndex = isAfter(evt.offsetX, evt.offsetY) ? dropIndex + 1 : dropIndex;
//srcCollection=targetCollection => we may need to apply a correction
if (collectionCopy.length > collection.length) {
for (i = 0, l = Math.min(dropIndex, collection.length - 1); i <= l; i++) {
if (!ng.equals(collectionCopy[i], collection[i])) {
dropIndex = dropIndex - 1;
break;
}
}
}
scope.$apply(function () {
collection.splice(dropIndex, 0, item);
var fn = $parse(attr.lrDropSuccess) || ng.noop;
fn(scope, {e: evt, item: item, collection: collection});
});
evt.preventDefault();
resetStyle();
store.clean();
}
});
element.bind('dragleave', resetStyle);
element.bind('dragover', function (evt) {
var className;
if (store.isHolding(key)) {
className = isAfter(evt.offsetX, evt.offsetY) ? 'lr-drop-target-after' : 'lr-drop-target-before';
if (classCache !== className && classCache !== null) {
element.removeClass(classCache);
}
if (classCache !== className) {
element.addClass(className);
}
classCache = className;
}
evt.preventDefault();
});
}
};
}]);
})(angular);