diff --git a/docs/modules/Modal.md b/docs/modules/Modal.md index b72eb3680..5452a7ba8 100644 --- a/docs/modules/Modal.md +++ b/docs/modules/Modal.md @@ -24,8 +24,8 @@ const editor = grapesjs.init({ ... }); // Open modal const openModal = () => { editor.Modal.open({ - title: 'My title', - content: 'My content', + title: 'My title', // string | HTMLElement + content: 'My content', // string | HTMLElement }); }; // Create a simple custom button that will open the modal @@ -34,198 +34,70 @@ document.body.insertAdjacentHTML('afterbegin',` `); ``` +## Using API +By using other [available APIs](/api/modal_dialog.html) you have full control of the modal (eg. updating content/title, closing the modal, etc.). -## Update strings - -If you need to change some default language strings you can easily update them by using [I18n API](/api/i18n.html). -To find the correth path of the string you can check the [`en` locale file] and follow its inner path inside the locale object. - -Let's say we want to update the default message of the empty state in Style Manager when no elements are selected. - - - -From the `en` locale file you can see it by following the path below +Here are a few examples: ```js -{ - ... - styleManager: { - empty: 'Select an element before using Style Manager', - ... - }, - ... -} -``` +const { Modal } = editor; -So now to update it you'll do this +// close the modal +Modal.close(); -```js -editor.I18n.addMessages({ - en: { // indicate the locale to update - styleManager: { - empty: 'New empty state message', - } - } -}); -``` +// Check if the modal is open +Modal.isOpen(); -Even if the UI shows correctly the updated message, we highly suggest to do all the API calls wrapped in a [plugin](Plugins.html) +// Update title +Modal.setTitle('New title'); -```js -const myPlugin = editor => { - editor.I18n.addMessages({ ... }); - // ... -} +// Update content +Modal.setContent('New content'); -grapesjs.init({ - // ... - plugins: [myPlugin], -}); +// Execute one-time callback on modal close +Modal.onceClose(() => { + console.log('My last modal is closed'); +}) ``` -### Generated strings +## Customization -Not all the strings are indicated in the `en` local file as some of them can be generated from `id`s, `name`s, etc. -If you look back at the `styleManager` path from the `en` file you'll notice the empty `properties` key +The modal can be fully customized and you have different available options. +The fastest and the easiest one is to use your specific CSS for the modal element. With a few lines of CSS your modal can be completely adapted to your choices. -```js -... -styleManager: { - ... - properties: { - // float: 'Float', - }, - ... -}, -... +```css +.gjs-mdl-dialog { + background-color: white; + color: #333; +} ``` -This object is used to translate property names inside StyleManager, so if you need, for instance, to change the auto-generated names for the `margin` properties - - - -you'd this +In case you have to customize a specific modal differently, you can rely on your custom class attributes. ```js -editor.I18n.addMessages({ - en: { - styleManager: { - properties: { - // The key is the property name (or id) - 'margin-top': 'Top', - 'margin-right': 'Right', - 'margin-left': 'Left', - 'margin-bottom': 'Bottom', - }, - } - } +editor.Modal.open({ + title: 'My title', + content: 'My content', + attributes: { + class: 'my-small-modal', + }, }); ``` - - - - -## Adding new language - -If you want to support GrapesJS by adding a new language to our repository all you need to do is to follow steps below: - -1. First of all, be sure to check the language file in [`src/i18n/locale`](https://github.com/artf/grapesjs/blob/master/src/i18n/locale) doesn't exist already -1. [Open a new issue](https://github.com/artf/grapesjs/issues/new?title=XX%20Language%20support) to avoid overlap with other contributos. To be sure, check also no one else has opened already an issue for the same language -1. Start a new branch from `dev` -1. Copy (in the same folder) and rename the [`en` locale file] to the name of your language of choice (be sure to be compliant to [ISO 639-1]) -1. Now you can start translating strings -1. By following comments you'll probably notice that some keys are not indicated (eg. `styleManager.properties`), for the reference you can check other locale files -1. Once you've done, you can create a new Pull Request on GitHub from your branch to `dev` by making also a reference to your issue in order to close it automatically once it's merged (your PR message should contain `Closes #1234` where 1234 is the issue ID) - - - -## Plugin development - -::: warning -This section is dedicated **only** to plugin developers and can also be skipped in case you use [grapesjs-cli](https://github.com/artf/grapesjs-cli) to init your plugin project -::: - -If you're developing a plugin for GrapesJS and you need to support some string localization or simply change the default one, we recommend the following structure. - -``` -plugin-dir -- package.json -- README.md -- ... -- src - - index.js - - locale // create the locale foldar in your src - - en.js // All default strings should be placed here -``` - -For your plugin specific strings, place them under the plugin name key - -```js -// src/locale/en.js -export default { - 'grapesjs-plugin-name': { - yourKey: 'Your value', - } +```css +.my-small-modal .gjs-mdl-dialog { + max-width: 300px; } ``` -In your `index.js` use the `en.js` file and add `i18n` option to allow import of other local files - -```js -// src/index.js -import en from 'locale/en'; - -export default (editor, opts = {}) => { - const options = { - i18n: {}, - // ... - ...opts, - }; - - // ... - - editor.I18n.addMessages({ - en, - ...options.i18n, - }); -} -``` - -The next step would be to compile your locale files into `/locale` directory to make them easily accessible by your users. This folder could be ignored in your git repository be should be deployd to the npm registry - ::: warning -Remember that you can skip all these long steps and init your project with [grapesjs-cli](https://github.com/artf/grapesjs-cli). This will create all the necessary folders/files/commands for you (during `init` command this step is flagged `true` by default and we recommend to keep it even in case the i18n is not required in your project) +Your custom CSS has to be loaded after the GrapesJS one. ::: +### Custom Modal -At the end, your plugin users will be able to import other locale files (if they exist) in this way +For a more advanced usage -```js -import grapesjs from 'grapesjs'; - -// Import from your plugin -import yourPlugin from 'grapesjs-your-plugin'; -import ch from 'grapesjs-your-plugin/locale/ch'; -import fr from 'grapesjs-your-plugin/locale/fr'; - -const editor = grapesjs.init({ - ... - plugins: [ yourPlugin ], - pluginsOpts: { - [yourPlugin]: { - i18n: { ch, fr } - } - } -}); -``` -[ISO 639-1]: -[`en` locale file]: \ No newline at end of file +## Events diff --git a/src/modal_dialog/index.js b/src/modal_dialog/index.js index eb7fdd8cd..7d453368a 100644 --- a/src/modal_dialog/index.js +++ b/src/modal_dialog/index.js @@ -155,7 +155,12 @@ export default () => { * @param {string | HTMLElement} title Title * @return {this} * @example - * modal.setTitle('New title'); + * // pass a string + * modal.setTitle('Some title'); + * // or an HTMLElement + * const el = document.createElement('div'); + * el.innerText = 'New title'; + * modal.setTitle(el); */ setTitle(title) { model.set('title', title); @@ -164,7 +169,7 @@ export default () => { /** * Returns the title of the modal window - * @return {string} + * @return {string | HTMLElement} */ getTitle() { return model.get('title'); @@ -175,7 +180,12 @@ export default () => { * @param {string | HTMLElement} content Content * @return {this} * @example - * modal.setContent('
Some HTML content
'); + * // pass a string + * modal.setContent('Some content'); + * // or an HTMLElement + * const el = document.createElement('div'); + * el.innerText = 'New content'; + * modal.setContent(el); */ setContent(content) { model.set('content', ' '); @@ -185,7 +195,7 @@ export default () => { /** * Get the content of the modal window - * @return {string} + * @return {string | HTMLElement} */ getContent() { return model.get('content');