Crowdin Apps JS

Crowdin-apps JS er et bibliotek bygget til lettere interaktion med Crowdin. Da integrationen bruger iframes, er der visse begrænsninger for interaktionen mellem vinduer: Miljøer er indkapslet og har ikke adgang til sideindholdet, kode, stilarter og andre oplysninger relateret til siden.

Crowdin-apps JS-biblioteket er baseret på meddelelsesteknologi på tværs af vinduer og bruger postMessage() til interaktion mellem flere vinduer.

Komme i gang

For brug af dette bibliotek, så tilslut det på modulsiden ved at indsætte flg. kode i sidehovedet:

<script src="https://cdn.crowdin.com/apps/dist/iframe.js"></script>

Efter tilføjelse af ovennævnte kode vil den globale AP-variabel kunne benyttes.

Bemærk! Download og tilgængeliggør ikke iframe.js-filen direkte fra egen app-server. Filen iframe.js skal leveres fra Crowdin til oprettelse af krydsdomæne besked-bridge. Filen iframe.js er kun beregnet til brug i en iframe inde i Crowdin og fungerer ikke for enkeltstående websider.

Globale handlinger

Globale handlinger er de på alle modulsider tilgængelige handlinger.

AP.getContext(callback)

Metoden henter kontekstinformationen om den aktuelle side og indsætter den i callback’en. F.eks. projekt-ID’et, hvor modulet åbnes eller landestandarden brugt på siden.

Eks.:

  AP.getContext(function(contextData) {
    console.log("Object: context", contextData);
  });

Egenskaber:

callback

Type: function

Beskrivelse: callback'en, der håndterer svarobjektet.

Depending on the current page on which this method is used, the payload may contain a different set of the context information.

Payload example:

{
    "project_id": "12",
    "organization_id": "200000000",
    "editor": {
        "mode": "translate",
        "theme": "dark",
        "source_language_id": "en",
        "target_language_id": "fr",
        "file": 12345,
        "workflow_step": {
            "id": 7777,
            "title": "Translation",
            "type": "Translate"
        }
    }
}

Egenskaber:

`project_id`	Type: `string` Description: The identifier of the Crowdin project.
`organization_id`	Type: `string` Description: Crowdin Enterprise only. The identifier of the organization in Crowdin Enterprise.
`editor`	Type: `object` Description: Contains settings and context for the Editor.
`editor.mode`	Type: `string` Description: Active mode of the Editor.
`editor.theme`	Type: `string` Description: Active theme of the Editor.
`editor.source_language_id`	Type: `string` Description: The identifier of the source language.
`editor.target_language_id`	Type: `string` Description: The identifier of the target language.
`editor.file`	Type: `integer` Description: The numeric identifier of a file in the Crowdin project that is open in the Editor.
`editor.workflow_step`	Type: `object` Description: Crowdin Enterprise only. Details of the current workflow step in the Editor.
`editor.workflow_step.id`	Type: `integer` Description: The numeric identifier of the workflow step.
`editor.workflow_step.title`	Type: `string` Description: Title of the workflow step.
`editor.workflow_step.type`	Type: `string` Description: Type of the workflow step.

AP.getJwtToken(callback)

Metoden henter en JWT-token streng. Bruges til at hente et aktuelt token. Har det foregående token en gyldighedsperiode på mindre end et minut, genererer og returnerer metoden et nyt token.

Eks.:

  AP.getJwtToken(function(jwtToken) {
    console.log("String: JWT token", jwtToken);
  });

Egenskaber:

callback

Type: function

Beskrivelse: callback'en, der håndterer svarstrengen.

AP.getTheme()

The method retrieves information about the currently selected theme.

Eks.:

  AP.getTheme(function(theme) {
    light | dark
  });

Egenskaber:

callback

Type: function

Description: The callback that handles the response string.

Editormodulhandlinger

Editormodulhandlinger muliggør at hente information fra Editor-UI’en. Disse handlinger er kun tilgængelige på sider indlæst i en iframe i Editor-panelmodulet.

AP.editor.getString(callback)

Metoden henter information om den aktuelt valgte streng i Redigeringsværktøjet.

Eks.:

  AP.editor.getString(function(stringData) {
    console.log("Object: source string", stringData);
  });

