Right clicking allows you to change text or delete the element now.

public/src/automagical.js

@@ -3,6 +3,7 @@ var automagical = (function(){
 	var populateNavList, 
 		initializeGetHtml,
 		initializeDroppableAreas,
+		addContextMenu,
 
 		LONG_LOREM_IPSUM,
 		SHORT_LOREM_IPSUM;
@@ -83,22 +84,22 @@ var automagical = (function(){
 
 		switch (elementInner.name){
 			case('Text'):
-				tag.append(LONG_LOREM_IPSUM());
+				tag.text(LONG_LOREM_IPSUM());
 				break;
 			case ('Label'):
-				tag.append(SHORT_LOREM_IPSUM());
+				tag.text(SHORT_LOREM_IPSUM());
 				break;
 			case ('Heading'):
-				tag.append(SHORT_LOREM_IPSUM());
+				tag.text(SHORT_LOREM_IPSUM());
 				break;
 			case ('Container'):
 				tag.addClass('container');
 				break;
 			case ('Link'):
-				tag.append('A link');
+				tag.text('A link');
 				break;
 			case ('Heading'):
-				tag.append('Heading');
+				tag.text('Heading');
 				break;
 			default:
 				response = elementInner.tag;
@@ -211,11 +212,7 @@ var automagical = (function(){
 				$(el).addClass('container component')
 
 
-				//TODO: Fix this bug where dropped images keep resizing themselves. JQuery has bug making images resizable and droppable
-				if ($(el).get(0).tagName == 'IMG') {
-
-					$(el).css('position', 'absolute');
-				}
+
 
 			});
 			bodyWrapper.empty().remove();
@@ -235,6 +232,8 @@ var automagical = (function(){
 				.removeClass("ui-draggable-dragging")
 				.draggable({containment:"#canvas"})
 			);
+
+			$(element).css('position', 'absolute');
 		}
 		else {
 			appendTo.append($(element)
@@ -250,6 +249,8 @@ var automagical = (function(){
 			);
 		}
 
+		addContextMenu(element);
+
 
 
 
@@ -272,6 +273,30 @@ var automagical = (function(){
 		$(element).trigger('appendToCanvas');
 	}
 
+	addContextMenu = function(element) {
+
+	        $(element).contextMenu('context-menu-1', {
+	            'Change Text': {
+	                click: function(element) {  // element is the jquery obj clicked on when context menu launched
+	                    automagicalCss.changeCurrentElementContent();
+	                },
+	                klass: "menu-item-1" // a custom css class for this menu item (usable for styling)
+	            },
+	            'Delete': {
+	                click: function(element){ 
+	                	element.remove();
+	                },
+	                klass: "menu-item-2"
+	            }
+	        });
+
+
+
+
+
+
+	};
+
 	return {
 
 		initialize : function(){
@@ -282,7 +307,7 @@ var automagical = (function(){
 			initializeGetHtml();
 			populateNavList();
 			initializeDroppableAreas($("#canvas"));
-
+			
 			checkSavedPage();
 		}
 	};

public/src/automagicalCss.js

@@ -8,14 +8,65 @@ var automagicalCss = (function(){
 		changeWidthHeightAttributesBox,
 		extractElementId,
 		initializeFileUploadDialog,
+		initializeChangeContentDialog,
 		initializeFileList,
 		submitFile,
+		justText,
 
 		cssInformation = {},
 		attrInformation = {},
-		fileUploadDialog;
+		fileUploadDialog,
+		changeContentDialog;
 
 
+	justText = function(element) {
+
+	    return $(element)  .clone()
+	            .children()
+	            .remove()
+	            .end()
+	            .text();
+
+	};
+
+	initializeChangeContentDialog = function() {
+		changeContentDialog = $('<div></div>')
+			.html(	' <label> Enter new content here: </label> </br>' +
+					' <textarea id="newContent" ROWS=3 COLS=30 > </textarea></br>'
+    				)
+			.dialog({
+				autoOpen: false,
+				title: 'Change Content',
+				modal: true,
+				open: function(event, ui) {
+					$('textarea#newContent').text('');
+
+				},
+				resizable: false,
+				buttons: {
+        			'Change': function(){
+        				var el = $('#canvas .outline-element-clicked');
+
+						//Have to do it this way to keep it resizable	
+						$(el)
+  							.contents()
+  							.filter(function() {
+    							return this.nodeType == 3; //Node.TEXT_NODE
+  							}).replaceWith($('#newContent').val());
+
+						changeContentDialog.dialog('close');
+
+
+        			},
+        			'Cancel': function(){
+            			changeContentDialog.dialog('close');
+        			},
+
+    			}
+
+			});
+	}
+
 	initializeFileUploadDialog = function() {
 		fileUploadDialog = $('<div></div>')
 			.html('	<form action="/img" id="frmsample" name="frmSample" enctype="multipart/form-data" method="post">'+
@@ -251,7 +302,6 @@ var automagicalCss = (function(){
 		initializeCssFunctionality : function(){
 
 
-
 			//When an element on the canvas is clicked, populate the css attributes list
 			$('#canvas .component').live('click', function(){
 					populateAttributesBox(this);
@@ -416,6 +466,7 @@ var automagicalCss = (function(){
 
 
 			initializeFileUploadDialog();
+			initializeChangeContentDialog();
 
 		},
 
@@ -482,6 +533,11 @@ var automagicalCss = (function(){
 
 
 
+		},
+
+		changeCurrentElementContent : function(){
+
+			changeContentDialog.dialog('open');
 		}
 
 

public/src/plugins/jquery.contextMenu.js

@@ -0,0 +1,73 @@
+/**
+ * jQuery.contextMenu - Show a custom context when right clicking something
+ * Jonas Arnklint, http://github.com/arnklint/jquery-contextMenu
+ * Released into the public domain
+ * Date: Jan 14, 2011
+ * @author Jonas Arnklint
+ * @version 1.3
+ *  
+ */
+// Making a local '$' alias of jQuery to support jQuery.noConflict
+(function($) {
+  jQuery.fn.contextMenu = function ( name, actions, options ) {
+      var me = this,
+          menu = $('<ul id="'+name+'" class="context-menu"></ul>').hide().appendTo('body'),
+          active_element = null, // last clicked element that responds with contextMenu
+          hide_menu = function() {
+            $('.context-menu').each(function() {
+              $(this).trigger("closed");
+              $(this).hide();
+            });
+            $('body').unbind('click', hide_menu);
+          }, 
+          default_options = {
+              disable_native_context_menu: false // disables the native contextmenu everywhere you click
+          },
+          options = $.extend(default_options, options);
+
+      $(document).bind('contextmenu', function(e) {
+        if (options.disable_native_context_menu)
+          e.preventDefault();
+        hide_menu();
+      });
+
+      $.each(actions, function(me, item_options) {
+          var menuItem = $('<li><a href="#">'+me+'</a></li>');
+
+          if (item_options.klass)
+            menuItem.attr("class", item_options.klass);
+
+          menuItem.appendTo(menu).bind('click', function(e) {
+              item_options.click(active_element);
+              e.preventDefault();
+          });
+      });
+
+
+      return me.bind('contextmenu', function(e){
+          // Hide any existing context menus
+          hide_menu(); 
+
+          active_element = $(this); // set clicked element
+
+          if (options.showMenu) {
+              options.showMenu.call(menu, active_element);
+          }
+
+          // Bind to the closed event if there is a hideMenu handler specified
+          if (options.hideMenu) {
+              menu.bind("closed", function() {
+                  options.hideMenu.call(menu, active_element);
+              });
+          }
+
+          menu.show(0, function() { $('body').bind('click', hide_menu); }).css({
+            position: 'absolute', 
+            top: e.pageY, 
+            left: e.pageX, 
+            zIndex: 1000 
+          });
+          return false;
+      });
+  }
+})(jQuery);

public/src/toolbox/General/general.json

@@ -418,9 +418,9 @@
 					{
 						"color": "black",
 						"resize": "both",
+						"position": "absolute",
 						"height": "100px",
 						"width": "100px",
-						"position": "absolute",
 						"background": 
 							{
 								"background-color": "white",

public/stylesheets/clientStyles.css

@@ -161,4 +161,31 @@ body{height:100%;}
 	margin: 0px 0px 0px 0px;
 }
 
+
+/* Context Menu STYLING */
+  .context-menu {
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+
+    background-color: #f2f2f2;
+    border: 1px solid #999;
+
+    list-style-type: none;
+    margin: 0; 
+    padding: 0;
+  }
+  .context-menu a {
+    display: block;
+    padding: 3px;
+    text-decoration: none;
+    color: #333;
+  }
+  .context-menu a:hover {
+    background-color: #666;
+    color: white;
+  }
+
+/* END Context Menu STYLING */
+
 /* END Componenet Styling*/

views/client.html

@@ -30,6 +30,9 @@
 
 		<!-- Form JQuery Plugin -->
 		<script src="/src/plugins/jquery.form.js"></script> 
+
+		<!-- ContextMenu JQuery Plugin -->
+		<script src="/src/plugins/jquery.contextMenu.js"></script>