')).parent().parent();
+ restoreCursor();
+ }
+
+ const nbColumns = parseInt(widgetValue);
+ await this._updateColumnCount($row[0], (nbColumns || 1));
+ // Yield UI thread to wait for event to bubble before activate_snippet is called.
+ // In this case this lets the select handle the click event before we switch snippet.
+ // TODO: make this more generic in activate_snippet event handler.
+ await new Promise(resolve => setTimeout(resolve));
+ if (nbColumns === 0) {
+ const restoreCursor = preserveCursor(this.$target[0].ownerDocument);
+ resetOuids($row[0]);
+ $row.contents().unwrap().contents().unwrap();
+ restoreCursor();
+ this.trigger_up('activate_snippet', {$snippet: this.$target});
+ } else if (previousNbColumns === 0) {
+ this.trigger_up('activate_snippet', {$snippet: this.$('> .row').children().first()});
+ }
+ this.trigger_up('option_update', {
+ optionName: 'StepsConnector',
+ name: 'change_columns',
+ });
+ },
+ /**
+ * Changes the layout (columns or grid).
+ *
+ * @see this.selectClass for parameters
+ */
+ async selectLayout(previewMode, widgetValue, params) {
+ if (widgetValue === "grid") {
+ const rowEl = this.$target[0].querySelector('.row');
+ if (!rowEl || !rowEl.classList.contains('o_grid_mode')) { // Prevent toggling grid mode twice.
+ gridUtils._toggleGridMode(this.$target[0]);
+ this.trigger_up('activate_snippet', {$snippet: this.$target});
+ }
+ } else {
+ // Toggle normal mode only if grid mode was activated (as it's in
+ // normal mode by default).
+ const rowEl = this.$target[0].querySelector('.row');
+ if (rowEl && rowEl.classList.contains('o_grid_mode')) {
+ this._toggleNormalMode(rowEl);
+ this.trigger_up('activate_snippet', {$snippet: this.$target});
+ }
+ }
+ this.trigger_up('option_update', {
+ optionName: 'StepsConnector',
+ name: 'change_columns',
+ });
+ },
+ /**
+ * Adds an image, some text or a button in the grid.
+ *
+ * @see this.selectClass for parameters
+ */
+ async addElement(previewMode, widgetValue, params) {
+ const rowEl = this.$target[0].querySelector('.row');
+ const elementType = widgetValue;
+
+ // If it has been less than 15 seconds that we have added an element,
+ // shift the new element right and down by one cell. Otherwise, put it
+ // on the top left corner.
+ const currentTime = new Date().getTime();
+ if (this.lastAddTime && (currentTime - this.lastAddTime) / 1000 < 15) {
+ this.lastStartPosition = [this.lastStartPosition[0] + 1, this.lastStartPosition[1] + 1];
+ } else {
+ this.lastStartPosition = [1, 1]; // [rowStart, columnStart]
+ }
+ this.lastAddTime = currentTime;
+
+ // Create the new column.
+ const newColumnEl = document.createElement('div');
+ newColumnEl.classList.add('o_grid_item');
+ let numberColumns, numberRows;
+ let imageLoadedPromise;
+
+ if (elementType === 'image') {
+ // Set the columns properties.
+ newColumnEl.classList.add('col-lg-6', 'g-col-lg-6', 'g-height-6', 'o_grid_item_image');
+ numberColumns = 6;
+ numberRows = 6;
+
+ // Choose an image with the media dialog.
+ let isImageSaved = false;
+ await new Promise(resolve => {
+ this.call("dialog", "add", MediaDialog, {
+ onlyImages: true,
+ save: imageEl => {
+ isImageSaved = true;
+ imageLoadedPromise = new Promise(resolve => {
+ imageEl.addEventListener("load", () => resolve(), {once: true});
+ });
+ // Adds the image to the new column.
+ newColumnEl.appendChild(imageEl);
+ },
+ }, {
+ onClose: () => resolve()
+ });
+ });
+ if (!isImageSaved) {
+ // Revert the current step to exclude the step saved when the
+ // media dialog closed.
+ this.options.wysiwyg.odooEditor.historyRevertCurrentStep();
+ return;
+ }
+ } else if (elementType === 'text') {
+ newColumnEl.classList.add('col-lg-4', 'g-col-lg-4', 'g-height-2');
+ numberColumns = 4;
+ numberRows = 2;
+
+ // Create default text content.
+ const pEl = document.createElement('p');
+ pEl.classList.add('o_default_snippet_text');
+ pEl.textContent = _t("Write something...");
+
+ newColumnEl.appendChild(pEl);
+ } else if (elementType === 'button') {
+ newColumnEl.classList.add('col-lg-2', 'g-col-lg-2', 'g-height-1');
+ numberColumns = 2;
+ numberRows = 1;
+
+ // Create default button.
+ const aEl = document.createElement('a');
+ aEl.href = '#';
+ aEl.classList.add('mb-2', 'btn', 'btn-primary');
+ aEl.textContent = "Button";
+
+ newColumnEl.appendChild(aEl);
+ }
+ // Place the column in the grid.
+ const rowStart = this.lastStartPosition[0];
+ let columnStart = this.lastStartPosition[1];
+ if (columnStart + numberColumns > 13) {
+ columnStart = 1;
+ this.lastStartPosition[1] = columnStart;
+ }
+ newColumnEl.style.gridArea = `${rowStart} / ${columnStart} / ${rowStart + numberRows} / ${columnStart + numberColumns}`;
+
+ // Setting the z-index to the maximum of the grid.
+ gridUtils._setElementToMaxZindex(newColumnEl, rowEl);
+
+ // Add the new column and update the grid height.
+ rowEl.appendChild(newColumnEl);
+ gridUtils._resizeGrid(rowEl);
+
+ // Scroll to the new column if more than half of it is hidden (= out of
+ // the viewport or hidden by an other element).
+ if (elementType === "image") {
+ // If an image was added, wait for it to be loaded before scrolling.
+ await imageLoadedPromise;
+ }
+ const newColumnPosition = newColumnEl.getBoundingClientRect();
+ const middleX = (newColumnPosition.left + newColumnPosition.right) / 2;
+ const middleY = (newColumnPosition.top + newColumnPosition.bottom) / 2;
+ const sameCoordinatesEl = this.ownerDocument.elementFromPoint(middleX, middleY);
+ if (!sameCoordinatesEl || !newColumnEl.contains(sameCoordinatesEl)) {
+ newColumnEl.scrollIntoView({behavior: "smooth", block: "center"});
+ }
+ this.trigger_up('activate_snippet', {$snippet: $(newColumnEl)});
+ },
+ /**
+ * @override
+ */
+ async selectStyle(previewMode, widgetValue, params) {
+ await this._super(previewMode, widgetValue, params);
+
+ const rowEl = this.$target[0];
+ const isMobileView = weUtils.isMobileView(rowEl);
+ if (["row-gap", "column-gap"].includes(params.cssProperty) && !isMobileView) {
+ // Reset the animation.
+ this._removeGridPreview();
+ void rowEl.offsetWidth; // Trigger a DOM reflow.
+
+ // Add an animated grid preview.
+ this.options.wysiwyg.odooEditor.observerUnactive("addGridPreview");
+ this.gridPreviewEl = gridUtils._addBackgroundGrid(rowEl, 0);
+ this.gridPreviewEl.classList.add("o_we_grid_preview");
+ gridUtils._setElementToMaxZindex(this.gridPreviewEl, rowEl);
+ this.options.wysiwyg.odooEditor.observerActive("addGridPreview");
+ this.removeGridPreview = this._removeGridPreview.bind(this);
+ rowEl.addEventListener("animationend", this.removeGridPreview);
+ }
+ },
+
+ //--------------------------------------------------------------------------
+ // Private
+ //--------------------------------------------------------------------------
+
+ /**
+ * @override
+ */
+ _computeWidgetState: function (methodName, params) {
+ if (methodName === 'selectCount') {
+ const isMobile = this._isMobile();
+ const columnEls = this.$target[0].querySelector(":scope > .row")?.children;
+ return this._getNbColumns(columnEls, isMobile);
+ } else if (methodName === 'selectLayout') {
+ const rowEl = this.$target[0].querySelector('.row');
+ if (rowEl && rowEl.classList.contains('o_grid_mode')) {
+ return "grid";
+ } else {
+ return 'normal';
+ }
+ }
+ return this._super(...arguments);
+ },
+ /**
+ * @override
+ */
+ _computeWidgetVisibility(widgetName, params) {
+ if (widgetName === 'zero_cols_opt') {
+ // Note: "s_allow_columns" indicates containers which may have
+ // bare content (without columns) and are allowed to have columns.
+ // By extension, we only show the "None" option on elements that
+ // were marked as such as they were allowed to have bare content in
+ // the first place.
+ return this.$target.is('.s_allow_columns');
+ } else if (widgetName === "column_count_opt") {
+ // Hide the selectCount widget if the `s_nb_column_fixed` class is
+ // on the row.
+ return !this.$target[0].querySelector(":scope > .row.s_nb_column_fixed");
+ } else if (widgetName === "custom_cols_opt") {
+ // Show "Custom" if the user altered the columns in some way (i.e.
+ // by adding offsets or resizing a column). This is only shown as
+ // an indication, but shouldn't be selectable.
+ const isMobile = this._isMobile();
+ return this.$target[0].querySelector(":scope > .row") &&
+ this._areColsCustomized(this.$target[0].querySelector(":scope > .row").children,
+ isMobile);
+ }
+ return this._super(...arguments);
+ },
+ /**
+ * If the number of columns requested is greater than the number of items,
+ * adds new columns which are clones of the last one. If there are less
+ * columns than the number of items, reorganizes the elements on the right
+ * amount of rows.
+ *
+ * @private
+ * @param {HTMLElement} rowEl - the row in which to update the columns
+ * @param {integer} nbColumns - the number of columns requested
+ */
+ async _updateColumnCount(rowEl, nbColumns) {
+ const isMobile = this._isMobile();
+ // The number of elements per row before the update.
+ const prevNbColumns = this._getNbColumns(rowEl.children, isMobile);
+
+ if (nbColumns === prevNbColumns) {
+ return;
+ }
+ this._resizeColumns(rowEl.children, nbColumns);
+
+ const itemsDelta = nbColumns - rowEl.children.length;
+ if (itemsDelta > 0) {
+ const newItems = [];
+ for (let i = 0; i < itemsDelta; i++) {
+ const lastEl = rowEl.lastElementChild;
+ newItems.push(new Promise(resolve => {
+ this.trigger_up("clone_snippet", {$snippet: $(lastEl), onSuccess: resolve});
+ }));
+ }
+ await Promise.all(newItems);
+ }
+
+ this.trigger_up('cover_update');
+ },
+ /**
+ * Resizes the columns for the mobile or desktop view.
+ *
+ * @private
+ * @param {HTMLCollection} columnEls - the elements to resize
+ * @param {integer} nbColumns - the number of wanted columns
+ */
+ _resizeColumns(columnEls, nbColumns) {
+ const isMobile = this._isMobile();
+ const itemSize = Math.floor(12 / nbColumns) || 1;
+ const firstItem = this._getFirstItem(columnEls, isMobile);
+ const firstItemOffset = Math.floor((12 - itemSize * nbColumns) / 2);
+
+ const resolutionModifier = isMobile ? "" : "-lg";
+ const replacingRegex =
+ // (?!\S): following char cannot be a non-space character
+ new RegExp(`(?:^|\\s+)(col|offset)${resolutionModifier}(-\\d{1,2})?(?!\\S)`, "g");
+
+ for (const columnEl of columnEls) {
+ columnEl.className = columnEl.className.replace(replacingRegex, "");
+ columnEl.classList.add(`col${resolutionModifier}-${itemSize}`);
+
+ if (firstItemOffset && columnEl === firstItem) {
+ columnEl.classList.add(`offset${resolutionModifier}-${firstItemOffset}`);
+ }
+ const hasMobileOffset = columnEl.className.match(/(^|\s+)offset-\d{1,2}(?!\S)/);
+ const hasDesktopOffset = columnEl.className.match(/(^|\s+)offset-lg-[1-9][0-1]?(?!\S)/);
+ columnEl.classList.toggle("offset-lg-0", hasMobileOffset && !hasDesktopOffset);
+ }
+ },
+ /**
+ * Toggles the normal mode.
+ *
+ * @private
+ * @param {Element} rowEl
+ */
+ async _toggleNormalMode(rowEl) {
+ // Removing the grid class
+ rowEl.classList.remove('o_grid_mode');
+ const columnEls = rowEl.children;
+ // Removing the grid previews (if any).
+ await new Promise(resolve => {
+ this.trigger_up("clean_ui_request", {
+ targetEl: this.$target[0].closest("section"),
+ onSuccess: resolve,
+ });
+ });
+
+ for (const columnEl of columnEls) {
+ // Reloading the images.
+ gridUtils._reloadLazyImages(columnEl);
+ // Removing the grid properties.
+ gridUtils._convertToNormalColumn(columnEl);
+ }
+ // Removing the grid properties.
+ delete rowEl.dataset.rowCount;
+ // Kept for compatibility.
+ rowEl.style.removeProperty('--grid-item-padding-x');
+ rowEl.style.removeProperty('--grid-item-padding-y');
+ rowEl.style.removeProperty("gap");
+ },
+ /**
+ * Removes the grid preview that was added when changing the grid gaps.
+ *
+ * @private
+ */
+ _removeGridPreview() {
+ this.options.wysiwyg.odooEditor.observerUnactive("removeGridPreview");
+ this.$target[0].removeEventListener("animationend", this.removeGridPreview);
+ if (this.gridPreviewEl) {
+ this.gridPreviewEl.remove();
+ delete this.gridPreviewEl;
+ }
+ delete this.removeGridPreview;
+ this.options.wysiwyg.odooEditor.observerActive("removeGridPreview");
+ },
+ /**
+ * @returns {boolean}
+ */
+ _isMobile() {
+ return weUtils.isMobileView(this.$target[0]);
+ },
+});
+
+registry.GridColumns = SnippetOptionWidget.extend({
+ /**
+ * @override
+ */
+ cleanUI() {
+ // Remove the padding highlights.
+ this._removePaddingPreview();
+ },
+
+ //--------------------------------------------------------------------------
+ // Options
+ //--------------------------------------------------------------------------
+
+ /**
+ * @override
+ */
+ async selectStyle(previewMode, widgetValue, params) {
+ await this._super(...arguments);
+ if (["--grid-item-padding-y", "--grid-item-padding-x"].includes(params.cssProperty)) {
+ // Reset the animation.
+ this._removePaddingPreview();
+ void this.$target[0].offsetWidth; // Trigger a DOM reflow.
+
+ // Highlight the padding when changing it, by adding a pseudo-
+ // element with an animated colored border inside the grid item.
+ this.options.wysiwyg.odooEditor.observerUnactive("addPaddingPreview");
+ this.$target[0].classList.add("o_we_padding_highlight");
+ this.options.wysiwyg.odooEditor.observerActive("addPaddingPreview");
+ this.removePaddingPreview = this._removePaddingPreview.bind(this);
+ this.$target[0].addEventListener("animationend", this.removePaddingPreview);
+ }
+ },
+
+ //--------------------------------------------------------------------------
+ // Private
+ //--------------------------------------------------------------------------
+
+ /**
+ * @override
+ */
+ _computeWidgetVisibility(widgetName, params) {
+ if (["grid_padding_y_opt", "grid_padding_x_opt"].includes(widgetName)) {
+ return this.$target[0].parentElement.classList.contains("o_grid_mode");
+ }
+ return this._super(...arguments);
+ },
+ /**
+ * Removes the padding highlights that were added when changing the grid
+ * item padding.
+ *
+ * @private
+ */
+ _removePaddingPreview() {
+ this.options.wysiwyg.odooEditor.observerUnactive("removePaddingPreview");
+ this.$target[0].removeEventListener("animationend", this.removePaddingPreview);
+ this.$target[0].classList.remove("o_we_padding_highlight");
+ delete this.removePaddingPreview;
+ this.options.wysiwyg.odooEditor.observerActive("removePaddingPreview");
+ },
+});
+
+registry.vAlignment = SnippetOptionWidget.extend({
+ /**
+ * @override
+ */
+ async _computeWidgetState(methodName, params) {
+ const value = await this._super(...arguments);
+ if (methodName === 'selectClass' && !value) {
+ // If there is no `align-items-` class on the row, then the `align-
+ // items-stretch` class is selected, because the behaviors are
+ // equivalent in both situations.
+ return 'align-items-stretch';
+ }
+ return value;
+ },
+});
+
+/**
+ * Allows snippets to be moved before the preceding element or after the following.
+ */
+registry.SnippetMove = SnippetOptionWidget.extend(ColumnLayoutUtils, {
+ displayOverlayOptions: true,
+
+ /**
+ * @override
+ */
+ start: function () {
+ var $buttons = this.$el.find('we-button');
+ var $overlayArea = this.$overlay.find('.o_overlay_move_options');
+ // Putting the arrows side by side.
+ $overlayArea.prepend($buttons[1]);
+ $overlayArea.prepend($buttons[0]);
+
+ // Needed for compatibility (with already dropped snippets).
+ // If the target is a column, check if all the columns are either mobile
+ // ordered or not. If they are not consistent, then we remove the mobile
+ // order classes from all of them, to avoid issues.
+ const parentEl = this.$target[0].parentElement;
+ if (parentEl.classList.contains("row")) {
+ const columnEls = [...parentEl.children];
+ const orderedColumnEls = columnEls.filter(el => el.style.order);
+ if (orderedColumnEls.length && orderedColumnEls.length !== columnEls.length) {
+ this._removeMobileOrders(orderedColumnEls);
+ }
+ }
+
+ return this._super(...arguments);
+ },
+ /**
+ * @override
+ */
+ onClone(options) {
+ this._super.apply(this, arguments);
+ const mobileOrder = this.$target[0].style.order;
+ // If the order has been adapted on mobile, it must be different
+ // for each clone.
+ if (options.isCurrent && mobileOrder) {
+ const siblingEls = this.$target[0].parentElement.children;
+ const cloneEls = [...siblingEls].filter(el => el.style.order === mobileOrder);
+ // For cases in which multiple clones are made at the same time, we
+ // change the order for all clones at once. (e.g.: it happens when
+ // increasing the columns count.) This makes sure the clones get a
+ // mobile order in line with their DOM order.
+ cloneEls.forEach((el, i) => {
+ if (i > 0) {
+ el.style.order = siblingEls.length - cloneEls.length + i;
+ }
+ });
+ }
+ },
+ /**
+ * @override
+ */
+ onMove() {
+ this._super.apply(this, arguments);
+ // Remove all the mobile order classes after a drag and drop.
+ this._removeMobileOrders(this.$target[0].parentElement.children);
+ },
+ /**
+ * @override
+ */
+ onRemove() {
+ this._super.apply(this, arguments);
+ const targetMobileOrder = this.$target[0].style.order;
+ // If the order has been adapted on mobile, the gap created by the
+ // removed snippet must be filled in.
+ if (targetMobileOrder) {
+ const targetOrder = parseInt(targetMobileOrder);
+ this._fillRemovedItemGap(this.$target[0].parentElement, targetOrder);
+ }
+ },
+
+ //--------------------------------------------------------------------------
+ // Options
+ //--------------------------------------------------------------------------
+
+ /**
+ * Moves the snippet around.
+ *
+ * @see this.selectClass for parameters
+ */
+ moveSnippet: function (previewMode, widgetValue, params) {
+ const isMobile = this._isMobile();
+ const isNavItem = this.$target[0].classList.contains('nav-item');
+ const $tabPane = isNavItem ? $(this.$target.find('.nav-link')[0].hash) : null;
+ const moveLeftOrRight = ["move_left_opt", "move_right_opt"].includes(params.name);
+
+ let siblingEls, mobileOrder;
+ if (moveLeftOrRight) {
+ siblingEls = this.$target[0].parentElement.children;
+ mobileOrder = !!this.$target[0].style.order;
+ }
+ if (moveLeftOrRight && isMobile && !isNavItem) {
+ if (!mobileOrder) {
+ this._addMobileOrders(siblingEls);
+ }
+ this._swapMobileOrders(widgetValue, siblingEls);
+ } else {
+ switch (widgetValue) {
+ case "prev": {
+ // Consider only visible elements.
+ let prevEl = this.$target[0].previousElementSibling;
+ while (prevEl && window.getComputedStyle(prevEl).display === "none") {
+ prevEl = prevEl.previousElementSibling;
+ }
+ prevEl?.insertAdjacentElement("beforebegin", this.$target[0]);
+ if (isNavItem) {
+ $tabPane.prev().before($tabPane);
+ }
+ break;
+ }
+ case "next": {
+ // Consider only visible elements.
+ let nextEl = this.$target[0].nextElementSibling;
+ while (nextEl && window.getComputedStyle(nextEl).display === "none") {
+ nextEl = nextEl.nextElementSibling;
+ }
+ nextEl?.insertAdjacentElement("afterend", this.$target[0]);
+ if (isNavItem) {
+ $tabPane.next().after($tabPane);
+ }
+ break;
+ }
+ }
+ if (mobileOrder) {
+ this._removeMobileOrders(siblingEls);
+ }
+ }
+ if (!this.$target.is(this.data.noScroll)
+ && (params.name === 'move_up_opt' || params.name === 'move_down_opt')) {
+ const mainScrollingEl = $().getScrollingElement()[0];
+ const elTop = this.$target[0].getBoundingClientRect().top;
+ const heightDiff = mainScrollingEl.offsetHeight - this.$target[0].offsetHeight;
+ const bottomHidden = heightDiff < elTop;
+ const hidden = elTop < 0 || bottomHidden;
+ if (hidden) {
+ dom.scrollTo(this.$target[0], {
+ extraOffset: 50,
+ forcedOffset: bottomHidden ? heightDiff - 50 : undefined,
+ easing: 'linear',
+ duration: 500,
+ });
+ }
+ }
+ this.trigger_up('option_update', {
+ optionName: 'StepsConnector',
+ name: 'move_snippet',
+ });
+ // Update the "Invisible Elements" panel as the order of invisible
+ // snippets could have changed on the page.
+ this.trigger_up("update_invisible_dom");
+ },
+
+ //--------------------------------------------------------------------------
+ // Private
+ //--------------------------------------------------------------------------
+
+ /**
+ * @override
+ */
+ async _computeWidgetVisibility(widgetName, params) {
+ const moveUpOrLeft = widgetName === "move_up_opt" || widgetName === "move_left_opt";
+ const moveDownOrRight = widgetName === "move_down_opt" || widgetName === "move_right_opt";
+ const moveLeftOrRight = widgetName === "move_left_opt" || widgetName === "move_right_opt";
+
+ if (moveUpOrLeft || moveDownOrRight) {
+ // The arrows are not displayed if the target is in a grid and if
+ // not in mobile view.
+ const isMobileView = weUtils.isMobileView(this.$target[0]);
+ if (!isMobileView && this.$target[0].classList.contains("o_grid_item")) {
+ return false;
+ }
+ // On mobile, items' reordering is independent from desktop inside
+ // a snippet (left or right), not at a higher level (up or down).
+ if (moveLeftOrRight && isMobileView) {
+ const targetMobileOrder = this.$target[0].style.order;
+ if (targetMobileOrder) {
+ const siblingEls = this.$target[0].parentElement.children;
+ const orderModifier = widgetName === "move_left_opt" ? -1 : 1;
+ let delta = 0;
+ while (true) {
+ delta += orderModifier;
+ const nextOrder = parseInt(targetMobileOrder) + delta;
+ const siblingEl = [...siblingEls].find(el => el.style.order === nextOrder.toString());
+ if (!siblingEl) {
+ break;
+ }
+ if (window.getComputedStyle(siblingEl).display === "none") {
+ continue;
+ }
+ return true;
+ }
+ return false;
+ }
+ }
+ // Consider only visible elements.
+ const direction = moveUpOrLeft ? "previousElementSibling" : "nextElementSibling";
+ let siblingEl = this.$target[0][direction];
+ while (siblingEl && window.getComputedStyle(siblingEl).display === "none") {
+ siblingEl = siblingEl[direction];
+ }
+ return !!siblingEl;
+ }
+ return this._super(...arguments);
+ },
+ /**
+ * Swaps the mobile orders.
+ *
+ * @param {string} widgetValue
+ * @param {HTMLCollection} siblingEls
+ */
+ _swapMobileOrders(widgetValue, siblingEls) {
+ const targetMobileOrder = this.$target[0].style.order;
+ const orderModifier = widgetValue === "prev" ? -1 : 1;
+ let delta = 0;
+ while (true) {
+ delta += orderModifier;
+ const newOrder = parseInt(targetMobileOrder) + delta;
+ const comparedEl = [...siblingEls].find(el => el.style.order === newOrder.toString());
+ if (window.getComputedStyle(comparedEl).display === "none") {
+ continue;
+ }
+ this.$target[0].style.order = newOrder;
+ comparedEl.style.order = targetMobileOrder;
+ break;
+ }
+ },
+ /**
+ * @returns {Boolean}
+ */
+ _isMobile() {
+ return false;
+ },
+});
+
+/**
+ * Allows for media to be replaced.
+ */
+registry.ReplaceMedia = SnippetOptionWidget.extend({
+ init: function () {
+ this._super(...arguments);
+ this._activateLinkTool = this._activateLinkTool.bind(this);
+ this._deactivateLinkTool = this._deactivateLinkTool.bind(this);
+ },
+
+ /**
+ * @override
+ */
+ onFocus() {
+ this.options.wysiwyg.odooEditor.addEventListener('activate_image_link_tool', this._activateLinkTool);
+ this.options.wysiwyg.odooEditor.addEventListener('deactivate_image_link_tool', this._deactivateLinkTool);
+ // When we start editing an image, rerender the UI to ensure the
+ // we-select that suggests the anchors is in a consistent state.
+ this.rerender = true;
+ },
+ /**
+ * @override
+ */
+ onBlur() {
+ this.options.wysiwyg.odooEditor.removeEventListener('activate_image_link_tool', this._activateLinkTool);
+ this.options.wysiwyg.odooEditor.removeEventListener('deactivate_image_link_tool', this._deactivateLinkTool);
+ },
+
+ //--------------------------------------------------------------------------
+ // Options
+ //--------------------------------------------------------------------------
+
+ /**
+ * Replaces the media.
+ *
+ * @see this.selectClass for parameters
+ */
+ async replaceMedia() {
+ // open mediaDialog and replace the media.
+ await this.options.wysiwyg.openMediaDialog({ node:this.$target[0] });
+ },
+ /**
+ * Makes the image a clickable link by wrapping it in an .
+ * This function is also called for the opposite operation.
+ *
+ * @see this.selectClass for parameters
+ */
+ setLink(previewMode, widgetValue, params) {
+ const parentEl = this.$target[0].parentNode;
+ if (parentEl.tagName !== 'A') {
+ const wrapperEl = document.createElement('a');
+ this.$target[0].after(wrapperEl);
+ wrapperEl.appendChild(this.$target[0]);
+ // TODO Remove when bug fixed in Chrome.
+ if (this.$target[0].getBoundingClientRect().width === 0) {
+ // Chrome lost lazy-loaded image => Force Chrome to display image.
+ const src = this.$target[0].src;
+ this.$target[0].src = '';
+ this.$target[0].src = src;
+ }
+ } else {
+ const fragment = document.createDocumentFragment();
+ fragment.append(...parentEl.childNodes);
+ parentEl.replaceWith(fragment);
+ }
+ },
+ /**
+ * Changes the image link so that the URL is opened on another tab or not
+ * when it is clicked.
+ *
+ * @see this.selectClass for parameters
+ */
+ setNewWindow(previewMode, widgetValue, params) {
+ const linkEl = this.$target[0].parentElement;
+ if (widgetValue) {
+ linkEl.setAttribute('target', '_blank');
+ } else {
+ linkEl.removeAttribute('target');
+ }
+ },
+ /**
+ * Records the target url of the hyperlink.
+ *
+ * @see this.selectClass for parameters
+ */
+ setUrl(previewMode, widgetValue, params) {
+ const linkEl = this.$target[0].parentElement;
+ let url = widgetValue;
+ if (!url) {
+ // As long as there is no URL, the image is not considered a link.
+ linkEl.removeAttribute('href');
+ this.$target.trigger('href_changed');
+ return;
+ }
+ if (!url.startsWith('/') && !url.startsWith('#')
+ && !/^([a-zA-Z]*.):.+$/gm.test(url)) {
+ // We permit every protocol (http:, https:, ftp:, mailto:,...).
+ // If none is explicitly specified, we assume it is a http.
+ url = 'http://' + url;
+ }
+ linkEl.setAttribute('href', url);
+ this.rerender = true;
+ this.$target.trigger('href_changed');
+ },
+ /**
+ * @override
+ */
+ async updateUI() {
+ if (this.rerender) {
+ this.rerender = false;
+ await this._rerenderXML();
+ return;
+ }
+ return this._super.apply(this, arguments);
+ },
+
+ //--------------------------------------------------------------------------
+ // Private
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ _activateLinkTool() {
+ if (this.$target[0].parentElement.tagName === 'A') {
+ this._requestUserValueWidgets('media_url_opt')[0].focus();
+ } else {
+ this._requestUserValueWidgets('media_link_opt')[0].enable();
+ }
+ },
+ /**
+ * @private
+ */
+ _deactivateLinkTool() {
+ const parentEl = this.$target[0].parentNode;
+ if (parentEl.tagName === 'A') {
+ this._requestUserValueWidgets('media_link_opt')[0].enable();
+ }
+ },
+ /**
+ * @override
+ */
+ _computeWidgetState(methodName, params) {
+ const parentEl = this.$target[0].parentElement;
+ const linkEl = parentEl.tagName === 'A' ? parentEl : null;
+ switch (methodName) {
+ case 'setLink': {
+ return linkEl ? 'true' : '';
+ }
+ case 'setUrl': {
+ let href = linkEl ? linkEl.getAttribute('href') : '';
+ return href || '';
+ }
+ case 'setNewWindow': {
+ const target = linkEl ? linkEl.getAttribute('target') : '';
+ return target && target === '_blank' ? 'true' : '';
+ }
+ }
+ return this._super(...arguments);
+ },
+ /**
+ * @override
+ */
+ async _computeWidgetVisibility(widgetName, params) {
+ if (widgetName === 'media_link_opt') {
+ if (this.$target[0].matches('img')) {
+ return isImageSupportedForStyle(this.$target[0]);
+ }
+ return !this.$target[0].classList.contains('media_iframe_video');
+ }
+ return this._super(...arguments);
+ },
+});
+
+/*
+ * Abstract option to be extended by the ImageTools and BackgroundOptimize
+ * options that handles all the common parts.
+ */
+const ImageHandlerOption = SnippetOptionWidget.extend({
+ /**
+ * @override
+ */
+ async willStart() {
+ const _super = this._super.bind(this);
+ await this._initializeImage();
+ return _super(...arguments);
+ },
+ /**
+ * @override
+ */
+ async start() {
+ await this._super(...arguments);
+ const weightEl = document.createElement('span');
+ weightEl.classList.add('o_we_image_weight', 'o_we_tag', 'd-none');
+ weightEl.title = _t("Size");
+ this.$weight = $(weightEl);
+ // Perform the loading of the image info synchronously in order to
+ // avoid an intermediate rendering of the Blocks tab during the
+ // loadImageInfo RPC that obtains the file size.
+ // This does not update the target.
+ await this._applyOptions(false);
+ },
+
+ //--------------------------------------------------------------------------
+ // Public
+ //--------------------------------------------------------------------------
+
+ /**
+ * @override
+ */
+ async updateUI() {
+ await this._super(...arguments);
+
+ if (this._filesize === undefined) {
+ this.$weight.addClass('d-none');
+ await this._applyOptions(false);
+ }
+ if (this._filesize !== undefined) {
+ this.$weight.text(`${this._filesize.toFixed(1)} kb`);
+ this.$weight.removeClass('d-none');
+ this._relocateWeightEl();
+ }
+ },
+
+ //--------------------------------------------------------------------------
+ // Options
+ //--------------------------------------------------------------------------
+
+ /**
+ * @see this.selectClass for parameters
+ */
+ selectFormat(previewMode, widgetValue, params) {
+ const values = widgetValue.split(' ');
+ const image = this._getImg();
+ image.dataset.resizeWidth = values[0];
+ if (image.dataset.shape) {
+ // If the image has a shape, modify its originalMimetype attribute.
+ image.dataset.originalMimetype = values[1];
+ } else {
+ // If the image does not have a shape, modify its mimetype
+ // attribute.
+ image.dataset.mimetype = values[1];
+ }
+ return this._applyOptions();
+ },
+ /**
+ * @see this.selectClass for parameters
+ */
+ async setQuality(previewMode, widgetValue, params) {
+ if (previewMode) {
+ return;
+ }
+ this._getImg().dataset.quality = widgetValue;
+ return this._applyOptions();
+ },
+ /**
+ * @see this.selectClass for parameters
+ */
+ glFilter(previewMode, widgetValue, params) {
+ const dataset = this._getImg().dataset;
+ if (widgetValue) {
+ dataset.glFilter = widgetValue;
+ } else {
+ delete dataset.glFilter;
+ }
+ return this._applyOptions();
+ },
+ /**
+ * @see this.selectClass for parameters
+ */
+ customFilter(previewMode, widgetValue, params) {
+ const img = this._getImg();
+ const {filterOptions} = img.dataset;
+ const {filterProperty} = params;
+ if (filterProperty === 'filterColor') {
+ widgetValue = normalizeColor(widgetValue);
+ }
+ const newOptions = Object.assign(JSON.parse(filterOptions || "{}"), {[filterProperty]: widgetValue});
+ img.dataset.filterOptions = JSON.stringify(newOptions);
+ return this._applyOptions();
+ },
+
+ //--------------------------------------------------------------------------
+ // Private
+ //--------------------------------------------------------------------------
+
+ /**
+ * @override
+ */
+ _computeVisibility() {
+ const src = this._getImg().getAttribute('src');
+ return src && src !== '/';
+ },
+ /**
+ * @override
+ */
+ async _computeWidgetState(methodName, params) {
+ const img = this._getImg();
+ const _super = this._super.bind(this);
+
+ // Make sure image is loaded because we need its naturalWidth
+ await new Promise((resolve, reject) => {
+ if (img.complete) {
+ resolve();
+ return;
+ }
+ img.addEventListener('load', resolve, {once: true});
+ img.addEventListener('error', resolve, {once: true});
+ });
+
+ switch (methodName) {
+ case 'selectFormat':
+ return img.naturalWidth + ' ' + this._getImageMimetype(img);
+ case 'setFilter':
+ return img.dataset.filter;
+ case 'glFilter':
+ return img.dataset.glFilter || "";
+ case 'setQuality':
+ return img.dataset.quality || 75;
+ case 'customFilter': {
+ const {filterProperty} = params;
+ const options = JSON.parse(img.dataset.filterOptions || "{}");
+ const defaultValue = filterProperty === 'blend' ? 'normal' : 0;
+ return options[filterProperty] || defaultValue;
+ }
+ }
+ return _super(...arguments);
+ },
+ /**
+ * @abstract
+ */
+ _relocateWeightEl() {},
+ /**
+ * @override
+ */
+ async _renderCustomXML(uiFragment) {
+ const img = this._getImg();
+ if (!this.originalSrc || !this._isImageSupportedForProcessing(img)) {
+ return;
+ }
+ const $select = $(uiFragment).find('we-select[data-name=format_select_opt]');
+ (await this._computeAvailableFormats()).forEach(([value, [label, targetFormat]]) => {
+ $select.append(`