Added designer mode

alonle · Mar 10, 2019 · 7ac43ce · 7ac43ce
1 parent f94caee
commit 7ac43ce
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 17 deletions.
diff --git a/css/editor.css b/css/editor.css
diff --git a/css/editor.css.map b/css/editor.css.map
diff --git a/editor.html b/editor.html
@@ -35,14 +35,21 @@
 
 
 					<div class="btn-group mr-3" role="group">
-					  <button class="btn btn-light" title="Fullscreen (F11)" id="fullscreen-btn" data-toggle="button" aria-pressed="false" data-vvveb-action="fullscreen">
-						  <i class="la la-arrows"></i>
+					  <button class="btn btn-light" title="Designer Mode (Free component dragging)" id="designer-mode-btn" data-toggle="button" aria-pressed="false" data-vvveb-action="setDesignerMode">
+						  <i class="la la-hand-grab-o"></i>
 					  </button>
 
 					  <button class="btn btn-light" title="Preview" id="preview-btn" type="button" data-toggle="button" aria-pressed="false" data-vvveb-action="preview">
 						  <i class="la la-eye"></i>
 					  </button>
 
+					  <button class="btn btn-light" title="Fullscreen (F11)" id="fullscreen-btn" data-toggle="button" aria-pressed="false" data-vvveb-action="fullscreen">
+						  <i class="la la-arrows"></i>
+					  </button>
+
+					</div>
+
+					<div class="btn-group mr-3" role="group">
 					  <button class="btn btn-light" title="Export (Ctrl + E)" id="save-btn" data-vvveb-action="saveAjax" data-vvveb-shortcut="ctrl+e">
 						  <i class="la la-save"></i>
 					  </button>

diff --git a/libs/builder/blocks-bootstrap4.js b/libs/builder/blocks-bootstrap4.js
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 
-https://github.com/givan/Vvvebjs
+https://github.com/givanz/Vvvebjs
 */
 
 Vvveb.BlocksGroup['Bootstrap 4 Snippets'] =

diff --git a/libs/builder/builder.js b/libs/builder/builder.js
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 
-https://github.com/givan/VvvebJs
+https://github.com/givanz/VvvebJs
 */
 
 