Egenskaber:

callback

Type: function

Beskrivelse: callback'en, der håndterer svarobjektet.

AP.editor.getTranslations(callback)

Metoden henter en liste over oversættelser foreslået til den aktuelle streng i Redigeringsværktøjet. Derudover indeholder svaret information om oversættelsesforfatteren, antallet af stemmer og godkendelse af det aktuelle arbejdsgangstrin.

Eks.:

  AP.editor.getTranslations(function(translationsData) {
    console.log("Array: translation objects", translationsData);
  });

Egenskaber:

callback

Type: function

Beskrivelse: callback'en, der håndterer svarudstrækningen.

AP.editor.getTopTranslation(callback)

Metoden henter en topoversættelse (oversættelsen med højeste prioritet) til den aktuelt valgte kildestreng i Redigeringsværktøjet.

Eks.:

  AP.editor.getTopTranslation(function(topTranslationData) {
    console.log("Object: top translation", topTranslationData);
  });

Egenskaber:

callback

Type: function

Beskrivelse: callback'en, der håndterer svarobjektet.

AP.editor.setTranslation(text)

The method sets the translation text for the currently selected source string in the Editor.

Eksempel:

AP.editor.setTranslation("Hello,");

Egenskaber:

text

Type: string

Description: The translation text that is being set for the currently selected source string.

AP.editor.appendTranslation(text)

The method appends the translation text next to the cursor for the currently selected source string in the Editor.

Eksempel:

AP.editor.appendTranslation(" {user},");

Egenskaber:

text

Type: string

Description: The translation text that is being appended next to the cursor for the currently selected source string.

AP.editor.clearTranslation()

The method clears the translation text for the currently selected source string in the Editor.

Eksempel:

AP.editor.clearTranslation();

AP.editor.setFocus()

The method sets focus on the translation field in the Editor.

Eksempel:

AP.editor.setFocus();

AP.editor.noticeMessage(message)

The method displays the notice message text in the Editor.

Example:

AP.editor.noticeMessage("Message text");

Properties:

text

Type: string

Description: The notice message text that is being displayed.

AP.editor.successMessage(message)

The method displays the success message text in the Editor.

Example:

AP.editor.successMessage("Message text");

Properties:

text

Type: string

Description: The success message text that is being displayed.

AP.editor.errorMessage(message)

The method displays the error message text in the Editor.

Example:

AP.editor.errorMessage("Message text");

Properties:

text

Type: string

Description: The error message text that is being displayed.

AP.editor.setApplicationNotification(1)

The method sets a notification count next to an app icon in the right panel in the Editor.

Example:

AP.editor.setApplicationNotification(1);

Properties:

count

Type: integer

Description: The notification count number.

AP.editor.clearApplicationNotification()

The method clears a notification count next to an app icon in the right panel in the Editor.

Example:

AP.editor.clearApplicationNotification();

AP.editor.getCustomFilter(callback)

The method retrieves the current Advanced filter applied in the Editor.

Example:

AP.editor.getCustomFilter(function(customFilter) {
    console.log(customFilter);
});

Properties:

callback

Type: function

Description: The callback that handles the custom filter object.

AP.editor.setCustomFilter(customFilter)

The method sets a Advanced filter in the Editor.

Example:

AP.editor.setCustomFilter({
 //filter object
});

Properties:

customFilter

Type: object

Description: The custom filter object to be applied.

AP.editor.resetCustomFilter()

The method resets the Advanced filter to the default state.

Example:

AP.editor.resetCustomFilter();

AP.editor.getFilter(callback)

The method retrieves the current filter applied in the Editor.

Example:

AP.editor.getFilter(function(filter) {
    console.log(filter);
});

Properties:

callback

Type: function

Description: The callback that handles the filter ID.

AP.editor.setFilter(filterNumber)

The method sets a filter in the Editor.

Example:

AP.editor.setFilter(filterNumber);

Properties:

filterNumber

Type: integer

Description: The filter ID to be applied.

Filter Option IDs:

