"),this.getJsContainer().append(t.scriptContainer.get(0)));var e=t.model,i=e.getId();t.el.id=i,t.scriptContainer.html(""),t.scriptContainer.append("
diff --git a/package.json b/package.json
index bf19d5ffd..37f8b99eb 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "grapesjs",
"description": "Free and Open Source Web Builder Framework",
- "version": "0.9.12",
+ "version": "0.10.6",
"author": "Artur Arseniev",
"license": "BSD-3-Clause",
"homepage": "http://grapesjs.com",
@@ -18,6 +18,7 @@
"font-awesome": "^4.7.0",
"jquery": "^3.1.1",
"keymaster": "^1.6.2",
+ "promise-polyfill": "^6.0.2",
"spectrum-colorpicker": "^1.8.0",
"underscore": "^1.8.3"
},
@@ -25,18 +26,19 @@
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
- "chai": "^3.5.0",
- "cross-env": "^5.0.4",
- "documentation": "^4.0.0-beta2",
+ "babel-preset-stage-3": "^6.24.1",
+ "chai": "^4.1.2",
+ "cross-env": "^5.0.5",
+ "documentation": "^5.3.0",
"eslint": "^4.1.1",
"expect": "^1.20.2",
"istanbul": "^0.4.2",
- "jsdom": "^11.1.0",
+ "jsdom": "^11.2.0",
"mocha": "^3.1.2",
- "node-sass": "^3.4.2",
- "sinon": "^1.17.6",
- "webpack": "^2.6.1",
- "webpack-dev-server": "^2.4.5"
+ "node-sass": "^4.5.3",
+ "sinon": "^3.2.1",
+ "webpack": "^3.5.5",
+ "webpack-dev-server": "^2.7.1"
},
"keywords": [
"wte",
@@ -54,7 +56,8 @@
],
"babel": {
"presets": [
- "es2015"
+ "es2015",
+ "stage-3"
]
},
"scripts": {
diff --git a/src/asset_manager/config/config.js b/src/asset_manager/config/config.js
index 531ddfa1e..a3e62db1a 100644
--- a/src/asset_manager/config/config.js
+++ b/src/asset_manager/config/config.js
@@ -1,12 +1,46 @@
module.exports = {
// Default assets
+ // eg. [
+ // 'https://...image1.png',
+ // 'https://...image2.png',
+ // {type: 'image', src: 'https://...image3.png', someOtherCustomProp: 1},
+ // ..
+ // ]
assets: [],
+ // Content to add where there is no assets to show
+ // eg. 'No
assets here, drag to upload'
+ noAssets: '',
+
// Style prefix
stylePrefix: 'am-',
- // Url where uploads will be send, set false to disable upload
- upload: 'http://localhost/assets/upload',
+ // Upload endpoint, set `false` to disable upload
+ // upload: 'https://endpoint/upload/assets',
+ // upload: false,
+ upload: 0,
+
+ // The name used in POST to pass uploaded files
+ uploadName: 'files',
+
+ // Custom headers to pass with the upload request
+ headers: {},
+
+ // Custom parameters to pass with the upload request, eg. csrf token
+ params: {},
+
+ // If true, tries to add automatically uploaded assets.
+ // To make it work the server should respond with a JSON containing assets
+ // in a data key, eg:
+ // {
+ // data: [
+ // 'https://.../image.png',
+ // ...
+ // {src: 'https://.../image2.png'},
+ // ...
+ // ]
+ // }
+ autoAdd: 1,
// Text on upload input
uploadText: 'Drop files here or click to upload',
@@ -16,12 +50,20 @@ module.exports = {
// Custom uploadFile function
// @example
- // uploadFile: function(e) {
+ // uploadFile: (e) => {
// var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
// // ...send somewhere
// }
uploadFile: '',
+ // Handle the image url submit from the built-in 'Add image' form
+ // @example
+ // handleAdd: (textFromInput) => {
+ // // some check...
+ // editor.AssetManager.add(textFromInput);
+ // }
+ handleAdd: '',
+
// Enable an upload dropzone on the entire editor (not document) when dragging
// files over it
dropzone: 1,
@@ -31,4 +73,7 @@ module.exports = {
// Any dropzone content to append inside dropzone element
dropzoneContent: '',
+
+ // Default title for the asset manager modal
+ modalTitle: 'Select Image',
};
diff --git a/src/asset_manager/index.js b/src/asset_manager/index.js
index a5d10a8a1..d38602e1e 100644
--- a/src/asset_manager/index.js
+++ b/src/asset_manager/index.js
@@ -2,11 +2,15 @@
* * [add](#add)
* * [get](#get)
* * [getAll](#getall)
+ * * [getAllVisible](#getallvisible)
* * [remove](#remove)
+ * * [getContainer](#getcontainer)
+ * * [getAssetsEl](#getassetsel)
+ * * [addType](#addtype)
+ * * [getType](#gettype)
+ * * [getTypes](#gettypes)
* * [store](#store)
* * [load](#load)
- * * [onClick](#onClick)
- * * [onDblClick](#onDblClick)
*
* Before using this methods you should get first the module from the editor instance, in this way:
*
@@ -35,11 +39,12 @@
*/
module.exports = () => {
- var c = {},
- Assets = require('./model/Assets'),
- AssetsView = require('./view/AssetsView'),
- FileUpload = require('./view/FileUploader'),
- assets, am, fu;
+ let c = {};
+ const defaults = require('./config/config');
+ const Assets = require('./model/Assets');
+ const AssetsView = require('./view/AssetsView');
+ const FileUpload = require('./view/FileUploader');
+ let assets, am, fu;
return {
@@ -57,6 +62,10 @@ module.exports = () => {
*/
storageKey: 'assets',
+ getConfig() {
+ return c;
+ },
+
/**
* Initialize module
* @param {Object} config Configurations
@@ -64,30 +73,49 @@ module.exports = () => {
*/
init(config) {
c = config || {};
- var defaults = require('./config/config');
- for (var name in defaults) {
+ for (let name in defaults) {
if (!(name in c))
c[name] = defaults[name];
}
- var ppfx = c.pStylePrefix;
- if(ppfx)
+ const ppfx = c.pStylePrefix;
+ const em = c.em;
+
+ if (ppfx) {
c.stylePrefix = ppfx + c.stylePrefix;
+ }
- assets = new Assets(c.assets);
- var obj = {
- collection: assets,
+ // Global assets collection
+ assets = new Assets([]);
+ const obj = {
+ // Collection visible in asset manager
+ collection: new Assets([]),
+ globalCollection: assets,
config: c,
};
- am = new AssetsView(obj);
fu = new FileUpload(obj);
+ obj.fu = fu;
+ am = new AssetsView(obj);
+
+ // Setup the sync between the global and public collections
+ assets.listenTo(assets, 'add', (model) => {
+ this.getAllVisible().add(model);
+ em && em.trigger('asset:add', model);
+ });
+
+ assets.listenTo(assets, 'remove', (model) => {
+ this.getAllVisible().remove(model);
+ em && em.trigger('asset:remove', model);
+ });
+
return this;
},
/**
* Add new asset/s to the collection. URLs are supposed to be unique
* @param {string|Object|Array
|Array