diff --git a/.editorconfig b/.editorconfig
deleted file mode 100644
index 8b10eb01af..0000000000
--- a/.editorconfig
+++ /dev/null
@@ -1,18 +0,0 @@
-root = true
-
-[*]
-end_of_line = lf
-insert_final_newline = true
-
-[*.js]
-charset = utf-8
-indent_style = space
-indent_size = 2
-quote_type = single
-
-[*.ts]
-charset = utf-8
-indent_style = space
-indent_size = 2
-quote_type = single
-max_line_length = 120
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
deleted file mode 100644
index 29e9e4ac40..0000000000
--- a/.eslintrc
+++ /dev/null
@@ -1,26 +0,0 @@
-{
- "env": {
- "browser": true,
- "node": true
- },
- "parserOptions": {
- "ecmaVersion": "latest",
- "sourceType": "module"
- },
- "rules": {
- "strict": 0,
- "quotes": ["warn", "single", { "avoidEscape": true }],
- "eol-last": ["warn", "always"],
- "no-mixed-requires": [0],
- "no-underscore-dangle": [0]
- },
- "overrides": [{
- "files": ["*.ts"],
- "parser": "@typescript-eslint/parser"
- }],
- "ignorePatterns": [
- "dist/*",
- "locale/*",
- "private/*"
- ]
-}
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000000..4c94328b54
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,56 @@
+module.exports = {
+ root: true, // Add this to indicate this is the root ESLint configuration
+ env: {
+ browser: true,
+ node: true,
+ 'jest/globals': true,
+ },
+ globals: {
+ $: true,
+ grapesjs: true,
+ },
+ extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+ plugins: ['@typescript-eslint', 'jest'],
+ parserOptions: {
+ ecmaVersion: 2021,
+ sourceType: 'module',
+ },
+ rules: {
+ 'no-var': 'off',
+ 'prefer-const': 'off',
+ 'no-prototype-builtins': 'off',
+ 'no-useless-escape': 'off',
+ 'prefer-rest-params': 'off',
+ 'no-empty': 'off',
+ 'prefer-spread': 'off',
+ 'no-extra-boolean-cast': 'off',
+ 'no-unsafe-optional-chaining': 'off',
+ 'no-shadow-restricted-names': 'off',
+ 'no-cond-assign': 'off',
+ 'no-fallthrough': 'off',
+ 'no-sparse-arrays': 'off',
+ 'no-redeclare': 'off',
+ 'no-control-regex': 'off',
+ 'no-constant-condition': 'off',
+ 'no-misleading-character-class': 'off',
+ 'no-undef': 'off',
+ 'no-func-assign': 'off',
+ 'no-regex-spaces': 'off',
+ '@typescript-eslint/ban-ts-comment': 'off',
+ '@typescript-eslint/no-require-imports': 'off',
+ '@typescript-eslint/no-explicit-any': 'off',
+ '@typescript-eslint/no-unused-vars': 'off',
+ '@typescript-eslint/no-unused-expressions': 'off',
+ '@typescript-eslint/no-unnecessary-type-const': 'off',
+ '@typescript-eslint/no-empty-object-type': 'off',
+ '@typescript-eslint/no-unnecessary-type-constraint': 'off',
+ '@typescript-eslint/no-this-alias': 'off',
+ '@typescript-eslint/no-unsafe-function-type': 'off',
+ '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
+ '@typescript-eslint/no-wrapper-object-types': 'off',
+ 'linebreak-style': ['error', 'unix'],
+ 'max-len': ['error', { code: 300 }],
+ 'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 1 }],
+ },
+ ignorePatterns: ['docs/api/*', 'dist/*'],
+};
diff --git a/.github/ISSUE_TEMPLATE/1.bug_report.yml b/.github/ISSUE_TEMPLATE/1.bug_report.yml
index 49900fb6ac..52e6a34819 100644
--- a/.github/ISSUE_TEMPLATE/1.bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/1.bug_report.yml
@@ -1,6 +1,6 @@
name: 🐞 Bug report
description: Create a bug report for GrapesJS.
-title: "BUG: "
+title: 'BUG: '
labels: []
body:
- type: markdown
@@ -61,4 +61,4 @@ body:
description: By submitting this issue, you agree to follow our [Code of Conduct](https://github.com/artf/grapesjs/blob/dev/CODE_OF_CONDUCT.md)
options:
- label: I agree to follow this project's Code of Conduct
- required: true
\ No newline at end of file
+ required: true
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
index 96b1be2fb9..6e7ade2775 100644
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -8,4 +8,4 @@ contact_links:
about: 'If you have a question or need help, ask a question on the discussion forums.'
- name: 📢 Show and tell
url: https://github.com/artf/grapesjs/discussions/new?category=show-and-tell
- about: "Have something nice to say or share about GrapesJS? We'd love to hear it!"
\ No newline at end of file
+ about: "Have something nice to say or share about GrapesJS? We'd love to hear it!"
diff --git a/.github/lock.yml b/.github/lock.yml
index 5860b4194a..0d8c971647 100644
--- a/.github/lock.yml
+++ b/.github/lock.yml
@@ -23,7 +23,6 @@ lockComment: >
# Assign `resolved` as the reason for locking. Set to `false` to disable
setLockReason: true
-
# Limit to only `issues` or `pulls`
# only: issues
@@ -37,4 +36,4 @@ setLockReason: true
# daysUntilLock: 30
# Repository to extend settings from
-# _extends: repo
\ No newline at end of file
+# _extends: repo
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 07b297225f..0a67bc2952 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -9,15 +9,14 @@ jobs:
if: ${{ false }}
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v3
- - uses: actions/setup-node@v3
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
with:
- node-version: '12.x'
+ node-version: '20.x'
registry-url: 'https://registry.npmjs.org'
cache: 'yarn'
- run: yarn --frozen-lockfile
- run: yarn build
- - run: npm run lint
- run: npm publish
env:
- NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
\ No newline at end of file
+ NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/build.yml b/.github/workflows/quailty.yml
similarity index 61%
rename from .github/workflows/build.yml
rename to .github/workflows/quailty.yml
index 9c94c246d1..0eaed31336 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/quailty.yml
@@ -2,27 +2,29 @@ name: Tests
on:
push:
- branches: [ dev ]
+ branches: [dev]
pull_request:
- branches: [ dev ]
+ branches: [dev]
jobs:
- build:
+ quailty:
runs-on: ubuntu-latest
strategy:
matrix:
- node-version: [14.17, 16.x]
+ node-version: [18.x, 20.x]
steps:
- - uses: actions/checkout@v3
+ - uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node-version }}
- uses: actions/setup-node@v3
+ uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: 'yarn'
- run: yarn --frozen-lockfile
- - run: yarn build
- run: npm run lint
+ - run: npm run lint:ts
+ - run: npm run format:check
+ - run: yarn build
- run: npm run ts:build:check
- - run: npm test
\ No newline at end of file
+ - run: npm test
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000000..7ef3187015
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,2 @@
+docs/api/*.md
+dist/
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000000..0f303c93a4
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,10 @@
+{
+ "endOfLine": "lf",
+ "insertPragma": false,
+ "requirePragma": false,
+ "trailingComma": "all",
+ "tabWidth": 2,
+ "useTabs": false,
+ "singleQuote": true,
+ "printWidth": 120
+}
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 7561f0b9b9..c3f999a85a 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo
Examples of behavior that contributes to creating a positive environment include:
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
-* The use of sexualized language or imagery and unwelcome sexual attention or advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 58f46b400f..4c9acdbf42 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -5,12 +5,12 @@
First of all, thank you for considering contributing to GrapesJS!
We welcome any type of contribution, not only code. Like for example:
+
- **QA**: file bug reports, the more details you can give the better (e.g. screenshots with the console open)
- **Marketing**: writing blog posts, howto's, tutorials, etc.
- **Community**: presenting the project at meetups, organizing a dedicated meetup for the local community, etc.
- **Money**: We welcome financial contributions in full transparency on our [Open Collective].
-
## Setting up the repository
This is a Node.js project and you need to have Node.js installed on your machine. You can download it from [here](https://nodejs.org/). We test versions 14 and 16 of Node in the CI, so it's recommended to use one of these versions, or the latest of: 16.20.2
@@ -45,7 +45,6 @@ Navigate to `http://localhost:8080/` to see the editor in action. The developmen
Working on your first Pull Request? You can learn how from this **free** series, [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github).
-
## Submitting code
Any code change should be submitted as a pull request. Before start working on something make always a search in opened issues and pull requests, this might help you to avoid wasting time.
@@ -54,29 +53,23 @@ A pull request could be a bug fix, new feature and much more, but in all cases,
The title should be brief but comprehensive, the description contains a link to the opened issue and the proposed solution. The pull request should contain tests whenever possible. Keep in mind that the bigger is the pull request, the longer it will take to review and merge. Try to break down large pull requests in smaller chunks that are easier to review and merge.
-
## Styleguide
The code is auto formatted with [prettier](https://github.com/prettier/prettier) on any commit, therefore you can write in any style you prefer
-
## Expenses
Anyone can file an expense (code, marketing, etc.) via our [Open Collective]. If the expense makes sense for the development of the community, it will be "merged" in the ledger of our open collective by the core contributors and the person who filed the expense will be reimbursed.
Before submitting an expense contact core contributors via the current active chat room ([Discord](https://discord.gg/QAbgGXq)) and explain your intents
-
## Questions
If you have any questions, create an [issue](https://github.com/GrapesJS/grapesjs/issues) (protip: do a quick search first to see if someone else didn't ask the same question before!).
-
-
## Credits
Thank you to all the people who have already contributed to GrapesJS!
-
-[Open Collective]:
+[Open Collective]: https://opencollective.com/grapesjs
diff --git a/README.md b/README.md
index d753626ecb..6e2d3dd2bd 100644
--- a/README.md
+++ b/README.md
@@ -5,10 +5,8 @@
[](https://cdnjs.com/libraries/grapesjs)
[](https://www.npmjs.com/package/grapesjs)
-
-
GrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a [CMS] to speed up the creation of dynamic templates. To better understand this concept check the image below
@@ -21,86 +19,70 @@ This demos show examples of what is possible to achieve:
Webpage Demo - http://grapesjs.com/demo.html
Newsletter Demo - http://grapesjs.com/demo-newsletter-editor.html
-
-
-
-
## Table of contents
-* [Features](#features)
-* [Download](#download)
-* [Usage](#usage)
-* [Development](#development)
-* [Documentation](#documentation)
-* [API](#api)
-* [Testing](#testing)
-* [Plugins](#plugins)
-* [Support](#support)
-* [Changelog](https://github.com/GrapesJS/grapesjs/releases)
-* [Contributing](https://github.com/GrapesJS/grapesjs/blob/master/CONTRIBUTING.md)
-* [License](#license)
-
-
-
+- [Features](#features)
+- [Download](#download)
+- [Usage](#usage)
+- [Development](#development)
+- [Documentation](#documentation)
+- [API](#api)
+- [Testing](#testing)
+- [Plugins](#plugins)
+- [Support](#support)
+- [Changelog](https://github.com/GrapesJS/grapesjs/releases)
+- [Contributing](https://github.com/GrapesJS/grapesjs/blob/master/CONTRIBUTING.md)
+- [License](#license)
## Features
-| Blocks | Style Manager | Layer Manager |
-|--|--|--|
-||||
-
-| Code Viewer | Asset Manager |
-|--|--|
-|||
-
-* Local and remote storage
-
-* Default built-in commands (basically for creating and managing different components)
-
+| Blocks | Style Manager | Layer Manager |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| | | |
+| Code Viewer | Asset Manager |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| | |
+- Local and remote storage
+- Default built-in commands (basically for creating and managing different components)
## Download
-* CDNs
- * UNPKG (resolves to the latest version)
- * `https://unpkg.com/grapesjs`
- * `https://unpkg.com/grapesjs/dist/css/grapes.min.css`
- * CDNJS (replace `X.X.X` with the current version)
- * `https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/grapes.min.js`
- * `https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/css/grapes.min.css`
-* NPM
- * `npm i grapesjs`
-* GIT
- * `git clone https://github.com/GrapesJS/grapesjs.git`
+- CDNs
+ - UNPKG (resolves to the latest version)
+ - `https://unpkg.com/grapesjs`
+ - `https://unpkg.com/grapesjs/dist/css/grapes.min.css`
+ - CDNJS (replace `X.X.X` with the current version)
+ - `https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/grapes.min.js`
+ - `https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/css/grapes.min.css`
+- NPM
+ - `npm i grapesjs`
+- GIT
+ - `git clone https://github.com/GrapesJS/grapesjs.git`
For the development purpose you should follow instructions below.
-
-
-
-
## Usage
```html
-
+
```
For a more practical example I'd suggest looking up the code inside this demo: http://grapesjs.com/demo.html
-
## Development
Clone the repository and install all the necessary dependencies (`yarn` is highly recommended)
@@ -119,86 +101,65 @@ $ yarn start
Once the development server is started you should be able to reach the demo page (eg. `http://localhost:8080`)
-
-
-
-
## Documentation
Check the getting started guide here: [Documentation]
-
-
-
-
## API
API References could be found here: [API-Reference]
-
-
-
-
## Testing
```sh
$ yarn test
```
-
-
-
-
## Plugins
[Official Plugins](https://github.com/orgs/GrapesJS/repositories?q=-repo%3Agrapesjs%2Fgrapesjs&type=source) | [Community Plugins](https://github.com/topics/grapesjs-plugin)
### Wrappers
-* [@grapesjs/react](https://github.com/GrapesJS/react) - GrapesJS wrapper for React that allows you to build custom and declarative UI for your editor.
-
-
+- [@grapesjs/react](https://github.com/GrapesJS/react) - GrapesJS wrapper for React that allows you to build custom and declarative UI for your editor.
### Extensions
-* [grapesjs-plugin-export](https://github.com/GrapesJS/export) - Export GrapesJS templates in a zip archive
-* [grapesjs-plugin-filestack](https://github.com/GrapesJS/filestack) - Add Filestack uploader in Asset Manager
-* [grapesjs-plugin-ckeditor](https://github.com/GrapesJS/ckeditor) - Replaces the built-in RTE with CKEditor
-* [grapesjs-tui-image-editor](https://github.com/GrapesJS/tui-image-editor) - GrapesJS TOAST UI Image Editor
-* [grapesjs-blocks-basic](https://github.com/GrapesJS/blocks-basic) - Basic set of blocks
-* [grapesjs-plugin-forms](https://github.com/GrapesJS/components-forms) - Set of form components and blocks
-* [grapesjs-navbar](https://github.com/GrapesJS/components-navbar) - Simple navbar component
-* [grapesjs-component-countdown](https://github.com/GrapesJS/components-countdown) - Simple countdown component
-* [grapesjs-style-gradient](https://github.com/GrapesJS/style-gradient) - Add `gradient` type input to the Style Manager
-* [grapesjs-style-filter](https://github.com/GrapesJS/style-filter) - Add `filter` type input to the Style Manager
-* [grapesjs-style-bg](https://github.com/GrapesJS/style-bg) - Full-stack background style property type, with the possibility to add images, colors, and gradients
-* [grapesjs-blocks-flexbox](https://github.com/GrapesJS/blocks-flexbox) - Add the flexbox block
-* [grapesjs-lory-slider](https://github.com/GrapesJS/components-lory) - Slider component by using [lory](https://github.com/meandmax/lory)
-* [grapesjs-tabs](https://github.com/GrapesJS/components-tabs) - Simple tabs component
-* [grapesjs-tooltip](https://github.com/GrapesJS/components-tooltip) - Simple, CSS only, tooltip component for GrapesJS
-* [grapesjs-custom-code](https://github.com/GrapesJS/components-custom-code) - Embed custom code
-* [grapesjs-touch](https://github.com/GrapesJS/touch) - Enable touch support
-* [grapesjs-indexeddb](https://github.com/GrapesJS/storage-indexeddb) - Storage wrapper for IndexedDB
-* [grapesjs-firestore](https://github.com/GrapesJS/storage-firestore) - Storage wrapper for [Cloud Firestore](https://firebase.google.com/docs/firestore)
-* [grapesjs-parser-postcss](https://github.com/GrapesJS/parser-postcss) - Custom CSS parser for GrapesJS by using [PostCSS](https://github.com/postcss/postcss)
-* [grapesjs-typed](https://github.com/GrapesJS/components-typed) - Typed component made by wrapping Typed.js library
-* [grapesjs-ui-suggest-classes](https://github.com/silexlabs/grapesjs-ui-suggest-classes) - Enable auto-complete of classes in the SelectorManager UI
-* [grapesjs-fonts](https://github.com/silexlabs/grapesjs-fonts) - Custom Fonts plugin, adds a UI to manage fonts in websites
-* [grapesjs-symbols](https://github.com/silexlabs/grapesjs-symbols) - Symbols plugin to reuse elements in a website and accross pages
-* [grapesjs-click](https://github.com/bgrand-ch/grapesjs-click) - Grab and drop blocks and components with click (no more drag-and-drop)
-* [grapesjs-float](https://github.com/bgrand-ch/grapesjs-float) - Anchor a floating element next to another element (selected component, ...)
+
+- [grapesjs-plugin-export](https://github.com/GrapesJS/export) - Export GrapesJS templates in a zip archive
+- [grapesjs-plugin-filestack](https://github.com/GrapesJS/filestack) - Add Filestack uploader in Asset Manager
+- [grapesjs-plugin-ckeditor](https://github.com/GrapesJS/ckeditor) - Replaces the built-in RTE with CKEditor
+- [grapesjs-tui-image-editor](https://github.com/GrapesJS/tui-image-editor) - GrapesJS TOAST UI Image Editor
+- [grapesjs-blocks-basic](https://github.com/GrapesJS/blocks-basic) - Basic set of blocks
+- [grapesjs-plugin-forms](https://github.com/GrapesJS/components-forms) - Set of form components and blocks
+- [grapesjs-navbar](https://github.com/GrapesJS/components-navbar) - Simple navbar component
+- [grapesjs-component-countdown](https://github.com/GrapesJS/components-countdown) - Simple countdown component
+- [grapesjs-style-gradient](https://github.com/GrapesJS/style-gradient) - Add `gradient` type input to the Style Manager
+- [grapesjs-style-filter](https://github.com/GrapesJS/style-filter) - Add `filter` type input to the Style Manager
+- [grapesjs-style-bg](https://github.com/GrapesJS/style-bg) - Full-stack background style property type, with the possibility to add images, colors, and gradients
+- [grapesjs-blocks-flexbox](https://github.com/GrapesJS/blocks-flexbox) - Add the flexbox block
+- [grapesjs-lory-slider](https://github.com/GrapesJS/components-lory) - Slider component by using [lory](https://github.com/meandmax/lory)
+- [grapesjs-tabs](https://github.com/GrapesJS/components-tabs) - Simple tabs component
+- [grapesjs-tooltip](https://github.com/GrapesJS/components-tooltip) - Simple, CSS only, tooltip component for GrapesJS
+- [grapesjs-custom-code](https://github.com/GrapesJS/components-custom-code) - Embed custom code
+- [grapesjs-touch](https://github.com/GrapesJS/touch) - Enable touch support
+- [grapesjs-indexeddb](https://github.com/GrapesJS/storage-indexeddb) - Storage wrapper for IndexedDB
+- [grapesjs-firestore](https://github.com/GrapesJS/storage-firestore) - Storage wrapper for [Cloud Firestore](https://firebase.google.com/docs/firestore)
+- [grapesjs-parser-postcss](https://github.com/GrapesJS/parser-postcss) - Custom CSS parser for GrapesJS by using [PostCSS](https://github.com/postcss/postcss)
+- [grapesjs-typed](https://github.com/GrapesJS/components-typed) - Typed component made by wrapping Typed.js library
+- [grapesjs-ui-suggest-classes](https://github.com/silexlabs/grapesjs-ui-suggest-classes) - Enable auto-complete of classes in the SelectorManager UI
+- [grapesjs-fonts](https://github.com/silexlabs/grapesjs-fonts) - Custom Fonts plugin, adds a UI to manage fonts in websites
+- [grapesjs-symbols](https://github.com/silexlabs/grapesjs-symbols) - Symbols plugin to reuse elements in a website and accross pages
+- [grapesjs-click](https://github.com/bgrand-ch/grapesjs-click) - Grab and drop blocks and components with click (no more drag-and-drop)
+- [grapesjs-float](https://github.com/bgrand-ch/grapesjs-float) - Anchor a floating element next to another element (selected component, ...)
### Presets
-* [grapesjs-preset-webpage](https://github.com/GrapesJS/preset-webpage) - Webpage Builder
-* [grapesjs-preset-newsletter](https://github.com/GrapesJS/preset-newsletter) - Newsletter Builder
-* [grapesjs-mjml](https://github.com/GrapesJS/mjml) - Newsletter Builder with MJML components
+- [grapesjs-preset-webpage](https://github.com/GrapesJS/preset-webpage) - Webpage Builder
+- [grapesjs-preset-newsletter](https://github.com/GrapesJS/preset-newsletter) - Newsletter Builder
+- [grapesjs-mjml](https://github.com/GrapesJS/mjml) - Newsletter Builder with MJML components
Find out more about plugins here: [Creating plugins](https://grapesjs.com/docs/modules/Plugins.html)
-
-
-
-
## Support
If you like the project and you wish to see it grow, please consider supporting us with a donation of your choice or become a backer/sponsor via [Open Collective](https://opencollective.com/grapesjs)
@@ -214,12 +175,10 @@ If you like the project and you wish to see it grow, please consider supporting
[](https://www.browserstack.com)
Thanks to [BrowserStack](https://www.browserstack.com) for providing us browser testing services
-
## License
BSD 3-clause
-
-[Documentation]:
-[API-Reference]:
-[CMS]:
+[Documentation]: https://grapesjs.com/docs/
+[API-Reference]: https://grapesjs.com/docs/api/
+[CMS]: https://en.wikipedia.org/wiki/Content_management_system
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000000..3940eb54c5
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,8 @@
+/** @type {import('@babel/core')} */
+module.exports = {
+ env: {
+ test: {
+ presets: ['@babel/preset-env', '@babel/preset-typescript'],
+ },
+ },
+};
diff --git a/docs/.vuepress/components/Demo.vue b/docs/.vuepress/components/Demo.vue
index cf3a36a95d..d94dbf2589 100644
--- a/docs/.vuepress/components/Demo.vue
+++ b/docs/.vuepress/components/Demo.vue
@@ -1,14 +1,14 @@
',
+ ].join('');
+ })();
+ function c(e, n, i, r) {
+ for (var o = [], a = 0; a < e.length; a++) {
+ var l = e[a];
+ if (l) {
+ var c = S(l),
+ u = c.toHsl().l < 0.5 ? 'sp-thumb-el sp-thumb-dark' : 'sp-thumb-el sp-thumb-light';
+ u += S.equals(n, l) ? ' sp-thumb-active' : '';
+ var h = c.toString(r.preferredFormat || 'rgb'),
+ d = s ? 'background-color:' + c.toRgbString() : 'filter:' + c.toFilter();
+ o.push(
+ '',
+ );
+ } else {
+ o.push(
+ t('')
+ .append(
+ t(
+ '',
+ ).attr('title', r.noColorSelectedText),
+ )
+ .html(),
+ );
+ }
+ }
+ return "
" + o.join('') + '
';
+ }
+ function u(i, u) {
+ var h = (function (e, i) {
+ var r = t.extend({}, n, e);
+ return (
+ (r.callbacks = {
+ move: f(r.move, i),
+ change: f(r.change, i),
+ show: f(r.show, i),
+ hide: f(r.hide, i),
+ beforeShow: f(r.beforeShow, i),
+ }),
+ r
+ );
+ })(u, i),
+ v = h.flat,
+ m = h.showSelectionPalette,
+ y = h.localStorageKey,
+ b = h.theme,
+ x = h.callbacks,
+ w = (function (t, e, n) {
+ var i;
+ return function () {
+ var r = this,
+ o = arguments;
+ n && clearTimeout(i),
+ (!n && i) ||
+ (i = setTimeout(function () {
+ (i = null), t.apply(r, o);
+ }, e));
+ };
+ })(Ht, 10),
+ C = !1,
+ k = !1,
+ T = 0,
+ E = 0,
+ M = 0,
+ A = 0,
+ O = 0,
+ P = 0,
+ _ = 0,
+ L = 0,
+ N = 0,
+ D = 0,
+ I = 1,
+ F = [],
+ R = [],
+ j = {},
+ z = h.selectionPalette.slice(0),
+ H = h.maxSelectionSize,
+ V = 'sp-dragging',
+ $ = null,
+ B = i.ownerDocument,
+ W = (B.body, t(i)),
+ U = !1,
+ q = t(l, B).addClass(b),
+ K = q.find('.sp-picker-container'),
+ G = q.find('.sp-color'),
+ Y = q.find('.sp-dragger'),
+ X = q.find('.sp-hue'),
+ J = q.find('.sp-slider'),
+ Z = q.find('.sp-alpha-inner'),
+ Q = q.find('.sp-alpha'),
+ tt = q.find('.sp-alpha-handle'),
+ et = q.find('.sp-input'),
+ nt = q.find('.sp-palette'),
+ it = q.find('.sp-initial'),
+ rt = q.find('.sp-cancel'),
+ ot = q.find('.sp-clear'),
+ st = q.find('.sp-choose'),
+ at = q.find('.sp-palette-toggle'),
+ lt = W.is('input'),
+ ct = lt && 'color' === W.attr('type') && g(),
+ ut = lt && !v,
+ ht = ut ? t(a).addClass(b).addClass(h.className).addClass(h.replacerClassName) : t([]),
+ dt = ut ? ht : W,
+ ft = ht.find('.sp-preview-inner'),
+ pt = h.color || (lt && W.val()),
+ gt = !1,
+ vt = h.preferredFormat,
+ mt = !h.showButtons || h.clickoutFiresChange,
+ yt = !pt,
+ bt = h.allowEmpty && !ct;
+ function xt() {
+ if (
+ (h.showPaletteOnly && (h.showPalette = !0),
+ at.text(h.showPaletteOnly ? h.togglePaletteMoreText : h.togglePaletteLessText),
+ h.palette)
+ ) {
+ (F = h.palette.slice(0)), (R = t.isArray(F[0]) ? F : [F]), (j = {});
+ for (var e = 0; e < R.length; e++)
+ for (var n = 0; n < R[e].length; n++) {
+ var i = S(R[e][n]).toRgbString();
+ j[i] = !0;
+ }
+ }
+ q.toggleClass('sp-flat', v),
+ q.toggleClass('sp-input-disabled', !h.showInput),
+ q.toggleClass('sp-alpha-enabled', h.showAlpha),
+ q.toggleClass('sp-clear-enabled', bt),
+ q.toggleClass('sp-buttons-disabled', !h.showButtons),
+ q.toggleClass('sp-palette-buttons-disabled', !h.togglePaletteOnly),
+ q.toggleClass('sp-palette-disabled', !h.showPalette),
+ q.toggleClass('sp-palette-only', h.showPaletteOnly),
+ q.toggleClass('sp-initial-disabled', !h.showInitial),
+ q.addClass(h.className).addClass(h.containerClassName),
+ Ht();
+ }
+ function wt() {
+ if (y && window.localStorage) {
+ try {
+ var e = window.localStorage[y].split(',#');
+ e.length > 1 &&
+ (delete window.localStorage[y],
+ t.each(e, function (t, e) {
+ Ct(e);
+ }));
+ } catch (t) {}
+ try {
+ z = window.localStorage[y].split(';');
+ } catch (t) {}
+ }
+ }
+ function Ct(e) {
+ if (m) {
+ var n = S(e).toRgbString();
+ if (!j[n] && -1 === t.inArray(n, z)) for (z.push(n); z.length > H; ) z.shift();
+ if (y && window.localStorage)
+ try {
+ window.localStorage[y] = z.join(';');
+ } catch (t) {}
+ }
+ }
+ function kt() {
+ var e = It(),
+ n = t.map(R, function (t, n) {
+ return c(t, e, 'sp-palette-row sp-palette-row-' + n, h);
+ });
+ wt(),
+ z &&
+ n.push(
+ c(
+ (function () {
+ var t = [];
+ if (h.showPalette)
+ for (var e = 0; e < z.length; e++) {
+ var n = S(z[e]).toRgbString();
+ j[n] || t.push(z[e]);
+ }
+ return t.reverse().slice(0, h.maxSelectionSize);
+ })(),
+ e,
+ 'sp-palette-row sp-palette-row-selection',
+ h,
+ ),
+ ),
+ nt.html(n.join(''));
+ }
+ function St() {
+ if (h.showInitial) {
+ var t = gt,
+ e = It();
+ it.html(c([t, e], e, 'sp-palette-row-initial', h));
+ }
+ }
+ function Tt() {
+ (E <= 0 || T <= 0 || A <= 0) && Ht(),
+ (k = !0),
+ q.addClass(V),
+ ($ = null),
+ W.trigger('dragstart.spectrum', [It()]);
+ }
+ function Et() {
+ (k = !1), q.removeClass(V), W.trigger('dragstop.spectrum', [It()]);
+ }
+ function Mt() {
+ var t = et.val();
+ if ((null !== t && '' !== t) || !bt) {
+ var e = S(t);
+ e.isValid() ? (Dt(e), zt(!0)) : et.addClass('sp-validation-error');
+ } else Dt(null), zt(!0);
+ }
+ function At() {
+ C ? Lt() : Ot();
+ }
+ function Ot() {
+ var e = t.Event('beforeShow.spectrum');
+ if (C) Ht();
+ else if ((W.trigger(e, [It()]), !1 !== x.beforeShow(It()) && !e.isDefaultPrevented())) {
+ !(function () {
+ for (var t = 0; t < r.length; t++) r[t] && r[t].hide();
+ })(),
+ (C = !0);
+ var n = t(B);
+ n.bind('keydown.spectrum', Pt),
+ n.bind('click.spectrum', _t),
+ t(window).bind('resize.spectrum', w),
+ ht.addClass('sp-active'),
+ q.removeClass('sp-hidden'),
+ Ht(),
+ Rt(),
+ (gt = It()),
+ St(),
+ x.show(gt),
+ W.trigger('show.spectrum', [gt]);
+ }
+ }
+ function Pt(t) {
+ 27 === t.keyCode && Lt();
+ }
+ function _t(t) {
+ 2 != t.button && (k || (mt ? zt(!0) : Nt(), Lt()));
+ }
+ function Lt() {
+ C &&
+ !v &&
+ ((C = !1),
+ t(B).unbind('keydown.spectrum', Pt),
+ t(B).unbind('click.spectrum', _t),
+ t(window).unbind('resize.spectrum', w),
+ ht.removeClass('sp-active'),
+ q.addClass('sp-hidden'),
+ x.hide(It()),
+ W.trigger('hide.spectrum', [It()]));
+ }
+ function Nt() {
+ Dt(gt, !0);
+ }
+ function Dt(t, e) {
+ var n, i;
+ S.equals(t, It())
+ ? Rt()
+ : (!t && bt
+ ? (yt = !0)
+ : ((yt = !1), (i = (n = S(t)).toHsv()), (L = (i.h % 360) / 360), (N = i.s), (D = i.v), (I = i.a)),
+ Rt(),
+ n && n.isValid() && !e && (vt = h.preferredFormat || n.getFormat()));
+ }
+ function It(t) {
+ return (
+ (t = t || {}),
+ bt && yt
+ ? null
+ : S.fromRatio({ h: L, s: N, v: D, a: Math.round(100 * I) / 100 }, { format: t.format || vt })
+ );
+ }
+ function Ft() {
+ Rt(), x.move(It()), W.trigger('move.spectrum', [It()]);
+ }
+ function Rt() {
+ et.removeClass('sp-validation-error'), jt();
+ var t = S.fromRatio({ h: L, s: 1, v: 1 });
+ G.css('background-color', t.toHexString());
+ var e = vt;
+ I < 1 &&
+ (0 !== I || 'name' !== e) &&
+ (('hex' !== e && 'hex3' !== e && 'hex6' !== e && 'name' !== e) || (e = 'rgb'));
+ var n = It({ format: e }),
+ i = '';
+ if ((ft.removeClass('sp-clear-display'), ft.css('background-color', 'transparent'), !n && bt))
+ ft.addClass('sp-clear-display');
+ else {
+ var r = n.toHexString(),
+ a = n.toRgbString();
+ if (
+ (s || 1 === n.alpha
+ ? ft.css('background-color', a)
+ : (ft.css('background-color', 'transparent'), ft.css('filter', n.toFilter())),
+ h.showAlpha)
+ ) {
+ var l = n.toRgb();
+ l.a = 0;
+ var c = S(l).toRgbString(),
+ u = 'linear-gradient(left, ' + c + ', ' + r + ')';
+ o
+ ? Z.css('filter', S(c).toFilter({ gradientType: 1 }, r))
+ : (Z.css('background', '-webkit-' + u),
+ Z.css('background', '-moz-' + u),
+ Z.css('background', '-ms-' + u),
+ Z.css('background', 'linear-gradient(to right, ' + c + ', ' + r + ')'));
+ }
+ i = n.toString(e);
+ }
+ h.showInput && et.val(i), h.showPalette && kt(), St();
+ }
+ function jt() {
+ var t = N,
+ e = D;
+ if (bt && yt) tt.hide(), J.hide(), Y.hide();
+ else {
+ tt.show(), J.show(), Y.show();
+ var n = t * T,
+ i = E - e * E;
+ (n = Math.max(-M, Math.min(T - M, n - M))),
+ (i = Math.max(-M, Math.min(E - M, i - M))),
+ Y.css({ top: i + 'px', left: n + 'px' });
+ var r = I * O;
+ tt.css({ left: r - P / 2 + 'px' });
+ var o = L * A;
+ J.css({ top: o - _ + 'px' });
+ }
+ }
+ function zt(t) {
+ var e = It(),
+ n = '',
+ i = !S.equals(e, gt);
+ e && ((n = e.toString(vt)), Ct(e)), lt && W.val(n), t && i && (x.change(e), W.trigger('change', [e]));
+ }
+ function Ht() {
+ C &&
+ ((T = G.width()),
+ (E = G.height()),
+ (M = Y.height()),
+ X.width(),
+ (A = X.height()),
+ (_ = J.height()),
+ (O = Q.width()),
+ (P = tt.width()),
+ v ||
+ (q.css('position', 'absolute'),
+ h.offset
+ ? q.offset(h.offset)
+ : q.offset(
+ (function (e, n) {
+ var i = e.outerWidth(),
+ r = e.outerHeight(),
+ o = n.outerHeight(),
+ s = e[0].ownerDocument,
+ a = s.documentElement,
+ l = a.clientWidth,
+ c = a.clientHeight,
+ u = t(s).scrollLeft(),
+ h = t(s).scrollTop(),
+ d = l + u,
+ f = c + h,
+ p = n.offset();
+ return (
+ (p.top += o),
+ (p.left -= Math.min(p.left, p.left + i > d && d > i ? Math.abs(p.left + i - d) : 0)),
+ (p.top -= Math.min(p.top, p.top + r > f && f > r ? Math.abs(r + o - 0) : 0)),
+ p
+ );
+ })(q, dt),
+ )),
+ jt(),
+ h.showPalette && kt(),
+ W.trigger('reflow.spectrum'));
+ }
+ function Vt() {
+ Lt(), (U = !0), W.attr('disabled', !0), dt.addClass('sp-disabled');
+ }
+ !(function () {
+ if (
+ (o && q.find('*:not(input)').attr('unselectable', 'on'),
+ xt(),
+ ut && W.after(ht).hide(),
+ bt || ot.hide(),
+ v)
+ )
+ W.after(q).hide();
+ else {
+ var e = 'parent' === h.appendTo ? W.parent() : t(h.appendTo);
+ 1 !== e.length && (e = t('body')), e.append(q);
+ }
+ function n(e) {
+ return (
+ e.data && e.data.ignore
+ ? (Dt(t(e.target).closest('.sp-thumb-el').data('color')), Ft())
+ : (Dt(t(e.target).closest('.sp-thumb-el').data('color')),
+ Ft(),
+ zt(!0),
+ h.hideAfterPaletteSelect && Lt()),
+ !1
+ );
+ }
+ wt(),
+ dt.bind('click.spectrum touchstart.spectrum', function (e) {
+ U || At(), e.stopPropagation(), t(e.target).is('input') || e.preventDefault();
+ }),
+ (W.is(':disabled') || !0 === h.disabled) && Vt(),
+ q.click(d),
+ et.change(Mt),
+ et.bind('paste', function () {
+ setTimeout(Mt, 1);
+ }),
+ et.keydown(function (t) {
+ 13 == t.keyCode && Mt();
+ }),
+ rt.text(h.cancelText),
+ rt.bind('click.spectrum', function (t) {
+ t.stopPropagation(), t.preventDefault(), Nt(), Lt();
+ }),
+ ot.attr('title', h.clearText),
+ ot.bind('click.spectrum', function (t) {
+ t.stopPropagation(), t.preventDefault(), (yt = !0), Ft(), v && zt(!0);
+ }),
+ st.text(h.chooseText),
+ st.bind('click.spectrum', function (t) {
+ t.stopPropagation(),
+ t.preventDefault(),
+ o && et.is(':focus') && et.trigger('change'),
+ et.hasClass('sp-validation-error') || (zt(!0), Lt());
+ }),
+ at.text(h.showPaletteOnly ? h.togglePaletteMoreText : h.togglePaletteLessText),
+ at.bind('click.spectrum', function (t) {
+ t.stopPropagation(),
+ t.preventDefault(),
+ (h.showPaletteOnly = !h.showPaletteOnly),
+ h.showPaletteOnly || v || q.css('left', '-=' + (K.outerWidth(!0) + 5)),
+ xt();
+ }),
+ p(
+ Q,
+ function (t, e, n) {
+ (I = t / O), (yt = !1), n.shiftKey && (I = Math.round(10 * I) / 10), Ft();
+ },
+ Tt,
+ Et,
+ ),
+ p(
+ X,
+ function (t, e) {
+ (L = parseFloat(e / A)), (yt = !1), h.showAlpha || (I = 1), Ft();
+ },
+ Tt,
+ Et,
+ ),
+ p(
+ G,
+ function (t, e, n) {
+ if (n.shiftKey) {
+ if (!$) {
+ var i = N * T,
+ r = E - D * E,
+ o = Math.abs(t - i) > Math.abs(e - r);
+ $ = o ? 'x' : 'y';
+ }
+ } else $ = null;
+ var s = !$ || 'y' === $;
+ (!$ || 'x' === $) && (N = parseFloat(t / T)),
+ s && (D = parseFloat((E - e) / E)),
+ (yt = !1),
+ h.showAlpha || (I = 1),
+ Ft();
+ },
+ Tt,
+ Et,
+ ),
+ pt ? (Dt(pt), Rt(), (vt = h.preferredFormat || S(pt).format), Ct(pt)) : Rt(),
+ v && Ot();
+ var i = o ? 'mousedown.spectrum' : 'click.spectrum touchstart.spectrum';
+ nt.delegate('.sp-thumb-el', i, n), it.delegate('.sp-thumb-el:nth-child(1)', i, { ignore: !0 }, n);
+ })();
+ var $t = {
+ show: Ot,
+ hide: Lt,
+ toggle: At,
+ reflow: Ht,
+ option: function (n, i) {
+ return n === e
+ ? t.extend({}, h)
+ : i === e
+ ? h[n]
+ : ((h[n] = i), 'preferredFormat' === n && (vt = h.preferredFormat), void xt());
+ },
+ enable: function () {
+ (U = !1), W.attr('disabled', !1), dt.removeClass('sp-disabled');
+ },
+ disable: Vt,
+ offset: function (t) {
+ (h.offset = t), Ht();
+ },
+ set: function (t) {
+ Dt(t), zt();
+ },
+ get: It,
+ destroy: function () {
+ W.show(), dt.unbind('click.spectrum touchstart.spectrum'), q.remove(), ht.remove(), (r[$t.id] = null);
+ },
+ container: q,
+ };
+ return ($t.id = r.push($t) - 1), $t;
+ }
+ function h() {}
+ function d(t) {
+ t.stopPropagation();
+ }
+ function f(t, e) {
+ var n = Array.prototype.slice,
+ i = n.call(arguments, 2);
+ return function () {
+ return t.apply(e, i.concat(n.call(arguments)));
+ };
+ }
+ function p(e, n, i, r) {
+ (n = n || function () {}), (i = i || function () {}), (r = r || function () {});
+ var s = document,
+ a = !1,
+ l = {},
+ c = 0,
+ u = 0,
+ h = 'ontouchstart' in window,
+ d = {};
+ function f(t) {
+ t.stopPropagation && t.stopPropagation(), t.preventDefault && t.preventDefault(), (t.returnValue = !1);
+ }
+ function p(t) {
+ if (a) {
+ if (o && s.documentMode < 9 && !t.button) return g();
+ var i = t.originalEvent && t.originalEvent.touches && t.originalEvent.touches[0],
+ r = (i && i.pageX) || t.pageX,
+ d = (i && i.pageY) || t.pageY,
+ p = Math.max(0, Math.min(r - l.left, u)),
+ v = Math.max(0, Math.min(d - l.top, c));
+ h && f(t), n.apply(e, [p, v, t]);
+ }
+ }
+ function g() {
+ a &&
+ (t(s).unbind(d),
+ t(s.body).removeClass('sp-dragging'),
+ setTimeout(function () {
+ r.apply(e, arguments);
+ }, 0)),
+ (a = !1);
+ }
+ (d.selectstart = f),
+ (d.dragstart = f),
+ (d['touchmove mousemove'] = p),
+ (d['touchend mouseup'] = g),
+ t(e).bind('touchstart mousedown', function (n) {
+ (n.which ? 3 == n.which : 2 == n.button) ||
+ a ||
+ (!1 !== i.apply(e, arguments) &&
+ ((a = !0),
+ (c = t(e).height()),
+ (u = t(e).width()),
+ (l = t(e).offset()),
+ t(s).bind(d),
+ t(s.body).addClass('sp-dragging'),
+ p(n),
+ f(n)));
+ });
+ }
+ function g() {
+ return t.fn.spectrum.inputTypeColorSupport();
+ }
+ (t.fn.spectrum = function (e, n) {
+ if ('string' == typeof e) {
+ var i = this,
+ o = Array.prototype.slice.call(arguments, 1);
+ return (
+ this.each(function () {
+ var n = r[t(this).data('spectrum.id')];
+ if (n) {
+ var s = n[e];
+ if (!s) throw new Error("Spectrum: no such method: '" + e + "'");
+ 'get' == e
+ ? (i = n.get())
+ : 'container' == e
+ ? (i = n.container)
+ : 'option' == e
+ ? (i = n.option.apply(n, o))
+ : 'destroy' == e
+ ? (n.destroy(), t(this).removeData('spectrum.id'))
+ : s.apply(n, o);
+ }
+ }),
+ i
+ );
+ }
+ return this.spectrum('destroy').each(function () {
+ var n = u(this, t.extend({}, e, t(this).data()));
+ t(this).data('spectrum.id', n.id);
+ });
+ }),
+ (t.fn.spectrum.load = !0),
+ (t.fn.spectrum.loadOpts = {}),
+ (t.fn.spectrum.draggable = p),
+ (t.fn.spectrum.defaults = n),
+ (t.fn.spectrum.inputTypeColorSupport = function e() {
+ if (void 0 === e._cachedResult) {
+ var n = t("")[0];
+ e._cachedResult = 'color' === n.type && '' !== n.value;
+ }
+ return e._cachedResult;
+ }),
+ (t.spectrum = {}),
+ (t.spectrum.localization = {}),
+ (t.spectrum.palettes = {}),
+ (t.fn.spectrum.processNativeColorInputs = function () {
+ var e = t('input[type=color]');
+ e.length && !g() && e.spectrum({ preferredFormat: 'hex6' });
+ });
+ var v = /^[\s,#]+/,
+ m = /\s+$/,
+ y = 0,
+ b = Math,
+ x = b.round,
+ w = b.min,
+ C = b.max,
+ k = b.random,
+ S = function t(e, n) {
+ if (((e = e || ''), (n = n || {}), e instanceof t)) return e;
+ if (!(this instanceof t)) return new t(e, n);
+ var r = (function (t) {
+ var e = { r: 0, g: 0, b: 0 },
+ n = 1,
+ r = !1,
+ o = !1;
+ 'string' == typeof t &&
+ (t = (function (t) {
+ t = t.replace(v, '').replace(m, '').toLowerCase();
+ var e,
+ n = !1;
+ if ($[t]) (t = $[t]), (n = !0);
+ else if ('transparent' == t) return { r: 0, g: 0, b: 0, a: 0, format: 'name' };
+ if ((e = X.rgb.exec(t))) return { r: e[1], g: e[2], b: e[3] };
+ if ((e = X.rgba.exec(t))) return { r: e[1], g: e[2], b: e[3], a: e[4] };
+ if ((e = X.hsl.exec(t))) return { h: e[1], s: e[2], l: e[3] };
+ if ((e = X.hsla.exec(t))) return { h: e[1], s: e[2], l: e[3], a: e[4] };
+ if ((e = X.hsv.exec(t))) return { h: e[1], s: e[2], v: e[3] };
+ if ((e = X.hsva.exec(t))) return { h: e[1], s: e[2], v: e[3], a: e[4] };
+ if ((e = X.hex8.exec(t)))
+ return {
+ a: (function (t) {
+ return K(t) / 255;
+ })(e[1]),
+ r: K(e[2]),
+ g: K(e[3]),
+ b: K(e[4]),
+ format: n ? 'name' : 'hex8',
+ };
+ if ((e = X.hex6.exec(t))) return { r: K(e[1]), g: K(e[2]), b: K(e[3]), format: n ? 'name' : 'hex' };
+ if ((e = X.hex3.exec(t)))
+ return {
+ r: K(e[1] + '' + e[1]),
+ g: K(e[2] + '' + e[2]),
+ b: K(e[3] + '' + e[3]),
+ format: n ? 'name' : 'hex',
+ };
+ return !1;
+ })(t));
+ 'object' == (void 0 === t ? 'undefined' : i(t)) &&
+ (t.hasOwnProperty('r') && t.hasOwnProperty('g') && t.hasOwnProperty('b')
+ ? ((e = (function (t, e, n) {
+ return { r: 255 * U(t, 255), g: 255 * U(e, 255), b: 255 * U(n, 255) };
+ })(t.r, t.g, t.b)),
+ (r = !0),
+ (o = '%' === String(t.r).substr(-1) ? 'prgb' : 'rgb'))
+ : t.hasOwnProperty('h') && t.hasOwnProperty('s') && t.hasOwnProperty('v')
+ ? ((t.s = Y(t.s)),
+ (t.v = Y(t.v)),
+ (e = (function (t, e, n) {
+ (t = 6 * U(t, 360)), (e = U(e, 100)), (n = U(n, 100));
+ var i = b.floor(t),
+ r = t - i,
+ o = n * (1 - e),
+ s = n * (1 - r * e),
+ a = n * (1 - (1 - r) * e),
+ l = i % 6;
+ return {
+ r: 255 * [n, s, o, o, a, n][l],
+ g: 255 * [a, n, n, s, o, o][l],
+ b: 255 * [o, o, a, n, n, s][l],
+ };
+ })(t.h, t.s, t.v)),
+ (r = !0),
+ (o = 'hsv'))
+ : t.hasOwnProperty('h') &&
+ t.hasOwnProperty('s') &&
+ t.hasOwnProperty('l') &&
+ ((t.s = Y(t.s)),
+ (t.l = Y(t.l)),
+ (e = (function (t, e, n) {
+ var i, r, o;
+ function s(t, e, n) {
+ return (
+ n < 0 && (n += 1),
+ n > 1 && (n -= 1),
+ n < 1 / 6
+ ? t + 6 * (e - t) * n
+ : n < 0.5
+ ? e
+ : n < 2 / 3
+ ? t + (e - t) * (2 / 3 - n) * 6
+ : t
+ );
+ }
+ if (((t = U(t, 360)), (e = U(e, 100)), (n = U(n, 100)), 0 === e)) i = r = o = n;
+ else {
+ var a = n < 0.5 ? n * (1 + e) : n + e - n * e,
+ l = 2 * n - a;
+ (i = s(l, a, t + 1 / 3)), (r = s(l, a, t)), (o = s(l, a, t - 1 / 3));
+ }
+ return { r: 255 * i, g: 255 * r, b: 255 * o };
+ })(t.h, t.s, t.l)),
+ (r = !0),
+ (o = 'hsl')),
+ t.hasOwnProperty('a') && (n = t.a));
+ return (
+ (n = W(n)),
+ { ok: r, format: t.format || o, r: w(255, C(e.r, 0)), g: w(255, C(e.g, 0)), b: w(255, C(e.b, 0)), a: n }
+ );
+ })(e);
+ (this._originalInput = e),
+ (this._r = r.r),
+ (this._g = r.g),
+ (this._b = r.b),
+ (this._a = r.a),
+ (this._roundA = x(100 * this._a) / 100),
+ (this._format = n.format || r.format),
+ (this._gradientType = n.gradientType),
+ this._r < 1 && (this._r = x(this._r)),
+ this._g < 1 && (this._g = x(this._g)),
+ this._b < 1 && (this._b = x(this._b)),
+ (this._ok = r.ok),
+ (this._tc_id = y++);
+ };
+ function T(t, e, n) {
+ (t = U(t, 255)), (e = U(e, 255)), (n = U(n, 255));
+ var i,
+ r,
+ o = C(t, e, n),
+ s = w(t, e, n),
+ a = (o + s) / 2;
+ if (o == s) i = r = 0;
+ else {
+ var l = o - s;
+ switch (((r = a > 0.5 ? l / (2 - o - s) : l / (o + s)), o)) {
+ case t:
+ i = (e - n) / l + (e < n ? 6 : 0);
+ break;
+ case e:
+ i = (n - t) / l + 2;
+ break;
+ case n:
+ i = (t - e) / l + 4;
+ }
+ i /= 6;
+ }
+ return { h: i, s: r, l: a };
+ }
+ function E(t, e, n) {
+ (t = U(t, 255)), (e = U(e, 255)), (n = U(n, 255));
+ var i,
+ r,
+ o = C(t, e, n),
+ s = w(t, e, n),
+ a = o,
+ l = o - s;
+ if (((r = 0 === o ? 0 : l / o), o == s)) i = 0;
+ else {
+ switch (o) {
+ case t:
+ i = (e - n) / l + (e < n ? 6 : 0);
+ break;
+ case e:
+ i = (n - t) / l + 2;
+ break;
+ case n:
+ i = (t - e) / l + 4;
+ }
+ i /= 6;
+ }
+ return { h: i, s: r, v: a };
+ }
+ function M(t, e, n, i) {
+ var r = [G(x(t).toString(16)), G(x(e).toString(16)), G(x(n).toString(16))];
+ return i &&
+ r[0].charAt(0) == r[0].charAt(1) &&
+ r[1].charAt(0) == r[1].charAt(1) &&
+ r[2].charAt(0) == r[2].charAt(1)
+ ? r[0].charAt(0) + r[1].charAt(0) + r[2].charAt(0)
+ : r.join('');
+ }
+ function A(t, e, n, i) {
+ return [
+ G(
+ (function (t) {
+ return Math.round(255 * parseFloat(t)).toString(16);
+ })(i),
+ ),
+ G(x(t).toString(16)),
+ G(x(e).toString(16)),
+ G(x(n).toString(16)),
+ ].join('');
+ }
+ function O(t, e) {
+ e = 0 === e ? 0 : e || 10;
+ var n = S(t).toHsl();
+ return (n.s -= e / 100), (n.s = q(n.s)), S(n);
+ }
+ function P(t, e) {
+ e = 0 === e ? 0 : e || 10;
+ var n = S(t).toHsl();
+ return (n.s += e / 100), (n.s = q(n.s)), S(n);
+ }
+ function _(t) {
+ return S(t).desaturate(100);
+ }
+ function L(t, e) {
+ e = 0 === e ? 0 : e || 10;
+ var n = S(t).toHsl();
+ return (n.l += e / 100), (n.l = q(n.l)), S(n);
+ }
+ function N(t, e) {
+ e = 0 === e ? 0 : e || 10;
+ var n = S(t).toRgb();
+ return (
+ (n.r = C(0, w(255, n.r - x((-e / 100) * 255)))),
+ (n.g = C(0, w(255, n.g - x((-e / 100) * 255)))),
+ (n.b = C(0, w(255, n.b - x((-e / 100) * 255)))),
+ S(n)
+ );
+ }
+ function D(t, e) {
+ e = 0 === e ? 0 : e || 10;
+ var n = S(t).toHsl();
+ return (n.l -= e / 100), (n.l = q(n.l)), S(n);
+ }
+ function I(t, e) {
+ var n = S(t).toHsl(),
+ i = (x(n.h) + e) % 360;
+ return (n.h = i < 0 ? 360 + i : i), S(n);
+ }
+ function F(t) {
+ var e = S(t).toHsl();
+ return (e.h = (e.h + 180) % 360), S(e);
+ }
+ function R(t) {
+ var e = S(t).toHsl(),
+ n = e.h;
+ return [S(t), S({ h: (n + 120) % 360, s: e.s, l: e.l }), S({ h: (n + 240) % 360, s: e.s, l: e.l })];
+ }
+ function j(t) {
+ var e = S(t).toHsl(),
+ n = e.h;
+ return [
+ S(t),
+ S({ h: (n + 90) % 360, s: e.s, l: e.l }),
+ S({ h: (n + 180) % 360, s: e.s, l: e.l }),
+ S({ h: (n + 270) % 360, s: e.s, l: e.l }),
+ ];
+ }
+ function z(t) {
+ var e = S(t).toHsl(),
+ n = e.h;
+ return [S(t), S({ h: (n + 72) % 360, s: e.s, l: e.l }), S({ h: (n + 216) % 360, s: e.s, l: e.l })];
+ }
+ function H(t, e, n) {
+ (e = e || 6), (n = n || 30);
+ var i = S(t).toHsl(),
+ r = 360 / n,
+ o = [S(t)];
+ for (i.h = (i.h - ((r * e) >> 1) + 720) % 360; --e; ) (i.h = (i.h + r) % 360), o.push(S(i));
+ return o;
+ }
+ function V(t, e) {
+ e = e || 6;
+ for (var n = S(t).toHsv(), i = n.h, r = n.s, o = n.v, s = [], a = 1 / e; e--; )
+ s.push(S({ h: i, s: r, v: o })), (o = (o + a) % 1);
+ return s;
+ }
+ (S.prototype = {
+ isDark: function () {
+ return this.getBrightness() < 128;
+ },
+ isLight: function () {
+ return !this.isDark();
+ },
+ isValid: function () {
+ return this._ok;
+ },
+ getOriginalInput: function () {
+ return this._originalInput;
+ },
+ getFormat: function () {
+ return this._format;
+ },
+ getAlpha: function () {
+ return this._a;
+ },
+ getBrightness: function () {
+ var t = this.toRgb();
+ return (299 * t.r + 587 * t.g + 114 * t.b) / 1e3;
+ },
+ setAlpha: function (t) {
+ return (this._a = W(t)), (this._roundA = x(100 * this._a) / 100), this;
+ },
+ toHsv: function () {
+ var t = E(this._r, this._g, this._b);
+ return { h: 360 * t.h, s: t.s, v: t.v, a: this._a };
+ },
+ toHsvString: function () {
+ var t = E(this._r, this._g, this._b),
+ e = x(360 * t.h),
+ n = x(100 * t.s),
+ i = x(100 * t.v);
+ return 1 == this._a
+ ? 'hsv(' + e + ', ' + n + '%, ' + i + '%)'
+ : 'hsva(' + e + ', ' + n + '%, ' + i + '%, ' + this._roundA + ')';
+ },
+ toHsl: function () {
+ var t = T(this._r, this._g, this._b);
+ return { h: 360 * t.h, s: t.s, l: t.l, a: this._a };
+ },
+ toHslString: function () {
+ var t = T(this._r, this._g, this._b),
+ e = x(360 * t.h),
+ n = x(100 * t.s),
+ i = x(100 * t.l);
+ return 1 == this._a
+ ? 'hsl(' + e + ', ' + n + '%, ' + i + '%)'
+ : 'hsla(' + e + ', ' + n + '%, ' + i + '%, ' + this._roundA + ')';
+ },
+ toHex: function (t) {
+ return M(this._r, this._g, this._b, t);
+ },
+ toHexString: function (t) {
+ return '#' + this.toHex(t);
+ },
+ toHex8: function () {
+ return A(this._r, this._g, this._b, this._a);
+ },
+ toHex8String: function () {
+ return '#' + this.toHex8();
+ },
+ toRgb: function () {
+ return { r: x(this._r), g: x(this._g), b: x(this._b), a: this._a };
+ },
+ toRgbString: function () {
+ return 1 == this._a
+ ? 'rgb(' + x(this._r) + ', ' + x(this._g) + ', ' + x(this._b) + ')'
+ : 'rgba(' + x(this._r) + ', ' + x(this._g) + ', ' + x(this._b) + ', ' + this._roundA + ')';
+ },
+ toPercentageRgb: function () {
+ return {
+ r: x(100 * U(this._r, 255)) + '%',
+ g: x(100 * U(this._g, 255)) + '%',
+ b: x(100 * U(this._b, 255)) + '%',
+ a: this._a,
+ };
+ },
+ toPercentageRgbString: function () {
+ return 1 == this._a
+ ? 'rgb(' +
+ x(100 * U(this._r, 255)) +
+ '%, ' +
+ x(100 * U(this._g, 255)) +
+ '%, ' +
+ x(100 * U(this._b, 255)) +
+ '%)'
+ : 'rgba(' +
+ x(100 * U(this._r, 255)) +
+ '%, ' +
+ x(100 * U(this._g, 255)) +
+ '%, ' +
+ x(100 * U(this._b, 255)) +
+ '%, ' +
+ this._roundA +
+ ')';
+ },
+ toName: function () {
+ return 0 === this._a ? 'transparent' : !(this._a < 1) && (B[M(this._r, this._g, this._b, !0)] || !1);
+ },
+ toFilter: function (t) {
+ var e = '#' + A(this._r, this._g, this._b, this._a),
+ n = e,
+ i = this._gradientType ? 'GradientType = 1, ' : '';
+ t && (n = S(t).toHex8String());
+ return 'progid:DXImageTransform.Microsoft.gradient(' + i + 'startColorstr=' + e + ',endColorstr=' + n + ')';
+ },
+ toString: function (t) {
+ var e = !!t;
+ t = t || this._format;
+ var n = !1,
+ i = this._a < 1 && this._a >= 0;
+ return e || !i || ('hex' !== t && 'hex6' !== t && 'hex3' !== t && 'name' !== t)
+ ? ('rgb' === t && (n = this.toRgbString()),
+ 'prgb' === t && (n = this.toPercentageRgbString()),
+ ('hex' !== t && 'hex6' !== t) || (n = this.toHexString()),
+ 'hex3' === t && (n = this.toHexString(!0)),
+ 'hex8' === t && (n = this.toHex8String()),
+ 'name' === t && (n = this.toName()),
+ 'hsl' === t && (n = this.toHslString()),
+ 'hsv' === t && (n = this.toHsvString()),
+ n || this.toHexString())
+ : 'name' === t && 0 === this._a
+ ? this.toName()
+ : this.toRgbString();
+ },
+ _applyModification: function (t, e) {
+ var n = t.apply(null, [this].concat([].slice.call(e)));
+ return (this._r = n._r), (this._g = n._g), (this._b = n._b), this.setAlpha(n._a), this;
+ },
+ lighten: function () {
+ return this._applyModification(L, arguments);
+ },
+ brighten: function () {
+ return this._applyModification(N, arguments);
+ },
+ darken: function () {
+ return this._applyModification(D, arguments);
+ },
+ desaturate: function () {
+ return this._applyModification(O, arguments);
+ },
+ saturate: function () {
+ return this._applyModification(P, arguments);
+ },
+ greyscale: function () {
+ return this._applyModification(_, arguments);
+ },
+ spin: function () {
+ return this._applyModification(I, arguments);
+ },
+ _applyCombination: function (t, e) {
+ return t.apply(null, [this].concat([].slice.call(e)));
+ },
+ analogous: function () {
+ return this._applyCombination(H, arguments);
+ },
+ complement: function () {
+ return this._applyCombination(F, arguments);
+ },
+ monochromatic: function () {
+ return this._applyCombination(V, arguments);
+ },
+ splitcomplement: function () {
+ return this._applyCombination(z, arguments);
+ },
+ triad: function () {
+ return this._applyCombination(R, arguments);
+ },
+ tetrad: function () {
+ return this._applyCombination(j, arguments);
+ },
+ }),
+ (S.fromRatio = function (t, e) {
+ if ('object' == (void 0 === t ? 'undefined' : i(t))) {
+ var n = {};
+ for (var r in t) t.hasOwnProperty(r) && (n[r] = 'a' === r ? t[r] : Y(t[r]));
+ t = n;
+ }
+ return S(t, e);
+ }),
+ (S.equals = function (t, e) {
+ return !(!t || !e) && S(t).toRgbString() == S(e).toRgbString();
+ }),
+ (S.random = function () {
+ return S.fromRatio({ r: k(), g: k(), b: k() });
+ }),
+ (S.mix = function (t, e, n) {
+ n = 0 === n ? 0 : n || 50;
+ var i,
+ r = S(t).toRgb(),
+ o = S(e).toRgb(),
+ s = n / 100,
+ a = 2 * s - 1,
+ l = o.a - r.a,
+ c = 1 - (i = ((i = a * l == -1 ? a : (a + l) / (1 + a * l)) + 1) / 2),
+ u = { r: o.r * i + r.r * c, g: o.g * i + r.g * c, b: o.b * i + r.b * c, a: o.a * s + r.a * (1 - s) };
+ return S(u);
+ }),
+ (S.readability = function (t, e) {
+ var n = S(t),
+ i = S(e),
+ r = n.toRgb(),
+ o = i.toRgb(),
+ s = n.getBrightness(),
+ a = i.getBrightness(),
+ l =
+ Math.max(r.r, o.r) -
+ Math.min(r.r, o.r) +
+ Math.max(r.g, o.g) -
+ Math.min(r.g, o.g) +
+ Math.max(r.b, o.b) -
+ Math.min(r.b, o.b);
+ return { brightness: Math.abs(s - a), color: l };
+ }),
+ (S.isReadable = function (t, e) {
+ var n = S.readability(t, e);
+ return n.brightness > 125 && n.color > 500;
+ }),
+ (S.mostReadable = function (t, e) {
+ for (var n = null, i = 0, r = !1, o = 0; o < e.length; o++) {
+ var s = S.readability(t, e[o]),
+ a = s.brightness > 125 && s.color > 500,
+ l = (s.brightness / 125) * 3 + s.color / 500;
+ ((a && !r) || (a && r && l > i) || (!a && !r && l > i)) && ((r = a), (i = l), (n = S(e[o])));
+ }
+ return n;
+ });
+ var $ = (S.names = {
+ aliceblue: 'f0f8ff',
+ antiquewhite: 'faebd7',
+ aqua: '0ff',
+ aquamarine: '7fffd4',
+ azure: 'f0ffff',
+ beige: 'f5f5dc',
+ bisque: 'ffe4c4',
+ black: '000',
+ blanchedalmond: 'ffebcd',
+ blue: '00f',
+ blueviolet: '8a2be2',
+ brown: 'a52a2a',
+ burlywood: 'deb887',
+ burntsienna: 'ea7e5d',
+ cadetblue: '5f9ea0',
+ chartreuse: '7fff00',
+ chocolate: 'd2691e',
+ coral: 'ff7f50',
+ cornflowerblue: '6495ed',
+ cornsilk: 'fff8dc',
+ crimson: 'dc143c',
+ cyan: '0ff',
+ darkblue: '00008b',
+ darkcyan: '008b8b',
+ darkgoldenrod: 'b8860b',
+ darkgray: 'a9a9a9',
+ darkgreen: '006400',
+ darkgrey: 'a9a9a9',
+ darkkhaki: 'bdb76b',
+ darkmagenta: '8b008b',
+ darkolivegreen: '556b2f',
+ darkorange: 'ff8c00',
+ darkorchid: '9932cc',
+ darkred: '8b0000',
+ darksalmon: 'e9967a',
+ darkseagreen: '8fbc8f',
+ darkslateblue: '483d8b',
+ darkslategray: '2f4f4f',
+ darkslategrey: '2f4f4f',
+ darkturquoise: '00ced1',
+ darkviolet: '9400d3',
+ deeppink: 'ff1493',
+ deepskyblue: '00bfff',
+ dimgray: '696969',
+ dimgrey: '696969',
+ dodgerblue: '1e90ff',
+ firebrick: 'b22222',
+ floralwhite: 'fffaf0',
+ forestgreen: '228b22',
+ fuchsia: 'f0f',
+ gainsboro: 'dcdcdc',
+ ghostwhite: 'f8f8ff',
+ gold: 'ffd700',
+ goldenrod: 'daa520',
+ gray: '808080',
+ green: '008000',
+ greenyellow: 'adff2f',
+ grey: '808080',
+ honeydew: 'f0fff0',
+ hotpink: 'ff69b4',
+ indianred: 'cd5c5c',
+ indigo: '4b0082',
+ ivory: 'fffff0',
+ khaki: 'f0e68c',
+ lavender: 'e6e6fa',
+ lavenderblush: 'fff0f5',
+ lawngreen: '7cfc00',
+ lemonchiffon: 'fffacd',
+ lightblue: 'add8e6',
+ lightcoral: 'f08080',
+ lightcyan: 'e0ffff',
+ lightgoldenrodyellow: 'fafad2',
+ lightgray: 'd3d3d3',
+ lightgreen: '90ee90',
+ lightgrey: 'd3d3d3',
+ lightpink: 'ffb6c1',
+ lightsalmon: 'ffa07a',
+ lightseagreen: '20b2aa',
+ lightskyblue: '87cefa',
+ lightslategray: '789',
+ lightslategrey: '789',
+ lightsteelblue: 'b0c4de',
+ lightyellow: 'ffffe0',
+ lime: '0f0',
+ limegreen: '32cd32',
+ linen: 'faf0e6',
+ magenta: 'f0f',
+ maroon: '800000',
+ mediumaquamarine: '66cdaa',
+ mediumblue: '0000cd',
+ mediumorchid: 'ba55d3',
+ mediumpurple: '9370db',
+ mediumseagreen: '3cb371',
+ mediumslateblue: '7b68ee',
+ mediumspringgreen: '00fa9a',
+ mediumturquoise: '48d1cc',
+ mediumvioletred: 'c71585',
+ midnightblue: '191970',
+ mintcream: 'f5fffa',
+ mistyrose: 'ffe4e1',
+ moccasin: 'ffe4b5',
+ navajowhite: 'ffdead',
+ navy: '000080',
+ oldlace: 'fdf5e6',
+ olive: '808000',
+ olivedrab: '6b8e23',
+ orange: 'ffa500',
+ orangered: 'ff4500',
+ orchid: 'da70d6',
+ palegoldenrod: 'eee8aa',
+ palegreen: '98fb98',
+ paleturquoise: 'afeeee',
+ palevioletred: 'db7093',
+ papayawhip: 'ffefd5',
+ peachpuff: 'ffdab9',
+ peru: 'cd853f',
+ pink: 'ffc0cb',
+ plum: 'dda0dd',
+ powderblue: 'b0e0e6',
+ purple: '800080',
+ rebeccapurple: '663399',
+ red: 'f00',
+ rosybrown: 'bc8f8f',
+ royalblue: '4169e1',
+ saddlebrown: '8b4513',
+ salmon: 'fa8072',
+ sandybrown: 'f4a460',
+ seagreen: '2e8b57',
+ seashell: 'fff5ee',
+ sienna: 'a0522d',
+ silver: 'c0c0c0',
+ skyblue: '87ceeb',
+ slateblue: '6a5acd',
+ slategray: '708090',
+ slategrey: '708090',
+ snow: 'fffafa',
+ springgreen: '00ff7f',
+ steelblue: '4682b4',
+ tan: 'd2b48c',
+ teal: '008080',
+ thistle: 'd8bfd8',
+ tomato: 'ff6347',
+ turquoise: '40e0d0',
+ violet: 'ee82ee',
+ wheat: 'f5deb3',
+ white: 'fff',
+ whitesmoke: 'f5f5f5',
+ yellow: 'ff0',
+ yellowgreen: '9acd32',
+ }),
+ B = (S.hexNames = (function (t) {
+ var e = {};
+ for (var n in t) t.hasOwnProperty(n) && (e[t[n]] = n);
+ return e;
+ })($));
+ function W(t) {
+ return (t = parseFloat(t)), (isNaN(t) || t < 0 || t > 1) && (t = 1), t;
+ }
+ function U(t, e) {
+ (function (t) {
+ return 'string' == typeof t && -1 != t.indexOf('.') && 1 === parseFloat(t);
+ })(t) && (t = '100%');
+ var n = (function (t) {
+ return 'string' == typeof t && -1 != t.indexOf('%');
+ })(t);
+ return (
+ (t = w(e, C(0, parseFloat(t)))),
+ n && (t = parseInt(t * e, 10) / 100),
+ b.abs(t - e) < 1e-6 ? 1 : (t % e) / parseFloat(e)
+ );
+ }
+ function q(t) {
+ return w(1, C(0, t));
+ }
+ function K(t) {
+ return parseInt(t, 16);
+ }
+ function G(t) {
+ return 1 == t.length ? '0' + t : '' + t;
+ }
+ function Y(t) {
+ return t <= 1 && (t = 100 * t + '%'), t;
+ }
+ var X = (function () {
+ var t = '(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)',
+ e = '[\\s|\\(]+(' + t + ')[,|\\s]+(' + t + ')[,|\\s]+(' + t + ')\\s*\\)?',
+ n = '[\\s|\\(]+(' + t + ')[,|\\s]+(' + t + ')[,|\\s]+(' + t + ')[,|\\s]+(' + t + ')\\s*\\)?';
+ return {
+ rgb: new RegExp('rgb' + e),
+ rgba: new RegExp('rgba' + n),
+ hsl: new RegExp('hsl' + e),
+ hsla: new RegExp('hsla' + n),
+ hsv: new RegExp('hsv' + e),
+ hsva: new RegExp('hsva' + n),
+ hex3: /^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+ hex6: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+ hex8: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+ };
+ })();
+ (window.tinycolor = S),
+ t(function () {
+ t.fn.spectrum.load && t.fn.spectrum.processNativeColorInputs();
+ });
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = (function (t) {
+ return t && t.__esModule ? t : { default: t };
+ })(n(0));
+ t.exports = i.default.Model.extend({
+ defaults: { index: '', value: '', values: {}, active: !1, preview: !1, properties: [] },
+ initialize: function () {
+ var t = n(18),
+ e = this.get('properties'),
+ i = this.get('value');
+ if ((this.set('properties', e instanceof t ? e : new t(e)), !i)) {
+ var r = '',
+ o = this.get('values');
+ for (var s in o) r += ' ' + o[s];
+ this.set('value', r.trim());
+ }
+ },
+ getPropertyValue: function (t) {
+ var e = '';
+ return (
+ this.get('properties').each(function (n) {
+ n.get('property') == t && (e = n.getFullValue());
+ }),
+ e
+ );
+ },
+ getFullValue: function () {
+ var t = [];
+ return (
+ this.get('properties').each(function (e) {
+ return t.push(e.getFullValue());
+ }),
+ t.join(' ')
+ );
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i =
+ Object.assign ||
+ function (t) {
+ for (var e = 1; e < arguments.length; e++) {
+ var n = arguments[e];
+ for (var i in n) Object.prototype.hasOwnProperty.call(n, i) && (t[i] = n[i]);
+ }
+ return t;
+ },
+ r = (function (t) {
+ return t && t.__esModule ? t : { default: t };
+ })(n(0));
+ var o = n(170);
+ t.exports = r.default.Collection.extend({
+ model: o,
+ initialize: function () {
+ (this.idx = 1), this.on('add', this.onAdd), this.on('reset', this.onReset);
+ },
+ onAdd: function (t, e, n) {
+ n.noIncrement || t.set('index', this.idx++);
+ },
+ onReset: function () {
+ this.idx = 1;
+ },
+ getLayersFromValue: function (t) {
+ var e = this,
+ n = [];
+ return (
+ t.replace(/\(([\w\s,.]*)\)/g, function (e) {
+ var n = e.replace(/,\s*/g, ',');
+ t = t.replace(e, n);
+ }),
+ (t ? t.split(', ') : []).forEach(function (t) {
+ n.push({ properties: e.properties.parseValue(t) });
+ }),
+ n
+ );
+ },
+ getLayersFromStyle: function (t) {
+ var e = [],
+ n = this.properties;
+ n.pluck('property');
+ return (
+ n.each(function (n) {
+ var r = t[n.get('property')];
+ (r ? r.split(', ') : []).forEach(function (t, r) {
+ t = n.parseValue(t.trim()).value;
+ var o = e[r],
+ s = i({}, n.attributes, { value: t });
+ o ? o.properties.push(s) : (e[r] = { properties: [s] });
+ });
+ }),
+ e.forEach(function (t) {
+ var e = t.properties.map(function (t) {
+ return t.property;
+ });
+ n.each(function (n) {
+ var r = n.get('property');
+ e.indexOf(r) < 0 && t.properties.push(i({}, n.attributes));
+ });
+ }),
+ e
+ );
+ },
+ active: function (t) {
+ this.each(function (t) {
+ return t.set('active', 0);
+ });
+ var e = this.at(t);
+ e && e.set('active', 1);
+ },
+ getFullValue: function () {
+ var t = [];
+ return (
+ this.each(function (e) {
+ return t.push(e.getFullValue());
+ }),
+ t.join(', ')
+ );
+ },
+ getPropertyValues: function (t) {
+ var e = [];
+ return (
+ this.each(function (n) {
+ var i = n.getPropertyValue(t);
+ i && e.push(i);
+ }),
+ e.join(', ')
+ );
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i =
+ Object.assign ||
+ function (t) {
+ for (var e = 1; e < arguments.length; e++) {
+ var n = arguments[e];
+ for (var i in n) Object.prototype.hasOwnProperty.call(n, i) && (t[i] = n[i]);
+ }
+ return t;
+ },
+ r = n(75),
+ o = n(171);
+ t.exports = r.extend({
+ defaults: i({}, r.prototype.defaults, { layers: [], preview: 0 }),
+ init: function () {
+ r.prototype.init.apply(this, arguments);
+ var t = this.get('layers'),
+ e = new o(t);
+ (e.properties = this.get('properties')), this.set('layers', e);
+ },
+ getFullValue: function () {
+ return this.get('detached') ? '' : this.get('layers').getFullValue();
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = n(1),
+ r = n(0),
+ o = n(18),
+ s = n(164);
+ t.exports = r.Model.extend({
+ defaults: { id: '', name: '', open: !0, buildProps: '', extendBuilded: 1, properties: [] },
+ initialize: function (t) {
+ var e = t || {},
+ n = [],
+ i = this.buildProperties(e.buildProps);
+ !this.get('id') && this.set('id', this.get('name')),
+ (n = i ? this.extendProperties(i) : this.get('properties'));
+ var r = new o(n);
+ (r.sector = this), this.set('properties', r);
+ },
+ extendProperties: function (t, e, n) {
+ for (
+ var r = t.length,
+ o = e || this.get('properties'),
+ s = this.get('extendBuilded'),
+ a = [],
+ l = 0,
+ c = o.length;
+ l < c;
+ l++
+ ) {
+ for (var u = o[l], h = 0, d = 0; d < r; d++) {
+ var f = t[d];
+ if (u.property != f.property && u.id != f.property);
+ else {
+ var p = u.properties;
+ p && p.length && (u.properties = this.extendProperties(f.properties, p, 1)),
+ (t[d] = s ? (0, i.extend)(f, u) : u),
+ (a[d] = t[d]),
+ (h = 1);
+ }
+ }
+ h || (t.push(u), a.push(u));
+ }
+ return n ? a : t;
+ },
+ buildProperties: function (t) {
+ var e = t || [];
+ if (e.length) return this.propFactory || (this.propFactory = new s()), this.propFactory.build(e);
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = n(173);
+ t.exports = n(0).Collection.extend({ model: i });
+ },
+ function (t, e, n) {
+ 'use strict';
+ t.exports = {
+ stylePrefix: 'sm-',
+ sectors: [],
+ appendTo: '',
+ textNoElement: 'Select an element before using Style Manager',
+ hideNotStylable: !0,
+ highlightChanged: !0,
+ highlightComputed: !0,
+ showComputed: !0,
+ clearProperties: 0,
+ avoidComputed: ['width', 'height'],
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ t.exports = {
+ stylePrefix: 'rte-',
+ adjustToolbar: 1,
+ actions: ['bold', 'italic', 'underline', 'strikethrough', 'link'],
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ Object.defineProperty(e, '__esModule', { value: !0 });
+ var i =
+ Object.assign ||
+ function (t) {
+ for (var e = 1; e < arguments.length; e++) {
+ var n = arguments[e];
+ for (var i in n) Object.prototype.hasOwnProperty.call(n, i) && (t[i] = n[i]);
+ }
+ return t;
+ },
+ r = (function () {
+ function t(t, e) {
+ for (var n = 0; n < e.length; n++) {
+ var i = e[n];
+ (i.enumerable = i.enumerable || !1),
+ (i.configurable = !0),
+ 'value' in i && (i.writable = !0),
+ Object.defineProperty(t, i.key, i);
+ }
+ }
+ return function (e, n, i) {
+ return n && t(e.prototype, n), i && t(e, i), e;
+ };
+ })(),
+ o = n(2);
+ var s = '_rte',
+ a = {
+ bold: {
+ name: 'bold',
+ icon: 'B',
+ attributes: { title: 'Bold' },
+ result: function (t) {
+ return t.exec('bold');
+ },
+ },
+ italic: {
+ name: 'italic',
+ icon: 'I',
+ attributes: { title: 'Italic' },
+ result: function (t) {
+ return t.exec('italic');
+ },
+ },
+ underline: {
+ name: 'underline',
+ icon: 'U',
+ attributes: { title: 'Underline' },
+ result: function (t) {
+ return t.exec('underline');
+ },
+ },
+ strikethrough: {
+ name: 'strikethrough',
+ icon: 'S',
+ attributes: { title: 'Strike-through' },
+ result: function (t) {
+ return t.exec('strikeThrough');
+ },
+ },
+ link: {
+ icon: '⫘',
+ name: 'link',
+ attributes: { style: 'font-size:1.4rem;padding:0 4px 2px;', title: 'Link' },
+ result: function (t) {
+ return t.insertHTML('' + t.selection() + '');
+ },
+ },
+ },
+ l = (function () {
+ function t() {
+ var e = this,
+ n = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
+ !(function (t, e) {
+ if (!(t instanceof e)) throw new TypeError('Cannot call a class as a function');
+ })(this, t);
+ var r = n.el;
+ if (r[s]) return r[s];
+ (r[s] = this), this.setEl(r), (this.updateActiveActions = this.updateActiveActions.bind(this));
+ var o = n.actions || [];
+ o.forEach(function (t, e) {
+ 'string' == typeof t ? (t = a[t]) : a[t.name] && (t = i({}, a[t.name], t)), (o[e] = t);
+ });
+ var l = o.length
+ ? o
+ : Object.keys(a).map(function (t) {
+ return a[t];
+ });
+ n.classes = i({ actionbar: 'actionbar', button: 'action', active: 'active' }, n.classes);
+ var c = n.classes,
+ u = n.actionbar;
+ if (((this.actionbar = u), (this.settings = n), (this.classes = c), (this.actions = l), !u)) {
+ var h = n.actionbarContainer;
+ ((u = document.createElement('div')).className = c.actionbar),
+ h.appendChild(u),
+ (this.actionbar = u),
+ l.forEach(function (t) {
+ return e.addAction(t);
+ });
+ }
+ return n.styleWithCSS && this.exec('styleWithCSS'), this.syncActions(), this;
+ }
+ return (
+ r(t, [
+ {
+ key: 'setEl',
+ value: function (t) {
+ (this.el = t), (this.doc = t.ownerDocument);
+ },
+ },
+ {
+ key: 'updateActiveActions',
+ value: function () {
+ var t = this;
+ this.getActions().forEach(function (e) {
+ var n = e.btn,
+ i = e.update,
+ r = t.classes.active,
+ o = e.name,
+ s = t.doc;
+ (n.className = n.className.replace(r, '').trim()),
+ s.queryCommandSupported(o) && s.queryCommandState(o) && (n.className += ' ' + r),
+ i && i(t, e);
+ });
+ },
+ },
+ {
+ key: 'enable',
+ value: function () {
+ return this.enabled
+ ? this
+ : ((this.actionbarEl().style.display = ''),
+ (this.el.contentEditable = !0),
+ (0, o.on)(this.el, 'mouseup keyup', this.updateActiveActions),
+ this.syncActions(),
+ this.updateActiveActions(),
+ this.el.focus(),
+ (this.enabled = 1),
+ this);
+ },
+ },
+ {
+ key: 'disable',
+ value: function () {
+ return (
+ (this.actionbarEl().style.display = 'none'),
+ (this.el.contentEditable = !1),
+ (0, o.off)(this.el, 'mouseup keyup', this.updateActiveActions),
+ (this.enabled = 0),
+ this
+ );
+ },
+ },
+ {
+ key: 'syncActions',
+ value: function () {
+ var t = this;
+ this.getActions().forEach(function (e) {
+ var n = e.event || 'click';
+ e.btn['on' + n] = function (n) {
+ e.result(t, e), t.updateActiveActions();
+ };
+ });
+ },
+ },
+ {
+ key: 'addAction',
+ value: function (t) {
+ var e = (arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}).sync,
+ n = document.createElement('span'),
+ i = t.icon,
+ r = t.attributes || {};
+ for (var o in ((n.className = this.classes.button), (t.btn = n), r)) n.setAttribute(o, r[o]);
+ 'string' == typeof i ? (n.innerHTML = i) : n.appendChild(i),
+ this.actionbarEl().appendChild(n),
+ e && (this.actions.push(t), this.syncActions());
+ },
+ },
+ {
+ key: 'getActions',
+ value: function () {
+ return this.actions;
+ },
+ },
+ {
+ key: 'selection',
+ value: function () {
+ return this.doc.getSelection();
+ },
+ },
+ {
+ key: 'exec',
+ value: function (t) {
+ var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null;
+ this.doc.execCommand(t, !1, e);
+ },
+ },
+ {
+ key: 'actionbarEl',
+ value: function () {
+ return this.actionbar;
+ },
+ },
+ {
+ key: 'insertHTML',
+ value: function (t) {
+ var e = this.doc,
+ n = e.getSelection();
+ if (n && n.rangeCount) {
+ var i = e.createElement('div'),
+ r = n.getRangeAt(0);
+ r.deleteContents(),
+ (i.innerHTML = t),
+ Array.prototype.slice.call(i.childNodes).forEach(function (t) {
+ r.insertNode(t), t;
+ }),
+ n.removeAllRanges(),
+ n.addRange(r),
+ this.el.focus();
+ }
+ },
+ },
+ ]),
+ t
+ );
+ })();
+ e.default = l;
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = (function (t) {
+ return t && t.__esModule ? t : { default: t };
+ })(n(177)),
+ r = n(2);
+ t.exports = function () {
+ var t = {},
+ e = n(176),
+ o = void 0,
+ s = void 0,
+ a = void 0,
+ l = function () {
+ var t = o.style;
+ (t.top = '-100px'), (t.left = '-100px'), (t.display = 'none');
+ };
+ return {
+ customRte: null,
+ name: 'RichTextEditor',
+ init: function () {
+ var n = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
+ for (var i in ((t = n), e)) i in t || (t[i] = e[i]);
+ var s = t.pStylePrefix;
+ return (
+ s && (t.stylePrefix = s + t.stylePrefix),
+ (this.pfx = t.stylePrefix),
+ t.actions || [],
+ ((o = document.createElement('div')).className = s + 'rte-toolbar ' + s + 'one-bg'),
+ (a = this.initRte(document.createElement('div'))),
+ (0, r.on)(o, 'mousedown', function (t) {
+ return t.stopPropagation();
+ }),
+ this
+ );
+ },
+ postRender: function (t) {
+ var e = t.model.get('Canvas');
+ (o.style.pointerEvents = 'all'), l(), e.getToolsEl().appendChild(o);
+ },
+ initRte: function (e) {
+ var n = this.pfx,
+ r = o,
+ s = this.actionbar,
+ l = this.actions || t.actions,
+ c = { actionbar: n + 'actionbar', button: n + 'action', active: n + 'active' },
+ u = new i.default({ el: e, classes: c, actions: l, actionbar: s, actionbarContainer: r });
+ return (
+ a && a.setEl(e), u.actionbar && (this.actionbar = u.actionbar), u.actions && (this.actions = u.actions), u
+ );
+ },
+ add: function (t) {
+ var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {};
+ (e.name = t), a.addAction(e, { sync: 1 });
+ },
+ get: function (t) {
+ var e = void 0;
+ return (
+ a.getActions().forEach(function (n) {
+ n.name == t && (e = n);
+ }),
+ e
+ );
+ },
+ getAll: function () {
+ return a.getActions();
+ },
+ remove: function (t) {
+ var e = this.getAll(),
+ n = this.get(t);
+ if (n) {
+ var i = n.btn,
+ r = e.indexOf(n);
+ i.parentNode.removeChild(i), e.splice(r, 1);
+ }
+ return n;
+ },
+ getToolbarEl: function () {
+ return o;
+ },
+ udpatePosition: function () {
+ var e = t.em.get('Canvas').getTargetToElementDim(o, s, { event: 'rteToolbarPosUpdate' });
+ if (e) {
+ t.adjustToolbar && e.top <= e.canvasTop && (e.top = e.elementTop + e.elementHeight);
+ var n = o.style;
+ (n.top = e.top + 'px'), (n.left = e.left + 'px');
+ }
+ },
+ enable: function (e, n) {
+ s = e.el;
+ var i = t.em,
+ r = e.getChildrenContainer(),
+ a = this.customRte;
+ if (((o.style.display = ''), (n = a ? a.enable(r, n) : this.initRte(r).enable()), i)) {
+ setTimeout(this.udpatePosition.bind(this), 0);
+ var l = 'change:canvasOffset canvasScroll';
+ i.off(l, this.udpatePosition, this), i.on(l, this.udpatePosition, this), i.trigger('rte:enable', e, n);
+ }
+ return n;
+ },
+ disable: function (e, n) {
+ var i = t.em,
+ r = this.customRte,
+ o = e.getChildrenContainer();
+ r ? r.disable(o, n) : n && n.disable(), l(), i && i.trigger('rte:disable', e, n);
+ },
+ };
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = n(0),
+ r = n(78);
+ t.exports = i.View.extend({
+ initialize: function (t) {
+ (this.opt = t || {}), (this.config = this.opt.config || {}), (this.pfx = this.config.stylePrefix || '');
+ var e = this.collection;
+ this.listenTo(e, 'add', this.addTo),
+ this.listenTo(e, 'reset', this.render),
+ this.listenTo(e, 'remove', this.onRemove),
+ (this.className = this.pfx + 'panels');
+ },
+ onRemove: function (t) {
+ var e = t.view;
+ e && e.remove();
+ },
+ addTo: function (t) {
+ this.addToCollection(t);
+ },
+ addToCollection: function (t, e) {
+ var n = e || null,
+ i = this.config,
+ o = t.get('el'),
+ s = new r({ el: o, model: t, config: i }),
+ a = s.render().el,
+ l = t.get('appendTo');
+ if (o);
+ else if (l) {
+ document.querySelector(l).appendChild(a);
+ } else n ? n.appendChild(a) : this.$el.append(a);
+ return s.initResize(), a;
+ },
+ render: function () {
+ var t = this,
+ e = this.$el,
+ n = document.createDocumentFragment();
+ return (
+ e.empty(),
+ this.collection.each(function (e) {
+ return t.addToCollection(e, n);
+ }),
+ e.append(n),
+ e.attr('class', this.className),
+ this
+ );
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = (function (t) {
+ return t && t.__esModule ? t : { default: t };
+ })(n(0)),
+ r = n(1);
+ i.default.$;
+ t.exports = i.default.View.extend({
+ tagName: 'span',
+ events: { click: 'clicked' },
+ initialize: function (t) {
+ var e = this.model.get('className');
+ (this.config = t.config || {}), (this.em = this.config.em || {});
+ var n = this.config.stylePrefix || '',
+ i = this.config.pStylePrefix || '';
+ (this.pfx = n),
+ (this.ppfx = this.config.pStylePrefix || ''),
+ (this.id = n + this.model.get('id')),
+ (this.activeCls = n + 'active ' + i + 'four-color'),
+ (this.disableCls = n + 'active'),
+ (this.btnsVisCls = n + 'visible'),
+ (this.className = n + 'btn' + (e ? ' ' + e : '')),
+ this.listenTo(this.model, 'change:active updateActive', this.updateActive),
+ this.listenTo(this.model, 'checkActive', this.checkActive),
+ this.listenTo(this.model, 'change:bntsVis', this.updateBtnsVis),
+ this.listenTo(this.model, 'change:attributes', this.updateAttributes),
+ this.listenTo(this.model, 'change:className', this.updateClassName),
+ this.listenTo(this.model, 'change:disable', this.updateDisable),
+ this.em && this.em.get && (this.commands = this.em.get('Commands'));
+ },
+ updateClassName: function () {
+ var t = this.model.get('className');
+ this.$el.attr('class', this.pfx + 'btn' + (t ? ' ' + t : ''));
+ },
+ updateAttributes: function () {
+ this.$el.attr(this.model.get('attributes'));
+ },
+ updateBtnsVis: function () {
+ this.$buttons &&
+ (this.model.get('bntsVis')
+ ? this.$buttons.addClass(this.btnsVisCls)
+ : this.$buttons.removeClass(this.btnsVisCls));
+ },
+ updateActive: function () {
+ var t = this.model,
+ e = t.get('context'),
+ n = {},
+ i = this.em && this.em.get ? this.em.get('Editor') : null,
+ o = t.get('command');
+ this.commands && (0, r.isString)(o)
+ ? (n = this.commands.get(o) || {})
+ : (0, r.isFunction)(o)
+ ? (n = { run: o })
+ : null !== o && (0, r.isObject)(o) && (n = o),
+ t.get('active')
+ ? (t.collection.deactivateAll(e),
+ t.set('active', !0, { silent: !0 }).trigger('checkActive'),
+ n.run && (n.run(i, t, t.get('options')), i.trigger('run:' + o)),
+ !n.stop && t.set('active', !1))
+ : (this.$el.removeClass(this.activeCls),
+ t.collection.deactivateAll(e),
+ n.stop && (n.stop(i, t, t.get('options')), i.trigger('stop:' + o)));
+ },
+ updateDisable: function () {
+ this.model.get('disable') ? this.$el.addClass(this.disableCls) : this.$el.removeClass(this.disableCls);
+ },
+ checkActive: function () {
+ this.model.get('active') ? this.$el.addClass(this.activeCls) : this.$el.removeClass(this.activeCls);
+ },
+ clicked: function (t) {
+ this.model.get('bntsVis') || this.model.get('disable') || this.toogleActive();
+ },
+ toogleActive: function () {
+ var t = this.model.get('active');
+ this.model.set('active', !t);
+ this.em.get('Commands').get('select-comp');
+ t
+ ? this.model.get('runDefaultCommand') && this.em.runDefault()
+ : this.model.get('stopDefaultCommand') && this.em.stopDefault();
+ },
+ render: function () {
+ var t = this.model.get('label'),
+ e = this.$el;
+ return this.updateAttributes(), e.attr('class', this.className), t && e.append(t), this;
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ (function (e) {
+ var i = n(0),
+ r = n(180);
+ t.exports = i.View.extend({
+ initialize: function (t) {
+ (this.opt = t || {}),
+ (this.config = this.opt.config || {}),
+ (this.pfx = this.config.stylePrefix || ''),
+ (this.parentM = this.opt.parentM || null),
+ this.listenTo(this.collection, 'add', this.addTo),
+ this.listenTo(this.collection, 'reset remove', this.render),
+ (this.className = this.pfx + 'buttons');
+ },
+ addTo: function (t) {
+ this.addToCollection(t);
+ },
+ addToCollection: function (t, e) {
+ var n = e || null,
+ i = new r({ model: t, config: this.config, parentM: this.parentM }).render().el;
+ return n ? n.appendChild(i) : this.$el.append(i), i;
+ },
+ render: function () {
+ var t = document.createDocumentFragment();
+ return (
+ this.$el.empty(),
+ this.collection.each(function (e) {
+ this.addToCollection(e, t);
+ }, this),
+ this.$el.append(t),
+ this.$el.attr('class', e.result(this, 'className')),
+ this
+ );
+ },
+ });
+ }).call(this, n(1));
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = n(0),
+ r = n(80);
+ t.exports = i.Collection.extend({ model: r });
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = n(0);
+ t.exports = i.Model.extend({
+ defaults: {
+ id: '',
+ label: '',
+ className: '',
+ command: '',
+ context: '',
+ buttons: [],
+ attributes: {},
+ options: {},
+ active: !1,
+ dragDrop: !1,
+ runDefaultCommand: !0,
+ stopDefaultCommand: !1,
+ disable: !1,
+ },
+ initialize: function (t) {
+ if (this.get('buttons').length) {
+ var e = n(79);
+ this.set('buttons', new e(this.get('buttons')));
+ }
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = 'sw-visibility',
+ r = 'export-template',
+ o = 'open-layers',
+ s = 'open-blocks',
+ a = 'fullscreen',
+ l = 'preview';
+ t.exports = {
+ stylePrefix: 'pn-',
+ defaults: [
+ { id: 'commands', buttons: [{}] },
+ {
+ id: 'options',
+ buttons: [
+ {
+ active: !0,
+ id: i,
+ className: 'fa fa-square-o',
+ command: i,
+ context: i,
+ attributes: { title: 'View components' },
+ },
+ { id: l, className: 'fa fa-eye', command: l, context: l, attributes: { title: 'Preview' } },
+ { id: a, className: 'fa fa-arrows-alt', command: a, context: a, attributes: { title: 'Fullscreen' } },
+ { id: r, className: 'fa fa-code', command: r, attributes: { title: 'View code' } },
+ ],
+ },
+ {
+ id: 'views',
+ buttons: [
+ {
+ id: 'open-sm',
+ className: 'fa fa-paint-brush',
+ command: 'open-sm',
+ active: !0,
+ attributes: { title: 'Open Style Manager' },
+ },
+ { id: 'open-tm', className: 'fa fa-cog', command: 'open-tm', attributes: { title: 'Settings' } },
+ { id: o, className: 'fa fa-bars', command: o, attributes: { title: 'Open Layer Manager' } },
+ { id: s, className: 'fa fa-th-large', command: s, attributes: { title: 'Open Blocks' } },
+ ],
+ },
+ ],
+ em: null,
+ delayBtnsShow: 300,
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ t.exports = function () {
+ var t,
+ e,
+ i = {},
+ r = n(184),
+ o = n(80),
+ s = n(182),
+ a = (n(78), n(179));
+ return {
+ name: 'Panels',
+ init: function (n) {
+ for (var o in ((i = n || {}), r)) o in i || (i[o] = r[o]);
+ var l = i.pStylePrefix;
+ return (
+ l && (i.stylePrefix = l + i.stylePrefix),
+ (t = new s(i.defaults)),
+ (e = new a({ collection: t, config: i })),
+ this
+ );
+ },
+ getPanels: function () {
+ return t;
+ },
+ getPanelsEl: function () {
+ return e.el;
+ },
+ addPanel: function (e) {
+ return t.add(e);
+ },
+ removePanel: function (e) {
+ return t.remove(e);
+ },
+ getPanel: function (e) {
+ var n = t.where({ id: e });
+ return n.length ? n[0] : null;
+ },
+ addButton: function (t, e) {
+ var n = this.getPanel(t);
+ return n ? n.get('buttons').add(e) : null;
+ },
+ removeButton: function (t, e) {
+ var n = this.getPanel(t);
+ return n && n.get('buttons').remove(e);
+ },
+ getButton: function (t, e) {
+ var n = this.getPanel(t);
+ if (n) {
+ var i = n.get('buttons').where({ id: e });
+ return i.length ? i[0] : null;
+ }
+ return null;
+ },
+ render: function () {
+ return e.render().el;
+ },
+ active: function () {
+ this.getPanels().each(function (t) {
+ t.get('buttons').each(function (t) {
+ t.get('active') && t.trigger('updateActive');
+ });
+ });
+ },
+ disableButtons: function () {
+ this.getPanels().each(function (t) {
+ t.get('buttons').each(function (t) {
+ t.get('disable') && t.trigger('change:disable');
+ });
+ });
+ },
+ Panel: o,
+ };
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = n(1),
+ r = (function (t) {
+ return t && t.__esModule ? t : { default: t };
+ })(n(0));
+ t.exports = r.default.View.extend({
+ template: (0, i.template)(
+ '\n
\n \t
<%= label %>
\n \t\n
',
+ ),
+ initialize: function (t) {
+ (this.config = t.config || {}), (this.pfx = this.config.stylePrefix);
+ },
+ render: function () {
+ var t = this.model.toJSON();
+ return (
+ (t.pfx = this.pfx),
+ this.$el.html(this.template(t)),
+ this.$el.attr('class', this.pfx + 'editor-c'),
+ this.$el.find('#' + this.pfx + 'code').append(this.model.get('input')),
+ this
+ );
+ },
+ });
+ },
+ function (t, e, n) {
+ !(function (t) {
+ t.extendMode('css', {
+ commentStart: '/*',
+ commentEnd: '*/',
+ newlineAfterToken: function (t, e) {
+ return /^[;{}]$/.test(e);
+ },
+ }),
+ t.extendMode('javascript', {
+ commentStart: '/*',
+ commentEnd: '*/',
+ newlineAfterToken: function (t, e, n, i) {
+ return this.jsonMode
+ ? /^[\[,{]$/.test(e) || /^}/.test(n)
+ : (';' != e || !i.lexical || ')' != i.lexical.type) && /^[;{}]$/.test(e) && !/^;/.test(n);
+ },
+ });
+ var e =
+ /^(a|abbr|acronym|area|base|bdo|big|br|button|caption|cite|code|col|colgroup|dd|del|dfn|em|frame|hr|iframe|img|input|ins|kbd|label|legend|link|map|object|optgroup|option|param|q|samp|script|select|small|span|strong|sub|sup|textarea|tt|var)$/;
+ t.extendMode('xml', {
+ commentStart: '\x3c!--',
+ commentEnd: '--\x3e',
+ newlineAfterToken: function (t, n, i, r) {
+ var o = !1;
+ return (
+ 'html' == this.configuration && (o = !!r.context && e.test(r.context.tagName)),
+ !o && (('tag' == t && />$/.test(n) && r.context) || /^ -1 &&
+ a > -1 &&
+ a > s &&
+ (t = t.substr(0, s) + t.substring(s + o.commentStart.length, a) + t.substr(a + o.commentEnd.length)),
+ r.replaceRange(t, n, i);
+ }
+ });
+ }),
+ t.defineExtension('autoIndentRange', function (t, e) {
+ var n = this;
+ this.operation(function () {
+ for (var i = t.line; i <= e.line; i++) n.indentLine(i, 'smart');
+ });
+ }),
+ t.defineExtension('autoFormatRange', function (e, n) {
+ var i = this,
+ r = i.getMode(),
+ o = i.getRange(e, n).split('\n'),
+ s = t.copyState(r, i.getTokenAt(e).state),
+ a = i.getOption('tabSize'),
+ l = '',
+ c = 0,
+ u = 0 === e.ch;
+ function h() {
+ (l += '\n'), (u = !0), ++c;
+ }
+ for (var d = 0; d < o.length; ++d) {
+ for (var f = new t.StringStream(o[d], a); !f.eol(); ) {
+ var p = t.innerMode(r, s),
+ g = r.token(f, s),
+ v = f.current();
+ (f.start = f.pos),
+ (u && !/\S/.test(v)) || ((l += v), (u = !1)),
+ !u &&
+ p.mode.newlineAfterToken &&
+ p.mode.newlineAfterToken(g, v, f.string.slice(f.pos) || o[d + 1] || '', p.state) &&
+ h();
+ }
+ !f.pos && r.blankLine && r.blankLine(s), !u && d < o.length - 1 && h();
+ }
+ i.operation(function () {
+ i.replaceRange(l, e, n);
+ for (var t = e.line + 1, r = e.line + c; t <= r; ++t) i.indentLine(t, 'smart');
+ i.setSelection(e, i.getCursor(!1));
+ });
+ });
+ })(n(6));
+ },
+ function (t, e, n) {
+ !(function (t) {
+ 'use strict';
+ t.defineMode('javascript', function (e, n) {
+ var i,
+ r,
+ o = e.indentUnit,
+ s = n.statementIndent,
+ a = n.jsonld,
+ l = n.json || a,
+ c = n.typescript,
+ u = n.wordCharacters || /[\w$\xa1-\uffff]/,
+ h = (function () {
+ function t(t) {
+ return { type: t, style: 'keyword' };
+ }
+ var e = t('keyword a'),
+ n = t('keyword b'),
+ i = t('keyword c'),
+ r = t('keyword d'),
+ o = t('operator'),
+ s = { type: 'atom', style: 'atom' };
+ return {
+ if: t('if'),
+ while: e,
+ with: e,
+ else: n,
+ do: n,
+ try: n,
+ finally: n,
+ return: r,
+ break: r,
+ continue: r,
+ new: t('new'),
+ delete: i,
+ void: i,
+ throw: i,
+ debugger: t('debugger'),
+ var: t('var'),
+ const: t('var'),
+ let: t('var'),
+ function: t('function'),
+ catch: t('catch'),
+ for: t('for'),
+ switch: t('switch'),
+ case: t('case'),
+ default: t('default'),
+ in: o,
+ typeof: o,
+ instanceof: o,
+ true: s,
+ false: s,
+ null: s,
+ undefined: s,
+ NaN: s,
+ Infinity: s,
+ this: t('this'),
+ class: t('class'),
+ super: t('atom'),
+ yield: i,
+ export: t('export'),
+ import: t('import'),
+ extends: i,
+ await: i,
+ };
+ })(),
+ d = /[+\-*&%=<>!?|~^@]/,
+ f = /^@(context|id|value|language|type|container|list|set|reverse|index|base|vocab|graph)"/;
+ function p(t, e, n) {
+ return (i = t), (r = n), e;
+ }
+ function g(t, e) {
+ var n = t.next();
+ if ('"' == n || "'" == n)
+ return (
+ (e.tokenize = (function (t) {
+ return function (e, n) {
+ var i,
+ r = !1;
+ if (a && '@' == e.peek() && e.match(f)) return (n.tokenize = g), p('jsonld-keyword', 'meta');
+ for (; null != (i = e.next()) && (i != t || r); ) r = !r && '\\' == i;
+ return r || (n.tokenize = g), p('string', 'string');
+ };
+ })(n)),
+ e.tokenize(t, e)
+ );
+ if ('.' == n && t.match(/^\d+(?:[eE][+\-]?\d+)?/)) return p('number', 'number');
+ if ('.' == n && t.match('..')) return p('spread', 'meta');
+ if (/[\[\]{}\(\),;\:\.]/.test(n)) return p(n);
+ if ('=' == n && t.eat('>')) return p('=>', 'operator');
+ if ('0' == n && t.match(/^(?:x[\da-f]+|o[0-7]+|b[01]+)n?/i)) return p('number', 'number');
+ if (/\d/.test(n)) return t.match(/^\d*(?:n|(?:\.\d*)?(?:[eE][+\-]?\d+)?)?/), p('number', 'number');
+ if ('/' == n)
+ return t.eat('*')
+ ? ((e.tokenize = v), v(t, e))
+ : t.eat('/')
+ ? (t.skipToEnd(), p('comment', 'comment'))
+ : qt(t, e, 1)
+ ? ((function (t) {
+ for (var e, n = !1, i = !1; null != (e = t.next()); ) {
+ if (!n) {
+ if ('/' == e && !i) return;
+ '[' == e ? (i = !0) : i && ']' == e && (i = !1);
+ }
+ n = !n && '\\' == e;
+ }
+ })(t),
+ t.match(/^\b(([gimyus])(?![gimyus]*\2))+\b/),
+ p('regexp', 'string-2'))
+ : (t.eat('='), p('operator', 'operator', t.current()));
+ if ('`' == n) return (e.tokenize = m), m(t, e);
+ if ('#' == n) return t.skipToEnd(), p('error', 'error');
+ if (d.test(n))
+ return (
+ ('>' == n && e.lexical && '>' == e.lexical.type) ||
+ (t.eat('=')
+ ? ('!' != n && '=' != n) || t.eat('=')
+ : /[<>*+\-]/.test(n) && (t.eat(n), '>' == n && t.eat(n))),
+ p('operator', 'operator', t.current())
+ );
+ if (u.test(n)) {
+ t.eatWhile(u);
+ var i = t.current();
+ if ('.' != e.lastType) {
+ if (h.propertyIsEnumerable(i)) {
+ var r = h[i];
+ return p(r.type, r.style, i);
+ }
+ if ('async' == i && t.match(/^(\s|\/\*.*?\*\/)*[\[\(\w]/, !1)) return p('async', 'keyword', i);
+ }
+ return p('variable', 'variable', i);
+ }
+ }
+ function v(t, e) {
+ for (var n, i = !1; (n = t.next()); ) {
+ if ('/' == n && i) {
+ e.tokenize = g;
+ break;
+ }
+ i = '*' == n;
+ }
+ return p('comment', 'comment');
+ }
+ function m(t, e) {
+ for (var n, i = !1; null != (n = t.next()); ) {
+ if (!i && ('`' == n || ('$' == n && t.eat('{')))) {
+ e.tokenize = g;
+ break;
+ }
+ i = !i && '\\' == n;
+ }
+ return p('quasi', 'string-2', t.current());
+ }
+ var y = '([{}])';
+ function b(t, e) {
+ e.fatArrowAt && (e.fatArrowAt = null);
+ var n = t.string.indexOf('=>', t.start);
+ if (!(n < 0)) {
+ if (c) {
+ var i = /:\s*(?:\w+(?:<[^>]*>|\[\])?|\{[^}]*\})\s*$/.exec(t.string.slice(t.start, n));
+ i && (n = i.index);
+ }
+ for (var r = 0, o = !1, s = n - 1; s >= 0; --s) {
+ var a = t.string.charAt(s),
+ l = y.indexOf(a);
+ if (l >= 0 && l < 3) {
+ if (!r) {
+ ++s;
+ break;
+ }
+ if (0 == --r) {
+ '(' == a && (o = !0);
+ break;
+ }
+ } else if (l >= 3 && l < 6) ++r;
+ else if (u.test(a)) o = !0;
+ else {
+ if (/["'\/]/.test(a)) return;
+ if (o && !r) {
+ ++s;
+ break;
+ }
+ }
+ }
+ o && !r && (e.fatArrowAt = s);
+ }
+ }
+ var x = { atom: !0, number: !0, variable: !0, string: !0, regexp: !0, this: !0, 'jsonld-keyword': !0 };
+ function w(t, e, n, i, r, o) {
+ (this.indented = t),
+ (this.column = e),
+ (this.type = n),
+ (this.prev = r),
+ (this.info = o),
+ null != i && (this.align = i);
+ }
+ function C(t, e) {
+ for (var n = t.localVars; n; n = n.next) if (n.name == e) return !0;
+ for (var i = t.context; i; i = i.prev) for (var n = i.vars; n; n = n.next) if (n.name == e) return !0;
+ }
+ var k = { state: null, column: null, marked: null, cc: null };
+ function S() {
+ for (var t = arguments.length - 1; t >= 0; t--) k.cc.push(arguments[t]);
+ }
+ function T() {
+ return S.apply(null, arguments), !0;
+ }
+ function E(t, e) {
+ for (var n = e; n; n = n.next) if (n.name == t) return !0;
+ return !1;
+ }
+ function M(t) {
+ var e = k.state;
+ if (((k.marked = 'def'), e.context))
+ if ('var' == e.lexical.info && e.context && e.context.block) {
+ var i = (function t(e, n) {
+ if (n) {
+ if (n.block) {
+ var i = t(e, n.prev);
+ return i ? (i == n.prev ? n : new O(i, n.vars, !0)) : null;
+ }
+ return E(e, n.vars) ? n : new O(n.prev, new P(e, n.vars), !1);
+ }
+ return null;
+ })(t, e.context);
+ if (null != i) return void (e.context = i);
+ } else if (!E(t, e.localVars)) return void (e.localVars = new P(t, e.localVars));
+ n.globalVars && !E(t, e.globalVars) && (e.globalVars = new P(t, e.globalVars));
+ }
+ function A(t) {
+ return 'public' == t || 'private' == t || 'protected' == t || 'abstract' == t || 'readonly' == t;
+ }
+ function O(t, e, n) {
+ (this.prev = t), (this.vars = e), (this.block = n);
+ }
+ function P(t, e) {
+ (this.name = t), (this.next = e);
+ }
+ var _ = new P('this', new P('arguments', null));
+ function L() {
+ (k.state.context = new O(k.state.context, k.state.localVars, !1)), (k.state.localVars = _);
+ }
+ function N() {
+ (k.state.context = new O(k.state.context, k.state.localVars, !0)), (k.state.localVars = null);
+ }
+ function D() {
+ (k.state.localVars = k.state.context.vars), (k.state.context = k.state.context.prev);
+ }
+ function I(t, e) {
+ var n = function () {
+ var n = k.state,
+ i = n.indented;
+ if ('stat' == n.lexical.type) i = n.lexical.indented;
+ else for (var r = n.lexical; r && ')' == r.type && r.align; r = r.prev) i = r.indented;
+ n.lexical = new w(i, k.stream.column(), t, null, n.lexical, e);
+ };
+ return (n.lex = !0), n;
+ }
+ function F() {
+ var t = k.state;
+ t.lexical.prev &&
+ (')' == t.lexical.type && (t.indented = t.lexical.indented), (t.lexical = t.lexical.prev));
+ }
+ function R(t) {
+ return function e(n) {
+ return n == t ? T() : ';' == t ? S() : T(e);
+ };
+ }
+ function j(t, e) {
+ return 'var' == t
+ ? T(I('vardef', e), yt, R(';'), F)
+ : 'keyword a' == t
+ ? T(I('form'), $, j, F)
+ : 'keyword b' == t
+ ? T(I('form'), j, F)
+ : 'keyword d' == t
+ ? k.stream.match(/^\s*$/, !1)
+ ? T()
+ : T(I('stat'), W, R(';'), F)
+ : 'debugger' == t
+ ? T(R(';'))
+ : '{' == t
+ ? T(I('}'), N, st, F, D)
+ : ';' == t
+ ? T()
+ : 'if' == t
+ ? ('else' == k.state.lexical.info &&
+ k.state.cc[k.state.cc.length - 1] == F &&
+ k.state.cc.pop()(),
+ T(I('form'), $, j, F, kt))
+ : 'function' == t
+ ? T(Ot)
+ : 'for' == t
+ ? T(I('form'), St, j, F)
+ : 'class' == t || (c && 'interface' == e)
+ ? ((k.marked = 'keyword'), T(I('form'), Lt, F))
+ : 'variable' == t
+ ? c && 'declare' == e
+ ? ((k.marked = 'keyword'), T(j))
+ : c &&
+ ('module' == e || 'enum' == e || 'type' == e) &&
+ k.stream.match(/^\s*\w/, !1)
+ ? ((k.marked = 'keyword'),
+ 'enum' == e
+ ? T(Wt)
+ : 'type' == e
+ ? T(ut, R('operator'), ut, R(';'))
+ : T(I('form'), bt, R('{'), I('}'), st, F, F))
+ : c && 'namespace' == e
+ ? ((k.marked = 'keyword'), T(I('form'), H, st, F))
+ : c && 'abstract' == e
+ ? ((k.marked = 'keyword'), T(j))
+ : T(I('stat'), Q)
+ : 'switch' == t
+ ? T(I('form'), $, R('{'), I('}', 'switch'), N, st, F, F, D)
+ : 'case' == t
+ ? T(H, R(':'))
+ : 'default' == t
+ ? T(R(':'))
+ : 'catch' == t
+ ? T(I('form'), L, z, j, F, D)
+ : 'export' == t
+ ? T(I('stat'), Ft, F)
+ : 'import' == t
+ ? T(I('stat'), jt, F)
+ : 'async' == t
+ ? T(j)
+ : '@' == e
+ ? T(H, j)
+ : S(I('stat'), H, R(';'), F);
+ }
+ function z(t) {
+ if ('(' == t) return T(Pt, R(')'));
+ }
+ function H(t, e) {
+ return B(t, e, !1);
+ }
+ function V(t, e) {
+ return B(t, e, !0);
+ }
+ function $(t) {
+ return '(' != t ? S() : T(I(')'), H, R(')'), F);
+ }
+ function B(t, e, n) {
+ if (k.state.fatArrowAt == k.stream.start) {
+ var i = n ? X : Y;
+ if ('(' == t) return T(L, I(')'), rt(Pt, ')'), F, R('=>'), i, D);
+ if ('variable' == t) return S(L, bt, R('=>'), i, D);
+ }
+ var r = n ? q : U;
+ return x.hasOwnProperty(t)
+ ? T(r)
+ : 'function' == t
+ ? T(Ot, r)
+ : 'class' == t || (c && 'interface' == e)
+ ? ((k.marked = 'keyword'), T(I('form'), _t, F))
+ : 'keyword c' == t || 'async' == t
+ ? T(n ? V : H)
+ : '(' == t
+ ? T(I(')'), W, R(')'), F, r)
+ : 'operator' == t || 'spread' == t
+ ? T(n ? V : H)
+ : '[' == t
+ ? T(I(']'), Bt, F, r)
+ : '{' == t
+ ? ot(et, '}', null, r)
+ : 'quasi' == t
+ ? S(K, r)
+ : 'new' == t
+ ? T(
+ (function (t) {
+ return function (e) {
+ return '.' == e
+ ? T(t ? Z : J)
+ : 'variable' == e && c
+ ? T(gt, t ? q : U)
+ : S(t ? V : H);
+ };
+ })(n),
+ )
+ : 'import' == t
+ ? T(H)
+ : T();
+ }
+ function W(t) {
+ return t.match(/[;\}\)\],]/) ? S() : S(H);
+ }
+ function U(t, e) {
+ return ',' == t ? T(H) : q(t, e, !1);
+ }
+ function q(t, e, n) {
+ var i = 0 == n ? U : q,
+ r = 0 == n ? H : V;
+ return '=>' == t
+ ? T(L, n ? X : Y, D)
+ : 'operator' == t
+ ? /\+\+|--/.test(e) || (c && '!' == e)
+ ? T(i)
+ : c && '<' == e && k.stream.match(/^([^>]|<.*?>)*>\s*\(/, !1)
+ ? T(I('>'), rt(ut, '>'), F, i)
+ : '?' == e
+ ? T(H, R(':'), r)
+ : T(r)
+ : 'quasi' == t
+ ? S(K, i)
+ : ';' != t
+ ? '(' == t
+ ? ot(V, ')', 'call', i)
+ : '.' == t
+ ? T(tt, i)
+ : '[' == t
+ ? T(I(']'), W, R(']'), F, i)
+ : c && 'as' == e
+ ? ((k.marked = 'keyword'), T(ut, i))
+ : 'regexp' == t
+ ? ((k.state.lastType = k.marked = 'operator'),
+ k.stream.backUp(k.stream.pos - k.stream.start - 1),
+ T(r))
+ : void 0
+ : void 0;
+ }
+ function K(t, e) {
+ return 'quasi' != t ? S() : '${' != e.slice(e.length - 2) ? T(K) : T(H, G);
+ }
+ function G(t) {
+ if ('}' == t) return (k.marked = 'string-2'), (k.state.tokenize = m), T(K);
+ }
+ function Y(t) {
+ return b(k.stream, k.state), S('{' == t ? j : H);
+ }
+ function X(t) {
+ return b(k.stream, k.state), S('{' == t ? j : V);
+ }
+ function J(t, e) {
+ if ('target' == e) return (k.marked = 'keyword'), T(U);
+ }
+ function Z(t, e) {
+ if ('target' == e) return (k.marked = 'keyword'), T(q);
+ }
+ function Q(t) {
+ return ':' == t ? T(F, j) : S(U, R(';'), F);
+ }
+ function tt(t) {
+ if ('variable' == t) return (k.marked = 'property'), T();
+ }
+ function et(t, e) {
+ if ('async' == t) return (k.marked = 'property'), T(et);
+ if ('variable' == t || 'keyword' == k.style) {
+ return (
+ (k.marked = 'property'),
+ 'get' == e || 'set' == e
+ ? T(nt)
+ : (c &&
+ k.state.fatArrowAt == k.stream.start &&
+ (n = k.stream.match(/^\s*:\s*/, !1)) &&
+ (k.state.fatArrowAt = k.stream.pos + n[0].length),
+ T(it))
+ );
+ var n;
+ } else {
+ if ('number' == t || 'string' == t) return (k.marked = a ? 'property' : k.style + ' property'), T(it);
+ if ('jsonld-keyword' == t) return T(it);
+ if (c && A(e)) return (k.marked = 'keyword'), T(et);
+ if ('[' == t) return T(H, at, R(']'), it);
+ if ('spread' == t) return T(V, it);
+ if ('*' == e) return (k.marked = 'keyword'), T(et);
+ if (':' == t) return S(it);
+ }
+ }
+ function nt(t) {
+ return 'variable' != t ? S(it) : ((k.marked = 'property'), T(Ot));
+ }
+ function it(t) {
+ return ':' == t ? T(V) : '(' == t ? S(Ot) : void 0;
+ }
+ function rt(t, e, n) {
+ function i(r, o) {
+ if (n ? n.indexOf(r) > -1 : ',' == r) {
+ var s = k.state.lexical;
+ return (
+ 'call' == s.info && (s.pos = (s.pos || 0) + 1),
+ T(function (n, i) {
+ return n == e || i == e ? S() : S(t);
+ }, i)
+ );
+ }
+ return r == e || o == e ? T() : T(R(e));
+ }
+ return function (n, r) {
+ return n == e || r == e ? T() : S(t, i);
+ };
+ }
+ function ot(t, e, n) {
+ for (var i = 3; i < arguments.length; i++) k.cc.push(arguments[i]);
+ return T(I(e, n), rt(t, e), F);
+ }
+ function st(t) {
+ return '}' == t ? T() : S(j, st);
+ }
+ function at(t, e) {
+ if (c) {
+ if (':' == t) return T(ut);
+ if ('?' == e) return T(at);
+ }
+ }
+ function lt(t) {
+ if (c && ':' == t) return k.stream.match(/^\s*\w+\s+is\b/, !1) ? T(H, ct, ut) : T(ut);
+ }
+ function ct(t, e) {
+ if ('is' == e) return (k.marked = 'keyword'), T();
+ }
+ function ut(t, e) {
+ return 'keyof' == e || 'typeof' == e
+ ? ((k.marked = 'keyword'), T('keyof' == e ? ut : V))
+ : 'variable' == t || 'void' == e
+ ? ((k.marked = 'type'), T(pt))
+ : 'string' == t || 'number' == t || 'atom' == t
+ ? T(pt)
+ : '[' == t
+ ? T(I(']'), rt(ut, ']', ','), F, pt)
+ : '{' == t
+ ? T(I('}'), rt(dt, '}', ',;'), F, pt)
+ : '(' == t
+ ? T(rt(ft, ')'), ht)
+ : '<' == t
+ ? T(rt(ut, '>'), ut)
+ : void 0;
+ }
+ function ht(t) {
+ if ('=>' == t) return T(ut);
+ }
+ function dt(t, e) {
+ return 'variable' == t || 'keyword' == k.style
+ ? ((k.marked = 'property'), T(dt))
+ : '?' == e
+ ? T(dt)
+ : ':' == t
+ ? T(ut)
+ : '[' == t
+ ? T(H, at, R(']'), dt)
+ : void 0;
+ }
+ function ft(t, e) {
+ return ('variable' == t && k.stream.match(/^\s*[?:]/, !1)) || '?' == e ? T(ft) : ':' == t ? T(ut) : S(ut);
+ }
+ function pt(t, e) {
+ return '<' == e
+ ? T(I('>'), rt(ut, '>'), F, pt)
+ : '|' == e || '.' == t || '&' == e
+ ? T(ut)
+ : '[' == t
+ ? T(R(']'), pt)
+ : 'extends' == e || 'implements' == e
+ ? ((k.marked = 'keyword'), T(ut))
+ : void 0;
+ }
+ function gt(t, e) {
+ if ('<' == e) return T(I('>'), rt(ut, '>'), F, pt);
+ }
+ function vt() {
+ return S(ut, mt);
+ }
+ function mt(t, e) {
+ if ('=' == e) return T(ut);
+ }
+ function yt(t, e) {
+ return 'enum' == e ? ((k.marked = 'keyword'), T(Wt)) : S(bt, at, wt, Ct);
+ }
+ function bt(t, e) {
+ return c && A(e)
+ ? ((k.marked = 'keyword'), T(bt))
+ : 'variable' == t
+ ? (M(e), T())
+ : 'spread' == t
+ ? T(bt)
+ : '[' == t
+ ? ot(bt, ']')
+ : '{' == t
+ ? ot(xt, '}')
+ : void 0;
+ }
+ function xt(t, e) {
+ return 'variable' != t || k.stream.match(/^\s*:/, !1)
+ ? ('variable' == t && (k.marked = 'property'), 'spread' == t ? T(bt) : '}' == t ? S() : T(R(':'), bt, wt))
+ : (M(e), T(wt));
+ }
+ function wt(t, e) {
+ if ('=' == e) return T(V);
+ }
+ function Ct(t) {
+ if (',' == t) return T(yt);
+ }
+ function kt(t, e) {
+ if ('keyword b' == t && 'else' == e) return T(I('form', 'else'), j, F);
+ }
+ function St(t, e) {
+ return 'await' == e ? T(St) : '(' == t ? T(I(')'), Tt, R(')'), F) : void 0;
+ }
+ function Tt(t) {
+ return 'var' == t ? T(yt, R(';'), Mt) : ';' == t ? T(Mt) : 'variable' == t ? T(Et) : S(H, R(';'), Mt);
+ }
+ function Et(t, e) {
+ return 'in' == e || 'of' == e ? ((k.marked = 'keyword'), T(H)) : T(U, Mt);
+ }
+ function Mt(t, e) {
+ return ';' == t ? T(At) : 'in' == e || 'of' == e ? ((k.marked = 'keyword'), T(H)) : S(H, R(';'), At);
+ }
+ function At(t) {
+ ')' != t && T(H);
+ }
+ function Ot(t, e) {
+ return '*' == e
+ ? ((k.marked = 'keyword'), T(Ot))
+ : 'variable' == t
+ ? (M(e), T(Ot))
+ : '(' == t
+ ? T(L, I(')'), rt(Pt, ')'), F, lt, j, D)
+ : c && '<' == e
+ ? T(I('>'), rt(vt, '>'), F, Ot)
+ : void 0;
+ }
+ function Pt(t, e) {
+ return (
+ '@' == e && T(H, Pt), 'spread' == t ? T(Pt) : c && A(e) ? ((k.marked = 'keyword'), T(Pt)) : S(bt, at, wt)
+ );
+ }
+ function _t(t, e) {
+ return 'variable' == t ? Lt(t, e) : Nt(t, e);
+ }
+ function Lt(t, e) {
+ if ('variable' == t) return M(e), T(Nt);
+ }
+ function Nt(t, e) {
+ return '<' == e
+ ? T(I('>'), rt(vt, '>'), F, Nt)
+ : 'extends' == e || 'implements' == e || (c && ',' == t)
+ ? ('implements' == e && (k.marked = 'keyword'), T(c ? ut : H, Nt))
+ : '{' == t
+ ? T(I('}'), Dt, F)
+ : void 0;
+ }
+ function Dt(t, e) {
+ return 'async' == t ||
+ ('variable' == t &&
+ ('static' == e || 'get' == e || 'set' == e || (c && A(e))) &&
+ k.stream.match(/^\s+[\w$\xa1-\uffff]/, !1))
+ ? ((k.marked = 'keyword'), T(Dt))
+ : 'variable' == t || 'keyword' == k.style
+ ? ((k.marked = 'property'), T(c ? It : Ot, Dt))
+ : '[' == t
+ ? T(H, at, R(']'), c ? It : Ot, Dt)
+ : '*' == e
+ ? ((k.marked = 'keyword'), T(Dt))
+ : ';' == t
+ ? T(Dt)
+ : '}' == t
+ ? T()
+ : '@' == e
+ ? T(H, Dt)
+ : void 0;
+ }
+ function It(t, e) {
+ return '?' == e ? T(It) : ':' == t ? T(ut, wt) : '=' == e ? T(V) : S(Ot);
+ }
+ function Ft(t, e) {
+ return '*' == e
+ ? ((k.marked = 'keyword'), T($t, R(';')))
+ : 'default' == e
+ ? ((k.marked = 'keyword'), T(H, R(';')))
+ : '{' == t
+ ? T(rt(Rt, '}'), $t, R(';'))
+ : S(j);
+ }
+ function Rt(t, e) {
+ return 'as' == e ? ((k.marked = 'keyword'), T(R('variable'))) : 'variable' == t ? S(V, Rt) : void 0;
+ }
+ function jt(t) {
+ return 'string' == t ? T() : '(' == t ? S(H) : S(zt, Ht, $t);
+ }
+ function zt(t, e) {
+ return '{' == t ? ot(zt, '}') : ('variable' == t && M(e), '*' == e && (k.marked = 'keyword'), T(Vt));
+ }
+ function Ht(t) {
+ if (',' == t) return T(zt, Ht);
+ }
+ function Vt(t, e) {
+ if ('as' == e) return (k.marked = 'keyword'), T(zt);
+ }
+ function $t(t, e) {
+ if ('from' == e) return (k.marked = 'keyword'), T(H);
+ }
+ function Bt(t) {
+ return ']' == t ? T() : S(rt(V, ']'));
+ }
+ function Wt() {
+ return S(I('form'), bt, R('{'), I('}'), rt(Ut, '}'), F, F);
+ }
+ function Ut() {
+ return S(bt, wt);
+ }
+ function qt(t, e, n) {
+ return (
+ (e.tokenize == g &&
+ /^(?:operator|sof|keyword [bcd]|case|new|export|default|spread|[\[{}\(,;:]|=>)$/.test(e.lastType)) ||
+ ('quasi' == e.lastType && /\{\s*$/.test(t.string.slice(0, t.pos - (n || 0))))
+ );
+ }
+ return (
+ (D.lex = !0),
+ (F.lex = !0),
+ {
+ startState: function (t) {
+ var e = {
+ tokenize: g,
+ lastType: 'sof',
+ cc: [],
+ lexical: new w((t || 0) - o, 0, 'block', !1),
+ localVars: n.localVars,
+ context: n.localVars && new O(null, null, !1),
+ indented: t || 0,
+ };
+ return n.globalVars && 'object' == typeof n.globalVars && (e.globalVars = n.globalVars), e;
+ },
+ token: function (t, e) {
+ if (
+ (t.sol() &&
+ (e.lexical.hasOwnProperty('align') || (e.lexical.align = !1),
+ (e.indented = t.indentation()),
+ b(t, e)),
+ e.tokenize != v && t.eatSpace())
+ )
+ return null;
+ var n = e.tokenize(t, e);
+ return 'comment' == i
+ ? n
+ : ((e.lastType = 'operator' != i || ('++' != r && '--' != r) ? i : 'incdec'),
+ (function (t, e, n, i, r) {
+ var o = t.cc;
+ for (
+ k.state = t,
+ k.stream = r,
+ k.marked = null,
+ k.cc = o,
+ k.style = e,
+ t.lexical.hasOwnProperty('align') || (t.lexical.align = !0);
+ ;
+
+ ) {
+ var s = o.length ? o.pop() : l ? H : j;
+ if (s(n, i)) {
+ for (; o.length && o[o.length - 1].lex; ) o.pop()();
+ return k.marked ? k.marked : 'variable' == n && C(t, i) ? 'variable-2' : e;
+ }
+ }
+ })(e, n, i, r, t));
+ },
+ indent: function (e, i) {
+ if (e.tokenize == v) return t.Pass;
+ if (e.tokenize != g) return 0;
+ var r,
+ a = i && i.charAt(0),
+ l = e.lexical;
+ if (!/^\s*else\b/.test(i))
+ for (var c = e.cc.length - 1; c >= 0; --c) {
+ var u = e.cc[c];
+ if (u == F) l = l.prev;
+ else if (u != kt) break;
+ }
+ for (
+ ;
+ ('stat' == l.type || 'form' == l.type) &&
+ ('}' == a || ((r = e.cc[e.cc.length - 1]) && (r == U || r == q) && !/^[,\.=+\-*:?[\(]/.test(i)));
+
+ )
+ l = l.prev;
+ s && ')' == l.type && 'stat' == l.prev.type && (l = l.prev);
+ var h = l.type,
+ f = a == h;
+ return 'vardef' == h
+ ? l.indented + ('operator' == e.lastType || ',' == e.lastType ? l.info.length + 1 : 0)
+ : 'form' == h && '{' == a
+ ? l.indented
+ : 'form' == h
+ ? l.indented + o
+ : 'stat' == h
+ ? l.indented +
+ ((function (t, e) {
+ return (
+ 'operator' == t.lastType ||
+ ',' == t.lastType ||
+ d.test(e.charAt(0)) ||
+ /[,.]/.test(e.charAt(0))
+ );
+ })(e, i)
+ ? s || o
+ : 0)
+ : 'switch' != l.info || f || 0 == n.doubleIndentSwitch
+ ? l.align
+ ? l.column + (f ? 0 : 1)
+ : l.indented + (f ? 0 : o)
+ : l.indented + (/^(?:case|default)\b/.test(i) ? o : 2 * o);
+ },
+ electricInput: /^\s*(?:case .*?:|default:|\{|\})$/,
+ blockCommentStart: l ? null : '/*',
+ blockCommentEnd: l ? null : '*/',
+ blockCommentContinue: l ? null : ' * ',
+ lineComment: l ? null : '//',
+ fold: 'brace',
+ closeBrackets: '()[]{}\'\'""``',
+ helperType: l ? 'json' : 'javascript',
+ jsonldMode: a,
+ jsonMode: l,
+ expressionAllowed: qt,
+ skipExpression: function (t) {
+ var e = t.cc[t.cc.length - 1];
+ (e != H && e != V) || t.cc.pop();
+ },
+ }
+ );
+ }),
+ t.registerHelper('wordChars', 'javascript', /[\w$]/),
+ t.defineMIME('text/javascript', 'javascript'),
+ t.defineMIME('text/ecmascript', 'javascript'),
+ t.defineMIME('application/javascript', 'javascript'),
+ t.defineMIME('application/x-javascript', 'javascript'),
+ t.defineMIME('application/ecmascript', 'javascript'),
+ t.defineMIME('application/json', { name: 'javascript', json: !0 }),
+ t.defineMIME('application/x-json', { name: 'javascript', json: !0 }),
+ t.defineMIME('application/ld+json', { name: 'javascript', jsonld: !0 }),
+ t.defineMIME('text/typescript', { name: 'javascript', typescript: !0 }),
+ t.defineMIME('application/typescript', { name: 'javascript', typescript: !0 });
+ })(n(6));
+ },
+ function (t, e, n) {
+ !(function (t) {
+ 'use strict';
+ var e = {
+ autoSelfClosers: {
+ area: !0,
+ base: !0,
+ br: !0,
+ col: !0,
+ command: !0,
+ embed: !0,
+ frame: !0,
+ hr: !0,
+ img: !0,
+ input: !0,
+ keygen: !0,
+ link: !0,
+ meta: !0,
+ param: !0,
+ source: !0,
+ track: !0,
+ wbr: !0,
+ menuitem: !0,
+ },
+ implicitlyClosed: {
+ dd: !0,
+ li: !0,
+ optgroup: !0,
+ option: !0,
+ p: !0,
+ rp: !0,
+ rt: !0,
+ tbody: !0,
+ td: !0,
+ tfoot: !0,
+ th: !0,
+ tr: !0,
+ },
+ contextGrabbers: {
+ dd: { dd: !0, dt: !0 },
+ dt: { dd: !0, dt: !0 },
+ li: { li: !0 },
+ option: { option: !0, optgroup: !0 },
+ optgroup: { optgroup: !0 },
+ p: {
+ address: !0,
+ article: !0,
+ aside: !0,
+ blockquote: !0,
+ dir: !0,
+ div: !0,
+ dl: !0,
+ fieldset: !0,
+ footer: !0,
+ form: !0,
+ h1: !0,
+ h2: !0,
+ h3: !0,
+ h4: !0,
+ h5: !0,
+ h6: !0,
+ header: !0,
+ hgroup: !0,
+ hr: !0,
+ menu: !0,
+ nav: !0,
+ ol: !0,
+ p: !0,
+ pre: !0,
+ section: !0,
+ table: !0,
+ ul: !0,
+ },
+ rp: { rp: !0, rt: !0 },
+ rt: { rp: !0, rt: !0 },
+ tbody: { tbody: !0, tfoot: !0 },
+ td: { td: !0, th: !0 },
+ tfoot: { tbody: !0 },
+ th: { td: !0, th: !0 },
+ thead: { tbody: !0, tfoot: !0 },
+ tr: { tr: !0 },
+ },
+ doNotIndent: { pre: !0 },
+ allowUnquoted: !0,
+ allowMissing: !0,
+ caseFold: !0,
+ },
+ n = {
+ autoSelfClosers: {},
+ implicitlyClosed: {},
+ contextGrabbers: {},
+ doNotIndent: {},
+ allowUnquoted: !1,
+ allowMissing: !1,
+ allowMissingTagName: !1,
+ caseFold: !1,
+ };
+ t.defineMode('xml', function (i, r) {
+ var o,
+ s,
+ a = i.indentUnit,
+ l = {},
+ c = r.htmlMode ? e : n;
+ for (var u in c) l[u] = c[u];
+ for (var u in r) l[u] = r[u];
+ function h(t, e) {
+ function n(n) {
+ return (e.tokenize = n), n(t, e);
+ }
+ var i = t.next();
+ return '<' == i
+ ? t.eat('!')
+ ? t.eat('[')
+ ? t.match('CDATA[')
+ ? n(f('atom', ']]>'))
+ : null
+ : t.match('--')
+ ? n(f('comment', '--\x3e'))
+ : t.match('DOCTYPE', !0, !0)
+ ? (t.eatWhile(/[\w\._\-]/),
+ n(
+ (function t(e) {
+ return function (n, i) {
+ for (var r; null != (r = n.next()); ) {
+ if ('<' == r) return (i.tokenize = t(e + 1)), i.tokenize(n, i);
+ if ('>' == r) {
+ if (1 == e) {
+ i.tokenize = h;
+ break;
+ }
+ return (i.tokenize = t(e - 1)), i.tokenize(n, i);
+ }
+ }
+ return 'meta';
+ };
+ })(1),
+ ))
+ : null
+ : t.eat('?')
+ ? (t.eatWhile(/[\w\._\-]/), (e.tokenize = f('meta', '?>')), 'meta')
+ : ((o = t.eat('/') ? 'closeTag' : 'openTag'), (e.tokenize = d), 'tag bracket')
+ : '&' == i
+ ? (
+ t.eat('#')
+ ? t.eat('x')
+ ? t.eatWhile(/[a-fA-F\d]/) && t.eat(';')
+ : t.eatWhile(/[\d]/) && t.eat(';')
+ : t.eatWhile(/[\w\.\-:]/) && t.eat(';')
+ )
+ ? 'atom'
+ : 'error'
+ : (t.eatWhile(/[^&<]/), null);
+ }
+ function d(t, e) {
+ var n = t.next();
+ if ('>' == n || ('/' == n && t.eat('>')))
+ return (e.tokenize = h), (o = '>' == n ? 'endTag' : 'selfcloseTag'), 'tag bracket';
+ if ('=' == n) return (o = 'equals'), null;
+ if ('<' == n) {
+ (e.tokenize = h), (e.state = v), (e.tagName = e.tagStart = null);
+ var i = e.tokenize(t, e);
+ return i ? i + ' tag error' : 'tag error';
+ }
+ return /[\'\"]/.test(n)
+ ? ((e.tokenize = (function (t) {
+ var e = function (e, n) {
+ for (; !e.eol(); )
+ if (e.next() == t) {
+ n.tokenize = d;
+ break;
+ }
+ return 'string';
+ };
+ return (e.isInAttribute = !0), e;
+ })(n)),
+ (e.stringStartCol = t.column()),
+ e.tokenize(t, e))
+ : (t.match(/^[^\s\u00a0=<>\"\']*[^\s\u00a0=<>\"\'\/]/), 'word');
+ }
+ function f(t, e) {
+ return function (n, i) {
+ for (; !n.eol(); ) {
+ if (n.match(e)) {
+ i.tokenize = h;
+ break;
+ }
+ n.next();
+ }
+ return t;
+ };
+ }
+ function p(t) {
+ t.context && (t.context = t.context.prev);
+ }
+ function g(t, e) {
+ for (var n; ; ) {
+ if (!t.context) return;
+ if (
+ ((n = t.context.tagName),
+ !l.contextGrabbers.hasOwnProperty(n) || !l.contextGrabbers[n].hasOwnProperty(e))
+ )
+ return;
+ p(t);
+ }
+ }
+ function v(t, e, n) {
+ return 'openTag' == t ? ((n.tagStart = e.column()), m) : 'closeTag' == t ? y : v;
+ }
+ function m(t, e, n) {
+ return 'word' == t
+ ? ((n.tagName = e.current()), (s = 'tag'), w)
+ : l.allowMissingTagName && 'endTag' == t
+ ? ((s = 'tag bracket'), w(t, 0, n))
+ : ((s = 'error'), m);
+ }
+ function y(t, e, n) {
+ if ('word' == t) {
+ var i = e.current();
+ return (
+ n.context && n.context.tagName != i && l.implicitlyClosed.hasOwnProperty(n.context.tagName) && p(n),
+ (n.context && n.context.tagName == i) || !1 === l.matchClosing
+ ? ((s = 'tag'), b)
+ : ((s = 'tag error'), x)
+ );
+ }
+ return l.allowMissingTagName && 'endTag' == t ? ((s = 'tag bracket'), b(t, 0, n)) : ((s = 'error'), x);
+ }
+ function b(t, e, n) {
+ return 'endTag' != t ? ((s = 'error'), b) : (p(n), v);
+ }
+ function x(t, e, n) {
+ return (s = 'error'), b(t, 0, n);
+ }
+ function w(t, e, n) {
+ if ('word' == t) return (s = 'attribute'), C;
+ if ('endTag' == t || 'selfcloseTag' == t) {
+ var i = n.tagName,
+ r = n.tagStart;
+ return (
+ (n.tagName = n.tagStart = null),
+ 'selfcloseTag' == t || l.autoSelfClosers.hasOwnProperty(i)
+ ? g(n, i)
+ : (g(n, i),
+ (n.context = new (function (t, e, n) {
+ (this.prev = t.context),
+ (this.tagName = e),
+ (this.indent = t.indented),
+ (this.startOfLine = n),
+ (l.doNotIndent.hasOwnProperty(e) || (t.context && t.context.noIndent)) && (this.noIndent = !0);
+ })(n, i, r == n.indented))),
+ v
+ );
+ }
+ return (s = 'error'), w;
+ }
+ function C(t, e, n) {
+ return 'equals' == t ? k : (l.allowMissing || (s = 'error'), w(t, 0, n));
+ }
+ function k(t, e, n) {
+ return 'string' == t
+ ? S
+ : 'word' == t && l.allowUnquoted
+ ? ((s = 'string'), w)
+ : ((s = 'error'), w(t, 0, n));
+ }
+ function S(t, e, n) {
+ return 'string' == t ? S : w(t, 0, n);
+ }
+ return (
+ (h.isInText = !0),
+ {
+ startState: function (t) {
+ var e = { tokenize: h, state: v, indented: t || 0, tagName: null, tagStart: null, context: null };
+ return null != t && (e.baseIndent = t), e;
+ },
+ token: function (t, e) {
+ if ((!e.tagName && t.sol() && (e.indented = t.indentation()), t.eatSpace())) return null;
+ o = null;
+ var n = e.tokenize(t, e);
+ return (
+ (n || o) &&
+ 'comment' != n &&
+ ((s = null), (e.state = e.state(o || n, t, e)), s && (n = 'error' == s ? n + ' error' : s)),
+ n
+ );
+ },
+ indent: function (e, n, i) {
+ var r = e.context;
+ if (e.tokenize.isInAttribute) return e.tagStart == e.indented ? e.stringStartCol + 1 : e.indented + a;
+ if (r && r.noIndent) return t.Pass;
+ if (e.tokenize != d && e.tokenize != h) return i ? i.match(/^(\s*)/)[0].length : 0;
+ if (e.tagName)
+ return !1 !== l.multilineTagIndentPastTag
+ ? e.tagStart + e.tagName.length + 2
+ : e.tagStart + a * (l.multilineTagIndentFactor || 1);
+ if (l.alignCDATA && /$/,
+ blockCommentStart: '\x3c!--',
+ blockCommentEnd: '--\x3e',
+ configuration: l.htmlMode ? 'html' : 'xml',
+ helperType: l.htmlMode ? 'html' : 'xml',
+ skipAttribute: function (t) {
+ t.state == k && (t.state = w);
+ },
+ }
+ );
+ }),
+ t.defineMIME('text/xml', 'xml'),
+ t.defineMIME('application/xml', 'xml'),
+ t.mimeModes.hasOwnProperty('text/html') || t.defineMIME('text/html', { name: 'xml', htmlMode: !0 });
+ })(n(6));
+ },
+ function (t, e, n) {
+ !(function (t) {
+ 'use strict';
+ var e = {
+ script: [
+ ['lang', /(javascript|babel)/i, 'javascript'],
+ ['type', /^(?:text|application)\/(?:x-)?(?:java|ecma)script$|^module$|^$/i, 'javascript'],
+ ['type', /./, 'text/plain'],
+ [null, null, 'javascript'],
+ ],
+ style: [
+ ['lang', /^css$/i, 'css'],
+ ['type', /^(text\/)?(x-)?(stylesheet|css)$/i, 'css'],
+ ['type', /./, 'text/plain'],
+ [null, null, 'css'],
+ ],
+ },
+ n = {};
+ function i(t, e) {
+ var i = t.match(
+ (function (t) {
+ var e = n[t];
+ return e || (n[t] = new RegExp('\\s+' + t + '\\s*=\\s*(\'|")?([^\'"]+)(\'|")?\\s*'));
+ })(e),
+ );
+ return i ? /^\s*(.*?)\s*$/.exec(i[2])[1] : '';
+ }
+ function r(t, e) {
+ return new RegExp((e ? '^' : '') + '', 'i');
+ }
+ function o(t, e) {
+ for (var n in t) for (var i = e[n] || (e[n] = []), r = t[n], o = r.length - 1; o >= 0; o--) i.unshift(r[o]);
+ }
+ t.defineMode(
+ 'htmlmixed',
+ function (n, s) {
+ var a = t.getMode(n, {
+ name: 'xml',
+ htmlMode: !0,
+ multilineTagIndentFactor: s.multilineTagIndentFactor,
+ multilineTagIndentPastTag: s.multilineTagIndentPastTag,
+ }),
+ l = {},
+ c = s && s.tags,
+ u = s && s.scriptTypes;
+ if ((o(e, l), c && o(c, l), u))
+ for (var h = u.length - 1; h >= 0; h--) l.script.unshift(['type', u[h].matches, u[h].mode]);
+ function d(e, o) {
+ var s,
+ c = a.token(e, o.htmlState),
+ u = /\btag\b/.test(c);
+ if (
+ u &&
+ !/[<>\s\/]/.test(e.current()) &&
+ (s = o.htmlState.tagName && o.htmlState.tagName.toLowerCase()) &&
+ l.hasOwnProperty(s)
+ )
+ o.inTag = s + ' ';
+ else if (o.inTag && u && />$/.test(e.current())) {
+ var h = /^([\S]+) (.*)/.exec(o.inTag);
+ o.inTag = null;
+ var f =
+ '>' == e.current() &&
+ (function (t, e) {
+ for (var n = 0; n < t.length; n++) {
+ var r = t[n];
+ if (!r[0] || r[1].test(i(e, r[0]))) return r[2];
+ }
+ })(l[h[1]], h[2]),
+ p = t.getMode(n, f),
+ g = r(h[1], !0),
+ v = r(h[1], !1);
+ (o.token = function (t, e) {
+ return t.match(g, !1)
+ ? ((e.token = d), (e.localState = e.localMode = null), null)
+ : (function (t, e, n) {
+ var i = t.current(),
+ r = i.search(e);
+ return (
+ r > -1
+ ? t.backUp(i.length - r)
+ : i.match(/<\/?$/) && (t.backUp(i.length), t.match(e, !1) || t.match(i)),
+ n
+ );
+ })(t, v, e.localMode.token(t, e.localState));
+ }),
+ (o.localMode = p),
+ (o.localState = t.startState(p, a.indent(o.htmlState, '')));
+ } else o.inTag && ((o.inTag += e.current()), e.eol() && (o.inTag += ' '));
+ return c;
+ }
+ return {
+ startState: function () {
+ var e = t.startState(a);
+ return { token: d, inTag: null, localMode: null, localState: null, htmlState: e };
+ },
+ copyState: function (e) {
+ var n;
+ return (
+ e.localState && (n = t.copyState(e.localMode, e.localState)),
+ {
+ token: e.token,
+ inTag: e.inTag,
+ localMode: e.localMode,
+ localState: n,
+ htmlState: t.copyState(a, e.htmlState),
+ }
+ );
+ },
+ token: function (t, e) {
+ return e.token(t, e);
+ },
+ indent: function (e, n, i) {
+ return !e.localMode || /^\s*<\//.test(n)
+ ? a.indent(e.htmlState, n)
+ : e.localMode.indent
+ ? e.localMode.indent(e.localState, n, i)
+ : t.Pass;
+ },
+ innerMode: function (t) {
+ return { state: t.localState || t.htmlState, mode: t.localMode || a };
+ },
+ };
+ },
+ 'xml',
+ 'javascript',
+ 'css',
+ ),
+ t.defineMIME('text/html', 'htmlmixed');
+ })(n(6), n(189), n(188), n(81));
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i =
+ Object.assign ||
+ function (t) {
+ for (var e = 1; e < arguments.length; e++) {
+ var n = arguments[e];
+ for (var i in n) Object.prototype.hasOwnProperty.call(n, i) && (t[i] = n[i]);
+ }
+ return t;
+ },
+ r = (function (t) {
+ return t && t.__esModule ? t : { default: t };
+ })(n(0));
+ var o = n(6);
+ n(190), n(81), n(187);
+ t.exports = r.default.Model.extend({
+ defaults: { input: '', label: '', codeName: '', theme: '', readOnly: !0, lineNumbers: !0 },
+ init: function (t) {
+ return (
+ (this.editor = o.fromTextArea(
+ t,
+ i({ dragDrop: !1, lineWrapping: !0, mode: this.get('codeName') }, this.attributes),
+ )),
+ this
+ );
+ },
+ setContent: function (t) {
+ this.editor &&
+ (this.editor.setValue(t),
+ this.editor.autoFormatRange &&
+ (o.commands.selectAll(this.editor),
+ this.editor.autoFormatRange(this.editor.getCursor(!0), this.editor.getCursor(!1)),
+ o.commands.goDocStart(this.editor)));
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = n(1),
+ r = (function (t) {
+ return t && t.__esModule ? t : { default: t };
+ })(n(0));
+ t.exports = r.default.Model.extend({
+ mapModel: function (t) {
+ var e = '',
+ n = t.get('script'),
+ r = t.get('type'),
+ o = t.get('components'),
+ s = t.getId();
+ if (n) {
+ var a = t.get('attributes');
+ (a = (0, i.extend)({}, a, { id: s })), t.set('attributes', a);
+ var l = t.getScriptString();
+ if (t.get('scriptUpdated')) this.mapJs[r + '-' + s] = { ids: [s], code: l };
+ else {
+ var c = this.mapJs[r];
+ c ? c.ids.push(s) : (this.mapJs[r] = { ids: [s], code: l });
+ }
+ }
+ return (
+ o.each(function (t) {
+ e += this.mapModel(t);
+ }, this),
+ e
+ );
+ },
+ build: function (t) {
+ (this.mapJs = {}), this.mapModel(t);
+ var e = '';
+ for (var n in this.mapJs) {
+ var i = this.mapJs[n];
+ e +=
+ "\n var items = document.querySelectorAll('" +
+ ('#' + i.ids.join(', #')) +
+ "');\n for (var i = 0, len = items.length; i < len; i++) {\n (function(){" +
+ i.code +
+ '}.bind(items[i]))();\n }';
+ }
+ return e;
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = n(1),
+ r = (function (t) {
+ return t && t.__esModule ? t : { default: t };
+ })(n(0));
+ t.exports = r.default.Model.extend({
+ build: function (t) {
+ var e = t.toJSON();
+ return (
+ this.beforeEach(e),
+ (0, i.each)(
+ e,
+ function (t, n) {
+ var i = e[n];
+ if (i instanceof r.default.Model) e[n] = this.build(i);
+ else if (i instanceof r.default.Collection) {
+ var o = i;
+ (e[n] = []),
+ o.length &&
+ o.each(function (t, i) {
+ e[n][i] = this.build(t);
+ }, this);
+ }
+ },
+ this,
+ ),
+ e
+ );
+ },
+ beforeEach: function (t) {
+ delete t.status;
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = n(1);
+ t.exports = n(0).Model.extend({
+ initialize: function () {
+ (this.compCls = []), (this.ids = []);
+ },
+ buildFromModel: function (t) {
+ var e = this,
+ n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
+ i = '',
+ r = this.em,
+ o = r && r.getConfig('avoidInlineStyle'),
+ s = t.styleToString(),
+ a = t.get('classes'),
+ l = n.wrappesIsBody,
+ c = t.get('wrapper');
+ if (
+ (this.ids.push('#' + t.getId()),
+ a.each(function (t) {
+ return e.compCls.push(t.getFullName());
+ }),
+ (!o || c) && s)
+ ) {
+ var u = '#' + t.getId();
+ i = (u = l && c ? 'body' : u) + '{' + s + '}';
+ }
+ return (
+ t.components().each(function (t) {
+ return (i += e.buildFromModel(t, n));
+ }),
+ i
+ );
+ },
+ build: function (t) {
+ var e = this,
+ n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
+ r = n.cssc,
+ o = n.em || '';
+ (this.em = o), (this.compCls = []), (this.ids = []);
+ var s = this.buildFromModel(t, n),
+ a = (0, i.isUndefined)(n.clearStyles) && o ? o.getConfig('clearStyles') : n.clearStyles;
+ return (
+ r &&
+ (function () {
+ var t = r.getAll(),
+ i = {},
+ l = [];
+ for (var c in (t.each(function (t) {
+ var r = t.getAtRule();
+ if (r) {
+ var o = i[r];
+ o ? o.push(t) : (i[r] = [t]);
+ } else s += e.buildFromRule(t, l, n);
+ }),
+ i)) {
+ var u = '';
+ i[c].forEach(function (t) {
+ return (u += e.buildFromRule(t, l, n));
+ }),
+ u && (s += c + '{' + u + '}');
+ }
+ o && a && t.remove(l);
+ })(),
+ s
+ );
+ },
+ buildFromRule: function (t, e) {
+ var n = this,
+ i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : {},
+ r = '',
+ o = t.selectorsToString({ skipAdd: 1 }),
+ s = t.get('selectorsAdd'),
+ a = t.get('singleAtRule'),
+ l = void 0;
+ if (
+ (t.get('selectors').each(function (t) {
+ var e = t.getFullName();
+ (n.compCls.indexOf(e) >= 0 || n.ids.indexOf(e) >= 0 || i.keepUnusedStyles) && (l = 1);
+ }),
+ (o && l) || s || a)
+ ) {
+ var c = t.getDeclaration();
+ c && (r += c);
+ } else e.push(t);
+ return r;
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = (function (t) {
+ return t && t.__esModule ? t : { default: t };
+ })(n(0));
+ t.exports = i.default.Model.extend({
+ build: function (t) {
+ var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
+ n = t.get('components');
+ return e.exportWrapper
+ ? e.wrappesIsBody
+ ? '' + this.buildModels(n) + ''
+ : t.toHTML()
+ : this.buildModels(n);
+ },
+ buildModels: function (t) {
+ var e = '';
+ return (
+ t.each(function (t) {
+ e += t.toHTML();
+ }),
+ e
+ );
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ t.exports = { stylePrefix: 'cm-', inlineCss: !1 };
+ },
+ function (t, e, n) {
+ 'use strict';
+ t.exports = function () {
+ var t = {},
+ e = n(196),
+ i = n(195),
+ r = n(194),
+ o = n(193),
+ s = n(192),
+ a = n(191),
+ l = n(186),
+ c = {},
+ u = {},
+ h = {},
+ d = {};
+ return {
+ getConfig: function () {
+ return t;
+ },
+ config: t,
+ EditorView: l,
+ name: 'CodeManager',
+ init: function (n) {
+ for (var l in ((t = n || {}), e)) l in t || (t[l] = e[l]);
+ var c = t.pStylePrefix;
+ return (
+ c && (t.stylePrefix = c + t.stylePrefix),
+ (u.html = new i()),
+ (u.css = new r()),
+ (u.json = new o()),
+ (u.js = new s()),
+ (d.CodeMirror = new a()),
+ this.loadDefaultGenerators().loadDefaultViewers(),
+ this
+ );
+ },
+ addGenerator: function (t, e) {
+ return (c[t] = e), this;
+ },
+ getGenerator: function (t) {
+ return c[t] || null;
+ },
+ getGenerators: function () {
+ return c;
+ },
+ addViewer: function (t, e) {
+ return (h[t] = e), this;
+ },
+ getViewer: function (t) {
+ return h[t] || null;
+ },
+ getViewers: function () {
+ return h;
+ },
+ updateViewer: function (t, e) {
+ t.setContent(e);
+ },
+ getCode: function (e, n) {
+ var i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : {};
+ i.em = t.em;
+ var r = this.getGenerator(n);
+ return r ? r.build(e, i) : '';
+ },
+ loadDefaultGenerators: function () {
+ for (var t in u) this.addGenerator(t, u[t]);
+ return this;
+ },
+ loadDefaultViewers: function () {
+ for (var t in d) this.addViewer(t, d[t]);
+ return this;
+ },
+ };
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ t.exports = n(0).View.extend({
+ template: function (t) {
+ var e = t.pfx,
+ n = t.ppfx,
+ i = t.content;
+ return (
+ '
\n
\n
' +
+ t.title +
+ '
\n
⨯
\n
\n
\n
' +
+ i +
+ '
\n \n
\n
\n \n '
+ );
+ },
+ events: {},
+ initialize: function (t) {
+ var e = this.model,
+ n = t.config || {},
+ i = n.stylePrefix || '',
+ r = n.backdrop;
+ (this.config = n),
+ (this.pfx = i),
+ (this.ppfx = n.pStylePrefix || ''),
+ this.listenTo(e, 'change:open', this.updateOpen),
+ this.listenTo(e, 'change:title', this.updateTitle),
+ this.listenTo(e, 'change:content', this.updateContent),
+ (this.events['click .' + i + 'btn-close'] = 'hide'),
+ r && (this.events['click .' + i + 'backlayer'] = 'hide'),
+ this.delegateEvents();
+ },
+ getCollector: function () {
+ return this.$collector || (this.$collector = this.$el.find('.' + this.pfx + 'collector')), this.$collector;
+ },
+ getContent: function () {
+ var t = this.pfx;
+ return this.$content || (this.$content = this.$el.find('.' + t + 'content #' + t + 'c')), this.$content;
+ },
+ getTitle: function () {
+ return this.$title || (this.$title = this.$el.find('.' + this.pfx + 'title')), this.$title.get(0);
+ },
+ updateContent: function () {
+ var t = this.getContent(),
+ e = t.children(),
+ n = this.getCollector(),
+ i = this.model.get('content');
+ e.length && n.append(e), t.empty().append(i);
+ },
+ updateTitle: function () {
+ var t = this.getTitle();
+ t && (t.innerHTML = this.model.get('title'));
+ },
+ updateOpen: function () {
+ this.el.style.display = this.model.get('open') ? '' : 'none';
+ },
+ hide: function () {
+ this.model.set('open', 0);
+ },
+ show: function () {
+ this.model.set('open', 1);
+ },
+ render: function () {
+ var t = this.$el,
+ e = this.pfx,
+ n = (this.ppfx, this.model.toJSON());
+ return (
+ (n.pfx = this.pfx),
+ (n.ppfx = this.ppfx),
+ t.html(this.template(n)),
+ t.attr('class', e + 'container'),
+ this.updateOpen(),
+ this
+ );
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = n(0);
+ t.exports = i.Model.extend({ defaults: { title: '', content: '', open: !1 } });
+ },
+ function (t, e, n) {
+ 'use strict';
+ t.exports = { stylePrefix: 'mdl-', title: '', content: '', backdrop: !0 };
+ },
+ function (t, e, n) {
+ 'use strict';
+ t.exports = function () {
+ var t,
+ e,
+ i = {},
+ r = n(200),
+ o = n(199),
+ s = n(198);
+ return {
+ name: 'Modal',
+ init: function (n) {
+ for (var a in ((i = n || {}), r)) a in i || (i[a] = r[a]);
+ var l = i.pStylePrefix;
+ return l && (i.stylePrefix = l + i.stylePrefix), (t = new o(i)), (e = new s({ model: t, config: i })), this;
+ },
+ postRender: function (t) {
+ var e = t.model.getConfig().el || t.el;
+ this.render().appendTo(e);
+ },
+ open: function () {
+ return e.show(), this;
+ },
+ close: function () {
+ return e.hide(), this;
+ },
+ isOpen: function () {
+ return !!t.get('open');
+ },
+ setTitle: function (e) {
+ return t.set('title', e), this;
+ },
+ getTitle: function () {
+ return t.get('title');
+ },
+ setContent: function (e) {
+ return t.set('content', ' '), t.set('content', e), this;
+ },
+ getContent: function () {
+ return t.get('content');
+ },
+ getContentEl: function () {
+ return e.getContent().get(0);
+ },
+ getModel: function () {
+ return t;
+ },
+ render: function () {
+ return e.render().$el;
+ },
+ };
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = n(10);
+ t.exports = n(0).View.extend({
+ template: function () {
+ var t = this.pfx;
+ this.ppfx;
+ return (
+ '\n \n ' +
+ (this.model.get('label') || '') +
+ '\n \n ⨯\n \n '
+ );
+ },
+ events: {
+ 'click [data-tag-remove]': 'removeTag',
+ 'click [data-tag-status]': 'changeStatus',
+ 'dblclick [data-tag-name]': 'startEditTag',
+ 'focusout [data-tag-name]': 'endEditTag',
+ },
+ initialize: function (t) {
+ (this.config = t.config || {}),
+ (this.coll = t.coll || null),
+ (this.pfx = this.config.stylePrefix || ''),
+ (this.ppfx = this.config.pStylePrefix || ''),
+ (this.target = this.config.em),
+ this.listenTo(this.model, 'change:active', this.updateStatus);
+ },
+ getInputEl: function () {
+ return this.inputEl || (this.inputEl = this.el.querySelector('[data-tag-name]')), this.inputEl;
+ },
+ startEditTag: function () {
+ var t = this.getInputEl();
+ (t.contentEditable = !0), t.focus();
+ },
+ endEditTag: function () {
+ var t = this.model,
+ e = this.getInputEl(),
+ n = e.textContent,
+ r = i.escapeName(n),
+ o = this.target,
+ s = o && o.get('SelectorManager');
+ (e.contentEditable = !1), s && (s.get(r) ? (e.innerText = t.get('label')) : t.set({ name: r, label: n }));
+ },
+ changeStatus: function () {
+ this.model.set('active', !this.model.get('active'));
+ },
+ removeTag: function (t) {
+ var e = this,
+ n = this.target,
+ i = this.model,
+ r = this.coll,
+ o = (this.el, n && n.getSelected());
+ o && (o.get, o.get('classes').remove(i)),
+ r && r.remove(i),
+ setTimeout(function () {
+ return e.remove();
+ }, 0);
+ },
+ updateStatus: function () {
+ var t = 'fa-check-square-o';
+ this.$chk || (this.$chk = this.$el.find('#' + this.pfx + 'checkbox')),
+ this.model.get('active')
+ ? (this.$chk.removeClass('fa-square-o').addClass(t), this.$el.removeClass('opac50'))
+ : (this.$chk.removeClass(t).addClass('fa-square-o'), this.$el.addClass('opac50'));
+ },
+ render: function () {
+ var t = this.pfx,
+ e = this.ppfx;
+ return (
+ this.$el.html(this.template()),
+ this.$el.attr('class', t + 'tag ' + e + 'three-bg'),
+ this.updateStatus(),
+ this
+ );
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = o(n(1)),
+ r = o(n(0));
+ function o(t) {
+ return t && t.__esModule ? t : { default: t };
+ }
+ var s = n(202);
+ t.exports = r.default.View.extend({
+ template: i.default.template(
+ '\n
\n
<%= label %>
\n
\n \n
\n \n \n \n
\n \n
\n
\n \n
\n
\n
\n \n \n \n
\n
\n
<%= selectedLabel %>
\n \n \n
',
+ ),
+ events: {},
+ initialize: function () {
+ var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
+ (this.config = t.config || {}),
+ (this.pfx = this.config.stylePrefix || ''),
+ (this.ppfx = this.config.pStylePrefix || ''),
+ (this.className = this.pfx + 'tags'),
+ (this.addBtnId = this.pfx + 'add-tag'),
+ (this.newInputId = this.pfx + 'new'),
+ (this.stateInputId = this.pfx + 'states'),
+ (this.stateInputC = this.pfx + 'input-c'),
+ (this.states = this.config.states || []),
+ (this.events['click #' + this.addBtnId] = 'startNewTag'),
+ (this.events['blur #' + this.newInputId] = 'endNewTag'),
+ (this.events['keyup #' + this.newInputId] = 'onInputKeyUp'),
+ (this.events['change #' + this.stateInputId] = 'stateChanged'),
+ (this.target = this.config.em),
+ (this.em = this.target),
+ this.listenTo(this.target, 'component:toggled', this.componentChanged),
+ this.listenTo(this.target, 'component:update:classes', this.updateSelector),
+ this.listenTo(this.collection, 'add', this.addNew),
+ this.listenTo(this.collection, 'reset', this.renderClasses),
+ this.listenTo(this.collection, 'remove', this.tagRemoved),
+ this.delegateEvents();
+ },
+ tagRemoved: function (t) {
+ this.updateStateVis();
+ },
+ getStateOptions: function () {
+ for (var t = '', e = 0; e < this.states.length; e++)
+ t += '';
+ return t;
+ },
+ addNew: function (t) {
+ this.addToClasses(t);
+ },
+ startNewTag: function (t) {
+ (this.$addBtn.get(0).style.display = 'none'), this.$input.show().focus();
+ },
+ endNewTag: function (t) {
+ (this.$addBtn.get(0).style.display = ''), this.$input.hide().val('');
+ },
+ onInputKeyUp: function (t) {
+ 13 === t.keyCode ? this.addNewTag(this.$input.val()) : 27 === t.keyCode && this.endNewTag();
+ },
+ componentChanged: function (t) {
+ this.compTarget = this.target.getSelected();
+ var e = this.compTarget,
+ n = [];
+ e && (this.getStates().val(e.get('state')), (n = e.get('classes').getValid())),
+ this.collection.reset(n),
+ this.updateStateVis();
+ },
+ updateStateVis: function () {
+ var t = this.em,
+ e = t && t.getConfig('avoidInlineStyle');
+ this.collection.length || e
+ ? this.getStatesC().css('display', 'block')
+ : this.getStatesC().css('display', 'none'),
+ this.updateSelector();
+ },
+ updateSelector: function () {
+ var t = this.target.getSelected();
+ if (((this.compTarget = t), t && t.get)) {
+ var e = t.get('state'),
+ n = this.collection,
+ i = n.getFullString(n.getStyleable());
+ (i = i || '#' + t.getId()), (i += e ? ':' + e : '');
+ var r = this.el.querySelector('#' + this.pfx + 'sel');
+ r && (r.innerHTML = i);
+ }
+ },
+ stateChanged: function (t) {
+ this.compTarget && (this.compTarget.set('state', this.$states.val()), this.updateSelector());
+ },
+ addNewTag: function (t) {
+ var e = this.target,
+ n = this.compTarget;
+ if (t.trim()) {
+ if (e) {
+ var i = e.get('SelectorManager').add({ label: t });
+ if (n) {
+ var r = n.get('classes');
+ r.length;
+ r.add(i);
+ r.length;
+ this.collection.add(i), this.updateStateVis();
+ }
+ }
+ this.endNewTag();
+ }
+ },
+ addToClasses: function (t, e) {
+ var n = e || null,
+ i = new s({ model: t, config: this.config, coll: this.collection }).render().el;
+ return n ? n.appendChild(i) : this.getClasses().append(i), i;
+ },
+ renderClasses: function () {
+ var t = document.createDocumentFragment();
+ return (
+ this.collection.each(function (e) {
+ this.addToClasses(e, t);
+ }, this),
+ this.getClasses() && this.getClasses().empty().append(t),
+ this
+ );
+ },
+ getClasses: function () {
+ return this.$classes || (this.$classes = this.$el.find('#' + this.pfx + 'tags-c')), this.$classes;
+ },
+ getStates: function () {
+ return this.$states || (this.$states = this.$el.find('#' + this.stateInputId)), this.$states;
+ },
+ getStatesC: function () {
+ return this.$statesC || (this.$statesC = this.$el.find('#' + this.stateInputC)), this.$statesC;
+ },
+ render: function () {
+ var t = this.ppfx,
+ e = this.config,
+ n = this.$el;
+ return (
+ n.html(
+ this.template({
+ selectedLabel: e.selectedLabel,
+ statesLabel: e.statesLabel,
+ label: e.label,
+ pfx: this.pfx,
+ ppfx: this.ppfx,
+ }),
+ ),
+ (this.$input = n.find('input#' + this.newInputId)),
+ (this.$addBtn = n.find('#' + this.addBtnId)),
+ (this.$classes = n.find('#' + this.pfx + 'tags-c')),
+ (this.$states = n.find('#' + this.stateInputId)),
+ (this.$statesC = n.find('#' + this.stateInputC)),
+ this.$states.append(this.getStateOptions()),
+ this.renderClasses(),
+ n.attr('class', this.className + ' ' + t + 'one-bg ' + t + 'two-color'),
+ this
+ );
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ t.exports = {
+ stylePrefix: 'clm-',
+ appendTo: '',
+ selectors: [],
+ label: 'Classes',
+ statesLabel: '- State -',
+ selectedLabel: 'Selected',
+ states: [
+ { name: 'hover', label: 'Hover' },
+ { name: 'active', label: 'Click' },
+ { name: 'nth-of-type(2n)', label: 'Even/Odd' },
+ ],
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = n(1);
+ function r(t, e, n) {
+ return (
+ e in t
+ ? Object.defineProperty(t, e, { value: n, enumerable: !0, configurable: !0, writable: !0 })
+ : (t[e] = n),
+ t
+ );
+ }
+ var o = function (t) {
+ return (0, i.isString)(t) && '#' == t[0];
+ };
+ t.exports = function (t) {
+ var e,
+ s,
+ a,
+ l = t || {},
+ c = n(204),
+ u = n(10),
+ h = n(19),
+ d = n(203);
+ return (
+ r(
+ (e = {
+ Selector: u,
+ Selectors: h,
+ name: 'SelectorManager',
+ getConfig: function () {
+ return l;
+ },
+ }),
+ 'getConfig',
+ function () {
+ return l;
+ },
+ ),
+ r(e, 'init', function (t) {
+ for (var e in ((l = t || {}), c)) e in l || (l[e] = c[e]);
+ var n = l.em,
+ i = l.pStylePrefix;
+ return (
+ i && (l.stylePrefix = i + l.stylePrefix),
+ (a = new d({ collection: new h([], { em: n, config: l }), config: l })),
+ (s = new h(l.selectors)).on('add', function (t) {
+ return n.trigger('selector:add', t);
+ }),
+ this
+ );
+ }),
+ r(e, 'postRender', function () {
+ var t = this.getConfig().appendTo;
+ t && ((0, i.isElement)(t) ? t : document.querySelector(t)).appendChild(this.render([]));
+ }),
+ r(e, 'add', function (t) {
+ var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {};
+ (0, i.isObject)(t) ? (e = t) : (e.name = t),
+ o(e.name) && ((e.name = e.name.substr(1)), (e.type = u.TYPE_ID)),
+ e.label && !e.name && (e.name = u.escapeName(e.label));
+ var n = e.name,
+ r = n ? this.get(n, e.type) : s.where(e)[0];
+ return r || s.add(e);
+ }),
+ r(e, 'addClass', function (t) {
+ var e = [];
+ return (
+ (0, i.isString)(t) && (t = t.trim().split(' ')),
+ t.forEach(function (t) {
+ return e.push(s.add({ name: t }));
+ }),
+ e
+ );
+ }),
+ r(e, 'get', function (t) {
+ var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : u.TYPE_CLASS;
+ return o(t) && ((t = t.substr(1)), (e = u.TYPE_ID)), s.where({ name: t, type: e })[0];
+ }),
+ r(e, 'getAll', function () {
+ return s;
+ }),
+ r(e, 'render', function (t) {
+ return t ? new d({ collection: new h(t), config: l }).render().el : a.render().el;
+ }),
+ e
+ );
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = {
+ 4: 'media',
+ 5: 'font-face',
+ 6: 'page',
+ 7: 'keyframes',
+ 11: 'counter-style',
+ 12: 'supports',
+ 13: 'document',
+ 14: 'font-feature-values',
+ 15: 'viewport',
+ },
+ r = (0, n(1).keys)(i),
+ o = ['5', '6', '11', '15'];
+ t.exports = function (t) {
+ return {
+ parseSelector: function () {
+ for (
+ var t = [],
+ e = [],
+ n = (arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : '').split(','),
+ i = 0,
+ r = n.length;
+ i < r;
+ i++
+ ) {
+ var o = n[i].trim();
+ if (/^(\.{1}[\w\-]+)+(:{1,2}[\w\-()]+)?$/gi.test(o) || /^(#{1}[\w\-]+){1}(:{1,2}[\w\-()]+)?$/gi.test(o)) {
+ var s = o.split('.').filter(Boolean);
+ e.push(s);
+ } else t.push(o);
+ }
+ return { result: e, add: t };
+ },
+ parseStyle: function (t) {
+ for (var e = t.style, n = {}, i = 0, r = e.length; i < r; i++) {
+ var o = e[i],
+ s = e.getPropertyValue(o),
+ a = e.getPropertyPriority(o);
+ n[o] = s + (a ? ' !' + a : '');
+ }
+ return n;
+ },
+ parseCondition: function (t) {
+ return (t.conditionText || (t.media && t.media.mediaText) || t.name || t.selectorText || '').trim();
+ },
+ parseNode: function (t) {
+ for (var e = [], n = t.cssRules || [], s = 0, a = n.length; s < a; s++) {
+ var l = n[s],
+ c = l.type.toString(),
+ u = 0,
+ h = '',
+ d = '',
+ f = l.selectorText || l.keyText,
+ p = o.indexOf(c) >= 0;
+ if (p) (u = 1), (h = i[c]), (d = this.parseCondition(l));
+ else if (r.indexOf(c) >= 0) {
+ var g = this.parseNode(l);
+ d = this.parseCondition(l);
+ for (var v = 0, m = g.length; v < m; v++) {
+ var y = g[v];
+ d && (y.mediaText = d), (y.atRuleType = i[c]);
+ }
+ e = e.concat(g);
+ }
+ if (f || p) {
+ for (
+ var b = this.parseStyle(l),
+ x = this.parseSelector(f),
+ w = x.add,
+ C = void 0,
+ k = 0,
+ S = (f = x.result).length;
+ k < S;
+ k++
+ ) {
+ var T = f[k],
+ E = {};
+ u && (E.singleAtRule = u), h && (E.atRuleType = h);
+ var M = T[T.length - 1].split(/:(.+)/);
+ M[1] && ((T[T.length - 1] = M[0]), (E.state = M[1]), M.splice(M.length - 1, 1)),
+ (E.selectors = T),
+ (E.style = b),
+ (C = E),
+ e.push(E);
+ }
+ if (w.length) {
+ var A = w.join(', ');
+ if (C) C.selectorsAdd = A;
+ else {
+ var O = { selectors: [], selectorsAdd: A, style: b };
+ u && (O.singleAtRule = u), h && (O.atRuleType = h), d && (O.mediaText = d), e.push(O);
+ }
+ }
+ }
+ }
+ return e;
+ },
+ parse: function (t) {
+ var e = document.createElement('style');
+ (e.innerHTML = t), document.head.appendChild(e);
+ var n = e.sheet;
+ document.head.removeChild(e);
+ var i = this.parseNode(n);
+ return 1 == i.length ? i[0] : i;
+ },
+ };
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ t.exports = { textTags: ['br', 'b', 'i', 'u', 'a', 'ul', 'ol'] };
+ },
+ function (t, e, n) {
+ 'use strict';
+ t.exports = function () {
+ var t,
+ e,
+ i = {},
+ r = n(207),
+ o = n(206),
+ s = n(82);
+ return {
+ compTypes: '',
+ name: 'Parser',
+ init: function (n) {
+ for (var a in ((i = n || {}), r)) a in i || (i[a] = r[a]);
+ return (t = new s(i)), (e = new o(i)), this;
+ },
+ parseHtml: function (n) {
+ return (t.compTypes = this.compTypes), t.parse(n, e);
+ },
+ parseCss: function (t) {
+ return e.parse(t);
+ },
+ };
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = o(n(1)),
+ r = o(n(0));
+ function o(t) {
+ return t && t.__esModule ? t : { default: t };
+ }
+ t.exports = r.default.View.extend({
+ template: i.default.template(
+ '\n
<%= deviceLabel %>
\n
\n \n \n \n
\n \n
\n
\n ',
+ ),
+ events: { change: 'updateDevice' },
+ initialize: function (t) {
+ (this.config = t.config || {}),
+ (this.em = this.config.em),
+ (this.ppfx = this.config.pStylePrefix || ''),
+ (this.events['click .' + this.ppfx + 'add-trasp'] = this.startAdd),
+ this.listenTo(this.em, 'change:device', this.updateSelect),
+ this.delegateEvents();
+ },
+ startAdd: function () {},
+ updateDevice: function () {
+ var t = this.em;
+ if (t) {
+ var e = this.devicesEl,
+ n = e ? e.val() : '';
+ t.set('device', n);
+ }
+ },
+ updateSelect: function () {
+ var t = this.em,
+ e = this.devicesEl;
+ if (t && t.getDeviceModel && e) {
+ var n = t.getDeviceModel(),
+ i = n ? n.get('name') : '';
+ e.val(i);
+ }
+ },
+ getOptions: function () {
+ var t = '';
+ return (
+ this.collection.each(function (e) {
+ var n = e.get('name');
+ t += '';
+ }),
+ t
+ );
+ },
+ render: function () {
+ var t = this.ppfx;
+ return (
+ this.$el.html(this.template({ ppfx: t, deviceLabel: this.config.deviceLabel })),
+ (this.devicesEl = this.$el.find('.' + t + 'devices')),
+ this.devicesEl.append(this.getOptions()),
+ (this.el.className = t + 'devices-c'),
+ this
+ );
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = (function (t) {
+ return t && t.__esModule ? t : { default: t };
+ })(n(0));
+ t.exports = i.default.Model.extend({
+ idAttribute: 'name',
+ defaults: { name: '', width: '', height: '', widthMedia: null },
+ initialize: function () {
+ null == this.get('widthMedia') && this.set('widthMedia', this.get('width'));
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = (function (t) {
+ return t && t.__esModule ? t : { default: t };
+ })(n(0));
+ var r = n(210);
+ t.exports = i.default.Collection.extend({ model: r });
+ },
+ function (t, e, n) {
+ 'use strict';
+ t.exports = { devices: [], deviceLabel: 'Device' };
+ },
+ function (t, e, n) {
+ 'use strict';
+ t.exports = function () {
+ var t,
+ e,
+ i = {},
+ r = n(212),
+ o = n(211),
+ s = n(209);
+ return {
+ name: 'DeviceManager',
+ init: function (n) {
+ for (var a in ((i = n || {}), r)) a in i || (i[a] = r[a]);
+ return (t = new o(i.devices)), (e = new s({ collection: t, config: i })), this;
+ },
+ add: function (e, n, i) {
+ var r = i || {};
+ return (r.name = e), (r.width = n), t.add(r);
+ },
+ get: function (e) {
+ return t.get(e);
+ },
+ getAll: function () {
+ return t;
+ },
+ render: function () {
+ return e.render().el;
+ },
+ };
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ Object.defineProperty(e, '__esModule', { value: !0 }),
+ (e.default = function (t) {
+ var e = this.constructor;
+ return this.then(
+ function (n) {
+ return e.resolve(t()).then(function () {
+ return n;
+ });
+ },
+ function (n) {
+ return e.resolve(t()).then(function () {
+ return e.reject(n);
+ });
+ },
+ );
+ });
+ },
+ function (t, e) {
+ var n,
+ i,
+ r = (t.exports = {});
+ function o() {
+ throw new Error('setTimeout has not been defined');
+ }
+ function s() {
+ throw new Error('clearTimeout has not been defined');
+ }
+ function a(t) {
+ if (n === setTimeout) return setTimeout(t, 0);
+ if ((n === o || !n) && setTimeout) return (n = setTimeout), setTimeout(t, 0);
+ try {
+ return n(t, 0);
+ } catch (e) {
+ try {
+ return n.call(null, t, 0);
+ } catch (e) {
+ return n.call(this, t, 0);
+ }
+ }
+ }
+ !(function () {
+ try {
+ n = 'function' == typeof setTimeout ? setTimeout : o;
+ } catch (t) {
+ n = o;
+ }
+ try {
+ i = 'function' == typeof clearTimeout ? clearTimeout : s;
+ } catch (t) {
+ i = s;
+ }
+ })();
+ var l,
+ c = [],
+ u = !1,
+ h = -1;
+ function d() {
+ u && l && ((u = !1), l.length ? (c = l.concat(c)) : (h = -1), c.length && f());
+ }
+ function f() {
+ if (!u) {
+ var t = a(d);
+ u = !0;
+ for (var e = c.length; e; ) {
+ for (l = c, c = []; ++h < e; ) l && l[h].run();
+ (h = -1), (e = c.length);
+ }
+ (l = null),
+ (u = !1),
+ (function (t) {
+ if (i === clearTimeout) return clearTimeout(t);
+ if ((i === s || !i) && clearTimeout) return (i = clearTimeout), clearTimeout(t);
+ try {
+ i(t);
+ } catch (e) {
+ try {
+ return i.call(null, t);
+ } catch (e) {
+ return i.call(this, t);
+ }
+ }
+ })(t);
+ }
+ }
+ function p(t, e) {
+ (this.fun = t), (this.array = e);
+ }
+ function g() {}
+ (r.nextTick = function (t) {
+ var e = new Array(arguments.length - 1);
+ if (arguments.length > 1) for (var n = 1; n < arguments.length; n++) e[n - 1] = arguments[n];
+ c.push(new p(t, e)), 1 !== c.length || u || a(f);
+ }),
+ (p.prototype.run = function () {
+ this.fun.apply(null, this.array);
+ }),
+ (r.title = 'browser'),
+ (r.browser = !0),
+ (r.env = {}),
+ (r.argv = []),
+ (r.version = ''),
+ (r.versions = {}),
+ (r.on = g),
+ (r.addListener = g),
+ (r.once = g),
+ (r.off = g),
+ (r.removeListener = g),
+ (r.removeAllListeners = g),
+ (r.emit = g),
+ (r.prependListener = g),
+ (r.prependOnceListener = g),
+ (r.listeners = function (t) {
+ return [];
+ }),
+ (r.binding = function (t) {
+ throw new Error('process.binding is not supported');
+ }),
+ (r.cwd = function () {
+ return '/';
+ }),
+ (r.chdir = function (t) {
+ throw new Error('process.chdir is not supported');
+ }),
+ (r.umask = function () {
+ return 0;
+ });
+ },
+ function (t, e, n) {
+ (function (t, e) {
+ !(function (t, n) {
+ 'use strict';
+ if (!t.setImmediate) {
+ var i,
+ r = 1,
+ o = {},
+ s = !1,
+ a = t.document,
+ l = Object.getPrototypeOf && Object.getPrototypeOf(t);
+ (l = l && l.setTimeout ? l : t),
+ '[object process]' === {}.toString.call(t.process)
+ ? (i = function (t) {
+ e.nextTick(function () {
+ u(t);
+ });
+ })
+ : (function () {
+ if (t.postMessage && !t.importScripts) {
+ var e = !0,
+ n = t.onmessage;
+ return (
+ (t.onmessage = function () {
+ e = !1;
+ }),
+ t.postMessage('', '*'),
+ (t.onmessage = n),
+ e
+ );
+ }
+ })()
+ ? (function () {
+ var e = 'setImmediate$' + Math.random() + '$',
+ n = function (n) {
+ n.source === t &&
+ 'string' == typeof n.data &&
+ 0 === n.data.indexOf(e) &&
+ u(+n.data.slice(e.length));
+ };
+ t.addEventListener ? t.addEventListener('message', n, !1) : t.attachEvent('onmessage', n),
+ (i = function (n) {
+ t.postMessage(e + n, '*');
+ });
+ })()
+ : t.MessageChannel
+ ? (function () {
+ var t = new MessageChannel();
+ (t.port1.onmessage = function (t) {
+ u(t.data);
+ }),
+ (i = function (e) {
+ t.port2.postMessage(e);
+ });
+ })()
+ : a && 'onreadystatechange' in a.createElement('script')
+ ? (function () {
+ var t = a.documentElement;
+ i = function (e) {
+ var n = a.createElement('script');
+ (n.onreadystatechange = function () {
+ u(e), (n.onreadystatechange = null), t.removeChild(n), (n = null);
+ }),
+ t.appendChild(n);
+ };
+ })()
+ : (i = function (t) {
+ setTimeout(u, 0, t);
+ }),
+ (l.setImmediate = function (t) {
+ 'function' != typeof t && (t = new Function('' + t));
+ for (var e = new Array(arguments.length - 1), n = 0; n < e.length; n++) e[n] = arguments[n + 1];
+ var s = { callback: t, args: e };
+ return (o[r] = s), i(r), r++;
+ }),
+ (l.clearImmediate = c);
+ }
+ function c(t) {
+ delete o[t];
+ }
+ function u(t) {
+ if (s) setTimeout(u, 0, t);
+ else {
+ var e = o[t];
+ if (e) {
+ s = !0;
+ try {
+ !(function (t) {
+ var e = t.callback,
+ i = t.args;
+ switch (i.length) {
+ case 0:
+ e();
+ break;
+ case 1:
+ e(i[0]);
+ break;
+ case 2:
+ e(i[0], i[1]);
+ break;
+ case 3:
+ e(i[0], i[1], i[2]);
+ break;
+ default:
+ e.apply(n, i);
+ }
+ })(e);
+ } finally {
+ c(t), (s = !1);
+ }
+ }
+ }
+ }
+ })('undefined' == typeof self ? (void 0 === t ? this : t) : self);
+ }).call(this, n(11), n(215));
+ },
+ function (t, e, n) {
+ (function (t) {
+ var i = (void 0 !== t && t) || ('undefined' != typeof self && self) || window,
+ r = Function.prototype.apply;
+ function o(t, e) {
+ (this._id = t), (this._clearFn = e);
+ }
+ (e.setTimeout = function () {
+ return new o(r.call(setTimeout, i, arguments), clearTimeout);
+ }),
+ (e.setInterval = function () {
+ return new o(r.call(setInterval, i, arguments), clearInterval);
+ }),
+ (e.clearTimeout = e.clearInterval =
+ function (t) {
+ t && t.close();
+ }),
+ (o.prototype.unref = o.prototype.ref = function () {}),
+ (o.prototype.close = function () {
+ this._clearFn.call(i, this._id);
+ }),
+ (e.enroll = function (t, e) {
+ clearTimeout(t._idleTimeoutId), (t._idleTimeout = e);
+ }),
+ (e.unenroll = function (t) {
+ clearTimeout(t._idleTimeoutId), (t._idleTimeout = -1);
+ }),
+ (e._unrefActive = e.active =
+ function (t) {
+ clearTimeout(t._idleTimeoutId);
+ var e = t._idleTimeout;
+ e >= 0 &&
+ (t._idleTimeoutId = setTimeout(function () {
+ t._onTimeout && t._onTimeout();
+ }, e));
+ }),
+ n(216),
+ (e.setImmediate =
+ ('undefined' != typeof self && self.setImmediate) ||
+ (void 0 !== t && t.setImmediate) ||
+ (this && this.setImmediate)),
+ (e.clearImmediate =
+ ('undefined' != typeof self && self.clearImmediate) ||
+ (void 0 !== t && t.clearImmediate) ||
+ (this && this.clearImmediate));
+ }).call(this, n(11));
+ },
+ function (t, e, n) {
+ 'use strict';
+ (function (t) {
+ Object.defineProperty(e, '__esModule', { value: !0 });
+ var i =
+ 'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator
+ ? function (t) {
+ return typeof t;
+ }
+ : function (t) {
+ return t && 'function' == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype
+ ? 'symbol'
+ : typeof t;
+ },
+ r = (function (t) {
+ return t && t.__esModule ? t : { default: t };
+ })(n(214));
+ var o = setTimeout;
+ function s() {}
+ function a(t) {
+ if (!(this instanceof a)) throw new TypeError('Promises must be constructed via new');
+ if ('function' != typeof t) throw new TypeError('not a function');
+ (this._state = 0), (this._handled = !1), (this._value = void 0), (this._deferreds = []), d(t, this);
+ }
+ function l(t, e) {
+ for (; 3 === t._state; ) t = t._value;
+ 0 !== t._state
+ ? ((t._handled = !0),
+ a._immediateFn(function () {
+ var n = 1 === t._state ? e.onFulfilled : e.onRejected;
+ if (null !== n) {
+ var i;
+ try {
+ i = n(t._value);
+ } catch (t) {
+ return void u(e.promise, t);
+ }
+ c(e.promise, i);
+ } else (1 === t._state ? c : u)(e.promise, t._value);
+ }))
+ : t._deferreds.push(e);
+ }
+ function c(t, e) {
+ try {
+ if (e === t) throw new TypeError('A promise cannot be resolved with itself.');
+ if (e && ('object' === (void 0 === e ? 'undefined' : i(e)) || 'function' == typeof e)) {
+ var n = e.then;
+ if (e instanceof a) return (t._state = 3), (t._value = e), void h(t);
+ if ('function' == typeof n)
+ return void d(
+ (function (t, e) {
+ return function () {
+ t.apply(e, arguments);
+ };
+ })(n, e),
+ t,
+ );
+ }
+ (t._state = 1), (t._value = e), h(t);
+ } catch (e) {
+ u(t, e);
+ }
+ }
+ function u(t, e) {
+ (t._state = 2), (t._value = e), h(t);
+ }
+ function h(t) {
+ 2 === t._state &&
+ 0 === t._deferreds.length &&
+ a._immediateFn(function () {
+ t._handled || a._unhandledRejectionFn(t._value);
+ });
+ for (var e = 0, n = t._deferreds.length; e < n; e++) l(t, t._deferreds[e]);
+ t._deferreds = null;
+ }
+ function d(t, e) {
+ var n = !1;
+ try {
+ t(
+ function (t) {
+ n || ((n = !0), c(e, t));
+ },
+ function (t) {
+ n || ((n = !0), u(e, t));
+ },
+ );
+ } catch (t) {
+ if (n) return;
+ (n = !0), u(e, t);
+ }
+ }
+ (a.prototype.catch = function (t) {
+ return this.then(null, t);
+ }),
+ (a.prototype.then = function (t, e) {
+ var n = new this.constructor(s);
+ return (
+ l(
+ this,
+ new (function (t, e, n) {
+ (this.onFulfilled = 'function' == typeof t ? t : null),
+ (this.onRejected = 'function' == typeof e ? e : null),
+ (this.promise = n);
+ })(t, e, n),
+ ),
+ n
+ );
+ }),
+ (a.prototype.finally = r.default),
+ (a.all = function (t) {
+ return new a(function (e, n) {
+ if (!t || void 0 === t.length) throw new TypeError('Promise.all accepts an array');
+ var r = Array.prototype.slice.call(t);
+ if (0 === r.length) return e([]);
+ var o = r.length;
+ function s(t, a) {
+ try {
+ if (a && ('object' === (void 0 === a ? 'undefined' : i(a)) || 'function' == typeof a)) {
+ var l = a.then;
+ if ('function' == typeof l)
+ return void l.call(
+ a,
+ function (e) {
+ s(t, e);
+ },
+ n,
+ );
+ }
+ (r[t] = a), 0 == --o && e(r);
+ } catch (t) {
+ n(t);
+ }
+ }
+ for (var a = 0; a < r.length; a++) s(a, r[a]);
+ });
+ }),
+ (a.resolve = function (t) {
+ return t && 'object' === (void 0 === t ? 'undefined' : i(t)) && t.constructor === a
+ ? t
+ : new a(function (e) {
+ e(t);
+ });
+ }),
+ (a.reject = function (t) {
+ return new a(function (e, n) {
+ n(t);
+ });
+ }),
+ (a.race = function (t) {
+ return new a(function (e, n) {
+ for (var i = 0, r = t.length; i < r; i++) t[i].then(e, n);
+ });
+ }),
+ (a._immediateFn =
+ ('function' == typeof t &&
+ function (e) {
+ t(e);
+ }) ||
+ function (t) {
+ o(t, 0);
+ }),
+ (a._unhandledRejectionFn = function (t) {
+ 'undefined' != typeof console && console && console.warn('Possible Unhandled Promise Rejection:', t);
+ }),
+ (e.default = a);
+ }).call(this, n(217).setImmediate);
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = (function (t) {
+ return t && t.__esModule ? t : { default: t };
+ })(n(83)),
+ r = n(1);
+ t.exports = n(0).Model.extend({
+ fetch: i.default,
+ defaults: {
+ urlStore: '',
+ urlLoad: '',
+ params: {},
+ beforeSend: function () {},
+ onComplete: function () {},
+ contentTypeJson: !1,
+ },
+ onStart: function () {
+ this.get('em');
+ var t = this.get('beforeSend');
+ t && t();
+ },
+ onError: function (t, e) {
+ if (e) e(t);
+ else {
+ var n = this.get('em');
+ console.error(t), n && n.trigger('storage:error', t);
+ }
+ },
+ onResponse: function (t, e) {
+ var n = this.get('em'),
+ i = this.get('onComplete'),
+ r = this.get('contentTypeJson') && t && 'string' == typeof t ? JSON.parse(t) : t;
+ i && i(r), e && e(r), n && n.trigger('storage:response', r);
+ },
+ store: function (t, e, n) {
+ var i = {};
+ for (var r in t) i[r] = t[r];
+ this.request(this.get('urlStore'), { body: i }, e, n);
+ },
+ load: function (t, e, n) {
+ this.request(this.get('urlLoad'), { method: 'get' }, e, n);
+ },
+ request: function (t) {
+ var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
+ n = this,
+ i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : null,
+ o = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : null,
+ s = this.get('contentTypeJson'),
+ a = this.get('headers') || {},
+ l = this.get('params'),
+ c = e.body || {},
+ u = void 0,
+ h = void 0;
+ for (var d in l) c[d] = l[d];
+ if (
+ ((0, r.isUndefined)(a['X-Requested-With']) && (a['X-Requested-With'] = 'XMLHttpRequest'),
+ (0, r.isUndefined)(a['Content-Type']) && s && (a['Content-Type'] = 'application/json; charset=utf-8'),
+ s)
+ )
+ h = JSON.stringify(c);
+ else for (var f in ((h = new FormData()), c)) h.append(f, c[f]);
+ 'post' === (u = { method: e.method || 'post', credentials: 'include', headers: a }).method && (u.body = h),
+ this.onStart(),
+ this.fetch(t, u)
+ .then(function (t) {
+ return 1 == ((t.status / 200) | 0)
+ ? t.text()
+ : t.text().then(function (t) {
+ return Promise.reject(t);
+ });
+ })
+ .then(function (t) {
+ return n.onResponse(t, i);
+ })
+ .catch(function (t) {
+ return n.onError(t, o);
+ });
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = n(0);
+ t.exports = i.Model.extend({
+ defaults: { checkLocal: !0 },
+ store: function (t, e) {
+ for (var n in (this.checkStorageEnvironment(), t)) localStorage.setItem(n, t[n]);
+ 'function' == typeof e && e();
+ },
+ load: function (t, e) {
+ this.checkStorageEnvironment();
+ for (var n = {}, i = 0, r = t.length; i < r; i++) {
+ var o = localStorage.getItem(t[i]);
+ o && (n[t[i]] = o);
+ }
+ return 'function' == typeof e && e(n), n;
+ },
+ remove: function (t) {
+ this.checkStorageEnvironment();
+ for (var e = 0, n = t.length; e < n; e++) localStorage.removeItem(t[e]);
+ },
+ checkStorageEnvironment: function () {
+ this.get('checkLocal') && !localStorage && console.warn("Your browser doesn't support localStorage");
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ t.exports = {
+ id: 'gjs-',
+ autosave: 1,
+ autoload: 1,
+ type: 'local',
+ stepsBeforeSave: 1,
+ storeComponents: 1,
+ storeStyles: 1,
+ storeHtml: 1,
+ storeCss: 1,
+ checkLocal: 1,
+ params: {},
+ headers: {},
+ urlStore: '',
+ urlLoad: '',
+ beforeSend: function (t, e) {},
+ onComplete: function (t, e) {},
+ contentTypeJson: !1,
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ t.exports = function () {
+ var t = {},
+ e = n(221),
+ i = n(220),
+ r = n(219),
+ o = void 0,
+ s = {},
+ a = {};
+ return {
+ name: 'StorageManager',
+ init: function (n) {
+ for (var s in ((o = (t = n || {}).em), e)) s in t || (t[s] = e[s]);
+ return (
+ (a.remote = new r(t)),
+ (a.local = new i(t)),
+ (t.currentStorage = t.type),
+ this.loadDefaultProviders().setCurrent(t.type),
+ this
+ );
+ },
+ getConfig: function () {
+ return t;
+ },
+ isAutosave: function () {
+ return !!t.autosave;
+ },
+ setAutosave: function (e) {
+ return (t.autosave = !!e), this;
+ },
+ getStepsBeforeSave: function () {
+ return t.stepsBeforeSave;
+ },
+ setStepsBeforeSave: function (e) {
+ return (t.stepsBeforeSave = e), this;
+ },
+ add: function (t, e) {
+ return (s[t] = e), this;
+ },
+ get: function (t) {
+ return s[t] || null;
+ },
+ getStorages: function () {
+ return s;
+ },
+ getCurrent: function () {
+ return t.currentStorage;
+ },
+ setCurrent: function (e) {
+ return (t.currentStorage = e), this;
+ },
+ store: function (e, n) {
+ var i = this,
+ r = this.get(this.getCurrent()),
+ o = {};
+ for (var s in (this.onStart('store', e), e)) o[t.id + s] = e[s];
+ return r
+ ? r.store(
+ o,
+ function (t) {
+ n && n(t), i.onEnd('store', t);
+ },
+ function (t) {
+ i.onError('store', t);
+ },
+ )
+ : null;
+ },
+ load: function (e, n) {
+ var i = this,
+ r = this.get(this.getCurrent()),
+ o = [],
+ s = {};
+ 'string' == typeof e && (e = [e]), this.onStart('load', e);
+ for (var a = 0, l = e.length; a < l; a++) o.push(t.id + e[a]);
+ r
+ ? r.load(
+ o,
+ function (e) {
+ var r = new RegExp('^' + t.id);
+ for (var o in e) {
+ var a = o.replace(r, '');
+ s[a] = e[o];
+ }
+ n && n(s), i.onEnd('load', s);
+ },
+ function (t) {
+ i.onError('load', t);
+ },
+ )
+ : n && n(s);
+ },
+ loadDefaultProviders: function () {
+ for (var t in a) this.add(t, a[t]);
+ return this;
+ },
+ getCurrentStorage: function () {
+ return this.get(this.getCurrent());
+ },
+ onStart: function (t, e) {
+ o && (o.trigger('storage:start'), t && o.trigger('storage:start:' + t, e));
+ },
+ onEnd: function (t, e) {
+ o && (o.trigger('storage:end'), t && o.trigger('storage:end:' + t, e));
+ },
+ onError: function (t, e) {
+ o && (o.trigger('storage:error', e), t && o.trigger('storage:error:' + t, e), this.onEnd(t, e));
+ },
+ canAutoload: function () {
+ return this.getCurrentStorage() && this.getConfig().autoload;
+ },
+ };
+ };
+ },
+ function (t, e, n) {
+ (function (i) {
+ var r, o;
+ !(function (s) {
+ var a =
+ ('object' == typeof self && self.self == self && self) || ('object' == typeof i && i.global == i && i);
+ (r = [n(84), n(20), e]),
+ void 0 ===
+ (o = function (t, e, n) {
+ a.Backbone = (function (t, e, n, i) {
+ var r = t.Backbone,
+ o = [].slice;
+ (e.VERSION = '1.2.1'),
+ (e.$ = i),
+ (e.noConflict = function () {
+ return (t.Backbone = r), this;
+ }),
+ (e.emulateHTTP = !1),
+ (e.emulateJSON = !1);
+ var s = function (t, e, i) {
+ n.each(e, function (e, r) {
+ n[r] &&
+ (t.prototype[r] = (function (t, e, i) {
+ switch (t) {
+ case 1:
+ return function () {
+ return n[e](this[i]);
+ };
+ case 2:
+ return function (t) {
+ return n[e](this[i], t);
+ };
+ case 3:
+ return function (t, r) {
+ return n[e](this[i], t, r);
+ };
+ case 4:
+ return function (t, r, o) {
+ return n[e](this[i], t, r, o);
+ };
+ default:
+ return function () {
+ var t = o.call(arguments);
+ return t.unshift(this[i]), n[e].apply(n, t);
+ };
+ }
+ })(e, r, i));
+ });
+ },
+ a = (e.Events = {}),
+ l = /\s+/,
+ c = function (t, e, i, r, o) {
+ var s,
+ a = 0;
+ if (i && 'object' == typeof i) {
+ void 0 !== r && 'context' in o && void 0 === o.context && (o.context = r);
+ for (s = n.keys(i); a < s.length; a++) e = t(e, s[a], i[s[a]], o);
+ } else if (i && l.test(i)) for (s = i.split(l); a < s.length; a++) e = t(e, s[a], r, o);
+ else e = t(e, i, r, o);
+ return e;
+ };
+ a.on = function (t, e, n) {
+ return u(this, t, e, n);
+ };
+ var u = function (t, e, n, i, r) {
+ if (((t._events = c(h, t._events || {}, e, n, { context: i, ctx: t, listening: r })), r)) {
+ var o = t._listeners || (t._listeners = {});
+ o[r.id] = r;
+ }
+ return t;
+ };
+ a.listenTo = function (t, e, i) {
+ if (!t) return this;
+ var r = t._listenId || (t._listenId = n.uniqueId('l')),
+ o = this._listeningTo || (this._listeningTo = {}),
+ s = o[r];
+ if (!s) {
+ var a = this._listenId || (this._listenId = n.uniqueId('l'));
+ s = o[r] = { obj: t, objId: r, id: a, listeningTo: o, count: 0 };
+ }
+ return u(t, e, i, this, s), this;
+ };
+ var h = function (t, e, n, i) {
+ if (n) {
+ var r = t[e] || (t[e] = []),
+ o = i.context,
+ s = i.ctx,
+ a = i.listening;
+ a && a.count++, r.push({ callback: n, context: o, ctx: o || s, listening: a });
+ }
+ return t;
+ };
+ (a.off = function (t, e, n) {
+ return this._events
+ ? ((this._events = c(d, this._events, t, e, { context: n, listeners: this._listeners })), this)
+ : this;
+ }),
+ (a.stopListening = function (t, e, i) {
+ var r = this._listeningTo;
+ if (!r) return this;
+ for (var o = t ? [t._listenId] : n.keys(r), s = 0; s < o.length; s++) {
+ var a = r[o[s]];
+ if (!a) break;
+ a.obj.off(e, i, this);
+ }
+ return n.isEmpty(r) && (this._listeningTo = void 0), this;
+ });
+ var d = function (t, e, i, r) {
+ if (t) {
+ var o,
+ s = 0,
+ a = r.context,
+ l = r.listeners;
+ if (e || i || a) {
+ for (var c = e ? [e] : n.keys(t); s < c.length; s++) {
+ e = c[s];
+ var u = t[e];
+ if (!u) break;
+ for (var h = [], d = 0; d < u.length; d++) {
+ var f = u[d];
+ (i && i !== f.callback && i !== f.callback._callback) || (a && a !== f.context)
+ ? h.push(f)
+ : (o = f.listening) && 0 == --o.count && (delete l[o.id], delete o.listeningTo[o.objId]);
+ }
+ h.length ? (t[e] = h) : delete t[e];
+ }
+ return n.size(t) ? t : void 0;
+ }
+ for (var p = n.keys(l); s < p.length; s++)
+ (o = l[p[s]]), delete l[o.id], delete o.listeningTo[o.objId];
+ }
+ };
+ (a.once = function (t, e, i) {
+ var r = c(f, {}, t, e, n.bind(this.off, this));
+ return this.on(r, void 0, i);
+ }),
+ (a.listenToOnce = function (t, e, i) {
+ var r = c(f, {}, e, i, n.bind(this.stopListening, this, t));
+ return this.listenTo(t, r);
+ });
+ var f = function (t, e, i, r) {
+ if (i) {
+ var o = (t[e] = n.once(function () {
+ r(e, o), i.apply(this, arguments);
+ }));
+ o._callback = i;
+ }
+ return t;
+ };
+ a.trigger = function (t) {
+ if (!this._events) return this;
+ for (var e = Math.max(0, arguments.length - 1), n = Array(e), i = 0; i < e; i++)
+ n[i] = arguments[i + 1];
+ return c(p, this._events, t, void 0, n), this;
+ };
+ var p = function (t, e, n, i) {
+ if (t) {
+ var r = t[e],
+ o = t.all;
+ r && o && (o = o.slice()), r && g(r, i), o && g(o, [e].concat(i));
+ }
+ return t;
+ },
+ g = function (t, e) {
+ var n,
+ i = -1,
+ r = t.length,
+ o = e[0],
+ s = e[1],
+ a = e[2];
+ switch (e.length) {
+ case 0:
+ for (; ++i < r; ) (n = t[i]).callback.call(n.ctx);
+ return;
+ case 1:
+ for (; ++i < r; ) (n = t[i]).callback.call(n.ctx, o);
+ return;
+ case 2:
+ for (; ++i < r; ) (n = t[i]).callback.call(n.ctx, o, s);
+ return;
+ case 3:
+ for (; ++i < r; ) (n = t[i]).callback.call(n.ctx, o, s, a);
+ return;
+ default:
+ for (; ++i < r; ) (n = t[i]).callback.apply(n.ctx, e);
+ return;
+ }
+ };
+ (a.bind = a.on), (a.unbind = a.off), n.extend(e, a);
+ var v = (e.Model = function (t, e) {
+ var i = t || {};
+ e || (e = {}),
+ (this.cid = n.uniqueId(this.cidPrefix)),
+ (this.attributes = {}),
+ e.collection && (this.collection = e.collection),
+ e.parse && (i = this.parse(i, e) || {}),
+ (i = n.defaults({}, i, n.result(this, 'defaults'))),
+ this.set(i, e),
+ (this.changed = {}),
+ this.initialize.apply(this, arguments);
+ });
+ n.extend(v.prototype, a, {
+ changed: null,
+ validationError: null,
+ idAttribute: 'id',
+ cidPrefix: 'c',
+ initialize: function () {},
+ toJSON: function (t) {
+ return n.clone(this.attributes);
+ },
+ sync: function () {
+ return e.sync.apply(this, arguments);
+ },
+ get: function (t) {
+ return this.attributes[t];
+ },
+ escape: function (t) {
+ return n.escape(this.get(t));
+ },
+ has: function (t) {
+ return null != this.get(t);
+ },
+ matches: function (t) {
+ return !!n.iteratee(t, this)(this.attributes);
+ },
+ set: function (t, e, i) {
+ if (null == t) return this;
+ var r;
+ if (
+ ('object' == typeof t ? ((r = t), (i = e)) : ((r = {})[t] = e),
+ i || (i = {}),
+ !this._validate(r, i))
+ )
+ return !1;
+ var o = i.unset,
+ s = i.silent,
+ a = [],
+ l = this._changing;
+ (this._changing = !0),
+ l || ((this._previousAttributes = n.clone(this.attributes)), (this.changed = {}));
+ var c = this.attributes,
+ u = this.changed,
+ h = this._previousAttributes;
+ for (var d in (this.idAttribute in r && (this.id = r[this.idAttribute]), r))
+ (e = r[d]),
+ n.isEqual(c[d], e) || a.push(d),
+ n.isEqual(h[d], e) ? delete u[d] : (u[d] = e),
+ o ? delete c[d] : (c[d] = e);
+ if (!s) {
+ a.length && (this._pending = i);
+ for (var f = 0; f < a.length; f++) this.trigger('change:' + a[f], this, c[a[f]], i);
+ }
+ if (l) return this;
+ if (!s)
+ for (; this._pending; )
+ (i = this._pending), (this._pending = !1), this.trigger('change', this, i);
+ return (this._pending = !1), (this._changing = !1), this;
+ },
+ unset: function (t, e) {
+ return this.set(t, void 0, n.extend({}, e, { unset: !0 }));
+ },
+ clear: function (t) {
+ var e = {};
+ for (var i in this.attributes) e[i] = void 0;
+ return this.set(e, n.extend({}, t, { unset: !0 }));
+ },
+ hasChanged: function (t) {
+ return null == t ? !n.isEmpty(this.changed) : n.has(this.changed, t);
+ },
+ changedAttributes: function (t) {
+ if (!t) return !!this.hasChanged() && n.clone(this.changed);
+ var e = this._changing ? this._previousAttributes : this.attributes,
+ i = {};
+ for (var r in t) {
+ var o = t[r];
+ n.isEqual(e[r], o) || (i[r] = o);
+ }
+ return !!n.size(i) && i;
+ },
+ previous: function (t) {
+ return null != t && this._previousAttributes ? this._previousAttributes[t] : null;
+ },
+ previousAttributes: function () {
+ return n.clone(this._previousAttributes);
+ },
+ fetch: function (t) {
+ var e = this,
+ i = (t = n.extend({ parse: !0 }, t)).success;
+ return (
+ (t.success = function (n) {
+ var r = t.parse ? e.parse(n, t) : n;
+ if (!e.set(r, t)) return !1;
+ i && i.call(t.context, e, n, t), e.trigger('sync', e, n, t);
+ }),
+ D(this, t),
+ this.sync('read', this, t)
+ );
+ },
+ save: function (t, e, i) {
+ var r;
+ null == t || 'object' == typeof t ? ((r = t), (i = e)) : ((r = {})[t] = e);
+ var o = (i = n.extend({ validate: !0, parse: !0 }, i)).wait;
+ if (r && !o) {
+ if (!this.set(r, i)) return !1;
+ } else if (!this._validate(r, i)) return !1;
+ var s = this,
+ a = i.success,
+ l = this.attributes;
+ (i.success = function (t) {
+ s.attributes = l;
+ var e = i.parse ? s.parse(t, i) : t;
+ if ((o && (e = n.extend({}, r, e)), e && !s.set(e, i))) return !1;
+ a && a.call(i.context, s, t, i), s.trigger('sync', s, t, i);
+ }),
+ D(this, i),
+ r && o && (this.attributes = n.extend({}, l, r));
+ var c = this.isNew() ? 'create' : i.patch ? 'patch' : 'update';
+ 'patch' !== c || i.attrs || (i.attrs = r);
+ var u = this.sync(c, this, i);
+ return (this.attributes = l), u;
+ },
+ destroy: function (t) {
+ var e = this,
+ i = (t = t ? n.clone(t) : {}).success,
+ r = t.wait,
+ o = function () {
+ e.stopListening(), e.trigger('destroy', e, e.collection, t);
+ };
+ t.success = function (n) {
+ r && o(), i && i.call(t.context, e, n, t), e.isNew() || e.trigger('sync', e, n, t);
+ };
+ var s = !1;
+ return (
+ this.isNew() ? n.defer(t.success) : (D(this, t), (s = this.sync('delete', this, t))),
+ r || o(),
+ s
+ );
+ },
+ url: function () {
+ var t = n.result(this, 'urlRoot') || n.result(this.collection, 'url') || N();
+ if (this.isNew()) return t;
+ var e = this.get(this.idAttribute);
+ return t.replace(/[^\/]$/, '$&/') + encodeURIComponent(e);
+ },
+ parse: function (t, e) {
+ return t;
+ },
+ clone: function () {
+ return new this.constructor(this.attributes);
+ },
+ isNew: function () {
+ return !this.has(this.idAttribute);
+ },
+ isValid: function (t) {
+ return this._validate({}, n.defaults({ validate: !0 }, t));
+ },
+ _validate: function (t, e) {
+ if (!e.validate || !this.validate) return !0;
+ t = n.extend({}, this.attributes, t);
+ var i = (this.validationError = this.validate(t, e) || null);
+ return !i || (this.trigger('invalid', this, i, n.extend(e, { validationError: i })), !1);
+ },
+ }),
+ s(
+ v,
+ { keys: 1, values: 1, pairs: 1, invert: 1, pick: 0, omit: 0, chain: 1, isEmpty: 1 },
+ 'attributes',
+ );
+ var m = (e.Collection = function (t, e) {
+ e || (e = {}),
+ e.model && (this.model = e.model),
+ void 0 !== e.comparator && (this.comparator = e.comparator),
+ this._reset(),
+ this.initialize.apply(this, arguments),
+ t && this.reset(t, n.extend({ silent: !0 }, e));
+ }),
+ y = { add: !0, remove: !0, merge: !0 },
+ b = { add: !0, remove: !1 };
+ n.extend(m.prototype, a, {
+ model: v,
+ initialize: function () {},
+ toJSON: function (t) {
+ return this.map(function (e) {
+ return e.toJSON(t);
+ });
+ },
+ sync: function () {
+ return e.sync.apply(this, arguments);
+ },
+ add: function (t, e) {
+ return this.set(t, n.extend({ merge: !1 }, e, b));
+ },
+ remove: function (t, e) {
+ e = n.extend({}, e);
+ var i = !n.isArray(t);
+ t = i ? [t] : n.clone(t);
+ var r = this._removeModels(t, e);
+ return !e.silent && r && this.trigger('update', this, e), i ? r[0] : r;
+ },
+ set: function (t, e) {
+ (e = n.defaults({}, e, y)).parse && !this._isModel(t) && (t = this.parse(t, e));
+ var i,
+ r,
+ o,
+ s,
+ a,
+ l = !n.isArray(t);
+ t = l ? (t ? [t] : []) : t.slice();
+ var c = e.at;
+ null != c && (c = +c), c < 0 && (c += this.length + 1);
+ for (
+ var u = this.comparator && null == c && !1 !== e.sort,
+ h = n.isString(this.comparator) ? this.comparator : null,
+ d = [],
+ f = [],
+ p = {},
+ g = e.add,
+ v = e.merge,
+ m = e.remove,
+ b = !(u || !g || !m) && [],
+ x = !1,
+ w = 0;
+ w < t.length;
+ w++
+ ) {
+ if (((o = t[w]), (s = this.get(o))))
+ m && (p[s.cid] = !0),
+ v &&
+ o !== s &&
+ ((o = this._isModel(o) ? o.attributes : o),
+ e.parse && (o = s.parse(o, e)),
+ s.set(o, e),
+ u && !a && s.hasChanged(h) && (a = !0)),
+ (t[w] = s);
+ else if (g) {
+ if (!(r = t[w] = this._prepareModel(o, e))) continue;
+ d.push(r), this._addReference(r, e);
+ }
+ (r = s || r) &&
+ ((i = this.modelId(r.attributes)),
+ !b ||
+ (!r.isNew() && p[i]) ||
+ (b.push(r), (x = x || !this.models[w] || r.cid !== this.models[w].cid)),
+ (p[i] = !0));
+ }
+ if (m) {
+ for (var w = 0; w < this.length; w++) p[(r = this.models[w]).cid] || f.push(r);
+ f.length && this._removeModels(f, e);
+ }
+ if (d.length || x)
+ if ((u && (a = !0), (this.length += d.length), null != c))
+ for (var w = 0; w < d.length; w++) this.models.splice(c + w, 0, d[w]);
+ else {
+ b && (this.models.length = 0);
+ for (var C = b || d, w = 0; w < C.length; w++) this.models.push(C[w]);
+ }
+ if ((a && this.sort({ silent: !0 }), !e.silent)) {
+ for (var k = null != c ? n.clone(e) : e, w = 0; w < d.length; w++)
+ null != c && (k.index = c + w), (r = d[w]).trigger('add', r, this, k);
+ (a || x) && this.trigger('sort', this, e),
+ (d.length || f.length) && this.trigger('update', this, e);
+ }
+ return l ? t[0] : t;
+ },
+ reset: function (t, e) {
+ e = e ? n.clone(e) : {};
+ for (var i = 0; i < this.models.length; i++) this._removeReference(this.models[i], e);
+ return (
+ (e.previousModels = this.models),
+ this._reset(),
+ (t = this.add(t, n.extend({ silent: !0 }, e))),
+ e.silent || this.trigger('reset', this, e),
+ t
+ );
+ },
+ push: function (t, e) {
+ return this.add(t, n.extend({ at: this.length }, e));
+ },
+ pop: function (t) {
+ var e = this.at(this.length - 1);
+ return this.remove(e, t);
+ },
+ unshift: function (t, e) {
+ return this.add(t, n.extend({ at: 0 }, e));
+ },
+ shift: function (t) {
+ var e = this.at(0);
+ return this.remove(e, t);
+ },
+ slice: function () {
+ return o.apply(this.models, arguments);
+ },
+ get: function (t) {
+ if (null != t) {
+ var e = this.modelId(this._isModel(t) ? t.attributes : t);
+ return this._byId[t] || this._byId[e] || this._byId[t.cid];
+ }
+ },
+ at: function (t) {
+ return t < 0 && (t += this.length), this.models[t];
+ },
+ where: function (t, e) {
+ var i = n.matches(t);
+ return this[e ? 'find' : 'filter'](function (t) {
+ return i(t.attributes);
+ });
+ },
+ findWhere: function (t) {
+ return this.where(t, !0);
+ },
+ sort: function (t) {
+ if (!this.comparator) throw new Error('Cannot sort a set without a comparator');
+ return (
+ t || (t = {}),
+ n.isString(this.comparator) || 1 === this.comparator.length
+ ? (this.models = this.sortBy(this.comparator, this))
+ : this.models.sort(n.bind(this.comparator, this)),
+ t.silent || this.trigger('sort', this, t),
+ this
+ );
+ },
+ pluck: function (t) {
+ return n.invoke(this.models, 'get', t);
+ },
+ fetch: function (t) {
+ var e = (t = n.extend({ parse: !0 }, t)).success,
+ i = this;
+ return (
+ (t.success = function (n) {
+ var r = t.reset ? 'reset' : 'set';
+ i[r](n, t), e && e.call(t.context, i, n, t), i.trigger('sync', i, n, t);
+ }),
+ D(this, t),
+ this.sync('read', this, t)
+ );
+ },
+ create: function (t, e) {
+ var i = (e = e ? n.clone(e) : {}).wait;
+ if (!(t = this._prepareModel(t, e))) return !1;
+ i || this.add(t, e);
+ var r = this,
+ o = e.success;
+ return (
+ (e.success = function (t, e, n) {
+ i && r.add(t, n), o && o.call(n.context, t, e, n);
+ }),
+ t.save(null, e),
+ t
+ );
+ },
+ parse: function (t, e) {
+ return t;
+ },
+ clone: function () {
+ return new this.constructor(this.models, { model: this.model, comparator: this.comparator });
+ },
+ modelId: function (t) {
+ return t[this.model.prototype.idAttribute || 'id'];
+ },
+ _reset: function () {
+ (this.length = 0), (this.models = []), (this._byId = {});
+ },
+ _prepareModel: function (t, e) {
+ if (this._isModel(t)) return t.collection || (t.collection = this), t;
+ (e = e ? n.clone(e) : {}).collection = this;
+ var i = new this.model(t, e);
+ return i.validationError ? (this.trigger('invalid', this, i.validationError, e), !1) : i;
+ },
+ _removeModels: function (t, e) {
+ for (var n = [], i = 0; i < t.length; i++) {
+ var r = this.get(t[i]);
+ if (r) {
+ var o = this.indexOf(r);
+ this.models.splice(o, 1),
+ this.length--,
+ e.silent || ((e.index = o), r.trigger('remove', r, this, e)),
+ n.push(r),
+ this._removeReference(r, e);
+ }
+ }
+ return !!n.length && n;
+ },
+ _isModel: function (t) {
+ return t instanceof v;
+ },
+ _addReference: function (t, e) {
+ this._byId[t.cid] = t;
+ var n = this.modelId(t.attributes);
+ null != n && (this._byId[n] = t), t.on('all', this._onModelEvent, this);
+ },
+ _removeReference: function (t, e) {
+ delete this._byId[t.cid];
+ var n = this.modelId(t.attributes);
+ null != n && delete this._byId[n],
+ this === t.collection && delete t.collection,
+ t.off('all', this._onModelEvent, this);
+ },
+ _onModelEvent: function (t, e, n, i) {
+ if (('add' !== t && 'remove' !== t) || n === this) {
+ if (('destroy' === t && this.remove(e, i), 'change' === t)) {
+ var r = this.modelId(e.previousAttributes()),
+ o = this.modelId(e.attributes);
+ r !== o && (null != r && delete this._byId[r], null != o && (this._byId[o] = e));
+ }
+ this.trigger.apply(this, arguments);
+ }
+ },
+ }),
+ s(
+ m,
+ {
+ forEach: 3,
+ each: 3,
+ map: 3,
+ collect: 3,
+ reduce: 4,
+ foldl: 4,
+ inject: 4,
+ reduceRight: 4,
+ foldr: 4,
+ find: 3,
+ detect: 3,
+ filter: 3,
+ select: 3,
+ reject: 3,
+ every: 3,
+ all: 3,
+ some: 3,
+ any: 3,
+ include: 2,
+ contains: 2,
+ invoke: 0,
+ max: 3,
+ min: 3,
+ toArray: 1,
+ size: 1,
+ first: 3,
+ head: 3,
+ take: 3,
+ initial: 3,
+ rest: 3,
+ tail: 3,
+ drop: 3,
+ last: 3,
+ without: 0,
+ difference: 0,
+ indexOf: 3,
+ shuffle: 1,
+ lastIndexOf: 3,
+ isEmpty: 1,
+ chain: 1,
+ sample: 3,
+ partition: 3,
+ },
+ 'models',
+ );
+ n.each(['groupBy', 'countBy', 'sortBy', 'indexBy'], function (t) {
+ n[t] &&
+ (m.prototype[t] = function (e, i) {
+ var r = n.isFunction(e)
+ ? e
+ : function (t) {
+ return t.get(e);
+ };
+ return n[t](this.models, r, i);
+ });
+ });
+ var x = (e.View = function (t) {
+ (this.cid = n.uniqueId('view')),
+ n.extend(this, n.pick(t, C)),
+ this._ensureElement(),
+ this.initialize.apply(this, arguments);
+ }),
+ w = /^(\S+)\s*(.*)$/,
+ C = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];
+ n.extend(x.prototype, a, {
+ tagName: 'div',
+ $: function (t) {
+ return this.$el.find(t);
+ },
+ initialize: function () {},
+ render: function () {
+ return this;
+ },
+ remove: function () {
+ return this._removeElement(), this.stopListening(), this;
+ },
+ _removeElement: function () {
+ this.$el.remove();
+ },
+ setElement: function (t) {
+ return this.undelegateEvents(), this._setElement(t), this.delegateEvents(), this;
+ },
+ _setElement: function (t) {
+ (this.$el = t instanceof e.$ ? t : e.$(t)), (this.el = this.$el[0]);
+ },
+ delegateEvents: function (t) {
+ if ((t || (t = n.result(this, 'events')), !t)) return this;
+ for (var e in (this.undelegateEvents(), t)) {
+ var i = t[e];
+ if ((n.isFunction(i) || (i = this[i]), i)) {
+ var r = e.match(w);
+ this.delegate(r[1], r[2], n.bind(i, this));
+ }
+ }
+ return this;
+ },
+ delegate: function (t, e, n) {
+ return this.$el.on(t + '.delegateEvents' + this.cid, e, n), this;
+ },
+ undelegateEvents: function () {
+ return this.$el && this.$el.off('.delegateEvents' + this.cid), this;
+ },
+ undelegate: function (t, e, n) {
+ return this.$el.off(t + '.delegateEvents' + this.cid, e, n), this;
+ },
+ _createElement: function (t) {
+ return document.createElement(t);
+ },
+ _ensureElement: function () {
+ if (this.el) this.setElement(n.result(this, 'el'));
+ else {
+ var t = n.extend({}, n.result(this, 'attributes'));
+ this.id && (t.id = n.result(this, 'id')),
+ this.className && (t.class = n.result(this, 'className')),
+ this.setElement(this._createElement(n.result(this, 'tagName'))),
+ this._setAttributes(t);
+ }
+ },
+ _setAttributes: function (t) {
+ this.$el.attr(t);
+ },
+ }),
+ (e.sync = function (t, i, r) {
+ var o = k[t];
+ n.defaults(r || (r = {}), { emulateHTTP: e.emulateHTTP, emulateJSON: e.emulateJSON });
+ var s = { type: o, dataType: 'json' };
+ if (
+ (r.url || (s.url = n.result(i, 'url') || N()),
+ null != r.data ||
+ !i ||
+ ('create' !== t && 'update' !== t && 'patch' !== t) ||
+ ((s.contentType = 'application/json'), (s.data = JSON.stringify(r.attrs || i.toJSON(r)))),
+ r.emulateJSON &&
+ ((s.contentType = 'application/x-www-form-urlencoded'),
+ (s.data = s.data ? { model: s.data } : {})),
+ r.emulateHTTP && ('PUT' === o || 'DELETE' === o || 'PATCH' === o))
+ ) {
+ (s.type = 'POST'), r.emulateJSON && (s.data._method = o);
+ var a = r.beforeSend;
+ r.beforeSend = function (t) {
+ if ((t.setRequestHeader('X-HTTP-Method-Override', o), a)) return a.apply(this, arguments);
+ };
+ }
+ 'GET' === s.type || r.emulateJSON || (s.processData = !1);
+ var l = r.error;
+ r.error = function (t, e, n) {
+ (r.textStatus = e), (r.errorThrown = n), l && l.call(r.context, t, e, n);
+ };
+ var c = (r.xhr = e.ajax(n.extend(s, r)));
+ return i.trigger('request', i, c, r), c;
+ });
+ var k = { create: 'POST', update: 'PUT', patch: 'PATCH', delete: 'DELETE', read: 'GET' };
+ e.ajax = function () {
+ return e.$.ajax.apply(e.$, arguments);
+ };
+ var S = (e.Router = function (t) {
+ t || (t = {}),
+ t.routes && (this.routes = t.routes),
+ this._bindRoutes(),
+ this.initialize.apply(this, arguments);
+ }),
+ T = /\((.*?)\)/g,
+ E = /(\(\?)?:\w+/g,
+ M = /\*\w+/g,
+ A = /[\-{}\[\]+?.,\\\^$|#\s]/g;
+ n.extend(S.prototype, a, {
+ initialize: function () {},
+ route: function (t, i, r) {
+ n.isRegExp(t) || (t = this._routeToRegExp(t)),
+ n.isFunction(i) && ((r = i), (i = '')),
+ r || (r = this[i]);
+ var o = this;
+ return (
+ e.history.route(t, function (n) {
+ var s = o._extractParameters(t, n);
+ !1 !== o.execute(r, s, i) &&
+ (o.trigger.apply(o, ['route:' + i].concat(s)),
+ o.trigger('route', i, s),
+ e.history.trigger('route', o, i, s));
+ }),
+ this
+ );
+ },
+ execute: function (t, e, n) {
+ t && t.apply(this, e);
+ },
+ navigate: function (t, n) {
+ return e.history.navigate(t, n), this;
+ },
+ _bindRoutes: function () {
+ if (this.routes) {
+ this.routes = n.result(this, 'routes');
+ for (var t, e = n.keys(this.routes); null != (t = e.pop()); ) this.route(t, this.routes[t]);
+ }
+ },
+ _routeToRegExp: function (t) {
+ return (
+ (t = t
+ .replace(A, '\\$&')
+ .replace(T, '(?:$1)?')
+ .replace(E, function (t, e) {
+ return e ? t : '([^/?]+)';
+ })
+ .replace(M, '([^?]*?)')),
+ new RegExp('^' + t + '(?:\\?([\\s\\S]*))?$')
+ );
+ },
+ _extractParameters: function (t, e) {
+ var i = t.exec(e).slice(1);
+ return n.map(i, function (t, e) {
+ return e === i.length - 1 ? t || null : t ? decodeURIComponent(t) : null;
+ });
+ },
+ });
+ var O = (e.History = function () {
+ (this.handlers = []),
+ n.bindAll(this, 'checkUrl'),
+ 'undefined' != typeof window &&
+ ((this.location = window.location), (this.history = window.history));
+ }),
+ P = /^[#\/]|\s+$/g,
+ _ = /^\/+|\/+$/g,
+ L = /#.*$/;
+ (O.started = !1),
+ n.extend(O.prototype, a, {
+ interval: 50,
+ atRoot: function () {
+ var t = this.location.pathname.replace(/[^\/]$/, '$&/');
+ return t === this.root && !this.getSearch();
+ },
+ matchRoot: function () {
+ var t = this.decodeFragment(this.location.pathname),
+ e = t.slice(0, this.root.length - 1) + '/';
+ return e === this.root;
+ },
+ decodeFragment: function (t) {
+ return decodeURI(t.replace(/%25/g, '%2525'));
+ },
+ getSearch: function () {
+ var t = this.location.href.replace(/#.*/, '').match(/\?.+/);
+ return t ? t[0] : '';
+ },
+ getHash: function (t) {
+ var e = (t || this).location.href.match(/#(.*)$/);
+ return e ? e[1] : '';
+ },
+ getPath: function () {
+ var t = this.decodeFragment(this.location.pathname + this.getSearch()).slice(
+ this.root.length - 1,
+ );
+ return '/' === t.charAt(0) ? t.slice(1) : t;
+ },
+ getFragment: function (t) {
+ return (
+ null == t &&
+ (t = this._usePushState || !this._wantsHashChange ? this.getPath() : this.getHash()),
+ t.replace(P, '')
+ );
+ },
+ start: function (t) {
+ if (O.started) throw new Error('Backbone.history has already been started');
+ if (
+ ((O.started = !0),
+ (this.options = n.extend({ root: '/' }, this.options, t)),
+ (this.root = this.options.root),
+ (this._wantsHashChange = !1 !== this.options.hashChange),
+ (this._hasHashChange = 'onhashchange' in window),
+ (this._useHashChange = this._wantsHashChange && this._hasHashChange),
+ (this._wantsPushState = !!this.options.pushState),
+ (this._hasPushState = !(!this.history || !this.history.pushState)),
+ (this._usePushState = this._wantsPushState && this._hasPushState),
+ (this.fragment = this.getFragment()),
+ (this.root = ('/' + this.root + '/').replace(_, '/')),
+ this._wantsHashChange && this._wantsPushState)
+ ) {
+ if (!this._hasPushState && !this.atRoot()) {
+ var e = this.root.slice(0, -1) || '/';
+ return this.location.replace(e + '#' + this.getPath()), !0;
+ }
+ this._hasPushState && this.atRoot() && this.navigate(this.getHash(), { replace: !0 });
+ }
+ if (!this._hasHashChange && this._wantsHashChange && !this._usePushState) {
+ (this.iframe = document.createElement('iframe')),
+ (this.iframe.src = 'javascript:0'),
+ (this.iframe.style.display = 'none'),
+ (this.iframe.tabIndex = -1);
+ var i = document.body,
+ r = i.insertBefore(this.iframe, i.firstChild).contentWindow;
+ r.document.open(), r.document.close(), (r.location.hash = '#' + this.fragment);
+ }
+ var o =
+ window.addEventListener ||
+ function (t, e) {
+ return attachEvent('on' + t, e);
+ };
+ if (
+ (this._usePushState
+ ? o('popstate', this.checkUrl, !1)
+ : this._useHashChange && !this.iframe
+ ? o('hashchange', this.checkUrl, !1)
+ : this._wantsHashChange &&
+ (this._checkUrlInterval = setInterval(this.checkUrl, this.interval)),
+ !this.options.silent)
+ )
+ return this.loadUrl();
+ },
+ stop: function () {
+ var t =
+ window.removeEventListener ||
+ function (t, e) {
+ return detachEvent('on' + t, e);
+ };
+ this._usePushState
+ ? t('popstate', this.checkUrl, !1)
+ : this._useHashChange && !this.iframe && t('hashchange', this.checkUrl, !1),
+ this.iframe && (document.body.removeChild(this.iframe), (this.iframe = null)),
+ this._checkUrlInterval && clearInterval(this._checkUrlInterval),
+ (O.started = !1);
+ },
+ route: function (t, e) {
+ this.handlers.unshift({ route: t, callback: e });
+ },
+ checkUrl: function (t) {
+ var e = this.getFragment();
+ if (
+ (e === this.fragment && this.iframe && (e = this.getHash(this.iframe.contentWindow)),
+ e === this.fragment)
+ )
+ return !1;
+ this.iframe && this.navigate(e), this.loadUrl();
+ },
+ loadUrl: function (t) {
+ return (
+ !!this.matchRoot() &&
+ ((t = this.fragment = this.getFragment(t)),
+ n.any(this.handlers, function (e) {
+ if (e.route.test(t)) return e.callback(t), !0;
+ }))
+ );
+ },
+ navigate: function (t, e) {
+ if (!O.started) return !1;
+ (e && !0 !== e) || (e = { trigger: !!e }), (t = this.getFragment(t || ''));
+ var n = this.root;
+ ('' !== t && '?' !== t.charAt(0)) || (n = n.slice(0, -1) || '/');
+ var i = n + t;
+ if (((t = this.decodeFragment(t.replace(L, ''))), this.fragment !== t)) {
+ if (((this.fragment = t), this._usePushState))
+ this.history[e.replace ? 'replaceState' : 'pushState']({}, document.title, i);
+ else {
+ if (!this._wantsHashChange) return this.location.assign(i);
+ if (
+ (this._updateHash(this.location, t, e.replace),
+ this.iframe && t !== this.getHash(this.iframe.contentWindow))
+ ) {
+ var r = this.iframe.contentWindow;
+ e.replace || (r.document.open(), r.document.close()),
+ this._updateHash(r.location, t, e.replace);
+ }
+ }
+ return e.trigger ? this.loadUrl(t) : void 0;
+ }
+ },
+ _updateHash: function (t, e, n) {
+ if (n) {
+ var i = t.href.replace(/(javascript:|#).*$/, '');
+ t.replace(i + '#' + e);
+ } else t.hash = '#' + e;
+ },
+ }),
+ (e.history = new O());
+ v.extend =
+ m.extend =
+ S.extend =
+ x.extend =
+ O.extend =
+ function (t, e) {
+ var i,
+ r = this;
+ i =
+ t && n.has(t, 'constructor')
+ ? t.constructor
+ : function () {
+ return r.apply(this, arguments);
+ };
+ n.extend(i, r, e);
+ var o = function () {
+ this.constructor = i;
+ };
+ (o.prototype = r.prototype), (i.prototype = new o()), t && n.extend(i.prototype, t);
+ return (i.__super__ = r.prototype), i;
+ };
+ var N = function () {
+ throw new Error('A "url" property or function must be specified');
+ },
+ D = function (t, e) {
+ var n = e.error;
+ e.error = function (i) {
+ n && n.call(e.context, t, i, e), t.trigger('error', t, i, e);
+ };
+ };
+ return e;
+ })(a, n, t, e);
+ }.apply(e, r)) || (t.exports = o);
+ })();
+ }).call(this, n(11));
+ },
+ function (t, e, n) {
+ var i, r, o;
+ /*!
+ * Backbone.Undo.js v0.2
+ *
+ * Copyright (c)2013 Oliver Sartun
+ * Released under the MIT License
+ *
+ * Documentation and full license available at
+ * https://github.com/osartun/Backbone.Undo.js
+ */ (r = [n(84), n(223)]),
+ void 0 ===
+ (o =
+ 'function' ==
+ typeof (i = function (t, e) {
+ var n = Array.prototype.slice;
+ function i(t, e, n) {
+ return n.length <= 4 ? t.call(e, n[0], n[1], n[2], n[3]) : t.apply(e, n);
+ }
+ function r(t, e) {
+ return n.call(t, e);
+ }
+ function o(e, n) {
+ return (
+ null != e &&
+ (t.isArray(n) || (n = r(arguments, 1)),
+ t.all(n, function (t) {
+ return t in e;
+ }))
+ );
+ }
+ var s = (function () {
+ var e = !1,
+ n = -1;
+ return function () {
+ return (
+ e ||
+ (n++,
+ (e = !0),
+ t.defer(function () {
+ e = !1;
+ })),
+ n
+ );
+ };
+ })();
+ function a() {
+ (this.registeredObjects = []), (this.cidIndexes = []);
+ }
+ function l(e, n, i, r) {
+ for (var o, s = 0, a = n.length; s < a; s++)
+ if ((o = n[s])) {
+ if ('on' === e) {
+ if (!r.objectRegistry.register(o)) continue;
+ } else if (!r.objectRegistry.unregister(o)) continue;
+ t.isFunction(o[e]) && o[e]('all', i, r);
+ }
+ }
+ function c(e, n) {
+ var i = n.type,
+ r = n.undoTypes,
+ o = !r[i] || r[i][e];
+ t.isFunction(o) && o(n.object, n.before, n.after, n.options);
+ }
+ function u(e, i, r, o, s) {
+ if (
+ !(
+ r.isCurrentlyUndoRedoing ||
+ ('undo' === e && -1 === r.pointer) ||
+ ('redo' === e && r.pointer === r.length - 1)
+ )
+ ) {
+ r.isCurrentlyUndoRedoing = !0;
+ var a,
+ l,
+ c = 'undo' === e;
+ for (
+ s
+ ? (l =
+ (c && r.pointer === r.length - 1) || (!c && -1 === r.pointer)
+ ? t.clone(r.models)
+ : n.apply(r.models, c ? [0, r.pointer] : [r.pointer, r.length - 1]))
+ : ((a = r.at(c ? r.pointer : r.pointer + 1)),
+ (l = o ? r.where({ magicFusionIndex: a.get('magicFusionIndex') }) : [a])),
+ r.pointer += (c ? -1 : 1) * l.length;
+ (a = c ? l.pop() : l.shift());
+
+ )
+ a[e]();
+ (r.isCurrentlyUndoRedoing = !1), i.trigger(e, i);
+ }
+ }
+ function h(t, e, n, r) {
+ if (
+ t.track &&
+ !t.isCurrentlyUndoRedoing &&
+ e in r &&
+ (function (t, e) {
+ var n = t.condition,
+ r = typeof n;
+ return 'function' === r ? !!i(n, t, e) : 'boolean' !== r || n;
+ })(r[e], n)
+ ) {
+ var a = i(r[e].on, r[e], n);
+ if (o(a, 'object', 'before', 'after')) {
+ if (((a.type = e), (a.magicFusionIndex = s()), (a.undoTypes = r), t.pointer < t.length - 1))
+ for (var l = t.length - t.pointer - 1; l--; ) t.pop();
+ (t.pointer = t.length), t.add(a), t.length > t.maximumStackLength && (t.shift(), t.pointer--);
+ }
+ }
+ }
+ a.prototype = {
+ isRegistered: function (e) {
+ return e && e.cid ? this.registeredObjects[e.cid] : t.contains(this.registeredObjects, e);
+ },
+ register: function (t) {
+ return (
+ !this.isRegistered(t) &&
+ (t && t.cid
+ ? ((this.registeredObjects[t.cid] = t), this.cidIndexes.push(t.cid))
+ : this.registeredObjects.push(t),
+ !0)
+ );
+ },
+ unregister: function (e) {
+ if (this.isRegistered(e)) {
+ if (e && e.cid)
+ delete this.registeredObjects[e.cid],
+ this.cidIndexes.splice(t.indexOf(this.cidIndexes, e.cid), 1);
+ else {
+ var n = t.indexOf(this.registeredObjects, e);
+ this.registeredObjects.splice(n, 1);
+ }
+ return !0;
+ }
+ return !1;
+ },
+ get: function () {
+ return t
+ .map(
+ this.cidIndexes,
+ function (t) {
+ return this.registeredObjects[t];
+ },
+ this,
+ )
+ .concat(this.registeredObjects);
+ },
+ };
+ var d = {
+ add: {
+ undo: function (t, e, n, i) {
+ t.remove(n, i);
+ },
+ redo: function (t, e, n, i) {
+ i.index && (i.at = i.index), t.add(n, i);
+ },
+ on: function (e, n, i) {
+ return { object: n, before: void 0, after: e, options: t.clone(i) };
+ },
+ },
+ remove: {
+ undo: function (t, e, n, i) {
+ 'index' in i && (i.at = i.index), t.add(e, i);
+ },
+ redo: function (t, e, n, i) {
+ t.remove(e, i);
+ },
+ on: function (e, n, i) {
+ return { object: n, before: e, after: void 0, options: t.clone(i) };
+ },
+ },
+ change: {
+ undo: function (e, n, i, r) {
+ t.isEmpty(n)
+ ? t.each(t.keys(i), e.unset, e)
+ : (e.set(n),
+ r &&
+ r.unsetData &&
+ r.unsetData.before &&
+ r.unsetData.before.length &&
+ t.each(r.unsetData.before, e.unset, e));
+ },
+ redo: function (e, n, i, r) {
+ t.isEmpty(i)
+ ? t.each(t.keys(n), e.unset, e)
+ : (e.set(i),
+ r &&
+ r.unsetData &&
+ r.unsetData.after &&
+ r.unsetData.after.length &&
+ t.each(r.unsetData.after, e.unset, e));
+ },
+ on: function (e, n) {
+ var i = e.changedAttributes(),
+ r = t.keys(i),
+ o = t.pick(e.previousAttributes(), r),
+ s = t.keys(o),
+ a = ((n || (n = {})).unsetData = { after: [], before: [] });
+ return (
+ r.length != s.length &&
+ (r.length > s.length
+ ? t.each(
+ r,
+ function (t) {
+ t in o || a.before.push(t);
+ },
+ this,
+ )
+ : t.each(s, function (t) {
+ t in i || a.after.push(t);
+ })),
+ { object: e, before: o, after: i, options: t.clone(n) }
+ );
+ },
+ },
+ reset: {
+ undo: function (t, e, n) {
+ t.reset(e);
+ },
+ redo: function (t, e, n) {
+ t.reset(n);
+ },
+ on: function (e, n) {
+ return { object: e, before: n.previousModels, after: t.clone(e.models) };
+ },
+ },
+ };
+ function f() {}
+ function p(e, n, i, r) {
+ if ('object' == typeof n)
+ return t.each(n, function (t, n) {
+ 2 === e ? p(e, t, i, r) : p(e, n, t, i);
+ });
+ switch (e) {
+ case 0:
+ o(i, 'undo', 'redo', 'on') && t.all(t.pick(i, 'undo', 'redo', 'on'), t.isFunction) && (r[n] = i);
+ break;
+ case 1:
+ r[n] && t.isObject(i) && (r[n] = t.extend({}, r[n], i));
+ break;
+ case 2:
+ delete r[n];
+ }
+ return this;
+ }
+ f.prototype = d;
+ var g = e.Model.extend({
+ defaults: { type: null, object: null, before: null, after: null, magicFusionIndex: null },
+ undo: function (t) {
+ c('undo', this.attributes);
+ },
+ redo: function (t) {
+ c('redo', this.attributes);
+ },
+ }),
+ v = e.Collection.extend({
+ model: g,
+ pointer: -1,
+ track: !1,
+ isCurrentlyUndoRedoing: !1,
+ maximumStackLength: 1 / 0,
+ setMaxLength: function (t) {
+ this.maximumStackLength = t;
+ },
+ }),
+ m = e.Model.extend({
+ defaults: { maximumStackLength: 1 / 0, track: !1 },
+ initialize: function (e) {
+ (this.stack = new v()),
+ (this.objectRegistry = new a()),
+ (this.undoTypes = new f()),
+ this.stack.setMaxLength(this.get('maximumStackLength')),
+ this.on(
+ 'change:maximumStackLength',
+ function (t, e) {
+ this.stack.setMaxLength(e);
+ },
+ this,
+ ),
+ e && e.track && this.startTracking(),
+ e &&
+ e.register &&
+ (t.isArray(e.register) || t.isArguments(e.register)
+ ? i(this.register, this, e.register)
+ : this.register(e.register));
+ },
+ startTracking: function () {
+ this.set('track', !0), (this.stack.track = !0);
+ },
+ stopTracking: function () {
+ this.set('track', !1), (this.stack.track = !1);
+ },
+ isTracking: function () {
+ return this.get('track');
+ },
+ _addToStack: function (t) {
+ h(this.stack, t, r(arguments, 1), this.undoTypes);
+ },
+ register: function () {
+ l('on', arguments, this._addToStack, this);
+ },
+ unregister: function () {
+ l('off', arguments, this._addToStack, this);
+ },
+ unregisterAll: function () {
+ i(this.unregister, this, this.objectRegistry.get());
+ },
+ undo: function (t) {
+ u('undo', this, this.stack, t);
+ },
+ undoAll: function () {
+ u('undo', this, this.stack, !1, !0);
+ },
+ redo: function (t) {
+ u('redo', this, this.stack, t);
+ },
+ redoAll: function () {
+ u('redo', this, this.stack, !1, !0);
+ },
+ isAvailable: function (t) {
+ var e = this.stack,
+ n = e.length;
+ switch (t) {
+ case 'undo':
+ return n > 0 && e.pointer > -1;
+ case 'redo':
+ return n > 0 && e.pointer < n - 1;
+ default:
+ return !1;
+ }
+ },
+ merge: function (e) {
+ for (var n, i = t.isArray(e) ? e : r(arguments); (n = i.pop()); )
+ n instanceof m && n.stack instanceof v && (n.stack = this.stack);
+ },
+ addUndoType: function (t, e) {
+ p(0, t, e, this.undoTypes);
+ },
+ changeUndoType: function (t, e) {
+ p(1, t, e, this.undoTypes);
+ },
+ removeUndoType: function (t) {
+ p(2, t, void 0, this.undoTypes);
+ },
+ clear: function () {
+ this.stack.reset(), (this.stack.pointer = -1);
+ },
+ });
+ return (
+ t.extend(m, {
+ defaults: function (e) {
+ t.extend(m.prototype.defaults, e);
+ },
+ addUndoType: function (t, e) {
+ p(0, t, e, d);
+ },
+ changeUndoType: function (t, e) {
+ p(1, t, e, d);
+ },
+ removeUndoType: function (t) {
+ p(2, t, void 0, d);
+ },
+ }),
+ (e.UndoManager = m)
+ );
+ })
+ ? i.apply(e, r)
+ : i) || (t.exports = o);
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i =
+ Object.assign ||
+ function (t) {
+ for (var e = 1; e < arguments.length; e++) {
+ var n = arguments[e];
+ for (var i in n) Object.prototype.hasOwnProperty.call(n, i) && (t[i] = n[i]);
+ }
+ return t;
+ },
+ r = (function (t) {
+ return t && t.__esModule ? t : { default: t };
+ })(n(224));
+ t.exports = function () {
+ var t = void 0,
+ e = void 0,
+ n = void 0,
+ o = void 0,
+ s = {};
+ return {
+ name: 'UndoManager',
+ init: function () {
+ var a = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
+ (n = i({}, a, s)),
+ (t = n.em),
+ (this.em = t),
+ (e = new r.default({ track: !0, register: [] })).changeUndoType('change', { condition: !1 }),
+ e.changeUndoType('add', {
+ on: function (t, e) {
+ var n = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : {};
+ if (!n.avoidStore) return { object: e, before: void 0, after: t, options: i({}, n) };
+ },
+ }),
+ e.changeUndoType('remove', {
+ on: function (t, e) {
+ var n = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : {};
+ if (!n.avoidStore) return { object: e, before: t, after: void 0, options: i({}, n) };
+ },
+ });
+ var l = {
+ on: function (t, e) {
+ var n = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : {};
+ if ((!o && (o = t.previousAttributes()), !n.avoidStore)) {
+ var i = { object: t, before: o, after: t.toJSON() };
+ return (o = null), i;
+ }
+ },
+ undo: function (t, e, n, i) {
+ t.set(e);
+ },
+ redo: function (t, e, n, i) {
+ t.set(n);
+ },
+ };
+ return (
+ ['style', 'attributes', 'content', 'src'].forEach(function (t) {
+ return e.addUndoType('change:' + t, l);
+ }),
+ e.on('undo redo', function () {
+ return t.trigger('component:toggled change:canvasOffset');
+ }),
+ ['undo', 'redo'].forEach(function (n) {
+ return e.on(n, function () {
+ return t.trigger(n);
+ });
+ }),
+ this
+ );
+ },
+ getConfig: function () {
+ return n;
+ },
+ add: function (t) {
+ return e.register(t), this;
+ },
+ remove: function (t) {
+ return e.unregister(t), this;
+ },
+ removeAll: function () {
+ return e.unregisterAll(), this;
+ },
+ start: function () {
+ return e.startTracking(), this;
+ },
+ stop: function () {
+ return e.stopTracking(), this;
+ },
+ undo: function () {
+ return t.get('Canvas').isInputFocused() || e.undo(1), this;
+ },
+ undoAll: function () {
+ return e.undoAll(), this;
+ },
+ redo: function () {
+ return t.get('Canvas').isInputFocused() || e.redo(1), this;
+ },
+ redoAll: function () {
+ return e.redoAll(), this;
+ },
+ hasUndo: function () {
+ return e.isAvailable('undo');
+ },
+ hasRedo: function () {
+ return e.isAvailable('redo');
+ },
+ getStack: function () {
+ return e.stack;
+ },
+ clear: function () {
+ return e.clear(), this;
+ },
+ getInstance: function () {
+ return e;
+ },
+ };
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i =
+ 'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator
+ ? function (t) {
+ return typeof t;
+ }
+ : function (t) {
+ return t && 'function' == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype
+ ? 'symbol'
+ : typeof t;
+ },
+ r =
+ Object.assign ||
+ function (t) {
+ for (var e = 1; e < arguments.length; e++) {
+ var n = arguments[e];
+ for (var i in n) Object.prototype.hasOwnProperty.call(n, i) && (t[i] = n[i]);
+ }
+ return t;
+ },
+ o = n(1),
+ s = n(85);
+ t.exports = function () {
+ var t = void 0,
+ e = void 0,
+ n = {},
+ a = {
+ defaults: {
+ 'core:undo': { keys: '⌘+z, ctrl+z', handler: 'core:undo' },
+ 'core:redo': { keys: '⌘+shift+z, ctrl+shift+z', handler: 'core:redo' },
+ 'core:copy': { keys: '⌘+c, ctrl+c', handler: 'core:copy' },
+ 'core:paste': { keys: '⌘+v, ctrl+v', handler: 'core:paste' },
+ 'core:component-next': { keys: 's', handler: 'core:component-next' },
+ 'core:component-prev': { keys: 'w', handler: 'core:component-prev' },
+ 'core:component-enter': { keys: 'd', handler: 'core:component-enter' },
+ 'core:component-exit': { keys: 'a', handler: 'core:component-exit' },
+ 'core:component-delete': { keys: 'backspace, delete', handler: 'core:component-delete' },
+ },
+ };
+ return {
+ keymaster: s,
+ name: 'Keymaps',
+ getConfig: function () {
+ return e;
+ },
+ init: function () {
+ var n = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
+ return (e = r({}, a, n)), (t = e.em), (this.em = t), this;
+ },
+ onLoad: function () {
+ var t = e.defaults;
+ for (var n in t) {
+ var i = t[n];
+ this.add(n, i.keys, i.handler);
+ }
+ },
+ add: function (t, e, r) {
+ var a = this.em,
+ l = a.get('Commands'),
+ c = a.getEditor(),
+ u = { id: t, keys: e, handler: r };
+ return (
+ n[t] && this.remove(t),
+ (n[t] = u),
+ s(e, function (e, n) {
+ 'object' == (void 0 === (r = (0, o.isString)(r) ? l.get(r) : r) ? 'undefined' : i(r)) ? r.run(c) : r(c);
+ var s = [t, n.shortcut, e];
+ a.trigger.apply(a, ['keymap:emit'].concat(s)), a.trigger.apply(a, ['keymap:emit:' + t].concat(s));
+ }),
+ a.trigger('keymap:add', u),
+ u
+ );
+ },
+ get: function (t) {
+ return n[t];
+ },
+ getAll: function () {
+ return n;
+ },
+ remove: function (t) {
+ var e = this.em,
+ i = this.get(t);
+ if (i) return delete n[t], s.unbind(i.keys), e && e.trigger('keymap:remove', i), i;
+ },
+ };
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = (function (t) {
+ return t && t.__esModule ? t : { default: t };
+ })(n(0)).default.$;
+ t.exports = {
+ setKey: function (t, e) {},
+ getElementRect: function (t) {
+ var e = this.opts.posFetcher || '';
+ return e
+ ? e(t, { avoidFrameOffset: 1 })
+ : (function (t, e) {
+ var n = e || window,
+ i = t.getBoundingClientRect();
+ return { left: i.left + n.pageXOffset, top: i.top + n.pageYOffset, width: i.width, height: i.height };
+ })(t);
+ },
+ init: function (t) {
+ return (
+ this.setOptions(t),
+ (this.handleMouseDown = this.handleMouseDown.bind(this)),
+ (this.drag = this.drag.bind(this)),
+ (this.move = this.move.bind(this)),
+ (this.stop = this.stop.bind(this)),
+ this.setKey('up, right, down, left', this.handleKey),
+ this
+ );
+ },
+ setOptions: function (t) {
+ this.opts = t || {};
+ },
+ focus: function (t) {
+ if (!t || t !== this.el) {
+ this.getDocumentEl(t), this.blur(), (this.el = t), (this.handlers = this.opts.dragHandlers || [t]);
+ var e = this.getElementRect(t);
+ (this.elRect = e),
+ (this.startTop = e.top),
+ (this.startLeft = e.left),
+ this.getDocumentEl().on('mousedown', this.handleMouseDown);
+ }
+ },
+ blur: function () {
+ this.getDocumentEl().off('mousedown', this.handleMouseDown), (this.el = null);
+ },
+ start: function (t) {
+ this.startPos = this.getMousePos(t);
+ var e = this.getDocumentEl();
+ e.on('mousemove', this.drag), e.on('mouseup', this.stop);
+ var n = this.opts.onStart;
+ 'function' == typeof n && n(t, { docs: e, el: this.el, start: this.startPos, elRect: this.elRect }),
+ this.drag(t);
+ },
+ stop: function (t) {
+ var e = this.getDocumentEl();
+ e.off('mousemove', this.drag), e.off('mouseup', this.stop), (this.lockedAxis = null);
+ var n = this.opts.onEnd;
+ 'function' == typeof n &&
+ n(t, {
+ docs: e,
+ delta: this.delta,
+ end: { x: this.startLeft + this.delta.x, y: this.startTop + this.delta.y },
+ });
+ },
+ handleMouseDown: function (t) {
+ var e = t.target;
+ this.isHandler(e) && this.start(t);
+ },
+ isHandler: function (t) {
+ var e = this.handlers;
+ for (var n in e) if (e[n] === t) return !0;
+ return !1;
+ },
+ handleKey: function (t, e) {
+ switch (e.shortcut) {
+ case 'up':
+ this.move(0, -1);
+ break;
+ case 'right':
+ this.move(1, 0);
+ break;
+ case 'down':
+ this.move(0, 1);
+ break;
+ case 'left':
+ this.move(-1, 0);
+ }
+ },
+ getDocumentEl: function (t) {
+ t = t || this.el;
+ if (!this.$doc) {
+ var e = [document];
+ t && e.push(t.ownerDocument), (this.$doc = i(e));
+ }
+ return this.$doc;
+ },
+ getMousePos: function (t) {
+ var e = this.opts.mousePosFetcher;
+ return e ? e(t) : { x: t.clientX, y: t.clientY };
+ },
+ drag: function (t) {
+ var e = this.lockedAxis,
+ n = this.getMousePos(t),
+ i = { x: n.x - this.startPos.x, y: n.y - this.startPos.y };
+ if (t.shiftKey) {
+ if (!e) {
+ var r = i.x,
+ o = i.y,
+ s = Math.abs(r),
+ a = Math.abs(o);
+ o >= s || o <= -s ? (e = 'x') : (r > a || r < -a) && (e = 'y');
+ }
+ } else e = null;
+ 'x' === e && (i.x = this.startPos.x),
+ 'y' === e && (i.y = this.startPos.y),
+ (this.lockedAxis = e),
+ (this.delta = i),
+ this.move(i.x, i.y);
+ var l = this.opts.onDrag;
+ 'function' == typeof l &&
+ l(t, { delta: i, current: { x: this.startLeft + i.x, y: this.startTop + i.y }, lockedAxis: e }),
+ 0 === t.which && this.stop(t);
+ },
+ move: function (t, e) {
+ this.moveX(t), this.moveY(e);
+ },
+ moveX: function (t) {
+ var e = this.el,
+ n = (this.opts, this.startLeft + t),
+ i = this.opts.setX;
+ 'function' == typeof i ? i(n, { el: e, start: this.startLeft, delta: t }) : (e.style.left = n + 'px');
+ },
+ moveY: function (t) {
+ var e = this.el,
+ n = (this.opts, this.startTop + t),
+ i = this.opts.setY;
+ 'function' == typeof i ? i(n, { el: e, start: this.startTop, delta: t }) : (e.style.top = n + 'px');
+ },
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = (function () {
+ function t(t, e) {
+ for (var n = 0; n < e.length; n++) {
+ var i = e[n];
+ (i.enumerable = i.enumerable || !1),
+ (i.configurable = !0),
+ 'value' in i && (i.writable = !0),
+ Object.defineProperty(t, i.key, i);
+ }
+ }
+ return function (e, n, i) {
+ return n && t(e.prototype, n), i && t(e, i), e;
+ };
+ })(),
+ r = n(1),
+ o = n(2);
+ var s = {
+ mousePosFetcher: null,
+ updateTarget: null,
+ ratioDefault: 0,
+ posFetcher: null,
+ onStart: null,
+ onMove: null,
+ onEnd: null,
+ step: 1,
+ minDim: 32,
+ maxDim: '',
+ unitHeight: 'px',
+ unitWidth: 'px',
+ keyHeight: 'height',
+ keyWidth: 'width',
+ currentUnit: 1,
+ silentFrames: 0,
+ avoidContainerUpdate: 0,
+ tl: 1,
+ tc: 1,
+ tr: 1,
+ cl: 1,
+ cr: 1,
+ bl: 1,
+ bc: 1,
+ br: 1,
+ },
+ a = (function () {
+ function t() {
+ var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
+ return (
+ (function (t, e) {
+ if (!(t instanceof e)) throw new TypeError('Cannot call a class as a function');
+ })(this, t),
+ this.setOptions(e),
+ (0, r.bindAll)(this, 'handleKeyDown', 'handleMouseDown', 'move', 'stop'),
+ this
+ );
+ }
+ return (
+ i(t, [
+ {
+ key: 'getConfig',
+ value: function () {
+ return this.opts;
+ },
+ },
+ {
+ key: 'setOptions',
+ value: function () {
+ var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
+ (this.opts = (0, r.defaults)(t, s)), this.setup();
+ },
+ },
+ {
+ key: 'setup',
+ value: function () {
+ var t = this.opts,
+ e = t.prefix || '',
+ n = t.appendTo || document.body,
+ i = this.container;
+ for (
+ i ||
+ (((i = document.createElement('div')).className = e + 'resizer-c'),
+ n.appendChild(i),
+ (this.container = i));
+ i.firstChild;
+
+ )
+ i.removeChild(i.firstChild);
+ var r = {};
+ for (var o in (['tl', 'tc', 'tr', 'cl', 'cr', 'bl', 'bc', 'br'].forEach(function (e) {
+ return (r[e] = t[e]
+ ? (function (t, e) {
+ var n = e.prefix || '',
+ i = document.createElement('i');
+ return (
+ (i.className = n + 'resizer-h ' + n + 'resizer-h-' + t),
+ i.setAttribute('data-' + n + 'handler', t),
+ i
+ );
+ })(e, t)
+ : '');
+ }),
+ r)) {
+ var s = r[o];
+ s && i.appendChild(s);
+ }
+ (this.handlers = r),
+ (this.mousePosFetcher = t.mousePosFetcher),
+ (this.updateTarget = t.updateTarget),
+ (this.posFetcher = t.posFetcher),
+ (this.onStart = t.onStart),
+ (this.onMove = t.onMove),
+ (this.onEnd = t.onEnd);
+ },
+ },
+ {
+ key: 'toggleFrames',
+ value: function (t) {
+ if (this.opts.silentFrames) {
+ var e = document.querySelectorAll('iframe');
+ (0, r.each)(e, function (e) {
+ return (e.style.pointerEvents = t ? 'none' : '');
+ });
+ }
+ },
+ },
+ {
+ key: 'isHandler',
+ value: function (t) {
+ var e = this.handlers;
+ for (var n in e) if (e[n] === t) return !0;
+ return !1;
+ },
+ },
+ {
+ key: 'getFocusedEl',
+ value: function () {
+ return this.el;
+ },
+ },
+ {
+ key: 'getDocumentEl',
+ value: function () {
+ return [this.el.ownerDocument, document];
+ },
+ },
+ {
+ key: 'getElementPos',
+ value: function (t) {
+ var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
+ n = this.posFetcher || '';
+ return n
+ ? n(t, e)
+ : (function (t, e) {
+ var n = e || window,
+ i = t.getBoundingClientRect();
+ return {
+ left: i.left + n.pageXOffset,
+ top: i.top + n.pageYOffset,
+ width: i.width,
+ height: i.height,
+ };
+ })(t);
+ },
+ },
+ {
+ key: 'focus',
+ value: function (t) {
+ if (!t || t !== this.el) {
+ this.el = t;
+ var e = this.opts,
+ n = this.getElementPos(t, { target: 'container' }),
+ i = this.container.style;
+ e.avoidContainerUpdate ||
+ ((i.left = n.left + 'px'),
+ (i.top = n.top + 'px'),
+ (i.width = n.width + 'px'),
+ (i.height = n.height + 'px'),
+ (i.display = 'block')),
+ (0, o.on)(this.getDocumentEl(), 'mousedown', this.handleMouseDown);
+ }
+ },
+ },
+ {
+ key: 'blur',
+ value: function () {
+ (this.container.style.display = 'none'),
+ this.el && ((0, o.off)(this.getDocumentEl(), 'mousedown', this.handleMouseDown), (this.el = null));
+ },
+ },
+ {
+ key: 'start',
+ value: function (t) {
+ if (0 === t.button) {
+ t.preventDefault(), t.stopPropagation();
+ var e = this.el,
+ n = this.opts || {},
+ i = 'data-' + n.prefix + 'handler',
+ s = this.getElementPos(e, { target: 'el' });
+ (this.handlerAttr = t.target.getAttribute(i)),
+ (this.clickedHandler = t.target),
+ (this.startDim = { t: s.top, l: s.left, w: s.width, h: s.height }),
+ (this.rectDim = { t: s.top, l: s.left, w: s.width, h: s.height }),
+ (this.startPos = { x: t.clientX, y: t.clientY });
+ var a = this.getDocumentEl();
+ (0, o.on)(a, 'mousemove', this.move),
+ (0, o.on)(a, 'keydown', this.handleKeyDown),
+ (0, o.on)(a, 'mouseup', this.stop),
+ (0, r.isFunction)(this.onStart) && this.onStart(t, { docs: a, config: n, el: e, resizer: this }),
+ this.toggleFrames(1),
+ this.move(t);
+ }
+ },
+ },
+ {
+ key: 'move',
+ value: function (t) {
+ var e = this.onMove,
+ n = this.mousePosFetcher,
+ i = n ? n(t) : { x: t.clientX, y: t.clientY };
+ (this.currentPos = i),
+ (this.delta = { x: i.x - this.startPos.x, y: i.y - this.startPos.y }),
+ (this.keys = { shift: t.shiftKey, ctrl: t.ctrlKey, alt: t.altKey }),
+ (this.rectDim = this.calc(this)),
+ this.updateRect(0),
+ e && e(t),
+ 0 === t.which && this.stop(t);
+ },
+ },
+ {
+ key: 'stop',
+ value: function (t) {
+ var e = this.opts,
+ n = this.getDocumentEl();
+ (0, o.off)(n, 'mousemove', this.move),
+ (0, o.off)(n, 'keydown', this.handleKeyDown),
+ (0, o.off)(n, 'mouseup', this.stop),
+ this.updateRect(1),
+ this.toggleFrames(),
+ (0, r.isFunction)(this.onEnd) && this.onEnd(t, { docs: n, config: e });
+ },
+ },
+ {
+ key: 'updateRect',
+ value: function (t) {
+ var e = this.el,
+ n = this.opts,
+ i = this.rectDim,
+ o = this.container.style,
+ s = this.updateTarget,
+ a = this.getSelectedHandler(),
+ l = n.unitHeight,
+ c = n.unitWidth,
+ u = n.keyWidth,
+ h = n.keyHeight;
+ if ((0, r.isFunction)(s)) s(e, i, { store: t, selectedHandler: a, resizer: this, config: n });
+ else {
+ var d = e.style;
+ (d[u] = i.w + c), (d[h] = i.h + l);
+ }
+ var f = this.getElementPos(e, { target: 'container' });
+ n.avoidContainerUpdate ||
+ ((o.left = f.left + 'px'),
+ (o.top = f.top + 'px'),
+ (o.width = f.width + 'px'),
+ (o.height = f.height + 'px'));
+ },
+ },
+ {
+ key: 'getSelectedHandler',
+ value: function () {
+ var t = this.handlers;
+ if (this.selectedHandler) for (var e in t) if (t[e] === this.selectedHandler) return e;
+ },
+ },
+ {
+ key: 'handleKeyDown',
+ value: function (t) {
+ 27 === t.keyCode && ((this.rectDim = this.startDim), this.stop(t));
+ },
+ },
+ {
+ key: 'handleMouseDown',
+ value: function (t) {
+ var e = t.target;
+ this.isHandler(e)
+ ? ((this.selectedHandler = e), this.start(t))
+ : e !== this.el && ((this.selectedHandler = ''), this.blur());
+ },
+ },
+ {
+ key: 'calc',
+ value: function (t) {
+ var e = void 0,
+ n = this.opts || {},
+ i = n.step,
+ r = this.startDim,
+ s = n.minDim,
+ a = n.maxDim,
+ l = t.delta.x,
+ c = t.delta.y,
+ u = r.w,
+ h = r.h,
+ d = { t: 0, l: 0, w: u, h: h };
+ if (t) {
+ var f = t.handlerAttr;
+ ~f.indexOf('r') &&
+ ((e = (0, o.normalizeFloat)(u + l * i, i)),
+ (e = Math.max(s, e)),
+ a && (e = Math.min(a, e)),
+ (d.w = e)),
+ ~f.indexOf('b') &&
+ ((e = (0, o.normalizeFloat)(h + c * i, i)),
+ (e = Math.max(s, e)),
+ a && (e = Math.min(a, e)),
+ (d.h = e)),
+ ~f.indexOf('l') &&
+ ((e = (0, o.normalizeFloat)(u - l * i, i)),
+ (e = Math.max(s, e)),
+ a && (e = Math.min(a, e)),
+ (d.w = e)),
+ ~f.indexOf('t') &&
+ ((e = (0, o.normalizeFloat)(h - c * i, i)),
+ (e = Math.max(s, e)),
+ a && (e = Math.min(a, e)),
+ (d.h = e));
+ var p = n.ratioDefault ? !t.keys.shift : t.keys.shift;
+ if (f.indexOf('c') < 0 && p) {
+ var g = r.w / r.h;
+ d.w / d.h > g ? (d.h = Math.round(d.w / g)) : (d.w = Math.round(d.h * g));
+ }
+ return ~f.indexOf('l') && (d.l = r.w - d.w), ~f.indexOf('t') && (d.t = r.h - d.h), d;
+ }
+ },
+ },
+ ]),
+ t
+ );
+ })();
+ t.exports = {
+ init: function (t) {
+ return new a(t);
+ },
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ (function (e) {
+ var i =
+ Object.assign ||
+ function (t) {
+ for (var e = 1; e < arguments.length; e++) {
+ var n = arguments[e];
+ for (var i in n) Object.prototype.hasOwnProperty.call(n, i) && (t[i] = n[i]);
+ }
+ return t;
+ },
+ r = (function (t) {
+ return t && t.__esModule ? t : { default: t };
+ })(n(0)),
+ o = n(1),
+ s = n(2);
+ var a = r.default.$;
+ t.exports = r.default.View.extend({
+ initialize: function (t) {
+ (this.opt = t || {}),
+ e.bindAll(this, 'startSort', 'onMove', 'endMove', 'rollback', 'udpateOffset', 'moveDragHelper');
+ var n = t || {};
+ (this.elT = 0), (this.elL = 0), (this.borderOffset = n.borderOffset || 10);
+ var i = n.container;
+ (this.el = 'string' == typeof i ? document.querySelector(i) : i),
+ (this.$el = a(this.el)),
+ (this.containerSel = n.containerSel || 'div'),
+ (this.itemSel = n.itemSel || 'div'),
+ (this.draggable = n.draggable || !0),
+ (this.nested = n.nested || 0),
+ (this.pfx = n.pfx || ''),
+ (this.ppfx = n.ppfx || ''),
+ (this.freezeClass = n.freezeClass || this.pfx + 'freezed'),
+ (this.onStart = n.onStart || ''),
+ (this.onEndMove = n.onEndMove || ''),
+ (this.direction = n.direction || 'v'),
+ (this.onMoveClb = n.onMove || ''),
+ (this.relative = n.relative || 0),
+ (this.ignoreViewChildren = n.ignoreViewChildren || 0),
+ (this.ignoreModels = n.ignoreModels || 0),
+ (this.plh = n.placer || ''),
+ (this.wmargin = n.wmargin || 0),
+ (this.offTop = n.offsetTop || 0),
+ (this.offLeft = n.offsetLeft || 0),
+ (this.document = n.document || document),
+ (this.$document = a(this.document)),
+ (this.dropContent = null),
+ (this.em = n.em || ''),
+ (this.dragHelper = null),
+ (this.canvasRelative = n.canvasRelative || 0),
+ (this.selectOnEnd = !n.avoidSelectOnEnd),
+ this.em && this.em.on && (this.em.on('change:canvasOffset', this.udpateOffset), this.udpateOffset());
+ },
+ getContainerEl: function () {
+ if (!this.el) {
+ var t = this.opt.container;
+ (this.el = 'string' == typeof t ? document.querySelector(t) : t), (this.$el = a(this.el));
+ }
+ return this.el;
+ },
+ getDocuments: function () {
+ var t = this.em,
+ e = t && t.get('Canvas').getBody().ownerDocument,
+ n = [document];
+ return e && n.push(e), n;
+ },
+ udpateOffset: function () {
+ var t = this.em.get('canvasOffset');
+ (this.offTop = t.top), (this.offLeft = t.left);
+ },
+ setDropContent: function (t) {
+ this.dropContent = t;
+ },
+ toggleSortCursor: function (t) {
+ var e = this.em;
+ document.body, this.ppfx || this.pfx, e && e.get('Canvas').getBody();
+ t ? e && e.get('Canvas').startAutoscroll() : e && e.get('Canvas').stopAutoscroll();
+ },
+ setDragHelper: function (t, e) {
+ for (
+ var n = e || '',
+ i = t.cloneNode(1),
+ r = t.getBoundingClientRect(),
+ o = getComputedStyle(t),
+ s = '',
+ l = 0;
+ l < o.length;
+ l++
+ ) {
+ var c = o[l];
+ s += c + ':' + o.getPropertyValue(c) + ';';
+ }
+ document.body.appendChild(i),
+ (i.className += ' ' + this.pfx + 'bdrag'),
+ i.setAttribute('style', s),
+ (this.dragHelper = i),
+ (i.style.width = r.width + 'px'),
+ (i.style.height = r.height + 'px'),
+ n && this.moveDragHelper(n),
+ this.em &&
+ a(this.em.get('Canvas').getBody().ownerDocument)
+ .off('mousemove', this.moveDragHelper)
+ .on('mousemove', this.moveDragHelper),
+ a(document).off('mousemove', this.moveDragHelper).on('mousemove', this.moveDragHelper);
+ },
+ moveDragHelper: function (t) {
+ var e = t.target.ownerDocument;
+ if (this.dragHelper && e) {
+ var n = t.pageY,
+ i = t.pageX,
+ r = 0,
+ o = 0,
+ s = (e.defaultView || e.parentWindow).frameElement,
+ a = this.dragHelper.style;
+ if (s) {
+ var l = s.getBoundingClientRect();
+ (r = l.top + document.documentElement.scrollTop),
+ (o = l.left + document.documentElement.scrollLeft),
+ (n = t.clientY),
+ (i = t.clientX);
+ }
+ (a.top = n + r + 'px'), (a.left = i + o + 'px');
+ }
+ },
+ matches: function (t, e, n) {
+ return s.matches.call(t, e);
+ },
+ closest: function (t, e) {
+ if (t) {
+ for (var n = t.parentNode; n && 1 === n.nodeType; ) {
+ if (this.matches(n, e)) return n;
+ n = n.parentNode;
+ }
+ return null;
+ }
+ },
+ offset: function (t) {
+ var e = t.getBoundingClientRect();
+ return { top: e.top + document.body.scrollTop, left: e.left + document.body.scrollLeft };
+ },
+ createPlaceholder: function () {
+ var t = this.pfx,
+ e = document.createElement('div'),
+ n = document.createElement('div');
+ return (
+ (e.className = t + 'placeholder'),
+ (e.style.display = 'none'),
+ (e.style['pointer-events'] = 'none'),
+ (n.className = t + 'placeholder-int'),
+ e.appendChild(n),
+ e
+ );
+ },
+ startSort: function (t) {
+ var e = this.em,
+ n = this.itemSel,
+ i = this.containerSel,
+ r = this.getContainerEl(),
+ o = this.getDocuments(),
+ a = this.onStart,
+ l = void 0,
+ c = this.plh;
+ (this.dropModel = null),
+ (this.moved = 0),
+ t && !this.matches(t, n + ', ' + i) && (t = this.closest(t, n)),
+ (this.eV = t),
+ c || ((c = this.createPlaceholder()), r.appendChild(c), (this.plh = c)),
+ t && (l = this.getSourceModel(t)) && l.set && l.set('status', 'freezed'),
+ (0, s.on)(r, 'mousemove dragover', this.onMove),
+ (0, s.on)(o, 'mouseup dragend', this.endMove),
+ (0, s.on)(o, 'keydown', this.rollback),
+ a && a(),
+ e && e.clearSelection(),
+ this.toggleSortCursor(1),
+ e && e.trigger('sorter:drag:start', t, l);
+ },
+ getTargetModel: function (t) {
+ var e = t || this.target;
+ return a(e).data('model');
+ },
+ getSourceModel: function (t) {
+ var e = t || this.eV,
+ n = this.dropContent,
+ i = this.dropModel,
+ r = this.em;
+ if (n && r) {
+ if (!i) {
+ var o = r.get('DomComponents').getComponents(),
+ s = { avoidStore: 1, avoidChildren: 1, avoidUpdateStyle: 1, temporary: 1 },
+ l = o.add(n, s);
+ (i = o.remove(l, s)), (this.dropModel = i instanceof Array ? i[0] : i);
+ }
+ return i;
+ }
+ if (e) return a(e).data('model');
+ },
+ selectTargetModel: function (t) {
+ if (!(t instanceof r.default.Collection)) {
+ var e = this.targetModel;
+ e && e.set('status', ''), t && t.set && (t.set('status', 'selected-parent'), (this.targetModel = t));
+ }
+ },
+ onMove: function (t) {
+ var e = this.em;
+ this.moved = 1;
+ var n = this.plh,
+ i = n.style.display;
+ (i && 'none' !== i) || (n.style.display = 'block');
+ var r = this.offset(this.el);
+ (this.elT = this.wmargin ? Math.abs(r.top) : r.top), (this.elL = this.wmargin ? Math.abs(r.left) : r.left);
+ var o = t.pageY - this.elT + this.el.scrollTop,
+ s = t.pageX - this.elL + this.el.scrollLeft;
+ if (this.canvasRelative && e) {
+ var l = e.get('Canvas').getMouseRelativeCanvas(t);
+ (s = l.x), (o = l.y);
+ }
+ (this.rX = s), (this.rY = o), (this.eventMove = t);
+ var c = this.dimsFromTarget(t.target, s, o),
+ u = this.target,
+ h = this.getTargetModel(u);
+ this.selectTargetModel(h), (this.lastDims = c);
+ var d = this.findPosition(c, s, o);
+ (this.lastPos && this.lastPos.index == d.index && this.lastPos.method == d.method) ||
+ (this.movePlaceholder(this.plh, c, d, this.prevTargetDim),
+ this.$plh || (this.$plh = a(this.plh)),
+ this.canvasRelative ||
+ (this.offTop && this.$plh.css('top', '+=' + this.offTop + 'px'),
+ this.offLeft && this.$plh.css('left', '+=' + this.offLeft + 'px')),
+ (this.lastPos = d)),
+ 'function' == typeof this.onMoveClb && this.onMoveClb(t),
+ e && e.trigger('sorter:drag', { target: u, targetModel: h, dims: c, pos: d, x: s, y: o });
+ },
+ isInFlow: function (t, e) {
+ if (!t) return !1;
+ e = e || document.body;
+ var n = t;
+ return n.offsetHeight, !!this.styleInFlow(n, e);
+ },
+ styleInFlow: function (t, e) {
+ var n = t.style,
+ i = a(t);
+ if (
+ !(
+ (n.overflow && 'visible' !== n.overflow) ||
+ 'none' !== i.css('float') ||
+ (e && 'flex' == a(e).css('display'))
+ )
+ ) {
+ switch (n.position) {
+ case 'static':
+ case 'relative':
+ case '':
+ break;
+ default:
+ return;
+ }
+ switch (t.tagName) {
+ case 'TR':
+ case 'TBODY':
+ case 'THEAD':
+ case 'TFOOT':
+ return !0;
+ }
+ switch (i.css('display')) {
+ case 'block':
+ case 'list-item':
+ case 'table':
+ case 'flex':
+ return !0;
+ }
+ }
+ },
+ validTarget: function (t, e) {
+ var n = this.getSourceModel(e);
+ e = n && n.view && n.view.el;
+ var i = this.getTargetModel(t),
+ s = { valid: !0, src: e, srcModel: n, trg: (t = i && i.view && i.view.el), trgModel: i };
+ if (!e || !t) return (s.valid = !1), s;
+ var a = i.get('droppable');
+ (a = (a = a instanceof r.default.Collection ? 1 : a) instanceof Array ? a.join(', ') : a),
+ (s.dropInfo = a),
+ (a = (0, o.isString)(a) ? this.matches(e, a) : a),
+ (s.droppable = a);
+ var l = n.get('draggable');
+ return (
+ (l = l instanceof Array ? l.join(', ') : l),
+ (s.dragInfo = l),
+ (l = (0, o.isString)(l) ? this.matches(t, l) : l),
+ (s.draggable = l),
+ (a && l) || (s.valid = !1),
+ s
+ );
+ },
+ dimsFromTarget: function (t, e, n) {
+ var i = this.em,
+ r = [];
+ if (!t) return r;
+ if (
+ (this.matches(t, this.itemSel + ', ' + this.containerSel) || (t = this.closest(t, this.itemSel)),
+ this.draggable instanceof Array && (t = this.closest(t, this.draggable.join(','))),
+ !t)
+ )
+ return r;
+ if ((this.prevTarget && this.prevTarget != t && (this.prevTarget = null), !this.prevTarget)) {
+ this.targetP = this.closest(t, this.containerSel);
+ var o = this.validTarget(t);
+ if ((i && i.trigger('sorter:drag:validation', o), !o.valid && this.targetP))
+ return this.dimsFromTarget(this.targetP, e, n);
+ (this.prevTarget = t),
+ (this.prevTargetDim = this.getDim(t)),
+ (this.cacheDimsP = this.getChildrenDim(this.targetP)),
+ (this.cacheDims = this.getChildrenDim(t));
+ }
+ if (
+ (this.prevTarget == t && (r = this.cacheDims),
+ (this.target = this.prevTarget),
+ this.nearBorders(this.prevTargetDim, e, n) || (!this.nested && !this.cacheDims.length))
+ ) {
+ var s = this.targetP;
+ s && this.validTarget(s).valid && ((r = this.cacheDimsP), (this.target = s));
+ }
+ return (this.lastPos = null), r;
+ },
+ getTargetFromEl: function (t) {
+ var e = t,
+ n = void 0,
+ i = this.targetPrev,
+ r = this.em,
+ o = this.containerSel,
+ s = this.itemSel;
+ if (
+ (this.matches(e, s + ', ' + o) || (e = this.closest(e, s)),
+ this.draggable instanceof Array && (e = this.closest(e, this.draggable.join(','))),
+ i && i != e && (this.targetPrev = ''),
+ !this.targetPrev)
+ ) {
+ n = this.closest(e, o);
+ var a = this.validTarget(e);
+ if ((r && r.trigger('sorter:drag:validation', a), !a.valid && n)) return this.getTargetFromEl(n);
+ this.targetPrev = e;
+ }
+ return this.nearElBorders(e) && (n = this.closest(e, o)) && this.validTarget(n).valid && (e = n), e;
+ },
+ nearElBorders: function (t) {
+ var e = t.getBoundingClientRect(),
+ n = t.ownerDocument.body,
+ i = this.getCurrentPos(),
+ r = i.x,
+ o = i.y,
+ s = e.top + n.scrollTop,
+ a = e.left + n.scrollLeft,
+ l = e.width,
+ c = e.height;
+ if (o < s + 10 || o > s + c - 10 || r < a + 10 || r > a + l - 10) return 1;
+ },
+ getCurrentPos: function () {
+ var t = this.eventMove;
+ return { x: t.pageX || 0, y: t.pageY || 0 };
+ },
+ getDim: function (t) {
+ var e, n, i, r;
+ if (this.canvasRelative && this.em) {
+ var o = this.em.get('Canvas').getElementPos(t),
+ s = window.getComputedStyle(t),
+ a = parseFloat(s.marginTop),
+ l = parseFloat(s.marginBottom),
+ c = parseFloat(s.marginRight),
+ u = parseFloat(s.marginLeft);
+ (e = o.top - a), (n = o.left - u), (i = o.height + a + l), (r = o.width + u + c);
+ } else {
+ var h = this.offset(t);
+ (e = this.relative ? t.offsetTop : h.top - (this.wmargin ? -1 : 1) * this.elT),
+ (n = this.relative ? t.offsetLeft : h.left - (this.wmargin ? -1 : 1) * this.elL),
+ (i = t.offsetHeight),
+ (r = t.offsetWidth);
+ }
+ return [e, n, i, r];
+ },
+ getChildrenDim: function (t) {
+ var e = [];
+ if (!t) return e;
+ var n = this.getTargetModel(t);
+ n && n.view && !this.ignoreViewChildren && (t = n.view.getChildrenContainer());
+ for (var i = t.children, r = 0, o = i.length; r < o; r++) {
+ var s = i[r];
+ if (this.matches(s, this.itemSel)) {
+ var a = this.getDim(s),
+ l = this.direction;
+ (l = 'v' == l || ('h' != l && this.isInFlow(s, t))), a.push(l), a.push(s), e.push(a);
+ }
+ }
+ return e;
+ },
+ nearBorders: function (t, e, n) {
+ var i = 0,
+ r = this.borderOffset,
+ o = e || 0,
+ s = n || 0,
+ a = t[0],
+ l = t[1],
+ c = t[2],
+ u = t[3];
+ return (a + r > s || s > a + c - r || l + r > o || o > l + u - r) && (i = 1), !!i;
+ },
+ findPosition: function (t, e, n) {
+ for (
+ var i = { index: 0, method: 'before' },
+ r = 0,
+ o = 0,
+ s = 0,
+ a = 0,
+ l = 0,
+ c = 0,
+ u = 0,
+ h = 0,
+ d = 0,
+ f = t.length;
+ d < f;
+ d++
+ )
+ if (
+ ((s = (h = t[d])[1] + h[3]),
+ (u = h[0] + h[2]),
+ (l = h[1] + h[3] / 2),
+ (c = h[0] + h[2] / 2),
+ !((o && h[1] > o) || (a && c >= a) || (r && s < r)))
+ )
+ if (((i.index = d), h[4])) {
+ if (n < c) {
+ i.method = 'before';
+ break;
+ }
+ i.method = 'after';
+ } else n < u && (a = u), e < l ? ((o = l), (i.method = 'before')) : ((r = l), (i.method = 'after'));
+ return i;
+ },
+ movePlaceholder: function (t, e, n, i) {
+ var r = 0,
+ o = 0,
+ s = 0,
+ a = 0,
+ l = 'px',
+ c = n.method,
+ u = e[n.index];
+ if (
+ ((t.style.borderColor = 'transparent #62c462'),
+ (t.style.borderWidth = '3px 5px'),
+ (t.style.margin = '-3px 0 0'),
+ u)
+ )
+ u[4]
+ ? ((s = u[3] + l), (a = 'auto'), (r = 'before' == c ? u[0] - 0 : u[0] + u[2] - 0), (o = u[1]))
+ : ((s = 'auto'),
+ (a = u[2] - 0 + l),
+ (r = u[0] + 0),
+ (o = 'before' == c ? u[1] - 0 : u[1] + u[3] - 0),
+ (t.style.borderColor = '#62c462 transparent'),
+ (t.style.borderWidth = '5px 3px'),
+ (t.style.margin = '0 0 0 -3px'));
+ else {
+ if (!this.nested) return void (t.style.display = 'none');
+ i && ((r = i[0] + 5), (o = i[1] + 5), (s = parseInt(i[3]) - 10 + l), (a = 'auto'));
+ }
+ (t.style.top = r + l), (t.style.left = o + l), s && (t.style.width = s), a && (t.style.height = a);
+ },
+ endMove: function (t) {
+ var e = this,
+ n = [null],
+ i = this.getDocuments(),
+ r = this.getContainerEl(),
+ a = this.onEndMove,
+ l = this.target,
+ c = this.lastPos;
+ (0, s.off)(r, 'mousemove dragover', this.onMove),
+ (0, s.off)(i, 'mouseup dragend', this.endMove),
+ (0, s.off)(i, 'keydown', this.rollback),
+ (this.plh.style.display = 'none');
+ new RegExp('(?:^|\\s)' + this.freezeClass + '(?!\\S)', 'gi');
+ var u = this.eV;
+ if (u && this.selectOnEnd) {
+ var h = this.getSourceModel();
+ h && h.set && (h.set('status', ''), h.set('status', 'selected'));
+ }
+ if (this.moved) {
+ var d = this.toMove;
+ ((0, o.isArray)(d) ? d : d ? [d] : [u]).forEach(function (t) {
+ n.push(e.move(l, t, c));
+ });
+ }
+ this.plh && (this.plh.style.display = 'none');
+ var f = this.dragHelper;
+ f && (f.parentNode.removeChild(f), (this.dragHelper = null)),
+ this.selectTargetModel(),
+ this.toggleSortCursor(),
+ (this.toMove = null),
+ (0, o.isFunction)(a) &&
+ n.forEach(function (t) {
+ return a(t, e);
+ });
+ },
+ move: function (t, e, n) {
+ var o = this.em,
+ l = (0, s.getElement)(e);
+ o && o.trigger('component:dragEnd:before', t, l, n);
+ var c,
+ u,
+ h,
+ d = [],
+ f = n.index,
+ p = this.validTarget(t, l),
+ g = a(t).data('collection'),
+ v = p.srcModel,
+ m = p.droppable,
+ y = p.draggable,
+ b = p.dropInfo,
+ x = p.dragInfo,
+ w = this.dropContent;
+ if (((m = p.trgModel instanceof r.default.Collection ? 1 : m), g && m && y)) {
+ var C = { at: (f = 'after' === n.method ? f + 1 : f), noIncrement: 1 };
+ w
+ ? ((c = w), (C.silent = !1), (C.avoidUpdateStyle = 1))
+ : ((C.temporary = 1), (u = g.add({}, i({}, C))), v && (c = v.collection.remove(v))),
+ (h = g.add(c, C)),
+ w ? (this.dropContent = null) : g.remove(u),
+ (this.prevTarget = null);
+ } else
+ g || d.push('Target collection not found'),
+ m || d.push('Target is not droppable, accepts [' + b + ']'),
+ y || d.push('Component not draggable, acceptable by [' + x + ']'),
+ console.warn('Invalid target position: ' + d.join(', '));
+ return o && o.trigger('component:dragEnd', g, c, d), o && o.trigger('sorter:drag:end', g, c, d), h;
+ },
+ rollback: function (t) {
+ (0, s.off)(this.getDocuments(), 'keydown', this.rollback),
+ 27 == (t.which || t.keyCode) && ((this.moved = 0), this.endMove());
+ },
+ });
+ }).call(this, n(1));
+ },
+ function (t, e, n) {
+ 'use strict';
+ t.exports = function () {
+ return {
+ name: 'Utils',
+ init: function () {
+ return this;
+ },
+ Sorter: n(229),
+ Resizer: n(228),
+ Dragger: n(227),
+ };
+ };
+ },
+ function (t, e) {
+ t.exports = function (t) {
+ return (
+ t.webpackPolyfill ||
+ ((t.deprecate = function () {}),
+ (t.paths = []),
+ t.children || (t.children = []),
+ Object.defineProperty(t, 'loaded', {
+ enumerable: !0,
+ get: function () {
+ return t.l;
+ },
+ }),
+ Object.defineProperty(t, 'id', {
+ enumerable: !0,
+ get: function () {
+ return t.i;
+ },
+ }),
+ (t.webpackPolyfill = 1)),
+ t
+ );
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i =
+ Object.assign ||
+ function (t) {
+ for (var e = 1; e < arguments.length; e++) {
+ var n = arguments[e];
+ for (var i in n) Object.prototype.hasOwnProperty.call(n, i) && (t[i] = n[i]);
+ }
+ return t;
+ },
+ r = n(1),
+ o = n(2);
+ var s = [
+ n(230),
+ n(226),
+ n(225),
+ n(222),
+ n(213),
+ n(208),
+ n(205),
+ n(201),
+ n(197),
+ n(185),
+ n(178),
+ n(77),
+ n(161),
+ n(155),
+ n(150),
+ n(143),
+ n(54),
+ n(112),
+ n(105),
+ n(98),
+ ],
+ a = n(0),
+ l = a.Collection,
+ c = void 0;
+ n(90)({ Backbone: a, $: a.$ });
+ var u = a.$;
+ t.exports = a.Model.extend({
+ defaults: function () {
+ return {
+ editing: 0,
+ selected: new l(),
+ clipboard: null,
+ designerMode: !1,
+ componentHovered: null,
+ previousModel: null,
+ changesCount: 0,
+ storables: [],
+ modules: [],
+ toLoad: [],
+ opened: {},
+ device: '',
+ };
+ },
+ initialize: function () {
+ var t = this,
+ e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
+ (this.config = e),
+ this.set('Config', e),
+ this.set('modules', []),
+ this.set('toLoad', []),
+ this.set('storables', []),
+ e.el && e.fromElement && (this.config.components = e.el.innerHTML),
+ (this.attrsOrig = e.el
+ ? []
+ .concat(
+ (function (t) {
+ if (Array.isArray(t)) {
+ for (var e = 0, n = Array(t.length); e < t.length; e++) n[e] = t[e];
+ return n;
+ }
+ return Array.from(t);
+ })(e.el.attributes),
+ )
+ .reduce(function (t, e) {
+ return (t[e.nodeName] = e.nodeValue), t;
+ }, {})
+ : ''),
+ s.forEach(function (e) {
+ return t.loadModule(e);
+ }),
+ this.on('change:componentHovered', this.componentHovered, this),
+ this.on('change:changesCount', this.updateChanges, this),
+ [{ from: 'change:selectedComponent', to: 'component:toggled' }].forEach(function (e) {
+ var n = e.from,
+ i = e.to;
+ t.listenTo(t, n, function () {
+ for (var e = arguments.length, r = Array(e), o = 0; o < e; o++) r[o] = arguments[o];
+ t.trigger.apply(t, [i].concat(r)),
+ console.warn("The event '" + n + "' is deprecated, replace it with '" + i + "'");
+ });
+ });
+ },
+ getConfig: function (t) {
+ var e = this.config;
+ return (0, r.isUndefined)(t) ? e : e[t];
+ },
+ loadOnStart: function () {
+ var t = this,
+ e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null,
+ n = this.get('StorageManager');
+ this.get('toLoad').forEach(function (t) {
+ t.onLoad();
+ });
+ var i = function () {
+ t.get('modules').forEach(function (e) {
+ return e.postLoad && e.postLoad(t);
+ }),
+ e && e();
+ };
+ n && n.canAutoload() ? this.load(i) : i();
+ },
+ updateChanges: function () {
+ var t = this.get('StorageManager'),
+ e = this.get('changesCount');
+ this.config.noticeOnUnload && e
+ ? (window.onbeforeunload = function (t) {
+ return 1;
+ })
+ : (window.onbeforeunload = null),
+ t.isAutosave() && e >= t.getStepsBeforeSave() && this.store();
+ },
+ loadModule: function (t) {
+ var e = this.config,
+ n = new t(),
+ r = e[n.name.charAt(0).toLowerCase() + n.name.slice(1)] || e[n.name] || {};
+ r.pStylePrefix = e.pStylePrefix || '';
+ var o = this.get('StorageManager');
+ if (n.storageKey && n.store && n.load && o) {
+ r.stm = o;
+ var s = this.get('storables');
+ s.push(n), this.set('storables', s);
+ }
+ return (
+ (r.em = this),
+ n.init(i({}, r)),
+ !n.private && this.set(n.name, n),
+ n.onLoad && this.get('toLoad').push(n),
+ this.get('modules').push(n),
+ this
+ );
+ },
+ init: function (t) {
+ this.set('Editor', t);
+ },
+ getEditor: function () {
+ return this.get('Editor');
+ },
+ handleUpdates: function (t, e) {
+ var n = this,
+ i = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : {};
+ i.temporary ||
+ (c && clearInterval(c),
+ (c = setTimeout(function () {
+ i.avoidStore || n.set('changesCount', n.get('changesCount') + 1, i);
+ }, 0)));
+ },
+ componentHovered: function (t, e, n) {
+ var i = this.previous('componentHovered');
+ i && this.trigger('component:unhovered', i, n), e && this.trigger('component:hovered', e, n);
+ },
+ getSelected: function () {
+ return this.get('selected').last();
+ },
+ getSelectedAll: function () {
+ return this.get('selected').models;
+ },
+ setSelected: function (t) {
+ var e = this,
+ n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
+ i = (0, r.isArray)(t),
+ s = i ? t : [t],
+ a = this.get('selected');
+ i &&
+ this.removeSelected(
+ a.filter(function (t) {
+ return !(0, r.contains)(s, t);
+ }),
+ ),
+ s.forEach(function (t) {
+ var r = (0, o.getModel)(t, u);
+ (r && !r.get('selectable')) ||
+ (!i &&
+ e.removeSelected(
+ a.filter(function (t) {
+ return t !== r;
+ }),
+ ),
+ e.addSelected(r, n));
+ });
+ },
+ addSelected: function (t) {
+ var e = this,
+ n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
+ i = (0, o.getModel)(t, u);
+ ((0, r.isArray)(i) ? i : [i]).forEach(function (t) {
+ (t && !t.get('selectable')) || e.get('selected').push(t, n);
+ });
+ },
+ removeSelected: function (t) {
+ var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {};
+ this.get('selected').remove((0, o.getModel)(t, u), e);
+ },
+ toggleSelected: function (t) {
+ var e = this,
+ n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
+ i = (0, o.getModel)(t, u);
+ ((0, r.isArray)(i) ? i : [i]).forEach(function (t) {
+ e.get('selected').contains(t) ? e.removeSelected(t, n) : e.addSelected(t, n);
+ });
+ },
+ setHovered: function (t) {
+ var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
+ n = (0, o.getModel)(t, u);
+ (n && !n.get('hoverable')) ||
+ (e.forceChange && this.set('componentHovered', ''), this.set('componentHovered', n, e));
+ },
+ setComponents: function (t) {
+ return this.get('DomComponents').setComponents(t);
+ },
+ getComponents: function () {
+ var t = this.get('DomComponents'),
+ e = this.get('CodeManager');
+ if (t && e) {
+ var n = t.getComponents();
+ return e.getCode(n, 'json');
+ }
+ },
+ setStyle: function (t) {
+ for (var e = this.get('CssComposer').getAll(), n = 0, i = e.length; n < i; n++) e.pop();
+ return e.add(t), this;
+ },
+ getStyle: function () {
+ return this.get('CssComposer').getAll();
+ },
+ getHtml: function () {
+ var t = this.config,
+ e = t.exportWrapper,
+ n = t.wrappesIsBody,
+ i = t.jsInHtml ? this.getJs() : '',
+ r = this.get('DomComponents').getComponent(),
+ o = this.get('CodeManager').getCode(r, 'html', { exportWrapper: e, wrappesIsBody: n });
+ return (o += i ? '' : '');
+ },
+ getCss: function () {
+ var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
+ e = this.config,
+ n = e.wrappesIsBody,
+ i = t.avoidProtected,
+ o = (0, r.isUndefined)(t.keepUnusedStyles) ? e.keepUnusedStyles : t.keepUnusedStyles,
+ s = this.get('CssComposer'),
+ a = this.get('DomComponents').getComponent();
+ return (
+ (i ? '' : e.protectedCss) +
+ this.get('CodeManager').getCode(a, 'css', { cssc: s, wrappesIsBody: n, keepUnusedStyles: o })
+ );
+ },
+ getJs: function () {
+ var t = this.get('DomComponents').getWrapper();
+ return this.get('CodeManager').getCode(t, 'js').trim();
+ },
+ store: function (t) {
+ var e = this,
+ n = this.get('StorageManager'),
+ i = {};
+ if (n)
+ return (
+ this.get('storables').forEach(function (t) {
+ var e = t.store(1);
+ for (var n in e) i[n] = e[n];
+ }),
+ n.store(i, function (n) {
+ t && t(n), e.set('changesCount', 0), e.trigger('storage:store', i);
+ }),
+ i
+ );
+ },
+ load: function () {
+ var t = this,
+ e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : null;
+ this.getCacheLoad(1, function (n) {
+ t.get('storables').forEach(function (t) {
+ return t.load(n);
+ }),
+ e && e(n);
+ });
+ },
+ getCacheLoad: function (t, e) {
+ var n = this,
+ i = t ? 1 : 0;
+ if (this.cacheLoad && !i) return this.cacheLoad;
+ var r = this.get('StorageManager'),
+ o = [];
+ if (!r) return {};
+ this.get('storables').forEach(function (t) {
+ var e = t.storageKey;
+ ((e = 'function' == typeof e ? e() : e) instanceof Array ? e : [e]).forEach(function (t) {
+ o.push(t);
+ });
+ }),
+ r.load(o, function (t) {
+ (n.cacheLoad = t),
+ e && e(t),
+ setTimeout(function () {
+ return n.trigger('storage:load', t);
+ }, 0);
+ });
+ },
+ getDeviceModel: function () {
+ var t = this.get('device');
+ return this.get('DeviceManager').get(t);
+ },
+ runDefault: function () {
+ var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
+ e = this.get('Commands').get(this.config.defaultCommand);
+ e && !this.defaultRunning && (e.stop(this, this, t), e.run(this, this, t), (this.defaultRunning = 1));
+ },
+ stopDefault: function () {
+ var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
+ e = this.get('Commands').get(this.config.defaultCommand);
+ e && (e.stop(this, this, t), (this.defaultRunning = 0));
+ },
+ refreshCanvas: function () {
+ this.set('canvasOffset', this.get('Canvas').getOffset());
+ },
+ clearSelection: function (t) {
+ (t || window).getSelection().removeAllRanges();
+ },
+ getCurrentMedia: function () {
+ var t = this.config,
+ e = this.getDeviceModel(),
+ n = t.mediaCondition,
+ i = t.devicePreviewMode,
+ r = e && e.get('widthMedia');
+ return e && r && !i ? '(' + n + ': ' + r + ')' : '';
+ },
+ getWrapper: function () {
+ return this.get('DomComponents').getWrapper();
+ },
+ getDirtyCount: function () {
+ return this.get('changesCount');
+ },
+ destroyAll: function () {
+ var t = this.attributes,
+ e = t.DomComponents,
+ n = t.CssComposer,
+ i = t.UndoManager,
+ r = t.Panels,
+ o = t.Canvas;
+ e.clear(),
+ n.clear(),
+ i.clear().removeAll(),
+ r.getPanels().reset(),
+ o.getCanvasView().remove(),
+ this.view.remove(),
+ this.stopListening(),
+ u(this.config.el).empty().attr(this.attrsOrig);
+ },
+ setEditing: function (t) {
+ return this.set('editing', t), this;
+ },
+ isEditing: function () {
+ return !!this.get('editing');
+ },
+ data: function (t, e, n) {
+ if ((t['_gjs-data'] || (t['_gjs-data'] = {}), (0, r.isUndefined)(n))) return t['_gjs-data'][e];
+ t['_gjs-data'][e] = n;
+ },
+ });
+ },
+ function (t, e, n) {
+ 'use strict';
+ t.exports = {
+ stylePrefix: 'gjs-',
+ components: '',
+ style: '',
+ fromElement: 0,
+ noticeOnUnload: !0,
+ showOffsets: !1,
+ showOffsetsSelected: !1,
+ forceClass: !0,
+ height: '900px',
+ width: '100%',
+ baseCss:
+ '\n * {\n box-sizing: border-box;\n }\n html, body, #wrapper {\n min-height: 100%;\n }\n body {\n margin: 0;\n height: 100%;\n background-color: #fff\n }\n #wrapper {\n overflow: auto;\n overflow-x: hidden;\n }\n\n * ::-webkit-scrollbar-track {\n background: rgba(0, 0, 0, 0.1)\n }\n\n * ::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.2)\n }\n\n * ::-webkit-scrollbar {\n width: 10px\n }\n ',
+ protectedCss: '* { box-sizing: border-box; } body {margin: 0;}',
+ canvasCss: '',
+ defaultCommand: 'select-comp',
+ showToolbar: 1,
+ allowScripts: 0,
+ showDevices: 1,
+ devicePreviewMode: 0,
+ mediaCondition: 'max-width',
+ tagVarStart: '{[ ',
+ tagVarEnd: ' ]}',
+ keepEmptyTextNodes: 0,
+ jsInHtml: !0,
+ nativeDnD: 1,
+ multipleSelection: 1,
+ exportWrapper: 0,
+ wrappesIsBody: 1,
+ avoidInlineStyle: 0,
+ avoidDefaults: 0,
+ clearStyles: 0,
+ el: '',
+ undoManager: {},
+ assetManager: {},
+ canvas: {},
+ layers: {},
+ storageManager: {},
+ rte: {},
+ domComponents: {},
+ modal: {},
+ codeManager: {},
+ panels: {},
+ commands: {},
+ cssComposer: {},
+ selectorManager: {},
+ deviceManager: {
+ devices: [
+ { name: 'Desktop', width: '' },
+ { name: 'Tablet', width: '768px', widthMedia: '992px' },
+ { name: 'Mobile landscape', width: '568px', widthMedia: '768px' },
+ { name: 'Mobile portrait', width: '320px', widthMedia: '480px' },
+ ],
+ },
+ styleManager: {
+ sectors: [
+ {
+ name: 'General',
+ open: !1,
+ buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'],
+ },
+ {
+ name: 'Dimension',
+ open: !1,
+ buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
+ },
+ {
+ name: 'Typography',
+ open: !1,
+ buildProps: [
+ 'font-family',
+ 'font-size',
+ 'font-weight',
+ 'letter-spacing',
+ 'color',
+ 'line-height',
+ 'text-align',
+ 'text-shadow',
+ ],
+ properties: [
+ {
+ property: 'text-align',
+ list: [
+ { value: 'left', className: 'fa fa-align-left' },
+ { value: 'center', className: 'fa fa-align-center' },
+ { value: 'right', className: 'fa fa-align-right' },
+ { value: 'justify', className: 'fa fa-align-justify' },
+ ],
+ },
+ ],
+ },
+ {
+ name: 'Decorations',
+ open: !1,
+ buildProps: [
+ 'border-radius-c',
+ 'background-color',
+ 'border-radius',
+ 'border',
+ 'box-shadow',
+ 'background',
+ ],
+ },
+ { name: 'Extra', open: !1, buildProps: ['transition', 'perspective', 'transform'] },
+ ],
+ },
+ blockManager: {},
+ traitManager: {},
+ textViewCode: 'Code',
+ keepUnusedStyles: 0,
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i = (function (t) {
+ return t && t.__esModule ? t : { default: t };
+ })(n(20));
+ t.exports = function (t) {
+ var e = t || {},
+ r = n(233),
+ o = n(232),
+ s = n(89);
+ for (var a in r) a in e || (e[a] = r[a]);
+ e.pStylePrefix = e.stylePrefix;
+ var l = new o(e),
+ c = new s({ model: l, config: e });
+ return {
+ $: i.default,
+ editor: l,
+ DomComponents: l.get('DomComponents'),
+ LayerManager: l.get('LayerManager'),
+ CssComposer: l.get('CssComposer'),
+ StorageManager: l.get('StorageManager'),
+ AssetManager: l.get('AssetManager'),
+ BlockManager: l.get('BlockManager'),
+ TraitManager: l.get('TraitManager'),
+ SelectorManager: l.get('SelectorManager'),
+ CodeManager: l.get('CodeManager'),
+ Commands: l.get('Commands'),
+ Keymaps: l.get('Keymaps'),
+ Modal: l.get('Modal'),
+ Panels: l.get('Panels'),
+ StyleManager: l.get('StyleManager'),
+ Canvas: l.get('Canvas'),
+ UndoManager: l.get('UndoManager'),
+ DeviceManager: l.get('DeviceManager'),
+ RichTextEditor: l.get('RichTextEditor'),
+ Utils: l.get('Utils'),
+ Config: l.get('Config'),
+ init: function () {
+ return l.init(this), this;
+ },
+ getConfig: function (t) {
+ return l.getConfig(t);
+ },
+ getHtml: function (t) {
+ return l.getHtml(t);
+ },
+ getCss: function (t) {
+ return l.getCss(t);
+ },
+ getJs: function () {
+ return l.getJs();
+ },
+ getComponents: function () {
+ return l.get('DomComponents').getComponents();
+ },
+ setComponents: function (t) {
+ return l.setComponents(t), this;
+ },
+ addComponents: function (t, e) {
+ return this.getComponents().add(t, e);
+ },
+ getStyle: function () {
+ return l.get('CssComposer').getAll();
+ },
+ setStyle: function (t) {
+ return l.setStyle(t), this;
+ },
+ getSelected: function () {
+ return l.getSelected();
+ },
+ getSelectedAll: function () {
+ return l.getSelectedAll();
+ },
+ getSelectedToStyle: function () {
+ var t = l.getSelected();
+ if (t) return this.StyleManager.getModelToStyle(t);
+ },
+ select: function (t) {
+ return l.setSelected(t), this;
+ },
+ selectAdd: function (t) {
+ return l.addSelected(t), this;
+ },
+ selectRemove: function (t) {
+ return l.removeSelected(t), this;
+ },
+ selectToggle: function (t) {
+ return l.toggleSelected(t), this;
+ },
+ setDevice: function (t) {
+ return l.set('device', t), this;
+ },
+ getDevice: function () {
+ return l.get('device');
+ },
+ runCommand: function (t) {
+ var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
+ n = void 0,
+ i = l.get('Commands').get(t);
+ return i && (n = i.callRun(this, e)), n;
+ },
+ stopCommand: function (t) {
+ var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
+ n = void 0,
+ i = l.get('Commands').get(t);
+ return i && (n = i.callStop(this, e)), n;
+ },
+ store: function (t) {
+ return l.store(t);
+ },
+ load: function (t) {
+ return l.load(t);
+ },
+ getContainer: function () {
+ return e.el;
+ },
+ getDirtyCount: function () {
+ return l.getDirtyCount();
+ },
+ refresh: function () {
+ l.refreshCanvas();
+ },
+ setCustomRte: function (t) {
+ this.RichTextEditor.customRte = t;
+ },
+ on: function (t, e) {
+ return l.on(t, e);
+ },
+ off: function (t, e) {
+ return l.off(t, e);
+ },
+ trigger: function (t) {
+ return l.trigger.apply(l, arguments);
+ },
+ destroy: function () {
+ return l.destroyAll();
+ },
+ getEl: function () {
+ return c.el;
+ },
+ getModel: function () {
+ return l;
+ },
+ render: function () {
+ var t = this;
+ return (
+ l.on('loaded', function () {
+ t.UndoManager.clear(),
+ l.get('modules').forEach(function (t) {
+ t.postRender && t.postRender(c);
+ });
+ }),
+ c.render(),
+ c.el
+ );
+ },
+ };
+ };
+ },
+ function (t, e, n) {
+ 'use strict';
+ var i =
+ Object.assign ||
+ function (t) {
+ for (var e = 1; e < arguments.length; e++) {
+ var n = arguments[e];
+ for (var i in n) Object.prototype.hasOwnProperty.call(n, i) && (t[i] = n[i]);
+ }
+ return t;
+ },
+ r = c(n(20)),
+ o = c(n(234)),
+ s = n(1),
+ a = c(n(88)),
+ l = c(n(87));
+ function c(t) {
+ return t && t.__esModule ? t : { default: t };
+ }
+ (0, a.default)(),
+ (t.exports = (function () {
+ var t = new l.default(),
+ e = [],
+ n = { autorender: 1, plugins: [], pluginsOpts: {} };
+ return {
+ $: r.default,
+ editors: e,
+ plugins: t,
+ version: '0.14.21',
+ init: function () {
+ var r = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
+ a = r.container;
+ if (!a) throw new Error("'container' is required");
+ (r = i({}, n, r)).el = (0, s.isElement)(a) ? a : document.querySelector(a);
+ var l = new o.default(r).init();
+ return (
+ r.plugins.forEach(function (e) {
+ var n = t.get(e);
+ n ? n(l, r.pluginsOpts[e] || {}) : console.warn('Plugin ' + e + ' not found');
+ }),
+ l.getModel().loadOnStart(),
+ r.autorender && l.render(),
+ e.push(l),
+ l
+ );
+ },
+ };
+ })());
+ },
+ ]);
+});
diff --git a/docs/.vuepress/theme/index.js b/docs/.vuepress/theme/index.js
index 5baed348c3..85eb83a9dc 100644
--- a/docs/.vuepress/theme/index.js
+++ b/docs/.vuepress/theme/index.js
@@ -1,3 +1,3 @@
module.exports = {
- extend: '@vuepress/theme-default'
-}
\ No newline at end of file
+ extend: '@vuepress/theme-default',
+};
diff --git a/docs/.vuepress/theme/layouts/CarbonAds.vue b/docs/.vuepress/theme/layouts/CarbonAds.vue
index 6393ca9111..490aae0c53 100644
--- a/docs/.vuepress/theme/layouts/CarbonAds.vue
+++ b/docs/.vuepress/theme/layouts/CarbonAds.vue
@@ -1,9 +1,9 @@
diff --git a/docs/.vuepress/theme/layouts/Layout.vue b/docs/.vuepress/theme/layouts/Layout.vue
index df24756c4d..7bf01643c0 100644
--- a/docs/.vuepress/theme/layouts/Layout.vue
+++ b/docs/.vuepress/theme/layouts/Layout.vue
@@ -1,6 +1,6 @@
-
+
@@ -9,13 +9,13 @@
// var CarbonAds = require('./CarbonAds.vue').default;
// import Layout from '@vuepress/theme-default/layouts/Layout.vue';
// import CarbonAds from './CarbonAds.vue';
-import Layout from '@parent-theme/layouts/Layout.vue'
+import Layout from '@parent-theme/layouts/Layout.vue';
import CarbonAds from './CarbonAds.vue';
export default {
components: {
Layout,
CarbonAds,
- }
-}
+ },
+};
diff --git a/docs/Home.md b/docs/Home.md
index 92be99b71e..7aae1c693c 100644
--- a/docs/Home.md
+++ b/docs/Home.md
@@ -5,19 +5,20 @@ This page will introduce you to the main options of GrapesJS and how it works, i
The pretty minimalistic way to instantiate the editor could be like this:
```html
-
+
```
+
In just few lines, with the default configurations, you're already able to see something with which play around.
[[img/default-gjs.jpg]]
@@ -28,7 +29,6 @@ Of course all those stuff (panels, buttons, commands, etc.) are set just as defa
[[img/canvas-panels.jpg]]
-
If you'd like to extend the already instantiated editor you have to check [API Reference]. Check also [how to create plugins](./Creating-plugins) using the same API.
In this guide we'll focus on how to initialize the editor with all custom UI from scratch.
@@ -48,6 +48,7 @@ var editor = grapesjs.init({
});
...
```
+
In this example we set a panel with 'commands' as an id and after the render we'll see nothing more than an empty div added to our panels. The new panel is already styled as the id 'commands' is one of the default but you can use whatever you like and place it wherever you want with CSS. With refresh we might see something like shown in the image below, with the new panel on the left:
[[img/new-panel.png]]
@@ -79,7 +80,6 @@ Yeah, the button is pretty nice and happy, but useless without any command assig
> Check [Panels API Reference] for more details about Panels and Buttons
-
Assigning commands is pretty easy, but before you should define one or use one of defaults ([Built-in commands](./Built-in-commands)). So in this case we gonna create a new one.
```js
@@ -111,17 +111,15 @@ Assigning commands is pretty easy, but before you should define one or use one o
}
...
```
+
As you see we added a new command `helloWorld` and used its `id` as an identifier inside `button.command`. In addition to this we've also implemented two required methods, `run` and `stop`, to make button execute commands.
[[img/btn-clicked.png]]
-
> Check [Commands API Reference]
-
Check the [demo](http://grapesjs.com/demo.html) for more complete usage of panels, buttons and built-in commands.
-
## Components
Components are elements inside the canvas, which can be drawn by commands or injected directly via configurations. In simple terms components represent the structure of our HTML document. You can init the editor with passing components as an HTML string
@@ -136,6 +134,7 @@ Components are elements inside the canvas, which can be drawn by commands or inj
'',
...
```
+
We added 3 simple components with some basic style. If you refresh probably you'll see the same empty page but are actually there, you only need to highlight them.
For this purpose already exists a command, so add it to your panel in this way
@@ -161,6 +160,7 @@ For this purpose already exists a command, so add it to your panel in this way
},
...
```
+
Worth noting the use of `context` option (try to click 'smile' command without it) and `active` to enable it after the render.
Now you should be able to see blocks inside canvas.
@@ -170,7 +170,6 @@ You could add other commands to enable interactions with blocks. Check [Built-in
> Check [Components API Reference]
-
## Style Manager
Any HTML structure requires, at some point, a proper style, so to meet this need the Style Manager was added as a built-in feature in GrapesJS. Style manager is composed by sectors, which group inside different types of CSS properties. So you can add, for instance, a `Dimension` sector for `width` and `height`, and another one as `Typography` for `font-size` and `color`. So it's up to you decide how organize sectors.
@@ -377,7 +376,6 @@ As you can see using `buildProps` actually will save you a lot of work. You coul
> Check [Style Manager API Reference]
-
## Store/load data
In this last part we're gonna see how to store and load template data inside GrapesJS. You may already noticed that even if you refresh the page after changes on canvas your data are not lost and this because GrapesJS comes with some built-in storage implementation.
@@ -448,11 +446,10 @@ If you prefer you could also disable autosaving and do it by yourself using some
> Check [Storage Manager API Reference]
-
-[API Reference]:
-[Panels API Reference]:
-[Commands API Reference]:
-[Components API Reference]:
-[Style Manager API Reference]:
-[Editor API Reference]:
-[Storage Manager API Reference]:
\ No newline at end of file
+[API Reference]: API-Reference
+[Panels API Reference]: API-Panels
+[Commands API Reference]: API-Commands
+[Components API Reference]: API-Components
+[Style Manager API Reference]: API-Style-Manager
+[Editor API Reference]: API-Editor
+[Storage Manager API Reference]: API-Storage-Manager
diff --git a/docs/README.md b/docs/README.md
index 6e274f0e7c..57dc78734b 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -3,55 +3,42 @@
[[toc]]
## What is GrapesJS?
-At first glance one might think this is just another page/HTML builder, but it's something more. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you to easily create a drag & drop enabled builder of "things". By "things" we mean anything with HTML-like structure, which entails much more than web pages. We use HTML-like structure basically everywhere: Newsletters (eg. [MJML](https://mjml.io/)), Native Mobile Applications (eg. [React Native](https://github.com/facebook/react-native)), Native Desktop Applications (eg. [Vuido](https://vuido.mimec.org)), PDFs (eg. [React PDF](https://github.com/diegomura/react-pdf)), etc. So, for everything you can imagine as a set of elements like `... other nested elements ...` you can create easily a GrapesJS builder around it and then use it independently in your applications.
-GrapesJS ships with features and tools that enable you to craft easy to use builders. Which allows your users to create complex HTML-like templates without any knowledge of coding.
-
-
-
+At first glance one might think this is just another page/HTML builder, but it's something more. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you to easily create a drag & drop enabled builder of "things". By "things" we mean anything with HTML-like structure, which entails much more than web pages. We use HTML-like structure basically everywhere: Newsletters (eg. [MJML](https://mjml.io/)), Native Mobile Applications (eg. [React Native](https://github.com/facebook/react-native)), Native Desktop Applications (eg. [Vuido](https://vuido.mimec.org)), PDFs (eg. [React PDF](https://github.com/diegomura/react-pdf)), etc. So, for everything you can imagine as a set of elements like `... other nested elements ...` you can create easily a GrapesJS builder around it and then use it independently in your applications.
+GrapesJS ships with features and tools that enable you to craft easy to use builders. Which allows your users to create complex HTML-like templates without any knowledge of coding.
## Why GrapesJS?
-GrapesJS was designed primarily for use inside Content Management Systems to speed up the creation of dynamic templates and replace common WYSIWYG editors, which are good for content editing, but inappropriate for creating HTML structures. Instead of creating an application we decided to create an extensible framework that could be used by anyone for any purpose.
-
-
-
+GrapesJS was designed primarily for use inside Content Management Systems to speed up the creation of dynamic templates and replace common WYSIWYG editors, which are good for content editing, but inappropriate for creating HTML structures. Instead of creating an application we decided to create an extensible framework that could be used by anyone for any purpose.
## Quick Start
+
To showcase the power of GrapesJS we have created some presets.
-* [grapesjs-preset-webpage](https://github.com/GrapesJS/preset-webpage) - [Webpage Builder](https://grapesjs.com/demo.html)
-* [grapesjs-preset-newsletter](https://github.com/GrapesJS/preset-newsletter) - [Newsletter Builder](https://grapesjs.com/demo-newsletter-editor.html)
-* [grapesjs-mjml](https://github.com/GrapesJS/mjml) - [Newsletter Builder with MJML](https://grapesjs.com/demo-mjml.html)
+- [grapesjs-preset-webpage](https://github.com/GrapesJS/preset-webpage) - [Webpage Builder](https://grapesjs.com/demo.html)
+- [grapesjs-preset-newsletter](https://github.com/GrapesJS/preset-newsletter) - [Newsletter Builder](https://grapesjs.com/demo-newsletter-editor.html)
+- [grapesjs-mjml](https://github.com/GrapesJS/mjml) - [Newsletter Builder with MJML](https://grapesjs.com/demo-mjml.html)
You can actually use them as a starting point for your editors, so, just follow the instructions on their repositories to get a quick start for your builder.
-
-
-
-
## Download
Latest version: [](https://www.npmjs.com/package/grapesjs)
You can download GrapesJS from one of these sources
-* CDNs
- * unpkg
- * `https://unpkg.com/grapesjs`
- * `https://unpkg.com/grapesjs/dist/css/grapes.min.css`
- * cdnjs
- * `https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/grapes.min.js`
- * `https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/css/grapes.min.css`
-* npm
- * `npm i grapesjs`
-* git
- * `git clone https://github.com/GrapesJS/grapesjs.git`
-
-
-
+- CDNs
+ - unpkg
+ - `https://unpkg.com/grapesjs`
+ - `https://unpkg.com/grapesjs/dist/css/grapes.min.css`
+ - cdnjs
+ - `https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/grapes.min.js`
+ - `https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/css/grapes.min.css`
+- npm
+ - `npm i grapesjs`
+- git
+ - `git clone https://github.com/GrapesJS/grapesjs.git`
## Changelog
To track changes made in the library we rely on [Github Releases](https://github.com/GrapesJS/grapesjs/releases)
-
diff --git a/docs/api.js b/docs/api.js
index 0ac85a3002..3de0a223f5 100644
--- a/docs/api.js
+++ b/docs/api.js
@@ -15,12 +15,14 @@ const getEventsMdFromTypes = async (filePath) => {
const typesFilePath = `${dirname}types.ts`;
if (fs.existsSync(typesFilePath)) {
- const resTypes = await documentation.build([typesFilePath], { shallow: true })
- .then(cm => documentation.formats.md(cm, /*{ markdownToc: true }*/));
+ const resTypes = await documentation
+ .build([typesFilePath], { shallow: true })
+ .then((cm) => documentation.formats.md(cm /*{ markdownToc: true }*/));
const indexFrom = resTypes.indexOf(START_EVENTS) + START_EVENTS.length;
const indexTo = resTypes.indexOf(END_EVENTS);
// console.log(`${resTypes}`)
- const result = resTypes.substring(indexFrom, indexTo)
+ const result = resTypes
+ .substring(indexFrom, indexTo)
.replace(/\n### Examples\n/gi, '')
.replace(/\n## types\n/gi, '')
.replace(/## /gi, '* ')
@@ -30,92 +32,95 @@ const getEventsMdFromTypes = async (filePath) => {
.replace(/\]\\\(/gi, '](')
.trim();
- return result
+ return result;
}
return '';
-}
+};
-async function generateDocs () {
+async function generateDocs() {
log('Start API Reference generation...');
- await Promise.all([
- ['editor/index.ts', 'editor.md'],
- ['asset_manager/index.ts', 'assets.md'],
- ['asset_manager/model/Asset.ts', 'asset.md'],
- ['block_manager/index.ts', 'block_manager.md'],
- ['block_manager/model/Block.ts', 'block.md'],
- ['commands/index.ts', 'commands.md'],
- ['dom_components/index.ts', 'components.md'],
- ['dom_components/model/Component.ts', 'component.md'],
- ['panels/index.ts', 'panels.md'],
- ['style_manager/index.ts', 'style_manager.md'],
- ['style_manager/model/Sector.ts', 'sector.md'],
- ['style_manager/model/Property.ts', 'property.md'],
- ['style_manager/model/PropertyNumber.ts', 'property_number.md'],
- ['style_manager/model/PropertySelect.ts', 'property_select.md'],
- ['style_manager/model/PropertyComposite.ts', 'property_composite.md'],
- ['style_manager/model/PropertyStack.ts', 'property_stack.md'],
- ['style_manager/model/Layer.ts', 'layer.md'],
- ['storage_manager/index.ts', 'storage_manager.md'],
- ['trait_manager/index.ts', 'trait_manager.md'],
- ['trait_manager/model/Trait.ts', 'trait.md'],
- ['device_manager/index.ts', 'device_manager.md'],
- ['device_manager/model/Device.ts', 'device.md'],
- ['selector_manager/index.ts', 'selector_manager.md'],
- ['selector_manager/model/Selector.ts', 'selector.md'],
- ['selector_manager/model/State.ts', 'state.md'],
- ['css_composer/index.ts', 'css_composer.md'],
- ['css_composer/model/CssRule.ts', 'css_rule.md'],
- ['modal_dialog/index.ts', 'modal_dialog.md'],
- ['rich_text_editor/index.ts', 'rich_text_editor.md'],
- ['keymaps/index.ts', 'keymaps.md'],
- ['undo_manager/index.ts', 'undo_manager.md'],
- ['canvas/index.ts', 'canvas.md'],
- ['canvas/model/Frame.ts', 'frame.md'],
- ['canvas/model/CanvasSpot.ts', 'canvas_spot.md'],
- ['i18n/index.ts', 'i18n.md'],
- ['navigator/index.ts', 'layer_manager.md'],
- ['pages/index.ts', 'pages.md'],
- ['pages/model/Page.ts', 'page.md'],
- ['parser/index.ts', 'parser.md'],
- ].map(async (file) => {
- const filePath = `${srcRoot}/${file[0]}`;
+ await Promise.all(
+ [
+ ['editor/index.ts', 'editor.md'],
+ ['asset_manager/index.ts', 'assets.md'],
+ ['asset_manager/model/Asset.ts', 'asset.md'],
+ ['block_manager/index.ts', 'block_manager.md'],
+ ['block_manager/model/Block.ts', 'block.md'],
+ ['commands/index.ts', 'commands.md'],
+ ['dom_components/index.ts', 'components.md'],
+ ['dom_components/model/Component.ts', 'component.md'],
+ ['panels/index.ts', 'panels.md'],
+ ['style_manager/index.ts', 'style_manager.md'],
+ ['style_manager/model/Sector.ts', 'sector.md'],
+ ['style_manager/model/Property.ts', 'property.md'],
+ ['style_manager/model/PropertyNumber.ts', 'property_number.md'],
+ ['style_manager/model/PropertySelect.ts', 'property_select.md'],
+ ['style_manager/model/PropertyComposite.ts', 'property_composite.md'],
+ ['style_manager/model/PropertyStack.ts', 'property_stack.md'],
+ ['style_manager/model/Layer.ts', 'layer.md'],
+ ['storage_manager/index.ts', 'storage_manager.md'],
+ ['trait_manager/index.ts', 'trait_manager.md'],
+ ['trait_manager/model/Trait.ts', 'trait.md'],
+ ['device_manager/index.ts', 'device_manager.md'],
+ ['device_manager/model/Device.ts', 'device.md'],
+ ['selector_manager/index.ts', 'selector_manager.md'],
+ ['selector_manager/model/Selector.ts', 'selector.md'],
+ ['selector_manager/model/State.ts', 'state.md'],
+ ['css_composer/index.ts', 'css_composer.md'],
+ ['css_composer/model/CssRule.ts', 'css_rule.md'],
+ ['modal_dialog/index.ts', 'modal_dialog.md'],
+ ['rich_text_editor/index.ts', 'rich_text_editor.md'],
+ ['keymaps/index.ts', 'keymaps.md'],
+ ['undo_manager/index.ts', 'undo_manager.md'],
+ ['canvas/index.ts', 'canvas.md'],
+ ['canvas/model/Frame.ts', 'frame.md'],
+ ['canvas/model/CanvasSpot.ts', 'canvas_spot.md'],
+ ['i18n/index.ts', 'i18n.md'],
+ ['navigator/index.ts', 'layer_manager.md'],
+ ['pages/index.ts', 'pages.md'],
+ ['pages/model/Page.ts', 'page.md'],
+ ['parser/index.ts', 'parser.md'],
+ ].map(async (file) => {
+ const filePath = `${srcRoot}/${file[0]}`;
- if (!fs.existsSync(filePath)) {
- throw `File not found '${filePath}'`;
- }
+ if (!fs.existsSync(filePath)) {
+ throw `File not found '${filePath}'`;
+ }
- return documentation.build([filePath], { shallow: true })
- .then(cm => documentation.formats.md(cm, /*{ markdownToc: true }*/))
- .then(async (output) => {
- let addLogs = [];
- let result = output
- .replace(/\*\*\\\[/g, '**[')
- .replace(/\*\*\(\\\[/g, '**([')
- .replace(/<\\\[/g, '<[')
- .replace(/<\(\\\[/g, '<([')
- .replace(/\| \\\[/g, '| [')
- .replace(/\\n```js/g, '```js')
- .replace(/docsjs\./g, '')
- .replace('**Extends ModuleModel**', '')
- .replace('**Extends Model**', '');
+ return documentation
+ .build([filePath], { shallow: true })
+ .then((cm) => documentation.formats.md(cm /*{ markdownToc: true }*/))
+ .then(async (output) => {
+ let addLogs = [];
+ let result = output
+ .replace(/\*\*\\\[/g, '**[')
+ .replace(/\*\*\(\\\[/g, '**([')
+ .replace(/<\\\[/g, '<[')
+ .replace(/<\(\\\[/g, '<([')
+ .replace(/\| \\\[/g, '| [')
+ .replace(/\\n```js/g, '```js')
+ .replace(/docsjs\./g, '')
+ .replace('**Extends ModuleModel**', '')
+ .replace('**Extends Model**', '');
- // Search for module event documentation
- if (result.indexOf(REPLACE_EVENTS) >= 0) {
- const eventsMd = await getEventsMdFromTypes(filePath);
- if (eventsMd && result.indexOf(REPLACE_EVENTS) >= 0) {
- addLogs.push('replaced events');
+ // Search for module event documentation
+ if (result.indexOf(REPLACE_EVENTS) >= 0) {
+ const eventsMd = await getEventsMdFromTypes(filePath);
+ if (eventsMd && result.indexOf(REPLACE_EVENTS) >= 0) {
+ addLogs.push('replaced events');
+ }
+ result = eventsMd ? result.replace(REPLACE_EVENTS, `## Available Events\n${eventsMd}`) : result;
}
- result = eventsMd ? result.replace(REPLACE_EVENTS, `## Available Events\n${eventsMd}`) : result;
- }
- fs.writeFileSync(`${docRoot}/api/${file[1]}`, result);
- log('Created', file[1], addLogs.length ? `(${addLogs.join(', ')})` : '');
- });
- }));
+ fs.writeFileSync(`${docRoot}/api/${file[1]}`, result);
+ log('Created', file[1], addLogs.length ? `(${addLogs.join(', ')})` : '');
+ });
+ }),
+ );
log('API Reference generation done!');
-};
+}
generateDocs();
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 0c22eb62b5..0f8fb2076e 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -15,7 +15,7 @@ This is a step-by-step guide for anyone who wants to create their own builder wi
Before you start using GrapesJS, you'll have to import it. Let's import the latest version:
```html
-
+
## Traits
+
Most of the time you would style your components and place them somewhere in the structure, but sometimes your components might need custom attributes or even custom behaviors and for this need you can make use of traits. Traits are commonly used to update HTML element attributes (eg. `placeholder` for inputs or `alt` for images), but you can also define your own custom traits. Access the selected Component model and do whatever you want. For this guide, we are going to show you how to render available traits, for more details on how to extend them we suggest you read the [Trait Manager Module page](modules/Traits.html).
Let's create a new container for traits. Tell the editor where to render it and update the sidebar switcher:
@@ -469,9 +507,10 @@ const editor = grapesjs.init({
label: 'Traits',
command: 'show-traits',
togglable: false,
- }],
- }
- ]
+ },
+ ],
+ },
+ ],
},
traitManager: {
appendTo: '.traits-container',
@@ -501,6 +540,7 @@ editor.Commands.add('show-traits', {
Now if you switch to the Trait panel and select one of the inner components you should see its default traits.
## Responsive templates
+
GrapesJS implements a module which allows you to work with responsive templates easily. Let's see how to define different devices and a button for device switching:
```html{3}
@@ -511,23 +551,28 @@ GrapesJS implements a module which allows you to work with responsive templates
...
```
+
```css
.panel__devices {
position: initial;
}
```
+
```js
const editor = grapesjs.init({
// ...
deviceManager: {
- devices: [{
+ devices: [
+ {
name: 'Desktop',
width: '', // default size
- }, {
+ },
+ {
name: 'Mobile',
width: '320px', // this value will be used on canvas width
widthMedia: '480px', // this value will be used in CSS @media
- }]
+ },
+ ],
},
// ...
panels: {
@@ -536,29 +581,32 @@ const editor = grapesjs.init({
{
id: 'panel-devices',
el: '.panel__devices',
- buttons: [{
+ buttons: [
+ {
id: 'device-desktop',
label: 'D',
command: 'set-device-desktop',
active: true,
togglable: false,
- }, {
+ },
+ {
id: 'device-mobile',
label: 'M',
command: 'set-device-mobile',
togglable: false,
- }],
- }
- ]
+ },
+ ],
+ },
+ ],
},
});
// Commands
editor.Commands.add('set-device-desktop', {
- run: editor => editor.setDevice('Desktop')
+ run: (editor) => editor.setDevice('Desktop'),
});
editor.Commands.add('set-device-mobile', {
- run: editor => editor.setDevice('Mobile')
+ run: (editor) => editor.setDevice('Mobile'),
});
```
@@ -579,15 +627,18 @@ const editor = grapesjs.init({
// ...
mediaCondition: 'min-width', // default is `max-width`
deviceManager: {
- devices: [{
+ devices: [
+ {
name: 'Mobile',
width: '320',
widthMedia: '',
- }, {
+ },
+ {
name: 'Desktop',
width: '',
- widthMedia:'1024',
- }]
+ widthMedia: '1024',
+ },
+ ],
},
// ...
});
@@ -601,24 +652,26 @@ Check out the [Device Manager API](api/device_manager.html) to see all the avail
:::
## Store & load data
+
Once you have finished with defining your builder interface the next step would be to setup the storing and loading process.
GrapesJS implements 2 simple type of storages inside its Storage Manager: The local (by using `localStorage`, active by default) and the remote one. Those are enough to cover most of the cases, but it's also possible to add new implementations ([grapesjs-indexeddb](https://github.com/GrapesJS/storage-indexeddb) is a good example).
Let's see how the default options work:
```js
grapesjs.init({
- // ...
- storageManager: {
- type: 'local', // Type of the storage, available: 'local' | 'remote'
- autosave: true, // Store data automatically
- autoload: true, // Autoload stored data on init
- stepsBeforeSave: 1, // If autosave enabled, indicates how many changes are necessary before store method is triggered
- options: {
- local: { // Options for the `local` type
- key: 'gjsProject', // The key for the local storage
- },
- }
- }
+ // ...
+ storageManager: {
+ type: 'local', // Type of the storage, available: 'local' | 'remote'
+ autosave: true, // Store data automatically
+ autoload: true, // Autoload stored data on init
+ stepsBeforeSave: 1, // If autosave enabled, indicates how many changes are necessary before store method is triggered
+ options: {
+ local: {
+ // Options for the `local` type
+ key: 'gjsProject', // The key for the local storage
+ },
+ },
+ },
});
```
@@ -626,21 +679,22 @@ Let's take a look at the configuration required to setup the remote storage:
```js
grapesjs.init({
+ // ...
+ storageManager: {
+ type: 'remote',
// ...
- storageManager: {
- type: 'remote',
- // ...
- stepsBeforeSave: 10,
- options: {
- remote: {
- headers: {}, // Custom headers for the remote storage request
- urlStore: 'https://your-server/endpoint/store', // Endpoint URL where to store data project
- urlLoad: 'https://your-server/endpoint/load', // Endpoint URL where to load data project
- }
+ stepsBeforeSave: 10,
+ options: {
+ remote: {
+ headers: {}, // Custom headers for the remote storage request
+ urlStore: 'https://your-server/endpoint/store', // Endpoint URL where to store data project
+ urlLoad: 'https://your-server/endpoint/load', // Endpoint URL where to load data project
},
- }
+ },
+ },
});
```
+
As you might noticed, we've left some default options unchanged, increased changes necessary for autosave triggering and passed remote endpoints.
If you prefer you could also disable the autosaving and use a custom command to trigger the store:
@@ -669,6 +723,7 @@ If you prefer you could also disable the autosaving and use a custom command to
To get a better overview of the Storage Manager and how you should store/load the template, or how to define new storages you should read the [Storage Manager Module](modules/Storage.html) page.
## Theming
+
One last step that might actually improve a lot your editor personality is how it looks visually. To achieve an easy theming we have adapted an atomic design for this purpose. So for example to customize the main palette of colors all you have to do is to place your custom CSS rules after the GrapesJS styles.
To complete our builder let's customize its color palette and to make it more visually "readable" we can replace all button labels with SVG icons:
@@ -706,6 +761,7 @@ To complete our builder let's customize its color palette and to make it more vi
There is also a bunch of [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) that you can use to customize the styles of the editor.
For example, you could achieve the same result as above by doing this:
+
```css
:root {
--gjs-primary-color: #78366a;
@@ -715,10 +771,8 @@ For example, you could achieve the same result as above by doing this:
}
```
-
And here is our final result:
-
diff --git a/docs/guides/Custom-CSS-parser.md b/docs/guides/Custom-CSS-parser.md
index 8222a076b0..721b6b940f 100644
--- a/docs/guides/Custom-CSS-parser.md
+++ b/docs/guides/Custom-CSS-parser.md
@@ -1,9 +1,10 @@
---
title: Use Custom CSS Parser
---
+
# Use Custom CSS Parser
-If you just use GrapesJS for building templates from scratch, so you start from an empty canvas and for editing you strictly rely on the generated JSON (final HTML/CSS only for end-users) then, probably, you might skip this guide. On the other hand, if you import templates from already defined HTML/CSS or let the user embed custom codes (eg. using the [grapesjs-custom-code](https://github.com/GrapesJS/components-custom-code) plugin), then you have to know that you might face strange behaviors.
+If you just use GrapesJS for building templates from scratch, so you start from an empty canvas and for editing you strictly rely on the generated JSON (final HTML/CSS only for end-users) then, probably, you might skip this guide. On the other hand, if you import templates from already defined HTML/CSS or let the user embed custom codes (eg. using the [grapesjs-custom-code](https://github.com/GrapesJS/components-custom-code) plugin), then you have to know that you might face strange behaviors.
::: warning
This guide requires GrapesJS v0.14.33 or higher
@@ -11,7 +12,6 @@ This guide requires GrapesJS v0.14.33 or higher
[[toc]]
-
## Import HTML/CSS
Importing already defined HTML/CSS is a really good feature as it lets you start editing immediately any kind of template and obviously, GrapesJS itself promotes this kind of approach
@@ -19,13 +19,17 @@ Importing already defined HTML/CSS is a really good feature as it lets you start
```html
Hello world!
-
+
```
@@ -80,10 +84,10 @@ So, for our case we just take in account a simple rule, we'll parse it and print
for (var i = 0, len = style.length; i < len; i++) {
var property = style[i];
var value = style.getPropertyValue(property);
- styleStr += "\t" + property + ': ' + value + ";\n";
+ styleStr += '\t' + property + ': ' + value + ';\n';
}
var result = document.getElementById('result');
- result.innerHTML = rule.selectorText + " {\n" + styleStr + "}";
+ result.innerHTML = rule.selectorText + ' {\n' + styleStr + '}';
}
var css = document.getElementById('css-to-parse').innerText;
@@ -92,6 +96,7 @@ So, for our case we just take in account a simple rule, we'll parse it and print
```
### Results
+
Here some results (using latest versions + IE11)
@@ -115,10 +120,10 @@ The custom parser you have to use it's just a function receiving 2 arguments: `c
const parserCss = (css, editor) => {
const result = [];
// ... parse the CSS string
- result.push({
- selectors: '.someclass, div .otherclass',
- style: { color: 'red' }
- })
+ result.push({
+ selectors: '.someclass, div .otherclass',
+ style: { color: 'red' },
+ });
// ...
return result; // Result should be ALWAYS an array
};
@@ -129,7 +134,7 @@ const editor = grapesjs.init({
//...
parser: {
parserCss,
- }
+ },
});
// Or later, via editor API
@@ -140,12 +145,12 @@ editor.setCustomParserCss(parserCss);
The syntax of rule objects is pretty straightforward, each object might contain following keys
-| Key | Description | Example |
-|-|-|-
-| `selectors` | Selectors of the rule. **REQUIRED** return an empty string in case the rule has no selectors | `.class1, div > #someid` |
-| `style` | Style declarations as an object | `{ color: 'red' }` |
-| `atRule` | At-rule name | `media` |
-| `params` | Parameters of the at-rule | `screen and (min-width: 480px)` |
+| Key | Description | Example |
+| ----------- | ------------------------------------------------------------------------------------------------- | ------------------------------- |
+| `selectors` | Selectors of the rule. **REQUIRED** return an empty string in case the rule has no selectors | `.class1, div > #someid` |
+| `style` | Style declarations as an object | `{ color: 'red' }` |
+| `atRule` | At-rule name | `media` |
+| `params` | Parameters of the at-rule | `screen and (min-width: 480px)` |
To make it more clear let's see a few examples
@@ -249,4 +254,4 @@ To make it more clear let's see a few examples
Below the list of current available CSS parsers as plugins, if you need to create your own we highly suggest to explore their sources
-* [grapesjs-parser-postcss](https://github.com/GrapesJS/parser-postcss) - Using [PostCSS](https://github.com/postcss/postcss) parser
+- [grapesjs-parser-postcss](https://github.com/GrapesJS/parser-postcss) - Using [PostCSS](https://github.com/postcss/postcss) parser
diff --git a/docs/guides/Replace-Rich-Text-Editor.md b/docs/guides/Replace-Rich-Text-Editor.md
index 263c0b2b34..be68f2fce3 100644
--- a/docs/guides/Replace-Rich-Text-Editor.md
+++ b/docs/guides/Replace-Rich-Text-Editor.md
@@ -1,6 +1,7 @@
---
title: Replace the built-in Rich Text Editor
---
+
# Replace the built-in Rich Text Editor
As you might have noticed the default Rich Text Editor (RTE) is really tiny and so doesn't seem like a complete solution as a text editor. Instead of showing how to add new commands inside the default one we'll show how to completely replace it with another one.
@@ -13,7 +14,6 @@ This guide is referring to GrapesJS v0.21.2 or higher
[[toc]]
-
## Interface
### Enable
@@ -71,8 +71,6 @@ const editor = grapesjs.init({
});
```
-
-
### Disable
Once we know how to enable the RTE let's implement the method which disable it, so let's create the `disable()` function.
@@ -90,8 +88,6 @@ editor.setCustomRte({
});
```
-
-
### Content
Each third-party library could handle the state of the content differently and what is actually rendered as a DOM in the preview might not rapresent the final HTML output. So, by default, GrapesJS takes the `innerHTML` as the final output directly from the DOM element but is highly recommended to specify the method responsable to return the final state as HTML string (each third-party library might handle it differently).
@@ -106,8 +102,6 @@ editor.setCustomRte({
});
```
-
-
### Focus
The `focus()` method is just a helper used inside `enable()` and not required by the interface
@@ -120,7 +114,7 @@ const focus = (el, rte) => {
}
el.contentEditable = true;
rte?.focus();
-}
+};
editor.setCustomRte({
// ...
@@ -132,11 +126,9 @@ editor.setCustomRte({
});
```
-
-
## Toolbar position
-Sometimes the default top-left position of the toolbar is not always what you need. For example, when you scroll the canvas and the toolbar reaches the top, you'd like to move it down. For this purpose, you can add a listener which applies your logic in this way:
+Sometimes the default top-left position of the toolbar is not always what you need. For example, when you scroll the canvas and the toolbar reaches the top, you'd like to move it down. For this purpose, you can add a listener which applies your logic in this way:
```js
editor.on('rteToolbarPosUpdate', (pos) => {
@@ -144,15 +136,12 @@ editor.on('rteToolbarPosUpdate', (pos) => {
});
```
-
-
## The built-in vs third-party
One thing you have to keep in mind when using a custom RTE is that all the content and its behavior are handled by the library itself, the GrapesJS's component will just store the content as it is.
For example, when you create a link using the built-in RTE then you'll be able to select it and edit its `href` via Component Settings. With a custom RTE, it will be its own task to show the proper modal for the link editing.
Obviously, each third-party library has its own APIs and can present some limitations and drawbacks, so, a minimal knowledge of the library is a plus.
-
### Enable content parser
As an experimental feature, now it's possible to tell the editor to parse the returned HTML content from the custom RTE and store the result as components and not as a simple HTML string. This allows GrapesJS to handle the custom RTE more closely to the native implementation and enable features like [textable components](https://github.com/GrapesJS/grapesjs/issues/2771#issuecomment-1040486056).
@@ -165,8 +154,6 @@ editor.setCustomRte({
});
```
-
-
## Plugins
For the CKEditor, you can find a complete plugin here [grapesjs-plugin-ckeditor](https://github.com/GrapesJS/ckeditor).
diff --git a/docs/guides/Symbols.md b/docs/guides/Symbols.md
index ea066ba213..28c65f0ce7 100644
--- a/docs/guides/Symbols.md
+++ b/docs/guides/Symbols.md
@@ -1,12 +1,12 @@
---
title: Symbols
---
+
# Symbols
::: warning
This feature is released as a beta from GrapesJS v0.21.11
-
To get a better understanding of the content in this guide we recommend reading [Components] first
:::
@@ -14,7 +14,6 @@ Symbols are a special type of [Component] that allows you to easily reuse common
[[toc]]
-
## Concept
A Symbol created from a component retains the same shape and uses the same [Components API], but it includes a reference to other related Symbols. When you create a new Symbol from a Component, it creates a Main Symbol, and the original component becomes an Instance Symbol.
@@ -29,13 +28,10 @@ Below is a simple representation of the connection between Main and Instance Sym
This feature operates at a low level, meaning there is no built-in UI for creating and managing symbols. Developers need to implement their own UI to interact with this feature. Below you'll find an example of implementation.
:::
-
## Programmatic usage
Let's see how to work with and manage Symbols in your project.
-
-
### Create symbol
Create a new Symbol from any component in your project:
@@ -62,8 +58,6 @@ const symbols = editor.Components.getSymbols();
const symbolMain = symbols[0];
```
-
-
### Symbol details
Once you have Symbols in your project, you might need to know when a Component is a Symbol and get details about it. Use the `getSymbolInfo` method for this:
@@ -92,8 +86,6 @@ symbolMainInfo.instances; // [anyComponent, secondInstance]; Reference to Instan
symbolMainInfo.relatives; // [anyComponent, symbolMain]; Relative Symbols
```
-
-
### Overrides
When you update a Symbol's properties, changes are propagated to all related Symbols. To avoid propagating specific properties, you can specify at the component level which properties to skip:
@@ -109,8 +101,6 @@ anyComponent.set('my-property', false);
secondInstance.get('my-property'); // true; change didn't propagate
```
-
-
### Detach symbol
Once you have Symbol instances you might need to disconnect one to create a new custom shape with other components inside, in that case you can use `detachSymbol`.
@@ -125,8 +115,6 @@ const infoMain = editor.Components.getSymbolInfo(symbolMain);
infoMain.instances; // [secondInstance]; Removed the reference
```
-
-
### Remove symbol
To remove a Main Symbol and detach all related instances:
@@ -136,62 +124,62 @@ const symbolMain = editor.Components.getSymbols()[0];
symbolMain.remove();
```
-
-
-
## Events
The editor triggers several symbol-related events that you can leverage for your integration:
+- `symbol:main:add` Added new root main symbol.
-* `symbol:main:add` Added new root main symbol.
```js
editor.on('symbol:main:add', ({ component }) => { ... });
```
-* `symbol:main:update` Root main symbol updated.
+- `symbol:main:update` Root main symbol updated.
+
```js
editor.on('symbol:main:update', ({ component }) => { ... });
```
-* `symbol:main:remove` Root main symbol removed.
+- `symbol:main:remove` Root main symbol removed.
+
```js
editor.on('symbol:main:remove', ({ component }) => { ... });
```
-* `symbol:main` Catch-all event related to root main symbol updates.
+- `symbol:main` Catch-all event related to root main symbol updates.
+
```js
editor.on('symbol:main', ({ event, component }) => { ... });
```
-* `symbol:instance:add` Added new root instance symbol.
+- `symbol:instance:add` Added new root instance symbol.
+
```js
editor.on('symbol:instance:add', ({ component }) => { ... });
```
-* `symbol:instance:remove` Root instance symbol removed.
+- `symbol:instance:remove` Root instance symbol removed.
+
```js
editor.on('symbol:instance:remove', ({ component }) => { ... });
```
-* `symbol:instance` Catch-all event related to root instance symbol updates.
+- `symbol:instance` Catch-all event related to root instance symbol updates.
+
```js
editor.on('symbol:instance', ({ event, component }) => { ... });
```
-* `symbol` Catch-all event for any symbol update (main or instance).
+- `symbol` Catch-all event for any symbol update (main or instance).
+
```js
editor.on('symbol', () => { ... });
```
-
-
-
## Example
Below is a basic UI implementation leveraging the Symbols API:
-
-
-[Component]:
-[Components]:
-[Components API]:
\ No newline at end of file
+[Component]: /modules/Components.html
+[Components]: /modules/Components.html
+[Components API]: /api/component.html
diff --git a/docs/modules/Assets.md b/docs/modules/Assets.md
index 91214c259c..976379e1f8 100644
--- a/docs/modules/Assets.md
+++ b/docs/modules/Assets.md
@@ -10,7 +10,6 @@ In this section, you will see how to setup and take the full advantage of built-
[[toc]]
-
## Configuration
To change default configurations you'd need to pass the `assetManager` property with the main configuration object
@@ -33,10 +32,6 @@ const amConfig = editor.AssetManager.getConfig();
Check the full list of available options here: [Asset Manager Config](https://github.com/GrapesJS/grapesjs/blob/master/src/asset_manager/config/config.ts)
-
-
-
-
## Initialization
The Asset Manager is ready to work by default, so pass few URLs to see them loaded
@@ -68,15 +63,12 @@ const editor = grapesjs.init({
});
```
-
If you want a complete list of available properties check out the source [AssetImage Model](https://github.com/GrapesJS/grapesjs/blob/dev/src/asset_manager/model/AssetImage.ts)
The built-in Asset Manager modal is implemented and is showing up when requested. By default, you can make it appear by dragging Image Components in canvas, double clicking on images and all other stuff related to images (eg. CSS styling)
-
-
-
-
-
-
## Uploading assets
The default Asset Manager includes also an easy to use, drag-and-drop uploader with a few UI helpers. The default uploader is already visible when you open the Asset Manager.
-
-
You can click on the uploader to select your files or just drag them directly from your computer to trigger the uploader. Obviously, before it will work you have to setup your server to receive your assets and specify the upload endpoint in your configuration
-
```js
const editor = grapesjs.init({
...
@@ -128,7 +113,6 @@ const editor = grapesjs.init({
});
```
-
### Listeners
If you want to execute an action before/after the uploading process (eg. loading animation) or even on response, you can make use of these listeners
@@ -155,7 +139,6 @@ editor.on('asset:upload:response', (response) => {
});
```
-
### Response
When the uploading is over, by default (via config parameter `autoAdd: 1`), the editor expects to receive a JSON of uploaded assets in a `data` key as a response and tries to add them to the main collection. The JSON might look like this:
@@ -172,11 +155,10 @@ When the uploading is over, by default (via config parameter `autoAdd: 1`), the
width: 200,
},
// ...
- ]
+ ];
}
```
-
-
-
-
-
## Programmatic usage
If you need to manage your assets programmatically you have to use its [APIs][API-Asset-Manager]
@@ -212,8 +190,9 @@ const am = editor.AssetManager;
```
First of all, it's worth noting that Asset Manager keeps 2 collections of assets:
-* **global** - which is just the one with all available assets, you can get it with `am.getAll()`
-* **visible** - this is the collection which is currently rendered by the Asset Manager, you get it with `am.getAllVisible()`
+
+- **global** - which is just the one with all available assets, you can get it with `am.getAll()`
+- **visible** - this is the collection which is currently rendered by the Asset Manager, you get it with `am.getAllVisible()`
This allows you to decide which assets to show and when. Let's say we'd like to have a category switcher, first of all you gonna add to the **global** collection all your assets (which you may already defined at init by `config.assetManager.assets = [...]`)
@@ -223,13 +202,15 @@ am.add([
// You can pass any custom property you want
category: 'c1',
src: 'http://placehold.it/350x250/78c5d6/fff/image1.jpg',
- }, {
+ },
+ {
category: 'c1',
src: 'http://placehold.it/350x250/459ba8/fff/image2.jpg',
- }, {
+ },
+ {
category: 'c2',
src: 'http://placehold.it/350x250/79c267/fff/image3.jpg',
- }
+ },
// ...
]);
```
@@ -240,8 +221,8 @@ Now if you call the `render()`, without an argument, you will see all the assets
// without any argument
am.render();
-am.getAll().length // <- 3
-am.getAllVisible().length // <- 3
+am.getAll().length; // <- 3
+am.getAllVisible().length; // <- 3
```
Ok, now let's show only assets form the first category
@@ -249,12 +230,10 @@ Ok, now let's show only assets form the first category
```js
const assets = am.getAll();
-am.render(assets.filter(
- asset => asset.get('category') == 'c1'
-));
+am.render(assets.filter((asset) => asset.get('category') == 'c1'));
-am.getAll().length // Still have 3 assets
-am.getAllVisible().length // but only 2 are shown
+am.getAll().length; // Still have 3 assets
+am.getAllVisible().length; // but only 2 are shown
```
You can also mix arrays of assets
@@ -262,6 +241,7 @@ You can also mix arrays of assets
```js
am.render([...assets1, ...assets2, ...assets3]);
```
+
-
-
-
-
## Events
For a complete list of available events, you can check it [here](/api/assets.html#available-events).
-
-[API-Asset-Manager]:
+[API-Asset-Manager]: /api/assets.html
diff --git a/docs/modules/Blocks.md b/docs/modules/Blocks.md
index 1d4ba764fd..7ad2a1f951 100644
--- a/docs/modules/Blocks.md
+++ b/docs/modules/Blocks.md
@@ -18,7 +18,6 @@ This guide is referring to GrapesJS v0.17.27 or higher
[[toc]]
-
## Configuration
To change the default configurations you have to pass the `blockManager` property with the main configuration object.
@@ -35,7 +34,6 @@ const editor = grapesjs.init({
Check the full list of available options here: [Block Manager Config](https://github.com/GrapesJS/grapesjs/blob/master/src/block_manager/config/config.ts)
-
## Initialization
By default, Block Manager UI is considered a hidden component. Currently, the GrapesJS core, renders default panels and buttons that allow you to show them, but in long term, this is something that might will change. Here below you can see how to init the editor without default panels and immediately rendered Block Manager UI.
@@ -65,20 +63,18 @@ const editor = grapesjs.init({
// We want to activate it once dropped in the canvas.
activate: true,
// select: true, // Default with `activate: true`
- }
+ },
],
- }
+ },
});
```
-
-
-
-
## Block content types
+
The key of connecting blocks to components is the `block.content` property and what we passed in the example above is the [Component Definition]. This is the component-oriented way to create blocks and this is how we highly recommend the creation of your blocks.
### Component-oriented
+
The `content` can accept different formats, like an HTML string (which will be parsed and converted to components), but the component-oriented approach is the most precise as you can keep the control of your each dropped block in the canvas. Another advice is to keep your blocks' [Component Definition] as light as possible, if you're defining a lot of redundant properties, probably it makes sense to create another dedicated component, this might reduce the size of your project JSON file. Here an example:
```js
@@ -98,6 +94,7 @@ editor.Components.addType('my-cmp', {
{ ..., content: { type: 'my-cmp', prop1: 'value1-EXT', prop2: 'value2-EXT' } }
]
```
+
Here we're reusing the same component multiple times with the same set of properties (just an example, makes more sense with composed content of components), this can be reduced to something like this.
```js
@@ -121,7 +118,9 @@ editor.Components.addType('my-cmp-alt', {
```
### HTML strings
+
Using HTML strings as `content` is not wrong, in some cases you don't need the finest control over components and want to leave the user full freedom on template composition (eg. static site builder editor with HTML copy-pasted from a framework like [Tailwind Components](https://tailwindcomponents.com/))
+
```js
// Your block
{
@@ -130,9 +129,10 @@ Using HTML strings as `content` is not wrong, in some cases you don't need the f
Element A
Element B
Element C
-
`
+
`;
}
```
+
In such a case, all rendered elements will be converted to the best suited default component (eg. `.el-Y` elements will be treated like `text` components). The user will be able to style and drag them with no particular restrictions.
Thanks to Components' [isComponet](Components.html#iscomponent) feature (executed post parsing), you're still able to bind your rendered elements to components and enforce an extra logic. Here an example how you would enforce all `.el-Y` elements to be placed only inside `.el-X` one, without touching any part of the original HTML used in the `content`.
@@ -141,15 +141,16 @@ Thanks to Components' [isComponet](Components.html#iscomponent) feature (execute
// Your component
editor.Components.addType('cmp-Y', {
// Detect '.el-Y' elements
- isComponent: el => el.classList?.contains('el-Y'),
+ isComponent: (el) => el.classList?.contains('el-Y'),
model: {
defaults: {
name: 'Component Y', // Simple custom name
draggable: '.el-X', // Add `draggable` logic
- }
- }
+ },
+ },
});
```
+
Another alternative is to leverage `data-gjs-*` attributes to attach properties to components.
::: tip
@@ -164,7 +165,7 @@ You can use most of the available [Component properties](/api/component.html#pro
`;
}
// No need for a custom component.
// You're already defining properties of each element.
@@ -193,9 +194,10 @@ editor.Components.addType('cmp-Y', {
Here we showed all the possibilities you have with HTML strings, but we strongly advise against the abuse of the `Option 2` and to stick to a more component-oriented approach.
Without a proper component type, not only your HTML will be harder to read, but all those defined properties will be "hard-coded" to a generic component of those elements. So, if one day you decide to "upgrade" the logic of the component (eg. `draggable: '.el-X'` -> `draggable: '.el-X, .el-Z'`), you won't be able.
-
### Mixed
+
It's also possible to mix components with HTML strings by passing an array.
+
```js
{
// ...
@@ -208,7 +210,6 @@ It's also possible to mix components with HTML strings by passing an array.
}
```
-
## Important caveats
::: danger Read carefully
@@ -218,6 +219,7 @@ It's also possible to mix components with HTML strings by passing an array.
### Avoid non serializable properties
Don't put non serializable properties, like functions, in your blocks, keep them only in your components.
+
```js
// Your block
{
@@ -227,10 +229,13 @@ Don't put non serializable properties, like functions, in your blocks, keep them
},
}
```
+
This will work, but if you try to save and reload a stored project, those will disappear.
### Avoid styles
+
Don't put styles in your blocks, keep them always in your components.
+
```js
// Your block
{
@@ -251,17 +256,15 @@ Don't put styles in your blocks, keep them always in your components.
],
}
```
+
With the component-oriented approach, you put yourself in a risk of conflicting styles and having a lot of useless redundant styles definitions in your project JSON.
With the HTML string, if you remove all related elements, the editor is not able to clean those styles from the project JSON, as there is no safe way to connect them.
-
-
-
-
## Programmatic usage
+
If you need to manage your blocks programmatically you can use its [APIs][Blocks API].
::: warning
@@ -269,6 +272,7 @@ All Blocks API methods update mainly your Block Manager UI, it has nothing to do
:::
Below an example of commonly used methods.
+
```js
// Get the BlockManager module first
const bm = editor.Blocks; // `Blocks` is an alias of `BlockManager`
@@ -294,32 +298,28 @@ const removedBlock = bm.remove('BLOCK-ID-2');
To know more about the available block properties, check the [Block API Reference][Block].
-
-
-
-
## Customization
+
The default Block Manager UI is great for simple things, but except the possibility to tweak some CSS style, adding more complex elements requires a replace of the default UI.
All you have to do is to indicate the editor your intent to use a custom UI and then subscribe to the `block:custom` event that will give you all the information on any requested change.
```js
const editor = grapesjs.init({
+ // ...
+ blockManager: {
// ...
- blockManager: {
- // ...
- custom: true,
- },
+ custom: true,
+ },
});
-editor.on('block:custom', props => {
- // The `props` will contain all the information you need in order to update your UI.
- // props.blocks (Array) - Array of all blocks
- // props.dragStart (Function) - A callback to trigger the start of block dragging.
- // props.dragStop (Function) - A callback to trigger the stop of block dragging.
- // props.container (HTMLElement) - The default element where you can append your UI
-
- // Here you would put the logic to render/update your UI.
+editor.on('block:custom', (props) => {
+ // The `props` will contain all the information you need in order to update your UI.
+ // props.blocks (Array) - Array of all blocks
+ // props.dragStart (Function) - A callback to trigger the start of block dragging.
+ // props.dragStop (Function) - A callback to trigger the stop of block dragging.
+ // props.container (HTMLElement) - The default element where you can append your UI
+ // Here you would put the logic to render/update your UI.
});
```
@@ -329,15 +329,10 @@ Here an example of using custom Block Manager with a Vue component.
From the demo above you can also see how we decided to hide our custom Block Manager and append it to the default container, but that is up to your preferences.
-
## Events
For a complete list of available events, you can check it [here](/api/block_manager.html#available-events).
-
-
-
-
-
-
-
-
-[Block]:
-[Component]:
-[Components]:
-[Getting Started]:
-[Blocks API]:
-[Component Definition]:
+[Block]: /api/block.html
+[Component]: /api/component.html
+[Components]: Components.html
+[Getting Started]: /getting-started.html
+[Blocks API]: /api/block_manager.html
+[Component Definition]: Components.html#component-definition
diff --git a/docs/modules/Canvas.md b/docs/modules/Canvas.md
index 9acbdf240f..1cb7efc199 100644
--- a/docs/modules/Canvas.md
+++ b/docs/modules/Canvas.md
@@ -14,7 +14,6 @@ This guide is referring to GrapesJS v0.21.5 or higher
[[toc]]
-
## Configuration
To change the default configurations you have to pass the `canvas` property with the main configuration object.
@@ -30,7 +29,6 @@ const editor = grapesjs.init({
Check the full list of available options here: [Canvas Config](https://github.com/GrapesJS/grapesjs/blob/master/src/canvas/config/config.ts)
-
## Canvas Spots
Canvas spots are elements drawn on top of the canvas. They can be used to represent anything you might need but the most common use case of canvas spots is rendering information and managing components rendered in the canvas.
@@ -47,9 +45,11 @@ The `select` type is responsable for showing selected components and rendering t
::: tip
Get the toolbar items from the component.
+
```js
const toolbarItems = editor.getSelected().toolbar;
```
+
:::
#### Resize type
@@ -60,9 +60,11 @@ The `resize` type allows resizing of a component, based on the component's resiz
::: tip
Get the component resizable options.
+
```js
const resizable = editor.getSelected().resizable;
```
+
:::
#### Target type
@@ -73,17 +75,19 @@ The `target` type is used to highlight the component, like during the drag & dro
::: warning
The default green position indicator is not part of the spot but you can easily customize it via CSS.
+
```css
.gjs-placeholder.horizontal {
- border-color: transparent red;
+ border-color: transparent red;
}
.gjs-placeholder.vertical {
- border-color: red transparent;
+ border-color: red transparent;
}
.gjs-placeholder-int {
- background-color: red;
+ background-color: red;
}
```
+
:::
#### Hover type
@@ -94,40 +98,36 @@ The `hover` is used to highlight the hovered component and show the component na
::: tip
Get the component name.
+
```js
const name = editor.getSelected().getName();
```
+
:::
#### Spacing type
The `spacing` type is used to show component offsets like paddings and margins (visible on the `hover` type image above).
-
-
-
-
### Disable built-in types
You can disable the rendering of built-in canvas spots (some or all of them) during the editor initialization.
```js
grapesjs.init({
- // ...
- canvas: {
- // Disable only the hover type spot
- customSpots: {
- hover: true,
- },
- // Disable all built-in spots
- customSpots: true,
+ // ...
+ canvas: {
+ // Disable only the hover type spot
+ customSpots: {
+ hover: true,
},
-})
+ // Disable all built-in spots
+ customSpots: true,
+ },
+});
```
-In the next section, we'll see how it's possible to reuse the built-in spots and create your own.
-
-
+In the next section, we'll see how it's possible to reuse the built-in spots and create your own.
### Spots customization
@@ -139,21 +139,28 @@ In the example below we'll see how to reuse the built-in `hover` canvas spot to
Worth noting a few important points:
-* Our custom container has to be moved inside the GrapesJS spots container.
+- Our custom container has to be moved inside the GrapesJS spots container.
+
```js
editor.onReady(() => {
- Canvas.getSpotsEl().appendChild(this.$el);
+ Canvas.getSpotsEl().appendChild(this.$el);
});
```
-* We pass the `component` to our custom spot, in order to have the style coordinates properly updated when we scroll the page or update the component.
+
+- We pass the `component` to our custom spot, in order to have the style coordinates properly updated when we scroll the page or update the component.
+
```js
Canvas.addSpot({ type: customSpotType, component });
```
-* The single spot is placed properly with `spot.getStyle()`
+
+- The single spot is placed properly with `spot.getStyle()`
+
```html
...
```
-* The spots container, by default, relies on `pointer-events: none`, in order to prevent the spot from blocking the interaction with the components. This is why we have to re-enable the pointer event on the button in order to make it interactable.
+
+- The spots container, by default, relies on `pointer-events: none`, in order to prevent the spot from blocking the interaction with the components. This is why we have to re-enable the pointer event on the button in order to make it interactable.
+
```css
.spot-text-btn {
/*...*/
@@ -266,10 +273,6 @@ Canvas.addSpot({ type: customSpotType, component });
-->
-
-
-
-
## Events
-For a complete list of available events, you can check it [here](/api/canvas.html#available-events).
\ No newline at end of file
+For a complete list of available events, you can check it [here](/api/canvas.html#available-events).
diff --git a/docs/modules/Commands.md b/docs/modules/Commands.md
index 2d12742208..72fcf7ec59 100644
--- a/docs/modules/Commands.md
+++ b/docs/modules/Commands.md
@@ -12,7 +12,6 @@ This guide is referring to GrapesJS v0.14.61 or higher
[[toc]]
-
## Basic configuration
You can create your commands already from the initialization step by passing them in the `commands.defaults` options:
@@ -43,7 +42,7 @@ Most commonly commands are created dynamically post-initialization, in that case
```js
const commands = editor.Commands;
-commands.add('my-command-id', editor => {
+commands.add('my-command-id', (editor) => {
alert('This is my command');
});
@@ -83,45 +82,37 @@ commands.add('my-command-id', (editor, sender, options = {}) => {
The second argument, `sender`, just indicates who requested the command, in our case will be always the `editor`
-
Until now there is nothing exciting except a common entry point for functions, but we'll see later its real advantages.
-
-
-
## Default commands
GrapesJS comes along with some default set of commands and you can get a list of all currently available commands via `editor.Commands.getAll()`. This will give you an object of all available commands, so, also those added later, like via plugins. You can recognize default commands by their namespace `core:*`, we also recommend to use namespaces in your own custom commands, but let's get a look more in detail here:
-* [`core:canvas-clear`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/CanvasClear.ts) - Clear all the content from the canvas (HTML and CSS)
-* [`core:component-delete`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/ComponentDelete.ts) - Delete a component
-* [`core:component-enter`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/ComponentEnter.ts) - Select the first children component of the selected one
-* [`core:component-exit`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/ComponentExit.ts) - Select the parent component of the current selected one
-* [`core:component-next`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/ComponentNext.ts) - Select the next sibling component
-* [`core:component-prev`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/ComponentPrev.ts) - Select the previous sibling component
-* [`core:component-outline`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/SwitchVisibility.ts) - Enable outline border on components
-* [`core:component-offset`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/ShowOffset.ts) - Enable components offset (margins, paddings)
-* [`core:component-select`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/SelectComponent.ts) - Enable the process of selecting components in the canvas
-* [`core:copy`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/CopyComponent.ts) - Copy the current selected component
-* [`core:paste`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/PasteComponent.ts) - Paste copied component
-* [`core:preview`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/Preview.ts) - Show the preview of the template in canvas
-* [`core:fullscreen`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/Fullscreen.ts) - Set the editor fullscreen
-* [`core:open-code`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/ExportTemplate.ts) - Open a default panel with the template code
-* [`core:open-layers`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/OpenLayers.ts) - Open a default panel with layers
-* [`core:open-styles`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/OpenStyleManager.ts) - Open a default panel with the style manager
-* [`core:open-traits`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/OpenTraitManager.ts) - Open a default panel with the trait manager
-* [`core:open-blocks`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/OpenBlocks.ts) - Open a default panel with the blocks
-* [`core:open-assets`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/OpenAssets.ts) - Open a default panel with the assets
-* `core:undo` - Call undo operation
-* `core:redo` - Call redo operation
-
-
-
-
-
-
-
-
+- [`core:canvas-clear`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/CanvasClear.ts) - Clear all the content from the canvas (HTML and CSS)
+- [`core:component-delete`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/ComponentDelete.ts) - Delete a component
+- [`core:component-enter`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/ComponentEnter.ts) - Select the first children component of the selected one
+- [`core:component-exit`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/ComponentExit.ts) - Select the parent component of the current selected one
+- [`core:component-next`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/ComponentNext.ts) - Select the next sibling component
+- [`core:component-prev`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/ComponentPrev.ts) - Select the previous sibling component
+- [`core:component-outline`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/SwitchVisibility.ts) - Enable outline border on components
+- [`core:component-offset`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/ShowOffset.ts) - Enable components offset (margins, paddings)
+- [`core:component-select`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/SelectComponent.ts) - Enable the process of selecting components in the canvas
+- [`core:copy`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/CopyComponent.ts) - Copy the current selected component
+- [`core:paste`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/PasteComponent.ts) - Paste copied component
+- [`core:preview`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/Preview.ts) - Show the preview of the template in canvas
+- [`core:fullscreen`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/Fullscreen.ts) - Set the editor fullscreen
+- [`core:open-code`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/ExportTemplate.ts) - Open a default panel with the template code
+- [`core:open-layers`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/OpenLayers.ts) - Open a default panel with layers
+- [`core:open-styles`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/OpenStyleManager.ts) - Open a default panel with the style manager
+- [`core:open-traits`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/OpenTraitManager.ts) - Open a default panel with the trait manager
+- [`core:open-blocks`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/OpenBlocks.ts) - Open a default panel with the blocks
+- [`core:open-assets`](https://github.com/GrapesJS/grapesjs/blob/dev/src/commands/view/OpenAssets.ts) - Open a default panel with the assets
+- `core:undo` - Call undo operation
+- `core:redo` - Call redo operation
+
+
+
+
## Stateful commands
@@ -203,17 +194,13 @@ If you run it, close the modal (eg. by clicking the 'x' on top) and then try to
In the example above, we make use of few helper methods from the Modal module (`onceClose`) and the command itself (`stopCommand`) but obviously, the logic might be different due to your requirements and specific UI.
-
-
-
-
## Extending
Another big advantage of commands is the possibility to easily extend or override them with another command.
Let's take a simple example
```js
-commands.add('my-command-1', editor => {
+commands.add('my-command-1', (editor) => {
alert('This is command 1');
});
```
@@ -221,7 +208,7 @@ commands.add('my-command-1', editor => {
If you need to overwrite this command with another one, just add it and keep the same id.
```js
-commands.add('my-command-1', editor => {
+commands.add('my-command-1', (editor) => {
alert('This is command 1 overwritten');
});
```
@@ -253,15 +240,10 @@ commands.extend('my-command-2', {
});
```
-
-
-
-
## Events
The Commands module offers also a set of events that you can use to intercept the command flow for adding more functionality or even interrupting it.
-
### Intercept run and stop
By using our previously created `my-command-modal` command let's see which events we can listen to
@@ -288,16 +270,15 @@ editor.on('command:stop:before:my-command-modal:before', () => {
If you need, you can also listen to all commands
```js
-editor.on('command:run', commandId => {
+editor.on('command:run', (commandId) => {
console.log('Run', commandId);
});
-editor.on('command:stop', commandId => {
+editor.on('command:stop', (commandId) => {
console.log('Stop', commandId);
});
```
-
### Interrupt command flow
Sometimes you might need to interrupt the execution of an existant command due to some condition. In that case, you have to use `command:run:before:{COMMAND-ID}` event and set to `true` the abort option
@@ -305,7 +286,7 @@ Sometimes you might need to interrupt the execution of an existant command due t
```js
const condition = 1;
-editor.on('command:run:before:my-command-modal', options => {
+editor.on('command:run:before:my-command-modal', (options) => {
if (condition) {
options.abort = true;
console.log('Prevent `my-command-modal` from execution');
@@ -313,8 +294,6 @@ editor.on('command:run:before:my-command-modal', options => {
});
```
-
-
## Conclusion
The Commands module is quite simple but, at the same time, really powerful if used correctly. So, if you're creating a plugin for GrapesJS, use commands as much as possible, this will allow higher reusability and control over your logic.
diff --git a/docs/modules/Components-js.md b/docs/modules/Components-js.md
index 0aaf0a5556..7803d8c642 100644
--- a/docs/modules/Components-js.md
+++ b/docs/modules/Components-js.md
@@ -13,14 +13,13 @@ To get a better understanding of the content in this guide, we recommend reading
[[toc]]
-
## Basic scripts
Let's see how to create a component with scripts.
```js
// This is our custom script (avoid using arrow functions)
-const script = function() {
+const script = function () {
alert('Hi');
// `this` is bound to the component element
console.log('the element', this);
@@ -36,9 +35,9 @@ editor.Components.addType('comp-with-js', {
width: '100px',
height: '100px',
background: 'red',
- }
- }
- }
+ },
+ },
+ },
});
// Create a block for the component, so we can drop it easily
@@ -48,6 +47,7 @@ editor.Blocks.add('test-block', {
content: { type: 'comp-with-js' },
});
```
+
Now if you drag the new block inside the canvas you'll see an alert and the message in console, as you might expect.
One thing worth noting is that `this` context is bound to the component's element, so, for example, if you need to change its property, you'd do `this.innerHTML = 'inner content'`.
@@ -58,12 +58,12 @@ One thing you should take into account is how the script is bound to component o
```
@@ -76,12 +76,12 @@ As you see the editor attaches a unique ID to all components with scripts and re
```
@@ -99,7 +99,7 @@ That means **you can't use stuff outside of the function scope**. Take a look at
```js
const myVar = 'John';
-const script = function() {
+const script = function () {
alert('Hi ' + myVar);
console.log('the element', this);
};
@@ -112,10 +112,10 @@ This won't work. You'll get an error of the undefined `myVar`. The final HTML sh
```
@@ -127,7 +127,7 @@ You can do it by using the `script-props` property on your component.
```js
// The `props` argument will contain only the properties you have declared in `script-props`
-const script = function(props) {
+const script = function (props) {
const myLibOpts = {
prop1: props.myprop1,
prop2: props.myprop2,
@@ -152,24 +152,22 @@ editor.Components.addType('comp-with-js', {
{ value: 'value1', name: 'Value 1' },
{ value: 'value2', name: 'Value 2' },
],
- }, {
+ },
+ {
type: 'number',
name: 'myprop2',
changeProp: true,
- }
+ },
],
// Define which properties to pass (this will also reset your script on their changes)
'script-props': ['myprop1', 'myprop2'],
// ...
- }
- }
+ },
+ },
});
```
-Now, if you try to change traits, you'll also see how the script will be triggered with the new updated properties.
-
-
-
+Now, if you try to change traits, you'll also see how the script will be triggered with the new updated properties.
## Dependencies
@@ -182,8 +180,8 @@ The component related approach is definitely the best one, as the dependencies w
All you have to do is to load your dependencies before executing your initialization script.
```js
-const script = function(props) {
- const initLib = function() {
+const script = function (props) {
+ const initLib = function () {
const el = this;
const myLibOpts = {
prop1: props.myprop1,
@@ -217,8 +215,7 @@ const editor = grapesjs.init({
}
});
```
-Keep in mind that the editor won't render those dependencies in the exported HTML (eg. via `editor.getHtml()`), so it's up to you how to include them in the final page where the final HTML is rendered.
-
+Keep in mind that the editor won't render those dependencies in the exported HTML (eg. via `editor.getHtml()`), so it's up to you how to include them in the final page where the final HTML is rendered.
-[Traits]:
\ No newline at end of file
+[Traits]: Traits.html
diff --git a/docs/modules/Components.md b/docs/modules/Components.md
index 719e6856f9..0d3413d192 100644
--- a/docs/modules/Components.md
+++ b/docs/modules/Components.md
@@ -12,16 +12,12 @@ This guide is referring to GrapesJS v0.15.8 or higher
[[toc]]
-
-
-
-
## How Components work?
Let's see in detail how components work by looking at all the steps from adding an HTML string to the editor.
::: tip
-All the following snippets can be run directly in console from the [main demo](https://grapesjs.com/demo.html)
+All the following snippets can be run directly in console from the [main demo](https://grapesjs.com/demo.html)
:::
This is how we can add new components to the canvas:
@@ -43,17 +39,19 @@ editor.getWrapper().append(`
...`);
::: tip
If you need to append a component at a specific position, you can use `at` option. So, to add a component on top of all others (in the same collection) you would use
+
```js
-component.append('
...', { at: 0 })
+component.append('
...', { at: 0 });
```
+
or in the middle
+
```js
const { length } = component.components();
-component.append('
...', { at: parseInt(length / 2, 10) });
```
-:::
-
+:::
### Component Definition
@@ -85,8 +83,6 @@ You might notice the result is similar to what is generally called a **Virtual D
The meaning of properties like `tagName`, `attributes` and `components` are quite obvious, but what about `type`?! This particular property specifies the **Component Type** of our **Component Definition** (you check the list of default components [below](#built-in-component-types)) and if it's omitted, the default one will be used `type: 'default'`.
At this point, a good question would be, how the editor assigns those types by starting from a simple HTML string? This step is identified as **Component Recognition** and it's explained in detail in the next paragraph.
-
-
### Component Recognition and Component Type Stack
As we mentioned before, when you pass an HTML string as a component to the editor, that string is parsed and compiled to the [Component Definition] with a new `type` property. To understand what `type` should be assigned, for each parsed HTML Element, the editor iterates over all the defined components, called **Component Type Stack**, and checks via `isComponent` method (we will see it later) if that component type is appropriate for that element. The Component Type Stack is just a simple array of component types but what matters is the order of those types. Any new added custom **Component Type** (we'll see later how to create them) goes on top of the Component Type Stack and each element returned from the parser iterates the stack from top to bottom (the last element of the stack is the `default` one), the iteration stops once one of the component returns a truthy value from the `isComponent` method.
@@ -98,8 +94,6 @@ If you're importing big string chunks of HTML code you might want to improve the
Read [here](#setup-jsx-syntax) about how to setup JSX syntax parser
:::
-
-
### Component instance
Once the **Component Definition** is ready and the type is assigned, the [Component] instance can be created (known also as the **Model**). Let's step back to our previous example with the HTML string, the result of the `append` method is an array of added components.
@@ -113,19 +107,23 @@ const component = editor.addComponents(`
The Component instance contains properties and methods which allows you to obtain its data and change them.
You can read properties with the `get` method, like, for example, the `type`
+
```js
const componentType = component.get('type'); // eg. 'image'
```
+
and to update properties you'd use `set`, which might change the way a component behaves in the canvas.
+
```js
// Make the component not draggable
component.set('draggable', false);
```
+
You can also use methods like `getAttributes`, `setAttributes`, `components`, etc.
```js
const innerComponents = component.components();
-innerComponents.forEach(comp => console.log(comp.toHTML()));
+innerComponents.forEach((comp) => console.log(comp.toHTML()));
// Update component content
component.components(`
Component 1
Component 2
`);
```
@@ -142,7 +140,7 @@ This will return a string containing the HTML of the component and all of its ch
The component implements also `toJSON` methods so you can get its JSON structure in this way
```js
-JSON.stringify(component)
+JSON.stringify(component);
```
::: tip
@@ -151,8 +149,6 @@ For storing/loading all the components you should rely on the [Storage Manager](
So, the **Component instance** is responsible for the **final data** (eg. HTML, JSON) of your templates. If you need, for example, to update/add some attribute in the HTML you need to update its component (eg. `component.addAttributes({ title: 'Title added' })`), so the Component/Model is your **Source of Truth**.
-
-
### Component rendering
Another important part of components is how they are rendered in the **canvas**, this aspect is handled by its **View**. It has nothing to do with the **final HTML data**, you can return a big `
...
` string as HTML of your component but render it as a simple image in the canvas (think about placeholders for complex/dynamic data).
@@ -167,50 +163,40 @@ const component = editor.getSelected();
// Get the View
const view = component.getView();
// Get the DOM element
-const el = component.getEl();
+const el = component.getEl();
```
Generally, the View is something you wouldn't need to change as the default one handles already the sync with the Model but in case you'd need more control over elements (eg. custom UI in canvas) you'll probably need to create a custom component type and extend the default View with your logic. We'll see later how to create custom Component Types.
-
So far we have seen the core concept behind Components and how they work. The **Model/Component** is the **source of truth** for the final code of templates (eg. the HTML export relies on it) and the **View/ComponentView** is what is used by the editor to **preview our components** to users in the canvas.
-
-
-
-
-
## Built-in Component Types
Here below you can see the list of built-in component types, ordered by their position in the **Component Type Stack**
-* [`cell`](https://github.com/GrapesJS/grapesjs/blob/dev/src/dom_components/model/ComponentTableCell.ts) - Component for handle `
` and `
` elements
-* [`row`](https://github.com/GrapesJS/grapesjs/blob/dev/src/dom_components/model/ComponentTableRow.ts) - Component for handle `
` elements
-* [`table`](https://github.com/GrapesJS/grapesjs/blob/dev/src/dom_components/model/ComponentTable.ts) - Component for handle `