All, Untranslated First – 0
Untranslated – 2
Show All – 3
Approved – 4
Translated, Not Approved – 5
Hidden – 6
With Comments – 7
Translated by TM – 30
Translated by MT – 31
Translated by TM or MT – 10
Advanced Filter – 12
With unresolved issues (All languages) – 13
Need to be voted – 15
Without comments – 16
With unresolved issues (Current language) – 17
QA Issues (All) – 18
QA Issues (Empty translation) – 19
QA Issues (Variables mismatch) – 20
QA Issues (Tags mismatch) – 21
QA Issues (Punctuation mismatch) – 22
QA Issues (Character case mismatch) – 23
QA Issues (Spaces mismatch) – 24
QA Issues (Length issues) – 25
QA Issues (Special character mismatch) – 26
QA Issues (“Incorrect translation” issues) – 27
QA Issues (Spelling) – 28
QA Issues (ICU syntax) – 29
QA Issues (Consistent terminology) – 32
QA Issues (Without QA issues) – 33
QA Issues (Duplicate translation) – 35
QA Issues (FTL syntax) – 36
QA Issues (Android syntax) – 37

AP.editor.getPage(callback)

The method retrieves the current page number in the Editor.

Example:

AP.editor.getPage(function(page) {
    console.log(page);
});

Properties:

callback

Type: function

Description: The callback that handles the page number.

AP.editor.setPage(pageNumber)

The method sets a page number in the Editor.

Example:

AP.editor.setPage(pageNumber);

Properties:

pageNumber

Type: integer

Description: The page number to be set.

AP.editor.getProjectTargetLanguages(callback)

The method retrieves the target languages for the current project.

Example:

AP.editor.getProjectTargetLanguages(function(languages) {
    console.log(languages);
});

Properties:

callback

Type: function

Description: The callback that handles the target languages array.

AP.editor.setTargetLanguage(languageIdOrIds, callback)

The method sets the target language(s) in the Editor.

Example:

AP.editor.setTargetLanguage(languageId | languageIds, function(res) {
  console.log(res)// response message
});

Properties:

languageIdOrIds

Type: string | array

Description: The ID or array of IDs of the target languages to be set.

callback

Type: function

Description: The callback that handles the response.

AP.editor.getCroqlFilter(callback)

The method retrieves the current CroQL filter applied in the Editor.

Example:

AP.editor.getCroqlFilter(function(croql) {
  console.log(croql);
});

Properties:

callback

Type: function

Description: The callback that handles the CroQL.

AP.editor.setCroqlFilter(croql)

The method sets a CroQL filter in the Editor.

Example:

AP.editor.setCroqlFilter(croql);

Properties:

croql

Type: string

Description: The CroQL filter to be applied.

AP.editor.resetCroqlFilter()

The method resets the CroQL filter to the default state.

Example:

AP.editor.resetCroqlFilter();

AP.editor.search(text, options)

The method performs a search within the Editor.

Example:

AP.editor.search('text', {
    searchStrict: false,
    searchFullMatch: false,
    caseSensitive: false,
    search_option: 0 // 1 - Strings, 2 - Context, 3 - Translations, 4 - Identifier (Key), 0 - Everything
});

Properties:

text

Type: string

Description: The search text.

options

Type: object

Description: The search options.

AP.editor.setWorkflowStepStatusFilter(status)

The method sets a workflow step status filter in the Editor (Crowdin Enterprise only).

Example:

AP.editor.setWorkflowStepStatusFilter('ALL' | 'TODO' | 'DONE' | 'INCOMPLETE');

Properties:

status

Type: string

Description: The workflow step status to be set.

AP.editor.getWorkflowStepStatusFilter(callback)

The method retrieves the current workflow step status filter applied in the Editor.

Example:

AP.editor.getWorkflowStepStatusFilter(function(step) {
    console.log(step);
});

Properties:

callback

Type: function

Description: The callback that handles the workflow step status filter.

AP.editor.getMode(callback)

The method retrieves the current mode of the Editor.

Example:

AP.editor.getMode(function(mode) {
    console.log(mode);
});

Properties:

callback

Type: function

Description: The callback that handles the current mode.

AP.editor.setMode(mode)

The method sets a mode in the Editor.

Example:

AP.editor.setMode('translate' | 'proofread' | 'review' | 'multilingual');

Properties:

mode

Type: string

Description: The mode to be set.

Event-modulhandlinger

