From fc65f6052315c4bb0e9d5cc8dc1424bca55e100e Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 23 Jun 2016 19:14:02 +0200 Subject: [PATCH] Update JSDocs and README --- README.md | 5 ++-- src/editor/main.js | 20 ++++++++++++++++ src/editor/model/Editor.js | 27 +++++++++++++++++----- src/editor/view/EditorView.js | 4 +--- src/storage_manager/model/LocalStorage.js | 13 ++++++++--- src/storage_manager/model/RemoteStorage.js | 8 +++++-- 6 files changed, 60 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 4956f9805..6c0188412 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Mainly GrapesJS was designed to be used inside a [CMS] to speed up a creation of

GrapesJS - Style Manager


-Generally any 'template system', that you find in various applications like CMS, is composed by the **structure** (HTML), **style** (CSS) and **variables**, which are then replaced with other templates and contents on server-side and rendered on client. +Generally any 'template system', that you'd find in various applications like CMS, is composed by the **structure** (HTML), **style** (CSS) and **variables**, which are then replaced with other templates and contents on server-side and rendered on client. This demo shows an example of what is possible to achieve: http://grapesjs.com/demo.html @@ -116,8 +116,7 @@ You could also grab the content directly from the element with `fromElement` pro ``` -Unfortunately with the configuration above you wouldn't see a lot. This because GrapesJS itself is empty, adding panels, buttons and other stuff will be your job (actually it's not empty but you need buttons to show them up). -The section below will explain some basic configurations but for a more practical example I suggest to look up the code inside this demo: http://grapesjs.com/demo.html +For more practical example I suggest to look up the code inside this demo: http://grapesjs.com/demo.html ## Configuration diff --git a/src/editor/main.js b/src/editor/main.js index f6b0d68c9..062cdb216 100644 --- a/src/editor/main.js +++ b/src/editor/main.js @@ -23,6 +23,26 @@ * * @module Editor * @param {Object} config Configurations + * @param {string} config.container='' Selector for the editor container, eg. '#myEditor' + * @param {string|Array} [config.components=''] HTML string or object of components + * @param {string|Array} [config.style=''] CSS string or object of rules + * @param {Boolean} [config.fromElement=false] If true, will fetch HTML and CSS from selected container + * @param {Boolean} [config.copyPaste=true] Enable/Disable the possibility to copy(ctrl + c) & paste(ctrl + v) components + * @param {Boolean} [config.undoManager=true] Enable/Disable undo manager + * @param {Boolean} [config.autorender=true] If true renders editor on init + * @param {string} [config.height='900px'] Height for the editor container + * @param {string} [config.width='100%'] Width for the editor container + * @param {Object} [config.storage={}] Storage manager configuration, see the relative documentation + * @param {Object} [config.styleManager={}] Style manager configuration, see the relative documentation + * @param {Object} [config.commands={}] Commands configuration, see the relative documentation + * @param {Object} [config.domComponents={}] Components configuration, see the relative documentation + * @param {Object} [config.panels={}] Panels configuration, see the relative documentation + * @example + * var editor = grapesjs.init({ + * container : '#gjs', + * components: '
Hello world!
', + * style: '.txt-red{color: red}', + * }); */ define(function (require){ diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 941d4314c..694d33407 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -77,6 +77,7 @@ define([ * Initialize editor model and set editor instance * @param {Editor} editor Editor instance * @return {this} + * @private */ init: function(editor){ this.set('Editor', editor); @@ -84,6 +85,7 @@ define([ /** * Initialize Parser + * @private * */ initParser: function() { this.Parser = new Parser(); @@ -143,6 +145,7 @@ define([ /** * Listen for new rules * @param {Object} collection + * @private */ listenRules: function(collection) { this.stopListening(collection, 'add remove', this.listenRule); @@ -155,6 +158,7 @@ define([ /** * Listen for rule changes * @param {Object} model + * @private */ listenRule: function(model) { this.stopListening(model, 'change:style', this.ruleUpdated); @@ -166,6 +170,7 @@ define([ * @param {Object} model * @param {Mixed} val Value * @param {Object} opt Options + * @private * */ ruleUpdated: function(model, val, opt) { var count = this.get('changesCount') + 1, @@ -413,6 +418,7 @@ define([ * @param {Object} model * @param {Mixed} val Value * @param {Object} opt Options + * @private * */ componentsUpdated: function(model, val, opt){ var updatedCount = this.get('changesCount') + 1, @@ -433,7 +439,7 @@ define([ * @param {Object} Model * @param {Mixed} New value * @param {Object} Options - * + * @private * */ componentSelected: function(model, val, options){ if(!this.get('selectedComponent')) @@ -444,8 +450,8 @@ define([ /** * Load components from storage - * * @return {Object} + * @private * */ loadComponents: function() { var comps = ''; @@ -463,8 +469,7 @@ define([ /** * Save components to storage - * - * @return void + * @private * */ storeComponents: function() { this.store(); @@ -502,7 +507,7 @@ define([ * @param {Object} model * @param {Mixed} val Value * @param {Object} opt Options - * + * @private * */ updateComponents: function(model, val, opt) { var comps = model.get('components'), @@ -533,6 +538,7 @@ define([ /** * Init stuff like storage for already existing elements * @param {Object} model + * @private */ initChildrenComp: function(model) { var comps = model.get('components'); @@ -551,7 +557,7 @@ define([ * @param {Object} model * @param {Mixed} val Value * @param {Object} opt Options - * + * @private * */ rmComponents: function(model, val, opt){ var avSt = opt ? opt.avoidStore : 0; @@ -563,6 +569,7 @@ define([ /** * Returns model of the selected component * @return {Component|null} + * @private */ getSelected: function(){ return this.get('selectedComponent'); @@ -572,6 +579,7 @@ define([ * Set components inside editor's canvas. This method overrides actual components * @param {Object|string} components HTML string or components model * @return {this} + * @private */ setComponents: function(components){ return this.Components.setComponents(components); @@ -580,6 +588,7 @@ define([ /** * Returns components model from the editor's canvas * @return {Components} + * @private */ getComponents: function(){ var cmp = this.Components; @@ -596,6 +605,7 @@ define([ * Set style inside editor's canvas. This method overrides actual style * @param {Object|string} style CSS string or style model * @return {this} + * @private */ setStyle: function(style){ var rules = this.CssComposer.getRules(); @@ -608,6 +618,7 @@ define([ /** * Returns rules/style model from the editor's canvas * @return {Rules} + * @private */ getStyle: function(){ return this.CssComposer.getRules(); @@ -616,6 +627,7 @@ define([ /** * Returns HTML built inside canvas * @return {string} HTML string + * @private */ getHtml: function(){ var cmp = this.Components; @@ -631,6 +643,7 @@ define([ /** * Returns CSS built inside canvas * @return {string} CSS string + * @private */ getCss: function(){ var cmp = this.Components; @@ -647,6 +660,7 @@ define([ /** * Store data to the current storage * @return {Object} Stored data + * @private */ store: function(){ var sm = this.StorageManager; @@ -676,6 +690,7 @@ define([ /** * Load data from the current storage * @return {Object} Loaded data + * @private */ load: function(){ var result = this.getCacheLoad(1); diff --git a/src/editor/view/EditorView.js b/src/editor/view/EditorView.js index 2afddc19a..15efa6cc6 100644 --- a/src/editor/view/EditorView.js +++ b/src/editor/view/EditorView.js @@ -1,8 +1,6 @@ define(['backbone'], function(Backbone){ - /** - * @class EditorView - * */ + return Backbone.View.extend({ initialize: function() { diff --git a/src/storage_manager/model/LocalStorage.js b/src/storage_manager/model/LocalStorage.js index dd0a51c11..07ccc9292 100644 --- a/src/storage_manager/model/LocalStorage.js +++ b/src/storage_manager/model/LocalStorage.js @@ -7,7 +7,9 @@ define(['backbone'], checkLocal: true, }, - /** @inheritdoc */ + /** + * @private + */ store: function(data) { this.checkStorageEnvironment(); @@ -15,7 +17,9 @@ define(['backbone'], localStorage.setItem(key, data[key]); }, - /** @inheritdoc */ + /** + * @private + */ load: function(keys){ this.checkStorageEnvironment(); var result = {}; @@ -29,7 +33,9 @@ define(['backbone'], return result; }, - /** @inheritdoc */ + /** + * @private + */ remove: function(keys) { this.checkStorageEnvironment(); @@ -39,6 +45,7 @@ define(['backbone'], /** * Check storage environment + * @private * */ checkStorageEnvironment: function() { if(this.get('checkLocal') && !localStorage) diff --git a/src/storage_manager/model/RemoteStorage.js b/src/storage_manager/model/RemoteStorage.js index b25225bb9..936bdbfc7 100644 --- a/src/storage_manager/model/RemoteStorage.js +++ b/src/storage_manager/model/RemoteStorage.js @@ -13,7 +13,9 @@ define(['backbone'], onComplete: function(){}, }, - /** @inheritdoc */ + /** + * @private + */ store: function(data) { var fd = {}, params = this.get('params'); @@ -35,7 +37,9 @@ define(['backbone'], }); }, - /** @inheritdoc */ + /** + * @private + */ load: function(keys){ var result = {}, fd = {},