Fix click bubbling issue using capturing

9 years ago · 0eaec0c15c
8 changed files with 61 additions and 32 deletions
--- a/bower.json
+++ b/bower.json
@ -1,7 +1,7 @@
 {
  "name": "grapesjs",
  "description": "Open source Web Template Editor",
-  "version": "0.4.0",
+  "version": "0.4.1",
  "author": "Artur Arseniev",
  "homepage": "http://grapesjs.com",
  "main": [
--- a/dist/grapes.min.js
+++ b/dist/grapes.min.js
--- a/index.html
+++ b/index.html
@ -15,6 +15,19 @@
 	<body>

 		<div id="gjs" style="height:0px; overflow:hidden">
+			<div class="intro" style="background-image: url(images/bg-intro.jpg)">
+      <div class="container-fluid">
+        <div class="logo">
+            <a href="#"><img src="images/logo.png" alt="image description"></a>
+        </div>
+        <div class="intro-text">
+          <h1>Your Company<span>is a long established fact</span></h1>
+          <p>If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing.</p>
+					<a href="#">some text<div>some block</div></a>
+          <a href="#" class="btn btn-default">Call to Action</a>
+        </div>
+      </div>
+    </div>
 			<header class="header-banner">
 				<div class="container-width">
 					<!--
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "grapesjs",
  "description": "Open source Web Template Editor",
-  "version": "0.4.0",
+  "version": "0.4.1",
  "author": "Artur Arseniev",
  "license": "BSD-3-Clause",
  "homepage": "http://grapesjs.com",
--- a/src/demo.js
+++ b/src/demo.js
@ -330,16 +330,22 @@ require(['config/require-config'], function() {


    window.editor = editor;
-/*
 		editor.setCustomRte({

 			enable: function(el, rte) {
-				//rte.status == 'destroyed'
+				// Check if laready exists
+				if(rte && rte.status != 'destroyed') {
+					return rte;
+				}
+
 				el.contentEditable = true;
 				// Jumps on enter, bug: https://dev.ckeditor.com/ticket/9136
-				//toolbar.$el.empty(); // try to hide all inside
+
 				rteToolbar = editor.RichTextEditor.getToolbarEl();
-				rteToolbar.innerHTML = '';
+
+				[].forEach.call(rteToolbar.children, function(child) {
+					child.style.display = 'none';
+				});

 				rte = CKEDITOR.inline(el, {
 					startupFocus: true,
@ -354,27 +360,35 @@ require(['config/require-config'], function() {
 				// Make click event propogate
 				rte.on('contentDom', function() {
 					var editable = rte.editable();
-					editable.attachListener( editable, 'click', function() {
+					editable.attachListener(editable, 'click', function() {
 						el.click();
 					});
 				});
-
-				//rte.focus();
 				return rte;
 			},

 			disable: function(el, rte) {
 				el.contentEditable = false;
 				rte.focusManager.blur(true);
-				rte.destroy(true);
-				rte = null;
+				console.log('disable ', rte);
+
+				//Prev
+				//el.contentEditable = false;
+				//rte.focusManager.blur(true);
+				//rte.destroy(true);
+				//rte = null;
 			},

 			focus: function (el, rte) {
-				//el.contentEditable = true;
+				if(rte.focusManager.hasFocus)
+					return;
+				console.log('focus on', rte);
+
+				//Prev
+				el.contentEditable = true;
 				rte.focus();
 			},
 		});
-*/
+
 	});
 });
--- a/src/dom_components/view/ComponentLinkView.js
+++ b/src/dom_components/view/ComponentLinkView.js
@ -1,22 +1,20 @@
+/*jshint scripturl:true*/
 define(['backbone', './ComponentTextView'],
 	function (Backbone, ComponentView) {

 	return ComponentView.extend({

 		events: {
-      'click': 'onClick',
 			'dblclick': 'enableEditing',
 		},

-    onClick: function(e) {
-      e.preventDefault();
-    },
-
 		render: function() {
 			ComponentView.prototype.render.apply(this, arguments);

-			// Avoid strange behaviours while try to drag
-			//this.$el.attr('onmousedown', 'return false');
+			// I need capturing instead of bubbling as bubbled clicks from other
+			// children will execute the link event
+			this.el.addEventListener('click', this.prevDef, true);
+
 			return this;
 		},

--- a/src/dom_components/view/ComponentView.js
+++ b/src/dom_components/view/ComponentView.js
@ -175,6 +175,15 @@ define(['backbone', './ComponentsView'],
 				event.viewResponse = this;
 			},

+			/**
+			 * Prevent default helper
+			 * @param  {Event} e
+			 * @private
+			 */
+			prevDef: function (e) {
+				e.preventDefault();
+			},
+
 			render: function() {
 				this.updateAttributes();
 				this.updateClasses();
--- a/src/rich_text_editor/main.js
+++ b/src/rich_text_editor/main.js
@ -140,10 +140,7 @@ define(function(require) {

 				// If a custom RTE is defined
 				if (customRte) {
-					// No RTE instance was provided
-					if(!rte || rte.status == 'destroyed') {
-						rte = customRte.enable(view.el, rte);
-					}
+					rte = customRte.enable(view.el, rte);
 				} else {
 					view.$el.wysiwyg({}).focus();
 				}
@ -205,8 +202,6 @@ define(function(require) {
 			 * */
 			show: function() {
 				var toolbarStyle = toolbar.el.style;
-				toolbarStyle.top = 0;
-				toolbarStyle.left = 0;
        toolbarStyle.display = "block";
 			},