[FIX] web_editor: properly match snippet options' DOM
The snippet options are attached to `closest`, `all` and `is` functions
to be able to find/check DOM they are associated to. Their behavior
depend on the snippet option type: the search in the DOM is either done
in the body, the editable parts, the editable children only, ....
The problem is that when searching from a given DOM element, jQuery
won't match the elements whose selector contains this given DOM element.
Or in code terms, jQuery find function behavior is:
`$('A').find('A B')` <=> `$('A A B')` (not `$('A B')`)
This was indeed a problem on the job position apply form pages where the
main editable element is the <form/> element itself. Indeed, the snippet
options' selectors which began by 'form' were not able to match. Worse,
the selector is used for a jQuery search for drag & drop and saving but
not for initialization (where it is used as a `is` check on clicked
elements). So, some DOM were able to be modified by options but not
properly (re)configured before saving.
opw-705902
opw-741305
This commit is contained in:
@@ -107,7 +107,7 @@ data.Class = Widget.extend({
|
||||
return $from.closest(selector, parentNode);
|
||||
},
|
||||
all: function ($from) {
|
||||
return $from ? $from.find(selector) : $(selector);
|
||||
return $from ? cssFind($from, selector) : $(selector);
|
||||
},
|
||||
is: function ($from) {
|
||||
return $from.is(selector);
|
||||
@@ -130,15 +130,31 @@ data.Class = Widget.extend({
|
||||
});
|
||||
},
|
||||
all: is_children ? function ($from) {
|
||||
return ($from || self.$editable).find(selector);
|
||||
return cssFind($from || self.$editable, selector);
|
||||
} : function ($from) {
|
||||
return $from ? $from.find(selector) : self.$editable.filter(selector).add(self.$editable.find(selector));
|
||||
$from = $from || self.$editable;
|
||||
return $from.filter(selector).add(cssFind($from, selector));
|
||||
},
|
||||
is: function ($from) {
|
||||
return $from.is(selector);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* jQuery find function behavior is:
|
||||
* $('A').find('A B') <=> $('A A B')
|
||||
* The searches behavior to find options' DOM needs to be
|
||||
* $('A').find('A B') <=> $('A B')
|
||||
* This is what this function does.
|
||||
*
|
||||
* @param {jQuery} $from - the jQuery element(s) from which to search
|
||||
* @param {string} selector - the CSS selector to match
|
||||
* @returns {jQuery}
|
||||
*/
|
||||
function cssFind($from, selector) {
|
||||
return $from.find('*').filter(selector);
|
||||
}
|
||||
},
|
||||
|
||||
fetch_snippet_templates: function () {
|
||||
|
||||
Reference in New Issue
Block a user