Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FW][IMP] website: handle text options in translation mode #158419

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+243 −4
Open

[FW][IMP] website: handle text options in translation mode #158419

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
137 changes: 133 additions & 4 deletions addons/web_editor/static/src/js/editor/snippets.editor.js
View file
Open in desktop
Expand Up @@ -591,8 +591,19 @@ var SnippetEditor = Widget.extend({
// As the 'd-none' class is added to option sections that have no visible
// options with 'updateOptionsUIVisibility', if no option section is
// visible, we prevent the activation of the options.
const optionsSectionVisible = editorUIsToUpdate.some(
editor => !editor.$optionsSection[0].classList.contains('d-none')
// Special case: For now, we only allow activating text options in
// translate mode (with no parent editors). These text options have a
// special way to be displayed in the editor: We add the options in the
// toolbar `onFocus()` and set them back `onBlur()`. Which means the
// options section will be empty and get a `d-none` class, while
// actually it has visible options (they are just added in the toolbar
// DOM). We need to take them into consideration to display options in
// translate mode correctly.
const optionsSectionVisible = editorUIsToUpdate.some(editor =>
!editor.$optionsSection[0].classList.contains("d-none") ||
Object.keys(editor.styles).some(key =>
editor.styles[key].el.closest(".oe-toolbar")
)
);
if (editorUIsToUpdate.length > 0 && !optionsSectionVisible) {
return null;
Expand Down Expand Up @@ -2010,6 +2021,7 @@ class SnippetsMenu extends Component {
},
});

<<<<<<< HEAD
if (this.options.enableTranslation) {
// Load the sidebar with the style tab only.
await this._loadSnippetsTemplates();
Expand All @@ -2034,6 +2046,36 @@ class SnippetsMenu extends Component {
await this._updateInvisibleDOM();
})());

||||||| parent of 99155729d624 (temp)
if (this.options.enableTranslation) {
// Load the sidebar with the style tab only.
await this._loadSnippetsTemplates();
defs.push(this._updateInvisibleDOM());
this.$el.find('.o_we_website_top_actions').removeClass('d-none');
this.$('.o_snippet_search_filter').addClass('d-none');
this.$('#o_scroll').addClass('d-none');
this.$('button[data-action="mobilePreview"]').addClass('d-none');
this.$('#snippets_menu button').removeClass('active').prop('disabled', true);
this.$('.o_we_customize_snippet_btn').addClass('active').prop('disabled', false);
this.$('o_we_ui_loading').addClass('d-none');
$(this.customizePanel).removeClass('d-none');
this.$('#o_we_editor_toolbar_container').hide();
this.$('#o-we-editor-table-container').addClass('d-none');
return Promise.all(defs);
}

this.emptyOptionsTabContent = document.createElement('div');
this.emptyOptionsTabContent.classList.add('text-center', 'pt-5');
this.emptyOptionsTabContent.append(_t("Select a block on your page to style it."));

// Fetch snippet templates and compute it
defs.push((async () => {
await this._loadSnippetsTemplates(this.options.invalidateSnippetCache);
await this._updateInvisibleDOM();
})());

=======
>>>>>>> 99155729d624 (temp)
// Active snippet editor on click in the page
this.$document.on('click.snippets_menu', '*', this._onClick);
// Needed as bootstrap stop the propagation of click events for dropdowns
Expand Down Expand Up @@ -2098,6 +2140,33 @@ class SnippetsMenu extends Component {
// scrolling a modal)
this.$scrollingTarget[0].addEventListener('scroll', this._onScrollingElementScroll, {capture: true});

if (this.options.enableTranslation) {
// Load the sidebar with the style tab only.
await this._loadSnippetsTemplates();
defs.push(this._updateInvisibleDOM());
this.$el.find('.o_we_website_top_actions').removeClass('d-none');
this.$('.o_snippet_search_filter').addClass('d-none');
this.$('#o_scroll').addClass('d-none');
this.$('button[data-action="mobilePreview"]').addClass('d-none');
this.$('#snippets_menu button').removeClass('active').prop('disabled', true);
this.$('.o_we_customize_snippet_btn').addClass('active').prop('disabled', false);
this.$('o_we_ui_loading').addClass('d-none');
$(this.customizePanel).removeClass('d-none');
this.$('#o_we_editor_toolbar_container').hide();
this.$('#o-we-editor-table-container').addClass('d-none');
return Promise.all(defs).then(() => {});
}

this.emptyOptionsTabContent = document.createElement('div');
this.emptyOptionsTabContent.classList.add('text-center', 'pt-5');
this.emptyOptionsTabContent.append(_t("Select a block on your page to style it."));

// Fetch snippet templates and compute it
defs.push((async () => {
await this._loadSnippetsTemplates(this.options.invalidateSnippetCache);
await this._updateInvisibleDOM();
})());

// Auto-selects text elements with a specific class and remove this
// on text changes
const alreadySelectedElements = new Set();
Expand Down Expand Up @@ -2330,8 +2399,27 @@ class SnippetsMenu extends Component {
this._mutex.exec(() => this._destroyEditor(snippetEditor));
}
this._mutex.exec(() => {
<<<<<<< HEAD
if (this.state.currentTab === this.tabs.OPTIONS && !this.snippetEditors.length) {
this._activateEmptyOptionsTab();
||||||| parent of 99155729d624 (temp)
if (this._currentTab === this.tabs.OPTIONS && !this.snippetEditors.length) {
this._activateEmptyOptionsTab();
=======
if (this._currentTab === this.tabs.OPTIONS && !this.snippetEditors.length) {
const selection = this.$body[0].ownerDocument.getSelection();
const range = selection?.rangeCount && selection.getRangeAt(0);
const currentlySelectedNode = range?.commonAncestorContainer;
// In some cases (e.g. in translation mode) it's possible to have
// all snippet editors destroyed after disabling text options.
// We still want to keep the toolbar available in this case.
const isEditableTextElementSelected =
currentlySelectedNode?.nodeType === Node.TEXT_NODE &&
!!currentlySelectedNode?.parentNode?.isContentEditable;
if (!isEditableTextElementSelected) {
this._activateEmptyOptionsTab();
}
>>>>>>> 99155729d624 (temp)
}
});
}
Expand Down Expand Up @@ -2711,13 +2799,25 @@ class SnippetsMenu extends Component {
* @returns {Promise<SnippetEditor>}
* (might be async when an editor must be created)
*/
<<<<<<< HEAD
async _activateSnippet($snippet, previewMode, ifInactiveOptions) {
if (this.options.enableTranslation) {
// In translate mode, do not activate the snippet when enabling its
// corresponding invisible element. Indeed, in translate mode, we
// only want to toggle its visibility.
return;
}
||||||| parent of 99155729d624 (temp)
_activateSnippet: async function ($snippet, previewMode, ifInactiveOptions) {
if (this.options.enableTranslation) {
// In translate mode, do not activate the snippet when enabling its
// corresponding invisible element. Indeed, in translate mode, we
// only want to toggle its visibility.
return;
}
=======
_activateSnippet: async function ($snippet, previewMode, ifInactiveOptions) {
>>>>>>> 99155729d624 (temp)
if (this._blockPreviewOverlays && previewMode) {
return;
}
Expand Down Expand Up @@ -3100,9 +3200,9 @@ class SnippetsMenu extends Component {
}
return $target;
};
globalSelector.is = function ($from) {
globalSelector.is = function ($from, options = {}) {
for (var i = 0, len = selectors.length; i < len; i++) {
if (selectors[i].is($from)) {
if (options.onlyTextOptions ? $from.is(self.templateOptions[i].data.textSelector) : selectors[i].is($from)) {
return true;
}
}
Expand Down Expand Up @@ -3183,6 +3283,12 @@ class SnippetsMenu extends Component {
return snippetEditor.__isStarted;
}

// In translate mode, only allow creating the editor if the target is a
// text option snippet.
if (this.options.enableTranslation && !this._allowInTranslationMode($snippet)) {
return Promise.resolve(null);
}

var def;
if (this._allowParentsEditors($snippet)) {
var $parent = globalSelector.closest($snippet.parent());
Expand Down Expand Up @@ -3602,7 +3708,18 @@ class SnippetsMenu extends Component {
this._hideTooltips();
this._closeWidgets();

<<<<<<< HEAD
this.state.currentTab = tab || SnippetsMenu.tabs.BLOCKS;
||||||| parent of 99155729d624 (temp)
this._currentTab = tab || this.tabs.BLOCKS;
=======
// In translation mode, only the options tab is available.
if (this.options.enableTranslation) {
tab = this.tabs.OPTIONS;
}

this._currentTab = tab || this.tabs.BLOCKS;
>>>>>>> 99155729d624 (temp)

if (this._$toolbarContainer) {
this._$toolbarContainer[0].remove();
Expand Down Expand Up @@ -3774,6 +3891,7 @@ class SnippetsMenu extends Component {
*/
_allowParentsEditors($snippet) {
return !this.options.enableTranslation;
<<<<<<< HEAD
}
/**
* When the editor panel receives a notification indicating that an option
Expand Down Expand Up @@ -3809,6 +3927,17 @@ class SnippetsMenu extends Component {
this._activateSnippet(editors[0].$target);
}
}
||||||| parent of 99155729d624 (temp)
},
=======
},
/**
* @private
*/
_allowInTranslationMode($snippet) {
return globalSelector.is($snippet, { onlyTextOptions: true });
},
>>>>>>> 99155729d624 (temp)

//--------------------------------------------------------------------------
// Handlers
Expand Down
110 changes: 110 additions & 0 deletions addons/website/static/src/js/editor/snippets.editor.js
View file
Open in desktop
Expand Up @@ -236,8 +236,111 @@ export class WebsiteSnippetsMenu extends weSnippetEditor.SnippetsMenu {
const toFind = $html.find("we-fontfamilypicker[data-variable]").toArray();
const fontVariables = toFind.map((el) => el.dataset.variable);
FontFamilyPickerUserValueWidget.prototype.fontVariables = fontVariables;
<<<<<<< HEAD
return super._computeSnippetTemplates(html);
}
||||||| parent of 99155729d624 (temp)
return this._super(...arguments);
},
/**
* @override
*/
_patchForComputeSnippetTemplates($html) {
this._super(...arguments);

// TODO adapt in master: as a stable fix we corrected the behavior of
// the logo button that led to an error when switching from Text to
// Logo. Remove me in master.
const logoViewName = 'website.option_header_brand_logo';
const logoButtonEl = $html.find(`[data-customize-website-views="${logoViewName}"]`)[0];
if (logoButtonEl) {
logoButtonEl.dataset.customizeWebsiteViews = `|website.option_header_brand_name|${logoViewName}`;
logoButtonEl.dataset.resetViewArch = "true";
}
const brandSelectorEl = $html.find('[data-name="option_header_brand_none"]')[0]
?.closest("[data-selector]");
if (brandSelectorEl) {
brandSelectorEl.dataset.selector = brandSelectorEl.dataset.selector
.replace('.navbar-brand.logo', '.navbar-brand');
}

// TODO adapt in master: as a stable imp we added a preview for the
// "Effect" option of the "On Hover" animation option.
const hoverEffectSelectEl = $html.find('[data-set-img-shape-hover-effect]')[0];
delete hoverEffectSelectEl.dataset.noPreview;

// TODO remove in master: as a stable fix we exclude the form fields
// from the grid cell's Padding (Y, X) option.
const gridColumnsEl = $html.find('[data-js="GridColumns"]')[0];
if (gridColumnsEl) {
gridColumnsEl.dataset.selector = ".row:not(.s_col_no_resize) > div";
}

// Remove the input-border-width-sm and input-border-width-lg from the input-border-width
['input-border-width-sm', 'input-border-width-lg'].forEach(variable => {
const element = $html.find(
`[data-selector='theme-input'] we-input[data-customize-website-variable][data-variable='${variable}']`
)[0];
element.remove();
});
},
=======
return this._super(...arguments);
},
/**
* @override
*/
_patchForComputeSnippetTemplates($html) {
this._super(...arguments);

// TODO adapt in master: as a stable fix we corrected the behavior of
// the logo button that led to an error when switching from Text to
// Logo. Remove me in master.
const logoViewName = 'website.option_header_brand_logo';
const logoButtonEl = $html.find(`[data-customize-website-views="${logoViewName}"]`)[0];
if (logoButtonEl) {
logoButtonEl.dataset.customizeWebsiteViews = `|website.option_header_brand_name|${logoViewName}`;
logoButtonEl.dataset.resetViewArch = "true";
}
const brandSelectorEl = $html.find('[data-name="option_header_brand_none"]')[0]
?.closest("[data-selector]");
if (brandSelectorEl) {
brandSelectorEl.dataset.selector = brandSelectorEl.dataset.selector
.replace('.navbar-brand.logo', '.navbar-brand');
}

// TODO adapt in master: as a stable imp we added a preview for the
// "Effect" option of the "On Hover" animation option.
const hoverEffectSelectEl = $html.find('[data-set-img-shape-hover-effect]')[0];
delete hoverEffectSelectEl.dataset.noPreview;

// TODO remove in master: as a stable fix we exclude the form fields
// from the grid cell's Padding (Y, X) option.
const gridColumnsEl = $html.find('[data-js="GridColumns"]')[0];
if (gridColumnsEl) {
gridColumnsEl.dataset.selector = ".row:not(.s_col_no_resize) > div";
}

// Remove the input-border-width-sm and input-border-width-lg from the input-border-width
['input-border-width-sm', 'input-border-width-lg'].forEach(variable => {
const element = $html.find(
`[data-selector='theme-input'] we-input[data-customize-website-variable][data-variable='${variable}']`
)[0];
element.remove();
});

// TODO remove in master: should be simply replaced by a
// `data-text-selector` attribute to mark text options.
const AnimationOptionEl = $html.find('[data-js="WebsiteAnimate"]')[0];
const HighlightOptionEl = $html.find('[data-js="TextHighlight"]')[0];
if (AnimationOptionEl) {
AnimationOptionEl.dataset.textSelector = ".o_animated_text";
}
if (HighlightOptionEl) {
HighlightOptionEl.dataset.textSelector = HighlightOptionEl.dataset.selector;
}
},
>>>>>>> 99155729d624 (temp)
/**
* Depending of the demand, reconfigure they gmap key or configure it
* if not already defined.
Expand Down Expand Up @@ -491,7 +594,14 @@ export class WebsiteSnippetsMenu extends weSnippetEditor.SnippetsMenu {
this.options.wysiwyg.odooEditor.historyResetLatestComputedSelection();
this.options.wysiwyg.odooEditor.historyStep(true);
restoreCursor();
<<<<<<< HEAD
return false;
||||||| parent of 99155729d624 (temp)
=======
if (this.options.enableTranslation) {
$(selectedTextParent).trigger("content_changed");
}
>>>>>>> 99155729d624 (temp)
} else {
if (sel.getRangeAt(0).collapsed) {
return;
Expand Down