From 0e3c68f0b86331271fe8e08c31bcdf82f06b104a Mon Sep 17 00:00:00 2001 From: Cameron Date: Fri, 10 Nov 2017 09:03:04 -0800 Subject: [PATCH] Improved the front-end inline editing feature. Now has Save and Cancel buttons. --- e107_handlers/shortcode_handler.php | 122 ++++++++++++++++++---------- e107_plugins/page/e_shortcode.php | 14 ++++ e107_web/css/e107.css | 34 ++++++++ 3 files changed, 125 insertions(+), 45 deletions(-) diff --git a/e107_handlers/shortcode_handler.php b/e107_handlers/shortcode_handler.php index 21e2dc45c..14f2583f1 100644 --- a/e107_handlers/shortcode_handler.php +++ b/e107_handlers/shortcode_handler.php @@ -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 = $(""); + $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(""); + + $(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(""); + } + + if(d.status == "error") + { + $("#e-editable-front-controls").html(""); + } + + } else { - alert(d.msg); - // location.reload(); - return; + $("#e-editable-front-controls").html(""); } - } - - }); - } - }); + + $("#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') ? "
".$text."
" : "".$text.""; + $ret = ($container == 'div') ? "
" : ""; + $ret .= ($container == 'div') ? "
".$text."
" : "".$text.""; + + // $ret .= ""; + // $ret .= ''; + // $ret .= ""; + $ret .= ($container == 'div') ? "
" : ""; + + return $ret; } diff --git a/e107_plugins/page/e_shortcode.php b/e107_plugins/page/e_shortcode.php index 1ea9c314d..1811059e6 100644 --- a/e107_plugins/page/e_shortcode.php +++ b/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'])) diff --git a/e107_web/css/e107.css b/e107_web/css/e107.css index 400971065..1fc76704b 100644 --- a/e107_web/css/e107.css +++ b/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 }