Merge pull request GrapesJS#415 from artf/dev

Merge dev branch
mavenman · Oct 12, 2017 · 8c9ffa9 · 8c9ffa9
2 parents e613f3e + 9e8f7cc
commit 8c9ffa9
Show file tree

Hide file tree

Showing 146 changed files with 5,688 additions and 3,054 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.js]
+charset = utf-8
+indent_style = space
+indent_size = 2
diff --git a/.gitignore b/.gitignore
@@ -2,7 +2,8 @@
 .settings/
 .sass-cache/
 .project
-npm-debug.log
+.idea
+npm-debug.log*
 style/.sass-cache/
 
 img/
@@ -13,3 +14,4 @@ vendor/
 coverage/
 node_modules/
 bower_components/
+grapesjs-*.tgz
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,3 @@
+test
+index.html
+webpack.config.js
diff --git a/README.md b/README.md
@@ -1,9 +1,15 @@
 # [GrapesJS](http://grapesjs.com)
 
 [![Build Status](https://travis-ci.org/artf/grapesjs.svg?branch=master)](https://travis-ci.org/artf/grapesjs)
+[![Chat](https://img.shields.io/badge/chat-discord-7289da.svg)](https://discord.gg/QAbgGXq)
 
 <p align="center"><img src="http://grapesjs.com/img/grapesjs-front-page-m.jpg" alt="GrapesJS" width="500" align="center"/></p>
-<br/>
+
+
+<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/nb9nPYf2XqCE1PbgcQj6gf4D/artf/grapesjs'>
+  <img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/nb9nPYf2XqCE1PbgcQj6gf4D/artf/grapesjs.svg' />
+</a>
+
 
 GrapesJS is a free and open source Web Builder Framework which helps you building HTML templates to be used inside sites, newsletters and mobile apps.
 Mainly GrapesJS was designed to be used inside a [CMS] to speed up a creation of dynamic templates. To better understand this concept check the image below
@@ -32,7 +38,6 @@ Newsletter Demo - http://grapesjs.com/demo-newsletter-editor.html
 * [API](#api)
 * [Testing](#testing)
 * [Plugins](#plugins)
-* [Sponsors](#sponsors)
 * [Support](#support)
 * [License](#license)
 
@@ -106,13 +111,6 @@ $ npm run build
 
 ## Usage
 
-JQuery is the only hard dependency so you have to include it before using GrapesJS
-
-```html
-<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
-```
-After that include scripts from GrapesJS with all your configurations
-
 ```html
 <link rel="stylesheet" href="path/to/grapes.min.css">
 <script src="path/to/grapes.min.js"></script>
@@ -199,16 +197,6 @@ Find out more about plugins here: [Creating plugins](https://github.com/artf/gra
 
 
 
-## Sponsors
-
-The project is sponsored by
-
-[![Sendloop](http://grapesjs.com/img/sendloop-logo-l.png)](https://sendloop.com)
-
-
-
-
-
 ## Support
 
 If you like the project support it with a donation of your choice or become a backer/sponsor via [Open Collective](https://opencollective.com/grapesjs)

diff --git a/dist/css/grapes.min.css b/dist/css/grapes.min.css
diff --git a/dist/grapes.min.js b/dist/grapes.min.js
diff --git a/index.html b/index.html
@@ -4,7 +4,6 @@
     <meta charset="utf-8">
     <title>GrapesJS</title>
     <link rel="stylesheet" href="dist/css/grapes.min.css">
-    <script src="node_modules/jquery/dist/jquery.min.js"></script>
     <script src="dist/grapes.min.js"></script>
 
   </head>
@@ -1037,7 +1036,7 @@ <h1 class="heading">Insert title here</h1>
         sectors: [{
           name: 'General',
           open: false,
-          buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'],
+          buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom']
         },{
           name: 'Dimension',
           open: false,
@@ -1062,7 +1061,15 @@ <h1 class="heading">Insert title here</h1>
         },{
           name: 'Extra',
           open: false,
-          buildProps: ['transition', 'perspective', 'transform'],
+          buildProps: ['opacity', 'transition', 'perspective', 'transform'],
+          properties: [{
+            type: 'slider',
+            property: 'opacity',
+            defaults: 1,
+            step: 0.01,
+            max: 1,
+            min:0,
+          }]
         },{
             name: 'Flex',
             open: false,
@@ -1324,7 +1331,7 @@ <h1 class="heading">Insert title here</h1>
       var model = view.model;
       let targetValue = view.getTargetValue({ignoreDefault: 1});
       let computedValue = view.getComputedValue();
-      let defaultValue = view.getDefaultValue();
+      let defaultValue = view.model.getDefaultValue();
       //console.log('Style of ', model.get('property'), 'Target: ', targetValue, 'Computed:', computedValue, 'Default:', defaultValue);
     });
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.10.6",
+  "version": "0.12.8",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",
@@ -13,10 +13,10 @@
   "dependencies": {
     "backbone": "^1.3.3",
     "backbone-undo": "^0.2.5",
+    "cash-dom": "^1.3.5",
     "codemirror": "^5.21.0",
     "codemirror-formatting": "^1.0.0",
     "font-awesome": "^4.7.0",
-    "jquery": "^3.1.1",
     "keymaster": "^1.6.2",
     "promise-polyfill": "^6.0.2",
     "spectrum-colorpicker": "^1.8.0",
@@ -37,22 +37,21 @@
     "mocha": "^3.1.2",
     "node-sass": "^4.5.3",
     "sinon": "^3.2.1",
+    "string-replace-loader": "^1.3.0",
     "webpack": "^3.5.5",
-    "webpack-dev-server": "^2.7.1"
+    "webpack-dev-server": "^2.7.1",
+    "whatwg-fetch": "^2.0.3"
   },
   "keywords": [
-    "wte",
     "grapes",
     "grapesjs",
-    "web template editor",
-    "web site builder",
-    "web template builder",
-    "html website builder",
-    "site builder",
-    "newsletter builder",
     "wysiwyg",
+    "web",
     "template",
-    "editor"
+    "editor",
+    "newsletter",
+    "site",
+    "builder"
   ],
   "babel": {
     "presets": [
@@ -63,6 +62,7 @@
   "scripts": {
     "lint": "eslint src",
     "build": "cross-env WEBPACK_ENV=prod && npm run lint && npm run test && npm run v:patch && webpack && npm run build:css",
+    "build-n": "cross-env WEBPACK_ENV=prod && npm run lint && npm run test && webpack && npm run build:css",
     "build:css": "node-sass src/styles/scss/main.scss dist/css/grapes.min.css --output-style compressed",
     "v:patch": "npm version --no-git-tag-version patch",
     "start": "cross-env WEBPACK_ENV=dev webpack-dev-server --progress --colors & npm run build:css -- -w",

diff --git a/src/asset_manager/view/AssetsView.js b/src/asset_manager/view/AssetsView.js
@@ -153,7 +153,8 @@ module.exports = Backbone.View.extend({
     if (hide) {
       assetsEl.empty();
     } else {
-      assetsEl.append(this.config.noAssets);
+      const noAssets = this.config.noAssets;
+      noAssets && assetsEl.append(noAssets);
     }
   },
 

diff --git a/src/asset_manager/view/FileUploader.js b/src/asset_manager/view/FileUploader.js
@@ -73,7 +73,7 @@ module.exports = Backbone.View.extend({
     const em = this.config.em;
     const config = this.config;
     const target = this.target;
-    const json = typeof text === 'text' ? JSON.parse(text) : text;
+    const json = typeof text === 'string' ? JSON.parse(text) : text;
     em && em.trigger('asset:upload:response', json);
 
     if (config.autoAdd && target) {

diff --git a/src/block_manager/index.js b/src/block_manager/index.js
@@ -2,7 +2,9 @@
  * * [add](#add)
  * * [get](#get)
  * * [getAll](#getall)
+ * * [getAllVisible](#getallvisible)
  * * [getCategories](#getcategories)
+ * * [getContainer](#getcontainer)
  * * [render](#render)
  *
  * Block manager helps managing various, draggable, piece of contents that could be easily reused inside templates.
@@ -32,7 +34,7 @@ module.exports = () => {
   Blocks = require('./model/Blocks'),
   BlockCategories = require('./model/Categories'),
   BlocksView = require('./view/BlocksView');
-  var blocks, view;
+  var blocks, blocksVisible, blocksView;
   var categories = [];
 
   return {
@@ -52,19 +54,58 @@ module.exports = () => {
        */
       init(config) {
         c = config || {};
-        for (var name in defaults) {
-          if (!(name in c))
+        const em = c.em;
+
+        for (let name in defaults) {
+          if (!(name in c)) {
             c[name] = defaults[name];
+          }
         }
-        blocks = new Blocks(c.blocks);
+
+        // Global blocks collection
+        blocks = new Blocks([]);
+        blocksVisible = new Blocks([]);
         categories = new BlockCategories(),
-        view = new BlocksView({
-          collection: blocks,
+        blocksView = new BlocksView({
+          // Visible collection
+          collection: blocksVisible,
           categories,
         }, c);
+
+        // Setup the sync between the global and public collections
+        blocks.listenTo(blocks, 'add', model => {
+          blocksVisible.add(model);
+          em && em.trigger('block:add', model);
+        });
+
+        blocks.listenTo(blocks, 'remove', model => {
+          blocksVisible.remove(model);
+          em && em.trigger('block:remove', model);
+        });
+
+        blocks.listenTo(blocks, 'reset', coll => {
+          blocksVisible.reset(coll.models);
+        });
+
         return this;
       },
 
+      /**
+       * Get configuration object
+       * @return {Object}
+       */
+      getConfig() {
+        return c;
+      },
+
+      /**
+       * Load default blocks if the collection is empty
+       */
+      onLoad() {
+        const blocks = this.getAll();
+        !blocks.length && blocks.reset(c.blocks);
+      },
+
       /**
        * Add new block to the collection.
        * @param {string} id Block id
@@ -98,7 +139,7 @@ module.exports = () => {
        * Return the block by id
        * @param  {string} id Block id
        * @example
-       * var block = blockManager.get('h1-block');
+       * const block = blockManager.get('h1-block');
        * console.log(JSON.stringify(block));
        * // {label: 'Heading', content: '<h1>Put your ...', ...}
        */
@@ -110,38 +151,78 @@ module.exports = () => {
        * Return all blocks
        * @return {Collection}
        * @example
-       * var blocks = blockManager.getAll();
+       * const blocks = blockManager.getAll();
        * console.log(JSON.stringify(blocks));
        * // [{label: 'Heading', content: '<h1>Put your ...'}, ...]
        */
       getAll() {
         return blocks;
       },
 
+      /**
+       * Return the visible collection, which containes blocks actually rendered
+       * @return {Collection}
+       */
+      getAllVisible() {
+        return blocksVisible;
+      },
+
+      /**
+       * Remove a block by id
+       * @param {string} id Block id
+       * @return {Block} Removed block
+       */
+      remove(id) {
+        return blocks.remove(id);
+      },
+
       /**
        * Get all available categories.
-       * Is possible to add categories only with blocks via 'add()' method
+       * It's possible to add categories only within blocks via 'add()' method
        * @return {Array|Collection}
        */
       getCategories() {
         return categories;
       },
 
       /**
-       * Render blocks
+       * Return the Blocks container element
        * @return {HTMLElement}
        */
-      render() {
-        return view.render().el;
+      getContainer() {
+        return blocksView.el;
       },
 
       /**
-       * Remove block by id
-       * @param {string} id Block id
-       * @return {Block} Removed block
+       * Render blocks
+       * @param  {Array} blocks Blocks to render, without the argument will render
+       *                        all global blocks
+       * @example
+       * // Render all blocks (inside the global collection)
+       * blockManager.render();
+       *
+       * // Render new set of blocks
+       * const blocks = blockManager.getAll();
+       * blockManager.render(blocks.filter(
+       *  block => block.get('category') == 'sections'
+       * ));
+       * // Or a new set from an array
+       * blockManager.render([
+       *  {label: 'Label text', content: '<div>Content</div>'}
+       * ]);
+       *
+       * // Back to blocks from the global collection
+       * blockManager.render();
        */
-      remove(id) {
-        return blocks.remove(id);
+      render(blocks) {
+        const toRender = blocks || this.getAll().models;
+
+        if (!blocksView.rendered) {
+          blocksView.render();
+          blocksView.rendered = 1;
+        }
+
+        blocksView.collection.reset(toRender);
       },
 
   };

diff --git a/src/block_manager/view/BlockView.js b/src/block_manager/view/BlockView.js
@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+const $ = Backbone.$;
 
 module.exports = Backbone.View.extend({