implement media edit

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);
         }
     };
 

Utils/StringUtils.js

@@ -57,6 +57,61 @@
         return str.replace(new RegExp("^[" + char + "]*"), '');
     };
 
+    jsOMS.htmlspecialchars = [
+        ['&', '&'],
+        ['<', '&lt;'],
+        ['>', '&gt;'],
+        ['"', '&quot;']
+    ];
+
+    /**
+     * 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 = {
-            '&': '&amp;',
-            '<': '&lt;',
-            '>': '&gt;',
-            '"': '&quot;',
-            "'": '&#039;'
-        };
-
-        if (quotes) {
-            map['"'] = '"';
-            map["'"] = "'";
-        }
-
-        return text.replace(/[&<>"']/g, function(m) { return map[m]; });
-    };
 }(window.jsOMS = window.jsOMS || {}));

Utils/oLib.js

@@ -123,6 +123,61 @@
         return str.replace(new RegExp("^[" + char + "]*"), '');
     };
 
+    jsOMS.htmlspecialchars = [
+        ['&', '&'],
+        ['<', '&lt;'],
+        ['>', '&gt;'],
+        ['"', '&quot;']
+    ];
+
+    /**
+     * 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 = {
-            '&': '&amp;',
-            '<': '&lt;',
-            '>': '&gt;',
-            '"': '&quot;',
-            "'": '&#039;'
-        };
-
-        if (quotes) {
-            map['"'] = '"';
-            map["'"] = "'";
-        }
-
-        return text.replace(/[&<>"']/g, function(m) { return map[m]; });
-    };
-
     jsOMS.nearest = function (e, selector) {
         // same level first
         // parent level second