Improved the front-end inline editing feature. Now has Save and Cancel buttons.

e107_handlers/shortcode_handler.php

@@ -828,66 +828,90 @@ class e_parse_shortcode
 						var sc   = $(this).attr("data-edit-sc");
 						var id      = $(this).attr("data-edit-id");
 						var token    = "'.e_TOKEN.'";
+						var box     = $(this).parent("div, span"); 
+						var container = this; 
 
 						$(this).contentEditable({
 							"placeholder" : "",
-							"onBlur" : function(element){
-								var edited_content = element.content;
 							
-								$.post("'.e_WEB_ABS.'js/inline.php",{ content : edited_content, sc: sc, id: id, token: token }, function (data){
+							  "onFocusIn" : function(element){
-									console.log(data);
+							    var $input = $("<span id=\"e-editable-front-controls\"><span class=\"e-editable-front-save\" ><i class=\"fa fa-fw fa-save\"></i></span><span class=\"e-editable-front-cancel\" ><i class=\"fa fa-fw fa-ban\"></i></span></span>"); 
-							        try
+							   $input.appendTo($(box)).hide().fadeIn(300);
+								$(container).addClass("active");
+				             
+				            },
+							"onFocusOut" : function(element){
+				            //   $(".e-editable-front-save").remove();
+				            }
+				            
+				          
+						});
+						
+						
+						$(box).on("click",".e-editable-front-cancel",function () 
+						{
+					        console.log("Cancelled");
+					        $(container).removeClass("active");
+					        $("#e-editable-front-controls").fadeOut(300, function() { $("#e-editable-front-controls").remove(); });	 
+						}); 
+						
+						$(box).on("click",".e-editable-front-save",function () 
+						{
+							$("#e-editable-front-controls").html("<i class=\"fa fa-fw fa-spin fa-spinner\"></i>");
+						
+					        $(container).removeClass("active");
+					        
+					        var edited_content = $(container).html();
+
+							$.post("'.e_WEB_ABS.'js/inline.php",{ content : edited_content, sc: sc, id: id, token: token }, function (data)
+							{
+								console.log(data);
+								try
+								{
+									var d = $.parseJSON(data);
+								} 
+								catch(e)
+								{
+									// Not JSON.
+								//	return;
+								}
+
+								console.log(d);
+									 
+								if(d.msg)
+								{
+	
+									if(d.status == "ok")
 									{
-										var d = $.parseJSON(data);
+										$("#e-editable-front-controls").html("<i class=\"fa fa-fw fa-check\"></i>");	
-									} catch(e)
-									{
-										// Not JSON.
-										return;
 									}
 											
+									if(d.status == "error")
+									{
+										$("#e-editable-front-controls").html("<i class=\"fa fa-fw fa-cross\"></i>");	
+									}			
 										
-									 console.log(d);
-
-
-
-							// Show pop-up message.
-							if(d.msg)
-							{
-								var alertType = "info";
-
-								if(d.status == "ok")
-								{
-									alertType = "success";
-								}
-
-								if(d.status == "error")
-								{
-									alertType = "danger";
-								}
-
-								if(jQuery().notify)
-								{
-									$("#uiAlert").notify({
-										type: alertType,
-										message: {text: d.msg},
-										fadeOut: {enabled: true, delay: 3000}
-									}).show();
 								}	
 								else
 								{
-									alert(d.msg);
+									$("#e-editable-front-controls").html("<i class=\"fa fa-fw fa-cross\"></i>");	
-								//	location.reload();
-									return;
 								}
-							}
 								
-								});
+								$("#e-editable-front-controls").fadeOut(2000, function() { $(this).remove(); });	 
-							}
+	
+							}) 
+					        
 						}); 
 										
+						
+
 					});
 					
 				
+
+
+
+
 					');
 				}
 			}
@@ -1500,7 +1524,15 @@ class e_parse_shortcode
 
 		$attributes = "title='".LAN_EDIT."' contenteditable='true' class='e-editable-front' data-edit-id='".$id."' data-edit-sc='".$lcode."' ";
 
-		return ($container == 'div') ? "<div ".$attributes." >".$text."</div>" : "<span  ".$attributes."  >".$text."</span>";
+		$ret = ($container == 'div') ?  "<div>" :  "<span>";
+		$ret .= ($container == 'div') ? "<div ".$attributes." >".$text."</div>" : "<span  ".$attributes."  >".$text."</span>";
+
+	//	$ret .= "<span class='input-group-btn'>";
+	//	$ret .= '<span id="'.$lcode."-".$id.'" class="e-editable-front-save" ><i class="fa fa-fw fa-save"></i></span>';
+	//	$ret .= "</span>";
+		$ret .= ($container == 'div') ?  "</div>" :  "</span>";
+
+		return $ret;
 
 	}
 

e107_plugins/page/e_shortcode.php

@@ -166,7 +166,21 @@ class page_shortcodes extends e_shortcode
 			$template = e107::getCoreTemplate('menu',null,true,true);
 
 			$sc = e107::getScBatch('page', null, 'cpage');
+			$editable = array(
+				'table' => 'page',
+				'pid'   => 'page_id',
+				'perms' => '5',
+				'shortcodes' => array(
+					'cpagetitle' => array('field'=>'page_subtitle','type'=>'text', 'container'=>'span'),
+					'cpagebody' => array('field'=>'page_text','type'=>'html', 'container'=>'div'),
+					'cmenubody' => array('field'=>'menu_text','type'=>'html', 'container'=>'div'),
+
+				)
+			);
+
 			$sc->setVars($pageArray[0]);
+			$sc->editable($editable);
+
 			$tpl = varset($pageArray[0]['menu_template'],'default'); // use start template from first row.
 
 			if(!empty($parm['template']))

e107_web/css/e107.css

@@ -325,10 +325,44 @@ optgroup.level-5 { padding-left:4em }
 
 /* Emoticons */
 img.e-emoticon { vertical-align:middle; border:0; width:24px }
+/*
 
 .e-editable-front:hover { background-color:#FCF8E3 }
 .e-editable-front a:hover { background-color:#FCF8E3 }
+
 .e-editable-front:hover:after { content: "\f044"; z-index:10000; position:relative; top:0; right:-5px; margin-right:4px; padding-right:5px; font-family:'FontAwesome'; font-size:0.8em }
+*/
+
+.e-editable-front { position:relative }
+
+.e-editable-front:hover,
+.e-editable-front a:hover { outline: 1px dashed red; }
+
+.e-editable-front.active {  -moz-box-shadow: inset 0 0 5px 2px #888;
+-webkit-box-shadow: inset 0 0 5px 2px#888;
+box-shadow: inset 0 0 5px 2px #888; }
+
+#e-editable-front-controls { position: absolute;
+top: 0px;
+font-size: 20px;
+right: -35px;
+background-color: #424242;
+border-radius:4px;
+padding:5px;
+cursor: pointer;
+    width:35px;
+    color:white;
+}
+
+#e-editable-front-controls .fa-check { color: lawngreen }
+.e-editable-front-save { color: lawngreen; width:35px; display:block;  }
+
+.e-editable-front-cancel {
+    display:block;
+	margin-top:5px;
+	 color: red;
+    width:35px;
+}
 
 
 #uiAlert    { z-index: 10001 }