Skip to content
Snippets Groups Projects
Verified Commit 6b01c747 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

chore: commit save point

parent 19c8aaf8
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
README.md
+ 53
− 46
View file @ 6b01c747
......@@ -4,15 +4,18 @@
Project, template and page manager for grapesjs. This version makes use of the [`PageManager`](https://github.com/artf/grapesjs/pull/3411) and has different plugin and package name, the previous version which doesn't make use of the `PageManager` can be found [here](https://github.com/Ju99ernaut/grapesjs-template-manager/tree/template-manager).
| Project | Project settings |
|---------|------------------|
| Project | Project settings |
| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| ![Screenshot (224)](https://user-images.githubusercontent.com/48953676/130074718-0e50d99a-d004-41e0-890c-66f05175e45c.png) | ![Screenshot (226)](https://user-images.githubusercontent.com/48953676/130074800-075eab50-3059-493d-afa7-0b9f8af9fdf6.png) |
| Pages | Page settings |
|-------|---------------|
| ![Screenshot (225)](https://user-images.githubusercontent.com/48953676/130074843-81c120f9-37a0-4ee1-b8d4-019a16de6a46.png) | ![Screenshot (227)](https://user-images.githubusercontent.com/48953676/130074992-12a1774a-0a85-4e4f-8a14-1c95e0a7a7b6.png) |
| Pages | Page settings |
| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| ![Screenshot (225)](https://user-images.githubusercontent.com/48953676/130074843-81c120f9-37a0-4ee1-b8d4-019a16de6a46.png) | ![Screenshot (227)](https://user-images.githubusercontent.com/48953676/130074992-12a1774a-0a85-4e4f-8a14-1c95e0a7a7b6.png) |
### HTML
```html
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<link href="https://unpkg.com/grapesjs-project-manager/dist/grapesjs-project-manager.min.css" rel="stylesheet">
......@@ -23,6 +26,7 @@ Project, template and page manager for grapesjs. This version makes use of the [
```
### JS
```js
const editor = grapesjs.init({
container: '#gjs',
......@@ -58,6 +62,7 @@ pn.addButton('views', {
```
### CSS
```css
body, html {
margin: 0;
......@@ -65,49 +70,48 @@ body, html {
}
```
## Summary
* Plugin name: `grapesjs-project-manager`
* Commands
* `open-templates`
* `open-pages`
* `open-settings`
* `get-uuidv4`
* `take-screenshot`
* `save-as-template`
* `delete-template`
* `open-templates`
* `open-pages`
* `open-settings`
* `get-uuidv4`
* `take-screenshot`
* `save-as-template`
* `delete-template`
* Storages
* `indexeddb`
* `firestore`
* `rest-api`
* `indexeddb`
* `firestore`
* `rest-api`
## Options
| Option | Description | Default |
|-|-|-
| `dbName` | Database name | `gjs` |
| `objectStoreName` | Collection name | `templates` |
| `loadFirst` | Load first template in storage | `true` |
| `customLoad` | Use custom onload function(skips default onload steps), `(ed, cs) => ...` | `false` |
| `components` | Default components since `fromElement` is not supported | `undefined` |
| `style` | Default style since `fromElement` is not supported | `undefined` |
| `indexeddbVersion` | IndexedDB schema version | `5` |
| `onDelete` | On successful template deletion | `Function(Check source)` |
| `onDeleteError` | On error template deletion | `Function(Check source)` |
| `onScreenShotError` | On error capturing screenshot | `Function(Check source)` |
| `quality` | Generated screenshot quality | `.01` |
| `mdlTitle` | Modal title | `Project Manager` |
| `apiKey` | `Firebase` API key | ` ` |
| `authDomain` | `Firebase` Auth domain | ` ` |
| `projectId` | `Cloud Firestore` project ID | ` ` |
| `firebaseConfig` | Extra firebase app credentials | `{}` |
| `enableOffline` | Enable `Firestore` support for offline data persistence | `true` |
| `settings` | `Firestore` database settings | `{ timestampsInSnapshots: true }` |
| `uuidInPath` | Add uuid as path parameter on store for `rest-api`(useful for validation) | `true` |
| `size` | Display estimated project sizes | `true` |
| `currentPageOpen` | Send feedback when open is clicked on current page | `check source` |
| `ì18n` | I18n object containing language [more info](https://grapesjs.com/docs/modules/I18n.html#configuration) | `{}` |
| Option | Description | Default |
| --------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------- |
| `dbName` | Database name | `gjs` |
| `objectStoreName` | Collection name | `templates` |
| `loadFirst` | Load first template in storage | `true` |
| `customLoad` | Use custom onload function(skips default onload steps),`(ed, cs) => ...` | `false` |
| `components` | Default components since`fromElement` is not supported | `undefined` |
| `style` | Default style since`fromElement` is not supported | `undefined` |
| `indexeddbVersion` | IndexedDB schema version | `5` |
| `onDelete` | On successful template deletion | `Function(Check source)` |
| `onDeleteError` | On error template deletion | `Function(Check source)` |
| `onScreenShotError` | On error capturing screenshot | `Function(Check source)` |
| `quality` | Generated screenshot quality | `.01` |
| `mdlTitle` | Modal title | `Project Manager` |
| `apiKey` | `Firebase` API key | `` |
| `authDomain` | `Firebase` Auth domain | `` |
| `projectId` | `Cloud Firestore` project ID | `` |
| `firebaseConfig` | Extra firebase app credentials | `{}` |
| `enableOffline` | Enable`Firestore` support for offline data persistence | `true` |
| `settings` | `Firestore` database settings | `{ timestampsInSnapshots: true }` |
| `uuidInPath` | Add uuid as path parameter on store for`rest-api`(useful for validation) | `true` |
| `size` | Display estimated project sizes | `true` |
| `currentPageOpen` | Send feedback when open is clicked on current page | `check source` |
| `ì18n` | I18n object containing language[more info](https://grapesjs.com/docs/modules/I18n.html#configuration) | `{}` |
* Setting `loadFirst` to `false` prevents overwritting the contents of the editor with the contents of the first template in storage.
* Only use options for `Firebase` when using `Cloud Firestore` storage.
......@@ -201,6 +205,7 @@ The backend schema can be something like:
`GET` `https://api/templates/` load all templates
Returns
```json
[
{
......@@ -220,6 +225,7 @@ Returns
`POST` `https://api/templates/{idx: UUIDv4}` store template
Expects
```json
{
"id": "UUIDv4",
......@@ -237,6 +243,7 @@ Expects
`GET` `https://api/templates/{idx: UUIDv4}` load template
Returns
```json
{
"id": "UUIDv4",
......@@ -254,6 +261,7 @@ Returns
`DELETE` `https://api/templates/{idx: UUIDv4}` delete template
Which would have the following setup:
```js
window.editor = grapesjs.init({
container: '#gjs',
......@@ -277,17 +285,16 @@ All the fields are generated from the editor so you just need to setup your API
## Download
* CDN
* `https://unpkg.com/grapesjs-project-manager`
* `https://unpkg.com/grapesjs-project-manager`
* NPM
* `npm i grapesjs-project-manager`
* `npm i grapesjs-project-manager`
* GIT
* `git clone https://github.com/Ju99ernaut/grapesjs-template-manager.git`
* `git clone https://github.com/Ju99ernaut/grapesjs-template-manager.git`
## Usage
Directly in the browser
```html
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/grapesjs-project-manager/dist/grapesjs-project-manager.min.css" rel="stylesheet">
......@@ -314,6 +321,7 @@ Directly in the browser
```
Modern javascript
```js
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-project-manager';
......@@ -378,7 +386,6 @@ Build the source
$ npm run build
```
## License
[AGPL 3.0](https://www.gnu.org/licenses/agpl-3.0.de.html)
......
index.html
+ 56
− 42
View file @ 6b01c747
......@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>GrapesJS Bootstrap v5 Blocks Plugin</title>
<title>GrapesJS Project Manager</title>
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="@schukai/grapesjs-project-manager.min.js"></script>
......@@ -15,49 +15,63 @@
</style>
</head>
<body>
<div id="gjs" style="height:0px; overflow:hidden">
<div style="margin:100px 100px 25px; padding:25px; font:caption">
This is a demo content from _index.html. You can use this template file for
development purpose. It won't be stored in your git repository
</div>
<div id="gjs" style="height:0px; overflow:hidden">
<div style="margin:100px 100px 25px; padding:25px; font:caption">
This is a demo content from index.html. You can use this template file for
development purpose.
</div>
</div>
<script type="text/javascript">
var editor = grapesjs.init({
height: '100%',
pageManager: {},
storageManager: {
type: 'indexeddb'
},
showOffsets: 1,
noticeOnUnload: 0,
container: '#gjs',
fromElement: true,
showDevices: false,
plugins: ['@schukai/grapesjs-project-manager'],
pluginsOpts: {
'@schukai/grapesjs-project-manager': {}
},
<script type="text/javascript">
window.editor = grapesjs.init({
height: '100%',
container: '#gjs',
showOffsets: true,
fromElement: true,
noticeOnUnload: false,
pageManager: true,
storageManager: {
type: 'indexeddb'
},
plugins: ['grapesjs-project-manager'],
pluginsOpts: {
'grapesjs-project-manager': { /* Test here your options */ }
}
});
const pn = editor.Panels;
pn.addButton('options', {
id: 'open-templates',
className: 'fa fa-folder-o',
attributes: {
title: 'Open Templates'
},
command: 'open-templates', //Open modal
});
pn.addButton('views', {
id: 'open-pages',
className: 'fa fa-file-o',
attributes: {
title: 'Take Screenshot'
},
command: 'open-pages',
togglable: false
});
</script>
</body>
});
editor.Panels.addButton('options', {
id: 'open-templates',
className: 'fa fa-folder-o',
attributes: {
title: 'Open projects and templates'
},
command: 'open-templates', //Open modal
});
editor.Panels.addButton('views', {
id: 'open-pages',
className: 'fa fa-file-o',
attributes: {
title: 'Open Pages'
},
command: 'open-pages',
togglable: false
});
editor.BlockManager.add('demo', {
label: '<h1>Headline</h1><p>Lorem Ipsum</p>',
content: `
<h1>Headline</h1><p>Lorem Ipsum</p>
`,
category: 'demo',
attributes: {
title: 'Insert h1 block'
}
});
window.editor = editor;
</script>
</body>
</html>
\ No newline at end of file
package-lock.json
+ 36127
− 10376
View file @ 6b01c747
This diff is collapsed.
package.json
+ 23
− 6
View file @ 6b01c747
......@@ -8,11 +8,11 @@
"url": "https://gitlab.schukai.com/oss/minerva/grapesjs-project-manager.git"
},
"scripts": {
"start": "grapesjs-cli serve --entry=source/index.js",
"build": "grapesjs-cli build",
"build:css": "sass source/styles.scss dist/grapesjs-project-manager.min.css --style compressed",
"watch:scss": "sass --watch source/styles.scss dist/grapesjs-project-manager.min.css --style compressed",
"bump": "npm version patch -m 'Bump v%s'"
"lint": "eslint source",
"build": "webpack --env production",
"build-dev": "npm run && webpack --env production",
"start": "webpack-cli serve --mode development --progress",
"postinstall": "npm-install-peers"
},
"keywords": [
"grapesjs",
......@@ -20,11 +20,28 @@
],
"devDependencies": {
"grapesjs-cli": "^1.0.14",
"sass": "^1.32.8"
"sass": "^1.32.8",
"@babel/core": "^7.18.2",
"@babel/plugin-proposal-object-rest-spread": "^7.18.0",
"@babel/preset-env": "^7.18.2",
"@webpack-cli/init": "^1.1.3",
"babel-loader": "^8.2.5",
"eslint": "^8.16.0",
"html-webpack-plugin": "^5.5.0",
"raw-loader": "^4.0.2",
"terser-webpack-plugin": "^5.3.1",
"webpack": "^5.72.1",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.0",
"npm": "^8.11.0",
"npm-install-peers": "^1.2.2"
},
"author": "schukai GmbH, Brendon Ngirazi",
"license": "AGPL 3.0",
"dependencies": {
"dom-to-image": "^2.6.0"
},
"peerDependencies": {
"grapesjs": "0.x"
}
}
source/index.js
+ 6
− 0
View file @ 6b01c747
......@@ -99,6 +99,12 @@ export default (editor, opts = {}) => {
// Load page with index zero
editor.on('load', () => {
const cs = editor.Storage.getCurrentStorage();
if (!cs?.loadAll?.call ){
console.error('Storage does not have loadAll method');
return
}
const { customLoad } = options;
customLoad && typeof customLoad === 'function' && customLoad(editor, cs);
!customLoad && cs.loadAll(res => {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment