mirror/php-e107
1
0
Fork 0
mirror of https://github.com/e107inc/e107.git synced 2025-04-13 09:01:59 +02:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Cameron 2017-11-10 09:03:04 -08:00
parent c0c1e43a57
commit 0e3c68f0b8
3 changed files with 125 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
e107_handlers/shortcode_handler.php
View File

@ -828,64 +828,88 @@ 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;
"onFocusIn" : function(element){
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>");
$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);
// Show pop-up message.
if(d.msg)
$.post("'.e_WEB_ABS.'js/inline.php",{ content : edited_content, sc: sc, id: id, token: token }, function (data)
{
var alertType = "info";
if(d.status == "ok")
console.log(data);
try
{
alertType = "success";
var d = $.parseJSON(data);
}
catch(e)
{
// Not JSON.
// return;
}
if(d.status == "error")
console.log(d);
if(d.msg)
{
alertType = "danger";
}
if(jQuery().notify)
{
$("#uiAlert").notify({
type: alertType,
message: {text: d.msg},
fadeOut: {enabled: true, delay: 3000}
}).show();
}
if(d.status == "ok")
{
$("#e-editable-front-controls").html("<i class=\"fa fa-fw fa-check\"></i>");
}
if(d.status == "error")
{
$("#e-editable-front-controls").html("<i class=\"fa fa-fw fa-cross\"></i>");
}
}
else
{
alert(d.msg);
// location.reload();
return;
$("#e-editable-front-controls").html("<i class=\"fa fa-fw fa-cross\"></i>");
}
}
});
}
});
$("#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;
}

14
e107_plugins/page/e_shortcode.php
View File

@ -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']))

34
e107_web/css/e107.css
View File

@ -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 }