From 7a7f7489b1c462d4cdded5d77bcfcd270ccc7b53 Mon Sep 17 00:00:00 2001 From: Dennis Eichhorn Date: Sun, 2 Feb 2020 18:07:26 +0100 Subject: [PATCH] implement media edit --- UI/Component/Form.js | 19 +++++----- Utils/StringUtils.js | 82 +++++++++++++++++++++++++++++--------------- Utils/oLib.js | 72 +++++++++++++++++++++++++++++--------- 3 files changed, 120 insertions(+), 53 deletions(-) diff --git a/UI/Component/Form.js b/UI/Component/Form.js index d6a046e..53b6d7e 100644 --- a/UI/Component/Form.js +++ b/UI/Component/Form.js @@ -16,6 +16,9 @@ import { FormView } from '../../Views/FormView.js'; * @version 1.0.0 * @since 1.0.0 * + * data-ui-content = what is the main parent + * data-ui-element = what are the elements to replace + * * @tood Orange-Management/jsOMS#60 * On change listener * Allow to add a on change listener in a form. This should result in automatic submits after changing a form. @@ -758,10 +761,6 @@ export class Form ); });*/ - /** - * @todo Orange-Management/jsOMS#86 - * On edit replace add button with save and cancel - */ jsOMS.addClass(this, 'hidden'); const saveButtons = self.forms[id].getSave(); @@ -859,7 +858,8 @@ export class Form } parentsContent.push( - selector.length === 0 ? this.closest(closest) : this.closest(closest).querySelector(subSelector) + selector.length === 0 ? this.closest(closest) : this.closest(closest).querySelector(subSelector).parentNode + /* parentNode because of media edit. maybe I need a data-ui-parent element? */ ); values = values.concat( @@ -930,6 +930,7 @@ export class Form } } + // todo bind failure here, if failure do cancel, if success to remove edit template self.submit(self.forms[id]); self.removeEditTemplate(this, id); }); @@ -1134,10 +1135,10 @@ export class Form case 'pre': case 'article': case 'section': - src.innerHTML = value; + src.innerHTML = jsOMS.htmlspecialchars_encode(value); break; default: - src.value = value; + src.value = jsOMS.htmlspecialchars_decode(value); } }; @@ -1148,13 +1149,13 @@ export class Form case 'pre': case 'article': case 'section': - src.innerHTML = value; + src.innerHTML = jsOMS.htmlspecialchars_encode(value); break; case 'textarea': // textarea only has value data in it's content and nothing else! break; default: - src.value = value; + src.value = jsOMS.htmlspecialchars_decode(value); } }; diff --git a/Utils/StringUtils.js b/Utils/StringUtils.js index e488626..d7a73b0 100644 --- a/Utils/StringUtils.js +++ b/Utils/StringUtils.js @@ -57,6 +57,61 @@ return str.replace(new RegExp("^[" + char + "]*"), ''); }; + jsOMS.htmlspecialchars = [ + ['&', '&'], + ['<', '<'], + ['>', '>'], + ['"', '"'] + ]; + + /** + * Encode none-html string + * + * @param {string} str String to encode + * + * @return {string} + * + * @since 1.0.0 + */ + jsOMS.htmlspecialchars_encode = function(str) + { + let escaped = str; + const length = jsOMS.htmlspecialchars.length; + + for (let i = 0; i < length; ++i) { + escaped = escaped.replace( + new RegExp(jsOMS.htmlspecialchars[i][0], 'g'), + jsOMS.htmlspecialchars[i][1] + ); + } + + return escaped; + }; + + /** + * Decode html string + * + * @param {string} str String to encode + * + * @return {string} + * + * @since 1.0.0 + */ + jsOMS.htmlspecialchars_decode = function(str) + { + let decoded = str; + const length = jsOMS.htmlspecialchars.length; + + for (let i = 0; i < length; ++i) { + decoded = decoded.replace( + new RegExp(jsOMS.htmlspecialchars[i][1], 'g'), + jsOMS.htmlspecialchars[i][0] + ); + } + + return decoded; + }; + /** * Validate json string * @@ -158,31 +213,4 @@ return haystack.slice(min); }; - - /** - * Encodes special html characters - * - * @param {string} text String to encode - * @param {boolean} quotes Should quotes be allowed - * - * @return {string} - * - * @since 1.0.0 - */ - jsOMS.htmlspecialchars = function (text, quotes) { - let map = { - '&': '&', - '<': '<', - '>': '>', - '"': '"', - "'": ''' - }; - - if (quotes) { - map['"'] = '"'; - map["'"] = "'"; - } - - return text.replace(/[&<>"']/g, function(m) { return map[m]; }); - }; }(window.jsOMS = window.jsOMS || {})); diff --git a/Utils/oLib.js b/Utils/oLib.js index d7b2e0d..ef2747f 100644 --- a/Utils/oLib.js +++ b/Utils/oLib.js @@ -123,6 +123,61 @@ return str.replace(new RegExp("^[" + char + "]*"), ''); }; + jsOMS.htmlspecialchars = [ + ['&', '&'], + ['<', '<'], + ['>', '>'], + ['"', '"'] + ]; + + /** + * Encode none-html string + * + * @param {string} str String to encode + * + * @return {string} + * + * @since 1.0.0 + */ + jsOMS.htmlspecialchars_encode = function(str) + { + let escaped = str; + const length = jsOMS.htmlspecialchars.length; + + for (let i = 0; i < length; ++i) { + escaped = escaped.replace( + new RegExp(jsOMS.htmlspecialchars[i][0], 'g'), + jsOMS.htmlspecialchars[i][1] + ); + } + + return escaped; + }; + + /** + * Decode html string + * + * @param {string} str String to encode + * + * @return {string} + * + * @since 1.0.0 + */ + jsOMS.htmlspecialchars_decode = function(str) + { + let decoded = str; + const length = jsOMS.htmlspecialchars.length; + + for (let i = 0; i < length; ++i) { + decoded = decoded.replace( + new RegExp(jsOMS.htmlspecialchars[i][1], 'g'), + jsOMS.htmlspecialchars[i][0] + ); + } + + return decoded; + }; + /** * Count string in string * @@ -525,23 +580,6 @@ return haystack.slice(min); }; - jsOMS.htmlspecialchars = function (text, quotes) { - let map = { - '&': '&', - '<': '<', - '>': '>', - '"': '"', - "'": ''' - }; - - if (quotes) { - map['"'] = '"'; - map["'"] = "'"; - } - - return text.replace(/[&<>"']/g, function(m) { return map[m]; }); - }; - jsOMS.nearest = function (e, selector) { // same level first // parent level second