Event-modulhandlinger muliggør at arbejde med begivenheder, og tillader Crowdin-appen at reagere på begivenheder, som sker i Crowdin-UI’en samt at udløse sine egne begivenheder. Read more about supported events.

AP.events.once(event, callback)

Metoden tilmelder en engangs-listener til at opdage begivenheder med et angivet navn. Listener’en afmeldes, så snart den første begivenhed håndteres.

Example:

  AP.events.once("event", function(eventData) {
    console.log("Event data", eventData);
  });

Properties:

event

Type: string

Beskrivelse: Navnet på begivenheden, som funktionens callback skal reagere på.

callback

Type: function

Beskrivelse: Callback'en, der håndterer begivenheden. Afhængigt af begivenhedstype, kan der være enten ét eller et flere argumenter i callback'en.

AP.events.on(event, callback)

Metoden tilmelder en engangs-listener for alle begivenheder med et bestemt navn.

Example:

  AP.events.on("event", function(eventData) {
    console.log("Event data", eventData);
  });

Properties:

event

Type: string

Beskrivelse: Navnet på begivenheden, som funktionens callback skal reagere på.

callback

Type: function

Beskrivelse: Callback'en, der håndterer begivenheden. Afhængigt af begivenhedstype, kan der være enten ét eller et flere argumenter i callback'en.

AP.events.off(event, callback)

Metoden afmelder en listener for en begivenhed med et angivet navn.

Example:

  function callback(eventData) {
    console.log("Event data", eventData);
  };

  AP.events.on("event", callback);
  AP.events.off("event", callback);

Properties:

event

Type: string

Beskrivelse: Navnet på begivenheden, fra hvilken funktionens callback skal afmeldes.

callback

Type: function

Beskrivelse: Callback'en, der tidligere var tilmeldt for begivenheden.

AP.events.ofAll(event)

Metoden afmelder alle tidligere tilmeldte listeners for den angivne begivenhed.

Example:

  AP.events.offAll("event");

event

Type: string

Beskrivelse: Navnet på begivenheden, fra hvilken alle listeners skal afmeldes.

AP.events.onAny(callback)

Metoden tilmeldes for alle begivenheder fra Crowdin-UI’en.

Example:

  AP.events.onAny(function(event, data) {
    console.log("Event name string", event);
    console.log("Event data", data);
  });

Properties:

callback

Type: function

Beskrivelse: Callback'en, der modtager navnet på begivenheden og alle data overført hertil.

AP.events.offAny(callback)

Metoden afmelder en listener fra alle begivenheder.

Example:

  function callback(event, data) {
    console.log("Event name string", event);
    console.log("Event data", data);
  };

  AP.events.onAny(callback);
  AP.events.offAny(callback);

Properties:

callback

Type: function

Beskrivelse: Callback'en, der var tilmeldt for begivenheden.

Supported Events

Check out the list of supported events that could be passed to the Crowdin Apps JS library in the following table:

