diff --git a/src/commands/main.js b/src/commands/main.js index a98597ad2..ea3553f16 100644 --- a/src/commands/main.js +++ b/src/commands/main.js @@ -1,78 +1,123 @@ +/** + * This module manages commands which could be called mainly by buttons. + * You can init the editor with all necessary commands via configuration + * + * ```js + * var editor = new GrapesJS({ + * ... + * commands: {...} // Check below for the properties + * ... + * }); + * ``` + * + * Before using methods you should get first the module from the editor instance, in this way: + * + * ```js + * var commandsService = editor.get('Commands'); + * ``` + * + * @module Commands + * @param {Object} config Configurations + * @param {Array} [config.defaults=[]] Array of possible commands + * @param {Boolean} [config.firstCentered=true] If true will center new first-level components + * @param {number} [config.minComponentH=50] Minimum height (in px) for new inserted components + * @param {number} [config.minComponentW=50] Minimum width (in px) for new inserted components + * @example + * ... + * commands: { + * firstCentered: true, + * minComponentH: 100, + * minComponentW: 100, + * defaults: [{ + * id: 'helloWorld', + * run: function(serviceManager, senderBtn){ + * alert('Hello world!'); + * }, + * stop: function(serviceManager, senderBtn){ + * alert('Stop!'); + * }, + * }], + * }, + * ... + */ define(function(require) { - /** - * @class Commands - * @param {Object} Configurations - * - * @return {Object} - * */ - function Commands(config) - { - var c = config || {}, - defaults = require('./config/config'), - AbsCommands = require('./view/CommandAbstract'); + + var Commands = function(conf){ + + var c = conf || {}, + defaults = require('./config/config'), + AbsCommands = require('./view/CommandAbstract'); for (var name in defaults) { if (!(name in c)) c[name] = defaults[name]; } - this.commands = {}; - this.config = c; - this.Abstract = AbsCommands; + // Need it here as it would be used below + var add = function(id, obj){ + delete obj.initialize; + commands[id] = Abstract.extend(obj); + return this; + }; - // Load commands passed by configuration + var commands = {}; + var config = c; + var Abstract = AbsCommands; + + // Load commands passed via configuration for( var k in c.defaults){ - var obj = c.defaults[k]; + var obj = c.defaults[k]; if(obj.id) - this.add(obj.id, obj); + add(obj.id, obj); } - this.defaultCommands = {}; - this.defaultCommands['select-comp'] = require('./view/SelectComponent'); - this.defaultCommands['create-comp'] = require('./view/CreateComponent'); - this.defaultCommands['delete-comp'] = require('./view/DeleteComponent'); + var defaultCommands = {}; + defaultCommands['select-comp'] = require('./view/SelectComponent'); + defaultCommands['create-comp'] = require('./view/CreateComponent'); + defaultCommands['delete-comp'] = require('./view/DeleteComponent'); + defaultCommands['image-comp'] = require('./view/ImageComponent'); + defaultCommands['move-comp'] = require('./view/MoveComponent'); + defaultCommands['text-comp'] = require('./view/TextComponent'); + defaultCommands['insert-custom'] = require('./view/InsertCustom'); + defaultCommands['export-template'] = require('./view/ExportTemplate'); + defaultCommands['sw-visibility'] = require('./view/SwitchVisibility'); + defaultCommands['open-layers'] = require('./view/OpenLayers'); + defaultCommands['open-sm'] = require('./view/OpenStyleManager'); //this.defaultCommands['resize-comp'] = require('./view/ResizeComponent'); - this.defaultCommands['image-comp'] = require('./view/ImageComponent'); - this.defaultCommands['move-comp'] = require('./view/MoveComponent'); - this.defaultCommands['text-comp'] = require('./view/TextComponent'); - this.defaultCommands['insert-custom'] = require('./view/InsertCustom'); - this.defaultCommands['export-template'] = require('./view/ExportTemplate'); - this.defaultCommands['sw-visibility'] = require('./view/SwitchVisibility'); - this.defaultCommands['open-layers'] = require('./view/OpenLayers'); - this.defaultCommands['open-sm'] = require('./view/OpenStyleManager'); - - this.config.model = this.config.em.get('Canvas'); - } + config.model = config.em.get('Canvas'); - Commands.prototype = { + return { /** - * Add new command - * @param {String} id - * @param {Object} obj - * - * @return this + * Add new command to the collection + * @param {string} id Command's ID + * @param {Object} command Object representing you command. Methods `run` and `stop` are required + * @return {this} + * @example + * commandsService.add('myCommand', { + * run: function(serviceManager, senderBtn){ + * alert('Hello world!'); + * }, + * stop: function(serviceManager, senderBtn){ + * }, + * }); * */ - add : function(id, obj) - { - delete obj.initialize; - this.commands[id] = this.Abstract.extend(obj); - return this; - }, + add: add, /** - * Get command - * @param {String} id - * - * @return Command + * Get command by ID + * @param {string} id Command's ID + * @return {Object} Object representing the command + * @example + * var myCommand = commandsService.get('myCommand'); + * myCommand.run(); * */ - get : function(id) - { - var el = this.commands[id]; + get: function(id){ + var el = commands[id]; if(typeof el == 'function'){ - el = new el(this.config); - this.commands[id] = el; + el = new el(config); + commands[id] = el; } return el; @@ -80,17 +125,18 @@ define(function(require) { /** * Load default commands - * - * @return this + * @return {this} + * @private * */ - loadDefaultCommands : function() - { - for (var id in this.defaultCommands) { - this.add(id, this.defaultCommands[id]); + loadDefaultCommands: function(){ + for (var id in defaultCommands) { + this.add(id, defaultCommands[id]); } return this; }, + }; + }; return Commands; diff --git a/src/commands/view/CommandAbstract.js b/src/commands/view/CommandAbstract.js index 25221df0e..5aefdb833 100644 --- a/src/commands/view/CommandAbstract.js +++ b/src/commands/view/CommandAbstract.js @@ -2,12 +2,14 @@ define(['backbone'], function(Backbone) { /** * @class CommandAbstract + * @private * */ return Backbone.View.extend({ /** * Initialize method that can't be removed * @param {Object} o Options + * @private * */ initialize: function(o) { this.config = o; @@ -27,6 +29,7 @@ define(['backbone'], /** * Callback triggered after initialize * @param {Object} o Options + * @private * */ init: function(o){}, @@ -34,6 +37,7 @@ define(['backbone'], * Method that run command * @param {Object} em Editor model * @param {Object} sender Button sender + * @private * */ run: function(em, sender) { console.warn("No run method found"); @@ -43,6 +47,7 @@ define(['backbone'], * Method that stop command * @param {Object} em Editor model * @param {Object} sender Button sender + * @private * */ stop: function(em, sender) { console.warn("No stop method found"); diff --git a/src/commands/view/CreateComponent.js b/src/commands/view/CreateComponent.js index 82c0ba8e1..457da6f90 100644 --- a/src/commands/view/CreateComponent.js +++ b/src/commands/view/CreateComponent.js @@ -1,8 +1,10 @@ +/** + * @module CreateComponent + * @private + * */ define(['backbone','./SelectPosition'], function(Backbone, SelectPosition) { - /** - * @class CreateComponent - * */ + return _.extend({}, SelectPosition, { newElement : null, @@ -20,6 +22,7 @@ define(['backbone','./SelectPosition'], * Returns creation placeholder * * @return {Object} + * @private * */ getCreationPlaceholder: function() { @@ -30,6 +33,7 @@ define(['backbone','./SelectPosition'], * Removes creation placeholder * * @return void + * @private * */ removeCreationPlaceholder: function() { @@ -39,6 +43,7 @@ define(['backbone','./SelectPosition'], /** * Start with enabling to select position and listening to start drawning * @return void + * @private * */ enable: function() { @@ -51,6 +56,7 @@ define(['backbone','./SelectPosition'], * Enable user to draw components * * @return void + * @private * */ enableToDraw: function() { @@ -63,6 +69,7 @@ define(['backbone','./SelectPosition'], * @param {Object} e Event * * @return void + * @private * */ startDraw : function(e) { @@ -88,6 +95,7 @@ define(['backbone','./SelectPosition'], * @param {Object} e Event * * @return void + * @private * */ draw: function(e) { @@ -100,6 +108,7 @@ define(['backbone','./SelectPosition'], * @param {Object} e Event * * @return void + * @private * */ endDraw : function(e) { @@ -127,6 +136,7 @@ define(['backbone','./SelectPosition'], * @param {String} method Before or after of the children * * @return {Object} Created model + * @private * */ create: function(target, component, posIndex, method) { @@ -150,6 +160,7 @@ define(['backbone','./SelectPosition'], * Check and set basic requirements for the component * @param {Object} component New component to be created * @return {Object} Component updated + * @private * */ setRequirements: function(component) { @@ -173,6 +184,7 @@ define(['backbone','./SelectPosition'], * @param {Object} e Event * * @return void + * @private * */ updateComponentSize : function (e) { @@ -207,6 +219,7 @@ define(['backbone','./SelectPosition'], * @param {Boolean} forse Indicates if rollback in anycase * * @return void + * @private * */ rollback: function(e, force) { @@ -223,6 +236,7 @@ define(['backbone','./SelectPosition'], * @param {Object} component Object component before creation * * @return void + * @private * */ beforeDraw: function(component){ component.editable = false;//set this component editable @@ -233,6 +247,7 @@ define(['backbone','./SelectPosition'], * @param {Object} model Component model created * * @return void + * @private * */ afterDraw: function(model){}, @@ -241,6 +256,7 @@ define(['backbone','./SelectPosition'], * @param {Object} component Object component before creation * * @return void + * @private * */ beforeCreation: function(component){}, @@ -249,19 +265,16 @@ define(['backbone','./SelectPosition'], * @param {Object} model Component model created * * @return void + * @private * */ afterCreation: function(model){}, - /** Run method - * */ run: function(em, sender){ this.sender = sender; this.$el = this.$wrapper; this.enable(); }, - /** Stop method - * */ stop: function(){ this.removePositionPlaceholder(); //Removes placeholder from eventSelectPosition this.stopSelectPosition(); diff --git a/src/commands/view/DeleteComponent.js b/src/commands/view/DeleteComponent.js index 77e8ed85f..8cf7b7cf4 100644 --- a/src/commands/view/DeleteComponent.js +++ b/src/commands/view/DeleteComponent.js @@ -2,6 +2,7 @@ define(['backbone', './SelectComponent'], function(Backbone, SelectComponent) { /** * @class DeleteComponent + * @private * */ return _.extend({},SelectComponent,{ @@ -23,6 +24,7 @@ define(['backbone', './SelectComponent'], /** * Start command * @param {Object} e + * @private */ startDelete: function(e) { @@ -40,6 +42,7 @@ define(['backbone', './SelectComponent'], /** * Stop command * @param {Object} e + * @private */ stopDelete: function(e) { @@ -55,6 +58,7 @@ define(['backbone', './SelectComponent'], /** * Delete command * @param {Object} e + * @private */ onDelete: function(e) { @@ -73,6 +77,7 @@ define(['backbone', './SelectComponent'], /** * Updates badge label * @param {Object} model + * @private * */ updateBadgeLabel: function (model) { diff --git a/src/commands/view/ExportTemplate.js b/src/commands/view/ExportTemplate.js index 4c9c8b4c4..61162411b 100644 --- a/src/commands/view/ExportTemplate.js +++ b/src/commands/view/ExportTemplate.js @@ -1,6 +1,7 @@ define(function() { /** * @class ExportTemplate + * @private * */ return { @@ -20,6 +21,7 @@ define(function() { * @param {String} label * * @return {Object} Editor + * @private * */ buildEditor: function(codeName, theme, label) { diff --git a/src/commands/view/ImageComponent.js b/src/commands/view/ImageComponent.js index f4a1d9fe0..ac78ed8b2 100644 --- a/src/commands/view/ImageComponent.js +++ b/src/commands/view/ImageComponent.js @@ -2,12 +2,14 @@ define(['backbone', './InsertCustom'], function(Backbone, InsertCustom) { /** * @class ImageComponent + * @private * */ return _.extend({}, InsertCustom, { /** * Trigger before insert * @param {Object} object + * @private * * */ beforeInsert: function(object){ @@ -27,7 +29,7 @@ define(['backbone', './InsertCustom'], /** * Trigger after insert * @param {Object} model Model created after insert - * + * @private * */ afterInsert: function(model){ model.trigger('dblclick'); diff --git a/src/commands/view/InsertCustom.js b/src/commands/view/InsertCustom.js index cdf228c7a..16710d798 100644 --- a/src/commands/view/InsertCustom.js +++ b/src/commands/view/InsertCustom.js @@ -2,11 +2,13 @@ define(['backbone', './SelectPosition'], function(Backbone, SelectPosition) { /** * @class InsertCustom + * @private * */ return _.extend({}, SelectPosition, { /** * Run method + * @private * */ run: function(em, sender){ this.enable(); @@ -25,8 +27,7 @@ define(['backbone', './SelectPosition'], /** * Start insert event - * - * @return void + * @private * */ insertComponent: function(){ this.$wp.off('click', this.insertComponent); @@ -49,16 +50,14 @@ define(['backbone', './SelectPosition'], /** * Trigger before insert * @param {Object} obj - * - * @return void + * @private * */ beforeInsert: function(obj){}, /** * Trigger after insert * @param {Object} model Model created after insert - * - * @return void + * @private * */ afterInsert: function(model){}, @@ -66,6 +65,7 @@ define(['backbone', './SelectPosition'], * Create different object, based on content, to insert inside canvas * * @return {Object} + * @private * */ buildContent: function(){ var result = {}; diff --git a/src/commands/view/MoveComponent.js b/src/commands/view/MoveComponent.js index c7ecb0a80..90cd2273c 100644 --- a/src/commands/view/MoveComponent.js +++ b/src/commands/view/MoveComponent.js @@ -2,6 +2,7 @@ define(['backbone', './SelectComponent','./SelectPosition'], function(Backbone, SelectComponent, SelectPosition) { /** * @class MoveComponent + * @private * */ return _.extend({},SelectComponent, SelectPosition,{ @@ -28,6 +29,7 @@ define(['backbone', './SelectComponent','./SelectPosition'], /** * Hover command * @param {Object} e + * @private */ onHover: function(e) { @@ -44,11 +46,13 @@ define(['backbone', './SelectComponent','./SelectPosition'], * - Method from selectComponent * @param Event * @param Object Selected element + * @private * */ onSelect: function(e,el){}, /** Picking component to move * @param event + * @private * */ startMove: function(e, el){ this.moved = false; @@ -74,7 +78,9 @@ define(['backbone', './SelectComponent','./SelectPosition'], }, /** During move - * @param event */ + * @param event + * @private + * */ onMove: function(e){ this.moved = true; var relativeY = (e.pageY - this.canvasTop) + this.$canvas.scrollTop(); @@ -84,7 +90,9 @@ define(['backbone', './SelectComponent','./SelectPosition'], }, /** Leave component - * @param event */ + * @param event + * @private + * */ endMove: function(e){ this.$el.off('mousemove',this.onMove); $(document).off('mouseup', this.endMove); @@ -107,7 +115,7 @@ define(['backbone', './SelectComponent','./SelectPosition'], * @param int Indicates the position inside the collection * @param string Before of after component * - * @return void + * @private * */ move: function(target, el, posIndex, posMethod){ var index = posIndex || 0; @@ -128,7 +136,7 @@ define(['backbone', './SelectComponent','./SelectPosition'], /** Make component untouchable * @param object Component - * @return void + * @private * */ freezeComponent: function($component){ $component.css({'pointer-events':'none'}); @@ -137,7 +145,7 @@ define(['backbone', './SelectComponent','./SelectPosition'], /** Make component touchable * @param object Component - * @return void + * @private * */ unfreezeComponent: function($component){ $component.css({'pointer-events':'auto'}); @@ -147,7 +155,7 @@ define(['backbone', './SelectComponent','./SelectPosition'], /** Used to bring the previous situation before start moving the component * @param Event * @param Bool Indicates if rollback in anycase - * @return void + * @private * */ rollback: function(e, force){ var key = e.which || e.keyCode; @@ -158,7 +166,9 @@ define(['backbone', './SelectComponent','./SelectPosition'], return; }, - /** Closing method + /** + * Closing method + * @private * */ last: function(){ this.placeholder.remove(); @@ -169,12 +179,10 @@ define(['backbone', './SelectComponent','./SelectPosition'], $(document).off('keypress', this.rollback); }, - /* Run method */ run: function(){ this.enable(); }, - /* Stop method */ stop: function(){ this.stopSelectComponent(); this.$el.css('cursor','');//changes back aspect of the cursor diff --git a/src/commands/view/OpenLayers.js b/src/commands/view/OpenLayers.js index d297a395d..f72c1c40b 100644 --- a/src/commands/view/OpenLayers.js +++ b/src/commands/view/OpenLayers.js @@ -1,6 +1,7 @@ define(['Navigator'], function(Layers) { /** * @class OpenStyleManager + * @private * */ return { diff --git a/src/commands/view/OpenStyleManager.js b/src/commands/view/OpenStyleManager.js index 4cab47f1c..e66dd4973 100644 --- a/src/commands/view/OpenStyleManager.js +++ b/src/commands/view/OpenStyleManager.js @@ -1,6 +1,7 @@ define(['StyleManager'], function(StyleManager) { /** * @class OpenStyleManager + * @private * */ return { @@ -61,6 +62,7 @@ define(['StyleManager'], function(StyleManager) { /** * Toggle Style Manager visibility + * @private */ toggleSm: function() { diff --git a/src/commands/view/ResizeComponent.js b/src/commands/view/ResizeComponent.js index 3e498315a..8ec9fb2b1 100644 --- a/src/commands/view/ResizeComponent.js +++ b/src/commands/view/ResizeComponent.js @@ -1,10 +1,11 @@ define(['backbone', 'jqueryUi', './MoveComponent'], function(Backbone, jqueryUi, MoveComponent) { - /** + /** * @class ResizeComponent + * @private * */ return _.extend({}, MoveComponent,{ - + enable: function(){ var $this = this; this.startSelectComponent(); @@ -14,14 +15,14 @@ define(['backbone', 'jqueryUi', './MoveComponent'], ui.element[0].style.height = ui.element.height()+'px'; ui.element.css({'min-height':'', 'min-width':'' }); }, - stop: function(event,ui){ + stop: function(event,ui){ ui.element.css('overflow','auto'); - $this.updateModel(ui); + $this.updateModel(ui); } }); }, - - + + /** * Update model of resized element * @param object Component model @@ -37,21 +38,21 @@ define(['backbone', 'jqueryUi', './MoveComponent'], style.overflow = 'auto'; model.set('style', style); }, - - /** - * Run method + + /** + * Run method * */ run: function(){ this.enable(); this.active = true; }, - - /** - * Stop method + + /** + * Stop method * */ stop: function(){ this.stopSelectComponent(); - this.$el.find('.ui-resizable').resizable("destroy"); + this.$el.find('.ui-resizable').resizable("destroy"); this.$el.unbind();//removes all attached events this.active = false; } diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index 24ddf835f..92867fa61 100644 --- a/src/commands/view/SelectComponent.js +++ b/src/commands/view/SelectComponent.js @@ -1,6 +1,7 @@ define(function() { /** * @class SelectComponent + * @private * */ return { @@ -21,6 +22,7 @@ define(function() { /** * Copy component to clipboard + * @private */ copyComp: function() { @@ -32,6 +34,7 @@ define(function() { /** * Paste component from clipboard + * @private */ pasteComp: function() { @@ -44,8 +47,9 @@ define(function() { } }, - /** Start select component event - * @return void + /** + * Start select component event + * @private * */ startSelectComponent: function(){ var that = this; @@ -59,6 +63,7 @@ define(function() { /** * Hover command * @param {Object} e + * @private */ onHover: function(e) { @@ -70,6 +75,7 @@ define(function() { /** * Out command * @param {Object} e + * @private */ onOut: function(e) { @@ -82,6 +88,7 @@ define(function() { /** * Hover command * @param {Object} e + * @private */ onClick: function(e) { @@ -93,7 +100,7 @@ define(function() { /** Stop select component event * @param Event - * @return void + * @private * */ stopSelectComponent: function(e){ if(this.selEl) @@ -105,6 +112,7 @@ define(function() { * Say what to do after the component was selected * @param {Object} e * @param {Object} el + * @private * */ onSelect: function(e, el) { @@ -119,8 +127,9 @@ define(function() { } }, - /** Removes all highlighting effects on components - * @return void + /** + * Removes all highlighting effects on components + * @private * */ clean: function(){ this.$el.find('*').removeClass(this.hoverClass); @@ -128,7 +137,7 @@ define(function() { /** Attach badge to component * @param Object Component - * @return void + * @private * */ attachBadge: function(el){ var model = $(el).data("model"); @@ -152,15 +161,17 @@ define(function() { this.badge.css({ left: relativeL, top:relativeT }); }, - /** Create badge for the component - * @return void + /** + * Create badge for the component + * @private * */ createBadge: function (){ this.badge = $('
', {class: this.badgeClass + " no-dots"}).appendTo(this.$wrapper); }, - /** Remove badge - * @return void + /** + * Remove badge + * @private * */ removeBadge: function (){ if(this.badge){ @@ -169,9 +180,10 @@ define(function() { } }, - /** Updates badge label + /** + * Updates badge label * @param Object Model - * @return void + * @private * */ updateBadgeLabel: function (model){ if(model) @@ -181,6 +193,7 @@ define(function() { /** * Clean previous model from different states * @param {Component} model + * @private */ cleanPrevious: function(model){ model.set({ @@ -189,17 +202,11 @@ define(function() { }); }, - /** - * Run method - * */ run: function(em, sender){ this.enable(); this.render(); }, - /** - * Stop method - * */ stop: function(){ var sel = this.editorModel.get('selectedComponent'); if(sel) diff --git a/src/commands/view/SelectPosition.js b/src/commands/view/SelectPosition.js index f4d7c0b6d..a9dbca1ed 100644 --- a/src/commands/view/SelectPosition.js +++ b/src/commands/view/SelectPosition.js @@ -1,28 +1,30 @@ define(function() { - /** + /** * @class SelectPosition + * @private * */ return { - + init: function(opt) { _.bindAll(this,'selectingPosition','itemLeft'); this.config = opt; }, - - /** + + /** * Returns position placeholder - * + * * @return {Object} Placeholder + * @private * */ getPositionPlaceholder: function() { return this.$plh; }, - - /** + + /** * Creates position placeholder - * * @return {Object} Placeholder + * @private * */ createPositionPlaceholder: function() { @@ -32,26 +34,25 @@ define(function() { this.$plh.appendTo( this.$wrapper ); return this.$plh; }, - + enable: function() { this.startSelectPosition(); }, - - /** + + /** * Start select position event - * - * @return void + * @private * */ startSelectPosition: function() { this.isPointed = false; this.$wrapper.on('mousemove', this.selectingPosition); }, - - /** + + /** * Stop select position event - * @return void + * @private * */ stopSelectPosition: function() { @@ -60,21 +61,22 @@ define(function() { this.posIndex = this.posMethod=='after' && this.cDim.length!==0 ? this.posIndex + 1 : this.posIndex; //Normalize if(this.cDim){ this.posIsLastEl = this.cDim.length!==0 && this.posMethod=='after' && this.posIndex==this.cDim.length; - this.posTargetEl = (this.cDim.length===0 ? $(this.outsideElem) : + this.posTargetEl = (this.cDim.length===0 ? $(this.outsideElem) : (!this.posIsLastEl && this.cDim[this.posIndex] ? $(this.cDim[this.posIndex][5]).parent() : $(this.outsideElem) )); this.posTargetModel = this.posTargetEl.data("model"); this.posTargetCollection = this.posTargetEl.data("model-comp"); } }, - - /** + + /** * During event - * @param {Object} e Event + * @param {Object} e Event + * @private * */ selectingPosition: function(e) { this.isPointed = true; - + if(!this.wp){ this.$wp = this.$wrapper; this.wp = this.$wp[0]; @@ -84,33 +86,32 @@ define(function() { this.wpL = wpO.left; this.wpScT = this.$wp.scrollTop(); this.wpScL = this.$wp.scrollLeft(); - + if(!this.$plh) this.createPositionPlaceholder(); - + this.rY = (e.pageY - this.wpT) + this.wpScT; this.rX = (e.pageX - this.wpL) + this.wpScL; - + this.entered(e); this.updatePosition(this.rX, this.rY); var actualPos = this.posIndex + ':' + this.posMethod; //save globally the new index - - if(!this.lastPos || (this.lastPos != actualPos)){ //If there is a significant changes with mouse + + if(!this.lastPos || (this.lastPos != actualPos)){ //If there is a significant changes with mouse this.updatePositionPlaceholder(this.posIndex, this.posMethod); this.lastPos = actualPos; } }, - - /** + + /** * Search where to put placeholder * @param {Integer} posX X position of the mouse * @param {Integer} posY Y position of the mouse - * - * @retun void + * @private * */ updatePosition: function( posX, posY ){ this.posMethod = "before"; - this.posIndex = 0; + this.posIndex = 0; var leftLimit = 0, xLimit = 0, dimRight = 0, yLimit = 0, xCenter = 0, yCenter = 0, dimDown = 0, dim = 0; for(var i = 0; i < this.cDim.length; i++){ dim = this.cDim[i]; @@ -122,7 +123,7 @@ define(function() { (leftLimit && dimRight < leftLimit)) //No need with this one if over the limit continue; if(!dim[4]){ //If it's not inFlow (like float element) - if( posY < dimDown) + if( posY < dimDown) yLimit = dimDown; if( posX < xCenter){ //If mouse lefter than center xLimit = xCenter; @@ -145,13 +146,12 @@ define(function() { this.posIndex--; } }, - - /** + + /** * Updates the position of the placeholder * @param {Integer} index Index of the nearest child * @param {String} method Before or after position - * - * @return void + * @private * */ updatePositionPlaceholder: function(index, method){ var t = 0, l = 0, w = 0, h = 0, @@ -163,7 +163,7 @@ define(function() { var elDim = this.cDim[index]; if(!elDim[4]){ w = 'auto'; - t = elDim[0] + marg; + t = elDim[0] + marg; h = elDim[2] - (marg * 2) + un; l = (method == 'before') ? (elDim[1] - marg) : (elDim[1] + elDim[3] - marg); }else{ @@ -184,7 +184,7 @@ define(function() { h = 'auto'; } } - + plh.style.top = t + un; plh.style.left = l + un; if(w) @@ -192,12 +192,11 @@ define(function() { if(h) plh.style.height = h; }, - - /** + + /** * Track inside which element pointer entered - * @param {Object} e Event - * - * @return void + * @param {Object} e Event + * @private * */ entered: function(e){ if( (!this.outsideElem || this.outsideElem != e.target) ){ //If I'm in the new element @@ -214,50 +213,50 @@ define(function() { this.cDim = this.getChildrenDim(); } }, - - /** + + /** * Check if pointer is near to the borders of the target - * @param {Object} e Event - * + * @param {Object} e Event * @return {Integer} + * @private * */ nearToBorders: function(e){ var m = 7; //Limit in pixels for be near - if(!this.dimT) - return; + if(!this.dimT) + return; var dimT = this.dimT; if(dimT[2] < 40) - m = 5; - if( ((dimT[0] + m) > this.rY) || (this.rY > (dimT[0] + dimT[2] - m)) || + m = 5; + if( ((dimT[0] + m) > this.rY) || (this.rY > (dimT[0] + dimT[2] - m)) || ((dimT[1] + m) > this.rX) || (this.rX > (dimT[1] + dimT[3] - m)) ) //Check if the pointer is near return 1; else return 0; }, - - /** + + /** * Check if pointer is near to the float component - * * @return {Integer} + * @private * */ nearToFloat: function() { var index = this.posIndex; var isLastEl = this.posIsLastEl; - if(this.cDim.length !== 0 && ( - (!isLastEl && !this.cDim[index][4]) || + if(this.cDim.length !== 0 && ( + (!isLastEl && !this.cDim[index][4]) || (this.cDim[index-1] && !this.cDim[index-1][4]) || (isLastEl && !this.cDim[index-1][4]) ) ) return 1; else return 0; }, - - /** + + /** * Returns dimension of the taget * @param {Object} e Event - * * @return {Array} + * @private * */ getTargetDim: function(e) { @@ -265,13 +264,13 @@ define(function() { $el = $(elT); return [ elT.offsetTop, elT.offsetLeft, $el.outerHeight(), $el.outerWidth() ]; }, - - /** - * Returns children and their dimensions of the target element, + + /** + * Returns children and their dimensions of the target element, * excluding text nodes and the move placeholder * @param {Object} el Element - * - * @return {Array} + * @return {Array} + * @private * */ getChildrenDim: function(el) { @@ -287,12 +286,11 @@ define(function() { }); return dim; }, - - /** + + /** * Track when I go ouside of the element (basically when the target changes) - * @param {Object} e Event - * - * @return void + * @param {Object} e Event + * @private * */ itemLeft: function(e) { @@ -301,35 +299,35 @@ define(function() { this.$targetEl = null; this.lastPos = null; }, - - /** + + /** * Returns true if the elements is in flow, or better is not in flow where * for example the component is with float:left * @param {Object} $this Context * @param {Object} elm Element - * * @return {Boolean} + * @private * */ isInFlow: function($this, elm) { - var $elm = $(elm), ch = -1; + var $elm = $(elm), ch = -1; if(!$elm.length) return false; - if( ($elm.height() < ch) || !$this.okProps($elm) ) + if( ($elm.height() < ch) || !$this.okProps($elm) ) return false; return true; }, - - /** + + /** * Returns true only if the element follow the standard flow * @param {Object} $elm Element - * * @return {Boolean} + * @private * */ - okProps: function($elm) + okProps: function($elm) { if ($elm.css('float')!=='none') - return false; + return false; switch($elm.css('position')) { case 'static': case 'relative': break; default: return false; @@ -339,11 +337,11 @@ define(function() { } return false; }, - + /** * Removes position placeholder - * * @param void + * @private * */ removePositionPlaceholder: function() { @@ -351,13 +349,11 @@ define(function() { this.$plh.remove(); this.$plh = null; }, - - /* Run method */ + run: function(){ this.enable(); }, - - /* Stop method */ + stop: function(){ this.removePositionPlaceholder(); this.stopSelectPosition(); diff --git a/src/commands/view/SwitchVisibility.js b/src/commands/view/SwitchVisibility.js index 9bd06d73a..167e60638 100644 --- a/src/commands/view/SwitchVisibility.js +++ b/src/commands/view/SwitchVisibility.js @@ -1,14 +1,15 @@ define(function() { /** * @class SwitchVisibility + * @private * */ return { - + run: function() { this.$canvas.addClass(this.pfx + 'dashed'); }, - + stop: function() { this.$canvas.removeClass(this.pfx + 'dashed'); diff --git a/src/commands/view/TextComponent.js b/src/commands/view/TextComponent.js index 28125ba26..7f73f2383 100644 --- a/src/commands/view/TextComponent.js +++ b/src/commands/view/TextComponent.js @@ -2,13 +2,14 @@ define(['backbone', './CreateComponent'], function(Backbone, CreateComponent) { /** * @class TextComponent + * @private * */ return _.extend({}, CreateComponent, { - - /** + + /** * This event is triggered at the beginning of a draw operation * @param {Object} component Object component before creation - * + * @private * */ beforeDraw: function(component){ component.type = 'text'; @@ -16,11 +17,11 @@ define(['backbone', './CreateComponent'], component.style = {}; component.style.padding = '10px'; }, - - /** + + /** * This event is triggered at the end of a draw operation * @param {Object} model Component model created - * + * @private * */ afterDraw: function(model){ if(!model || !model.set) @@ -29,6 +30,6 @@ define(['backbone', './CreateComponent'], if(this.sender) this.sender.set('active', false); }, - + }); }); \ No newline at end of file