Modal

The module allows the creation of a new modal dialog. The module works only with the Context menu that opens it.

Modal Module Read more on the Crowdin Developer Portal.

Sample

index.js

const crowdinModule = require('@crowdin/app-project-module');
const app = crowdinModule.express();

const configuration = {
  baseUrl: 'https://123.ngrok.io',
  clientId: 'clientId',
  clientSecret: 'clientSecret',
  name: 'Sample App',
  identifier: 'sample-app',
  description: 'Sample App description',
  dbFolder: __dirname,
  imagePath: __dirname + '/' + 'logo.png',
  modal: [{
    key: 'sample-modal',
    url: '/modal'
  }],
  contextMenu: [{
    key: 'modal-context',
    location: 'source_file',
    type: 'modal',
    module: 'modal',
    moduleKey: 'sample-modal'
  }]
}

const crowdinApp = crowdinModule.addCrowdinEndpoints(app, configuration);

app.get('/modal', (req, res) => res.sendFile(__dirname + '/modal.html'))

app.listen(3000, () =>  console.log('Crowdin app started'));

You can use the React JSON Schema forms to define the UI for your modal in a declarative way:

index.js

const configuration = {
  baseUrl: 'https://123.ngrok.io',
  clientId: 'clientId',
  clientSecret: 'clientSecret',
  name: 'Sample App',
  identifier: 'sample-app',
  description: 'Sample App description',
  dbFolder: __dirname,
  imagePath: __dirname + '/' + 'logo.png',
  modal: [{
    key: 'registration-modal',
    formSchema: {
      "title": "A registration form",
      "description": "A simple form example.",
      "type": "object",
      "required": [
        "firstName",
        "lastName"
      ],
      "properties": {
        "firstName": {
          "type": "string",
          "title": "First name",
          "default": "Chuck"
        },
        "lastName": {
          "type": "string",
          "title": "Last name"
        }
      }
    },
    formUiSchema: {
      "ui:submitButtonOptions": {
        "submitText": "Confirm Details"
      },
      "lastName": {
        "ui:help": "Hint: Choose cool lastname!"
      }
    }
  }]
};

Multiple Modals

You can define multiple modal dialogs by providing an array:

index.js

const configuration = {
  // ... other configuration
  modal: [
    {
      key: 'first-modal',
      url: '/modal-1',
      name: 'First Modal'
    },
    {
      key: 'second-modal',
      formSchema: {
        // ... schema definition
      },
      name: 'Second Modal'
    }
  ],
  contextMenu: [
    {
      key: 'first-context',
      location: 'source_file',
      type: 'modal',
      module: 'modal',
      moduleKey: 'first-modal'
    },
    {
      key: 'second-context',
      location: 'translated_file',
      type: 'modal',
      module: 'modal',
      moduleKey: 'second-modal'
    }
  ]
};

Configuration

Parameter	Description
key	Unique identifier for the modal.
name	Display name for the modal (optional, defaults to app name).
url	The relative URL to the content page of the module that will be integrated into the UI.
uiPath	Folder where UI of the module is located (js, html, css files).
formSchema	JSON schema for the form that will be displayed in the modal.
formUiSchema	JSON schema for the UI of the form that will be displayed in the modal.