Event	Example	Description
`string.change`	`{ "id": 3939912, "text": "source string", "context": "string context", "max_length": 35, "file": { "id": 26588, "name": "file name.csv" } }`	The event emitted when a user switches from one string to another.
`textarea.edited`	`{ "id": 3939912, "text": "source string", "context": "string context", "max_length": 0, "file": { "id": 26588, "name": "file name.csv" }, "oldText": "chaîne de caractères source", "newText": "chaîne source" }`	The event emitted when a user performs any changes in the translation field.
`translation.added`	`{ "id": 422648, "string_id": 3939912, "text": "chaîne source", "target_language_id": "fr", "votes_rating": 0, "approved": false, "author": { "id": "1", "login": "user.login", "name": "User Name", "avatar_url": "https://avatar.com/avatar.png" }, "created_at": "2022-12-09T12:17:37-05:00" }`	The event emitted when a user saves a translation for the current string.
`translation.deleted`	`{ "id": 422560, "string_id": 3939912 }`	The event emitted when a user deletes a translation.
`translation.restored`	`{ "id": 422648, "string_id": 3939912, "text": "chaîne source", "target_language_id": "fr", "“votes_rating”": 0, "author": { "id": "1", "login": "user.login", "name": "User Name", "avatar_url": "https://avatar.com/avatar.png" }, "created_at": "2022-12-09T12:17:37-05:00" }`	The event emitted when a user restores a deleted translation.
`translation.vote`	`{ "id": 422648, "string_id": 3939912, "text": "chaîne source", "target_language_id": "fr", "votes_rating": 1, "approved": false, "author": { "id": "1", "login": "user.login", "name": "User Name", "avatar_url": "https://avatar.com/avatar.png" }, "created_at": "2022-12-09T12:17:37-05:00" }`	The event emitted when a user votes for a translation.
`translation.approve`	`{ "id": 422648, "string_id": 3939912, "text": "chaîne source", "target_language_id": "fr", "votes_rating": 0, "approved": true, "author": { "id": "1", "login": "user.login", "name": "User Name", "avatar_url": "https://avatar.com/avatar.png" }, "created_at": "2022-12-09T12:17:37-05:00", "approver": { "id": "1", "login": "super.user", "name": "Super User", "avatar_url": "https://avatar.com/avatar.png" }, "approved_at": "2022-12-09T17:20:28.655Z" }`	The event emitted when a user approves a translation.
`translation.disapprove`	`{ "id": 422406, "string_id": 3939858, "text": "chaîne de caractères source", "target_language_id": "fr", "votes_rating": 0, "approved": false, "author": { "id": "1", "login": "user.login", "name": "User Name", "avatar_url": "https://avatar.com/avatar.png" }, "created_at": "2022-12-08T12:29:07-05:00" }`	The event emitted when a user removes a translation approval.
`language.change`	`{ "project_id": "15", "organization_id": "200000000", "editor": { "mode": "translate", "theme": "dark;", "source_language_id": "en", "target_language_id": "fr", "file": 26588, "workflow_step": { "id": 77, "title": "Translation", "type": "Translate" } } }`	The event emitted when a user changes a target language in the Editor.
`file.change`	`{ "project_id": "15", "organization_id": "200000000", "editor": { "mode": "translate", "theme": "dark;", "source_language_id": "en", "target_language_id": "fr", "file": 26574, "workflow_step": { "id": 77, "title": "Translation", "type": "Translate" } } }`	The event emitted when a user changes a file in the Editor.
`theme.changed`	`"light"`	The event emitted when a user switches from one theme to another.

Crowdin Apps

Introduction

Essentials

UI Modules

File Processing Modules

API Modules

Themes

Publishing

Capabilities

REST API

GraphQL API

Webhooks

Dev Tools

CLI & GitHub Action

IDE Plugins

Content Delivery SDK

In-Context Localization

Other

Sikkerhed

IP Addresses and Domains

Scopes

OAuth Apps

I denne artikel

Komme i gang

Globale handlinger

AP.getContext(callback)

AP.getJwtToken(callback)

AP.getTheme()

Editormodulhandlinger

AP.editor.getString(callback)

AP.editor.getTranslations(callback)

AP.editor.getTopTranslation(callback)

AP.editor.setTranslation(text)

AP.editor.appendTranslation(text)

AP.editor.clearTranslation()

AP.editor.setFocus()

AP.editor.noticeMessage(message)

AP.editor.successMessage(message)

AP.editor.errorMessage(message)

AP.editor.setApplicationNotification(1)

AP.editor.clearApplicationNotification()

AP.editor.getCustomFilter(callback)

AP.editor.setCustomFilter(customFilter)

AP.editor.resetCustomFilter()

AP.editor.getFilter(callback)

AP.editor.setFilter(filterNumber)

AP.editor.getPage(callback)

AP.editor.setPage(pageNumber)

AP.editor.getProjectTargetLanguages(callback)

AP.editor.setTargetLanguage(languageIdOrIds, callback)

AP.editor.getCroqlFilter(callback)

AP.editor.setCroqlFilter(croql)

AP.editor.resetCroqlFilter()

AP.editor.search(text, options)

AP.editor.setWorkflowStepStatusFilter(status)

AP.editor.getWorkflowStepStatusFilter(callback)

AP.editor.getMode(callback)

AP.editor.setMode(mode)

Event-modulhandlinger

AP.events.once(event, callback)

AP.events.on(event, callback)

AP.events.off(event, callback)

AP.events.ofAll(event)

AP.events.onAny(callback)

AP.events.offAny(callback)

Supported Events

Var denne artikel nyttig?