Javascript

Language

Use TYPO3/CMS/FrontendEditing/Utils/TranslatorLoader to customize or extend

language translation on client side. There is an configure function which can be used to merge customize configuration with the default one.

If the configuration is already present, the merge strategy can be used to force

an 'merge' or 'override'.

var configuration = {
    translationLabels: {},
    namespaceMapping: {},
}
var configuration = "none";
TranslatorLoader.configure(configuration, mergeStrategy);

Following example show how to use on server side loading:

$this->pageRenderer->loadRequireJsModule('TYPO3/CMS/FrontendEditing/Utils/TranslatorLoader', "function(TranslatorLoader) {
    TranslatorLoader.configure({
        translationLabels: ${translationLabelMap},
        namespaceMapping: ${translationLabelMapping},
    });
}");

In the frontend editing default bootstrap is no merge strategy used. So if it

was configured before, no server side translationLabels get configured. Instead it uses the default fallback implementation.

Be aware that the namespaceMapping configuration property will be changed

without deprecation warning since it is not stable.

Logger

The ulog logging framework is used to handle logs. It is a highly configurable an extendable logger.

Persist log record on Typo3 server is not implemented yet.

Loggers available:

• FEditing:Component:LoadingScreen
• FEditing:Component:Widget:Modal
• FEditing:Component:Widget:Notification
• FEditing:CRUD
• FEditing:Editor
• FEditing:FrontendEditing
• FEditing:GUI
• FEditing:localStorage
• FEditing:Utils:Scroller
• FEditing:Utils:TranslatorFactory
• FEditing:Utils:TranslatorLoader

### Log Levels: Following log levels exists: - error : Used if an exception occured and the normal handling failed. - warn: Also used if an exception occured, but the normal handling can be done. - info: Used if an state change occured like an event (eg. mouse click) - log: Used if an point of interesse is reached like the an array to loop. - debug: Used if an calculation happend. - trace (Not implemented yet): Used if an function get called and end. Only useful to record the call chains.

There are some special log levels only used to configure ulog: - none: No logs get selected - all: Normaly it is like trace. But if ulog log levels get extended it is much more save to use all.

Hint: The log level during log selection in configuration are chained. Use warn log level does indirectly also select error logs.

### Configuration

Configuration can be done as URL parameter or/and as localStorage item. There are follwing configuration options: - log: The main setting to control logger’s levels with - log_output: To configure the output of the output channel, where logging should go - log_drain: To configure the output of the drain channel

More details can be found at: https://ulog.js.org/#configure

#### Syntax:

<config_option> = <config> [; <config>] ... Configuration options can have more than one configuration entry:

<config> := [ <filter> = ] <value> Configuration entry have a value and a filter to select the loggers to apply the config: Hint: If no filter or a wildcard is set, the config is used as default config.

<filter> := <RegEx> [ , [ - ] <RegEx> ] ... The filter is a list of RegEx with option to add or substract loggers from the selection set:

Attention: - in log the <value> is a log level - in log_<channel_name> the <value> is one or more output

#### Examples With URL parameters: - to log in general info level: ?log=info Hint: Technical, this is equals to: ?log=*=info - to log widgets in debug and the rest in info mode: ?log=info;FEditing:Component:Widget:*=debug - to print and persist log in output channel: ?log_ouput=console persist - to print logs in general and persist logs from widgets in output channel: ?log_ouput=console;FEditing:Component:Widget:*=console persist - to print logs in general and only persist logs from widgets in output channel: ?log_ouput=console;FEditing:Component:Widget:*=persist

### Output: By default there are two outputs: - console: default browser console - noop: No operation function, used to prevent log in drain channel

### Channel: By default there are two channels: - output: Used if log configuration is matching. eg. log=info and logRecord.level is smaller than info - drain: Opposite to output channel. Used to have the opportunity to handle this log records to like persist in indexedDB.

### Extensions There are two extensions as AMD available to use:

• TYPO3/CMS/FrontendEditing/Utils/LoggerPersist

Add two output Persist, Server and a new channel highorder - TYPO3/CMS/FrontendEditing/Utils/LoggerWindowError Register window error handlers to log them with a logger.

#### highorder channel There are two new configuration options: - highorder_log: The main setting to control highorder channel selection. Hint: Analog to the log option and the output channel - log_highorder: To configure the output of the highorder channel, where logging should go