Add more info about position of elements in getTargetToElementDim inside Canvas module

.gitignore

@@ -7,6 +7,7 @@ npm-debug.log
 style/.sass-cache/
 
 img/
+images/
 private/
 docs/
 vendor/

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.4.2",
+  "version": "0.4.5",
   "author": "Artur Arseniev",
   "homepage": "http://grapesjs.com",
   "main": [

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.4.2",
+  "version": "0.4.5",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/canvas/main.js

@@ -190,26 +190,47 @@ define(function(require) {
 			 * return empty string as width
 			 * @param {HTMLElement} target The target in this case could be the toolbar
 			 * @param {HTMLElement} element The element on which I'd attach the toolbar
-			 * @param {Boolean} toRight Set to true if you want the toolbar attached to the right
+			 * @param {Object} options Custom options
+			 * @param {Boolean} options.toRight Set to true if you want the toolbar attached to the right
 			 * @return {Object}
 			 */
-			getTargetToElementDim: function (target, element, toRight) {
+			getTargetToElementDim: function (target, element, options) {
+				var opts = options || {};
 				var canvasPos = CanvasView.getPosition();
 				var pos = CanvasView.getElementPos(element);
+				var toRight = options.toRight || 0;
+				var targetHeight = opts.targetHeight || target.offsetHeight;
+				var targetWidth = opts.targetWidth || target.offsetWidth;
+				var eventToTrigger = opts.event || null;
 
-				var elTop = pos.top - target.offsetHeight;
+				var elTop = pos.top - targetHeight;
 				var elLeft = pos.left;
 				elLeft += toRight ? pos.width : 0;
-				elLeft = toRight ? (elLeft - target.offsetWidth) : elLeft;
+				elLeft = toRight ? (elLeft - targetWidth) : elLeft;
 
 				var leftPos = elLeft < canvasPos.left ? canvasPos.left : elLeft;
 				var topPos = elTop < canvasPos.top ? canvasPos.top : elTop;
 				topPos = topPos > (pos.top + pos.height) ? (pos.top + pos.height) : topPos;
 
-				return {
+				var result = {
 					top: topPos,
-					left: leftPos
+					left: leftPos,
+					elementTop: pos.top,
+					elementLeft: pos.left,
+					elementWidth: pos.width,
+					elementHeight: pos.height,
+					targetWidth: target.offsetWidth,
+					targetHeight: target.offsetHeight,
+					canvasTop: canvasPos.top,
+					canvasLeft: canvasPos.left,
 				};
+
+				// In this way I can catch data and also change the position strategy
+				if(eventToTrigger && c.em) {
+					c.em.trigger(eventToTrigger, result);
+				}
+
+				return result;
 			},
 
 			/**

src/demo.js

@@ -330,65 +330,6 @@ require(['config/require-config'], function() {
 
 
     window.editor = editor;
-		editor.setCustomRte({
-
-			enable: function(el, rte) {
-				// Check if laready exists
-				if(rte && rte.status != 'destroyed') {
-					return rte;
-				}
-
-				el.contentEditable = true;
-				// Jumps on enter, bug: https://dev.ckeditor.com/ticket/9136
-
-				rteToolbar = editor.RichTextEditor.getToolbarEl();
-
-				[].forEach.call(rteToolbar.children, function(child) {
-					child.style.display = 'none';
-				});
-
-				rte = CKEDITOR.inline(el, {
-					startupFocus: true,
-					enterMode: CKEDITOR.ENTER_BR,
-					removePlugins: 'liststyle,tabletools,scayt,menubutton,contextmenu,resize',
-					extraPlugins: 'sharedspace',
-					sharedSpaces: {
-						top: rteToolbar,
-					}
-				});
-
-				// Make click event propogate
-				rte.on('contentDom', function() {
-					var editable = rte.editable();
-					editable.attachListener(editable, 'click', function() {
-						el.click();
-					});
-				});
-				return rte;
-			},
-
-			disable: function(el, rte) {
-				el.contentEditable = false;
-				rte.focusManager.blur(true);
-				console.log('disable ', rte);
-
-				//Prev
-				//el.contentEditable = false;
-				//rte.focusManager.blur(true);
-				//rte.destroy(true);
-				//rte = null;
-			},
-
-			focus: function (el, rte) {
-				if(rte.focusManager.hasFocus)
-					return;
-				console.log('focus on', rte);
-
-				//Prev
-				el.contentEditable = true;
-				rte.focus();
-			},
-		});
 
 	});
 });

src/editor/config/config.js

@@ -21,7 +21,7 @@ define(function () {
 		width: '100%',
 
 		// CSS that could only be seen (for instance, inside the code viewer)
-		protectedCss: '*{box-sizing: border-box;}body{margin:0;height:100%;background:#fff}#wrapper{min-height:100%; overflow:auto}',
+		protectedCss: '*{box-sizing: border-box;}body{margin:0;height:auto;background:#fff}#wrapper{min-height:100%; overflow:auto}',
 
 		// CSS for the iframe which containing the canvas, useful if you need to custom something inside
 		// (eg. the style of the selected component)

src/rich_text_editor/main.js

@@ -121,8 +121,9 @@ define(function(require) {
       udpatePosition: function() {
 				var u = 'px';
 				var canvas = c.em.get('Canvas');
-				var pos = canvas.getTargetToElementDim(toolbar.el, this.lastEl, 1);
+				var pos = canvas.getTargetToElementDim(toolbar.el, this.lastEl, {
-				//console.log(toolbar.el, this.lastEl, pos);
+					event: 'rteToolbarPosUpdate',
+				});
 				var toolbarStyle = toolbar.el.style;
 				toolbarStyle.top = pos.top + u;
 				toolbarStyle.left = pos.left + u;
@@ -147,8 +148,6 @@ define(function(require) {
 
 				this.show();
 
-				//this.udpatePosition();
-
 				if(c.em) {
 					setTimeout(this.udpatePosition.bind(this), 0);
 					c.em.off('change:canvasOffset', this.udpatePosition, this);