Initial commit

GrapesJS · Aug 8, 2016 · 58a5234 · 58a5234
commit 58a5234
Show file tree

Hide file tree

Showing 9 changed files with 261 additions and 0 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,15 @@
+{
+  "parser" : "babel-eslint",
+
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "rules": {
+    "strict": 0,
+    "quotes": [0, "single"],
+    "eol-last": [0],
+    "no-mixed-requires": [0],
+    "no-underscore-dangle": [0]
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+.DS_Store
+private/
+node_modules/
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,25 @@
+Copyright (c) 2016, Artur Arseniev
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+- Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+- Redistributions in binary form must reproduce the above copyright notice, this
+  list of conditions and the following disclaimer in the documentation and/or
+  other materials provided with the distribution.
+- Neither the name "GrapesJS" nor the names of its contributors may be
+  used to endorse or promote products derived from this software without
+  specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/README.md b/README.md
@@ -0,0 +1,55 @@
+# [GrapesJS Export](http://grapesjs.com)
+
+This plugin adds the possibility to export template in a zip archive.
+Demo: http://grapesjs.com/demo.html
+
+## Resume
+
+* Add
+  * Commands
+      - `gjs-export-zip`
+* Plugin
+  * Name: `gjs-plugin-export`
+  * Plugin options
+      - addExportBtn: Add a button inside the export dialog
+        default: `true`
+      - btnLabel: Label to the export butten
+        default: `Export to ZIP`
+      - preHtml: String before the HTML template
+        default: `<!doctype html><html><head><link rel="stylesheet" href="./css/style.css"></head><body>`
+      - postHtml: String after the HTML template
+        default: `</body><html>`
+      - preCss: String before the CSS template
+        default: ``
+      - postCss: String after the CSS template
+        default: ``
+
+## Usage
+
+```js
+<link rel="stylesheet" href="path/to/grapes.min.css">
+<script src="path/to/grapes.min.js"></script>
+<script src="path/to/grapesjs-plugin-export.min.js"></script>
+
+<div id="gjs"></div>
+<script type="text/javascript">
+  var editor = grapesjs.init({
+      container : '#gjs',
+      plugins: ['gjs-plugin-export'],
+      pluginsOpts: {
+        'gjs-plugin-export': {
+          btnLabel: 'EXPORT',
+          preHtml: '<!doctype><html><head><link rel="stylesheet" href="./css/style.css"></head><body>'
+        }
+      }
+  });
+
+  // You can also call the command wherever you want in this way
+  editor.runCommand('gjs-export-zip');
+</script>
+```
+
+## License
+
+BSD 3-Clause
+
diff --git a/dist/grapesjs-plugin-export.min.js b/dist/grapesjs-plugin-export.min.js
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>GrapesJS Plugin</title>
+    <link rel="stylesheet" href="./node_modules/grapesjs/dist/css/grapes.min.css">
+    <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
+    <script src="./node_modules/grapesjs/dist/grapes.min.js"></script>
+    <script src="./dist/grapesjs-plugin-export.min.js"></script>
+  </head>
+  <style>
+    body, html{ height: 100%; margin: 0;}
+  </style>
+  <body>
+    <div id="gjs" style="height:0px; overflow:hidden"></div>
+    <script type="text/javascript">
+      var editor = grapesjs.init({
+        noticeOnUnload: 0,
+        container : '#gjs',
+        plugins: ['gjs-plugin-export']
+      });
+    </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "grapesjs-plugin-export",
+  "version": "0.1.0",
+  "description": "Export GrapesJS templates to ZIP",
+  "main": "index.js",
+  "scripts": {
+    "lint": "eslint src",
+    "test": "mocha --compilers js:babel-core/register --recursive ./test/*.js",
+    "test:dev": "mocha --compilers js:babel-core/register --recursive -R min -w ./test/*.js",
+    "build": "WEBPACK_ENV=prod && webpack",
+    "start": "WEBPACK_ENV=dev ./node_modules/.bin/webpack-dev-server --progress --colors"
+  },
+  "keywords": [
+    "grapesjs",
+    "template",
+    "export",
+    "zip"
+  ],
+  "author": "Artur Arseniev",
+  "license": "BSD-3-Clause",
+  "devDependencies": {
+    "babel-cli": "^6.11.4",
+    "babel-core": "^6.13.2",
+    "babel-eslint": "^6.1.2",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.13.2",
+    "eslint": "^3.2.2",
+    "grapesjs": "^0.3.2",
+    "mocha": "^3.0.2",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.14.1"
+  },
+  "dependencies": {
+    "file-saver": "^1.3.2",
+    "jszip": "^3.0.0"
+  }
+}
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,52 @@
+grapesjs.plugins.add('gjs-plugin-export', (editor, opts) => {
+  let c = opts || {};
+  let JSZip = require('JSZip');
+  let FileSaver = require('file-saver');
+  let config = editor.getConfig();
+  let pfx = config.stylePrefix;
+  let btnExp = document.createElement("BUTTON");
+  let commandName = 'gjs-export-zip';
+
+  let defaults = {
+    addExportBtn: 1,
+    btnLabel: 'Export to ZIP',
+    preHtml: '<!doctype html><html lang="en"><head><meta charset="utf-8"><link rel="stylesheet" href="./css/style.css"></head><body>',
+    postHtml: '</body><html>',
+    preCss: '',
+    postCss: ''
+  };
+
+  for (let name in defaults) {
+    if (!(name in c))
+      c[name] = defaults[name];
+  }
+
+  btnExp.innerHTML = c.btnLabel;
+  btnExp.className = pfx + 'btn-prim';
+
+  // Add command
+  editor.Commands.add(commandName, {
+    run() {
+      let zip = new JSZip();
+      let cssDir = zip.folder("css");
+      let fn = 'grapesjs_template_' + Date.now() + '.zip';
+      zip.file('index.html', c.preHtml + editor.getHtml() + c.postHtml);
+      cssDir.file('style.css', c.preCss + editor.getCss() + c.postCss);
+      zip.generateAsync({type:"blob"})
+      .then((content) => {
+          FileSaver.saveAs(content, fn);
+      });
+    }
+  });
+
+  // Add button inside export dialog
+  if(c.addExportBtn){
+    editor.on('run:export-template', () => {
+      editor.Dialog.getContentEl().appendChild(btnExp);
+      btnExp.onclick = () => {
+        editor.runCommand(commandName);
+      };
+    });
+  }
+
+});
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,32 @@
+var path = require('path');
+var webpack = require('webpack');
+var name = 'grapesjs-plugin-export';
+var env = process.env.WEBPACK_ENV;
+var plugins = [];
+
+if(env !== 'dev'){
+  plugins.push(new webpack.optimize.UglifyJsPlugin({ compressor: { warnings: false } }));
+}
+
+module.exports = {
+  entry: './src/main',
+  output: {
+      filename: './dist/' + name + '.min.js',
+      library: name,
+      libraryTarget: 'umd',
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.jsx?$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+        include: /src/,
+        query: {
+          presets: ['es2015']
+        }
+      },
+    ],
+  },
+  plugins: plugins
+};