@@ -536,6 +536,7 @@ Vvveb.Builder = {
 	dragMoveMutation : false,
 	isPreview : false,
 	runJsOnSetHtml : false,
+	designerMode : false,
 
 	init: function(url, callback) {
 
@@ -794,30 +795,32 @@ Vvveb.Builder = {
 /* iframe highlight */    
     _initHighlight: function() {
 
-		moveEvent = {target:null, };
 		var self = Vvveb.Builder;
 
 		self.frameHtml.on("mousemove touchmove", function(event) {
 
-			if (event.target && isElement(event.target))
+			if (event.target && isElement(event.target) && event.originalEvent)
 			{
-				//moveEvent = event;
 				self.highlightEl = target = jQuery(event.target);
 				var offset = target.offset();
 				var height = target.outerHeight();
 				var halfHeight = Math.max(height / 2, 50);
 				var width = target.outerWidth();
 				var halfWidth = Math.max(width / 2, 50);
 
+				var x = (event.clientX || event.originalEvent.clientX);
+				var y = (event.clientY || event.originalEvent.clientY);
+
 				if (self.isDragging)
 				{
-					parent = self.highlightEl;
-					//parentOffset = self.dragElement.offset();
+					var parent = self.highlightEl;
+					var parentOffset = {left: 0, top: 0};
+					if (parent.css("position") == "relative") parentOffset = parent.offset();
 
 					try {
 						if (event.originalEvent)
 						{
-							if ((offset.top  < (event.originalEvent.y - halfHeight)) || (offset.left  < (event.originalEvent.x - halfWidth)))
+							if ((offset.top  < (y - halfHeight)) || (offset.left  < (x - halfWidth)))
 							{
 								 if (isIE11) 
 									self.highlightEl.append(self.dragElement); 
@@ -830,14 +833,23 @@ Vvveb.Builder = {
 								else 
 									self.dragElement.prependTo(parent);
 							};
+
+							if (self.designerMode)
+							{
+								self.dragElement.css({
+									"position": "absolute",
+									'left': x - (parentOffset.left - self.frameDoc.scrollLeft()), 
+									'top': y - (parentOffset.top - self.frameDoc.scrollTop()),
+									});
+							}
 						}
 
 					} catch(err) {
 						console.log(err);
 						return false;
 					}
 
-					if (event.originalEvent) self.iconDrag.css({'left': event.originalEvent.x + 275/*left panel width*/, 'top':event.originalEvent.y - 30 });					
+					if (!self.designerMode && self.iconDrag) self.iconDrag.css({'left': x + 275/*left panel width*/, 'top':y - 30 });					
 				}// else //uncomment else to disable parent highlighting when dragging
 				{
 
@@ -1120,10 +1132,14 @@ Vvveb.Builder = {
 
 			self.isDragging = true;
 			if (Vvveb.dragIcon == 'html')
+			{
 				self.iconDrag = $(html).attr("id", "dragElement-clone").css('position', 'absolute');
-			else
+			}
+			else if (self.designerMode == false)
+			{
 				self.iconDrag = $('<img src=""/>').attr({"id": "dragElement-clone", 'src': $this.css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1')}).
 				css({'z-index':100, 'position':'absolute', 'width':'64px', 'height':'64px', 'top': event.originalEvent.y, 'left': event.originalEvent.x});
+			}
 
 			$('body').append(self.iconDrag);
 
@@ -1146,9 +1162,12 @@ Vvveb.Builder = {
 		$('body').on('mousemove touchmove', function(event) {
 			if (self.iconDrag && self.isDragging == true)
 			{
-				self.iconDrag.css({'left': event.originalEvent.x - 60, 'top':event.originalEvent.y - 30});
-
-				elementMouseIsOver = document.elementFromPoint(event.clientX - 60, event.clientY - 40);
+				var x = (event.clientX || event.originalEvent.clientX);
+				var y = (event.clientY || event.originalEvent.clientY);
+
+				self.iconDrag.css({'left': x - 60, 'top': y - 30});
+
+				elementMouseIsOver = document.elementFromPoint(x - 60, y - 40);
 
 				//if drag elements hovers over iframe switch to iframe mouseover handler	
 				if (elementMouseIsOver && elementMouseIsOver.tagName == 'IFRAME')
@@ -1247,7 +1266,13 @@ Vvveb.Builder = {
 				alert(data.responseText);
 			}
 		});					
+	},
+
+	setDesignerMode: function(designerMode = false)
+	{
+		this.designerMode = designerMode;
 	}
+
 };
 
 Vvveb.CodeEditor = {
@@ -1459,6 +1484,12 @@ Vvveb.Gui = {
 	deletePage : function () {
 
 	},
+
+	setDesignerMode : function () {
+		//aria-pressed attribute is updated after action is called and we check for false instead of true
+		var designerMode = this.attributes["aria-pressed"].value != "true";
+		Vvveb.Builder.setDesignerMode(designerMode);
+	},
 
 }
 

diff --git a/libs/builder/components-bootstrap4.js b/libs/builder/components-bootstrap4.js
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 
-https://github.com/givan/Vvvebjs
+https://github.com/givanz/Vvvebjs
 */
 
 bgcolorClasses = ["bg-primary", "bg-secondary", "bg-success", "bg-danger", "bg-warning", "bg-info", "bg-light", "bg-dark", "bg-white"]

diff --git a/scss/_builder.scss b/scss/_builder.scss
@@ -1074,3 +1074,11 @@ ul.autocomplete li.selected
   background-color: Highlight ; 
   color: #fff;
 }
+
+
+.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle {
+	box-shadow: 0px 0px 1px 0px $builder-background-color;
+	background-color:rgba( $builder-background-color, 0.1);
+	border-radius:0px;
+	border-color: transparent;
+}