Type Alias: DesignerOptions

type DesignerOptions = object & 
  | {
  mode: Extract<DesignerMode, "dialog">;
  ownCss?: boolean;
  ownCssVariablesUrl?: string;
}
  | {
  container: HTMLElement | null;
  mode: Extract<DesignerMode, "container">;
  ownCss?: boolean;
  ownCssVariablesUrl?: string;
};

Display options for the editor — the second argument of openDesigner(), open(), openLogoGallery() and openLogoUpload().

Type declaration

Name	Type	Description
onClose()?	(reason: EditorCloseReason, redirectUrl?: string) => void	Called when the editor closes, with the EditorCloseReason and the redirect URL of the result (if any). If reason is 'Confirmed' and redirectUrl is set, the script navigates there afterwards.

Remarks

Members:

• mode (required) — 'dialog' or 'container', see DesignerMode.
• container (required in 'container' mode) — the element to render the editor into. If it isn't an HTMLElement (for example null because the element wasn't found), the editor doesn't open and an error is logged.
• onClose(reason, redirectUrl) — called every time the editor closes, after the script has removed the editor (and the dialog) from the page. reason is an EditorCloseReason; redirectUrl is the redirect URL of the result (EditorResult.redirectUrl), if any. When reason is 'Confirmed' and redirectUrl is not empty, the script navigates to redirectUrl right after your callback returns. Not called while the editor stays open (for example with the 'None' result action).
• ownCss — true stops the editor from loading its stylesheet (trondesigner-styles.css, which includes the custom CSS from the Admin Portal); only the CSS variables and the icon styles are loaded. The editor renders inside a shadow root, so the CSS of your page doesn't apply to it: add your styles to the shadow root of the trondesigner-editor element. Default false.
• ownCssVariablesUrl — URL of a stylesheet that the editor loads instead of its CSS variables stylesheet (trondesigner-variables.css, generated from the look configured in the Admin Portal). Use it to change colors and other theme variables. If the file can't be loaded, the editor closes with the reason 'Error'.

Elements with data-td-action or data-td-options always open the editor in 'dialog' mode.

See Dialog and inline display and Styling the editor.

Example

window.tronDesigner.openDesigner(editorArguments, {
  mode: 'container',
  container: document.getElementById('designer'),
  onClose: (reason, redirectUrl) => {
    if (reason === 'Confirmed') console.log('Design finished', redirectUrl);
  },
});