Bugfix: knockout-sortable was broken due to a knockoutjs change of me

This commit is contained in:
djmaze 2020-09-17 23:48:18 +02:00
parent 118c1613a4
commit 970e9d7d7d
2 changed files with 17 additions and 14 deletions

View file

@ -1,22 +1,11 @@
var classesWrittenByBindingKey = '__ko__cssValue';
// For details on the pattern for changing node classes
// see: https://github.com/knockout/knockout/issues/1597
function toggleDomNodeCssClass(node, classNames, shouldHaveClass) {
if (classNames) {
var addOrRemoveFn = shouldHaveClass ? 'add' : 'remove';
classNames.split(/\s+/).forEach(function(className) {
node.classList[addOrRemoveFn](className);
});
}
}
ko.bindingHandlers['class'] = {
'update': function (element, valueAccessor) {
var value = ko.utils.stringTrim(ko.utils.unwrapObservable(valueAccessor()));
toggleDomNodeCssClass(element, element[classesWrittenByBindingKey], false);
ko.utils.toggleDomNodeCssClass(element, element[classesWrittenByBindingKey], false);
element[classesWrittenByBindingKey] = value;
toggleDomNodeCssClass(element, value, true);
ko.utils.toggleDomNodeCssClass(element, value, true);
}
};
@ -26,7 +15,7 @@ ko.bindingHandlers['css'] = {
if (value !== null && typeof value == "object") {
ko.utils.objectForEach(value, function(className, shouldHaveClass) {
shouldHaveClass = ko.utils.unwrapObservable(shouldHaveClass);
toggleDomNodeCssClass(element, className, shouldHaveClass);
ko.utils.toggleDomNodeCssClass(element, className, shouldHaveClass);
});
} else {
ko.bindingHandlers['class']['update'](element, valueAccessor);

View file

@ -26,6 +26,17 @@ ko.utils = (function () {
var canSetPrototype = ({ __proto__: [] } instanceof Array);
// For details on the pattern for changing node classes
// see: https://github.com/knockout/knockout/issues/1597
function toggleDomNodeCssClass(node, classNames, shouldHaveClass) {
if (classNames) {
var addOrRemoveFn = shouldHaveClass ? 'add' : 'remove';
classNames.split(/\s+/).forEach(function(className) {
node.classList[addOrRemoveFn](className);
});
}
}
return {
arrayForEach: function (array, action, actionOwner) {
arrayCall('forEach', array, action, actionOwner);
@ -256,6 +267,8 @@ ko.utils = (function () {
return ko.isObservable(value) ? value.peek() : value;
},
toggleDomNodeCssClass: toggleDomNodeCssClass,
setTextContent: function(element, textContent) {
var value = ko.utils.unwrapObservable(textContent);
if ((value === null) || (value === undefined))
@ -291,6 +304,7 @@ ko.exportSymbol('utils.objectMap', ko.utils.objectMap);
ko.exportSymbol('utils.peekObservable', ko.utils.peekObservable);
ko.exportSymbol('utils.registerEventHandler', ko.utils.registerEventHandler);
ko.exportSymbol('utils.stringifyJson', ko.utils.stringifyJson);
ko.exportSymbol('utils.toggleDomNodeCssClass', ko.utils.toggleDomNodeCssClass);
ko.exportSymbol('utils.triggerEvent', ko.utils.triggerEvent);
ko.exportSymbol('utils.unwrapObservable', ko.utils.unwrapObservable);
ko.exportSymbol('utils.objectForEach', ko.utils.objectForEach);